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.
Ponad tuzin komponentów wielokrotnego użytku stworzonych w celu zapewnienia ikonografii, list rozwijanych, grup wejściowych, nawigacji, alertów i wielu innych.
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.
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.
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>
.
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.
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:
@icon-font-path
i/lub @icon-font-name
zmienne w źródłowych plikach Less.url()
ścieżki w skompilowanym CSS.Użyj dowolnej opcji, która najlepiej pasuje do Twojej konkretnej konfiguracji programistycznej.
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-only
klasą.
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-label
atrybut do samej kontrolki.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
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-only
tekstem, który przekazuje tę wskazówkę użytkownikom technologii wspomagających.
<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>
Przełączalne menu kontekstowe do wyświetlania list linków. Interaktywna dzięki rozwijanej wtyczce JavaScript .
Zawijaj wyzwalacz i menu rozwijane w obrębie .dropdown
lub 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 .dropup
je 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>
Domyślnie menu rozwijane jest automatycznie umieszczane w 100% od góry i wzdłuż lewej strony swojego rodzica. Dodaj .dropdown-menu-right
do .dropdown-menu
prawej wyrównaj menu rozwijane.
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 overflow
właściwościami lub pojawiać się poza obrębem widocznego obszaru. Rozwiąż te problemy samodzielnie, gdy się pojawią.
.pull-right
wyrównanieOd wersji 3.1.0 wycofaliśmy .pull-right
menu 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>
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>
Dodaj separator do oddzielnych serii linków w menu rozwijanym.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Dodaj .disabled
do <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>
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 .
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).
role
i podaj etykietęAby technologie wspomagające — takie jak czytniki ekranu — informowały o pogrupowaniu serii przycisków, należy podać odpowiedni role
atrybut. 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 role
atrybutu. W podanych tutaj przykładach używamy , ale można również użyć aria-label
alternatyw, takich jak .aria-labelledby
Zawiń serię przycisków .btn
w .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>
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>
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>
Umieść jeden .btn-group
w 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>
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>
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.
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: -1px
służy do układania obramowań zamiast ich usuwania. Jednak margin
nie 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.
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.
<a>
elementamiPo prostu zawiń serię .btn
s w .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
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"
.
<button>
elementamiAby 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>
Użyj dowolnego przycisku, aby uruchomić menu rozwijane, umieszczając je w obrębie .btn-group
i podając odpowiednie znaczniki menu.
Menu rozwijane przycisków wymagają, aby wtyczka rozwijana była dołączona do Twojej wersji Bootstrap.
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>
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>
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>
Wyzwalaj rozwijane menu nad elementami, dodając .dropup
je 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>
Rozszerz kontrolki formularza, dodając tekst lub przyciski przed, po lub po obu stronach dowolnego tekstowego <input>
. Użyj .input-group
z .input-group-addon
lub , .input-group-btn
aby dodać lub dodać elementy do jednego .form-control
.
<input>
Tylko tekstyUnikaj 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 rows
atrybuty nie będą respektowane w niektórych przypadkach.
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 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ą.
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-only
klasy lub użycie atrybutu , , lub aria-label
) aria-labelledby
oraz aria-describedby
jakie 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.title
placeholder
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-addon
lub .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>
Dodaj względne klasy rozmiarów formularzy do .input-group
samego 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>
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 -->
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-btn
do 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 -->
<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 -->
<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>
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 dostępne w Bootstrap mają wspólne znaczniki, zaczynając od .nav
klasy bazowej, a także wspólne stany. Zamień klasy modyfikatorów, aby przełączać się między poszczególnymi stylami.
Zauważ, że .nav-tabs
klasa wymaga .nav
klasy 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>
Weź ten sam kod HTML, ale .nav-pills
zamiast 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>
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>
W przypadku dowolnego komponentu nawigacyjnego (kart lub pigułek) dodaj .disabled
szare linki i brak efektów najechania .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Dodaj rozwijane menu z trochę dodatkowym kodem HTML i rozwijaną wtyczką JavaScript .
<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>
<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>
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>
Zastąp markę paska nawigacyjnego własnym obrazem, zamieniając tekst na <img>
. Ponieważ .navbar-brand
ma 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>
Umieść zawartość formularza wewnątrz, .navbar-form
aby 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-form
udostępnia większość swojego kodu .form-inline
przez 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>
Dodaj .navbar-btn
klasę 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>
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>
Dla osób używających standardowych łączy, które nie znajdują się w zwykłym komponencie nawigacyjnym paska nawigacyjnego, użyj .navbar-link
klasy, 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>
Dopasuj łącza nawigacyjne, formularze, przyciski lub tekst za pomocą klas narzędziowych .navbar-left
lub . .navbar-right
Obie 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-left
i .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ń.
Dodaj .navbar-fixed-top
i dołącz .container
lub .container-fluid
do treści środkowej i panelu nawigacyjnego.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Dodaj .navbar-fixed-bottom
i dołącz .container
lub .container-fluid
do treści środkowej i panelu nawigacyjnego.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Utwórz pasek nawigacyjny o pełnej szerokości, który przewija się wraz ze stroną, dodając .navbar-static-top
i dołączając .container
lub .container-fluid
do ś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>
Zmodyfikuj wygląd paska nawigacyjnego, dodając .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Wskaż lokalizację bieżącej strony w hierarchii nawigacyjnej.
Separatory są automatycznie dodawane w CSS za pomocą :before
i content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Podaj linki do stronicowania swojej witryny lub aplikacji za pomocą wielostronicowego komponentu stronicowania lub prostszej alternatywy dla stronicowania .
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>
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"
.
Linki można dostosować do różnych okoliczności. Używaj .disabled
do linków, których nie można kliknąć, oraz .active
do 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>
Masz ochotę na większą lub mniejszą paginację? Dodaj .pagination-lg
lub .pagination-sm
dla 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>
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.
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>
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>
Linki do stronicowania używają również ogólnej .disabled
klasy 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>
<h3>Example heading <span class="label label-default">New</span></h3>
Dodaj dowolną z niżej wymienionych klas modyfikatorów, aby zmienić wygląd etykiety.
<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>
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-block
element (np. ikonę). Sposobem na obejście tego jest ustawienie display: inline-block;
. Aby zapoznać się z kontekstem i przykładem, zobacz #13219 .
Ł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>
Gdy nie ma nowych lub nieprzeczytanych elementów, odznaki po prostu się zwiną (za pomocą :empty
selektora CSS), pod warunkiem, że nie ma w nich żadnej treści.
Odznaki nie zwijają się samoczynnie w Internet Explorerze 8, ponieważ brakuje w nim obsługi :empty
selektora.
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>
Lekki, elastyczny komponent, który może opcjonalnie rozszerzyć cały obszar roboczy, aby zaprezentować kluczową zawartość w Twojej witrynie.
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 .container
s i zamiast tego dodaj .container
wewnątrz.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Prosta powłoka h1
do odpowiedniego rozmieszczania i segmentowania sekcji treści na stronie. Może wykorzystywać h1
domyślny small
element , jak również większość innych komponentów (z dodatkowymi stylami).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
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 .
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>
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>
Dostarczaj kontekstowe komunikaty zwrotne dotyczące typowych działań użytkownika za pomocą kilku dostępnych i elastycznych komunikatów ostrzegawczych.
Zawijaj dowolny tekst i opcjonalny przycisk odrzucenia .alert
oraz jedną z czterech klas kontekstowych (np. .alert-success
) dla podstawowych komunikatów ostrzegawczych.
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.
<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>
Buduj na podstawie dowolnego alertu, dodając opcjonalny .alert-dismissible
i zamykający przycisk.
Aby uzyskać w pełni funkcjonalne, możliwe do odrzucenia alerty, musisz użyć wtyczki alertów JavaScript .
<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>
Upewnij się, że używasz <button>
elementu z data-dismiss="alert"
atrybutem data.
Użyj .alert-link
klasy narzędziowej, aby szybko dostarczyć pasujące kolorowe linki w dowolnym alercie.
<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>
Dostarczaj aktualne informacje zwrotne na temat postępu przepływu pracy lub akcji za pomocą prostych, ale elastycznych pasków postępu.
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.
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ć style
atrybutó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.
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>
Usuń klasę <span>
with .sr-only
z 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-width
do 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>
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>
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>
Dodaj .active
do, .progress-bar-striped
aby 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>
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>
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.
Media domyślne wyświetlają obiekt multimedialny (obrazy, wideo, audio) po lewej lub prawej stronie bloku treści.
<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-left
i .pull-right
ró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-left
i .media-right
, z wyjątkiem tego, że .media-right
powinny być umieszczone po .media-body
znaku w html.
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.
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.
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.
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>
Z odrobiną dodatkowego znacznika możesz użyć listy mediów wewnątrz (przydatne w wątkach komentarzy lub listach artykułó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>
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ą.
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.
<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>
Dodaj komponent odznaki do dowolnego elementu grupy listy, a zostanie on automatycznie umieszczony po prawej stronie.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
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 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 .btn
tutaj 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>
Dodaj .disabled
do a, .list-group-item
aby 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>
Użyj klas kontekstowych do stylizacji elementów listy, domyślnych lub połączonych. Obejmuje również .active
stan.
<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>
Dodaj prawie dowolny kod HTML w obrębie, nawet dla połączonych grup list, takich jak ta poniżej.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
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>
Chociaż nie zawsze jest to konieczne, czasami trzeba umieścić DOM w pudełku. W takich sytuacjach wypróbuj komponent panelu.
Domyślnie wszystko, co .panel
robi, to zastosowanie podstawowego obramowania i dopełnienia, aby pomieścić pewną zawartość.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Łatwo dodaj kontener nagłówków do swojego panelu za pomocą .panel-heading
. Możesz również dołączyć dowolny <h1>
- <h6>
z .panel-title
klasą, 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
.
<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>
Zawijaj przyciski lub tekst dodatkowy 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.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Podobnie jak inne komponenty, możesz łatwo uczynić panel bardziej znaczącym w określonym kontekście, dodając dowolne kontekstowe klasy stanu.
<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>
Dodaj dowolne nieobramowane .table
w panelu, aby uzyskać jednolity projekt. Jeśli występuje .panel-body
, dodajemy dodatkowe obramowanie na górze tabeli w celu oddzielenia.
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.
# | 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>
Łatwo dołączaj grupy list o pełnej szerokości w dowolnym 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.
<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>
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-item
gdy 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>
Użyj studni jako prostego efektu na elemencie, aby nadać mu efekt wstawki.
<div class="well">...</div>
Kontroluj dopełnienie i zaokrąglone rogi za pomocą dwóch opcjonalnych klas modyfikatorów.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>