in English

Tipografi

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

Pada halaman ini

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

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 tajuk

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

Tajuk paparan mewah Dengan teks sekunder pudar

html

<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

Paparan 5

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

Tajuk paparan dikonfigurasikan melalui $display-font-sizespeta Sass dan dua pembolehubah, $display-font-weightdan $display-line-height.

Tajuk paparan boleh disesuaikan melalui dua pembolehubah $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

Jadikan perenggan menonjol dengan menambah .lead.

Ini adalah perenggan utama. Ia menonjol daripada perenggan biasa.

html

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

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>

Berhati-hati bahawa teg tersebut harus digunakan untuk tujuan semantik:

mewakili teks yang ditanda atau diserlahkan untuk tujuan rujukan atau notasi.
mewakili ulasan sampingan dan cetakan kecil, seperti hak cipta dan teks undang-undang.
<s>mewakili elemen yang tidak lagi relevan atau tidak lagi tepat.
mewakili rentang teks sebaris yang harus diberikan dalam cara yang menunjukkan bahawa ia mempunyai anotasi bukan teks.

Jika anda ingin menggayakan teks anda, anda harus menggunakan kelas berikut:

.markakan menggunakan gaya yang sama seperti .
.smallakan menggunakan gaya yang sama seperti .
.text-decoration-underlineakan menggunakan gaya yang sama seperti .
.text-decoration-line-throughakan menggunakan gaya yang sama seperti <s>.

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

Utiliti teks

Tukar penjajaran teks, transformasi, gaya, berat, ketinggian garis, hiasan 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

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.

html

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

Menamakan sumber

Spesifikasi HTML memerlukan atribusi blockquote diletakkan di luar <blockquote>. Apabila memberikan atribusi, bungkus anda <blockquote>dengan a <figure>dan gunakan <figcaption>elemen tahap blok (cth, ) dengan .blockquote-footerkelas. Pastikan anda memasukkan nama kerja sumber <cite>juga.

Petikan yang terkenal, terkandung dalam elemen petikan blok.

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>

Penjajaran

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

Petikan yang terkenal, terkandung dalam elemen petikan blok.

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>

Petikan yang terkenal, terkandung dalam elemen petikan blok.

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>

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.

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>

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.

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

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>

Saiz fon responsif

Dalam Bootstrap 5, kami telah mendayakan saiz fon responsif secara lalai, membolehkan teks berskala lebih semula jadi merentas saiz peranti dan port pandangan. Sila lihat halaman RFS untuk mengetahui cara ini berfungsi.

Sass

Pembolehubah

Tajuk mempunyai beberapa pembolehubah khusus untuk saiz 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;

Pelbagai elemen tipografi yang diliputi di sini dan dalam Reboot juga mempunyai pembolehubah 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

Tiada campuran khusus untuk tipografi, tetapi Bootstrap menggunakan Saiz Font Responsif (RFS) .