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.

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>

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.

<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>

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 `role`i 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>

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.

Lewy Środek Prawidłowy

Lewy Środek

<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>

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>

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 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.

Korzystanie z navs dla paneli kart wymaga wtyczki JavaScript tabs

W przypadku kart z obszarami z zakładkami musisz użyć wtyczki JavaScript tabs . Znaczniki będą również wymagały roleatrybutów dodatkowych i ARIA – zobacz przykładowe znaczniki wtyczki, aby uzyskać więcej informacji.

Spraw, aby navs były używane jako nawigacja dostępna

Jeśli używasz navs do zapewnienia paska nawigacyjnego, pamiętaj, aby dodać role="navigation"do najbardziej logicznego kontenera nadrzędnego <ul>lub owinąć <nav>element wokół całej nawigacji. Nie dodawaj roli do <ul>samej siebie, ponieważ uniemożliwiłoby to ogłaszanie jej jako rzeczywistej listy przez technologie wspomagające.

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.

Safari i responsywne, uzasadnione navs

Od wersji 9.1.2 Safari wykazuje błąd, w którym zmiana rozmiaru przeglądarki w poziomie powoduje błędy renderowania w wyjustowanej nawigacji, które są usuwane po odświeżeniu. Ten błąd jest również pokazany w uzasadnionym przykładzie nawigacji .

<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 .

Brak wpływu na funkcjonalność linku

Ta klasa zmieni tylko <a>wygląd, a nie jego funkcjonalność. Użyj niestandardowego JavaScript, aby wyłączyć linki tutaj.

<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>

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.

Przepełniona treść

Ponieważ Bootstrap nie wie, ile miejsca potrzebuje zawartość na pasku nawigacyjnym, możesz napotkać problemy z zawijaniem zawartości do drugiego rzędu. Aby rozwiązać ten problem, możesz:

Zmniejsz ilość lub szerokość elementów paska nawigacyjnego.
Ukryj określone elementy paska nawigacyjnego w określonych rozmiarach ekranu, korzystając z responsywnych klas narzędziowych .
Zmień punkt, w którym pasek nawigacyjny przełącza się między trybem zwiniętym a poziomym. Dostosuj @grid-float-breakpointzmienną lub dodaj własne zapytanie o media.

Zmienianie punktu przerwania zwiniętego mobilnego paska nawigacyjnego

Pasek nawigacyjny zwija się do pionowego widoku mobilnego, gdy widoczny obszar jest węższy niż @grid-float-breakpoint, i rozwija się do poziomego widoku niemobilnego, gdy widoczny obszar ma co najmniej @grid-float-breakpointszerokość. Dostosuj tę zmienną w źródle Less, aby kontrolować zwijanie/rozwijanie paska nawigacyjnego. Wartość domyślna to 768px(najmniejszy ekran „mały” lub „tablet”).

<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-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>

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>

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 formularzy wbudowanych możesz ukryć etykiety za pomocą .sr-onlyklasy. Istnieją dalsze alternatywne metody umieszczania etykiety dla technologii wspomagających, takie jak aria-labelatrybut lub aria-labelledby. titleJeśli żaden z nich nie występuje, czytniki ekranu mogą skorzystać z placeholderatrybutu, jeśli jest on obecny, ale należy pamiętać, że nie zaleca się używania placeholdergo jako zamiennika dla innych metod oznaczania.

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>

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-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>

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ń.

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>

Wymagana wyściółka ciała

Stały pasek nawigacyjny będzie nakładał się na inne treści, chyba że dodasz paddinggo na górze <body>. Wypróbuj własne wartości lub skorzystaj z naszego fragmentu poniżej. Wskazówka: domyślnie pasek nawigacyjny ma wysokość 50 pikseli.

body { padding-top: 70px; }

Upewnij się, że umieściłeś to po rdzeniu Bootstrap CSS.

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>

Wymagana wyściółka ciała

Stały pasek nawigacyjny będzie nakładał się na inne treści, chyba że dodasz paddinggo na dole <body>. Wypróbuj własne wartości lub skorzystaj z naszego fragmentu poniżej. Wskazówka: domyślnie pasek nawigacyjny ma wysokość 50 pikseli.

body { padding-bottom: 70px; }

Upewnij się, że umieściłeś to po rdzeniu Bootstrap CSS.

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>

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">&laquo;</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">&raquo;</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">&laquo;</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">&laquo;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Przykład

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 .

Łatwo wyróżnij nowe lub nieprzeczytane elementy, dodając <span class="badge">do łączy, nawigację Bootstrap i nie tylko.

W pudełku42

<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>

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.

Ucz się więcej

<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>

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).

<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 .

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.

Etykieta miniatury

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Przycisk Przycisk

Etykieta miniatury

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Przycisk Przycisk

Etykieta miniatury

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Przycisk Przycisk

<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.

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">&times;</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>

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.

60%

<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.

0%

2%

<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>

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>

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.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Przedsionek w erosie

<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.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Przedsionek w erosie

<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

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>

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 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.

Zawartość panelu

Stopka 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>

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>

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>

składniki

Glify

Dostępne glify

Jak używać

Nie mieszać z innymi składnikami

Tylko do użytku na pustych elementach

Zmiana lokalizacji czcionki ikony

Dostępne ikony

Przykłady

Menu rozwijane

Przykład

Wyrównanie

Może wymagać dodatkowego pozycjonowania

Wycofane .pull-rightwyrównanie

Nagłówki

Rozdzielacz

Wyłączone pozycje menu

Grupy przycisków

Podpowiedzi i okienka wyskakujące w grupach przycisków wymagają specjalnych ustawień

Upewnij się, że jest poprawny rolei podaj etykietę

Podstawowy przykład

Pasek narzędzi przycisków

Rozmiary

Zagnieżdżanie

Odmiana pionowa

Wyjustowane grupy przycisków

Obsługa granic

IE8 i granice

Z <a>elementami

Linki działające jak przyciski

Z <button>elementami

Przyciski rozwijane

Zależność wtyczki

Menu rozwijane z jednym przyciskiem

Podziel rozwijane przyciski

Rozmiary

Odmiana dropup

Grupy wejściowe

<input>Tylko teksty

Podpowiedzi i okienka wyskakujące w grupach wejściowych wymagają specjalnych ustawień

Nie mieszać z innymi składnikami

Zawsze dodawaj etykiety

Podstawowy przykład

Rozmiary

Pola wyboru i dodatki radiowe

Dodatki do przycisków

Przyciski z listami rozwijanymi

Przyciski segmentowe

Wiele przycisków

Navs

Korzystanie z navs dla paneli kart wymaga wtyczki JavaScript tabs

Spraw, aby navs były używane jako nawigacja dostępna

Karty

Pigułki

Usprawiedliwiony

Safari i responsywne, uzasadnione navs

Wyłączone linki

Brak wpływu na funkcjonalność linku

Korzystanie z menu rozwijanych

Karty z listami rozwijanymi

Pigułki z listami rozwijanymi

Pasek nawigacyjny

Domyślny pasek nawigacyjny

Przepełniona treść

Wymaga wtyczki JavaScript

Zmienianie punktu przerwania zwiniętego mobilnego paska nawigacyjnego

Udostępnij paski nawigacyjne

Wizerunek marki

Formularze

Zastrzeżenia dotyczące urządzeń mobilnych

Zawsze dodawaj etykiety

guziki

Użycie specyficzne dla kontekstu

Tekst

Łącza nienawigacyjne

Wyrównanie komponentów

Prawidłowe wyrównanie wielu elementów

Naprawiono do góry

Wymagana wyściółka ciała

Naprawiono do dołu

Wycofane `.pull-right`wyrównanie

Upewnij się, że jest poprawny `role`i podaj etykietę

Z `<a>`elementami

Z `<button>`elementami

`<input>`Tylko teksty