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-family
fö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-base
attributen som vår typografiska bas tillämpad på<body>
. - Ställ in den globala länkfärgen via
$link-color
. - Använd
$body-bg
för att ställa in abackground-color
på<body>
( som#fff
standard).
Dessa stilar finns inom _reboot.scss
, och de globala variablerna definieras i _variables.scss
. Se till att ställa $font-size-base
in 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>
.h1
genomklasser .h6
finns 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.
<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-sizes
Sass-kartan och två variabler, $display-font-weight
och $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$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.
<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.
<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:
<mark>
representerar text som är markerad eller markerad för referens- eller notationsändamål.<small>
representerar sidokommentarer och finstilt, som copyright och juridisk text.<s>
representerar element som inte längre är relevanta eller inte längre korrekta.<u>
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:
.mark
kommer att tillämpa samma stilar som<mark>
..small
kommer att tillämpa samma stilar som<small>
..text-decoration-underline
kommer att tillämpa samma stilar som<u>
..text-decoration-line-through
kommer att tillämpa samma stilar som<s>
.
Även om det inte visas ovan, använd gärna <b>
och <i>
i HTML5. <b>
är avsedd 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, 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 .initialism
till 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>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. <p>
) med .blockquote-footer
klassen. Var noga med att linda in namnet på källverket <cite>
också.
<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.
<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>
<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-style
och 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 margin
med en kombination av två klasser, .list-inline
och .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-truncate
klass 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
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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Mixins
Det finns inga dedikerade mixins för typografi, men Bootstrap använder Responsive Font Sizing (RFS) .