Source

Tüpograafia

Bootstrapi tüpograafia dokumentatsioon ja näited, sealhulgas globaalsed sätted, pealkirjad, kehatekst, loendid ja palju muud.

Globaalsed seaded

Bootstrap määrab põhilised globaalsed kuvamis-, tüpograafia- ja linkistiilid. Kui vajate rohkem kontrolli, vaadake tekstilise utiliidi klasse .

Kasutage algset fondivirna , mis valib font-familyiga OS-i ja seadme jaoks parima.
Kaasavama ja juurdepääsetavama tüübiskaala jaoks eeldame brauseri font-sizevaikejuurt (tavaliselt 16 pikslit), et külastajad saaksid oma brauseri vaikeseadeid vastavalt vajadusele kohandada.
Kasutage atribuute $font-family-base, $font-size-baseja $line-height-basemeie tüpograafilise alusena, mida rakendatakse atribuudile <body>.
Määrake globaalse lingi värv $link-colorja rakendage lingi allakriipsutusi ainult :hover.
Kasutage , $body-bget määrata background-color( vaikimisi).<body>#fff

Need stiilid leiate _reboot.scssjaotisest ja globaalsed muutujad on määratletud _variables.scss. Seadistage $font-size-basekindlasti rem.

Pealkirjad

Saadaval on kõik HTML-i pealkirjad <h1>kuni <h6>.

Pealkiri	Näide
`<h1></h1>`	h1. Bootstrap pealkiri
`<h2></h2>`	h2. Bootstrap pealkiri
`<h3></h3>`	h3. Bootstrap pealkiri
`<h4></h4>`	h4. Bootstrap pealkiri
`<h5></h5>`	h5. Bootstrap pealkiri
`<h6></h6>`	h6. Bootstrap pealkiri

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

.h1Läbi .h6klasside on saadaval ka siis, kui soovite sobitada pealkirja fondi stiili, kuid ei saa kasutada seotud HTML-elementi.

h1. Bootstrap pealkiri

h2. Bootstrap pealkiri

h3. Bootstrap pealkiri

h4. Bootstrap pealkiri

h5. Bootstrap pealkiri

h6. Bootstrap pealkiri

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

Pealkirjade kohandamine

Kasutage kaasasolevaid utiliidiklasse, et luua Bootstrap 3-st väike teisese pealkirja tekst.

Väljamõeldud kuvapealkiri tuhmunud teisese tekstiga

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

Kuva pealkirjad

Traditsioonilised pealkirjaelemendid on loodud töötama kõige paremini teie lehe sisus. Kui vajate silmapaistmiseks pealkirja, kaaluge kuvatava pealkirja kasutamist – suuremat ja pisut rohkem arvamust avaldavat pealkirjastiili.

Ekraan 1

Ekraan 2

Ekraan 3

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

Plii

Muutke lõik silmapaistvaks, lisades .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>

Tekstisisesed elemendid

Levinud tekstisiseste HTML5 elementide stiil.

Saate kasutada märgistustesiletekst.

~~Seda tekstirida tuleb käsitleda kustutatud tekstina.~~

~~Seda tekstirida tuleb käsitleda ebatäpsena.~~

Seda tekstirida tuleb käsitleda dokumendi lisana.

See tekstirida renderdatakse allajoonituna

Seda tekstirida tuleb käsitleda peenes kirjas.

See rida renderdati paksus kirjas tekstina.

See rida renderdati kaldkirjas tekstina.

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

.markja .smallklassid on saadaval ka samade stiilide rakendamiseks <mark>ja <small>vältides samal ajal soovimatuid semantilisi tagajärgi, mida sildid kaasa toovad.

<b>Kuigi seda ülal pole näidatud, kasutage seda vabalt <i>HTML5-s. <b>on mõeldud sõnade või fraaside esiletõstmiseks ilma täiendavat tähtsust andmata, samas kui <i>see on enamasti mõeldud hääle, tehniliste terminite jms jaoks.

Teksti utiliidid

Muutke teksti joondamist, teisendamist, stiili, kaalu ja värvi meie teksti- ja värviutiliitidega .

Lühendid

HTML-i elemendi stiliseeritud rakendamine <abbr>lühendite ja akronüümide jaoks, et näidata laiendatud versiooni hõljutamisel. Lühenditel on vaikimisi allakriipsutus ja abikursor, et pakkuda hõljutamisel ja abitehnoloogiate kasutajatele lisakonteksti.

.initialismVeidi väiksema fondi suuruse saamiseks lisage lühendile.

attr

HTML

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

Plokktsitaadid

Sisuplokkide tsiteerimiseks teie dokumendis teisest allikast. Mähkige tsitaadina mis <blockquote class="blockquote">tahes HTML -i ümber.

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv 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>

Allika nimetamine

Lisage <footer class="blockquote-footer">allika tuvastamiseks a. Mähi lähtetöö nimi sisse <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.

Keegi kuulus allika pealkirjas

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

Joondamine

Kasutage plokitsitaadi joonduse muutmiseks vastavalt vajadusele tekstiutiliite.

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.

Keegi kuulus allika pealkirjas

<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 eliit. Täisarv posuere erat a ante.

Keegi kuulus allika pealkirjas

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

Loendid

Stiilita

Eemaldage list-styleloendiüksustel vaike- ja vasak veeris (ainult kohesed alajärgud). See kehtib ainult vahetute alamloendi üksuste kohta , mis tähendab, et peate klassi lisama ka kõigi pesastatud loendite jaoks.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Täisarv molestie lorem ja mass
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat juures
Faucibus porta lacus fringilla vel
Aenean sit 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>

Järjekorras

Eemaldage loendist täpid ja rakendage veidi valgust marginkahe klassi kombinatsiooniga .list-inlineja .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>

Kirjeldusloendi joondamine

Joondage terminid ja kirjeldused horisontaalselt, kasutades meie ruudustikusüsteemi eelmääratletud klasse (või semantilisi segusid). Pikema aja jooksul saate valikuliselt lisada .text-truncateklassi, et kärpida teksti ellipsiga.

Kirjeldusloendid

Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.

Euismod

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

Donec id elit non mi porta gravida ja eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kärbitud termin on kärbitud

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

Pesitsemine

Pesastatud määratluste loend: 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>

Responsiivne tüpograafia

Responsiivne tüpograafiafont-size viitab teksti ja komponentide skaleerimisele, kohandades meediumipäringute seerias lihtsalt juurelemente . Bootstrap ei tee seda teie eest, kuid seda on vajadusel üsna lihtne lisada.

Siin on näide sellest praktikas. Valige soovitud font-sizes- ja meediapäringud.

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