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ă, presupunem că 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 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.

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.

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>

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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>

Denumirea unei surse

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

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

Cineva celebru în Titlul sursă

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

Aliniere

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

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

Cineva celebru în Titlul sursă

<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. Integer posuere erat a ante.

Cineva celebru în Titlul sursă

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

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
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>

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.

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>

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.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Termenul trunchiat este trunchiat

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

Cuibărire

Lista de definiții imbricată: 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>

Tipografie receptivă

Tipografia receptivă se referă la scalarea textului și a componentelor prin simpla ajustare a elementului rădăcină font-sizeîntr-o serie de interogări media. Bootstrap nu face acest lucru pentru dvs., dar este destul de ușor să adăugați dacă aveți nevoie de el.

Iată un exemplu în practică. Alegeți ce font-sizeinterogări media doriți.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}