Source

Tipografi

Dokumentasi dan contoh untuk tipografi Bootstrap, termasuk tetapan global, tajuk, teks kandungan, senarai dan banyak lagi.

Tetapan global

Bootstrap menetapkan paparan global asas, tipografi dan gaya pautan. Apabila lebih banyak kawalan diperlukan, lihat kelas utiliti teks .

  • Gunakan tindanan fon asli yang memilih yang terbaik font-familyuntuk setiap OS dan peranti.
  • Untuk skala jenis yang lebih inklusif dan boleh diakses, kami menganggap akar lalai penyemak imbas font-size(biasanya 16px) supaya pelawat boleh menyesuaikan lalai penyemak imbas mereka mengikut keperluan.
  • Gunakan $font-family-base, $font-size-base, dan $line-height-baseatribut sebagai asas tipografi kami digunakan pada <body>.
  • Tetapkan warna pautan global melalui $link-colordan gunakan garis bawah pautan hanya pada :hover.
  • Gunakan $body-bguntuk menetapkan a background-colorpada <body>( #fffsecara lalai).

Gaya ini boleh didapati dalam _reboot.scss, dan pembolehubah global ditakrifkan dalam _variables.scss. Pastikan untuk menetapkan $font-size-basedalam rem.

Tajuk

Semua tajuk HTML, <h1>melalui <h6>, tersedia.

Tajuk Contoh

<h1></h1>

 h1. Tajuk Bootstrap

<h2></h2>

 h2. Tajuk Bootstrap

<h3></h3>

 h3. Tajuk Bootstrap

<h4></h4>

 h4. Tajuk Bootstrap

<h5></h5>

 h5. Tajuk Bootstrap

<h6></h6>

 h6. Tajuk 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, kerana apabila anda ingin memadankan penggayaan fon tajuk tetapi tidak boleh menggunakan elemen HTML yang berkaitan.

h1. Tajuk Bootstrap

h2. Tajuk Bootstrap

h3. Tajuk Bootstrap

h4. Tajuk Bootstrap

h5. Tajuk Bootstrap

h6. Tajuk 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 tajuk

Gunakan kelas utiliti yang disertakan untuk mencipta semula teks tajuk sekunder kecil daripada Bootstrap 3.

Tajuk paparan mewah Dengan teks sekunder pudar 
<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Tajuk paparan

Elemen tajuk tradisional direka bentuk untuk berfungsi dengan baik dalam kandungan halaman anda. Apabila anda memerlukan tajuk untuk menonjol, pertimbangkan untuk menggunakan tajuk paparan —gaya tajuk yang lebih besar dan lebih berpendirian sedikit.

Paparan 1
Paparan 2
Paparan 3
Paparan 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

Jadikan perenggan menonjol dengan menambah .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ini bukan 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

Penggayaan untuk elemen HTML5 sebaris biasa.

Anda boleh menggunakan tanda tanda untuksorotanteks.

Baris teks ini dimaksudkan untuk dianggap sebagai teks yang dipadamkan.

Baris teks ini dimaksudkan untuk dianggap tidak lagi tepat.

Baris teks ini dimaksudkan untuk dianggap sebagai tambahan kepada dokumen.

Baris teks ini akan dipaparkan seperti yang digariskan

Baris teks ini dimaksudkan untuk dianggap sebagai cetakan halus.

Baris ini dipaparkan sebagai teks tebal.

Baris ini diterjemahkan sebagai teks condong.

<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 menggunakan gaya yang sama seperti <mark>dan <small>sambil mengelakkan sebarang implikasi semantik yang tidak diingini yang akan dibawa oleh teg.

Walaupun tidak ditunjukkan di atas, sila gunakan <b>dan <i>dalam HTML5. <b>bertujuan untuk menyerlahkan perkataan atau frasa tanpa menyampaikan kepentingan tambahan manakala <i>kebanyakannya untuk suara, istilah teknikal, dsb.

Utiliti teks

Tukar penjajaran teks, ubah, gaya, berat dan warna dengan utiliti teks dan utiliti warna kami .

Singkatan

Pelaksanaan bergaya <abbr>elemen HTML untuk singkatan dan akronim untuk menunjukkan versi dikembangkan pada tuding. Singkatan mempunyai garis bawah lalai dan mendapat kursor bantuan untuk menyediakan konteks tambahan pada tuding dan kepada pengguna teknologi bantuan.

Tambahkan .initialismpada singkatan untuk saiz fon yang lebih kecil sedikit.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Sekat petikan

Untuk memetik blok kandungan daripada sumber lain dalam dokumen anda. Bungkus <blockquote class="blockquote">mana-mana HTML sebagai petikan.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

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

Menamakan sumber

Tambahkan a <footer class="blockquote-footer">untuk mengenal pasti sumber. Balut nama kerja sumber dalam <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Seseorang yang terkenal dalam Tajuk 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>

Penjajaran

Gunakan utiliti teks seperti yang diperlukan untuk menukar penjajaran petikan blok anda.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Seseorang yang terkenal dalam Tajuk 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, consectetur adipiscing elit. Integer posuere erat ante.

Seseorang yang terkenal dalam Tajuk 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>

Senarai

Tidak bergaya

Alih keluar lalai list-styledan margin kiri pada item senarai (kanak-kanak segera sahaja). Ini hanya terpakai pada item senarai kanak-kanak segera , bermakna anda perlu menambah kelas untuk sebarang senarai bersarang juga.

  • Lorem ipsum dolor duduk amet
  • Consectetur adipiscing elit
  • Integer molestie lorem dan massa
  • Facilisis dalam pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean duduk amet erat nunc
  • Eget 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>

Dalam barisan

Keluarkan titik tumpu senarai dan gunakan sedikit cahaya margindengan gabungan dua kelas .list-inlinedan .list-inline-item.

  • Lorem ipsum
  • Phasellus 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 senarai penerangan

Jajarkan istilah dan perihalan secara mendatar dengan menggunakan kelas pratakrif sistem grid kami (atau campuran semantik). Untuk istilah yang lebih panjang, anda boleh menambah .text-truncatekelas secara pilihan untuk memotong teks dengan elipsis.

Senarai penerangan
Senarai huraian sesuai untuk menentukan istilah.
Euismod

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

Donec id elit non mi porta gravida and eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Istilah terpenggal dipenggal
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Bersarang
Senarai definisi bersarang
Aenean posuere, 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 merujuk kepada penskalaan teks dan komponen dengan hanya melaraskan elemen akar font-sizedalam siri pertanyaan media. Bootstrap tidak melakukan ini untuk anda, tetapi ia agak mudah untuk ditambah jika anda memerlukannya.

Berikut ialah contoh dalam amalan. Pilih apa sahaja font-sizes dan pertanyaan media yang anda mahukan.

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