طراحی سایت ریسپانسیو با بوت استرپ Bootstrap

مقدمه 

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

در مرحله اول لازم است فایل های مربوط به Bootstrap را از وب سایت اصلی دانلود نمایید که برای انجام این کار لازم است به وب سایت http://getbootstrap.com مراجعه نموده و بر روی کلید Download Bootstrap کلیک نموده و دوباره بر روی Download Bootstrap کلیک نمایید. فایل فشرده ای در اختیار شما قرار داده می شود که شامل سه فلدر css ، fonts و js می باشد. این فلدرها را در ریشه اصلی وب سایت و یا قالب ساخته شده خود کپی نمایید. در صورتی که در حال طراحی قالب در جوملا و یا وردپرس هستید می بایست این فلدرها را در فلدر اصلی قالب ساخته شده خود بارگذاری نمایید.

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

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

Bootstrap برای چه مواردی استفاده می شود؟

بوت استرپ طراحی وب ریسپانسیو را به واقعیت تبدیل می کند. این امکان را برای یک صفحه وب یا برنامه فراهم می کند تا اندازه و جهت صفحه بازدید کننده را تشخیص دهد و به طور خودکار نمایشگر را مطابق با آن تطبیق دهد. رویکرد اول موبایل فرض می‌کند که گوشی‌های هوشمند، تبلت‌ها و اپلیکیشن‌های موبایلی خاص، ابزار اصلی کارمندان برای انجام کار هستند. بوت استرپ به الزامات این فناوری ها در طراحی می پردازد و شامل اجزای رابط کاربری، طرح بندی ها، ابزارهای جاوا اسکریپت و چارچوب پیاده سازی می شود. این نرم افزار به صورت پیش کامپایل شده یا به عنوان کد منبع موجود است. Mark Otto و Jacob Thornton Bootstrap را در توییتر توسعه دادند تا سازگاری ابزارهای مورد استفاده در سایت را بهبود بخشد و تعمیر و نگهداری را کاهش دهد. این نرم افزار قبلاً با نام Twitter Blueprint شناخته می شد و گاهی اوقات به عنوان Twitter Bootstrap شناخته می شود.

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

در محاسبات، اصطلاح بوت استرپ به معنای راه اندازی یا بارگذاری یک برنامه در رایانه با استفاده از یک برنامه اولیه بسیار کوچکتر برای بارگذاری در برنامه مورد نظر است که معمولاً یک سیستم عامل است.

Bootstrap CSS چیست؟

محبوب ترین فریم ورک CSS برای توسعه وب سایت های واکنش گرا و موبایل اول بوت استرپ می باشد و جدیدترین نسخه آن Bootstrap5 است.

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

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

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

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

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

برای بهبود پایداری الگوریتم‌های یادگیری ماشین(ML) از نمونه‌گیری بوت استرپ در یک الگوریتم مجموعه‌ای به نام تجمع یا بسته‌ بندی Bootstrap استفاده می‌شود. در بوت استرپینگ ML، تعداد مشخصی از زیرمجموعه های هم اندازه از یک مجموعه داده با جایگزینی استخراج می شوند.

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

پروتکل بوت استرپ (BOOTP) یک پروتکل اینترنتی است که در آن یک کاربر شبکه می تواند به طور خودکار پیکربندی شود تا یک آدرس IP دریافت کند و یک سیستم عامل بدون دخالت کاربر بوت شود. یک مدیر شبکه سرور BOOTP را مدیریت می کند که آدرس IP را به طور خودکار از مجموعه ای از آدرس ها برای مدت زمان مشخصی اختصاص می دهد.

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

وب سایت های بوت استرپ اغلب نیاز به افزایش سرعت دارند. یک شبکه تحویل محتوا به حل این مشکل کمک می کند و محتوای ثابت را سریعتر به کاربران ارائه می دهد. این بهترین رویکرد برای افزایش همزمان تعامل کاربر و سرعت بارگذاری صفحه است.

بوت استرپینگ به طور کلی چیست؟

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

نوار ناوبری

با رفتن به نوار پیمایش، ملاحظات اصلی UI برای نوار ناوبری این است که وقتی اندازه صفحه به 768 پیکسل کوچک می شود، آن را جمع کنید. به عنوان مثال، microsoft.com را در نظر بگیرید. نمای وب شامل تمام پیوندهای ناوبری است که به صورت افقی در سراسر صفحه تراز شده اند، در حالی که از آنجایی که نمای تلفن همراه فشرده تر است و از یک نماد ناوبری استفاده می کند که با کلیک روی آن پیوندهای پیمایش به صورت عمودی تراز شده را نشان می دهد. اکنون می توانیم تصور کنیم که چگونه این کار انجام می شود. در نمای کامل وب، طراحان از نام کلاس hidden-xs برای نمایش نوار ناوبری کامل برای نمایشگرهای بزرگتر استفاده می کنند. در صفحه‌های کوچک‌ تر، از نام کلاس visual-xs برای نمایش نمای فشرده با یک دکمه کشویی استفاده می‌شود که از جاوا اسکریپت برای نمایش منو هنگام کلیک کردن استفاده می‌کند. حالا این خیلی خسته کننده به نظر می رسد، اگر فقط ابزار جادویی وجود داشته باشد که بتواند از این نماهای مختلف برای ما مراقبت کند؟ خوب این دقیقاً همان چیزی است که بوت استرپ با استفاده از نام کلاس navbar به ما ارائه می دهد. مستندات بوت استرپ در راه اندازی نوار ناوبری عالی است.

طراحی وب سایت ریسپانسیو با بوت استرپ

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

اندازه های صفحه نمایش

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

اصول اولیه

اساسی ترین مؤلفه بوت استرپ Grid است. Bootstrap Grid برای تعریف عرضی که هر جزء html در صفحه می گیرد استفاده می شود. Grid صفحه را به 12 ستون مساوی تقسیم می کند. عناصر محتوا می توانند حداقل یک ستون و حداکثر 12 ستون را اشغال کنند. سبک صفحه وب شما اندازه هایی را که هر عنصر محتوا اشغال می کند تعیین می کند. می‌توانید کد تولید اندازه‌های شبکه رایج (نشان داده شده در زیر) و روی این کدپن را مشاهده کنید.

مقیاس بندی محتوا

یک صفحه وب پاسخگو باید به گونه ای مقیاس شود که همچنان در صفحه های مختلف خوب به نظر برسد. چالشی که وجود دارد این است؛ چیدمان محتوا در یک صفحه نمایش بزرگ یا معمولی زمانی که روی صفحه نمایش کوچکتر اعمال شود مناسب نخواهد بود. بنابراین محتوا نه تنها باید کوچک شود تا اندازه صفحه نمایش کوچک‌ تر شود، بلکه طرح محتوا باید تغییر کند، این امر از دو طریق قابل دستیابی است. نکته کلیدی در مورد این تکنیک این است که کلاس اکنون از دو نام تشکیل شده است. اولین col-md-4 تقسیم بندی ستون ها را برای همه صفحه هاpx 992 مشخص می کند که با مقدار کلید md نشان داده شده است. Col-sm-6 و col-sm-12 تقسیم ستون ها را برای تمام عرض های صفحه بینpx 768 و 992 px مشخص می کند که با کلید sm نشان داده شده است.

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

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

سهولت استفاده

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

شبکه پاسخگو

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

سازگاری مرورگر

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

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

بوت استرپ نمایش و پاسخگویی تصویر را با قوانین HTML و CSS از پیش تعریف شده خود کنترل می کند. با افزودن کلاس .img-responsive اندازه تصاویر به طور خودکار بر اساس اندازه صفحه نمایش کاربران تغییر می کند. این به عملکرد وب سایت شما کمک می کند، زیرا کاهش اندازه تصویر بخشی از فرآیند بهینه سازی سایت است Bootstrap همچنین کلاس های اضافی مانند .img-circle و .img-rounded را ارائه می دهد که به تغییر شکل تصاویر کمک می کند.

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

بوت استرپ برای توسعه دهندگانی که می خواهند برای اولین بار استفاده از این فریم ورک را بیاموزند، مستندات ارائه می دهد. در اینجا چندین موضوع وجود دارد که می توانید در صفحه مستندات بوت استرپ بیابید:

• محتوا کد منبع بوت استرپ از پیش کامپایل شده را پوشش می دهد.
• مرورگرها و دستگاه‌ها همه مرورگرهای وب و موبایل پشتیبانی شده و اجزای مبتنی بر تلفن همراه را فهرست می‌کند.
• جاوا اسکریپت پلاگین های مختلف JS ساخته شده بر روی jQuery را تجزیه می کند.
• Theming متغیرهای Sass داخلی را برای سفارشی‌سازی آسان‌تر توضیح می‌دهد.
• Tools به شما می آموزد که چگونه از اسکریپت های npm Bootstrap برای اقدامات مختلف استفاده کنید.

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

چرا نباید در بعضی پروژه ها از بوت استرپ استفاده کنید

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

3 فایل اصلی بوت استرپ

Bootstrap شامل مجموعه ای از نحو است که در سه فایل اصلی کامپایل شده است Bootstrap.css، Bootstrap.js و Glyphicons. به خاطر داشته باشید که Bootstrap برای اجرای پلاگین ها و اجزای JS به یک کتابخانه JS به نام jQuery نیاز دارد. در اینجا سه فایل فریمورک اصلی وجود دارد که رابط کاربری و عملکرد یک وب سایت را مدیریت می کنند.

1. Bootstrap.css

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

2. Bootstrap.js

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

در اینجا چند نمونه از کارهایی که jQuery می تواند انجام دهد آورده شده است:

• درخواست های AJAX مانند کم کردن داده ها از مکان دیگری را به صورت پویا انجام دهید.
• ویجت ها را با استفاده از مجموعه ای از افزونه های جاوا اسکریپت ایجاد کنید.
• با استفاده از ویژگی های CSS انیمیشن های سفارشی ایجاد کنید.
• به محتوای وب سایت پویایی اضافه کنید.

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

3. گلیفیکون ها

آیکون ها بخشی جدایی ناپذیر از صفحه جلویی یک وب سایت هستند، زیرا اغلب اقدامات و داده ها را در رابط کاربری نمایش می دهند. بوت استرپ از آیکون هایی به نام Glyphicons استفاده می کند که شامل مجموعه Glyphicons Halflings است. اگرچه طراحی اولیه است، اما آنها عملکردهای اساسی خود را انجام می دهند و استفاده از آنها رایگان است. اگر می‌خواهید آیکون‌های شیک‌تری پیدا کنید، Glyphicons مجموعه‌های ممتاز مختلفی را برای سایت‌های خاص به فروش می‌رساند. همچنین می‌توانید آیکون‌های فردی و موضوعی خاص را به صورت رایگان در وب‌سایت‌های مختلف مانند Flaticon، GlyphSearch و Icons8 دانلود کنید. برای تغییر اندازه Glyphicons، باید سبک پیش فرض را با ویژگی اندازه قلم CSS لغو کنید.

برای شروع می بایست این سه فایل را در صفحه وب سایت خود اضافه نمایید:

آدرس های موجود در بخش بالا (href و src) را می بایست با آدرس های فایل های خود تغییر دهید. البته فراموش ننمایید که اضافه نمودن کتابخانه jquery برای اجرای Bootstrap لازم و ضروری می باشد.

هم اکنون قالب شما آماده اجرای کدهای بوت استرپ می باشد و می توانید طراحی سایت خود را آغاز نمایید.

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

کد زنی های HTML مخصوص بوت استرپ

کد زنی html در بوت استرپ را می بایست با آداب خاصی انجام دهید که در بخش زیر دستورالعمل های برنامه نویسی آموزش داده خواهد شد.

در صورتی که قصد راه اندازی وب سایت تمام صفحه را دارید می بایست دایو اصلی با کلاس container-fluid و برای وب سایت با عرض ثابت می بایست از کلاس container استفاده نمایید.

سیستم صفحه بندی بوت استرپ به صورت ریسپانسیو می باشد و که به صورت یک صفحه 12 ستونه در نظر گرفته می شود که کلاس های CSS از قبل تعریف شده ای برای صفحه بندی را در خود دارد.

دستورالعمل های مربوط به صفحه بندی

• کلیه کد زنی های بوت استرپ می بایست در درون دایو اصلی container و یا container-fluid قرار بگیرد.
• ردیف های مختلف صفحه را درون دایو با کلاس row قرار دهید.
• برای کد زنی صفحات از کلاس های از پیش تعریف شده .col-xs- ، .col-sm- ، .col-md- ، .col-lg- استفاده می گردد که هر کدام در سایزهای مختلف صفحه نمایش داده می شوند که در بخش پایین نحوه کار با این کلاس ها آموزش داده خواهد شد.

کلاس های .col-xs- ، .col-sm- ، .col-md- ، .col-lg- برای تعریف ستون های صفحه در سایزهای مختلف صفحه مورد استفاده قرار می گیرند که col-lg برای سایزهای حدودا 1170 پیکسل، col-md برای سایزهای حدودا 970 ، col-sm برای سایزهای حدودا 750 و col-xs برای سایزهای بسیار کوچک صفحه مانند موبایل می باشد.

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

نحوه استفاده از .col-md-* به این صورت می باشد که شما به جای ستاره می بایست از تعداد ستون هایی که دایو مورد نظر شما در صورتی که شما صفحه را به 12 ستون تقسیم نمایید قصد دارید ستون مورد نظر پر نمایید را می بایست تکمیل نمایید. به عنوان مثال به کد زیر دقت نمایید:

که در کد بالا col-md-8 به معنی آن است که این دایو در سایز متوسط 970px از 12 ستون 8 ستون و col-md-4 در همین سایز از 12 ستون 4 ستون را اشغال می نماید.

برای آنکه کد بالا را برای موبایل تنظیم نمایید می بایست کد مربوط به موبایل را نیز برای موبایل به آن اضافه نمایید:

که در کد بالا col-xs-12 به معنای آن است که در موبایل این دایو کل ردیف 12 تایی را اشغال می نماید و col-xs-6 به آن معناست که این دایو 6 ستون از ردیف 12 را پر می نماید.