Typografy
Dokumintaasje en foarbylden foar Bootstrap-typografy, ynklusyf globale ynstellings, kopteksten, lichemstekst, listen, en mear.
Globale ynstellings
Bootstrap stelt basis globale werjefte, typografy, en keppelingsstilen yn. As mear kontrôle nedich is, besjoch dan de tekstuele nutklassen .
- Brûk in memmetaal lettertypestapel dy't it bêste selekteart
font-family
foar elk OS en apparaat. - Foar in mear ynklusive en tagonklike type skaal brûke wy de standertroot fan 'e browser
font-size
(typysk 16px), sadat besikers har browserstanderts kinne oanpasse as nedich. - Brûk de
$font-family-base
,$font-size-base
, en$line-height-base
attributen as ús typografyske basis tapast op de<body>
. - Stel de globale keppelkleur yn fia
$link-color
. - Brûk
$body-bg
om in yn te stellenbackground-color
op de<body>
(#fff
standert).
Dizze stilen kinne fûn wurde binnen _reboot.scss
, en de globale fariabelen wurde definiearre yn _variables.scss
. Soargje derfoar dat jo ynstelle $font-size-base
.rem
Headings
Alle HTML-koppen, <h1>
fia <h6>
, binne beskikber.
Heading | Foarbyld |
---|---|
<h1></h1> |
h1. Bootstrap heading |
<h2></h2> |
h2. Bootstrap heading |
<h3></h3> |
h3. Bootstrap heading |
<h4></h4> |
h4. Bootstrap heading |
<h5></h5> |
h5. Bootstrap heading |
<h6></h6> |
h6. Bootstrap heading |
<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
troch .h6
klassen binne ek beskikber, foar as jo wolle oerienkomme mei it lettertype styling fan in kop, mar kin net brûke de assosjearre HTML elemint.
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<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>
Oanpasse kopteksten
Brûk de ynbegrepen nutklassen om de lytse sekundêre koptekst fan Bootstrap 3 opnij te meitsjen.
Fancy werjeftekopskrift Mei ferdwûne sekundêre tekst
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Toan kopteksten
Tradysjonele koptekst-eleminten binne ûntworpen om it bêste te wurkjen yn it fleis fan jo side-ynhâld. As jo in koptekst nedich hawwe om út te stean, beskôgje dan it brûken fan in werjeftekoptekst - in gruttere, wat mear opinige koptekststyl.
<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>
Displaykoppen wurde konfigureare fia de $display-font-sizes
Sass-kaart en twa fariabelen, $display-font-weight
en $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;
Foarsprong
Meitsje in paragraaf opfallend troch ta te foegjen .lead
.
Dit is in lead paragraaf. It stiet út fan reguliere paragrafen.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Inline tekst eleminten
Styling foar mienskiplike ynline HTML5-eleminten.
Jo kinne de mark tag brûke omhichtepunttekst.
Dizze rigel tekst is bedoeld om behannele te wurden as wiske tekst.
Dizze rigel tekst is bedoeld om behannele te wurden as net mear akkuraat.
Dizze rigel tekst is bedoeld om behannele te wurden as in tafoeging oan it dokumint.
Dizze rigel tekst sil werjaan as ûnderstreke.
Dizze rigel tekst is bedoeld om behannele te wurden as lytse print.
Dizze rigel werjûn as fet tekst.
Dizze rigel werjûn as kursive 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>
Pas op dat dizze tags moatte wurde brûkt foar semantysk doel:
<mark>
stiet foar tekst dy't markearre of markearre is foar referinsje- of notaasjedoelen.<small>
fertsjintwurdiget kant-opmerkingen en lytse letters, lykas copyright en juridyske tekst.<s>
fertsjintwurdiget elemint dat net mear relevant of net mear akkuraat.<u>
stelt in span fan ynline tekst foar dy't werjûn wurde moat op in manier dy't oanjout dat it in net-tekstuele annotaasje hat.
As jo jo tekst stylearje wolle, moatte jo ynstee de folgjende klassen brûke:
.mark
sil deselde stilen tapasse as<mark>
..small
sil deselde stilen tapasse as<small>
..text-decoration-underline
sil deselde stilen tapasse as<u>
..text-decoration-line-through
sil deselde stilen tapasse as<s>
.
Wylst net hjirboppe werjûn, fiel jo frij om te brûken <b>
en <i>
yn HTML5. <b>
is bedoeld om wurden of útdrukkingen te markearjen sûnder ekstra belang oer te bringen, wylst <i>
it meast foar stim, technyske termen, ensfh.
Tekst utilities
Feroarje tekstôfstimming, transformearje, styl, gewicht, line-hichte, dekoraasje en kleur mei ús tekst- en kleurhelpprogramma's .
Ofkoartings
Stilisearre ymplemintaasje fan HTML's <abbr>
elemint foar ôfkoartings en akronyms om de útwreide ferzje te sjen op hover. Ofkoartings hawwe in standert ûnderstreekje en krije in helpoanwizer om ekstra kontekst te jaan by hover en oan brûkers fan assistinte technologyen.
Taheakje .initialism
oan in ôfkoarting foar in wat lytsere lettertypegrutte.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blockquotes
Foar it oanheljen fan blokken ynhâld fan in oare boarne binnen jo dokumint. Wrap <blockquote class="blockquote">
om elke HTML as it sitaat.
In bekend sitaat, befette yn in blokquote-elemint.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
In boarne neame
De HTML-spesifikaasje fereasket dat blockquote-atskriuwing bûten de <blockquote>
. By it jaan fan attribúsje, wrap jo <blockquote>
yn in <figure>
en brûk in <figcaption>
of in bloknivo-elemint (bgl. <p>
) mei de .blockquote-footer
klasse. Wês wis dat jo de namme fan it boarnewurk <cite>
ek ynpakke.
<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>
Alignment
Brûk teksthulpprogramma's as nedich om de ôfstimming fan jo blokquote te feroarjen.
<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>
Listen
Unstyled
Fuortsmite de standert list-style
en lofter marzje op list items (allinich direkte bern). Dit jildt allinich foar items fan direkte bernlist , wat betsjut dat jo de klasse ek moatte tafoegje foar alle nestede listen.
- Dit is in list.
- It liket folslein unstyled.
- Struktureel is it noch in list.
- Dizze styl jildt lykwols allinich foar direkte berneleminten.
- Nested listen:
- wurde net beynfloede troch dizze styl
- sil noch in kûgel sjen litte
- en hawwe passende linker marzje
- Dit kin yn guon situaasjes noch fan pas komme.
<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>
Ynline
Fuortsmite de kûgels fan in list en tapasse wat ljocht margin
mei in kombinaasje fan twa klassen, .list-inline
en .list-inline-item
.
- Dit is in list item.
- En noch ien.
- Mar se wurde ynline werjûn.
<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>
Beskriuwing list alignment
Rjochtsje termen en beskriuwingen horizontaal út troch de foarôf definieare klassen fan ús rastersysteem (as semantyske mixins) te brûken. Foar langere termen kinne jo opsjoneel in .text-truncate
klasse taheakje om de tekst mei in ellips te trunken.
- Beskriuwingslisten
- In beskriuwingslist is perfekt foar it definiearjen fan termen.
- Term
-
Definysje foar de term.
En wat mear plakhâlder definysje tekst.
- In oare term
- Dizze definysje is koart, dus gjin ekstra paragrafen of sa.
- Truncated term is ôfkoarte
- Dit kin nuttich wêze as romte krap is. Foeget in ellips oan 'e ein ta.
- Nesting
-
- Nested definysje list
- Ik hearde dat jo fan definysjelisten hâlde. Lit my in definysjelist yn jo definysjelist sette.
<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 lettertypegrutte
Yn Bootstrap 5 hawwe wy standert responsive lettertypegrutte ynskeakele, wêrtroch tekst natuerliker kin skaalje oer apparaat- en viewportgrutte. Besjoch de RFS-side om út te finen hoe't dit wurket.
Sass
Fariabelen
Kopteksten hawwe wat tawijd fariabelen foar grutte en ôfstân.
$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;
Ferskate typografy-eleminten dy't hjir en yn Reboot behannele binne hawwe ek tawijd fariabelen.
$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
D'r binne gjin tawijd mixins foar typografy, mar Bootstrap brûkt Responsive Font Sizing (RFS) .