składniki
Ponad tuzin komponentów wielokrotnego użytku stworzonych w celu zapewnienia ikonografii, list rozwijanych, grup wejściowych, nawigacji, alertów i wielu innych.
Glify
Dostępne glify
Zawiera ponad 250 glifów w formacie czcionki z zestawu Glyphicon Niziołki. Niziołki Glyphicons zwykle nie są dostępne za darmo, ale ich twórca udostępnił je za darmo w Bootstrap. W ramach podziękowania prosimy jedynie o dołączenie linku do Glyphicons , gdy tylko jest to możliwe.
- glifowy glifowy-gwiazdka
- Glyphicon Glyphicon-plus
- glifowy glifowy-euro
- glyphicon glyphicon-eur
- Glyphicon Glyphicon-minus
- glifowy chmura glifowa
- glifowy koperta glifowa
- Glyphicon Glyphicon-ołówek
- glifowy glifowy-szkło
- Glyphicon Glyphicon-Muzyka
- Glyphicon Glyphicon-Search
- glifowy glifowy-serce
- Glyphicon Glyphicon-Star
- glifowy glifowy-gwiazda-pusty
- Glyphicon Glyphicon-user
- Glyphicon Glyphicon-film
- glifikon glif-th-duży
- Glyphicon Glyphicon-th
- Glyphicon Glyphicon-th-list
- Glyphicon Glyphicon-ok
- Glyphicon Glyphicon-Usuń
- Glyphicon Glyphicon-zoom-in
- Glyphicon Glyphicon-Zoom-Out
- Glyphicon Glyphicon-off
- glifowy sygnał glifowy
- Glyphicon Glyphicon-Cog
- Glyphicon Glyphicon Trash
- Glyphicon Glyphicon-Home
- plik glifów plik-glifów
- glifowy czas glifów
- Glyphicon Glyphicon Road
- glyphicon glyphicon-download-alt
- Glyphicon Glyphicon-Pobierz
- glifikon glifikon-prześlij
- glifowy skrzynka odbiorcza glifów
- Glyphicon Glyphicon-play-circle
- Glyphicon Glyphicon-Powtórz
- Glyphicon Glyphicon-Refresh
- glyphicon glyphicon-list-alt
- glifowy zamek glifowy
- glifowy flaga glifowa
- glifowe słuchawki glifowe
- Glyphicon Glyphicon-volume-off
- Glyphicon Glyphicon-głośność-w dół
- Glyphicon Glyphicon-volume-up
- Glyphicon Glyphicon-qrcode
- glifowy kod kreskowy glifów
- glifowy tag glifowy
- Glyphicon Glyphicon-tags
- Glyphicon Glyphicon-book
- Glyphicon Glyphicon-zakładka
- Glyphicon Glyphicon-print
- glifowy aparat glifowy
- glyphicon glyphicon-font
- glifowy glifowy pogrubiony
- glifowy glifowy-kursywa
- glifowy glifowy-wysokość-tekstu
- glifowy szerokość-tekstu-glifów
- Glyphicon Glyphicon-align-left
- Glyphicon Glyphicon-align-center
- Glyphicon Glyphicon-align-right
- Glyphicon Glyphicon-align-justify
- Glyphicon Glyphicon-list
- Glyphicon Glyphicon-Indent-Left
- Glyphicon Glyphicon-Indent-Right
- glifowy glifowy-facetime-wideo
- glifowy obraz glifowy
- Glyphicon Glyphicon-map-marker
- Glyphicon Glyphicon-dostosuj
- glifowy odcień glifów
- glifikon glifikon-edytuj
- Glyphicon Glyphicon-share
- glifowy sprawdzanie glifów
- Glyphicon Glyphicon-move
- Glyphicon Glyphicon-Krok W Tył
- Glyphicon Glyphicon-fast-backward
- glifowy glifowy do tyłu
- Glyphicon Glyphicon-Play
- glifowy glifowy-pauza
- Glyphicon Glyphicon-stop
- Glyphicon Glyphicon-forward
- Glyphicon Glyphicon-fast-forward
- glifowy glifowy-krok-do przodu
- glifowy wyrzucanie glifów
- Glyphicon Glyphicon-Chevron-Left
- Glyphicon Glyphicon-Chevron-right
- Glyphicon Glyphicon-plus-sign
- Glyphicon Glyphicon-minus-sign
- Glyphicon Glyphicon-remove-sign
- Glyphicon Glyphicon-ok-znak
- glifowy glifowy-znak-pytania
- glifowy znak-informacyjny-glifowy
- glifowy glifowy-zrzut ekranu
- glifowy glifowy-usuń-okrąg
- Glyphicon Glyphicon-ok-Circle
- Glyphicon Glyphicon-Ban Circle
- Glyphicon Glyphicon-strzałka-w lewo
- Glyphicon Glyphicon-arrow-right
- Glyphicon Glyphicon-strzałka w górę
- glyphicon glyphicon-strzałka w dół
- Glyphicon Glyphicon-share-alt
- Glyphicon Glyphicon-resize-full
- Glyphicon Glyphicon-Resize-Small
- Glyphicon Glyphicon-wykrzyknik-znak
- Glyphicon Glyphicon-prezent
- glifowy liść glifowy
- glifowy glifowy-ogień
- Glyphicon Glyphicon-Eye-Open
- glifowy glifowy-zamknij oko
- glifowy znak ostrzegawczy-glifowy
- Glyphicon Glyphicon-plane
- glifowy kalendarz glifowy
- Glyphicon Glyphicon-random
- glifowy glifowy-komentarz
- glifowy magnes glifowy
- Glyphicon Glyphicon-Chevron-up
- glyphicon glyphicon-chevron-down
- glyphicon glyphicon-retweet
- glifowy wózek-zakupowy-glifowy
- glifikon glifowy-folder-zamknij
- glyphicon glyphicon-folder-open
- glifowy glifowy-zmiana rozmiaru-pionowy
- glifowy glifowy-zmiana rozmiaru-poziomy
- Glyphicon Glyphicon-HDD
- Glyphicon Glyphicon Bullhorn
- glifowy glifowy dzwonek
- Glyphicon Glyphicon-certyfikat
- glifowy glifowy-kciuki w górę
- glifowy glifowy-kciuk w dół
- Glyphicon Glyphicon-Hand-right
- Glyphicon Glyphicon-Hand-Left
- Glyphicon Glyphicon Hand-up
- Glyphicon Glyphicon Hand-Down
- glifowy glifowy-kółko-strzałka-prawo
- glifowy glifowy-kółko-strzałka-w lewo
- glifikon glif-kółko-strzałka-w górę
- glifowy glifowy-kółko-strzałka-w dół
- glifowy glifowy-globus
- Glyphicon Glyphicon-Wrench
- Glyphicon Glyphicon-zadania
- glifowy filtr glifowy
- Glyphicon Glyphicon-Teczka
- Glyphicon Glyphicon-fullscreen
- Glyphicon Glyphicon-Dashboard
- glifowy spinacz do glifów
- glifowy glifowy-serce-puste
- Glyphicon Glyphicon-Link
- glifowy telefon z glifami
- glifowy glifowy pinezka
- Glyphicon Glyphicon-usd
- Glyphicon Glyphicon-gbp
- Glyphicon Glyphicon Sort
- glifowy glifowy-sortuj-według-alfabetu
- glifowy glifowy-sortuj-wg-alfabetu-alt
- glifowy glifowy-sortuj według kolejności
- glifowy glifowy-sortuj-wg-kolejności-alt
- glyphicon glyphicon-sortuj-według-atrybutów
- glyphicon glyphicon-sortuj-według-atrybutów-alt
- glifowy glifowy odznaczony
- glifowy glifowy-rozwiń
- glyphicon glyphicon-collapse-down
- Glyphicon Glyphicon-collapse-up
- glifikon glifikon-logowanie
- Glyphicon Glyphicon-Flash
- glifowy glifowy-wyloguj-wyloguj
- glyphicon glyphicon-nowe-okno
- glifowy rekord glifowy
- Glyphicon Glyphicon-save
- Glyphicon Glyphicon-Open
- glifowy glifowy-zapisany
- glifowy import glifów
- glifowy eksport glifów
- Glyphicon Glyphicon-wyślij
- glifowy glifowy-dyskietka-dyskietka
- Glyphicon Glyphicon-floppy-zapisano
- glyphicon glyphicon-floppy-usuń
- Glyphicon Glyphicon-floppy-save
- Glyphicon Glyphicon-floppy-open
- Glyphicon Glyphicon-credit-card
- glifowy transfer glifów
- glifowy sztućce glifowe
- glifowy nagłówek glifowy
- glifowy skompresowany glifowym
- Glyphicon Glyphicon-słuchawki
- glifowy glifowy-telefon-alt
- glifowy wieża glifowa
- Glyphicon Glyphicon-stats
- Glyphicon Glyphicon-sd-video
- Glyphicon Glyphicon-HD-video
- Glyphicon Glyphicon-napisy
- Glyphicon Glyphicon-Sound-Stereo
- Glyphicon Glyphicon-Sound-Dolby
- Glyphicon Glyphicon-Sound-5-1
- Glyphicon Glyphicon-Sound-6-1
- Glyphicon Glyphicon-Sound-7-1
- Glyphicon Glyphicon-copyright-znak
- Glyphicon Glyphicon-Registration-znak
- glifikon glifikon-chmura-pobierz
- glifikon glifikon-przesyłanie-chmury
- Glyphicon Glyphicon-drzewo-iglaste
- glifowy glifowy-drzewo-liściaste
- glifowy glifowy-cd
- Glyphicon Glyphicon-save-file
- Glyphicon Glyphicon-Open-File
- glifowy poziom glifów w górę
- Glyphicon Glyphicon-Copy
- Glyphicon Glyphicon-Pasta
- glifowy alert glifowy
- glifowy korektor glifów
- Glyphicon Glyphicon-Król
- Glyphicon Glyphicon-Królowa
- Glyphicon Glyphicon-pionek
- Glyphicon Glyphicon-biskup
- glifowy rycerz glifowy
- Glyphicon Glyphicon-Baby-Formuła
- Glyphicon Glyphicon-tent
- glifowy glifowy-tablica
- glifowy łóżko glifowe
- glifowy glifowy-jabłko
- Glyphicon Glyphicon-Erase
- glifowy glifowy-klepsydra
- glifowa lampa glifowa
- Glyphicon Glyphicon-duplikat
- glifowy glifowy-świnka-skarbonka
- Glyphicon Glyphicon-nożyczki
- Glyphicon Glyphicon-Bitcoin
- Glyphicon Glyphicon-btc
- Glyphicon Glyphicon-xbt
- Glyphicon Glyphicon-Jen
- Glyphicon Glyphicon-jpy
- glifowy glifowy-rubel
- Glyphicon Glyphicon-rub
- glifowy skala glifowa
- glifowy glifowy-lodowy-na patyku
- Glyphicon Glyphicon-Ice-Lolly-Smakował
- Glyphicon Glyphicon-edukacja
- glifowy glifowy-opcja-pozioma
- glifikon glifikon-opcja-pionowa
- glyphicon glifikon-menu-hamburger
- glyphicon glyphicon-modal-window
- Glyphicon Glyphicon-Olej
- glifowy glifowy-ziarno
- Glyphicon Glyphicon-okulary przeciwsłoneczne
- glifowy rozmiar-tekstu-glifów
- glifowy kolor-tekstu glifowego
- glifowy tło-tekstu glifowego
- glyphicon glyphicon-object-align-top
- Glyphicon Glyphicon-Object-Wyrównaj-Dół
- glifowy glifowy-obiekt-wyrównaj-poziomo
- glyphicon glyphicon-object-align-left
- glifowy glifowy-obiekt-wyrównaj-pionowo
- glyphicon glyphicon-object-align-right
- glifowy glifowy-trójkąt-prawo
- glifowy glifowy-trójkąt-lewo
- glifowy glifowy-trójkąt-dół
- glifowy glifowy-trójkąt-góra
- Glyphicon Glyphicon-konsola
- glifowy glifowy-indeks górny
- glifowy glifowy indeks dolny
- glifowy glifowy-menu-po lewej
- Glyphicon Glyphicon-menu-right
- glifowy glifowy-menu-w dół
- glifowy glifowy-menu-up
Jak używać
Ze względu na wydajność wszystkie ikony wymagają klasy podstawowej i indywidualnej klasy ikon. Aby użyć, umieść poniższy kod w dowolnym miejscu. Pamiętaj, aby pozostawić spację między ikoną a tekstem, aby zapewnić prawidłowe wypełnienie.
Nie mieszać z innymi składnikami
Klasy ikon nie mogą być bezpośrednio łączone z innymi komponentami. Nie powinny być używane razem z innymi klasami na tym samym elemencie. Zamiast tego dodaj zagnieżdżone <span>i zastosuj klasy ikon do <span>.
Tylko do użytku na pustych elementach
Klas ikon należy używać tylko w przypadku elementów, które nie zawierają treści tekstowej i nie mają elementów podrzędnych.
Zmiana lokalizacji czcionki ikony
Bootstrap zakłada, że pliki czcionek ikon będą zlokalizowane w ../fonts/katalogu, w stosunku do skompilowanych plików CSS. Przeniesienie lub zmiana nazwy tych plików czcionek oznacza aktualizację CSS na jeden z trzech sposobów:
- Zmień
@icon-font-pathi/lub@icon-font-namezmienne w źródłowych plikach Less. - Użyj opcji względnych adresów URL dostarczonej przez kompilator Less.
- Zmień
url()ścieżki w skompilowanym CSS.
Użyj dowolnej opcji, która najlepiej pasuje do Twojej konkretnej konfiguracji programistycznej.
Dostępne ikony
Nowoczesne wersje technologii pomocniczych będą ogłaszać zawartość wygenerowaną przez CSS, a także określone znaki Unicode. Aby uniknąć niezamierzonych i mylących wyników w czytnikach ekranu (szczególnie, gdy ikony są używane wyłącznie do dekoracji), ukrywamy je za pomocą aria-hidden="true"atrybutu.
Jeśli używasz ikony, aby przekazać znaczenie (a nie tylko jako element dekoracyjny), upewnij się, że to znaczenie jest również przekazywane technologiom pomocniczym – na przykład dołącz dodatkową treść, wizualnie ukrytą wraz z .sr-onlyklasą.
Jeśli tworzysz kontrolki bez innego tekstu (na przykład <button>zawierającego tylko ikonę), zawsze należy podać alternatywną zawartość w celu zidentyfikowania celu kontrolki, aby była to zrozumiała dla użytkowników technologii pomocniczych. W takim przypadku możesz dodać aria-labelatrybut do samej kontrolki.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>Przykłady
Używaj ich w przyciskach, grupach przycisków dla paska narzędzi, nawigacji lub dołączonych danych wejściowych formularza.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>Ikona używana w alercie , informująca , że jest to komunikat o błędzie, z dodatkowym .sr-onlytekstem, który przekazuje tę wskazówkę użytkownikom technologii wspomagających.
Błąd:Wpisz poprawny adres e-mail
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>Menu rozwijane
Przełączalne menu kontekstowe do wyświetlania list linków. Interaktywna dzięki rozwijanej wtyczce JavaScript .
Przykład
Zawijaj wyzwalacz i menu rozwijane w obrębie .dropdownlub w innym elemencie, który deklaruje position: relative;. Następnie dodaj kod HTML menu.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Menu rozwijane można zmienić tak, aby rozwijały się w górę (zamiast w dół), dodając .dropupje do elementu nadrzędnego.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Wyrównanie
Domyślnie menu rozwijane jest automatycznie umieszczane w 100% od góry i wzdłuż lewej strony swojego rodzica. Dodaj .dropdown-menu-rightdo .dropdown-menuprawej wyrównaj menu rozwijane.
Może wymagać dodatkowego pozycjonowania
Listy rozwijane są automatycznie umieszczane za pomocą CSS w normalnym przepływie dokumentu. Oznacza to, że listy rozwijane mogą być przycinane przez rodziców z określonymi overflowwłaściwościami lub pojawiać się poza obrębem widocznego obszaru. Rozwiąż te problemy samodzielnie, gdy się pojawią.
Wycofane .pull-rightwyrównanie
Od wersji 3.1.0 wycofaliśmy .pull-rightmenu rozwijane. Aby wyrównać menu do prawej, użyj .dropdown-menu-right. Wyrównane do prawej komponenty nawigacji na pasku nawigacyjnym używają wersji mixin tej klasy, aby automatycznie wyrównać menu. Aby to zmienić, użyj .dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>Nagłówki
Dodaj nagłówek, aby oznaczyć sekcje działań w dowolnym menu rozwijanym.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>Rozdzielacz
Dodaj separator do oddzielnych serii linków w menu rozwijanym.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>Wyłączone pozycje menu
Dodaj .disableddo <li>listy rozwijanej, aby wyłączyć łącze.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>Grupy przycisków
Zgrupuj serie przycisków razem w jednym wierszu z grupą przycisków. Dodaj opcjonalne radio JavaScript i zachowanie stylu pola wyboru za pomocą naszej wtyczki przycisków .
Podpowiedzi i okienka wyskakujące w grupach przycisków wymagają specjalnych ustawień
Używając etykietek narzędzi lub okienek popover na elementach w .btn-group, musisz określić opcję, container: 'body'aby uniknąć niepożądanych efektów ubocznych (takich jak rozszerzanie się elementu i/lub utrata zaokrąglonych narożników po uruchomieniu etykiety narzędzia lub okienka popover).
Upewnij się, że jest poprawny rolei podaj etykietę
Aby technologie wspomagające — takie jak czytniki ekranu — informowały o pogrupowaniu serii przycisków, należy podać odpowiedni roleatrybut. W przypadku grup przycisków będzie to role="group", podczas gdy paski narzędzi powinny mieć role="toolbar".
Wyjątkiem są grupy, które zawierają tylko jedną kontrolkę (na przykład wyjustowane grupy przycisków z <button>elementami) lub listę rozwijaną.
Ponadto grupy i paski narzędzi powinny mieć wyraźną etykietę, ponieważ większość technologii wspomagających ich nie ogłosi, pomimo obecności odpowiedniego roleatrybutu. W podanych tutaj przykładach używamy , ale można również użyć aria-labelalternatyw, takich jak .aria-labelledby
Podstawowy przykład
Zawiń serię przycisków .btnw .btn-group.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>Pasek narzędzi przycisków
Połącz zestawy <div class="btn-group">w <div class="btn-toolbar">bardziej złożone komponenty.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>Rozmiary
Zamiast stosować klasy rozmiarów przycisków do każdego przycisku w grupie, po prostu dodaj .btn-group-*do każdego .btn-group, również w przypadku zagnieżdżania wielu grup.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>Zagnieżdżanie
Umieść jeden .btn-groupw innym .btn-group, jeśli chcesz, aby menu rozwijane były mieszane z serią przycisków.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>Odmiana pionowa
Ustaw zestaw przycisków ułożonych pionowo, a nie poziomo. Menu z przyciskami podziału nie są tutaj obsługiwane.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>Wyjustowane grupy przycisków
Rozciągnij grupę przycisków w równych rozmiarach na całą szerokość jej elementu nadrzędnego. Działa również z listami rozwijanymi przycisków w grupie przycisków.
Obsługa granic
Ze względu na specyficzny kod HTML i CSS używany do justowania przycisków (a mianowicie display: table-cell), granice między nimi są podwojone. W zwykłych grupach przycisków margin-left: -1pxsłuży do układania obramowań zamiast ich usuwania. Jednak marginnie działa z display: table-cell. W rezultacie, w zależności od twoich dostosowań do Bootstrap, możesz chcieć usunąć lub ponownie pokolorować obramowania.
IE8 i granice
Internet Explorer 8 nie renderuje obramowań przycisków w wyjustowanej grupie przycisków, niezależnie od tego, czy są włączone, <a>czy <button>elementy. Aby to obejść, owiń każdy przycisk w inny .btn-group.
Zobacz #12476 , aby uzyskać więcej informacji.
Z <a>elementami
Po prostu zawiń serię .btns w .btn-group.btn-group-justified.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>Linki działające jak przyciski
Jeśli <a>elementy są używane jako przyciski – uruchamiające funkcje na stronie, zamiast przechodzenia do innego dokumentu lub sekcji na bieżącej stronie – należy im również nadać odpowiedni role="button".
Z <button>elementami
Aby używać wyjustowanych grup przycisków z <button>elementami, musisz owinąć każdy przycisk w grupę przycisków . Większość przeglądarek nie stosuje poprawnie naszego kodu CSS do uzasadnienia <button>elementów, ale ponieważ obsługujemy rozwijane menu przycisków, możemy to obejść.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>Przyciski rozwijane
Użyj dowolnego przycisku, aby uruchomić menu rozwijane, umieszczając je w obrębie .btn-groupi podając odpowiednie znaczniki menu.
Zależność wtyczki
Menu rozwijane przycisków wymagają, aby wtyczka rozwijana była dołączona do Twojej wersji Bootstrap.
Menu rozwijane z jednym przyciskiem
Zmień przycisk w rozwijany przełącznik z kilkoma podstawowymi zmianami znaczników.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Podziel rozwijane przyciski
Podobnie utwórz listy rozwijane z przyciskami dzielonymi z tymi samymi zmianami znaczników, tylko z osobnym przyciskiem.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Rozmiary
Rozwijane przyciski działają z przyciskami wszystkich rozmiarów.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>Odmiana dropup
Wyzwalaj rozwijane menu nad elementami, dodając .dropupje do elementu nadrzędnego.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>Grupy wejściowe
Rozszerz kontrolki formularza, dodając tekst lub przyciski przed, po lub po obu stronach dowolnego tekstowego <input>. Użyj .input-groupz .input-group-addonlub , .input-group-btnaby dodać lub dodać elementy do jednego .form-control.
<input>Tylko teksty
Unikaj używania <select>tutaj elementów, ponieważ nie mogą one być w pełni stylizowane w przeglądarkach WebKit.
Unikaj używania <textarea>tutaj elementów, ponieważ ich rowsatrybuty nie będą respektowane w niektórych przypadkach.
Podpowiedzi i okienka wyskakujące w grupach wejściowych wymagają specjalnych ustawień
Używając etykietek narzędzi lub okienek popover na elementach w ramach .input-group, musisz określić opcję, container: 'body'aby uniknąć niepożądanych efektów ubocznych (takich jak rozszerzanie się elementu i/lub utrata zaokrąglonych narożników po uruchomieniu etykiety narzędzia lub okienka popover).
Nie mieszać z innymi składnikami
Nie mieszaj grup formularzy ani klas kolumn siatki bezpośrednio z grupami wejściowymi. Zamiast tego zagnieżdż grupę wejściową wewnątrz grupy formularzy lub elementu związanego z siatką.
Zawsze dodawaj etykiety
Czytniki ekranu będą miały problemy z formularzami, jeśli nie dodasz etykiety do każdego wejścia. W przypadku tych grup wejściowych upewnij się, że wszelkie dodatkowe etykiety lub funkcje są przekazywane technologiom pomocniczym.
Dokładna technika, która ma zostać użyta ( <label>elementy widoczne, <label>elementy ukryte za pomocą .sr-onlyklasy lub użycie atrybutu , , lub aria-label) aria-labelledbyoraz aria-describedbyjakie dodatkowe informacje będą musiały zostać przekazane, będą się różnić w zależności od dokładnego typu implementowanego widżetu interfejsu. Przykłady w tej sekcji przedstawiają kilka sugerowanych podejść specyficznych dla danego przypadku.titleplaceholder
Podstawowy przykład
Umieść jeden dodatek lub przycisk po obu stronach wejścia. Możesz również umieścić je po obu stronach wejścia.
Nie obsługujemy wielu dodatków ( .input-group-addonlub .input-group-btn) na jednej stronie.
Nie obsługujemy wielu formantów formularzy w jednej grupie wejściowej.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>Rozmiary
Dodaj względne klasy rozmiarów formularzy do .input-groupsamego siebie, a zawartość wewnątrz automatycznie zmieni rozmiar — nie ma potrzeby powtarzania klas rozmiarów formantu dla każdego elementu.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>Pola wyboru i dodatki radiowe
Umieść dowolne pole wyboru lub opcję radiową w dodatku grupy wejściowej zamiast tekstu.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Dodatki do przycisków
Przyciski w grupach wejściowych są nieco inne i wymagają jednego dodatkowego poziomu zagnieżdżenia. Zamiast .input-group-addon, musisz użyć .input-group-btndo zawinięcia przycisków. Jest to wymagane ze względu na domyślne style przeglądarki, których nie można zastąpić.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Przyciski z listami rozwijanymi
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Przyciski segmentowe
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>Wiele przycisków
Chociaż możesz mieć tylko jeden dodatek na każdej stronie, możesz mieć wiele przycisków w jednym .input-group-btn.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>Navs
Navs dostępne w Bootstrap mają wspólne znaczniki, zaczynając od .navklasy bazowej, a także wspólne stany. Zamień klasy modyfikatorów, aby przełączać się między poszczególnymi stylami.
Karty
Zauważ, że .nav-tabsklasa wymaga .navklasy bazowej.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>Pigułki
Weź ten sam kod HTML, ale .nav-pillszamiast tego użyj:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>Pigułki można również układać w stosy w pionie. Wystarczy dodać .nav-stacked.
<ul class="nav nav-pills nav-stacked">
...
</ul>Usprawiedliwiony
Z łatwością twórz zakładki lub pigułki równe szerokości ich rodzica na ekranach szerszych niż 768px z .nav-justified. Na mniejszych ekranach łącza nawigacyjne są ułożone w stos.
Uzasadnione łącza nawigacyjne paska nawigacyjnego nie są obecnie obsługiwane.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>Wyłączone linki
W przypadku dowolnego komponentu nawigacyjnego (kart lub pigułek) dodaj .disabledszare linki i brak efektów najechania .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>Korzystanie z menu rozwijanych
Dodaj rozwijane menu z trochę dodatkowym kodem HTML i rozwijaną wtyczką JavaScript .
Karty z listami rozwijanymi
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>Pigułki z listami rozwijanymi
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>Pasek nawigacyjny
Domyślny pasek nawigacyjny
Paski nawigacyjne to responsywne komponenty meta, które służą jako nagłówki nawigacyjne dla Twojej aplikacji lub witryny. Zaczynają się zwinięte (i można je przełączać) w widokach mobilnych i stają się poziome wraz ze wzrostem dostępnej szerokości widocznego obszaru.
Uzasadnione łącza nawigacyjne paska nawigacyjnego nie są obecnie obsługiwane.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>Wizerunek marki
Zastąp markę paska nawigacyjnego własnym obrazem, zamieniając tekst na <img>. Ponieważ .navbar-brandma swoje własne wypełnienie i wysokość, może być konieczne nadpisanie niektórych CSS w zależności od obrazu.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>Formularze
Umieść zawartość formularza wewnątrz, .navbar-formaby uzyskać prawidłowe wyrównanie w pionie i zachowanie zwinięte w wąskich rzutniach. Użyj opcji wyrównania, aby zdecydować, gdzie znajduje się w treści paska nawigacyjnego.
Na wszelki wypadek .navbar-formudostępnia większość swojego kodu .form-inlineprzez mixin. Niektóre kontrolki formularzy, takie jak grupy wejściowe, mogą wymagać stałych szerokości, aby były wyświetlane poprawnie na pasku nawigacyjnym.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>guziki
Dodaj .navbar-btnklasę do <button>elementów, które nie znajdują się w a, <form>aby wyśrodkować je w pionie na pasku nawigacyjnym.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>Tekst
Zawijaj ciągi tekstu w elemencie za pomocą .navbar-text, zwykle na <p>tagu, aby uzyskać odpowiednią interlinię i kolor.
<p class="navbar-text">Signed in as Mark Otto</p>Łącza nienawigacyjne
Dla osób używających standardowych łączy, które nie znajdują się w zwykłym komponencie nawigacyjnym paska nawigacyjnego, użyj .navbar-linkklasy, aby dodać odpowiednie kolory dla opcji domyślnego i odwróconego paska nawigacyjnego.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>Wyrównanie komponentów
Dopasuj łącza nawigacyjne, formularze, przyciski lub tekst za pomocą klas narzędziowych .navbar-leftlub . .navbar-rightObie klasy dodadzą pływak CSS w określonym kierunku. Na przykład, aby wyrównać łącza nawigacyjne, umieść je w oddzielnym <ul>miejscu z odpowiednią zastosowaną klasą narzędziową.
Te klasy są mieszanymi wersjami .pull-lefti .pull-right, ale są ograniczone do zapytań o media, aby ułatwić obsługę składników paska nawigacyjnego na różnych rozmiarach urządzeń.
Naprawiono do góry
Dodaj .navbar-fixed-topi dołącz .containerlub .container-fluiddo treści środkowej i panelu nawigacyjnego.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>Naprawiono do dołu
Dodaj .navbar-fixed-bottomi dołącz .containerlub .container-fluiddo treści środkowej i panelu nawigacyjnego.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>Góra statyczna
Utwórz pasek nawigacyjny o pełnej szerokości, który przewija się wraz ze stroną, dodając .navbar-static-topi dołączając .containerlub .container-fluiddo środka i zawartości paska nawigacyjnego.
W przeciwieństwie do .navbar-fixed-*klas, nie musisz zmieniać żadnego dopełnienia na body.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>Odwrócony pasek nawigacyjny
Zmodyfikuj wygląd paska nawigacyjnego, dodając .navbar-inverse.
<nav class="navbar navbar-inverse">
...
</nav>Bułka tarta
Wskaż lokalizację bieżącej strony w hierarchii nawigacyjnej.
Separatory są automatycznie dodawane w CSS za pomocą :beforei content.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>Paginacja
Podaj linki do stronicowania swojej witryny lub aplikacji za pomocą wielostronicowego komponentu stronicowania lub prostszej alternatywy dla stronicowania .
Domyślna paginacja
Prosta paginacja inspirowana Rdio, idealna do aplikacji i wyników wyszukiwania. Duży blok jest trudny do przeoczenia, łatwo skalowalny i zapewnia duże obszary kliknięcia.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>Etykietowanie komponentu paginacji
Komponent paginacji powinien być opakowany w <nav>element, aby zidentyfikować go jako sekcję nawigacyjną dla czytników ekranu i innych technologii pomocniczych. Ponadto, ponieważ strona prawdopodobnie ma już więcej niż jedną taką sekcję nawigacji (taką jak główna nawigacja w nagłówku lub nawigacja na pasku bocznym), zaleca się podanie opisu aria-label, <nav>który odzwierciedla jej cel. Na przykład, jeśli komponent podziału na strony jest używany do nawigowania między zestawami wyników wyszukiwania, odpowiednią etykietą może być aria-label="Search results pages".
Stany wyłączone i aktywne
Linki można dostosować do różnych okoliczności. Używaj .disableddo linków, których nie można kliknąć, oraz .activedo wskazywania bieżącej strony.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>Zalecamy zamianę aktywnych lub wyłączonych kotwic <span>lub pominięcie kotwicy w przypadku strzałek poprzednia/następna, aby usunąć funkcję kliknięcia przy zachowaniu zamierzonych stylów.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>Rozmiary
Masz ochotę na większą lub mniejszą paginację? Dodaj .pagination-lglub .pagination-smdla dodatkowych rozmiarów.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>Pager
Szybkie poprzednie i następne linki do prostych implementacji stronicowania z lekkimi znacznikami i stylami. Świetnie nadaje się do prostych witryn, takich jak blogi czy czasopisma.
Przykład domyślny
Domyślnie strony centrują linki.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>Wyrównane linki
Alternatywnie możesz wyrównać każdy link do boków:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Opcjonalny stan wyłączony
Linki do stronicowania używają również ogólnej .disabledklasy narzędziowej z paginacji.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Etykiety
Przykład
Przykładowy nagłówek Nowy
Przykładowy nagłówek Nowy
Przykładowy nagłówek Nowy
Przykładowy nagłówek Nowy
Przykładowy nagłówek Nowy
Przykładowy nagłówek Nowy
<h3>Example heading <span class="label label-default">New</span></h3>Dostępne warianty
Dodaj dowolną z niżej wymienionych klas modyfikatorów, aby zmienić wygląd etykiety.
Domyślne
podstawowe
informacje o sukcesie
Ostrzeżenie Niebezpieczeństwo
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>Masz mnóstwo etykiet?
Problemy z renderowaniem mogą pojawić się, gdy masz dziesiątki wbudowanych etykiet w wąskim kontenerze, z których każda zawiera własny inline-blockelement (np. ikonę). Sposobem na obejście tego jest ustawienie display: inline-block;. Aby zapoznać się z kontekstem i przykładem, zobacz #13219 .
Odznaki
Łatwo wyróżnij nowe lub nieprzeczytane elementy, dodając <span class="badge">do łączy, nawigację Bootstrap i nie tylko.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>Samozapadające się
Gdy nie ma nowych lub nieprzeczytanych elementów, odznaki po prostu się zwiną (za pomocą :emptyselektora CSS), pod warunkiem, że nie ma w nich żadnej treści.
Kompatybilność z różnymi przeglądarkami
Odznaki nie zwijają się samoczynnie w Internet Explorerze 8, ponieważ brakuje w nim obsługi :emptyselektora.
Dostosowuje się do aktywnych stanów nawigacji
Dołączone są wbudowane style do umieszczania odznak w aktywnych stanach w nawigacji pigułki.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>Jumbotron
Lekki, elastyczny komponent, który może opcjonalnie rozszerzyć cały obszar roboczy, aby zaprezentować kluczową zawartość w Twojej witrynie.
Witaj świecie!
Jest to prosta jednostka bohatera, prosty element w stylu jumbotronu, który zwraca szczególną uwagę na polecane treści lub informacje.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>Aby jumbotron miał pełną szerokość i bez zaokrąglonych rogów, umieść go na zewnątrz wszystkich .containers i zamiast tego dodaj .containerwewnątrz.
<div class="jumbotron">
<div class="container">
...
</div>
</div>Nagłówek
Prosta powłoka h1do odpowiedniego rozmieszczania i segmentowania sekcji treści na stronie. Może wykorzystywać h1domyślny smallelement , jak również większość innych komponentów (z dodatkowymi stylami).
Przykładowy nagłówek strony Podtekst dla nagłówka
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>Miniatury
Rozszerz system siatek Bootstrap o komponent miniatur, aby łatwo wyświetlać siatki obrazów, filmów, tekstu i nie tylko.
Jeśli szukasz miniaturek przypominających Pinterest o różnych wysokościach i/lub szerokościach, musisz użyć wtyczki innej firmy, takiej jak Masonry , Isotope lub Salvattore .
Przykład domyślny
Domyślnie miniatury Bootstrap są zaprojektowane tak, aby prezentować połączone obrazy z minimalnym wymaganym znacznikiem.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>Treści niestandardowe
Przy odrobinie dodatkowych znaczników można dodać do miniatur dowolnego rodzaju zawartość HTML, taką jak nagłówki, akapity lub przyciski.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>Alerty
Dostarczaj kontekstowe komunikaty zwrotne dotyczące typowych działań użytkownika za pomocą kilku dostępnych i elastycznych komunikatów ostrzegawczych.
Przykłady
Zawijaj dowolny tekst i opcjonalny przycisk odrzucenia .alertoraz jedną z czterech klas kontekstowych (np. .alert-success) dla podstawowych komunikatów ostrzegawczych.
Brak domyślnej klasy
Alerty nie mają klas domyślnych, a jedynie klasy bazowe i modyfikujące. Domyślny szary alert nie ma większego sensu, więc musisz określić typ za pomocą klasy kontekstowej. Wybierz spośród sukcesu, informacji, ostrzeżenia lub niebezpieczeństwa.
Bardzo dobrze! Pomyślnie przeczytałeś ten ważny komunikat ostrzegawczy.
Heads-up! Ten alert wymaga Twojej uwagi, ale nie jest bardzo ważny.
Ostrzeżenie! Lepiej sprawdź sam, nie wyglądasz zbyt dobrze.
Och, pstryk! Zmień kilka rzeczy i spróbuj przesłać ponownie.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>Alerty do odrzucenia
Buduj na podstawie dowolnego alertu, dodając opcjonalny .alert-dismissiblei zamykający przycisk.
Wymaga wtyczki alertu JavaScript
Aby uzyskać w pełni funkcjonalne, możliwe do odrzucenia alerty, musisz użyć wtyczki alertów JavaScript .
Ostrzeżenie! Lepiej sprawdź sam, nie wyglądasz zbyt dobrze.
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>Zapewnij prawidłowe zachowanie na wszystkich urządzeniach
Upewnij się, że używasz <button>elementu z data-dismiss="alert"atrybutem data.
Linki w alertach
Użyj .alert-linkklasy narzędziowej, aby szybko dostarczyć pasujące kolorowe linki w dowolnym alercie.
Bardzo dobrze! Pomyślnie przeczytałeś
ten ważny komunikat ostrzegawczy .
Heads-up! Ten
alert wymaga Twojej uwagi , ale nie jest bardzo ważny.
Ostrzeżenie! Lepiej sprawdź sam,
nie wyglądasz zbyt dobrze .
Och, pstryk!
Zmień kilka rzeczy i spróbuj przesłać ponownie.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>Paski postępu
Dostarczaj aktualne informacje zwrotne na temat postępu przepływu pracy lub akcji za pomocą prostych, ale elastycznych pasków postępu.
Kompatybilność z różnymi przeglądarkami
Paski postępu wykorzystują przejścia i animacje CSS3, aby osiągnąć niektóre z ich efektów. Te funkcje nie są obsługiwane w przeglądarce Internet Explorer 9 i starszych wersjach przeglądarki Firefox. Opera 12 nie obsługuje animacji.
Zgodność z polityką bezpieczeństwa treści (CSP)
Jeśli Twoja witryna ma politykę bezpieczeństwa treści (CSP) , która nie zezwala style-src 'unsafe-inline'na , nie będzie można używać styleatrybutów wbudowanych do ustawiania szerokości paska postępu, jak pokazano w poniższych przykładach. Alternatywne metody ustawiania szerokości, które są zgodne ze ścisłymi CSP, obejmują użycie małego niestandardowego JavaScript (który ustawia element.style.width) lub użycie niestandardowych klas CSS.
Podstawowy przykład
Domyślny pasek postępu.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>Z etykietą
Usuń klasę <span>with .sr-onlyz paska postępu, aby wyświetlić widoczny procent.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>Aby zapewnić czytelność tekstu etykiety nawet przy niskich wartościach procentowych, rozważ dodanie znaku min-widthdo paska postępu.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>Alternatywy kontekstowe
Paski postępu wykorzystują niektóre z tych samych klas przycisków i alertów, aby zapewnić spójne style.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>W paski
Używa gradientu, aby uzyskać efekt pasków. Niedostępne w IE9 i starszych.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>Ożywiony
Dodaj .activedo, .progress-bar-stripedaby animować paski od prawej do lewej. Niedostępne w IE9 i starszych.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>Ułożone w stos
Umieść kilka sztabek w tym samym .progress, aby je ułożyć.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>Obiekt medialny
Abstrakcyjne style obiektów do budowania różnego rodzaju komponentów (takich jak komentarze na blogu, tweety itp.), które zawierają obraz wyrównany do lewej lub prawej obok treści tekstowej.
Domyślne media
Media domyślne wyświetlają obiekt multimedialny (obrazy, wideo, audio) po lewej lub prawej stronie bloku treści.
Nagłówek mediów
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, przedsionek w vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis w faucibus.
Nagłówek mediów
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, przedsionek w vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis w faucibus.
Zagnieżdżony nagłówek multimediów
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, przedsionek w vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis w faucibus.Nagłówek mediów
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, przedsionek w vulputate, tempus viverra turpis.
Nagłówek mediów
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, przedsionek w vulputate, tempus viverra turpis.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>Klasy .pull-lefti .pull-rightrównież istnieją i były wcześniej używane jako część komponentu multimedialnego, ale są przestarzałe do tego użytku w wersji 3.3.0. Są one w przybliżeniu równoważne .media-lefti .media-right, z wyjątkiem tego, że .media-rightpowinny być umieszczone po .media-bodyznaku w html.
Wyrównanie mediów
Obrazy lub inne media można wyrównać do góry, do środka lub do dołu. Domyślnie jest wyrównany do góry.
Media wyrównane do góry
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, przedsionek w vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis w faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Media wyrównane do środka
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, przedsionek w vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis w faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Media wyrównane do dołu
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, przedsionek w vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis w faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>Lista mediów
Z odrobiną dodatkowego znacznika możesz użyć listy mediów wewnątrz (przydatne w wątkach komentarzy lub listach artykułów).
-
Nagłówek mediów
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, przedsionek w vulputate, tempus viverra turpis.
Zagnieżdżony nagłówek multimediów
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, przedsionek w vulputate, tempus viverra turpis.
Zagnieżdżony nagłówek multimediów
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, przedsionek w vulputate, tempus viverra turpis.
Zagnieżdżony nagłówek multimediów
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, przedsionek w vulputate, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>Lista grup
Grupy list to elastyczny i potężny komponent do wyświetlania nie tylko prostych list elementów, ale także złożonych z niestandardową zawartością.
Podstawowy przykład
Najbardziej podstawowa grupa list to po prostu nieuporządkowana lista z elementami listy i odpowiednimi klasami. Zbuduj go za pomocą poniższych opcji lub w razie potrzeby własnego CSS.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Przedsionek w erosie
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>Odznaki
Dodaj komponent odznaki do dowolnego elementu grupy listy, a zostanie on automatycznie umieszczony po prawej stronie.
- 14Cras justo odio
- 2Dapibus ac facilisis in
- 1Morbi leo risus
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Połączone elementy
Połącz elementy grupy listy, używając znaczników kotwicy zamiast elementów listy (oznacza to również element nadrzędny <div>zamiast <ul>). Nie ma potrzeby indywidualnego rodzica wokół każdego elementu.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Elementy przycisków
Elementy grupy listy mogą być przyciskami zamiast elementów listy (co oznacza również element nadrzędny <div>zamiast <ul>). Nie ma potrzeby indywidualnego rodzica wokół każdego elementu. Nie używaj .btntutaj standardowych klas.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>Elementy wyłączone
Dodaj .disableddo a, .list-group-itemaby wyszarzać, aby wyglądało na wyłączone.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Zajęcia kontekstowe
Użyj klas kontekstowych do stylizacji elementów listy, domyślnych lub połączonych. Obejmuje również .activestan.
- Dapibus ac facilisis in
- Cras siedzieć amet nibh libero
- Porta ac consectetur ac
- Przedsionek w erosie
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>Treści niestandardowe
Dodaj prawie dowolny kod HTML w obrębie, nawet dla połączonych grup list, takich jak ta poniżej.
Lista nagłówka elementu grupy
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Lista nagłówka elementu grupy
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Lista nagłówka elementu grupy
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>Panele
Chociaż nie zawsze jest to konieczne, czasami trzeba umieścić DOM w pudełku. W takich sytuacjach wypróbuj komponent panelu.
Podstawowy przykład
Domyślnie wszystko, co .panelrobi, to zastosowanie podstawowego obramowania i dopełnienia, aby pomieścić pewną zawartość.
Przykład panelu podstawowego
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>Panel z nagłówkiem
Łatwo dodaj kontener nagłówków do swojego panelu za pomocą .panel-heading. Możesz również dołączyć dowolny <h1>- <h6>z .panel-titleklasą, aby dodać wstępnie stylizowany nagłówek. Jednak rozmiary czcionek <h1>- <h6>są zastępowane przez .panel-heading.
Aby zapewnić prawidłowe kolorowanie linków, należy umieścić linki w nagłówkach w obrębie .panel-title.
Nagłówek panelu bez tytułu
Zawartość panelu
Tytuł panelu
Zawartość panelu
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>Panel ze stopką
Zawijaj przyciski lub dodatkowy tekst w .panel-footer. Zwróć uwagę, że stopki paneli nie dziedziczą kolorów i obramowań podczas korzystania z odmian kontekstowych, ponieważ nie powinny znajdować się na pierwszym planie.
Zawartość panelu
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>Alternatywy kontekstowe
Podobnie jak inne komponenty, możesz łatwo uczynić panel bardziej znaczącym w określonym kontekście, dodając dowolne kontekstowe klasy stanu.
Tytuł panelu
Zawartość panelu
Tytuł panelu
Zawartość panelu
Tytuł panelu
Zawartość panelu
Tytuł panelu
Zawartość panelu
Tytuł panelu
Zawartość panelu
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>Ze stolikami
Dodaj dowolne nieobramowane .tablew panelu, aby uzyskać jednolity projekt. Jeśli występuje .panel-body, dodajemy dodatkowe obramowanie na górze tabeli w celu oddzielenia.
Nagłówek panelu
Tutaj znajdziesz domyślną zawartość panelu. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
| # | Imię | Nazwisko | Nazwa użytkownika |
|---|---|---|---|
| 1 | Ocena | Otto | @mdo |
| 2 | Jakub | Thornton | @tłuszcz |
| 3 | Larry | ptak | @świergot |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Jeśli nie ma korpusu panelu, komponent przesuwa się z nagłówka panelu do tabeli bez przerwy.
Nagłówek panelu
| # | Imię | Nazwisko | Nazwa użytkownika |
|---|---|---|---|
| 1 | Ocena | Otto | @mdo |
| 2 | Jakub | Thornton | @tłuszcz |
| 3 | Larry | ptak | @świergot |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Z grupami list
Łatwo dołączaj grupy list o pełnej szerokości w dowolnym panelu.
Nagłówek panelu
Tutaj znajdziesz domyślną zawartość panelu. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Przedsionek w erosie
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>Responsywne osadzanie
Zezwalaj przeglądarkom na określanie wymiarów wideo lub pokazu slajdów na podstawie szerokości bloku zawierającego, tworząc wewnętrzny współczynnik, który będzie odpowiednio skalowany na dowolnym urządzeniu.
Reguły są stosowane bezpośrednio do elementów <iframe>, <embed>, <video>i <object>; opcjonalnie użyj jawnej klasy potomnej, .embed-responsive-itemgdy chcesz dopasować styl dla innych atrybutów.
Pro-Tip! Nie musisz uwzględniać frameborder="0"w swoich <iframe>s, ponieważ zastępujemy to dla Ciebie.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>Wells
Domyślna studnia
Użyj studni jako prostego efektu na elemencie, aby nadać mu efekt wstawki.
Spójrz, jestem w studni!
<div class="well">...</div>Zajęcia opcjonalne
Kontroluj dopełnienie i zaokrąglone rogi za pomocą dwóch opcjonalnych klas modyfikatorów.
Spójrz, jestem w dużej studni!
<div class="well well-lg">...</div>
Spójrz, jestem w małej studni!
<div class="well well-sm">...</div>