بوت استرپ تعداد زیادی کلاس های CSS برای کاربردهای رایج ارائه میکند. در این بخش با کلاس های کمک کننده (helper) در Bootstrap آشنا خواهید شد.
رنگ های مفهومی :
میتوانید کلاس های رنگ های مفهومی مانند text-success. ، text-info. ، text-warning. و... را برای ایجاد تأکید بر روی متن، به کار ببرید. برای جزئیات بیشتر به مطلب آموزش تایپوگرافیرجوع کنید.
بک گراندهای مفهومی :
مشابه با کلاس های مفهومی رنگ برای متن، میتوانید از کلاس های مفهومی مربوط به رنگ های پس زمینه استفاده کنید تا به یک عنصر رنگ پس زمینه داده و تأکید بیشتری بر روی آن ایجاد نمایید.
خروجی مثال بالا به شکل زیر خواهد بود :
نکته : کلاس های پس زمینه مفهومی تنها خصوصیت رنگ پس زمینه ( background-color ) در CSS را به عنصر مورد نظر اعمال میکنند. جهت تنظیم فاصله بین محتوا و حاشیه آن باید خصوصیت padding را خودتان تنظیم نمایید.
آیکون بستن (close) :
بوت استرپ یک آیکون کلی برای بستن پیام های هشدار و کادرها ارائه میکند.
خروجی مثال بالا به شکل زیر خواهد بود :
آیکون فلش (caret) :
بوت استرپ یک آیکون کلی فلش برای نمایش حالت کشویی ارائه میکند. جهت این آیکون در منوهای کشویی که به سمت بالا باز میشوند، به طور اتوماتیک عوض میشود.
خروجی مثال بالا به شکل زیر خواهد بود :
تنظیم بلوک های محتوا در وسط صفحه :
میتوانید با استفاده از کلاس center-block. ، بلوک محتوا را در راستای افقی در وسط صفحه قرار دهید. جهت مشاهده اثر این کلاس باید پهنای بلوک محتوا را خودتان تنظیم کنید و پهنای آن باید کمتر از عنصر parent آن باشد.
خروجی مثال بالا به شکل زیر خواهد بود :
floatهای سریع :
میتوانید با استفاده از کلاس های pull-left. و pull-right. ، عناصر را سریعاً به چپ یا راست صفحه float نمایید.
clearfix :
کلاس clearfix. حالت float را از روی عناصر حذف میکند. این کلاس عموماً برای برطرف کردن مشکل اختلال parent برای parentهایی که شامل عنصر float شده (شناور) میباشند، به کار برده میشود.
نشان دادن و پنهان کردن محتوا :
میتوانید با استفاده از کلاس های show. و hidden. یک عنصر را بر روی کلیه دستگاه ها قابل نمایش یا مخفی کنید. این کلاس ها همچنین جهت جلوگیری از تناقض در ویژگی ها، شامل important! هم میباشند درست مانند float سریع. به علاوه، میتوانید کلاس invisible. را برای تغییر دادن قابلیت نمایش ( visibility ) یک عنصر به کار ببرید. هر چند که آن عنصر همچنان فضا را در ساختار اشغال میکند.
خروجی مثال بالا به شکل زیر خواهد بود :
محتوای مخصوص برای مفسرهای صفحه نمایش (screen reader) :
کلاس sr-only. یک عنصر را بر روی تمام دستگاه ها به جز مفسران صفحه نمایش مخفی میکند.
هشدار : قبل از استفاده از این کلاس به خوبی فکر کنید زیرا این کلاس از خصوصیت color : transparent و font-size : 0px برای پنهان کردن متن استفاده میکند و موتورهای جستجو این تکنیک ها را به عنوان spam در نظر میگیرند.
.png "لوگو")
