Tipografi

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

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-colorlan aplikasi garis ngisor link mung ing :hover.
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

<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

<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. Elinga yen judhul iki ora responsif kanthi standar, nanging sampeyan bisa ngaktifake ukuran font responsif .

Tampilan 1

Tampilan 2

Tampilan 3

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

timbal

Gawea paragraf kanthi nambahake .lead.

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

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

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

.marklan .smallkelas uga kasedhiya kanggo ngetrapake gaya sing padha <mark>lan <small>nalika ngindhari implikasi semantik sing ora dikarepake sing bakal ditindakake dening tag.

Nalika ora ditampilake ing ndhuwur, aja ragu-ragu nggunakake <b>lan <i>ing HTML5. <b>tegese kanggo nyorot tembung utawa frase tanpa menehi wigati tambahan nalika <i>biasane kanggo swara, istilah teknis, lsp.

Utilitas teks

Ganti keselarasan teks, transformasi, gaya, bobot, 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

<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 HTML<blockquote class="blockquote"> apa wae minangka kutipan.

Kutipan kondhang, sing ana ing unsur blockquote.

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

Jeneng sumber

Tambah a <footer class="blockquote-footer">kanggo ngenali sumber. Bungkus jeneng karya sumber ing <cite>.

Kutipan kondhang, sing ana ing unsur blockquote.

Wong sing misuwur ing Judhul 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>

Alignment

Gunakake utilitas teks yen perlu kanggo ngganti alignment blockquote sampeyan.

Kutipan kondhang, sing ana ing unsur blockquote.

Wong sing misuwur ing Judhul 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>

Kutipan kondhang, sing ana ing unsur blockquote.

Wong sing misuwur ing Judhul 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>

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.

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

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

<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 v4.3.0, Bootstrap dikirim kanthi pilihan kanggo ngaktifake ukuran font responsif, ngidini teks kanggo ukuran luwih alamiah antarane piranti lan ukuran viewport. RFS bisa diaktifake kanthi ngganti $enable-responsive-font-sizesvariabel Sass truelan ngumpulake maneh Bootstrap.

Kanggo ndhukung RFS , kita nggunakake mixin Sass kanggo ngganti font-sizesifat normal kita. Ukuran font responsif bakal dikompilasi dadi calc()fungsi kanthi campuran remlan unit viewport kanggo ngaktifake prilaku skala responsif. Luwih lengkap babagan RFS lan konfigurasi bisa ditemokake ing repositori GitHub .