Source

Typografi

Dokumentasjon og eksempler for Bootstrap-typografi, inkludert globale innstillinger, overskrifter, brødtekst, lister og mer.

Globale innstillinger

Bootstrap setter grunnleggende globale visnings-, typografi- og lenkestiler. Når mer kontroll er nødvendig, sjekk ut tekstverktøyklassene .

  • Bruk en innebygd fontstabel som velger det beste font-familyfor hvert operativsystem og enhet.
  • For en mer inkluderende og tilgjengelig typeskala, antar vi nettleserens standardrot font-size(vanligvis 16px) slik at besøkende kan tilpasse nettleserstandardene etter behov.
  • Bruk $font-family-base, $font-size-base, og $line-height-baseattributtene som vår typografiske base brukt på <body>.
  • Angi den globale koblingsfargen via $link-colorog bruk lenkeunderstreking kun på :hover.
  • Bruk $body-bgfor å sette a background-colorpå <body>( #fffsom standard).

Disse stilene kan finnes i _reboot.scss, og de globale variablene er definert i _variables.scss. Sørg for å sette $font-size-baseinn rem.

Overskrifter

Alle HTML-overskrifter, <h1>gjennom <h6>, er tilgjengelige.

Overskrift Eksempel

<h1></h1>

 h1. Bootstrap-overskrift

<h2></h2>

 h2. Bootstrap-overskrift

<h3></h3>

 h3. Bootstrap-overskrift

<h4></h4>

 h4. Bootstrap-overskrift

<h5></h5>

 h5. Bootstrap-overskrift

<h6></h6>

 h6. Bootstrap-overskrift 
<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>

.h1gjennom .h6-klasser er også tilgjengelige når du ønsker å matche skriftstilen til en overskrift, men ikke kan bruke det tilknyttede HTML-elementet.

h1. Bootstrap-overskrift

h2. Bootstrap-overskrift

h3. Bootstrap-overskrift

h4. Bootstrap-overskrift

h5. Bootstrap-overskrift

h6. Bootstrap-overskrift

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

Tilpasse overskrifter

Bruk de inkluderte verktøyklassene til å gjenskape den lille sekundære overskriftsteksten fra Bootstrap 3.

Fancy visningsoverskrift Med falmet sekundær tekst 
<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Vis overskrifter

Tradisjonelle overskriftselementer er designet for å fungere best i innholdet på siden din. Når du trenger en overskrift for å skille seg ut, bør du vurdere å bruke en visningsoverskrift – en større, litt mer egensinnet overskriftsstil.

Skjerm 1
Skjerm 2
Skjerm 3
Skjerm 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>

Lede

Få et avsnitt til å skille seg ut ved å legge til .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, er ikke commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Innebygde tekstelementer

Styling for vanlige innebygde HTML5-elementer.

Du kan bruke merkelappen tilfremhevetekst.

Denne tekstlinjen er ment å bli behandlet som slettet tekst.

Denne tekstlinjen er ment å bli behandlet som ikke lenger nøyaktig.

Denne tekstlinjen er ment å bli behandlet som et tillegg til dokumentet.

Denne tekstlinjen vil gjengis som understreket

Denne tekstlinjen er ment å bli behandlet som liten skrift.

Denne linjen gjengitt som fet tekst.

Denne linjen gjengitt som kursiv tekst.

<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 .smallklasser er også tilgjengelige for å bruke de samme stilene som <mark>og <small>samtidig som man unngår uønskede semantiske implikasjoner som taggene vil medføre.

Selv om det ikke er vist ovenfor, bruk gjerne <b>og <i>i HTML5. <b>er ment å fremheve ord eller setninger uten å formidle ekstra betydning, mens <i>det er mest for stemme, tekniske termer, etc.

Tekstverktøy

Endre tekstjustering, transform, stil, vekt og farge med våre tekstverktøy og fargeverktøy .

Forkortelser

Stilisert implementering av HTMLs <abbr>element for forkortelser og akronymer for å vise den utvidede versjonen ved sveving. Forkortelser har en standard understreking og får en hjelpemarkør for å gi ekstra kontekst ved pekeren og til brukere av hjelpeteknologier.

Legg .initialismtil en forkortelse for en litt mindre skriftstørrelse.

attr

HTML

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

Blockquotes

For å sitere blokker med innhold fra en annen kilde i dokumentet ditt. Pakk <blockquote class="blockquote">rundt hvilken som helst HTML som sitatet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.

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

Navngi en kilde

Legg til en <footer class="blockquote-footer">for å identifisere kilden. Pakk inn navnet på kildeverket i <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.

Noen kjent i kildetittelen 
<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>

Justering

Bruk tekstverktøy etter behov for å endre justeringen av blokkanførselen.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.

Noen kjent i kildetittelen 
<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. Heltall posuere erat en ante.

Noen kjent i kildetittelen 
<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>

Lister

Ustilt

Fjern standardmargen list-styleog venstremargen på listeelementer (kun umiddelbare underordnede). Dette gjelder bare for umiddelbare barnelisteelementer , noe som betyr at du også må legge til klassen for alle nestede lister.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis i 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>

På linje

Fjern en listes kuler og bruk litt lys marginmed en kombinasjon av to klasser, .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>

Justering av beskrivelsesliste

Juster termer og beskrivelser horisontalt ved å bruke rutenettsystemets forhåndsdefinerte klasser (eller semantiske blandinger). For lengre perioder kan du eventuelt legge til en .text-truncateklasse for å avkorte teksten med en ellipse.

Beskrivelseslister
En beskrivelsesliste er perfekt for å definere begreper.
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.
Avkortet begrep er avkortet
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Hekking
Nestet definisjonsliste
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>

Responsiv typografi

Responsiv typografi refererer til skalering av tekst og komponenter ved ganske enkelt å justere rotelementet font-sizei en serie mediespørringer. Bootstrap gjør ikke dette for deg, men det er ganske enkelt å legge til hvis du trenger det.

Her er et eksempel på det i praksis. Velg hvilke font-sizes og medieforespørsler du ønsker.

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