in English

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 bruker 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 displayoverskrift Med falmet sekundærtekst 

<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. Husk at disse overskriftene ikke er responsive som standard, men det er mulig å aktivere responsive skriftstørrelser .

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.

Dette er et hovedavsnitt. Det skiller seg ut fra vanlige avsnitt.

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

Et velkjent sitat, inneholdt i et blockquote-element.

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

Navngi en kilde

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

Et velkjent sitat, inneholdt i et blockquote-element.

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

Justering

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

Et velkjent sitat, inneholdt i et blockquote-element.

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

Et velkjent sitat, inneholdt i et blockquote-element.

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

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.

  • Dette er en liste.
  • Den fremstår helt ustylet.
  • Strukturelt sett er det fortsatt en liste.
  • Denne stilen gjelder imidlertid bare for umiddelbare underordnede elementer.
  • Nestede lister:
    • er upåvirket av denne stilen
    • vil fortsatt vise en kule
    • og ha passende venstre marg
  • Dette kan fortsatt være nyttig i enkelte situasjoner.
<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>

På linje

Fjern en listes kuler og bruk litt lys marginmed en kombinasjon av to klasser, .list-inlineog .list-inline-item.

  • Dette er et listeelement.
  • Og en til.
  • Men de vises inline.
<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>

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

Definisjon for begrepet.

Og litt mer plassholderdefinisjonstekst.

Et annet begrep
Denne definisjonen er kort, så ingen ekstra avsnitt eller noe.
Avkortet begrep er avkortet
Dette kan være nyttig når det er trangt om plassen. Legger til en ellipse på slutten.
Hekking
Nestet definisjonsliste
Jeg hørte at du liker definisjonslister. La meg legge inn en definisjonsliste i definisjonslisten din. 
<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>

Responsive skriftstørrelser

Fra og med v4.3.0 leveres Bootstrap med muligheten til å aktivere responsive skriftstørrelser, slik at tekst kan skaleres mer naturlig på tvers av enhets- og visningsportstørrelser. RFS kan aktiveres ved å endre $enable-responsive-font-sizesSass-variabelen til trueog rekompilere Bootstrap.

For å støtte RFS bruker vi en Sass mixin for å erstatte våre vanlige font-sizeegenskaper. Responsive skriftstørrelser vil bli kompilert til calc()funksjoner med en blanding av remog viewport-enheter for å aktivere responsiv skalering. Mer om RFS og dens konfigurasjon finner du på GitHub-depotet .