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
. - 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.
<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>
Displeja virsraksti tiek konfigurēti, izmantojot $display-font-sizes
Sass karti un divus mainīgos $display-font-weight
un $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;
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>
Ņemiet vērā, ka šie tagi ir jāizmanto semantiskiem nolūkiem:
<mark>
apzīmē tekstu, kas ir atzīmēts vai izcelts atsauces vai apzīmējumu nolūkos.<small>
apzīmē sānu komentārus un sīkos drukātos burtus, piemēram, autortiesības un juridisko tekstu.<s>
apzīmē elementu, kas vairs nav būtisks vai vairs nav precīzs.<u>
ir iekļauta teksta daļa, kas jāatveido tā, lai norādītu, ka tam ir netekstuāla anotācija.
Ja vēlaties veidot teksta stilu, tā vietā izmantojiet šādas klases:
.mark
tiks lietoti tādi paši stili kā<mark>
..small
tiks lietoti tādi paši stili kā<small>
..text-decoration-underline
tiks lietoti tādi paši stili kā<u>
..text-decoration-line-through
tiks lietoti tādi paši stili kā<s>
.
Lai gan tas nav parādīts iepriekš, varat to izmantot <b>
HTML5 <i>
formātā. <b>
ir paredzēts vārdu vai frāžu izcelšanai, nepiešķirot papildu nozīmi, savukārt <i>
galvenokārt balsij, tehniskiem terminiem utt.
Teksta utilītas
Mainiet teksta līdzinājumu, pārveidojiet, stilu, svaru, līnijas augstumu, noformējumu un krāsu, izmantojot mūsu teksta utilītus un krāsu utilītus .
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>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Avota nosaukšana
HTML specifikācija pieprasa, lai bloka citātu attiecinājums būtu novietots ārpus <blockquote>
. Nodrošinot attiecinājumu, aplauziet savu <blockquote>
ar a <figure>
un izmantojiet a <figcaption>
vai bloka līmeņa elementu (piem., <p>
) kopā ar .blockquote-footer
klasi. Noteikti iesaiņojiet arī avota darba nosaukumu <cite>
.
<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>
Izlīdzināšana
Ja nepieciešams, izmantojiet teksta utilītas, lai mainītu bloka pēdiņas līdzinājumu.
<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>
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
Programmā Bootstrap 5 pēc noklusējuma esam iespējojuši adaptīvos fontu izmērus, ļaujot tekstam dabiskāk mērogot ierīces un skata loga izmērus. Apskatiet RFS lapu , lai uzzinātu, kā tas darbojas.
Sass
Mainīgie lielumi
Virsrakstiem ir daži īpaši mainīgie lieluma un atstarpju noteikšanai.
$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;
Dažādiem tipogrāfijas elementiem, kas aplūkoti šeit un sadaļā Reboot , ir arī īpaši mainīgie.
$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;
Maisījumi
Tipogrāfijai nav īpašu kombināciju, taču Bootstrap izmanto atsaucīgo fontu lielumu (RFS) .