Typografi

Dokumentation och exempel för Bootstrap-typografi, inklusive globala inställningar, rubriker, brödtext, listor och mer.

På den här sidan

Globala inställningar

Bootstrap ställer in grundläggande globala visnings-, typografi- och länkstilar. När mer kontroll behövs, kolla in textverktygsklasserna .

Använd en inbyggd teckensnittsstack som väljer det bästa font-familyför varje operativsystem och enhet.
För en mer inkluderande och tillgänglig typskala använder vi webbläsarens standardrot font-size(vanligtvis 16px) så att besökare kan anpassa sina webbläsarstandarder efter behov.
Använd $font-family-base, $font-size-base, och $line-height-baseattributen som vår typografiska bas tillämpad på <body>.
Ställ in den globala länkfärgen via $link-color.
Använd $body-bgför att ställa in a background-colorpå <body>( som #fffstandard).

Dessa stilar finns inom _reboot.scss, och de globala variablerna definieras i _variables.scss. Se till att ställa $font-size-basein rem.

Rubriker

Alla HTML-rubriker, <h1>genom <h6>, är tillgängliga.

Rubrik	Exempel
`<h1></h1>`	h1. Bootstrap rubrik
`<h2></h2>`	h2. Bootstrap rubrik
`<h3></h3>`	h3. Bootstrap rubrik
`<h4></h4>`	h4. Bootstrap rubrik
`<h5></h5>`	h5. Bootstrap rubrik
`<h6></h6>`	h6. Bootstrap rubrik

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

.h1genomklasser .h6finns också tillgängliga, för när du vill matcha teckensnittsstilen för en rubrik men inte kan använda det associerade HTML-elementet.

h1. Bootstrap rubrik

h2. Bootstrap rubrik

h3. Bootstrap rubrik

h4. Bootstrap rubrik

h5. Bootstrap rubrik

h6. Bootstrap rubrik

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>

Anpassa rubriker

Använd de medföljande verktygsklasserna för att återskapa den lilla sekundära rubriktexten från Bootstrap 3.

Snygg displayrubrik Med bleka sekundär text

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Visa rubriker

Traditionella rubrikelement är designade för att fungera bäst i innehållet på sidan. När du behöver en rubrik för att sticka ut, överväg att använda en visningsrubrik — en större, lite mer egensinnig rubrikstil.

Display 1

Display 2

Display 3

Display 4

Display 5

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

Visningsrubriker konfigureras via $display-font-sizesSass-kartan och två variabler, $display-font-weightoch $display-line-height.

Visningsrubriker är anpassningsbara via två variabler, $display-font-familyoch $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;

Leda

Få ett stycke att sticka ut genom att lägga till .lead.

Detta är ett ledande stycke. Det skiljer sig från vanliga stycken.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Inline textelement

Styling för vanliga inline HTML5-element.

Du kan använda markeringstaggen för attmarkeratext.

~~Denna textrad är avsedd att behandlas som raderad text.~~

~~Denna textrad är avsedd att behandlas som inte längre korrekt.~~

Denna textrad är avsedd att behandlas som ett tillägg till dokumentet.

Denna textrad återges som understruken.

Denna textrad är avsedd att behandlas som finstilt.

Denna rad återges som fet text.

Denna rad återges som kursiv text.

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>

Tänk på att dessa taggar ska användas för semantiska ändamål:

representerar text som är markerad eller markerad för referens- eller notationsändamål.
representerar sidokommentarer och finstilt, som copyright och juridisk text.
<s>representerar element som inte längre är relevanta eller inte längre korrekta.
representerar ett spann av inline-text som ska renderas på ett sätt som indikerar att den har en icke-textuell anteckning.

Om du vill styla din text bör du använda följande klasser istället:

.markkommer att tillämpa samma stilar som .
.smallkommer att tillämpa samma stilar som .
.text-decoration-underlinekommer att tillämpa samma stilar som .
.text-decoration-line-throughkommer att tillämpa samma stilar som <s>.

Även om det inte visas ovan, använd gärna och i HTML5. är avsedd att markera ord eller fraser utan att förmedla ytterligare betydelse, medan är mest för röst, tekniska termer, etc.

Textverktyg

Ändra textjustering, transformera, stil, vikt, linjehöjd, dekoration och färg med våra textverktyg och färgverktyg .

Förkortningar

Stiliserad implementering av HTMLs <abbr>element för förkortningar och akronymer för att visa den utökade versionen vid hovring. Förkortningar har en förinställd understrykning och får en hjälpmarkör för att ge ytterligare sammanhang vid hovring och för användare av hjälpmedel.

Lägg .initialismtill en förkortning för en lite mindre teckenstorlek.

attr

HTML

html

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

Blockcitat

För att citera innehållsblock från en annan källa i ditt dokument. Linda <blockquote class="blockquote">runt vilken HTML som helst som citat.

Ett välkänt citat, inkluderat i ett blockquote-element.

html

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

Namnge en källa

HTML-specifikationen kräver att blockquote-attribution placeras utanför <blockquote>. När du tillhandahåller attribution, slå in din <blockquote>i en <figure>och använd ett <figcaption>eller ett element på blocknivå (t.ex. ) med .blockquote-footerklassen. Var noga med att linda in namnet på källverket <cite>också.

Ett välkänt citat, inkluderat i ett 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>

Inriktning

Använd textverktyg efter behov för att ändra justeringen av ditt blockcitat.

Ett välkänt citat, inkluderat i ett 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>

Ett välkänt citat, inkluderat i ett 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>

Listor

Ostylad

Ta bort standardmarginalen list-styleoch vänstermarginalen på listobjekt (endast omedelbara underordnade). Detta gäller bara objekt för omedelbara underordnade listor , vilket innebär att du måste lägga till klassen för alla kapslade listor också.

Det här är en lista.
Det verkar helt ostylat.
Strukturellt sett är det fortfarande en lista.
Den här stilen gäller dock bara för omedelbara underordnade element.
Kapslade listor:
- är opåverkade av denna stil
- kommer fortfarande att visa en kula
- och ha lämplig vänstermarginal
Detta kan fortfarande vara användbart i vissa situationer.

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>

I kö

Ta bort en listas kulor och applicera lite ljus marginmed en kombination av två klasser, .list-inlineoch .list-inline-item.

Detta är ett listobjekt.
Och ännu en.
Men de visas 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>

Beskrivningslistjustering

Justera termer och beskrivningar horisontellt genom att använda vårt rutsystems fördefinierade klasser (eller semantiska mixins). För längre sikt kan du valfritt lägga till en .text-truncateklass för att trunkera texten med en ellips.

Beskrivningslistor

En beskrivningslista är perfekt för att definiera termer.

Termin

Definition för termen.

Och lite mer platshållardefinitionstext.

En annan term

Denna definition är kort, så inga extra stycken eller något.

Trunkerad term är trunkerad

Detta kan vara användbart när utrymmet är trångt. Lägger till en ellips i slutet.

Häckande

Kapslad definitionslista: Jag hörde att du gillar definitionslistor. Låt mig lägga in en definitionslista i din definitionslista.

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>

Responsiva teckenstorlekar

I Bootstrap 5 har vi aktiverat responsiva teckensnittsstorlekar som standard, vilket gör att text kan skalas mer naturligt över enheter och visningsportstorlekar. Ta en titt på RFS-sidan för att ta reda på hur detta fungerar.

Sass

Variabler

Rubriker har några dedikerade variabler för storlek och avstånd.

$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 typografielement som täcks här och i Reboot har också dedikerade 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 finns inga dedikerade mixins för typografi, men Bootstrap använder Responsive Font Sizing (RFS) .