آموزش بوت استرپ (Bootstrap)

دسته بندی: آموزش طراحی وب

در این صفحه می خوانید :

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

بوت استرپ یک چارچوب رایگان و متن باز برای توسعه سریع تر و ساده تر وب است و شامل قالب های HTML و CSS مبتنی بر تایپوگرافی، فرم ها، دکمه ها، جداول، ناوبری، Modals، چرخش تصویر و بسیاری امکانات دیگر، و همچنین افزونه های جاوااسکریپت است.بوت استرپ همچنین به شما امکان می دهد تا به راحتی طرح های واکنش گرا (Responsive) ایجاد کنید. دراین فریمورک از شیوه گرید بندی برای چیدمان صفحات وب استفاده می کند. بوت‌استرپ مجموعه‌ای برای ساخت ظاهری وب سایت‌ها و برنامه‌های وب است.

 بوت‌استرپ یک پروژه محبوب در GitHub است که توسط NASA و MSNBC و بسیاری دیگر ازسایت ها استفاده شده است. با استفاده از اطلاعات رابط برنامه‌نویسی (API) در بوت استرپ می‌توان اجزاء واسط پیشرفته مانند scroll spy و تکمیل کننده خودکار کلمات (typeahead) را بدون نیاز به نوشتن حتی یک خط کد جاوا اسکریپت ایجاد نمود.

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

دلایل زیادی برای استفاده از بوت استرپ وجود دارد.

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

بوت استرپ یک چارچوب وب است که بر روی ساده سازی توسعه صفحات وب تمرکز دارد. هدف اولیه اضافه کردن آن به یک پروژه وب این است که انتخاب رنگ، اندازه، فونت و طرح را برای آن پروژه براحتی اعمال شود. به همین ترتیب، فاکتور اصلی این است که آیا توسعه دهندگان این گزینه ها را به دلخواه خود می یابند. Bootstrap پس از اضافه شدن به یک پروژه، تعاریف سبک پایه را برای تمام عناصر HTML فراهم می کند. نتیجه نهایی ظاهر یکنواخت برای متن، جداول و عناصر فرم در مرورگرهای وب است. علاوه بر این، توسعه دهندگان می توانند از کلاس های CSS تعریف شده در Bootstrap  استفاده کنند تا ظاهر محتوا را سفارشی کنند. به عنوان مثال در Bootstrap  جداول با رنگ های روشن و تیره، عنوان صفحه، نقل قول های برجسته تر و متن با هایلایت ارائه شده است.

بوت استرپ همچنین دارای اجزای جاوا اسکریپت در قالب پلاگین های جی کوئری می باشد. آنها عناصر رابط کاربری اضافی مانند dialog boxes، tooltips ، carousels را فراهم می کنند. هر جزء بوت استرپ شامل یک ساختار HTML، اعلامیه CSS  و در برخی موارد همراه با کد جاوا اسکریپت است. همچنین عملکرد برخی از عناصر رابط کاربری مانند توابع auto-complete برای فیلدهای ورودی، توسعه یافته است.

مهمترین اجزای بوت استرپ اجزای طرح (Layout) آن است، زیرا روی یک صفحه وب تاثیر می گذارند. طرح اولیه یا پایه "Container"  نامیده می شود و عناصر صفحه در آن قرار دارد. توسعه دهندگان می توانند از بین Container های fixed-width  و fluid-width انتخاب کنند.

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

بوت استرپ توسط Mark Otto و Jacob Thornton در توییتر توسعه داده شد و در ماه اوت 2011 در GitHub به عنوان یک محصول متن باز منتشر شد. در ابتدا قرار نبود به صورت عمومی منتشر شود اما با این وجود، توییتر Bootstrap را بصورت متن باز و رایگان به عنوان یک فریم ورک طراحی وب سایت در اختیار دیگران قرارداد. در ژوئن 2014، بوت استرپ پروژه No.1 در GitHub بود!

قبل از بوت استرپ، کتابخانه های مختلف برای توسعه ی رابط کاربری مورد استفاده قرار می گرفت، که منجر به عدم تناسب و بار نگهداری بالا میشد. پس از چند ماه توسعه توسط یک گروه کوچک، بسیاری از توسعه دهندگان در توییتر شروع به کمک به این پروژه نمودند. این برنامه از Twitter Blueprint به Bootstrap نامگذاری شد و به عنوان یک پروژه منبع باز در 19 اوت 2011 منتشر شد. این امر همچنان توسط Mark Otto و Jacob Thornton و گروه کوچکی از توسعه دهندگان اصلی و همچنین یک جامعه بزرگ مشارکت کنندگان حفظ شده است.

در 31 ژانویه 2012، Bootstrap 2 منتشر شد که پشتیبانی داخلی از Glyphicons، اجزاء جدید و همچنین تغییرات بسیاری دراجزای موجود را اضافه کرد. این نسخه از طراحی وب واکنش گرا پشتیبانی می کند، یعنی صفحه بندی صفحات وب به طور پویا با توجه به ویژگی های دستگاه مورد استفاده (دسکتاپ، تبلت، تلفن همراه و ...) تنظیم می شود.

نسخه اصلی بعدی، Bootstrap 3 در تاریخ 19 اوت 2013 منتشر شد. دراین نسخه اجزاء دوباره طراحی شدند تا از طراحی تخت و رویکرد تلفن همراه استفاده کنند.

اولین نسخه آلفا Bootstrap4 در تاریخ 19 اوت 2015 و همچنین اولین نسخه بتا در تاریخ 10 اوت 2017 منتشر شد. Bootstrap4 در تاریخ 18 ژانویه 2018 نهایی شد. تغییرات زیادی در این نسخه اتفاق افتاد که عبارتند از :

  • بازنویسی مجدد کد اصلی
  • جایگزین کردنLess با Sass
  • عدم پشتیبانی ازIE9 و نسخه های پایین تر و iOS 6
  • پشتیبانی از Flexible Box در CSS
  • اضافه کردن گزینه سفارشی سازی ناوبری
  • اضافه کردن فضاهای واکنش گرا و ابزارهای اندازه گیری
  • استفاده از واحد rem به جای  pxدر CSS
  • افزایش اندازه فونت جهانی از 14 پیکسل تا 16 پیکسل
  • حذف پانل ها، تصاویر بند انگشتی، پیجرها، و well componentها
  • حذف Glyphicons ها
  • افزایش Class های مفید
  • تغییر ظاهر گرافیکی به شکل Flat
  • توسعه و اصلاح استایل های فرم ها، دکمه ها، منوهای کشویی، اشیای رسانه ای و کلاس های تصویر

بوت استرپ 4 از آخرین نسخه های گوگل کروم، فایرفاکس، اینترنت اکسپلورر، اپرا و سافاری پشتیبانی می کند.

نسخه Bootstrap5 بزودی نسخه اصلی این چارچوب خواهد شد که شامل تغییرات زیر است :

  • استفاده از native JavaScript بجای jQuery library
  • عدم پشتیبانی از  IE10
  • تغییر تست زیرساخت از QUnit به Jasmine

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

  • استفاده آسان (Easy to use): هر کسی که فقط دانش پایه ای از HTML و CSS داشته باشد می تواند استفاده از بوت استرپ را شروع کند.
  • ویژگی های واکنش گرا (Responsive features): بوت استرپ صفحات وب را به صورت کاملا مناسب در دستگاه‌های مختلف مانند موبایل، تبلت، رایانه دسک تاپ و صفحه نمایش‌های گوناگون براحتی نمایش می دهد.
  • رویکرد تلفن همراه (Mobile-first approach): در بوت استرپ 3، سبک های تلفن همراه برای اولین بار بخشی از هسته ی فریمورک هستند.
  • سازگاری مرورگر: بوت استرپ سازگار با تمام مرورگرهای مدرن مانند  Chrome، Firefox، Internet Explorer، Edge، Safari، Opera می باشد.

معایب بوت استرپ

  • حجم زیاد
  • به روز رسانی دشوار
  • کاهش خوانایی کد
  • شباهت وب سایت های ساخته شده با بوت استرپ

دانلود بوت استرپ

دو راه برای شروع استفاده از Bootstrap در وب سایت شما وجود دارد :
- دانلود بوت استرپ از getbootstrap.com
- استفاده از  CDN : اگر نمی خواهید خودتان بوت استرپ را دانلود و میزبانی کنید، می توانید از یک CDN استفاده کنید.

MaxCDN پشتیبانی CDN برای CSS و جاوا اسکریپت Bootstrap را فراهم می کند. شما همچنین باید jQuery را وارد کنید.

مزیت استفاده از Bootstrap CDN

بسیاری از کاربران هنگام بازدید از یک سایت دیگر، قبلا بوت استرپ را از MaxCDN دانلود کرده اند. در نتیجه زمانیکه افراد از سایت شما بازدید می کنند، Bootstrap از کش دانلود می شود که این مسئله باعث افزایش سرعت بارگذاری می شود. علاوه بر آن اکثر شبکه های تحویل محتوا (CDN) مطمئن هستند که زمانیکه کاربر درخواست یک فایل را دارد، آن درخواست توسط نزدیک ترین سرور پاسخ داده خواهد شد که این هم باعث افزایش سرعت بارگذاری می شود.

بوت استرپ از jQuery برای پلاگین های جاوا اسکریپت استفاده می کند، مانند modals، tooltipsها وغیره. با این حال، اگر شما فقط از بخش CSS بوت استرپ استفاده کنید، به jQuery نیاز ندارید.

 

ایجاد اولین صفحه ی وب با Bootstrap

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

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

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

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

بوت استرپ همچنین نیاز به یک عنصر حاوی محتویات سایت را دارد. دو کلاس container برای انتخاب وجود دارد:

  • کلاس container : عرض ثابت واکنش گرا را فراهم می کند.
  • کلاس: Container-fluid  تمام عرض صفحه را پوشش می دهد.

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">   <h1>My First Bootstrap Page</h1>   <p>This is some text.</p> </div>

</body> </html>

نمونه کد صفحه اصلی بوت استرپ با عرض کامل (container-fluid) :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">   <h1>My First Bootstrap Page</h1>   <p>This is some text.</p> </div>

</body> </html>

 

آیا این نوشته را دوست داشتید؟