Tipografi
Dokumentasi dan contoh untuk tipografi Bootstrap, termasuk pengaturan global, judul, teks isi, daftar, dan banyak lagi.
Pengaturan global
Bootstrap mengatur tampilan global dasar, tipografi, dan gaya tautan. Ketika lebih banyak kontrol diperlukan, periksa kelas utilitas tekstual .
- Gunakan tumpukan font asli yang memilih yang terbaik
font-family
untuk setiap OS dan perangkat. - Untuk skala jenis yang lebih inklusif dan dapat diakses, kami menggunakan root default browser
font-size
(biasanya 16px) sehingga pengunjung dapat menyesuaikan default browser mereka sesuai kebutuhan. - Gunakan atribut
$font-family-base
,$font-size-base
, dan$line-height-base
sebagai dasar tipografi yang diterapkan pada<body>
. - Setel warna tautan global melalui
$link-color
. - Gunakan
$body-bg
untuk menyetel abackground-color
pada<body>
(#fff
secara default).
Gaya ini dapat ditemukan di dalam _reboot.scss
, dan variabel global didefinisikan dalam _variables.scss
. Pastikan untuk $font-size-base
mengatur rem
.
Judul
Semua judul HTML, <h1>
sampai <h6>
, tersedia.
Menuju | Contoh |
---|---|
<h1></h1> |
h1. Judul bootstrap |
<h2></h2> |
h2. Judul bootstrap |
<h3></h3> |
h3. Judul bootstrap |
<h4></h4> |
h4. Judul bootstrap |
<h5></h5> |
h5. Judul bootstrap |
<h6></h6> |
h6. Judul bootstrap |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1
melalui .h6
kelas juga tersedia, untuk saat Anda ingin mencocokkan gaya font judul tetapi tidak dapat menggunakan elemen HTML terkait.
h1. Judul bootstrap
h2. Judul bootstrap
h3. Judul bootstrap
h4. Judul bootstrap
h5. Judul bootstrap
h6. Judul bootstrap
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
Menyesuaikan judul
Gunakan kelas utilitas yang disertakan untuk membuat ulang teks judul sekunder kecil dari Bootstrap 3.
Judul tampilan mewah Dengan teks sekunder pudar
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Tampilkan judul
Elemen heading tradisional dirancang untuk bekerja paling baik dalam daging konten halaman Anda. Saat Anda membutuhkan heading untuk menonjol, pertimbangkan untuk menggunakan heading tampilan —gaya heading yang lebih besar dan sedikit lebih berpendirian.
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
Judul tampilan dikonfigurasi melalui $display-font-sizes
peta Sass dan dua variabel, $display-font-weight
dan $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
Memimpin
Buat paragraf menonjol dengan menambahkan .lead
.
Ini adalah paragraf utama. Itu menonjol dari paragraf biasa.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Elemen teks sebaris
Penataan gaya untuk elemen HTML5 sebaris yang umum.
Anda dapat menggunakan tag tanda untukmenyorotteks.
Baris teks ini dimaksudkan untuk diperlakukan sebagai teks yang dihapus.
Baris teks ini dimaksudkan untuk diperlakukan sebagai tidak lagi akurat.
Baris teks ini dimaksudkan untuk diperlakukan sebagai tambahan pada dokumen.
Baris teks ini akan dirender sebagai digarisbawahi.
Baris teks ini dimaksudkan untuk diperlakukan sebagai cetakan kecil.
Baris ini ditampilkan sebagai teks tebal.
Baris ini dirender sebagai teks miring.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
Hati-hati bahwa tag tersebut harus digunakan untuk tujuan semantik:
<mark>
mewakili teks yang ditandai atau disorot untuk tujuan referensi atau notasi.<small>
mewakili komentar sampingan dan cetakan kecil, seperti hak cipta dan teks hukum.<s>
mewakili elemen yang tidak lagi relevan atau tidak lagi akurat.<u>
mewakili rentang teks sebaris yang harus dirender dengan cara yang menunjukkan bahwa ia memiliki anotasi non-tekstual.
Jika Anda ingin menata teks Anda, Anda harus menggunakan kelas berikut sebagai gantinya:
.mark
akan menerapkan gaya yang sama seperti<mark>
..small
akan menerapkan gaya yang sama seperti<small>
..text-decoration-underline
akan menerapkan gaya yang sama seperti<u>
..text-decoration-line-through
akan menerapkan gaya yang sama seperti<s>
.
Meskipun tidak ditampilkan di atas, silakan gunakan <b>
dan <i>
dalam HTML5. <b>
dimaksudkan untuk menyoroti kata atau frasa tanpa menyampaikan kepentingan tambahan, sementara <i>
sebagian besar untuk suara, istilah teknis, dll.
Utilitas teks
Ubah perataan teks, transformasi, gaya, berat, tinggi garis, dekorasi, dan warna dengan utilitas teks dan utilitas warna kami .
Singkatan
Implementasi bergaya <abbr>
elemen HTML untuk singkatan dan akronim untuk menampilkan versi yang diperluas saat mengarahkan kursor. Singkatan memiliki garis bawah default dan mendapatkan kursor bantuan untuk memberikan konteks tambahan saat mengarahkan kursor dan kepada pengguna teknologi bantu.
Tambahkan .initialism
ke singkatan untuk ukuran font yang sedikit lebih kecil.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blockquote
Untuk mengutip blok konten dari sumber lain dalam dokumen Anda. Bungkus HTML<blockquote class="blockquote">
apa pun sebagai kutipan.
Kutipan terkenal, terkandung dalam elemen blockquote.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Menyebutkan sumber
Spesifikasi HTML mengharuskan atribusi blockquote ditempatkan di luar <blockquote>
. Saat memberikan atribusi, bungkus Anda <blockquote>
dalam a <figure>
dan gunakan <figcaption>
elemen level a atau blok (misalnya, <p>
) dengan .blockquote-footer
kelas. Pastikan untuk membungkus nama sumber bekerja <cite>
juga.
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
Penyelarasan
Gunakan utilitas teks seperlunya untuk mengubah perataan blockquote Anda.
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
Daftar
Tanpa gaya
Hapus list-style
margin default dan kiri pada item daftar (hanya anak-anak langsung). Ini hanya berlaku untuk item daftar anak langsung , artinya Anda juga perlu menambahkan kelas untuk daftar bersarang.
- Ini adalah daftar.
- Tampaknya benar-benar tidak bergaya.
- Secara struktural, itu masih daftar.
- Namun, gaya ini hanya berlaku untuk elemen turunan langsung.
- Daftar bersarang:
- tidak terpengaruh oleh gaya ini
- masih akan menunjukkan peluru
- dan memiliki margin kiri yang sesuai
- Ini mungkin masih berguna dalam beberapa situasi.
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
Di barisan
Hapus peluru daftar dan terapkan beberapa cahaya margin
dengan kombinasi dua kelas, .list-inline
dan .list-inline-item
.
- Ini adalah item daftar.
- Dan satu lagi.
- Tapi mereka ditampilkan inline.
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
Penjajaran daftar deskripsi
Sejajarkan istilah dan deskripsi secara horizontal dengan menggunakan kelas standar sistem grid kami (atau mixin semantik). Untuk jangka waktu yang lebih lama, Anda dapat menambahkan kelas secara opsional .text-truncate
untuk memotong teks dengan elipsis.
- Daftar deskripsi
- Daftar deskripsi sangat cocok untuk mendefinisikan istilah.
- Ketentuan
-
Definisi untuk istilah.
Dan beberapa teks definisi placeholder lainnya.
- Istilah lain
- Definisi ini pendek, jadi tidak ada paragraf tambahan atau apa pun.
- Istilah terpotong terpotong
- Ini bisa berguna saat ruang sempit. Menambahkan elipsis di akhir.
- Bersarang
-
- Daftar definisi bersarang
- Saya mendengar Anda menyukai daftar definisi. Biarkan saya meletakkan daftar definisi di dalam daftar definisi Anda.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>
Ukuran font responsif
Di Bootstrap 5, kami telah mengaktifkan ukuran font responsif secara default, memungkinkan teks untuk diskalakan secara lebih alami di seluruh perangkat dan ukuran viewport. Lihat halaman RFS untuk mengetahui cara kerjanya.
Kelancangan
Variabel
Judul memiliki beberapa variabel khusus untuk ukuran dan jarak.
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: null;
Elemen tipografi lain-lain yang dibahas di sini dan di Reboot juga memiliki variabel khusus.
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: $gray-600;
$initialism-font-size: $small-font-size;
$blockquote-margin-y: $spacer;
$blockquote-font-size: $font-size-base * 1.25;
$blockquote-footer-color: $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y: $spacer;
$hr-color: inherit;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
campuran
Tidak ada mixin khusus untuk tipografi, tetapi Bootstrap menggunakan Responsive Font Sizing (RFS) .