Teks
Tambahkan makna melalui teks-warna dengan kelas bawah. Link akan menggelapkan di hover:
| Kelas | Deskripsi | Contoh |
|---|---|---|
| .text-muted | Teks ditata dengan kelas "text-muted" | Cobalah |
| .text-primary | Teks ditata dengan kelas "text-primary" | Cobalah |
| .text-success | Teks ditata dengan kelas "text-success" | Cobalah |
| .text-info | Teks ditata dengan kelas "text-info" | Cobalah |
| .text-warning | Teks ditata dengan kelas "text-warning" | Cobalah |
| .text-danger | Teks ditata dengan kelas "text-danger" | Cobalah |
Latar Belakang
Tambahkan makna melalui background-warna dengan kelas bawah. Link akan menggelapkan di hover seperti kelas teks:
| Kelas | Deskripsi | Contoh |
|---|---|---|
| .bg-primary | Sel tabel ditata dengan kelas "bg-primary" | Cobalah |
| .bg-success | Sel tabel ditata dengan kelas "bg-success" | Cobalah |
| .bg-info | Sel tabel ditata dengan kelas "bg-info" | Cobalah |
| .bg-warning | Sel tabel ditata dengan kelas "bg-warning" | Cobalah |
| .bg-danger | Sel tabel ditata dengan kelas "bg-danger" | Cobalah |
Lain
| Kelas | Deskripsi | Contoh |
|---|---|---|
| .pull-left | Mengapung elemen ke kiri | Cobalah |
| .pull-right | Mengapung elemen ke kanan | Cobalah |
| .center-block | Set elemen ke display:block dengan margin-right:auto dan margin-left:auto | Cobalah |
| .clearfix | membersihkan mengapung | Cobalah |
| .show | Memaksa elemen yang akan ditampilkan | Cobalah |
| .hidden | Memaksa elemen disembunyikan | Cobalah |
| .sr-only | Menyembunyikan elemen untuk semua perangkat kecuali pembaca layar | Cobalah |
| .sr-only-focusable | Kombinasikan dengan .sr-hanya untuk menunjukkan elemen lagi ketika difokuskan (misalnya dengan pengguna keyboard saja) | Cobalah |
| .text-hide | Membantu mengganti konten teks elemen dengan gambar latar belakang | Cobalah |
| .close | Menunjukkan ikon dekat | Cobalah |
| .caret | Menunjukkan fungsi dropdown (akan mundur secara otomatis dalam menu dropup) | Cobalah |
Utilitas responsif
Kelas ini digunakan untuk menampilkan dan / atau menyembunyikan konten dengan perangkat melalui pertanyaan media.
Gunakan satu atau kombinasi dari kelas yang tersedia untuk Toggling konten di viewport breakpoints:
| kelas-kelas | Ekstra perangkat kecil Phones (<768px) | Perangkat Tablet kecil (≥768px) | Perangkat media Desktops (≥992px) | Perangkat besar Desktops (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
Pada v3.2.0 , yang .visible-*-* kelas untuk datang dalam tiga variasi, satu untuk setiap CSS display nilai properti:
| Kelompok kelas | display CSS |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
Misalnya untuk (kecil sm ) layar, tersedia .visible-*-* kelas adalah: .visible-sm-block , .visible-sm-inline , dan .visible-sm-inline-block .
Kelas .visible-xs , .visible-sm , .visible-md , dan .visible-lg usang pada v3.2.0.
Contoh
<h2>Example</h2>
<p>Resize this page to see how the text below
changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA
SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a
SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a
MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a
LARGE screen.</h1>Hasil:
Example
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
Cobalah sendiri "