Text
Adăugați adică prin text-culori cu clasele de mai jos. Link-uri va reduce luminozitatea pe maus deasupra:
| Clasă | Descriere | Exemplu |
|---|---|---|
| .text-muted | Text stilizat cu clasa "text-muted" | Incearca-l |
| .text-primary | Text stilizat cu clasa "text-primary" | Incearca-l |
| .text-success | Text stilizat cu clasa "text-success" | Incearca-l |
| .text-info | Text stilizat cu clasa "text-info" | Incearca-l |
| .text-warning | Text stilizat cu clasa "text-warning" | Incearca-l |
| .text-danger | Text cu stil de clasă "text-danger" | Incearca-l |
fundal
Adăugați sens prin fundal de culori, cu clasele de mai jos. Link-uri se va întuneca pe Hover la fel ca și clase de text:
| Clasă | Descriere | Exemplu |
|---|---|---|
| .bg-primary | Celulă de tabel este stilizat cu clasă "bg-primary" | Incearca-l |
| .bg-success | Celulă de tabel este stilizat cu clasa de "bg-success" | Incearca-l |
| .bg-info | Celulă de tabel este stilizat cu clasa de "bg-info" | Incearca-l |
| .bg-warning | Celulă de tabel este stilizat cu clasă "bg-warning" | Incearca-l |
| .bg-danger | Celulă de tabel este stilizat cu clasă "bg-danger" | Incearca-l |
Alte
| Clasă | Descriere | Exemplu |
|---|---|---|
| .pull-left | Pluteste un element la stânga | Incearca-l |
| .pull-right | Pluteste un element la dreapta | Incearca-l |
| .center-block | Setează un element de display:block cu margin-right:auto de margin-left:auto margin-right:auto si margin-left:auto | Incearca-l |
| .clearfix | Golește flotoare | Incearca-l |
| .show | Forțează un element care urmează să fie prezentat | Incearca-l |
| .hidden | Forțează un element care urmează să fie ascuns | Incearca-l |
| .sr-only | Hides un element pentru toate dispozitivele, cu excepția cititoare de ecran | Incearca-l |
| .sr-only-focusable | Se combină cu numai .sr pentru a arăta din nou elementul atunci când este focalizat (de exemplu, de către un utilizator numai tastatura) | Incearca-l |
| .text-hide | Ajută înlocui conținutul unui element de text cu o imagine de fundal | Incearca-l |
| .close | Indică o pictogramă de închidere | Incearca-l |
| .caret | Indică funcționalitatea drop - down (will reverse automatically in dropup menus) se (will reverse automatically in dropup menus) | Incearca-l |
Utilități Responsive
Aceste clase sunt folosite pentru a afișa și / sau a ascunde conținutul în funcție de dispozitiv prin intermediul interogări media.
Utilizați una sau o combinație a claselor disponibile pentru comutând conținut de pe viewport de viewport , puncte de întrerupere:
| Clase | Extra mici dispozitive Telefoane (<768px) | Tablete mici dispozitive (≥768px) | Dispozitive de desktop - uri medii (≥992px) | Dispozitive de desktop - uri de mari dimensiuni (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
Ca de v3.2.0 , The .visible-*-* clase de vin în trei variante, câte unul pentru fiecare CSS display valoarea proprietății:
| Grupul de clase | afișare CSS |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
De exemplu , pentru mici ( sm ) ecrane, disponibil .visible-*-* clase sunt: .visible-sm-block , .visible-sm-inline , și .visible-sm-inline-block .
Clasele .visible-xs , .visible-sm , .visible-md , și .visible-lg sunt depreciate începând cu v3.2.0.
Exemplu
<h2>Example</h2>
<p>Resize this page to see how the text below
changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA
SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a
SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a
MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a
LARGE screen.</h1>Rezultat:
Example
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
Încearcă - l singur »