Source

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 meira innifalið og aðgengilegri tegundarkvarða, gerum við ráð fyrir sjálfgefna rót vafrans font-size(venjulega 16px) svo gestir geti sérsniðið sjálfgefna vafra 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 tólaflokka 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.

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor uppboðsmaður. 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>

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ð

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

Tilvitnanir í blokk

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Að nefna heimild

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.

Einhver frægur í Source Title 
<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>

Jöfnun

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.

Einhver frægur í Source Title 
<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 elit. Heiltala posuere ert a ante.

Einhver frægur í Source Title 
<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>

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 listaatriði fyrir börn sem eru strax , sem þýðir að þú þarft líka að bæta við bekknum fyrir hreiðraða lista.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Heiltala molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat kl
  • 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>

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

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

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

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Stypt hugtak er stytt
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, út fermentum massa justo sit amet risus.
Hreiður
Hreiður skilgreiningalisti
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>

Móttækileg leturfræði

Móttækileg leturfræði vísar til að skala texta og íhluti með því einfaldlega að stilla rótarþáttinn font-sizeinnan röð fjölmiðlafyrirspurna. Bootstrap gerir þetta ekki fyrir þig, en það er frekar auðvelt að bæta við ef þú þarft á því að halda.

Hér er dæmi um það í framkvæmd. Veldu hvaða font-sizes og fjölmiðlafyrirspurnir sem þú vilt.

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