Tipografi

Dokumentasi lan conto tipografi Bootstrap, kalebu setelan global, judhul, teks awak, dhaptar, lan liya-liyane.

Ing kaca iki

Setelan global

Bootstrap nyetel tampilan global dhasar, tipografi, lan gaya link. Yen kontrol luwih dibutuhake, priksa kelas sarana teks .

Gunakake tumpukan font asli sing milih sing paling apik font-familykanggo saben OS lan piranti.
Kanggo skala jinis sing luwih inklusif lan bisa diakses, kita nggunakake root default browser font-size(biasane 16px) supaya pengunjung bisa ngatur standar browser sing dibutuhake.
Gunakake $font-family-base, $font-size-base, lan $line-height-baseatribut minangka basis tipografi sing ditrapake ing <body>.
Setel warna link global liwat $link-color.
Gunakake $body-bgkanggo nyetel background-coloring <body>( #fffkanthi standar).

Gaya iki bisa ditemokake ing _reboot.scss, lan variabel global ditetepake ing _variables.scss. Priksa manawa kanggo nyetel $font-size-baseing rem.

Judhul

Kabeh judhul HTML, <h1>liwat <h6>, kasedhiya.

judhul	Tuladha
`<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>

.h1liwat .h6kelas uga kasedhiya, kanggo nalika sampeyan pengin cocog gaya font saka judhul nanging ora bisa nggunakake unsur HTML gadhah.

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>

Ngatur judhul

Gunakake kelas utilitas sing kalebu kanggo nggawé ulang teks judhul sekunder cilik saka Bootstrap 3.

Judhul tampilan apik Kanthi teks sekunder sing luntur

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Tampilan judhul

Unsur judhul tradisional dirancang supaya bisa digunakake paling apik ing isi konten kaca sampeyan. Yen sampeyan butuh judhul supaya bisa katon, coba gunakake judhul tampilan - gaya judhul sing luwih gedhe lan luwih apik.

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>

Judhul tampilan dikonfigurasi liwat $display-font-sizespeta Sass lan rong variabel, $display-font-weightlan $display-line-height.

Judhul tampilan bisa disesuaikan liwat rong variabel, $display-font-familylan $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;

timbal

Gawea paragraf kanthi nambahake .lead.

Iki minangka paragraf utama. Iku stands metu saka paragraf biasa.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Unsur teks inline

Styling kanggo unsur HTML5 inline umum.

Sampeyan bisa nggunakake tandha tandha kanggosorotteks.

~~Baris teks iki kudu dianggep minangka teks sing wis dibusak.~~

~~Baris teks iki kudu dianggep ora akurat maneh.~~

Baris teks iki kudu dianggep minangka tambahan kanggo dokumen kasebut.

Baris teks iki bakal ditampilake minangka garis ngisor.

Baris teks iki kudu dianggep minangka cetakan sing apik.

Baris iki digawe minangka teks kandel.

Baris iki digawe minangka 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>

Ati-ati manawa tag kasebut kudu digunakake kanggo tujuan semantik:

nggambarake teks sing ditandhani utawa disorot kanggo tujuan referensi utawa notasi.
nuduhake komentar sisih lan cetakan cilik, kayata hak cipta lan teks legal.
<s>nggambarake unsur sing ora relevan utawa ora akurat maneh.
makili span saka teks inline sing kudu diterjemahake kanthi cara sing nuduhake yen ana anotasi non-teks.

Yen sampeyan pengin nggawe gaya teks, sampeyan kudu nggunakake kelas ing ngisor iki:

.markbakal ngetrapake gaya sing padha karo .
.smallbakal ngetrapake gaya sing padha karo .
.text-decoration-underlinebakal ngetrapake gaya sing padha karo .
.text-decoration-line-throughbakal ngetrapake gaya sing padha karo <s>.

Nalika ora ditampilake ing ndhuwur, aja ragu-ragu nggunakake lan ing HTML5. tegese kanggo nyorot tembung utawa frasa tanpa menehi wigati tambahan, nanging biasane kanggo swara, istilah teknis, lsp.

Utilitas teks

Ganti keselarasan teks, transformasi, gaya, bobot, dhuwur garis, dekorasi lan warna nganggo utilitas teks lan utilitas warna .

Singkatan

Implementasi gaya saka <abbr>unsur HTML kanggo singkatan lan akronim kanggo nuduhake versi ditambahi ing hover. Singkatan duwe garis ngisor standar lan entuk kursor bantuan kanggo nyedhiyakake konteks tambahan babagan hover lan pangguna teknologi pitulung.

Tambah .initialismmenyang singkatan kanggo ukuran font sing rada cilik.

attr

HTML

html

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

Blockquotes

Kanggo ngutip blok konten saka sumber liya ing dokumen sampeyan. Bungkus <blockquote class="blockquote">HTML apa wae minangka kutipan.

Kutipan kondhang, sing ana ing unsur blockquote.

html

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

Jeneng sumber

Spesifikasi HTML mbutuhake atribusi blockquote diselehake ing njaba <blockquote>. Nalika nyedhiyakake atribusi, bungkus sampeyan <blockquote>ing a <figure>lan gunakake <figcaption>unsur level blok (contone, ) karo .blockquote-footerkelas. Priksa manawa kanggo mbungkus jeneng karya sumber <cite>uga.

Kutipan kondhang, sing ana ing unsur blockquote.

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>

Alignment

Gunakake utilitas teks yen perlu kanggo ngganti alignment blockquote sampeyan.

Kutipan kondhang, sing ana ing unsur blockquote.

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 kondhang, sing ana ing unsur blockquote.

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>

Dhaptar

Tanpa gaya

Mbusak wates gawan list-stylelan kiwa ing dhaptar item (mung anak langsung). Iki mung ditrapake kanggo item dhaptar bocah langsung , tegese sampeyan uga kudu nambah kelas kanggo dhaptar bersarang.

Iki minangka dhaptar.
Katon rampung unstyled.
Secara struktural, iki isih dadi dhaptar.
Nanging, gaya iki mung ditrapake kanggo unsur anak langsung.
Daftar Nested:
- ora kena pengaruh gaya iki
- isih bakal nuduhake peluru
- lan duwe margin kiwa sing cocog
Iki isih bisa migunani ing sawetara kahanan.

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>

Inline

Mbusak peluru dhaftar lan aplikasi sawetara cahya marginkaro kombinasi saka rong kelas, .list-inlinelan .list-inline-item.

Iki minangka item dhaptar.
Lan siji liyane.
Nanging lagi ditampilake 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>

Alignment dhaptar deskripsi

Selarasake istilah lan katrangan kanthi horisontal kanthi nggunakake kelas sing wis ditemtokake sistem kothak (utawa campuran semantik). Kanggo istilah sing luwih dawa, sampeyan bisa nambah .text-truncatekelas kanggo ngethok teks kanthi elipsis.

Dhaptar katrangan

Dhaptar deskripsi sampurna kanggo nemtokake istilah.

istilahe

Definisi kanggo istilah.

Lan sawetara teks definisi placeholder liyane.

Istilah liyane

Definisi iki cendhak, mula ora ana paragraf tambahan utawa apa wae.

Istilah sing dicekak dicekak

Iki bisa migunani nalika papan nyenyet. Nambahake elipsis ing pungkasan.

nyarang

Dhaptar definisi nested: Aku krungu sampeyan seneng dhaptar definisi. Ayo kula sijine dhaptar definisi ing dhaptar definisi sampeyan.

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

Ing Bootstrap 5, kita wis ngaktifake ukuran font responsif minangka standar, ngidini teks kanggo ukuran luwih alamiah antarane piranti lan ukuran viewport. Deleng kaca RFS kanggo ngerteni cara kerjane.

Sass

Variabel

Heading duwe sawetara variabel khusus kanggo ukuran lan spasi.

$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 maneka warna ing kene lan ing Urip maneh uga duwe 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

Ora ana campuran khusus kanggo tipografi, nanging Bootstrap nggunakake Responsive Font Sizing (RFS) .