• ارسال کننده: زهرا صانعی
  • تاریخ انتشار: 2017 / 08 / 19

ایجاد سایت های زیبا و واکنش گرا با بوت استرپ

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

ایجاد سایت های زیبا و واکنش گرا با بوت استرپ

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

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

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

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

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

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

افزودن بوت استرپ به یک پروژه ASP.NET Core

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

اضافه کردن بوت استرپ از طریق پکیج منیجرها

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

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

 سرویس دهنده  MaxCDN

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

فایل Layout.cshtml

فایل Layout.cshtml

فایل 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 می باشد که  نام اپلیکیشن و یا نام برند وبسایت را در گوشه بالای سمت چپ صفحه نمایش میدهد.

کلاس navbar-brand

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

صفحه درباره ما

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

منوی ناوبری مخفی با دکمه hamburger

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

منوی ناوبری مخفی با دکمه 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 را درج کنید.

کلاس 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- استفاده می شود.

Width Device Tier CSS Class Prefix
 768px> Phones -col-xs
 768px=< Tablets -col-sm
 992px=< Desktops -col-md
 1200px=< Larger Desktop Displays -col-lg

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

کلاس دوم برای این کد col-md-*

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

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

دو ستون با کلاس col-md-6

در مثال بالا، در وضعیت 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 یا جعبه ویژه

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

پهنای jumbotron

قابلیت بوت استرپ (کلاس jumbotron)

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

 

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

این محتوا اختصاصاً برای یاد بگیر دات کام تهیه شده است استفاده از آن با ذکر منبع همراه با لینک آن و نام نویسنده یا مترجم مجاز است
برچسب ها:









صفحه ما را در فیس بوک دنبال کنید صفحه ما را در توییتر دنبال کنید صفحه ما را در  اینستاگرام دنبال کنید صفحه ما را در لینکداین دنبال کنید