in English

Tipografie

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

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 16px), 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 globală a linkului prin $link-colorși aplicați sublinierea linkului numai pe :hover.
  • 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

<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 fantezist Cu text secundar estompat 

<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. Rețineți că aceste titluri nu sunt receptive în mod implicit, dar este posibil să activați dimensiunile fonturilor receptive .

Afișajul 1
Afișajul 2
Afișajul 3
Afișajul 4 
<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>

Conduce

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

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

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

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

.markși .smallclasele sunt, de asemenea, disponibile pentru a aplica aceleași stiluri ca <mark>și <small>evitând în același timp orice implicații semantice nedorite pe care le-ar aduce etichetele.

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

Utilitare de text

Schimbați alinierea textului, transformați, stilul, greutatea ș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

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

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

Denumirea unei surse

Adăugați un <footer class="blockquote-footer">pentru identificarea sursei. Înveliți numele lucrării sursă în <cite>.

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

Cineva celebru în Titlul sursă 
<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>

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.

Cineva celebru în Titlul sursă 
<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>

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

Cineva celebru în Titlul sursă 
<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>

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

Începând cu v4.3.0, Bootstrap este livrat cu opțiunea de a activa dimensiunile de font receptive, permițând textului să se scaleze mai natural în funcție de dimensiunile dispozitivului și ale ferestrei de vizualizare. RFS poate fi activat prin schimbarea $enable-responsive-font-sizesvariabilei Sass trueși recompilând Bootstrap.

Pentru a sprijini RFS , folosim un mixin Sass pentru a înlocui font-sizeproprietățile noastre normale. Dimensiunile de font receptive vor fi compilate în calc()funcții cu un amestec de remunități de vizualizare și pentru a permite comportamentul de scalare receptiv. Mai multe despre RFS și configurația sa pot fi găsite în depozitul său GitHub .