Source

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 pieņemam 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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Avota nosaukšana

Pievienojiet <footer class="blockquote-footer">avota identificēšanai. Aptiniet avota darba nosaukumu <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante.

Kāds slavens avota nosaukumā

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante.

Kāds slavens avota nosaukumā

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante.

Kāds slavens avota nosaukumā

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem un massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat plkst
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Rindā

Noņemiet saraksta aizzīmes un pielietojiet nedaudz gaismas margin, apvienojot divas klases .list-inlineun .list-inline-item.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida un eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Saīsināts termins ir saīsināts

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Ligzdošana

Ligzdoto definīciju saraksts: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Atbildīgi fontu izmēri

Bootstrap v4.3 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ā .