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

دکمه ها در بوت استرپ

استایل های مختلفی برای دکمه ها در تویتر بوت استرپ وجود دارد. کلاس های پیش فرض دکمه ها و رنگ و نحوه استفاده از آنها در شکل زیر آمده است. مثلا:

btn-success: دکمه نشان دهنده یک فعالیت موفق است.

btn-warning: نشان میدهد که طی انجام این فعالیت باید احتیاط کرد.

btn-danjer: یک فعالیت خطرناک را نشان میدهد.

البته تویتر بوت استرپ قابلیت های بسیار دیگری را در خصوص دکمه ها در اختیار شما میگذارد نظیر مقیاس بندی دکمه ها (ایجاد دکمه با اندازه های مختلف) و ایجاد دکمه های غیر فعال و … که از گنجایش این مقاله بیرون است.

 نشان های درون خطی (Badge)

شما می توانید در بوت استرپ از نشان های درون خطی استفاده کنید. این نشان ها معمولا callouts عددی هستند که بعد از آیتم های ناوبری مختلف مثل لینک ها قرار می گیرند و می توانند تعداد پیام ها و یا اطلاعیه های جدیدی که در انتظار خوانده شدن هستند و یا وجود بروزرسانی جدیدی را به کاربر اطلاع دهند. عمده استفاده چنین عناصری در ایمیل و سایت های شبکه های اجتماعی است. ایجاد این نشان های درون خطی آسان است و کافیست عنصر <span> ی با کلاس Badge تعریف کرده و عدد مربوطه را درون آن قرار دهید.

 هشدارها(Alerts)

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

 نوارهای هدایتی (Navbars) و منوها

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

قالب ما دارای یک نوار ناوبری استاندارد است اما بوت استرپ، در رابطه با Navbars از گزینه های استایل بندی بیشتری پشتیبانی می کند. برای مثال می توانید در صورت نیاز به جای ایجاد Navbarهای افقی، Navbar های عمودی ایجاد کنید، به نوارهای هدایتی خود زیرمنوهای کشویی اضافه کنید و یا برای صرفه جویی در پهنای صفحه از منوهایی نظیر tab ها و pill ها استفاده کنید که در بالای عناصر دیگر قرار می گیرند. برای ایجاد اینگونه منوها، کافیست که یک لیست نامرتب ایجاد کرده و به آن کلاس پایه  nav و کلاس nav-tabs (و یا nav-pills ) را بیفزایید و درون این لیست تب هایتان را در قالب لینک ایجاد کنید.

tab ها و pill ها این امکان را به شما میدهند که با استفاده از مکانیزم بخشبندی، محتوای زیادی را در یک فضای محدود به کاربر نشان دهید. کاربر در هر لحظه می تواند یکی از بخش ها را انتخاب کرده و محتویات آن را مشاهده کند. درنتیجه از ایجاد صفحات مجزا یا طویل کاسته می شود.

 Navbar ها هم به شیوه مشابه منوها ساخته می شوند منتها کمی پیچیده تر هستند. این Navbar ها با عناصر <div> و  <nav> که دارای کلاس navbar هستند شروع می شوند.

قالب ما در بخش هدر خود دارای یک نوار هدایتی می باشد که در آن از منوهای کشویی هم استفاده شده است.

عناصر دیگر بوت استرپ

در بوت استرپ می توان همان جداول HTML را با سبک های بهتری ایجاد کنید. مثلا جداول راه راه ایجاد کرد، می شود برچسب های درون خطی (labels) را با سبک دکمه های بوت استرپ ایجاد نمود، برای ایجاد نوار پیشرفت (progress bar : نواری که میزان پیشرفت یک پروسه را به مخاطب نشان میدهد)، سبک های متعددی وجود دارد که می توانید هر کدام را با توجه به نیازتان انتخاب کنید. List Groups and panels را که دارای بخش عنوان و محتوا هستند ایجاد کنید.

همچنین می توانید در Navbarها، منوهای کشویی رو به پایینی ایجاد کنید که گزینه های استایل دهی بیشتری نسبت به عنصر<select> اچ تی ام را داشته باشند.

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

شما می توانید بسته به نیاز خود تم پیش فرض بوت استرپ را با تغییر دادن برخی یا همه ویژگی ها و فایل های css آن و تنظیم مجدد رنگ ها و سبک هایش گسترش دهید. اما اگر مایلید که کارتان را با تم های آماده شروع کنید، بهتر است بدانید که می توانید به گالری های متعددی از تم های بوت استرپ که به صورت آنلاین عرضه شده اند دسترسی پیدا کنید. از جمله این سایت های ارائه دهنده می توان به سایت (WrapBootstrap.com  عرضه کننده انواع تم های تجاری) و Bootswatch.com (ارائه دهنده تم های رایگان) اشاره کرد. البته اگر توان خریداری تم های غیر رایگان را هم داشتید که چه بهتر. برخی از این قالب های پولی نسبت به قالب پبش فرض بوت استرپ قابلیت های بیشتری را در اختیار شما قرار میدهند نظیر پشتیبانی از منوهای مدیریتی و داشبوردهایی با نمودارها و ابزارهای سنجش.

به عنوان مثال از این قالب های پولی می توان به قالب Inspinia اشاره نمود که در حال حاضر قیمیتی معادل 30 دلار دارد. اسکرین شاتی از این قالب را در تصویر زیر ملاحظه می کنید.

اگر زمانی خواستید که تم بوت استرپ خود را تغییر دهید، کافیست فایل bootstrap.css را برای تم مورد نظرتان در فولدر wwwroot/css قرار داده و آدرس دهی ها را در _Layout.cshtml  به صورت زیر تغییر دهید تا فایل های css شما را مکان یابی کند (کدهای زیر را به مجموعه کدهای_Layout.cshtml  بیفزایید):

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

http://getbootstrap.com/examples/dashboard/.

اجزای دیگر بوت استرپ

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

 Glyphicons

بوت استرپ دارای 200 عدد آیکن رایگان می باشد که برای مقیاس پذیری و سهولت استفاده، در قالب فونت عرضه شده اند بطوریکه دیگری نیازی به لود هیچ تصویری در این خصوص ندارید و کافیست در هر جایی که از بوت استرپ استفاده می کنید یک تگ <span> نوشته و کلاس glyphicon و کلاس مخصوص هر آیکن  را به آن اضافه کنید. در اینجا چند نمونه کوچک از این مجموعه بزرگ را برایتان نمایش داده ایم.

 Input groups

 با استفاده ازinput group ها می توانید متن و یا دکمه های اضافی تری را به ابتدا یا انتهای عناصر (کنترل های) ورودی فرم اضافه کنید و در نتیجه تجربه شهودی بیشتری را برای کاربر فراهم نمایید. مثلا میتوانید علامت $ را به ورودی هایی از نوع پولی اضافه کنید. بدین منظور کافیست یک تگ Div ایجاد کرده و تمام کنترل هایتان را داخل آن قرار دهید و سپس به آن کلاس input-group را بیفزایید. یک تگ span نوشته و کلاس input-group-addon را به آن اختصاص دهید و در مرحله بعد، این تگ را قبل یا بعد از کنترل ورودی مورد نظر قرار دهید.

شماره گذاری صفحات (pagination) و نشانگر صفحات (Breadcrumbs)

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

همچنین می توانید با استفاده از عناصری نظیر <iframe> : ،<embed>، <video>،<object> ، ویدیوها و اسلایدشوهای ریسپانسیوی ایجاد کنید. بوت استرپ به صورت خودکار این عناصر را استایل دهی می کند.

Breadcrumbs

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

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