Tüpograafia

Bootstrapi tüpograafia dokumentatsioon ja näited, sealhulgas globaalsed sätted, pealkirjad, kehatekst, loendid ja palju muud.

Sellel lehel

Globaalsed seaded

Bootstrap määrab põhilised globaalsed kuvamis-, tüpograafia- ja linkistiilid. Kui vajate rohkem kontrolli, vaadake tekstilise utiliidi klasse .

Kasutage algset fondivirna , mis valib font-familyiga OS-i ja seadme jaoks parima.
Kaasavama ja juurdepääsetavama tüübiskaala jaoks kasutame brauseri font-sizevaikejuure (tavaliselt 16 pikslit), et külastajad saaksid oma brauseri vaikeseadeid vastavalt vajadusele kohandada.
Kasutage atribuute $font-family-base, $font-size-baseja $line-height-basemeie tüpograafilise alusena, mida rakendatakse atribuudile <body>.
Määrake globaalse lingi värv, kasutades $link-color.
Kasutage , $body-bget määrata background-color( vaikimisi).<body>#fff

Need stiilid leiate _reboot.scssjaotisest ja globaalsed muutujad on määratletud _variables.scss. Seadistage $font-size-basekindlasti rem.

Pealkirjad

Saadaval on kõik HTML-i pealkirjad <h1>kuni <h6>.

Pealkiri	Näide
`<h1></h1>`	h1. Bootstrapi pealkiri
`<h2></h2>`	h2. Bootstrapi pealkiri
`<h3></h3>`	h3. Bootstrapi pealkiri
`<h4></h4>`	h4. Bootstrapi pealkiri
`<h5></h5>`	h5. Bootstrapi pealkiri
`<h6></h6>`	h6. Bootstrapi pealkiri

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

.h1Läbi .h6klasside on saadaval ka siis, kui soovite sobitada pealkirja fondi stiili, kuid ei saa kasutada seotud HTML-elementi.

h1. Bootstrapi pealkiri

h2. Bootstrapi pealkiri

h3. Bootstrapi pealkiri

h4. Bootstrapi pealkiri

h5. Bootstrapi pealkiri

h6. Bootstrapi pealkiri

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

Pealkirjade kohandamine

Kasutage kaasasolevaid utiliidiklasse, et luua Bootstrap 3-st väike teisese pealkirja tekst.

Väljamõeldud kuvapealkiri tuhmunud teisese tekstiga

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Kuva pealkirjad

Traditsioonilised pealkirjaelemendid on loodud töötama kõige paremini teie lehe sisus. Kui vajate silmapaistmiseks pealkirja, kaaluge kuvatava pealkirja kasutamist – suuremat ja pisut rohkem arvamust avaldavat pealkirjastiili.

Ekraan 1

Ekraan 2

Ekraan 3

Ekraan 4

Ekraan 5

Ekraan 6

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

Kuva pealkirjad konfigureeritakse $display-font-sizesSassi kaardi ja kahe muutuja $display-font-weightning $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;

Plii

Muutke lõik silmapaistvaks, lisades .lead.

See on juhtiv lõik. See eristub tavalistest lõikudest.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Tekstisisesed elemendid

Levinud tekstisiseste HTML5 elementide stiil.

Saate kasutada märgistustesiletekst.

~~Seda tekstirida tuleb käsitleda kustutatud tekstina.~~

~~Seda tekstirida tuleb käsitleda ebatäpsena.~~

Seda tekstirida tuleb käsitleda dokumendi lisana.

See tekstirida renderdatakse allajoonituna.

Seda tekstirida tuleb käsitleda peenes kirjas.

See rida renderdati paksus kirjas tekstina.

See rida renderdati kaldkirjas tekstina.

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

Pange tähele, et neid silte tuleks kasutada semantilistel eesmärkidel:

tähistab teksti, mis on viitamise või märgistamise eesmärgil märgitud või esile tõstetud.
esindab kõrvalkommentaare ja väikeses kirjas, nagu autoriõigus ja seaduslik tekst.
<s>tähistab elementi, mis ei ole enam asjakohased või ei ole enam täpsed.
tähistab tekstisisese teksti ulatust, mis tuleks renderdada viisil, mis viitab sellele, et sellel on mittetekstuaalne annotatsioon.

Kui soovite oma teksti stiili muuta, peaksite selle asemel kasutama järgmisi klasse:

.markrakendab samu stiile, mis .
.smallrakendab samu stiile, mis .
.text-decoration-underlinerakendab samu stiile, mis .
.text-decoration-line-throughrakendab samu stiile, mis <s>.

Kuigi seda ülal pole näidatud, kasutage seda vabalt HTML5-s. on mõeldud sõnade või fraaside esiletõstmiseks ilma täiendavat tähtsust andmata, samas kui see on enamasti mõeldud hääle, tehniliste terminite jms jaoks.

Teksti utiliidid

Muutke teksti joondust, teisendamist, stiili, kaalu, joone kõrgust, kaunistust ja värvi meie teksti- ja värviutiliitidega .

Lühendid

HTML-i elemendi stiliseeritud rakendamine <abbr>lühendite ja akronüümide jaoks, et näidata laiendatud versiooni hõljutamisel. Lühenditel on vaikimisi allakriipsutus ja abikursor, et pakkuda hõljutamisel ja abitehnoloogiate kasutajatele lisakonteksti.

.initialismVeidi väiksema fondi suuruse saamiseks lisage lühendile.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Plokktsitaadid

Sisuplokkide tsiteerimiseks teie dokumendis teisest allikast. Mähkige tsitaadina mis <blockquote class="blockquote">tahes HTML -i ümber.

Tuntud tsitaat, mis sisaldub blockquote elemendis.

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Allika nimetamine

HTML-i spetsifikatsioon nõuab, et blockquote omistamine paigutataks väljaspool <blockquote>. Omistamisel mähkige oma <blockquote>a- sse <figure>ja kasutage klassiga a- <figcaption>või plokitaseme elementi (nt ) . .blockquote-footerPakkige kindlasti sisse ka lähtetöö nimi <cite>.

Tuntud tsitaat, mis sisaldub blockquote elemendis.

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

Joondamine

Kasutage plokitsitaadi joonduse muutmiseks vastavalt vajadusele tekstiutiliite.

Tuntud tsitaat, mis sisaldub blockquote elemendis.

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

Tuntud tsitaat, mis sisaldub blockquote elemendis.

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

Loendid

Stiilita

Eemaldage list-styleloendiüksustel vaike- ja vasak veeris (ainult kohesed alajärgud). See kehtib ainult vahetute alamloendi üksuste kohta , mis tähendab, et peate klassi lisama ka kõigi pesastatud loendite jaoks.

See on nimekiri.
See tundub täiesti stiilita.
Struktuuriliselt on see ikkagi nimekiri.
Kuid see stiil kehtib ainult vahetute lapseelementide kohta.
Pesastatud loendid:
- neid see stiil ei mõjuta
- näitab ikka kuuli
- ja neil on vastav vasak veeris
See võib mõnes olukorras siiski kasuks tulla.

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

Järjekorras

Eemaldage loendist täpid ja rakendage veidi valgust marginkahe klassi kombinatsiooniga .list-inlineja .list-inline-item.

See on loendi üksus.
Ja veel üks.
Kuid need kuvatakse tekstisiseselt.

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

Kirjeldusloendi joondamine

Joondage terminid ja kirjeldused horisontaalselt, kasutades meie ruudustikusüsteemi eelmääratletud klasse (või semantilisi segusid). Pikema aja jooksul saate valikuliselt lisada .text-truncateklassi, et kärpida teksti ellipsiga.

Kirjeldusloendid

Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.

Tähtaeg

Mõiste definitsioon.

Ja veel natuke kohatäite definitsiooni teksti.

Teine termin

See määratlus on lühike, seega pole lisalõike ega midagi.

Kärbitud termin on kärbitud

See võib olla kasulik, kui ruumi on vähe. Lisab lõppu ellipsi.

Pesitsemine

Pesastatud määratluste loend: Kuulsin, et teile meeldivad määratluste loendid. Lubage mul panna teie määratluste loendisse definitsioonide loend.

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

Tundlikud kirjasuurused

Bootstrap 5-s oleme vaikimisi lubanud reageerivad fondisuurused, võimaldades tekstil loomulikumalt skaleerida seadme ja vaateava suuruste lõikes. Vaadake RFS-i lehte , et teada saada, kuidas see toimib.

Sass

Muutujad

Pealkirjadel on suuruse ja vahede määramiseks spetsiaalsed muutujad.

$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;

Siin ja Rebootis käsitletud mitmesugustel tüpograafiaelementidel on ka spetsiaalsed muutujad.

$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;

Segud

Tüpograafia jaoks pole spetsiaalseid miksineid, kuid Bootstrap kasutab reageerivat fondisuurust (RFS) .