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

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

شروع به کار با بوت استرپ

شیوه های مختلفی برای شروع کار با بوت استرپ (فعال سازی کتابخانه های بوت استرپ در محیط برنامه نویسی) وجود دارد؛ شما می توانید بوت استرپ را از سایت getbootstrap.com دانلود کنید و یا آن را از طریق یک CDN  به پروژه خود اضافه کنید. در مقاله ای که قبلا تحت عنوان طراحی سایت با بوت استرپ در وب سایت یادبگیر دات کام قرار گرفت روش دوم به صورت تصویری آموزش داده شده است. البته اگر شما کار برنامه نویسی وب اپلیکیشن خود را در محیط ویژوال استودیو شروع کنید میتوانید قالب پیش فرض را برای  ASP.NET Core انتخاب کنید چرا که در این قالب، بوت استرپ از قبل نصب شده است.

تکنولوژی ASP.NET Core، که در ابتدا با نام ASP.NET 5 ارائه شده بود، بازنویسی کامل ASP.NET است که با ایده‌ی کاملا ماژولار، بهینه و انتشار یافته است.

برای افزودن بوت استرپ به یک پروژه ASP.NET Core کافیست آن را مطابق شکل زیر به عنوان یک dependency به bower.json بیفزایید.

البته شما می توانید بوت استرپ را از طریق یکی از package managers ها مثل bower،npm ،NuGet هم به پروژه خود اضافه کنید. شیوه کار در تمامی این موارد یکسان است. فقط کافیست یکی از عبارت های زیر را در کنسول ویژوال استودیو وارد کنید.

 نکته: اگر از نسخه های قبلی ASP.NET برای طراحی وب اپلیکیشن هایتان استفاده می کنید بهتر است بوت استرپ را از طریق یکی از دو پکیج npm یا NuGet به پروژه خویش اضافه کنید. اما توصیه می کنیم که در ASP.NET Core dependencies های سمت کاربری همچون بوت استرپ را از طریق Bower نصب کنید. (با استفاده از bower.json به همان شیوه که در بالا گفته شد).

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

 در قالب سایت پیش فرض ASP.NET، فایل Layout.cshtml به صورت زیر است:

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

قالب اولیه بوت استرپ و ویژگی های آن

سورس کد قالب اولیه بوت استرپ بسیار شبیه سورس کد فایل _Layout.cshtml ی است که در قسمت قبل مشاهده کردید و در ساده ترین شکل ممکن از یک منوی ناوبری به همراه مکانی برای ارائه محتویات باقی صفحه تشکیل شده است.

منوهای ناوبری اصلی

اگر به کد بالا دقت کنید متوجه می شوید که قالب پیش فرض فوق، از چندین عنصر <div> برای پردازش منوی ناوبری بالا و بدنه اصلی صفحه استفاده می کند. اگر شما از HTML5 استفاده می کنید، می توانید اولین تگ <div> را با یک تگ <nav> جایگزین کنید و به همان خروجی دست پیدا کنید. ضمن اینکه خوانایی این قطعه کد هم بیشتر می شود. در کد بالا در داخل اولین تگ <div> با کلاس navbar، چندین تگ <div> دیگر هم وجود دارد. مثلا مشاهده می کنید که ابتدا یک تگ <div> با کلاس container آمده است و در داخل آن دو تگ <div> دیگر به ترتیب با کلاس های navbar-header  و navbar-collapse  وجود دارد. تگ <div> با کلاس navbar-header دارای دکمه ایست که وقتی نمایش داده می شود که اندازه صفحه نمایش به کمترین مقدار خود (در اندازه موبایل) برسد این دکمه به صورت سه خط افقی نمایش داده می شود و به آن آیکن همبرگر (hamburger) گفته می شود. برای ایجاد این دکمه هیچ عکسی مورد نیاز نیست و تنها با استفاده از html و css می توان آن را ایجاد نمود. در واقع هر یک از تگ های <span class=”icon-bar”></span> یک خط را ایجاد می کنند و با تکرار سه باره این تگ، آیکن hamburger نمایش داده می شود.

 این تگ همچنین دارای لینکی با کلاس navbar-brand می باشد که  نام اپلیکیشن و یا نام برند وبسایت را در گوشه بالای سمت چپ صفحه نمایش میدهد.

منوی ناوبری اصلی هم توسط عنصر <ul> که درون دومین تگ div با کلاس navbar-collapse واقع است ایجاد می شود. این لیست نامرتب هم شامل لینک هایی است که به صفحه اصلی وب سایت (Home)، صفحه درباره ما (About) و صفحه مخاطبین (Contact) اشاره می کنند. پایین تر از منوی ناوبری، بدنه اصلی هر صفحه قرار دارد که درون تگ دیگری با کلاس های container و body-content  قرار گرفته است. در این قالب مشاهده می کنید که تمامی محتویات صفحه در داخل یک View خاص پردازش می شود و در آخر یک تگ <footer> به عنوان فوتر به انتهای عنصر <div> اضافه می شود.

همانطور که قبلا گفته شد و در شکل زیر هم مشاهده می کنید منوی ناوبری مخفی با دکمه hamburger (واقع در گوشه بالای سمت راست) تنها زمانی ظاهر می شود که پهنای صفحه نمایش به یک اندازه خاص برسد (کوچک شود).

با کلیک بر روی این آیکن، آیتم های منوی ناوبری، در بالای صفحه به صورت یک منوی کشویی عمودی نشان داده می شود.

تایپوگرافی و لینک ها در بوت استرپ

بوت استرپ، تایپوگرافی اولیه سایت، رنگ ها و فرمت دهی لینک ها را در فایل های css خود، از پیش تنظیم کرده است. همچنین  این فایل های css دربردارنده استایل پیش فرض جداول، دکمه ها، عناصر فرم، تصاویر و غیره می باشند. مثلا، به جای آنکه خودتان مجبور شوید که برای این عناصر استایل تعریف کنید کافیست کلاس مربوطه را به عنصر مورد نظرتان اضافه کنید. یک ویژگی بسیار مفید بوت استرپ، سیستم گریدی آن (grid layout system) می باشد که در بخش بعدی به آن پرداخته ایم.

سیستم گریدی بوت استرپ

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

سیستم گرید پیش فرض بوت استرپ دارای 12 ستون است و علت انتخاب این تعداد به عنوان تعداد پیش فرض آن است که 12 بر اعداد 1 و 2 و 3 و 4 قابل تقسیم است و پهنای ستون ها می تواند از یک دوازدهم تا دوازده دوازدهم پهنای صفحه نمایش متغیر باشد.

برای شروع استفاده از این سیستم گریدی، باید کارتان را با نوشتن یک تگ <div> با کلاس container شروع کنید (در بوت استرپ باید چارچوب قرارگیری محتوای سایت خود را مشخص کنید. اینکار با استفاده از دو کلاس container و container-fluid انجام می گیرد. در صورت استفاده از کلاس container، سایت شما قسمتی از پهنای صفحه را اشغال کرده و از سمت راست و چپ صفحه فاصله دارد حال آنکه کلاس container-fluid یک ظرف به اندازه عرض کل صفحه ایجاد می کند و محتوای شما دیگر از حاشیه ها فاصله ای نخواهد داشت) و در داخل این تگ، تگ <div> دیگری با کلاس row را درج کنید.

در مرحله بعد باید به ازای هر ستون یک عنصر <div> اضافه کرده و در قالب یک کلاس CSS، تعداد ستون هایی که هر عنصر <div> باید اشغال کند را مشخص کنید. این تعداد، می تواند عددی در بازه عددی 1 تا 12 باشد که بسته به دستگاه هدف مورد نظر، به انتهای عبارت col-xs- یا col-sm- یا col-md- یا col-lg- اضافه میشود.

برای مثال اگر شما می خواهید دو ستون با ابعاد یکسان داشته باشید، باید برای هر کدام از این ستون‌ها از یک کلاس col-md-6 استفاده کنید. md مخفف کلمه medium (متوسط) است و اشاره به کامپیوترهای رومیزی با اندازه صفحه نمایش استاندارد دارد. در تویتر بوت استرپ 3، چهار گزینه پیش فرض وجود دارد که شما می توانید برای دستگاههایی با اندازه های مختلف، layout گریدی خود را بسازید. همانطور که در جدول زیر می بینید برای دستگاههای فوق کوچکی مثل تلفن های همراه که پهنایی کمتر از 768 دارند از کلاس col-xs-، برای دستگاههایی با پهنای کوچک (بزرگتر مساوی 768) نظیر تبلت ها از کلاس col-sm-، برای دستگاههایی با پهنای متوسط (992<=width<=1200) مثل لپ تاب ها و کامپیوترهای رومیزی از کلاس col-md- و نهایتا برای دستگاههایی با صفحه نمایش بزرگ (پهنای بزرگتر مساوی از 1200) مثل کامپیوترهای رومیزی با صفحه نمایش بزرگتر، از کلاس col-lg- استفاده می شود.

هر یک از کلاس های انتخابی برای دستگاه مربوطه و تمامی دستگاه های با پهنای بالاتر به یک شیوه عمل می کند مگر اینکه برای پهناهای بالاتر کلاس دیگری ذکر کنید. مثلا وقتی قطعه کد زیر را بنویسید یعنی محتوای مورد نظر شما در تبلت ها و لپ تاب ها و کامپیوترهای رومیزی و صفحه نمایش های بزرگتر در قالب سه ستون 4 تایی نمایش داده می شود.  مگر اینکه قید کنید که در صفحه نمایش های بزرگتر (کامپیوترهای رومیزی و پهناهای بزرگ تر)، تقسیم ستون ها جور دیگری باشد (مثل نوشتن کلاس دوم برای این کد یعنی col-md-*)

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

حال زمانی که شما دو ستون با کلاس col-md-6 ایجاد می کنید قالب حاصل شده در کامپیوترهای رومیزی، دو ستونی خواهد بود اما وقتی محصول نهایی خود را بر روی یک دستگاه کوچکتر (یا مرورگری با پنجره باریکتر) عرضه کنید، این دو ستون تبدیل به یک ستون 12 تایی خواهد شد و به کاربران این امکان را میدهد که محتوای سایت و یا اپلیکیشن شما را با بدون نیاز به اسکرول افقی مشاهده کنند و این یعنی همان ریسپانسیو شدن محصول شما.

در مثال بالا، در وضعیت md (یعنی در کامپیوترهای رومیزی و ابعاد بزرگتر) سلول های One و Two، مشترکا یک ردیف را اشغال نموده اند درحالیکه در وضعیت xs، این سلول های Two و Three هستند که مشترکا در یک ردیف قرار گرفته اند.

در بوت استرپ برای ایجاد یک سطر از کلاس row استفاده میشود. در مثال بالا مشاهده می کنید که تنها یک تگ <div> با کلاس row تعریف شده بود. اما شما باید برای هر ردیف افقی که قالبتان نیاز دارد یک نمونه از این تگ ها (تگ <div> با کلاس row) را ایجاد کنید. البته می توانید از سیستم گرید بندی تو در تو هم بهره بگیرید که در این صورت، گرید داخلی 100 درصد پهنای عنصر والد خود را اشغال خواهد کرد و در مرحله بعد می شود آن را با استفاده از چهار کلاس فوق الذکر ستون بندی کرد.

 Jumbotron یا جعبه ویژه

اگر تا به حال از قالب پیش فرض ASP.NET MVC در ویژوال استودیوی 2012 یا 2013 استفاده کرده باشید احتمالا jumbotron را در عمل لمس کرده اید.

jumbotron یک جعبه خاکستری با گوشه های گرد را ایجاد می کند بطوریکه متن داخل آن نیز برجسته تر از متون معمولی صفحه می باشد در نتیجه اگر اطلاعات خاصی دارید که می خواهید توجه بیننده به آن جلب شود پیشنهاد می کنیم از این کلاس استفاده کنید. برای اضافه کردن یک jumbotron به صفحه موردنظرتان، کافیست یک عنصر <div> ایجاد کرده و به آن یک کلاس jumbotron نسبت دهید. سپس یک <div> دیگر با کلاس container ایجاد کرده و محتوایتان را در درون آن بگنجانید. در داخل این جعبه هم می توان از عناصر HTML و یا عناصر و کلاس های بوت استرپ استفاده کرد. اگر دقت کنید متوجه می شوید که در این حالت جعبه شما تا لبه های صفحه کشیده می شود.

اما اگر نمی خواهید jumbotron کل پهنای صفحه شما را اشغال کند می توانید آن را در داخل <div class=”container”>  قرار دهید. (یعنی ترتیب قرار گیری دو عنصر div فوق را برعکس کنید) با اینکار پهنای jumbotron به اندازه پهنای container  شما خواهد بود.

در صفحه تماس با ما (About) این قالب هم از این قابلیت بوت استرپ (کلاس jumbotron) استفاده شده که در بالا ملاحظه می کنید.

ترجمه: رقیه آقایاری