Tipografi

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

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-colorjeung nerapkeun link underlines ngan dina :hover.
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

<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

<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. Émut yén judul-judul ieu henteu responsif sacara standar, tapi kamungkinan pikeun ngaktipkeun ukuran font responsif .

Témbongkeun 1

Témbongkeun 2

Témbongkeun 3

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

Timbel

Jieun paragraf nangtung kaluar ku nambahkeun .lead.

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

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

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

.marksareng .smallkelas ogé sayogi pikeun nerapkeun gaya anu sami <mark>sareng <small>bari ngahindarkeun implikasi semantis anu teu dihoyongkeun anu bakal dibawa ku tag.

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

Utiliti téks

Robah alignment téks, transformasi, gaya, beurat, 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

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

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

Ngaran hiji sumber

Tambahkeun a <footer class="blockquote-footer">pikeun ngaidentipikasi sumber. Bungkus nami karya sumber dina <cite>.

A cutatan well-dipikawanoh, dikandung dina unsur blockquote.

Batur kawentar dina Judul 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>

Ngajajar

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

A cutatan well-dipikawanoh, dikandung dina unsur blockquote.

Batur kawentar dina Judul 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>

A cutatan well-dipikawanoh, dikandung dina unsur blockquote.

Batur kawentar dina Judul 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>

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.

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

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

<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 v4.3.0, Bootstrap ngirimkeun pilihan pikeun ngaktipkeun ukuran font responsif, ngamungkinkeun téks pikeun skala langkung alami dina ukuran alat sareng viewport. RFS tiasa diaktipkeun ku cara ngarobah $enable-responsive-font-sizesvariabel Sass truesareng recompiling Bootstrap.

Pikeun ngadukung RFS , kami nganggo mixin Sass pikeun ngagentos font-sizesipat normal urang. Ukuran font responsif bakal disusun kana calc()fungsi kalawan campuran remsarta viewport unit pikeun ngaktipkeun kabiasaan skala responsif. Langkung seueur ngeunaan RFS sareng konfigurasina tiasa dipendakan dina gudang GitHub na .