in English

Typografi

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

På denne siden

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

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>

Tilpasse overskrifter

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

Fancy displayoverskrift Med falmet sekundærtekst

html

<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

Skjerm 5

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

Visningsoverskrifter konfigureres via $display-font-sizesSass-kartet og to variabler, $display-font-weightog $display-line-height.

Visningsoverskrifter kan tilpasses via to variabler, $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;

Lede

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

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

html

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

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>

Vær oppmerksom på at disse kodene skal brukes til semantiske formål:

representerer tekst som er merket eller uthevet for referanse- eller notasjonsformål.
representerer sidekommentarer og liten skrift, som opphavsrett og juridisk tekst.
<s>representerer elementer som ikke lenger er relevante eller ikke lenger nøyaktige.
representerer et spenn av innebygd tekst som skal gjengis på en måte som indikerer at den har en ikke-tekstlig merknad.

Hvis du vil style teksten din, bør du bruke følgende klasser i stedet:

.markvil bruke de samme stilene som .
.smallvil bruke de samme stilene som .
.text-decoration-underlinevil bruke de samme stilene som .
.text-decoration-line-throughvil bruke de samme stilene som <s>.

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

Tekstverktøy

Endre tekstjustering, transform, stil, vekt, linjehøyde, dekorasjon 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

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.

html

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

Navngi en kilde

HTML-spesifikasjonen krever at blockquote-attribusjon plasseres utenfor <blockquote>. Når du gir attribusjon, pakk <blockquote>inn en <figure>og bruk et <figcaption>eller et blokknivåelement (f.eks. ) med .blockquote-footerklassen. Pass på å pakke inn navnet på kildeverket <cite>også.

Et velkjent sitat, inneholdt i et blockquote-element.

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>

Justering

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

Et velkjent sitat, inneholdt i et blockquote-element.

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>

Et velkjent sitat, inneholdt i et blockquote-element.

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>

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.

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>

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.

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>

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.

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>

Responsive skriftstørrelser

I Bootstrap 5 har vi aktivert responsive skriftstørrelser som standard, slik at tekst kan skaleres mer naturlig på tvers av enhets- og visningsportstørrelser. Ta en titt på RFS-siden for å finne ut hvordan dette fungerer.

Sass

Variabler

Overskrifter har noen dedikerte variabler for størrelse og avstand.

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

Diverse typografielementer dekket her og i Reboot har også dedikerte variabler.

$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

Det er ingen dedikerte blandinger for typografi, men Bootstrap bruker Responsive Font Sizing (RFS) .