Tekst
Dodaj znaczenia poprzez tekstowych kolorach z poniższych klas. Linki przyciemni przy aktywowaniu:
| Klasa | Opis | Przykład |
|---|---|---|
| .text-muted | Tekst urządzony z klasą "text-muted" | Spróbuj |
| .text-primary | Tekst urządzone z klasą "text-primary" | Spróbuj |
| .text-success | Tekst urządzony z klasą "text-success" | Spróbuj |
| .text-info | Tekst urządzony z klasą "text-info" | Spróbuj |
| .text-warning | Tekst urządzony z klasą "text-warning" | Spróbuj |
| .text-danger | Tekst urządzony z klasą "text-danger" | Spróbuj |
tło
Dodaj znaczenia poprzez kolory tła z poniższych klas. Linki przyciemni przy aktywowaniu tak jak klas tekstowych:
| Klasa | Opis | Przykład |
|---|---|---|
| .bg-primary | Komórka tabeli jest stylizowany z klasą "bg-primary" | Spróbuj |
| .bg-success | Komórka tabeli jest stylizowany z klasą "bg-success" | Spróbuj |
| .bg-info | Komórka tabeli jest stylizowany z klasą "bg-info" | Spróbuj |
| .bg-warning | Komórka tabeli jest stylizowany z klasą "bg-warning" | Spróbuj |
| .bg-danger | Komórka tabeli jest stylizowany z klasą "bg-danger" | Spróbuj |
Inny
| Klasa | Opis | Przykład |
|---|---|---|
| .pull-left | Pływa element w lewo | Spróbuj |
| .pull-right | Pływa element w prawo | Spróbuj |
| .center-block | Ustawia element do display:block z margin-right:auto i margin-left:auto | Spróbuj |
| .clearfix | czyści pływaków | Spróbuj |
| .show | Wymusza elementem mają być wyświetlane | Spróbuj |
| .hidden | Wymusza to element ma być ukryty | Spróbuj |
| .sr-only | Ukrywa element do wszystkich urządzeń z wyjątkiem czytników ekranu | Spróbuj |
| .sr-only-focusable | Połącz z .sr tylko, aby ponownie wyświetlić element, gdy koncentruje się (na przykład przez użytkownika klawiatury-only) | Spróbuj |
| .text-hide | Pomaga zamienić zawartość tekstową danego elementu z obrazu tła | Spróbuj |
| .close | Wskazuje na ikonę zamykania | Spróbuj |
| .caret | Wskazuje funkcje rozwijane (odwrócą się automatycznie w menu dropup) | Spróbuj |
reagujących Użytkowe
Klasy te służą do wyświetlania i / lub ukryć zawartość przez urządzenie za pośrednictwem zapytań mediów.
Użyj jednego lub kombinacji dostępnych klas dla przełączanie treści w viewport pułapki:
| Zajęcia | Dodatkowe małych urządzeń komórkowych (<768px) | Małych urządzeń tabletki (≥768px) | Średnie Urządzenia stacjonarne (≥992px) | Duże urządzenia stacjonarne (≥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 |
Począwszy od v3.2.0 , The .visible-*-* zajęcia dla występują w trzech odmianach, po jednym dla każdego z CSS display wartości nieruchomości:
| Grupa klas | wyświetlacz CSS |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
Np dla małych ( sm ) ekranów dostępnych .visible-*-* zajęcia są: .visible-sm-block , .visible-sm-inline i .visible-sm-inline-block .
Klasy .visible-xs , .visible-sm , .visible-md i .visible-lg są nieaktualne począwszy od v3.2.0.
Przykład
<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>Wynik:
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.
Spróbuj sam "