Bootstrap چیست؟

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

Bootstrap چیست؟

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

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

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

ما فقط کلاس های خاص و از پیش تعریف شده را استفاده میکنیم که در فایل های Bootstrap برای انجام یک کار خاص تعریف شده است.

یک مثال ساده از بوت استرپ

<button type = “button” class = “btn btn-success btn-lg”> دکمه موفقیت بزرگ </button>

همانطور که می بینید کد HTML یک دکمه معمولی است، فقط در قسمت class ما btn، btn-success و btn-lg داریم که همه آنها در مجموع یک دکمه سبز بزرگ برای ما ایجاد می کنند.

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

http://getbootstrap.com

و اکنون به مهمترین نکته در چارچوب می پردازیم:

Bootstrap Grid System

سیستمی که سایت را به صورت سطر و ستون می سازد، و این باعث می شود که سایت ریسپانسیو باشد و بتواند روی تمام اندازه صفحه نمایش در دیوایس ها مختلف به خوبی کار کند.

به عنوان مثال، تقسیم سایت در تصویر برای صفحه های بزرگ است، اما در مورد تبلت یا تلفن همراه، فرمت متفاوت خواهد بود، برای اینکه کاربران سایت بتواند وب سایت را به روشی آسان تر مرور کند، به این شکل خواهد بود.

توجه داشته باشید که نوار کناری در زیر پست ها قرار گرفته است و اجازه می دهد هر دو آنها در صفحه کوچک گسترش یابند و البته این کار را می توان بدون Bootstrap هم انجام داد، اما با بوت استرپ بسیار ساده تر است و خودتان این را خواهید دید و لمس خواهید کرد.

گرید سیستم Bootstrap چگونه کار میکند؟

Bootstrap به شما امکان می دهد در عرض صفحه را به 12 ستون تقسیم کنید و ساختار مناسبی برای هر محتوا ایجاد کنید.

یک یا چند ستون را می توان با هم ترکیب کرد تا یک ستون گسترده تر ایجاد شود، مثلا یک ستون 12 تایی یا سه ستون 4 تایی در کنار هم که 12 ستون را تشکیل می دهند.

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

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

1. xs برای موبایل
2. sm برای تبلت
3. md برای دستگاه معمولی
4. lg برای دستگاه های بزرگ

قواعد اصلی Bootstrap

• برای عرض صفحه ثابت کلاس های row که بعنوان هر ردیف استفاده می شوند باید در داخل container باشند و یا container-fluid برای عرض کامل باشد
• row برای ایجاد مجموعه ای افقی از ستون ها استفاده می شود تمامی ستون های موجود در یک ردیف row محسوب می شوند
• محتوا باید فقط در داخل ستون ها قرار گیرد که به آنها col می گوییم که هر کدام از اعداد نارنجی تصویر بالا را یک col در نظر میگیریم

یک تکه کد کامل برای استفاده از Bootstrap

<div class = “container”>

<div class = “row”>

<div class = “col-*-*”> </div>

</div>

<div class = “row”>

<div class = “col -*-*”> </div>

<div class =” col-*-*”> </div>

<div class =” col-*-*”> </div>

</div>

<div class = “row”>

…

</div>

</div>

توضیح کد

اگر بخواهیم برای مثال بالا با توجه به توضیحات قبل ستون ها را سایز بندی کنیم باید تعداد ستون های مورد نیازمان را بجای هر *- * در بخش اول یکی از عبارت های xs, sm, md, lg بخش دو را با اعداد مناسب بین 1 تا 12 جایگزین کنیم.

برای ایجاد و تقسیم افقی از سایت به سه بخش، تعداد ستون در هر بخش 4 خواهد بود، یعنی سه ستون 4 تایی که در مجموع 12 ستون یعنی یک سطر کامل را تشکیل می دهند.

بنابراین هر کدام از آنها دارای کلاس col-sm-4 خواهند بود، البته به سلیقه خودتان sm را می توان با md، lg یا xs جایگزین کنید، حتی می توانید چند ترکیب را در کنار هم استفاده کنید که مثلا برای موبایل 12 ستونی و برای دسکتاپ 4 ستونی در نظر گرفته شود و برای هر دیوایس واکنش مربوط به خود را نشان خواهد داد و به خوبی کار میکند.