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

<h2></h2>

 h2. Bootstrapi pealkiri

<h3></h3>

 h3. Bootstrapi pealkiri

<h4></h4>

 h4. Bootstrapi pealkiri

<h5></h5>

 h5. Bootstrapi pealkiri

<h6></h6>

 h6. Bootstrapi 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. Bootstrapi pealkiri

h2. Bootstrapi pealkiri

h3. Bootstrapi pealkiri

h4. Bootstrapi pealkiri

h5. Bootstrapi pealkiri

h6. Bootstrapi 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. Pidage meeles, et need pealkirjad ei reageeri vaikimisi, kuid on võimalik lubada kohanduvad fondisuurused .

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>

Tundlikud kirjasuurused

Bootstrap v4.3 tarnitakse koos võimalusega lubada reageerivaid fondisuurusi, võimaldades tekstil loomulikumalt skaleerida seadme ja vaateava suuruste lõikes. RFS -i saab lubada, muutes $enable-responsive-font-sizesSassi muutuja väärtuseks trueja kompileerides uuesti Bootstrapi.

RFS -i toetamiseks kasutame tavaliste font-sizeomaduste asendamiseks Sassi miksini. Reageerivad fondisuurused kompileeritakse calc()funktsioonideks koos vaateava ühikute kombinatsiooniga, remet võimaldada reageerivat skaleerimiskäitumist. Lisateavet RFS -i ja selle konfiguratsiooni kohta leiate selle GitHubi hoidlast .