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-familykatrai 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-baseun $line-height-basekā mūsu tipogrāfisko bāzi, kas tiek lietota <body>.
Iestatiet globālās saites krāsu, izmantojot, $link-colorun izmantojiet saites pasvītrojumus tikai uz :hover.
Izmantojiet $body-bg, lai iestatītu a background-coloruz <body>( #fffpē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>

.h1ir pieejamas arī caur .h6klasē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>

.markun .smallklases 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 .initialismsaī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ā.

Kāds slavens avota nosaukumā

<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ā.

Kāds slavens avota nosaukumā

<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ā.

Kāds slavens avota nosaukumā

<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-styleun 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-inlineun .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-truncateklasi, 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-sizesSass mainīgo uz trueun 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 remskatu 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ā .