Bootstrap's Setări implicite
Bootstrap's prestabilită la nivel global font-size este 14px, cu o linie de înălțime de 1.428.
Acest lucru se aplică la <body> și toate punctele.
În plus, toate <p> elemente au o margine inferioară care este egală cu jumătatea lor calculată linie de înălțime (10px by default) .
Bootstrap valori prestabilite Browser vs.
În acest capitol, ne vom uita la unele elemente HTML care va fi stilizat un pic diferit de Bootstrap decât valorile implicite din browser.
<h1> - <h6>
În mod implicit, Bootstrap va stilul titlurile HTML ( <h1> la <h6> ) în felul următor:
Exemplu
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Încearcă - l singur » <small>
În Bootstrap HTML <small> Elementul este folosit pentru a crea un text mai ușor, secundar , în orice poziție:
Exemplu
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
Încearcă - l singur » <mark>
Bootstrap va stilul HTML <mark> elementul în felul următor:
<abbr>
Bootstrap va stilul HTML <abbr> elementul în felul următor:
<blockquote>
Bootstrap va stilul HTML <blockquote> elementul în felul următor:
Exemplu
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Încearcă - l singur » Pentru a afișa citat pe dreapta, utilizați .blockquote-reverse clasă:
Exemplu
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Încearcă - l singur » <dl>
Bootstrap va stilul HTML <dl> elementul în felul următor:
<code>
Bootstrap va stilul HTML <code> element în felul următor:
Exemplu
The following HTML elements: span , section , and div defines a section in a document.
Încearcă - l singur » <kbd>
Bootstrap va stilul HTML <kbd> elementul în felul următor:
<pre>
Bootstrap va stilul HTML <pre> elementul în felul următor:
Exemplu
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Încearcă - l singur » Culori contextuală și fundaluri
Bootstrap are de asemenea , unele clase contextuale care pot fi folosite pentru a oferi "meaning through colors" .
Clasele de culori text sunt: .text-muted , .text-primary , .text-success , .text-info , .text-warning , și .text-danger :
Exemplu
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Încearcă - l singur » Clasele pentru culorile de fundal sunt: .bg-primary , .bg-success , bg-info , bg-warning , și .bg-danger :
Exemplu
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Încearcă - l singur » Mai multe clase Typography
Clasele Bootstrap de mai jos, pot fi adăugate elemente de stil HTML suplimentare:
| Clasă | Descriere | Exemplu |
|---|---|---|
.lead | Face un paragraf să iasă în evidență | Incearca-l |
.small | Indică faptul că textul mai mic (set to 85% of the size of the parent) | Incearca-l |
.text-left | Indică textul aliniat stânga- | Incearca-l |
.text-center | Indică textul aliniat-centru | Incearca-l |
.text-right | Indică textul aliniat la dreapta | Incearca-l |
.text-justify | Indică textul justificat | Incearca-l |
.text-nowrap | Indică niciun text folie | Incearca-l |
.text-lowercase | Indică textul cu litere minuscule | Incearca-l |
.text-uppercase | Indică textul uppercased | Incearca-l |
.text-capitalize | Indică textul capitalizat | Incearca-l |
.initialism | Afișează textul din interiorul unui <abbr> element dintr - o dimensiune a fontului puțin mai mică | Incearca-l |
.list-unstyled | Elimină implicit lista de stil și marginea din stânga elemente de listă (funcționează pe ambele <ul> și <ol> ). Această clasă se aplică numai elementelor imediate listă de copii (pentru a elimina implicit lista de stil de la orice liste imbricate, se aplică această clasă oricărei liste imbricate, de asemenea) | Incearca-l |
.list-inline | Locuri toate elementele din listă pe o singură linie | Incearca-l |
.dl-horizontal | Aliniaza termenii ( <dt> ) și descrierile ( <dd> ) în <dl> elemente side-by - side. Începe off ca implicit <dl> s, dar atunci când fereastra browser - ului se extinde, se va alinia side-by-side | Incearca-l |
.pre-scrollable | Face o <pre> Element derulabil | Incearca-l |
Completați Bootstrap Tipografie de referință
Pentru o referință completă a tuturor elementelor de tipografie / clase, du - te pentru a completa nostru Bootstrap Tipografie de referință .
De asemenea , uita - te la nostru Bootstrap Helper clasele de referință pentru mai multe informații despre clasele contextuale.