Bootstrap klasy pomocniczej
W tym rozdziale omówiono niektóre bootstrap może się przydać klas pomocniczych.
tekst
Poniższe różnych klas przedstawiają różne kolory tekstu. Jeśli tekst jest link, aby przesunąć kursor nad tekstem zostaną wygaszone:
| kategoria | opis | Przykłady |
|---|---|---|
| .text-wyciszony | Styl tekstu kategorii "text-wyciszony" | próbować |
| .text-podstawowa | Styl tekstu kategorii "text-podstawowej" | próbować |
| .text-success | Styl tekstu kategorii "text-success" | próbować |
| .text-info | Styl tekstu kategorii "text-info" | próbować |
| .text ostrzegania | Styl tekstu kategorii "text-ostrzeżenie" | próbować |
| .text-niebezpieczeństwo | Styl tekstu kategorii "text-niebezpieczeństwo" | próbować |
tło
Poniższe różnych klas pokazuje różne kolory tła. Jeśli tekst jest link, aby przesunąć kursor nad tekstem zostaną wygaszone:
| kategoria | opis | Przykłady |
|---|---|---|
| .bg-podstawowa | komórka tabeli pomocą kategorii "BG-primary" | próbować |
| .bg-success | komórka tabeli pomocą kategorii "BG-sukcesu" | próbować |
| .bg-info | komórka tabeli pomocą kategorii "BG-info" | próbować |
| .bg ostrzegania | komórka tabeli pomocą kategorii "BG-ostrzegawczy" | próbować |
| .bg-niebezpieczeństwo | komórka tabeli pomocą kategorii "BG-Zagrożeniu" | próbować |
inny
| kategoria | opis | Przykłady |
|---|---|---|
| .pull lewej | Elementy wypływają na lewej | próbować |
| .pull prawym | Elementy unosić w prawo | próbować |
| .center-block | Element jest ustawiony display: block i skoncentrowane | próbować |
| .clearfix | jasne pływaka | próbować |
| .pokaż | Obowiązkowe elementy są wyświetlane | próbować |
| .hidden | Obowiązkowym elementem ukrywanie | próbować |
| .sr tylko | Oprócz czytnika ekranu, ukrytego elementu na innych urządzeniach | próbować |
| .sr-only-aktywowana | W połączeniu z .sr tylko klasy, pojawia się, gdy element staje się skupić (takich jak: działania klawiatury użytkownika) | próbować |
| .text-hide | Te elementy tekstowe strona zawierała zastąpić tła | próbować |
| .close | Wyświetla przycisk Wyłączony | próbować |
| .caret | Wyświetlanie menu rozwijanego | próbować |
Więcej przykładów
Blisko ikona
Użyj wspólnego ikonę Zamknij, aby zamknąć okno modalne i polu alertu. Użyjklasy blisko zbliżyć ikonę.
Przykłady
Spróbuj »
Wyniki przedstawiają się następująco:
wstawka korektorska
Użyj daszka do ciągnięcia w dół funkcję i kierunek. Za pomocą elementu <span> zklasy karetki, aby uzyskać tę funkcję.
Wyniki przedstawiają się następująco:
szybka zmiennoprzecinkowych
Można użyć każdejklasy pull-pull-wlewo lubprawodo elementów lewo lub prawo-pływające. Poniższy przykład ilustruje ten punkt.
Przykłady
Spróbuj »
Wyniki przedstawiają się następująco:
Aby wyrównać elementy na pasku nawigacyjnym, należy.navbar lewym lub prawym .navbarzamiast. Zobacz pasek nawigacyjny Bootstrap .
centered treści
Użyjklasy środkowego bloku centrum elementy.
Przykłady
Spróbuj »
Wyniki przedstawiają się następująco:
jasne pływaka
Aby usunąć element pływający, należy.clearfix klasę.
Przykłady
Spróbuj »
Wyniki przedstawiają się następująco:
Wyświetlanie i ukrywanie treści
Można wymusić elementu, aby wyświetlić lub ukryć (włącznie z czytników ekranu) poprzez wykorzystanieklasy .pokaż i .hiddenprzyjść.
Przykłady
Spróbuj »
Wyniki przedstawiają się następująco:
czytnik ekranu
Możesz umieścić wszystkie elementy w urządzeniu za pomocą ukrytejklasę .sr-only, oprócz czytnika ekranu.
Przykłady
Spróbuj »
Wyniki przedstawiają się następująco:
Widzimy tu dwa rodzaje etykiet znaczników wejściowych zklasy sr-only, więc etykieta będzie widoczny tylko dla czytników ekranu.