Bootstrap's Pengaturan Default
Bootstrap's global yang standar font-size adalah 14px, dengan garis-tinggi 1,428.
Ini diterapkan pada <body> dan semua paragraf.
Selain itu, semua <p> elemen memiliki margin bawah yang sama dengan setengah mereka dihitung line-height (10px secara default).
Bootstrap Default Browser vs
Dalam bab ini, kita akan melihat beberapa elemen HTML yang akan ditata sedikit berbeda oleh Bootstrap dari default browser.
<h1> - <h6>
Secara default, Bootstrap akan gaya judul HTML ( <h1> untuk <h6> ) dengan cara sebagai berikut:
Contoh
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Cobalah sendiri " <small>
Dalam Bootstrap HTML <small> elemen digunakan untuk membuat lebih ringan, teks sekunder di pos manapun:
Contoh
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
Cobalah sendiri " <mark>
Bootstrap akan gaya HTML <mark> elemen dengan cara berikut:
<abbr>
Bootstrap akan gaya HTML <abbr> elemen dengan cara berikut:
<blockquote>
Bootstrap akan gaya HTML <blockquote> elemen dengan cara berikut:
Contoh
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Cobalah sendiri " Untuk menampilkan kutipan di sebelah kanan, menggunakan .blockquote-reverse kelas:
Contoh
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Cobalah sendiri " <dl>
Bootstrap akan gaya HTML <dl> elemen dengan cara berikut:
<code>
Bootstrap akan gaya HTML <code> elemen dengan cara berikut:
Contoh
The following HTML elements: span , section , and div defines a section in a document.
Cobalah sendiri " <kbd>
Bootstrap akan gaya HTML <kbd> elemen dengan cara berikut:
<pre>
Bootstrap akan gaya HTML <pre> elemen dengan cara berikut:
Contoh
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Cobalah sendiri " Warna kontekstual dan Backgrounds
Bootstrap juga memiliki beberapa kelas kontekstual yang dapat digunakan untuk memberikan "makna melalui warna".
Kelas-kelas untuk warna teks: .text-muted , .text-primary , .text-success , .text-info , .text-warning , dan .text-danger :
Contoh
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Cobalah sendiri " Kelas-kelas untuk warna latar belakang adalah: .bg-primary , .bg-success , bg-info , bg-warning , dan .bg-danger :
Contoh
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Cobalah sendiri " Lebih Tipografi Kelas
Kelas Bootstrap bawah dapat ditambahkan ke elemen gaya HTML lebih lanjut:
| Kelas | Deskripsi | Contoh |
|---|---|---|
.lead | Membuat paragraf menonjol | Cobalah |
.small | Menunjukkan teks yang lebih kecil (set ke 85% dari ukuran induk) | Cobalah |
.text-left | Menunjukkan teks kiri-blok | Cobalah |
.text-center | Menunjukkan teks pusat-aligned | Cobalah |
.text-right | Menunjukkan teks benar-aligned | Cobalah |
.text-justify | Menunjukkan teks dibenarkan | Cobalah |
.text-nowrap | Menunjukkan tidak ada bungkus teks | Cobalah |
.text-lowercase | Menunjukkan teks lowercased | Cobalah |
.text-uppercase | Menunjukkan teks uppercased | Cobalah |
.text-capitalize | Menunjukkan teks dikapitalisasi | Cobalah |
.initialism | Menampilkan teks dalam sebuah <abbr> elemen dalam ukuran font sedikit lebih kecil | Cobalah |
.list-unstyled | Menghapus default list-style dan margin kiri pada daftar item (bekerja pada kedua <ul> dan <ol> ). Kelas ini hanya berlaku untuk langsung daftar anak item (untuk menghapus default list-style dari setiap daftar bersarang, menerapkan kelas ini untuk setiap daftar bersarang juga) | Cobalah |
.list-inline | Tempat semua item daftar pada satu baris | Cobalah |
.dl-horizontal | Berbaris istilah ( <dt> ) dan deskripsi ( <dd> ) di <dl> elemen side-by-side. Dimulai seperti bawaan <dl> s, tapi ketika jendela browser mengembang, itu akan berbaris sisi-by-side | Cobalah |
.pre-scrollable | Membuat <pre> elemen digulir | Cobalah |
Menyelesaikan Bootstrap Tipografi Referensi
Untuk referensi lengkap dari semua tipografi elemen / kelas, pergi ke kami lengkap Bootstrap Tipografi Referensi .
Juga melihat kami Bootstrap Kelas Referensi Helper untuk informasi lebih lanjut tentang kelas kontekstual.