in English

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 menggunakan 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. Perlu diingat tajuk ini tidak responsif secara lalai, tetapi mungkin untuk mendayakan saiz fon responsif .

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.

Ini adalah perenggan utama. Ia menonjol daripada perenggan biasa.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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.

Petikan yang terkenal, terkandung dalam elemen petikan blok.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Menamakan sumber

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

Petikan yang terkenal, terkandung dalam elemen petikan blok.

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

Penjajaran

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

Petikan yang terkenal, terkandung dalam elemen petikan blok.

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

Petikan yang terkenal, terkandung dalam elemen petikan blok.

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

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.

  • Ini adalah senarai.
  • Ia kelihatan tidak digayakan sama sekali.
  • Dari segi struktur, ia masih dalam senarai.
  • Walau bagaimanapun, gaya ini hanya terpakai kepada elemen kanak-kanak segera.
  • Senarai bersarang:
    • tidak terjejas oleh gaya ini
    • masih akan menunjukkan peluru
    • dan mempunyai 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>

Dalam barisan

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

  • Ini adalah item senarai.
  • Dan satu lagi.
  • Tetapi ia dipaparkan sebaris.
<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 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.
Penggal

Definisi untuk istilah.

Dan beberapa lagi teks definisi pemegang tempat.

Istilah lain
Takrifan ini pendek, jadi tiada perenggan tambahan atau apa-apa.
Istilah terpenggal dipenggal
Ini boleh berguna apabila ruang sempit. Menambah elipsis pada penghujungnya.
Bersarang
Senarai definisi bersarang
Saya dengar anda suka senarai definisi. Izinkan saya meletakkan senarai definisi di dalam senarai 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>

Saiz fon responsif

Mulai v4.3.0, Bootstrap dihantar dengan pilihan untuk mendayakan saiz fon responsif, membolehkan teks berskala lebih semula jadi merentas saiz peranti dan port pandangan. RFS boleh didayakan dengan menukar $enable-responsive-font-sizespembolehubah Sass kepada truedan menyusun semula Bootstrap.

Untuk menyokong RFS , kami menggunakan campuran Sass untuk menggantikan font-sizesifat biasa kami. Saiz fon responsif akan disusun ke dalam calc()fungsi dengan gabungan remdan unit port pandang untuk membolehkan tingkah laku penskalaan responsif. Lebih lanjut mengenai RFS dan konfigurasinya boleh didapati pada repositori GitHubnya .