in English

Tipogrāfija

Bootstrap tipogrāfijas dokumentācija un piemēri, tostarp globālie iestatījumi, virsraksti, pamatteksts, saraksti un daudz kas cits.

Šajā lapā

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

html

<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

html

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

Displejs 1

2. displejs

3. displejs

4. displejs

Displejs 5

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

Displeja virsraksti tiek konfigurēti, izmantojot $display-font-sizesSass karti un divus mainīgos $display-font-weightun $display-line-height.

Displeja virsrakstus var pielāgot, izmantojot divus mainīgos $display-font-familyun $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$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.

html

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

html

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

apzīmē tekstu, kas ir atzīmēts vai izcelts atsauces vai apzīmējumu nolūkos.
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.
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:

.marktiks lietoti tādi paši stili kā .
.smalltiks lietoti tādi paši stili kā .
.text-decoration-underlinetiks lietoti tādi paši stili kā .
.text-decoration-line-throughtiks lietoti tādi paši stili kā <s>.

Lai gan tas nav parādīts iepriekš, varat to izmantot HTML5 formātā. ir paredzēts vārdu vai frāžu izcelšanai, nepiešķirot papildu nozīmi, savukārt 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 .initialismsaīsinājumam nedaudz mazākam fonta izmēram.

attr

HTML

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

html

<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., ) kopā ar .blockquote-footerklasi. Noteikti iesaiņojiet arī avota darba nosaukumu <cite>.

Labi zināms citāts, kas ietverts blockquote elementā.

html

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

Labi zināms citāts, kas ietverts blockquote elementā.

html

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

Labi zināms citāts, kas ietverts blockquote elementā.

html

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

html

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

html

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

html

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

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Maisījumi

Tipogrāfijai nav īpašu kombināciju, taču Bootstrap izmanto atsaucīgo fontu lielumu (RFS) .