in English

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 kasutame brauseri font-sizevaikejuure (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.

See on juhtiv lõik. See eristub tavalistest lõikudest.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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.

Tuntud tsitaat, mis sisaldub blockquote elemendis.

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

Allika nimetamine

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

Tuntud tsitaat, mis sisaldub blockquote elemendis.

Keegi kuulus allika pealkirjas

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

Joondamine

Kasutage plokitsitaadi joonduse muutmiseks vastavalt vajadusele tekstiutiliite.

Tuntud tsitaat, mis sisaldub blockquote elemendis.

Keegi kuulus allika pealkirjas

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

Tuntud tsitaat, mis sisaldub blockquote elemendis.

Keegi kuulus allika pealkirjas

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

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.

See on nimekiri.
See tundub täiesti stiilita.
Struktuuriliselt on see ikkagi nimekiri.
Kuid see stiil kehtib ainult vahetute lapseelementide kohta.
Pesastatud loendid:
- neid see stiil ei mõjuta
- näitab ikka kuuli
- ja neil on vastav vasak veeris
See võib mõnes olukorras siiski kasuks tulla.

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

Järjekorras

Eemaldage loendist täpid ja rakendage veidi valgust marginkahe klassi kombinatsiooniga .list-inlineja .list-inline-item.

See on loendi üksus.
Ja veel üks.
Kuid need kuvatakse tekstisiseselt.

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

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.

Tähtaeg

Mõiste definitsioon.

Ja veel natuke kohatäite definitsiooni teksti.

Teine termin

See määratlus on lühike, seega pole lisalõike ega midagi.

Kärbitud termin on kärbitud

See võib olla kasulik, kui ruumi on vähe. Lisab lõppu ellipsi.

Pesitsemine

Pesastatud määratluste loend: Kuulsin, et teile meeldivad määratluste loendid. Lubage mul panna teie määratluste loendisse definitsioonide loend.

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

Tundlikud kirjasuurused

Alates versioonist 4.3.0 tarnitakse Bootstrapi valikuga, mis võimaldab 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 .