معرفی کلاس های کمکی در بوت استرپ BootStrap

کلاس های کمکی

Bootstrap با CSS

در این فصل برخی از کلاس های کمکی در Bootstrap را مورد بحث قرار می دهیم که ممکن است مورد کاربرد قرار گیرند.

آیکن Close

از آیکون close عمومی برای بستن محتواهایی مانند مدل ها و هشدارها استفاده می کنیم. از کلاس close برای دریافت آیکون close استفاده می شود.

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      &times;
   </button>
</p>

خروجی قطعه کد فوق به صورت زیر می باشد :

برای نشان دادن قابلیت کشویی (dropdown) و جهت ، از caret ها استفاده می کنیم. برای دریافت این قابلیت ، از کلاس caret با یک عنصر <span> استفاده می کنیم.

<p>Caret Example<span class = "caret"></span></p>

خط کد بالا ، خروجی زیر را نتیجه می دهد :

Quick Float ها

ما می توانیم یک عنصر را به سمت راست یا سمت چپ با کلاس pull-left. یا pull-right. بکشیم ، که در مثال زیر این موارد نشان داده شده اند.

<div class = "pull-left">Quick Float to left</div>

<div class = "pull-right">Quick Float to right</div>

خروجی قطعه کد بالا به صورت زیر می باشد :

بلوک های محتوایی مرکزی

از کلاس center-block. ، برای تنظیم کردن عنصر در مرکز استفاده می کنیم.

<div class = "row">
   <div class = "center-block" style = "width:200px; background-color:#ccc;">
      This is an example for center-block
   </div>
</div>

قطعه کد فوق خروجی زیر را تولید می کند :

Clearfix

برای پاک کردن float از هر عنصری ، از کلاس clearfix. استفاده می کنیم.

<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
   
   <div class = "pull-left" style = "background:#58D3F7;">
      Quick Float to left
   </div>
   
   <div class = "pull-right" style = "background: #DA81F5;">
      Quick Float to right
   </div>
   
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

نشان دادن و پنهان کردن محتوا

ما می توانیم یک عنصر را با استفاده از کلاس ها show. یا hidden. نشان داده یا پنهان نماییم (از جمله برای خوانندگان صفحه).

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   
   <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
      This is an example for show class
   </div>
   
   <div class = "hidden" style = "width:200px; background-color:#ccc;">
      This is an example for hide class
   </div>
   
</div>

خروجی قطعه کد فوق به صورت زیر است :

محتوای صفحه خواننده

ما می توانیم یک عنصر را برای تمام دستگاه ها به غیر از صفحه خوانندگان با استفاده از کلاس sr-only. پنهان نماییم.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <form class = "form-inline" role = "form">
      
      <div class = "form-group">
         <label class = "sr-only" for = "email">Email address</label>
         <input type = "email" class = "form-control" placeholder = "Enter email">
      </div>
      
      <div class = "form-group">
         <label class = "sr-only" for = "pass">Password</label>
         <input type = "password" class = "form-control" placeholder = "Password">
      </div>
      
   </form>
</div>

خروجی قطعه کد فوق به صورت زیر می باشد :

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