بوت استرپ توسط Mark Otto و Jacob Thornton در شبکه توییتر توسعه داده شد و به صورت متن باز در GitHub منتشر شد.
Bootstrap برای توسعه دهندگان وب، یک فریم ورک HTML، CSS و Javascript محبوب محسوب می شود.
Bootstrap چیست ؟
بوت استرپ یک فریم ورک پیش فرض است که کار توسعه وب سایت را آسان تر و سریع تر می کند و از همه مهم تر استفاده از آن کاملا رایگان است.
این فریم ورک الگوهای طراحی مبتنی بر HTML و CSS را ارائه می دهد. یعنی در فریم ورک بوت استرپ با استفاده از این زبان ها فرم ها، جداول، ناوبری ها، نوع نمایش تصاویر، تایپوگرافی و … طراحی می شوند.
علاوه بر آن می تواند از افزونه های جاوا اسکریپت نیز استفاده کند.
توجه داشته باشید که طرح های ایجاد شده در بوت استرپ همه به صورت ریسپانسیو هستند.
قبل از یادگیری بو استرپ حتما لازم است که به زبان های برنامه نویسی HTML و CSS نیز مسلط باشید.
منظور از وب سایت ریسپانسیو یا واکنش گرا چیست؟
به وب سایتی ریسپانسیو گفته می شود که به طور خودکار بتواند هنگام نمایش، اندازه خود را در تمام دستگاه ها تنظم کند و خوب به نظر برسد.
چرا از بوت استرپ استفاده می شود؟
- استفاده از بوت استرپ بسیار آسان است.
- هر شخصی که به اندازه کافی به زبان های برنامه نویسی CSS و HTML مسلط باشد، می تواند به راحتی از Bootstrap استفاده کند.
- به کاربران امکان میدهد یک وب سایت ریسپانسیو یا واکنش گرا ایجاد کنند.
- بوت استرپ با اکثر مرورگر ها از جمله chrome، Firefox، Internet Explorer، Safari و … سازگار است.
پکیج های Bootstrap شامل چه مواردی هستند ؟
Scaffolding : یک ساختار اساسی با Grid System، link styles و پس زمینه را ارائه می دهد.
CSS : بوت استرپ دارای ویژگی تنظیمات جهانی CSS، استایل عناصر اصلی HTML و یک سیستم شبکه پیشرفته است.
Components : بوت استرپ شامل اجزای زیادی است که به صورت مجدد قابل استفاده هستند. که این کامپوننت ها برای ارائه iconography, dropdowns, navigation, alerts, pop-overs و غیره ساخته شده است.
JavaScript Plugins : بوت استرپ همچنین شامل بسیاری از افزونه های سفارشی jQuery است. که به راحتی می توانید همه آنها را به صورت یکجا و یا یکی یکی در فریم ورک خود قرار دهید.
Customize : اجزای بوت استرپ قابل تنظیم هستند و می توانید آنها را با متغیرهای کمتر و افزونه های jQuery برای خود سفارش سازی کنید.
Bootstrap 4 چه تفاوتی با Bootstrap 3 دارد؟
Bootstrap 4 جدیدترین نسخه ارائه شده بوت استرپ است. تفاوت آن با Bootstrap 3 در قابلیت های آن است و از نظر محیط تفاوت زیادی با هم ندارند. این تفاوت ها شامل قابلیت های جدید، stylesheet سریعتر، دکمه ها، جلوه ها و ریسپانسیو بودن بیشتر است.
در حال حاضر Bootstrap 4 آخرین و پایدارترین نسخه بوت استرپ است که همه مرورگر ها و سیستم عامل های کاربردی از آن پشتیبانی می کنند.
آیا بوت استرپ بهترین انتخاب در بین فریم ورک های توسعه وب است؟
در صورتی که شما تجربه زیادی در طراحی وب سایت ندارید، بوت استرپ بهترین انتخاب برای ایجاد اولین وب موبایل و ریسپانسیو است. اما نمی توان گفت در صنعت تکنولوژی و وب بهترین انتخاب است!
در حال حاضر علاوه بر بوت استرپ فریم ورک ههای بسیار دیگری نیز ارائه شده اند که در مقاله مقایسه فریم ورک React و فریم ورک Angular به بررسی کاربردی ترین موارد آنها پرداختیم.
هنگام افزودن HTML5 doctype در bootstrap به موارد زیر توجه داشته باشید:
همانطور که گفتیم بوت استرپ از عناصر HTML و خواص CSS استفاده می کند. بنابراین شما باید نوع HTML5 را در ابتدای صفحه با ویژگی LANG و مجموعه کاراکتر صحیح اضافه کنید.
<!DOCTYPE html>
<html lang=”en”>
<head><meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>Any title</title>
</head>
<body>
//write code
</body>
</html>
کانتینر ها در بوت استرپ
در بوت استرپ از کانتینرها برای دسته بندی محتویات سایت استفاده می شود. کانتینر های در بوت استرپ شامل عناصر ردیف هستند که این عناصر ردیف، محفظه ستون ها هستند و به عنوان سیستم شبکه (grid system) شناخته شده اند. به صورت کلی دو کلاس کانتینر وجود دارد:
.container class :
یک کانتینر ریسپانسیو همراه با یک عرض ثابت ارائه می دهد.
.container-fluid :
یک کانتینر با عرض کامل را ارائه میدهد که تمام عرض نماها را پوشش می دهد.
در مثال زیر طرح اولیه یک کانتینر را مشاهده می شود :
<html>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-md-xx”></div>
…
</div>
<div class=”row”>
<div class=”col-md-xx”></div>
…
</div>
</div>
</body>
</html>
حال به کانتینر بوت استرپ توجه کنید:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Job</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
</head>
<body>
<div class=”container”>
<h1>Container</h1>
<p>container content</p>
</div>
<div class=”container-fluid”>
<h1>Container-fluid</h1>
<p>container-fluid content</p>
</div>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
</body>
</html>
