بوت استرپ چیست؟

Wiki

  • بوت استرپ یک فریم ورک سمت کلاینت است و با استفاده از آن می توان به سرعت  و به سادگی صفحات وب را ایجاد نمود.
  • بوت استرپ از HTML و CSS استفاده می کند و به سادگی دکمه ها و فرم ها و جدول ها و ... را برای ما به طور مناسب استایل دهی می کند. 
  • محبوبیت بوت استرپ همچون پلاگین های جاوا اسکریپت است.
  • بوت استرپ به ما امکان می دهد تا به آسانی قالب های واکنش گرا را ایجاد کنیم. 
Note

طراحی واکنش گرا در وب چیست؟

طراحی واکنش گرای وب عبارت است از ساختن وب سایت هایی که به طور اتوماتیک، خودشان را برای خوب نمایش یافتن در تمام دستگاه ها، از تلفن های کوچک گرفته تا انواع رایانه های بزرگ، تنظیم می کنند.

تاریخچه ی بوت استرپ

Wiki

بوت استرپ توسط مارک اوتو و جاکوب تورنتون در تویتر ساخته شده است و بصورت یک محصول متن باز در آگوست 2011 در گیتهاب (GitHub) منتشر شده است.

نکته: در تاریخ  ژون 2014، بوت استرپ پروژه ی شماره 1 در سایت گیتهاب بود.

چرا از بوت استرپ استفاده کنیم؟

Wiki

امتیازات بوت استرپ:

  • استفاده آسان: هر فرد با یک دانش ابتدایی از HTML و CSS می تواند شروع به استفاده از بوت استرپ نماید.
  •  واکنش گرا بودن: کدهای واکنش گرای css  بوت استرپ برای موبایل ها، تبلت ها و کامپیوترها تنظیم شده اند.
  •  پاسخگرا بودن به موبایل: در بوت استرپ 3، استایل های پاسخگرا به موبایل، قسمتی از هسته ی این فریم ورک را تشکیل می دهند.
  • سازگاری با مرورگرها: بوت استرپ سازگار با تمام مرورگرهای مدرن می باشد(کروم، فایرفاکس، اینترنت اکسپلورر و سافاری و اپرا).

بوت استرپ را از کجا دریافت  کنیم؟

Wiki

دو راه برای شروع استفاده از بوت استرپ بر روی سایت ها وجود دارد:

1. شما می توانید بوتسترپ را از سایت getbootstrap.com دانلود کنید.

2. شما می توانید بوت استرپ را به وسیله ی یک CDN اضافه کنید.

1- دانلود کردن بوت استرپ

در صورتی که می خواهید بوت استرپ را دانلود کرده و آن را در هاست خود ذخیره کنید، می توانید به سایت getbootstrap.com بروید و دستورالعمل های نوشته شده در آنجا را انجام دهید.

2- اضافه کردن بوت استرپ از یک CDN

اگر نمی خواهید بوت استرپ را دانلود کنید و آن را در هاست خود ذخیره کنید، می توانید آن را از یک CDN(شبکه ی تحویل محتوا) اضافه کنید.

سایت MaxCDN، از فایل های سی اس اس و جاوااسکریپت بوت استرپ و همچنین از جی کوئری، پشتیبانی می کند.

MaxCDN:

<!-- اضافه کردن آخرین فایل سی اس اس -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- کتابخانه ی جی کوئری -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- فایل جاوا اسکریپت بوت استرپ -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Note

یک امتیاز در استفاده از CDN برای بوت استرپ:

اکثر کاربرهای اینترنت، وقتی که به سایت های دیگر سر می زنند، بوت استرپ در مرورگر آنها دانلود می شود، پس اگر این کاربران از سایت شما نیز بازدید کنند (که از بوت استرپ استفاده می کند)، نیازی ندارند که دوباره بوت استرپ را دانلود کنند و این باعث افزایش سرعت بارگذاری سایت شما می شود. 

ایجاد اولین صفحه ی وب با  استفاده از بوت استرپ

Wiki

1.اضافه کردن اعلان doctype

بوت استرپ از عناصر HTML و CSS استفاده می کند و این دستورات، نیاز دارند تا از اعلان doctype استفاده کنیم. 

سعی کنید همیشه اعلان  doctype را در ابتدای صفحه اضافه کنید، و همچنین خصوصیت lang و charset را تنظیم کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2.بوت استرپ 3، واکنش گرا به موبایل می باشد:

بوت استرپ 3 طوری طراحی شده است، تا نسبت به دستگاه های موبایل واکنش گرا باشد. استایل های پاسخگرا به مبایل قسمتی از هسته ی این فریم ورک  می باشند.

برای اینکه مطمئن شوید که زوم کردن در دستگاه های لمسی، به خوبی کار می کند، تگ متای زیر را در داخل عنصر <head> قرار دهید:

<meta name="viewport" content="width=device-width, initial-scale=1">

دستور width=device-width بررسی می کند که عرض صفحه وب شما برابر با عرض  دستگاه های مختلف قرار گیرد. 

دستور initial-scale=1 به هنگام لود شدن صفحه توسط مرورگر وب، میزان زوم اولیه را مشخص می کند. 

3. ظرف ها(containers) را اضافه کنید:

در بوت استرپ، برای بسته بندی کردن محتوای سایت، باید از یک container استفاده کنید. برای انجام این کار، دو کلاس وجود دارند:

1. کلاس container. :   این کلاس یک ظرف واکنش گرا با عرض ثابت را ایجاد می کند.  به عبارت دیگر، با استفاده از این کلاس شما می توانید یک سایت با عرض ثابت داشته باشید. به طوری که از سمت چپ و راست کمی فاصله داشته باشد.

2. کلاس container-fluid. :   این کلاس یک ظرف با عرض کامل ایجاد می کند. به عبارت دیگر، با استفاده از این کلاس سایت شما کل عرض صفحه را می پوشاند. و سایت شما  از کناره ها هیچ فاصله ای نخواهد داشت. 

نکته: ظرف ها نمی توانند تو در تو باشند، به عبارت دیگر، نمی توانید یک ظرف را در یک ظرف دیگر قرار دهید.

ایجاد دو صفحه ی ساده، با بوت استرپ 

Wiki

مثال زیر، کدهای یک صفحه ی بوتسترپ را نشان می دهد(با استفاده از یک ظرف واکنش گرا با عرض ثابت):

مثال (شروع کار با بوت استرپ)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>مثال بوتسترپ</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>اولین صفحه بوتسترپ من</h1>
  <p>این یک متن است</p>
</div>

</body>
</html>

خودتان امتحان کنید »

مثال زیر، کدهای یک صفحه ی ساده بوت استرپ را نشان می دهد(با استفاده از یک ظرف با عرض کامل):

مثال (شروع کار با بوت استرپ)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>مثال بوتسترپ</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>اولین صفحه ی بوتسترپ من</h1>
  <p>این یک متن است</p>
</div>

</body>
</html>
</div>

خودتان امتحان کنید »