Typografi

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

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-coloroch använd endast länkunderstrykning på :hover.
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

<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

<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. Tänk på att dessa rubriker inte är responsiva som standard, men det är möjligt att aktivera responsiva teckensnittsstorlekar .

Display 1

Display 2

Display 3

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

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.

<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 tänkt att behandlas som finstilt.

Denna rad återges som fet text.

Denna rad återges som kursiv text.

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

.markoch .smallklasser är också tillgängliga för att tillämpa samma stilar som <mark>och <small>samtidigt som man undviker alla oönskade semantiska implikationer som taggarna skulle medföra.

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

Textverktyg

Ändra textjustering, transformera, stil, vikt 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

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

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

Namnge en källa

Lägg till ett <footer class="blockquote-footer">för att identifiera källan. Slå in namnet på källverket i <cite>.

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

Någon känd i källtiteln

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

Inriktning

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

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

Någon känd i källtiteln

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

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

Någon känd i källtiteln

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

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.

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

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

<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

Från och med v4.3.0 levereras Bootstrap med alternativet att aktivera responsiva teckenstorlekar, vilket gör att text kan skalas mer naturligt över enheter och visningsportstorlekar. RFS kan aktiveras genom att ändra $enable-responsive-font-sizesSass-variabeln till trueoch kompilera om Bootstrap.

För att stödja RFS använder vi en Sass mixin för att ersätta våra normala font-sizeegenskaper. Responsiva teckenstorlekar kommer att kompileras till calc()funktioner med en blandning av remoch viewport-enheter för att möjliggöra responsiv skalningsbeteende. Mer om RFS och dess konfiguration kan hittas på dess GitHub-förråd .