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 nu leuwih inklusif jeung diaksés, urang nganggap akar standar browser font-size(ilaharna 16px) jadi nu datang bisa ngaluyukeun standar browser maranéhanana salaku diperlukeun.
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.

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.

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

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>

Ngaran hiji sumber

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

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

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

Ngajajar

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

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

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

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

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem jeung massa
Facilisis di pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean diuk 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>

Baris

Cabut pélor daptar sareng nerapkeun sababaraha lampu marginkalayan kombinasi dua kelas, .list-inlinesareng .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 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.

Euismod

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

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Istilah truncated nyaeta truncated

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nyarang

Daptar harti Nested: Aenean 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 ngarujuk kana skala téks sareng komponén ku ngan saukur nyaluyukeun unsur akar font-sizedina sababaraha patarosan média. Bootstrap henteu ngalakukeun ieu pikeun anjeun, tapi cukup gampang pikeun nambihan upami anjeun peryogina.

Ieu conto dina prakna. Milih naon font-sizes na queries média rék.

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