Leturfræði

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

Á þessari síðu

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 lit á alþjóðlegum hlekk með $link-color.
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

html

<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

html

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

Skjár 1

Skjár 2

Skjár 3

Skjár 4

Skjár 5

Skjár 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Sýnafyrirsagnir eru stilltar með $display-font-sizesSass kortinu og tveimur breytum, $display-font-weightog $display-line-height.

Hægt er að aðlaga skjáfyrirsagnir með tveimur breytum $display-font-familyog $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

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.

html

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

html

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

Varist að þessi merki ætti að nota í merkingarfræðilegum tilgangi:

táknar texta sem er merktur eða auðkenndur til tilvísunar eða ritunar.
táknar hliðar athugasemdir og smáa letur, eins og höfundarrétt og lagatexta.
<s>táknar þátt sem er ekki lengur viðeigandi eða ekki lengur nákvæm.
táknar svið af innbyggðum texta sem ætti að túlka á þann hátt sem gefur til kynna að hann hafi ekki textaskýringu.

Ef þú vilt stíla textann þinn ættirðu að nota eftirfarandi flokka í staðinn:

.markmun beita sömu stílum og .
.smallmun beita sömu stílum og .
.text-decoration-underlinemun beita sömu stílum og .
.text-decoration-line-throughmun beita sömu stílum og <s>.

Þó ekki sé sýnt hér að ofan, ekki hika við að nota og í HTML5. er ætlað að varpa ljósi á orð eða orðasambönd án þess að koma til með að auka mikilvægi, en er aðallega fyrir rödd, tæknileg hugtök osfrv.

Textaforrit

Breyttu textajöfnun, umbreytingu, stíl, þyngd, línuhæð, skreytingu og lit með textatólum okkar og litatólum .

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

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.

html

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

Að nefna heimild

HTML-forskriftin krefst þess að tilvitnun blokkar sé sett utan <blockquote>. Þegar þú gefur tilvísun, pakkaðu inn <blockquote>a <figure>og notaðu <figcaption>einingu eða blokkarstig (td ) með .blockquote-footerbekknum. Vertu viss um að vefja nafn heimildarverksins <cite>líka inn.

Vel þekkt tilvitnun, sem er í blokkatilvitnun.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Jöfnun

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

Vel þekkt tilvitnun, sem er í blokkatilvitnun.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Vel þekkt tilvitnun, sem er í blokkatilvitnun.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

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.

html

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

html

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

html

<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

Í Bootstrap 5 höfum við sjálfgefið virkjað móttækilegar leturstærðir, sem gerir texta kleift að stækka á náttúrulegri hátt yfir tæki og útsýnisstærðir. Skoðaðu RFS síðuna til að komast að því hvernig þetta virkar.

Sass

Breytur

Fyrirsagnir hafa nokkrar sérstakar breytur fyrir stærð og bil.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Ýmsir leturfræðiþættir sem fjallað er um hér og í Reboot hafa einnig sérstakar breytur.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mixins

Það eru engar sérstakar blöndur fyrir leturfræði, en Bootstrap notar móttækilega leturstærð (RFS) .