Bootstrap - Kelas Helper

Bab ini membahas beberapa kelas pembantu di Bootstrap yang mungkin berguna.

Ikon tutup

Gunakan ikon tutup umum untuk menutup konten seperti modals dan alert. Gunakan kelasclose untuk mendapatkan ikon tutup.

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

Tanda sisir

Gunakan tanda sisipan untuk menunjukkan fungsi dan arah dropdown. Untuk mendapatkan fungsionalitas ini gunakan kelascaret dengan elemen <span>.

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

Mengapung Cepat

Anda dapat mengapung elemen ke kiri atau kanan dengan kelas pull-left atau pull-right masing-masing contoh berikut menunjukkan hal ini.

<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>
Untuk menyelaraskan komponen di navbar dengan kelas utilitas, gunakan .navbar-left atau .navbar-rightsebagai gantinya. Lihat bab navbar untuk detailnya.

Blok Konten Pusat

Gunakan kelas center-block untuk mengatur elemen ke tengah.

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

Clearfix

Untuk menghapus float elemen apa pun, gunakan .clearfix kelas.

<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>

Menampilkan dan Menyembunyikan Konten

Anda dapat memaksa elemen untuk ditampilkan atau disembunyikan (termasuk untuk pembaca layar) dengan menggunakan kelas .show dan .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>

Konten Pembaca Layar

Anda dapat menyembunyikan elemen ke semua perangkat kecuali pembaca layar dengan kelasnya .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>

Di sini kita dapat melihat bahwa label dari kedua tipe input diberikan kelas sr-only, karenanya label hanya akan terlihat oleh pembaca layar.