Source

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

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Jeneng sumber

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Wong sing misuwur ing Judhul Sumber 
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Wong sing misuwur ing Judhul Sumber 
<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Wong sing misuwur ing Judhul Sumber 
<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem lan massa
  • Facilisis ing pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat ing
  • Faucibus porta lacus fringilla vel
  • Aenean lungguh amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Inline

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

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida lan eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Istilah sing dicekak dicekak
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
nyarang
Dhaptar definisi nested
Enean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. 
<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Tipografi responsif

Tipografi responsif nuduhake skala teks lan komponen kanthi mung nyetel unsur root font-sizeing sawetara pitakon media. Bootstrap ora nindakake iki kanggo sampeyan, nanging cukup gampang ditambahake yen sampeyan butuh.

Punika conto ing laku. Pilih font-sizepitakon lan media apa wae sing dikarepake.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}