Text/Typography Bootstrap
Daftar Isi
Bootstrap Default Settings
Bootstrap global ukuran huruf nya 14px, dengan tinggi line 1.428. Yang di terapkan ke <body> element dan semua paragrap (<p>).
Tambahan, semua <p> elemen memiliki margin bawah yang sama dengan setengah tinggi garis yang dihitung (10px by default).
Bootstrap vs. Browser Defaults
Dalam artikel ini, kita akan melihat beberapa elemen HTML yang akan diberi gaya sedikit berbeda dengan Bootstrap dari pada default browser.
<h1> – <h6>
Secara default, Bootstrap akan merubah HTML heading (<h1> ke <h6>) dengan cara 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)
<small>
In Bootstrap the HTML <small> element is used to create a lighter, secondary text in any heading:
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
<mark>
Bootstrap will style the HTML <mark> element in the following way:
Contoh
Use the mark element to highlight text.
<abbr>
Bootstrap will style the HTML <abbr> element in the following way:
Contoh
The WHO was founded in 1948.
<blockquote>
Bootstrap will style the HTML <blockquote> element in the following way:
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.
To show the quote on the right, use the .blockquote-reverse class:
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.
<dl>
Bootstrap will style the HTML <dl> element in the following way:
Contoh
- Coffee
- – black hot drink
- Milk
- – white cold drink
<code>
Bootstrap will style the HTML <code> element in the following way:
Contoh
The following HTML elements: span, section, and div defines a section in a document.
<kbd>
Bootstrap will style the HTML <kbd> element in the following way:
Contoh
Use ctrl + p to open the Print dialog box.
<pre>
Bootstrap will style the HTML <pre> element in the following way:
Contoh
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Merubah Warna Teks dan Latar Belakang
Bootstrap also has some contextual classes that can be used to provide “meaning through colors”.
classes untuk warna pada text:.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.
class untuk warna latar belakang:.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.
Typography Class Lainnya
Class Bootstrap di bawah ini dapat ditambahkan ke elemen HTML style lebih lanjut:
| Class | Description |
|---|---|
.lead |
Membuat sebuah paragraf menonjol |
.small |
Membuat huruf kecil (85% dari ukuran asli) |
.text-left |
Menunjukkan teks rata kiri |
.text-center |
Menunjukkan teks rata tengah |
.text-right |
Menunjukkan teks rata kanan |
.text-justify |
Menunjukkan teks rata kiri kanan |
.text-nowrap |
Menunjukkan tidak ada teks pembungkus |
.text-lowercase |
Membuat huruf kecil |
.text-uppercase |
Membuat huruf besar |
.text-capitalize |
Membuat huruf besar di depan kata |
.initialism |
Menampilkan teks di dalam sebuah <abbr> elemen dalam ukuran font yang sedikit lebih kecil |
.list-unstyled |
Menghapus gaya daftar default dan margin kiri pada item daftar (berfungsi baik pada <ul> dan <ol>). Kelas ini hanya berlaku untuk item daftar anak-anak |
.list-inline |
Tempat semua item daftar pada satu baris |
.dl-horizontal |
Mendaftar persyaratan (<dt>) dan deskripsi (<dd>) di <dl> elemen berdampingan. Mulai seperti default <dl>, tetapi ketika jendela browser mengembang, ia akan berbaris berdampingan |
.pre-scrollable |
Membuat elemen <pre> scrollable |
Di tulis oleh: admin
