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-familyuntuk 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-basesebagai dasar tipografi yang diterapkan pada <body>.
Setel warna tautan global melalui $link-colordan terapkan garis bawah tautan hanya di :hover.
Gunakan $body-bguntuk menyetel a background-colorpada <body>( #fffsecara default).

Gaya ini dapat ditemukan di dalam _reboot.scss, dan variabel global didefinisikan dalam _variables.scss. Pastikan untuk $font-size-basemengatur 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>

.h1melalui .h6kelas 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. Ingatlah bahwa judul ini tidak responsif secara default, tetapi dimungkinkan untuk mengaktifkan ukuran font responsif .

Tampilan 1

Tampilan 2

Tampilan 3

Tampilan 4

<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>

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>

.markdan .smallkelas juga tersedia untuk menerapkan gaya yang sama <mark>dan <small>sambil menghindari implikasi semantik yang tidak diinginkan yang akan dibawa oleh tag.

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, bobot, 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 .initialismke 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 class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Menyebutkan sumber

Tambahkan a <footer class="blockquote-footer">untuk mengidentifikasi sumber. Bungkus nama pekerjaan sumber di <cite>.

Kutipan terkenal, terkandung dalam elemen blockquote.

Seseorang yang terkenal di Judul Sumber

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Penyelarasan

Gunakan utilitas teks seperlunya untuk mengubah perataan blockquote Anda.

Kutipan terkenal, terkandung dalam elemen blockquote.

Seseorang yang terkenal di Judul Sumber

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Kutipan terkenal, terkandung dalam elemen blockquote.

Seseorang yang terkenal di Judul Sumber

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Daftar

Tanpa gaya

Hapus list-stylemargin 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 margindengan kombinasi dua kelas, .list-inlinedan .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-truncateuntuk 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

Mulai v4.3.0, Bootstrap dikirimkan dengan opsi untuk mengaktifkan ukuran font responsif, memungkinkan teks untuk diskalakan secara lebih alami di seluruh perangkat dan ukuran viewport. RFS dapat diaktifkan dengan mengubah $enable-responsive-font-sizesvariabel Sass ke truedan mengkompilasi ulang Bootstrap.

Untuk mendukung RFS , kami menggunakan mixin Sass untuk menggantikan font-sizeproperti normal kami. Ukuran font responsif akan dikompilasi ke dalam calc()fungsi dengan campuran remdan unit viewport untuk mengaktifkan perilaku penskalaan responsif. Lebih lanjut tentang RFS dan konfigurasinya dapat ditemukan di repositori GitHub -nya .