Tipografi

Dokuméntasi sareng conto tipografi Bootstrap, kalebet setélan global, judul, téks awak, daptar, sareng seueur deui.

Dina kaca ieu

Setélan global

Bootstrap nyetél tampilan global dasar, tipografi, sareng gaya tautan. Nalika langkung seueur kontrol diperyogikeun, pariksa kelas utilitas tékstual .

Anggo tumpukan font asli anu milih anu pangsaéna font-familypikeun unggal OS sareng alat.
Pikeun skala tipe anu langkung inklusif sareng tiasa diaksés, kami nganggo akar standar browser font-size(biasana 16px) supados sémah tiasa ngaluyukeun standar browserna upami diperyogikeun.
Anggo $font-family-base, $font-size-base, sareng $line-height-baseatribut salaku dasar tipografi urang dilarapkeun kana <body>.
Setel warna link global via $link-color.
Anggo $body-bgpikeun nyetél background-colordina <body>( #fffsacara standar).

gaya ieu bisa kapanggih dina _reboot.scss, jeung variabel global diartikeun dina _variables.scss. Pastikeun pikeun $font-size-basenyetél rem.

lulugu

Kabéh lulugu HTML, <h1>ngaliwatan <h6>, sadia.

Judul	Contona
`<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>

.h1ngaliwatan .h6kelas oge sadia, pikeun nalika rék cocog styling font tina hiji judul tapi teu bisa make unsur HTML pakait.

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>

Ngaropea judul

Anggo kelas utiliti anu kalebet pikeun nyiptakeun téks judul sekundér leutik tina Bootstrap 3.

Judul tampilan fancy Jeung téks sekundér luntur

html

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

Témbongkeun lulugu

elemen judul Tradisional dirancang pikeun dianggo pangalusna dina daging eusi kaca anjeun. Nalika anjeun peryogi judul pikeun menonjol, pertimbangkeun ngagunakeun judul tampilan - gaya judul anu langkung ageung, rada langkung pendapat.

Témbongkeun 1

Témbongkeun 2

Témbongkeun 3

Témbongkeun 4

Témbongkeun 5

Témbongkeun 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>

Judul tampilan dikonpigurasi via $display-font-sizespeta Sass sareng dua variabel, $display-font-weightsareng $display-line-height.

Judul tampilan tiasa disaluyukeun via dua variabel, $display-font-familysareng $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;

Timbel

Jieun paragraf nangtung kaluar ku nambahkeun .lead.

Ieu paragraf kalungguhan. Éta nangtung kaluar tina paragraf biasa.

html

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

Unsur téks Inline

Styling pikeun elemen HTML5 inline umum.

Anjeun tiasa make tag tanda kasorotantéks.

~~Baris téks ieu dimaksudkeun pikeun dianggap salaku téks dihapus.~~

~~Garis téks ieu dimaksudkeun pikeun dianggap henteu akurat deui.~~

Garis téks ieu dimaksudkeun pikeun diperlakukeun salaku tambahan pikeun dokumén.

Garis téks ieu bakal ditingalikeun sakumaha anu digariskeun.

Garis téks ieu dimaksudkeun pikeun diperlakukeun salaku citak anu saé.

garis ieu rendered salaku téks kandel.

garis ieu rendered salaku téks 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>

Waspada yén tag éta kedah dianggo pikeun tujuan semantik:

ngagambarkeun téks anu ditandaan atanapi disorot pikeun tujuan rujukan atanapi notasi.
ngagambarkeun koméntar sisi sareng citak leutik, sapertos hak cipta sareng téks hukum.
<s>ngagambarkeun unsur anu henteu relevan deui atanapi henteu akurat deui.
ngagambarkeun rentang téks inline nu kudu rendered dina cara nu nunjukkeun yén éta boga annotation non-tékstual.

Upami anjeun hoyong gaya téks anjeun, anjeun kedah nganggo kelas di handap ieu:

.markbakal nerapkeun gaya anu sami sareng .
.smallbakal nerapkeun gaya anu sami sareng .
.text-decoration-underlinebakal nerapkeun gaya anu sami sareng .
.text-decoration-line-throughbakal nerapkeun gaya anu sami sareng <s>.

Bari teu ditémbongkeun di luhur, ngarasa Luncat ngagunakeun na HTML5. dimaksudkeun pikeun nyorot kecap atawa frasa tanpa nepikeun pentingna tambahan, sedengkeun lolobana pikeun sora, istilah teknis, jsb.

Utiliti téks

Robah alignment téks, transformasi, gaya, beurat, garis-jangkungna, hiasan sareng warna nganggo utilitas téks sareng utilitas warna kami .

Singgetan

Palaksanaan gaya <abbr>unsur HTML pikeun singketan sareng akronim pikeun nunjukkeun versi anu dilegakeun dina hover. Singketan gaduh garis ngagurat standar sareng kéngingkeun kursor pitulung pikeun nyayogikeun kontéks tambahan dina hover sareng pangguna téknologi anu ngabantosan.

Tambahkeun .initialismka singketan pikeun ukuran font anu rada leutik.

attr

HTML

html

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

Blockquotes

Pikeun ngutip blok eusi tina sumber anu sanés dina dokumén anjeun. Bungkus <blockquote class="blockquote">sabudeureun sagala HTML salaku cutatan.

A cutatan well-dipikawanoh, dikandung dina unsur blockquote.

html

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

Ngaran hiji sumber

Spésifikasi HTML merlukeun attribution blockquote ditempatkeun di luar <blockquote>. Nalika masihan atribusi, bungkus anjeun <blockquote>sareng <figure>nganggo <figcaption>unsur tingkat blok (contona, ) sareng .blockquote-footerkelas. Pastikeun pikeun mungkus nami karya sumber dina <cite>ogé.

A cutatan well-dipikawanoh, dikandung dina 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>

Ngajajar

Anggo utilitas téks upami diperyogikeun pikeun ngarobih alignment blockquote anjeun.

A cutatan well-dipikawanoh, dikandung dina 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>

A cutatan well-dipikawanoh, dikandung dina 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>

Daptar

Teu gaya

Leupaskeun standar list-stylesareng margin kénca dina daptar item (ngan barudak saharita). Ieu ngan manglaku ka barudak langsung daptar item , hartina anjeun bakal kudu nambahan kelas pikeun sagala daptar nested ogé.

Ieu daptar.
Nembongan sagemblengna unstyled.
Sacara stuktur, éta masih mangrupa daptar.
Sanajan kitu, gaya ieu ngan manglaku ka elemen anak saharita.
Daptar Nested:
- teu kapangaruhan ku gaya ieu
- masih bakal nembongkeun bullet a
- sarta boga margin kénca luyu
Ieu masih tiasa dianggo dina sababaraha kaayaan.

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>

Baris

Cabut pélor daptar sareng nerapkeun sababaraha lampu marginkalayan kombinasi dua kelas, .list-inlinesareng .list-inline-item.

Ieu daptar item.
Sareng hiji deui.
Tapi aranjeunna nuju ditampilkeun 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 daptar pedaran

Sejajarkeun istilah sareng déskripsi sacara horisontal ku cara ngagunakeun kelas anu tos ditetepkeun ku sistem grid urang (atanapi campuran semantik). Pikeun istilah anu langkung panjang, anjeun tiasa nambihan .text-truncatekelas pikeun motong téks nganggo elipsis.

Daptar pedaran

Daptar pedaran sampurna pikeun nangtukeun istilah.

istilah

Harti pikeun istilah.

Jeung sababaraha téks harti placeholder langkung.

Istilah sejen

Definisi ieu pondok, janten henteu aya paragraf tambahan atanapi naon waé.

Istilah truncated nyaeta truncated

Ieu tiasa mangpaat nalika rohangan ketat. Nambahkeun hiji elipsis dina tungtungna.

Nyarang

Daptar harti Nested: Kuring ngadéngé anjeun resep daptar harti. Hayu atuh nempatkeun daptar harti jero daptar harti anjeun.

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

Dina Bootstrap 5, kami parantos ngaktipkeun ukuran font responsif sacara standar, ngamungkinkeun téks pikeun skala langkung alami dina ukuran alat sareng viewport. Tingali kana halaman RFS pikeun terang kumaha ieu jalan.

Sass

Variabel

Judul gaduh sababaraha variabel khusus pikeun ukuran sareng 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;

Rupa-rupa elemen tipografi anu katutupan di dieu sareng di Reboot ogé ngagaduhan 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

Henteu aya campuran khusus pikeun tipografi, tapi Bootstrap nganggo Responsive Font Sizing (RFS) .