Tipografie
Dokumentasie en voorbeelde vir Bootstrap-tipografie, insluitend globale instellings, opskrifte, hoofteks, lyste, en meer.
Globale instellings
Bootstrap stel basiese globale vertoon-, tipografie- en skakelstyle. Wanneer meer beheer nodig is, kyk na die tekstuele nutsklasse .
- Gebruik 'n inheemse lettertipestapel wat die beste
font-family
vir elke bedryfstelsel en toestel kies. - Vir 'n meer inklusiewe en toeganklike tipe skaal, gebruik ons die blaaier se verstek wortel
font-size
(tipies 16px) sodat besoekers hul blaaier verstek kan pasmaak soos nodig. - Gebruik die
$font-family-base
,$font-size-base
, en$line-height-base
kenmerke as ons tipografiese basis toegepas op die<body>
. - Stel die globale skakelkleur via
$link-color
en pas skakelonderstrepe slegs toe op:hover
. - Gebruik
$body-bg
om 'nbackground-color
op die<body>
(#fff
by verstek) te stel.
Hierdie style kan binne gevind word _reboot.scss
, en die globale veranderlikes word gedefinieer in _variables.scss
. Maak seker dat jy instel $font-size-base
.rem
Opskrifte
Alle HTML-opskrifte, <h1>
deur <h6>
, is beskikbaar.
Opskrif | Voorbeeld |
---|---|
<h1></h1> |
h1. Bootstrap opskrif |
<h2></h2> |
h2. Bootstrap opskrif |
<h3></h3> |
h3. Bootstrap opskrif |
<h4></h4> |
h4. Bootstrap opskrif |
<h5></h5> |
h5. Bootstrap opskrif |
<h6></h6> |
h6. Bootstrap opskrif |
<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
deur .h6
-klasse is ook beskikbaar, vir wanneer jy die fontstilering van 'n opskrif wil pas, maar nie die gepaardgaande HTML-element kan gebruik nie.
h1. Bootstrap opskrif
h2. Bootstrap opskrif
h3. Bootstrap opskrif
h4. Bootstrap opskrif
h5. Bootstrap opskrif
h6. Bootstrap opskrif
<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>
Pasmaak opskrifte
Gebruik die ingeslote nutsklasse om die klein sekondêre opskrifteks van Bootstrap 3 te herskep.
Fancy vertoonopskrif Met vervaagde sekondêre teks
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Vertoon opskrifte
Tradisionele opskrifelemente is ontwerp om die beste te werk in die vleis van jou bladsy-inhoud. Wanneer jy 'n opskrif nodig het om uit te staan, oorweeg dit om 'n vertoonopskrif te gebruik —'n groter, effens meer eiesinnige opskrifstyl. Hou in gedagte dat hierdie opskrifte nie by verstek reageer nie, maar dit is moontlik om responsiewe lettergroottes te aktiveer .
Vertoon 1 |
Vertoon 2 |
Vertoon 3 |
Vertoon 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>
Lood
Laat 'n paragraaf uitstaan deur by te voeg .lead
.
Dit is 'n hoofparagraaf. Dit staan uit van gewone paragrawe.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Inlyn tekselemente
Stilering vir algemene inlyn HTML5-elemente.
Jy kan die merk tag gebruik omuitligteks.
Hierdie teksreël is bedoel om as geskrapte teks hanteer te word.
Hierdie teksreël is bedoel om as nie meer akkuraat beskou te word nie.
Hierdie teksreël is bedoel om as 'n toevoeging tot die dokument hanteer te word.
Hierdie teksreël sal weergegee word soos onderstreep
Hierdie teksreël is bedoel om as fynskrif hanteer te word.
Hierdie reël is as vetgedrukte teks weergegee.
Hierdie reël is as kursief gedrukte teks weergegee.
<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>
.mark
en .small
klasse is ook beskikbaar om dieselfde style toe te pas as <mark>
en <small>
terwyl enige ongewenste semantiese implikasies wat die etikette sou meebring vermy word.
Alhoewel dit nie hierbo getoon word nie, gebruik gerus <b>
en <i>
in HTML5. <b>
is bedoel om woorde of frases uit te lig sonder om bykomende belangrikheid oor te dra, terwyl <i>
dit meestal vir stem, tegniese terme, ens.
Tekshulpmiddels
Verander teksbelyning, transformeer, styl, gewig en kleur met ons tekshulpmiddels en kleurhulpmiddels .
Afkortings
Gestileerde implementering van HTML se <abbr>
element vir afkortings en akronieme om die uitgebreide weergawe te wys op hover. Afkortings het 'n verstek-onderstreep en kry 'n hulpwyser om addisionele konteks te verskaf wanneer jy beweeg en aan gebruikers van ondersteunende tegnologieë.
Voeg .initialism
by 'n afkorting vir 'n effens kleiner lettergrootte.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blokaanhalings
Vir die aanhaling van blokke inhoud van 'n ander bron in jou dokument. Draai <blockquote class="blockquote">
enige HTML om as die aanhaling.
'n Bekende aanhaling, vervat in 'n blokaanhalingselement.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
Benoem 'n bron
Voeg 'n <footer class="blockquote-footer">
by om die bron te identifiseer. Draai die naam van die bronwerk in <cite>
.
'n Bekende aanhaling, vervat in 'n blokaanhalingselement.
<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>
Belyning
Gebruik tekshulpmiddels soos nodig om die belyning van jou blokaanhaling te verander.
'n Bekende aanhaling, vervat in 'n blokaanhalingselement.
<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>
'n Bekende aanhaling, vervat in 'n blokaanhalingselement.
<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>
Lyste
Ongestileer
Verwyder die verstek- list-style
en linkerkantlyn op lysitems (slegs onmiddellike kinders). Dit is slegs van toepassing op onmiddellike kinders se lysitems , wat beteken dat jy die klas vir enige geneste lyste ook moet byvoeg.
- Dit is 'n lys.
- Dit lyk heeltemal ongestyleerd.
- Struktureel is dit steeds 'n lys.
- Hierdie styl is egter net van toepassing op onmiddellike kinderelemente.
- Geneste lyste:
- word nie deur hierdie styl beïnvloed nie
- sal steeds 'n koeël wys
- en het toepaslike linkerkantlyn
- Dit kan in sommige situasies steeds handig te pas kom.
<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>
In lyn
Verwyder 'n lys se koeëls en pas bietjie lig toe margin
met 'n kombinasie van twee klasse, .list-inline
en .list-inline-item
.
- Dit is 'n lysitem.
- En nog een.
- Maar hulle word inlyn vertoon.
<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>
Beskrywing lys belyning
Belyn terme en beskrywings horisontaal deur ons roosterstelsel se voorafbepaalde klasse (of semantiese mengsels) te gebruik. Vir langer termyne kan jy opsioneel 'n .text-truncate
klas byvoeg om die teks met 'n ellips af te kap.
- Beskrywing lyste
- 'n Beskrywingslys is perfek om terme te definieer.
- Termyn
-
Definisie vir die term.
En nog 'n plekhouer definisie teks.
- Nog 'n term
- Hierdie definisie is kort, dus geen ekstra paragrawe of iets nie.
- Afgekapte term is afgekap
- Dit kan nuttig wees as die spasie min is. Voeg 'n ellips aan die einde by.
- Nestel
-
- Geneste definisielys
- Ek het gehoor jy hou van definisielyste. Laat ek 'n definisielys in jou definisielys plaas.
<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>
Responsiewe lettergroottes
Vanaf v4.3.0 word Bootstrap gestuur met die opsie om responsiewe lettergroottes moontlik te maak, sodat teks meer natuurlik kan skaal oor toestel- en viewport-groottes. RFS kan geaktiveer word deur die $enable-responsive-font-sizes
Sass-veranderlike te verander na true
en Bootstrap te hersaamstel.
Om RFS te ondersteun , gebruik ons 'n Sass mixin om ons normale font-size
eienskappe te vervang. Responsiewe lettergroottes sal saamgestel word in calc()
funksies met 'n mengsel van rem
en viewport-eenhede om die responsiewe skaalgedrag moontlik te maak. Meer oor RFS en sy konfigurasie kan gevind word op sy GitHub-bewaarplek .