Bootstrap Responsive Utilities
Bootstrap zawiera kilka klas pomocników w celu osiągnięcia rozwoju dla urządzeń mobilnych przyjazne szybciej. Zapytania te mogą łączyć duże, małe i średnie urządzenia za pośrednictwem mediów, aby uświadomić sobie, zawartość urządzenia, aby pokazać i ukryć.
Korzystanie z tych narzędzi musi być ostrożny, aby uniknąć tworzenia zupełnie różne wersje tej samej strony.Responsive narzędzie jest obecnie dostępny tylko w blokach i przełączania tabeli.
| Ultra-mały ekran Telefon (<768px) | Mały ekran Tablet (≥768px) | Średni ekranu Pulpit (≥992px) | Duży ekran Pulpit (≥1200px) | |
|---|---|---|---|---|
| .Visible Właściwość ta-xs- * | widoczny | ukryć | ukryć | ukryć |
| .Visible Właściwość ta-SM * | ukryć | widoczny | ukryć | ukryć |
| .Visible Właściwość ta-MD- * | ukryć | ukryć | widoczny | ukryć |
| .Visible Właściwość ta-LG-* | ukryć | ukryć | ukryć | widoczny |
| .hidden-XS | ukryć | widoczny | widoczny | widoczny |
| .hidden-sm | widoczny | ukryć | widoczny | widoczny |
| .hidden-MD | widoczny | widoczny | ukryć | widoczny |
| .hidden-lg | widoczny | widoczny | widoczny | ukryć |
Od uwolnienia v3.2.0, w kształcie .Visible Właściwość ta - * - * wielkości klasy na każdym ekranie ma trzy warianty, każdy dla innej listy właściwości wyświetlacza CSS jest w następujący sposób:
| klastry | wyświetlacz CSS |
|---|---|
| .Visible Właściwość ta - * - Blok | display: block; |
| .Visible Właściwość ta - * - inline | display: inline; |
| .Visible Właściwość ta - * - inline-block | display: inline-block; |
Dlatego bardzo mały ekran (XS), na przykład, dostępne .Visible Właściwość ta - * - * zajęcia są: .Visible Właściwość ta-xs-block, .Visible Właściwość ta-xs-inline i .Visible Właściwość ta-XS-inline-block.
.Visible Właściwość ta-xs-sm, .Visible Właściwość ta, .Visible Właściwość ta-MD i ćwiczenia .Visible Właściwość ta-lg również istnieje. Ale od początku wersji v3.2.0 nie jest zalecane. W szczególnych przypadkach <table> elementów związanych z zewnątrz, one .Visible Właściwość ta - * - Blok samo.
Kategoria Drukuj
Poniższa tabela zawiera kategorię druku. Wykorzystaj je, aby przełączyć zawartość wydruku.
| klasa | przeglądarka | drukarka |
|---|---|---|
| .Visible Właściwość ta-print-block .Visible Właściwość ta-print-inline .Visible Właściwość ta-print-inline-block | ukryć | widoczny |
| .hidden-print | widoczny | ukryć |
Przykłady
Poniższy przykład ilustruje wymienione powyżej użycia klasy pomocnika. Dostosuj rozmiar okna przeglądarki, lub załadować wystąpień na różnych urządzeniach, test czuły klasie użytkowej.
Przykłady
Spróbuj »
Wyniki przedstawiają się następująco:
Wyboru (✔) wskazuje, że element jest widoczny w bieżącej rzutni.