Lewati ke konten utama Lewati ke navigasi dokumen
Check
in English

Tipografi

Dokumentasi dan contoh untuk tipografi Bootstrap, termasuk pengaturan global, judul, teks isi, daftar, dan banyak lagi.

Di halaman ini

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-color.
  • 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

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

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

Tampilan 1
Tampilan 2
Tampilan 3
Tampilan 4
Tampilan 5
Tampilan 6 
<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-sizespeta Sass dan dua variabel, $display-font-weightdan $display-line-height.

Judul tampilan dapat disesuaikan melalui dua variabel, $display-font-familydan $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$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.

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

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

  • .markakan menerapkan gaya yang sama seperti <mark>.
  • .smallakan menerapkan gaya yang sama seperti <small>.
  • .text-decoration-underlineakan menerapkan gaya yang sama seperti <u>.
  • .text-decoration-line-throughakan 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 .initialismke singkatan untuk ukuran font yang sedikit lebih kecil.

attr

HTML

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 <blockquote class="blockquote">HTML apa pun sebagai kutipan.

Kutipan terkenal, terkandung dalam elemen blockquote.

html 
<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-footerkelas. Pastikan untuk membungkus nama sumber bekerja <cite>juga.

Kutipan terkenal, terkandung dalam elemen blockquote.

Seseorang yang terkenal di Judul Sumber
html 
<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.

Kutipan terkenal, terkandung dalam elemen blockquote.

Seseorang yang terkenal di Judul Sumber
html 
<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>

Kutipan terkenal, terkandung dalam elemen blockquote.

Seseorang yang terkenal di Judul Sumber
html 
<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-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.
html 
<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.
html 
<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.
html 
<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;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

campuran

Tidak ada mixin khusus untuk tipografi, tetapi Bootstrap menggunakan Responsive Font Sizing (RFS) .