Leturfræði

Skjöl og dæmi fyrir Bootstrap leturfræði, þar á meðal alþjóðlegar stillingar, fyrirsagnir, meginmál, listar og fleira.

Alþjóðlegar stillingar

Bootstrap setur helstu alþjóðlega skjámynd, leturfræði og tenglastíla. Þegar þörf er á meiri stjórn skaltu skoða textaforritaflokkana .

Notaðu innfæddan leturstafla sem velur það besta font-familyfyrir hvert stýrikerfi og tæki.
Fyrir innifalinn og aðgengilegri tegundarkvarða notum við sjálfgefna rót vafrans font-size(venjulega 16px) svo gestir geti sérsniðið sjálfgefnar stillingar vafrans eftir þörfum.
Notaðu $font-family-base, $font-size-base, og $line-height-baseeiginleikana sem leturfræðigrunn okkar notað á <body>.
Stilltu alþjóðlega tengilitinn í gegnum $link-colorog notaðu aðeins undirstrikun tengla á :hover.
Notaðu $body-bgtil að setja a background-colorá <body>( #fffsjálfgefið).

Þessa stíla er að finna innan _reboot.scss, og alþjóðlegu breyturnar eru skilgreindar í _variables.scss. Vertu viss um að setja $font-size-baseinn rem.

Fyrirsagnir

Allar HTML fyrirsagnir, <h1>í gegnum <h6>, eru fáanlegar.

Fyrirsögn	Dæmi
`<h1></h1>`	h1. Bootstrap fyrirsögn
`<h2></h2>`	h2. Bootstrap fyrirsögn
`<h3></h3>`	h3. Bootstrap fyrirsögn
`<h4></h4>`	h4. Bootstrap fyrirsögn
`<h5></h5>`	h5. Bootstrap fyrirsögn
`<h6></h6>`	h6. Bootstrap fyrirsögn

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

.h1gegnum .h6flokkar eru einnig fáanlegir, fyrir þegar þú vilt passa við leturgerð fyrirsagnar en getur ekki notað tilheyrandi HTML frumefni.

h1. Bootstrap fyrirsögn

h2. Bootstrap fyrirsögn

h3. Bootstrap fyrirsögn

h4. Bootstrap fyrirsögn

h5. Bootstrap fyrirsögn

h6. Bootstrap fyrirsögn

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

Sérsníða fyrirsagnir

Notaðu meðfylgjandi gagnsemisflokka til að endurskapa litla aukafyrirsagnartexta úr Bootstrap 3.

Fín skjáfyrirsögn Með dofna aukatexta

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

Birta fyrirsagnir

Hefðbundnir fyrirsagnir eru hannaðar til að virka best í innihaldi síðunnar þinnar. Þegar þú þarft fyrirsögn til að skera sig úr skaltu íhuga að nota skjáfyrirsögn — stærri, aðeins skoðanameiri fyrirsagnarstíl. Hafðu í huga að þessar fyrirsagnir eru ekki móttækilegar sjálfgefið, en það er hægt að virkja móttækilegar leturstærðir .

Skjár 1

Skjár 2

Skjár 3

Skjár 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>

Blý

Láttu málsgrein skera sig úr með því að bæta við .lead.

Þetta er aðalmálsgrein. Það sker sig úr venjulegum málsgreinum.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Innbyggðir textaþættir

Stíll fyrir algenga innbyggða HTML5 þætti.

Þú getur notað merkið til aðhápunkturtexti.

~~Þessari textalínu er ætlað að meðhöndla sem eytt texta.~~

~~Þessi textalína er ætlað að vera meðhöndluð sem ekki lengur nákvæm.~~

Þessari textalínu er ætlað að meðhöndla sem viðbót við skjalið.

Þessi textalína mun birtast eins og undirstrikuð er

Þessari textalínu er ætlað að meðhöndla sem smáa letur.

Þessi lína sýnd sem feitletruð texti.

Þessi lína sýnd sem skáletraður texti.

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

.markog .smallflokkar eru einnig fáanlegir til að nota sömu stíla <mark>og <small>á meðan forðast allar óæskilegar merkingarfræðilegar afleiðingar sem merkin myndu hafa í för með sér.

Þó ekki sé sýnt hér að ofan, ekki hika við að nota <b>og <i>í HTML5. <b>er ætlað að varpa ljósi á orð eða orðasambönd án þess að koma á framfæri auknu mikilvægi en <i>er aðallega fyrir rödd, tæknileg hugtök o.s.frv.

Textaforrit

Breyttu textajöfnun, umbreyttu, stíl, þyngd og lit með texta- og litatólum okkar .

Skammstafanir

Stílfærð útfærsla HTML <abbr>frumefnis fyrir skammstafanir og skammstafanir til að sýna stækkaða útgáfuna á sveimi. Skammstafanir eru með sjálfgefna undirstrikun og fá hjálparbendil til að veita viðbótarsamhengi á sveimi og notendum hjálpartækja.

Bættu .initialismvið skammstöfun fyrir aðeins minni leturstærð.

attr

HTML

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

Blockquotes

Til að vitna í blokkir af efni frá öðrum uppruna í skjalinu þínu. Vefðu <blockquote class="blockquote">um hvaða HTML sem er sem tilvitnun.

Vel þekkt tilvitnun, sem er í blokkatilvitnun.

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

Að nefna heimild

Bættu við a <footer class="blockquote-footer">til að bera kennsl á upprunann. Vefjið nafn frumverksins inn í <cite>.

Vel þekkt tilvitnun, sem er í blokkatilvitnun.

Einhver frægur í Source Title

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

Jöfnun

Notaðu textaforrit eftir þörfum til að breyta röðun á tilvitnuninni þinni.

Vel þekkt tilvitnun, sem er í blokkatilvitnun.

Einhver frægur í Source Title

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

Vel þekkt tilvitnun, sem er í blokkatilvitnun.

Einhver frægur í Source Title

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

Listar

Óstíll

Fjarlægðu sjálfgefna list-styleog vinstri spássíu á listaatriðum (aðeins börn). Þetta á aðeins við um atriði á listanum fyrir næstu börn , sem þýðir að þú þarft líka að bæta við bekknum fyrir hreiðraða lista.

Þetta er listi.
Það virðist algjörlega óstílað.
Skipulega séð er það enn listi.
Hins vegar á þessi stíll aðeins við um strax barnaþætti.
Hreiður listar:
- eru ekki fyrir áhrifum af þessum stíl
- mun samt sýna byssukúlu
- og hafa viðeigandi vinstri spássíu
Þetta gæti samt komið sér vel í sumum tilfellum.

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

Í línu

Fjarlægðu byssukúlur listans og notaðu smá ljós marginmeð blöndu af tveimur flokkum .list-inlineog .list-inline-item.

Þetta er listaatriði.
Og annar.
En þeir eru sýndir í línu.

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

Jöfnun lýsingarlista

Samræmdu hugtök og lýsingar lárétt með því að nota fyrirfram skilgreinda flokka (eða merkingarfræðilegar blöndur) kerfisins okkar. Fyrir lengri tíma geturðu valfrjálst bætt við .text-truncateflokki til að stytta textann með sporbaug.

Lýsingarlistar

Lýsingarlisti er fullkominn til að skilgreina hugtök.

Kjörtímabil

Skilgreining á hugtakinu.

Og fleiri staðsetningarskilgreiningartextar.

Annað kjörtímabil

Þessi skilgreining er stutt, svo engar aukagreinar eða neitt.

Stypt hugtak er stytt

Þetta getur verið gagnlegt þegar plássið er þröngt. Bætir sporbaug í lokin.

Hreiður

Hreiður skilgreiningalisti: Ég heyrði að þér líkar við skilgreiningarlista. Leyfðu mér að setja skilgreiningarlista inn í skilgreiningalistann þinn.

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

Móttækilegar leturstærðir

Frá og með v4.3.0 er Bootstrap með möguleika á að virkja móttækilegar leturstærðir, sem gerir texta kleift að skalast á eðlilegri hátt yfir stærð tækja og útsýnisgátta. Hægt er að virkja RFS$enable-responsive-font-sizes með því að breyta Sass breytunni í trueog setja saman Bootstrap aftur.

Til að styðja við RFS notum við Sass mixin í stað venjulegra font-sizeeiginleika okkar. Móttækir leturstærðir verða settar saman í calc()aðgerðir með blöndu af remog útsýniseiningum til að virkja móttækilega kvarðahegðun. Meira um RFS og uppsetningu þess er að finna á GitHub geymslunni .