Text/Typography Bootstrap

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.

From WWF’s website

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.

From WWF’s website

<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

 

Artikel Lainnya:


Di tulis oleh: