Tipografie

Documentație și exemple pentru tipografia Bootstrap, inclusiv setări globale, titluri, text, liste și multe altele.

Pe aceasta pagina

Setări globale

Bootstrap stabilește stilurile de afișare globală de bază, tipografie și linkuri. Când este nevoie de mai mult control, consultați clasele de utilitate textuale .

Utilizați o stivă de fonturi native care selectează cele mai bune font-familypentru fiecare sistem de operare și dispozitiv.
Pentru o scară de tip mai incluzivă și mai accesibilă, folosim rădăcina implicită a browserului font-size(de obicei 16 px), astfel încât vizitatorii să își poată personaliza setările implicite ale browserului după cum este necesar.
Utilizați atributele $font-family-base, $font-size-baseși $line-height-baseca bază tipografică aplicată la <body>.
Setați culoarea linkului global prin $link-color.
Utilizați $body-bgpentru a seta o background-colorpe <body>( #fffîn mod implicit).

Aceste stiluri pot fi găsite în _reboot.scss, iar variabilele globale sunt definite în _variables.scss. Asigurați-vă că vă $font-size-baseinstalați rem.

Titluri

Toate titlurile HTML, <h1>prin <h6>, sunt disponibile.

Titlu	Exemplu
`<h1></h1>`	h1. Titlu bootstrap
`<h2></h2>`	h2. Titlu bootstrap
`<h3></h3>`	h3. Titlu bootstrap
`<h4></h4>`	h4. Titlu bootstrap
`<h5></h5>`	h5. Titlu bootstrap
`<h6></h6>`	h6. Titlu bootstrap

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

.h1prin .h6clase sunt de asemenea disponibile, pentru atunci când doriți să potriviți stilul fontului unui titlu, dar nu puteți utiliza elementul HTML asociat.

h1. Titlu bootstrap

h2. Titlu bootstrap

h3. Titlu bootstrap

h4. Titlu bootstrap

h5. Titlu bootstrap

h6. Titlu bootstrap

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>

Personalizarea titlurilor

Utilizați clasele de utilitate incluse pentru a recrea textul mic al titlului secundar din Bootstrap 3.

Titlu de afișare de lux Cu text secundar estompat

html

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

Afișează titluri

Elementele de titlu tradiționale sunt concepute pentru a funcționa cel mai bine în conținutul paginii dvs. Atunci când aveți nevoie de un titlu pentru a ieși în evidență, luați în considerare utilizarea unui titlu afișat - un stil de titlu mai mare, puțin mai obișnuit.

Afișajul 1

Afișajul 2

Afișajul 3

Afișajul 4

Afișajul 5

Afișajul 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>

Titlurile afișate sunt configurate prin $display-font-sizesharta Sass și două variabile $display-font-weightși $display-line-height.

Titlurile afișate sunt personalizabile prin două variabile $display-font-familyși $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;

Conduce

Faceți un paragraf în evidență adăugând .lead.

Acesta este un paragraf principal. Se evidențiază din paragrafele obișnuite.

html

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

Elemente de text inline

Stil pentru elemente HTML5 inline comune.

Puteți utiliza eticheta mark pentrua scoate in evidentatext.

~~Această linie de text este menită să fie tratată ca text șters.~~

~~Această linie de text este menită să fie tratată ca nemaifiind exactă.~~

Această linie de text este menită să fie tratată ca o completare la document.

Această linie de text va fi redată subliniată.

Această linie de text este menită să fie tratată ca litere mici.

Această linie este redată ca text aldine.

Această linie este redată ca text cu caractere italice.

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>

Atenție că acele etichete ar trebui folosite în scop semantic:

reprezintă text care este marcat sau evidențiat în scopuri de referință sau de notare.
reprezintă comentarii laterale și litere mici, cum ar fi drepturile de autor și textul legal.
<s>reprezintă elemente care nu mai sunt relevante sau nu mai sunt exacte.
reprezintă un interval de text inline care ar trebui redat într-un mod care să indice că are o adnotare non-textuală.

Dacă doriți să vă stilați textul, ar trebui să utilizați următoarele clase:

.markva aplica aceleași stiluri ca și .
.smallva aplica aceleași stiluri ca și .
.text-decoration-underlineva aplica aceleași stiluri ca și .
.text-decoration-line-throughva aplica aceleași stiluri ca și <s>.

Deși nu este afișat mai sus, nu ezitați să utilizați și în HTML5. este menit să evidențieze cuvinte sau expresii fără a transmite o importanță suplimentară, în timp ce este mai ales pentru voce, termeni tehnici etc.

Utilitare de text

Schimbați alinierea textului, transformați, stilul, greutatea, înălțimea liniilor, decorarea și culoarea cu utilitatile noastre de text și de culoare .

Abrevieri

Implementare stilizată a <abbr>elementului HTML pentru abrevieri și acronime pentru a afișa versiunea extinsă la trecerea cursorului. Abrevierile au o subliniere implicită și obțin un cursor de ajutor pentru a oferi context suplimentar la trecerea cu mouse-ul și utilizatorilor de tehnologii de asistență.

Adaugă .initialismla o abreviere pentru o dimensiune puțin mai mică a fontului.

attr

HTML

html

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

Citate bloc

Pentru a cita blocuri de conținut dintr-o altă sursă în documentul dvs. Înfășurați <blockquote class="blockquote">orice HTML ca citat.

Un citat binecunoscut, conținut într-un element blockquote.

html

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

Denumirea unei surse

Specificația HTML necesită ca atribuirea blockquote să fie plasată în afara <blockquote>. Când furnizați atribuirea, includeți-vă <blockquote>în a <figure>și utilizați a <figcaption>sau un element la nivel de bloc (de exemplu, ) cu .blockquote-footerclasa. Asigurați-vă că includeți și numele sursei lucrării <cite>.

Un citat binecunoscut, conținut într-un element blockquote.

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>

Aliniere

Utilizați utilitarele de text după cum este necesar pentru a schimba alinierea citatului bloc.

Un citat binecunoscut, conținut într-un element blockquote.

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>

Un citat binecunoscut, conținut într-un element blockquote.

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>

Liste

Nestilat

Eliminați marginea implicită list-styleși din stânga de pe elementele din listă (doar copiii imediati). Acest lucru se aplică numai articolelor imediate din lista copiilor , ceea ce înseamnă că va trebui să adăugați clasa și pentru orice liste imbricate.

Aceasta este o listă.
Pare complet nestilizat.
Din punct de vedere structural, este încă o listă.
Cu toate acestea, acest stil se aplică doar elementelor secundare imediate.
Liste imbricate:
- nu sunt afectate de acest stil
- va arăta în continuare un glonț
- și au marginea stângă corespunzătoare
Acest lucru poate fi încă util în unele situații.

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>

In linie

Eliminați marcatoarele unei liste și aplicați puțină lumină margincu o combinație de două clase .list-inlineși .list-inline-item.

Acesta este un articol din listă.
Si inca una.
Dar sunt afișate în linie.

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>

Alinierea listei de descriere

Aliniați termenii și descrierile pe orizontală utilizând clasele predefinite ale sistemului nostru de grile (sau mixuri semantice). Pentru termeni mai lungi, puteți adăuga opțional o .text-truncateclasă pentru a trunchia textul cu puncte de suspensie.

Liste de descriere

O listă de descriere este perfectă pentru definirea termenilor.

Termen

Definiție pentru termen.

Și mai mult text cu definiții de substituent.

Un alt termen

Această definiție este scurtă, deci nu există paragrafe suplimentare sau altceva.

Termenul trunchiat este trunchiat

Acest lucru poate fi util atunci când spațiul este îngust. Adaugă o elipsă la sfârșit.

Cuibărire

Lista de definiții imbricată: Am auzit că îți plac listele de definiții. Permiteți-mi să pun o listă de definiții în lista dvs. de definiții.

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>

Dimensiuni de font receptive

În Bootstrap 5, am activat dimensiunile fonturilor receptive în mod implicit, permițând textului să se scaleze mai natural în funcție de dimensiunea dispozitivului și a ferestrei de vizualizare. Aruncă o privire la pagina RFS pentru a afla cum funcționează.

Sass

Variabile

Titlurile au câteva variabile dedicate pentru dimensiune și spațiere.

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

Diverse elemente de tipografie acoperite aici și în Reboot au și variabile dedicate.

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

Mixine

Nu există mix-uri dedicate pentru tipografie, dar Bootstrap folosește Responsive Font Sizing (RFS) .