Source

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

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Menyebutkan sumber

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

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.

Seseorang yang terkenal di Judul Sumber 
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.

Seseorang yang terkenal di Judul Sumber 
<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.

Seseorang yang terkenal di Judul Sumber 
<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

  • Lorem ipsum dolor sit amet
  • Conectetur adipiscing elit
  • Integer molestie lorem di massa
  • Facilisis di pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Bisul purus sodales
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Dapatkan porttitor lorem
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Di barisan

Hapus peluru daftar dan terapkan beberapa cahaya margindengan kombinasi dua kelas, .list-inlinedan .list-inline-item.

  • Lorem ipsum
  • Phaselus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida di eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Istilah terpotong terpotong
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Bersarang
Daftar definisi bersarang
Posuere Aenean, tortor sed cursus feugiat, nunc augue blandit nunc. 
<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Tipografi responsif

Tipografi responsif mengacu pada penskalaan teks dan komponen hanya dengan menyesuaikan elemen akar font-sizedalam serangkaian kueri media. Bootstrap tidak melakukan ini untuk Anda, tetapi cukup mudah untuk ditambahkan jika Anda membutuhkannya.

Berikut ini contohnya dalam praktik. Pilih apa pun font-sizedan kueri media yang Anda inginkan.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}