Tipogrāfija
Bootstrap tipogrāfijas dokumentācija un piemēri, tostarp globālie iestatījumi, virsraksti, pamatteksts, saraksti un daudz kas cits.
Globālie iestatījumi
Bootstrap iestata pamata globālo displeju, tipogrāfiju un saišu stilus. Ja nepieciešama lielāka kontrole, pārbaudiet teksta lietderības klases .
- Izmantojiet vietējo fontu kopu , kas atlasa labāko
font-family
katrai OS un ierīcei. - Lai iegūtu iekļaujošāku un pieejamāku veidu skalu, mēs izmantojam pārlūkprogrammas noklusējuma sakni
font-size
(parasti 16 pikseļi), lai apmeklētāji varētu pēc vajadzības pielāgot pārlūkprogrammas noklusējuma iestatījumus. - Izmantojiet atribūtus
$font-family-base
,$font-size-base
un$line-height-base
kā mūsu tipogrāfisko bāzi, kas tiek lietota<body>
. - Iestatiet globālās saites krāsu, izmantojot,
$link-color
un izmantojiet saites pasvītrojumus tikai uz:hover
. - Izmantojiet
$body-bg
, lai iestatītu abackground-color
uz<body>
(#fff
pēc noklusējuma).
Šos stilus var atrast iekšā _reboot.scss
, un globālie mainīgie ir definēti _variables.scss
. Noteikti iestatiet $font-size-base
.rem
Virsraksti
Ir pieejami visi HTML virsraksti <h1>
līdz <h6>
.
Virsraksts | Piemērs |
---|---|
<h1></h1> |
h1. Bootstrap virsraksts |
<h2></h2> |
h2. Bootstrap virsraksts |
<h3></h3> |
h3. Bootstrap virsraksts |
<h4></h4> |
h4. Bootstrap virsraksts |
<h5></h5> |
h5. Bootstrap virsraksts |
<h6></h6> |
h6. Bootstrap virsraksts |
<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
ir pieejamas arī caur .h6
klasēm, ja vēlaties saskaņot virsraksta fonta stilu, bet nevarat izmantot saistīto HTML elementu.
h1. Bootstrap virsraksts
h2. Bootstrap virsraksts
h3. Bootstrap virsraksts
h4. Bootstrap virsraksts
h5. Bootstrap virsraksts
h6. Bootstrap virsraksts
<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>
Virsrakstu pielāgošana
Izmantojiet iekļautās utilītu klases, lai no Bootstrap 3 no jauna izveidotu mazo sekundāro virsraksta tekstu.
Izsmalcināts displeja virsraksts Ar izbalējušu sekundāro tekstu
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Parādīt virsrakstus
Tradicionālie virsrakstu elementi ir izstrādāti tā, lai tie vislabāk darbotos jūsu lapas saturā. Ja jums ir nepieciešams virsraksts, lai izceltos, apsveriet iespēju izmantot displeja virsrakstu — lielāku, nedaudz izteiktāku virsraksta stilu. Ņemiet vērā, ka šie virsraksti pēc noklusējuma nav adaptīvi, taču ir iespējams iespējot adaptīvos fontu izmērus .
Displejs 1 |
2. displejs |
3. displejs |
4. displejs |
<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>
Svins
Izceliet rindkopu, pievienojot .lead
.
Šī ir vadošā rindkopa. Tas izceļas no parastajām rindkopām.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Iekļautie teksta elementi
Stils parastajiem iekļautajiem HTML5 elementiem.
Varat izmantot atzīmes tagu, laiizcelttekstu.
Šo teksta rindiņu ir paredzēts uzskatīt par dzēstu tekstu.
Šo teksta rindiņu ir paredzēts uzskatīt par neprecīzu.
Šī teksta rindiņa ir uzskatāma par dokumenta papildinājumu.
Šī teksta rindiņa tiks atveidota kā pasvītrota
Šī teksta rindiņa ir jāuzskata par sīku druku.
Šī rindiņa ir atveidota kā treknrakstā teksts.
Šī rinda tika atveidota kā teksts slīprakstā.
<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
un .small
klases ir pieejamas arī tādu pašu stilu lietošanai kā <mark>
un <small>
vienlaikus izvairoties no nevēlamām semantiskām sekām, ko varētu radīt tagi.
Lai gan tas nav parādīts iepriekš, varat to izmantot <b>
HTML5 <i>
formātā. <b>
ir paredzēts, lai izceltu vārdus vai frāzes, nepiešķirot papildu nozīmi, bet <i>
galvenokārt balss, tehniskie termini utt.
Teksta utilītas
Mainiet teksta līdzinājumu, pārveidojiet, stilu, svaru un krāsu, izmantojot mūsu teksta utilītas un krāsu utilītas .
Saīsinājumi
Stilizēta HTML <abbr>
elementa ieviešana saīsinājumiem un akronīmiem, lai parādītu izvērsto versiju, novietojot kursoru. Saīsinājumiem ir noklusējuma pasvītrojums, un tie iegūst palīdzības kursoru, lai nodrošinātu papildu kontekstu, novietojot kursoru un palīgtehnoloģiju lietotājiem.
Pievienojiet .initialism
saīsinājumam nedaudz mazākam fonta izmēram.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Bloķēt citātus
Satura bloku citēšanai no cita dokumenta avota. Aptiniet <blockquote class="blockquote">
jebkuru HTML kā citātu.
Labi zināms citāts, kas ietverts blockquote elementā.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
Avota nosaukšana
Pievienojiet <footer class="blockquote-footer">
avota identificēšanai. Aptiniet avota darba nosaukumu <cite>
.
Labi zināms citāts, kas ietverts blockquote elementā.
<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>
Izlīdzināšana
Ja nepieciešams, izmantojiet teksta utilītas, lai mainītu bloka pēdiņas līdzinājumu.
Labi zināms citāts, kas ietverts blockquote elementā.
<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>
Labi zināms citāts, kas ietverts blockquote elementā.
<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>
Saraksti
Bez stila
Noņemiet noklusējuma list-style
un kreiso piemali saraksta vienumiem (tikai tiešajiem bērniem). Tas attiecas tikai uz tūlītējiem pakārtoto saraksta vienumiem , kas nozīmē, ka jums būs jāpievieno klase arī visiem ligzdotajiem sarakstiem.
- Šis ir saraksts.
- Tas šķiet pilnīgi bez stila.
- Strukturāli tas joprojām ir saraksts.
- Tomēr šis stils attiecas tikai uz tūlītējiem bērna elementiem.
- Ligzdoti saraksti:
- Šis stils tos neietekmē
- joprojām rādīs lodi
- un ar atbilstošu kreiso malu
- Dažās situācijās tas joprojām var noderēt.
<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>
Rindā
Noņemiet saraksta aizzīmes un pielietojiet nedaudz gaismas margin
, apvienojot divas klases .list-inline
un .list-inline-item
.
- Šis ir saraksta vienums.
- Un vēl vienu.
- Bet tie tiek parādīti iekļauti.
<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>
Aprakstu saraksta izlīdzināšana
Izlīdziniet terminus un aprakstus horizontāli, izmantojot mūsu režģa sistēmas iepriekš definētās klases (vai semantiskos mixins). Ilgākam periodam varat pēc izvēles pievienot .text-truncate
klasi, lai saīsinātu tekstu ar elipsi.
- Aprakstu saraksti
- Aprakstu saraksts ir lieliski piemērots terminu definēšanai.
- Jēdziens
-
Termina definīcija.
Un vēl kāds viettura definīcijas teksts.
- Vēl viens termins
- Šī definīcija ir īsa, tāpēc bez papildu rindkopām vai nekā.
- Saīsināts termins ir saīsināts
- Tas var būt noderīgi, ja vietas ir maz. Beigās pievieno elipsi.
- Ligzdošana
-
- Ligzdoto definīciju saraksts
- Es dzirdēju, ka jums patīk definīciju saraksti. Ļaujiet man ievietot definīciju sarakstu jūsu definīciju sarakstā.
<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>
Atbildīgi fontu izmēri
Sākot ar versiju 4.3.0, Bootstrap tiek piegādāts ar iespēju iespējot adaptīvus fontu izmērus, ļaujot tekstam dabiskāk mērogot ierīces un skata loga izmērus. RFS var iespējot, mainot $enable-responsive-font-sizes
Sass mainīgo uz true
un atkārtoti kompilējot Bootstrap.
Lai atbalstītu RFS , mēs izmantojam Sass mixin, lai aizstātu mūsu parastās font-size
īpašības. Adaptīvie fontu izmēri tiks apkopoti calc()
funkcijās ar rem
skatu loga vienību kombināciju, lai nodrošinātu adaptīvo mērogošanas darbību. Vairāk par RFS un tā konfigurāciju var atrast tās GitHub repozitorijā .