Dziesiątki komponentów wielokrotnego użytku stworzonych w celu zapewnienia nawigacji, alertów, okienek popover i nie tylko.
Przełączalne menu kontekstowe do wyświetlania list linków. Interaktywny dzięki rozwijanej wtyczce javascript .
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#"> Działanie </a></li >
- <li><a tabindex = "-1" href = "#"> Inne działanie </a></li >
- <li><a tabindex = "-1" href = "#"> Coś jeszcze tutaj </a></li >
- <li klasa = "dzielnik" ></li>
- <li><a tabindex = "-1" href = "#"> Oddzielny link </a></li >
- </ul>
Patrząc tylko na menu rozwijane, oto wymagany kod HTML. Musisz owinąć wyzwalacz listy rozwijanej i menu rozwijane w obrębie .dropdown
lub innym elemencie, który deklaruje position: relative;
. Następnie po prostu utwórz menu.
- <div class = "dropdown" >
- <!-- Link lub przycisk do przełączania listy rozwijanej -->
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#"> Działanie </a></li >
- <li><a tabindex = "-1" href = "#"> Inne działanie </a></li >
- <li><a tabindex = "-1" href = "#"> Coś jeszcze tutaj </a></li >
- <li klasa = "dzielnik" ></li>
- <li><a tabindex = "-1" href = "#"> Oddzielny link </a></li >
- </ul>
- </div>
Wyrównaj menu w prawo i dodaj dodatkowe poziomy menu rozwijanych.
Dodaj .pull-right
do .dropdown-menu
prawej wyrównaj menu rozwijane.
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
Dodaj dodatkowy poziom menu rozwijanych, pojawiających się po najechaniu kursorem, jak te w OS X, z kilkoma prostymi dodatkami znaczników. Dodaj .dropdown-submenu
do dowolnego li
w istniejącym menu rozwijanym, aby automatycznie stylizować.
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = "rozwijane podmenu" >
- <a tabindex = "-1" href = "#"> Więcej opcji </a>
- <ul class = "menu rozwijane" >
- ...
- </ul>
- </li>
- </ul>
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.
- <div class = "paginacja" >
- <ul>
- <li><a href = "#"> Poprzedni </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 = "#"> Dalej </a> </li>
- </ul>
- </div>
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.
- <div class = "paginacja" >
- <ul>
- <li class = "wyłączony" > <a href = "#"> Poprzedni </a></li>
- <li class = "aktywny" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
Dodaj jedną z dwóch opcjonalnych klas, aby zmienić wyrównanie łączy stronicowania: .pagination-centered
i .pagination-right
.
- <div class = "paginacja skoncentrowana na paginacji" >
- ...
- </div>
- <div class = "paginacja po prawej stronie" >
- ...
- </div>
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.
- <ul class = „pager” >
- <li><a href = "#"> Poprzedni </a> </li>
- <li><a href = "#"> Dalej </a> </li>
- </ul>
Alternatywnie możesz wyrównać każdy link do boków:
- <ul class = „pager” >
- <li klasa = "poprzednia" >
- <a href = "#" > ← Starsze </a>
- </li>
- <li klasa = "następny" >
- <a href = "#"> Nowsze → </a>
- </li>
- </ul>
Linki do stronicowania używają również ogólnej .disabled
klasy narzędziowej z paginacji.
- <ul class = „pager” >
- <li class = "poprzednio wyłączone" >
- <a href = "#" > ← Starsze </a>
- </li>
- ...
- </ul>
Etykiety | Narzut |
---|---|
Domyślna | <span class="label">Default</span> |
Powodzenie | <span class="label label-success">Success</span> |
Ostrzeżenie | <span class="label label-warning">Warning</span> |
Ważny | <span class="label label-important">Important</span> |
Informacje | <span class="label label-info">Info</span> |
Odwrotność | <span class="label label-inverse">Inverse</span> |
Nazwa | Przykład | Narzut |
---|---|---|
Domyślna | 1 | <span class="badge">1</span> |
Powodzenie | 2 | <span class="badge badge-success">2</span> |
Ostrzeżenie | 4 | <span class="badge badge-warning">4</span> |
Ważny | 6 | <span class="badge badge-important">6</span> |
Informacje | 8 | <span class="badge badge-info">8</span> |
Odwrotność | 10 | <span class="badge badge-inverse">10</span> |
Lekki, elastyczny komponent do prezentacji kluczowych treści w Twojej witrynie. Sprawdza się dobrze w witrynach o dużej zawartości marketingowej i treści.
Jest to prosta jednostka bohatera, prosty element w stylu jumbotronu, który zwraca szczególną uwagę na polecane treści lub informacje.
- <div class = "bohater-jednostka" >
- <h1> Nagłówek </h1>
- <p> Slogan </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- Ucz się więcej
- </a>
- </p>
- </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> Przykładowy nagłówek strony </h1>
- </div>
Domyślnie miniatury Bootstrap są zaprojektowane tak, aby prezentować połączone obrazy z minimalnym wymaganym znacznikiem.
Przy odrobinie dodatkowych znaczników można dodać do miniatur dowolnego rodzaju zawartość HTML, taką jak nagłówki, akapity lub przyciski.
Miniatury (wcześniej .media-grid
do wersji 1.4) świetnie nadają się do siatek zdjęć lub filmów, wyników wyszukiwania obrazów, produktów detalicznych, portfolio i wielu innych. Mogą to być linki lub treści statyczne.
Znaczniki miniatur są proste — wymagana jest ul
dowolna liczba elementów. li
Jest również bardzo elastyczny, pozwalając na dowolny rodzaj treści z odrobiną większej ilości znaczników, aby zawinąć zawartość.
Wreszcie, składnik miniatury wykorzystuje istniejące klasy systemu siatki — takie jak .span2
lub .span3
— do sterowania wymiarami miniatur.
Jak wspomniano wcześniej, wymagane znaczniki dla miniatur są lekkie i proste. Oto spojrzenie na domyślną konfigurację dla połączonych obrazów :
- <ul class = "miniaturki" >
- <li class = "span4" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
W przypadku niestandardowej zawartości HTML w miniaturach znaczniki nieznacznie się zmieniają. Aby zezwolić na zawartość na poziomie bloku w dowolnym miejscu, zamieniamy <a>
na coś <div>
takiego:
- <ul class = "miniaturki" >
- <li class = "span4" >
- <div class = "miniaturka" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> Etykieta miniatury </h3>
- <p> Podpis miniatury... </p>
- </div>
- </li>
- ...
- </ul>
Poznaj wszystkie opcje dzięki różnym dostępnym klasom siatki. Możesz także mieszać i dopasowywać różne rozmiary.
Zawiń dowolny tekst i opcjonalny przycisk odrzucenia, .alert
aby otrzymać podstawowy komunikat ostrzegawczy.
- <div class = "alert" >
- <button type = „button” class = „close” data-dismiss = „alert” > × </button>
- <strong> Ostrzeżenie! </strong> Najlepiej sprawdź sam, nie wyglądasz zbyt dobrze.
- </div>
Przeglądarki Mobile Safari i Mobile Opera, oprócz data-dismiss="alert"
atrybutu, wymagają href="#"
odrzucania alertów podczas używania <a>
tagu.
- <a href = "#" class = "zamknij" data-dismiss = "alert" > × </button>
Alternatywnie możesz użyć <button>
elementu z atrybutem data, co zdecydowaliśmy się zrobić dla naszych dokumentów. Korzystając z <button>
, musisz dołączyć type="button"
lub Twoje formularze mogą nie zostać przesłane.
- <button type = „button” class = „close” data-dismiss = „alert” > × </button>
Użyj wtyczki alerts jQuery do szybkiego i łatwego odrzucania alertów.
W przypadku dłuższych wiadomości zwiększ dopełnienie na górze i na dole opakowania alertu, dodając .alert-block
.
Najlepiej sprawdź sam, nie wyglądasz zbyt dobrze. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alert alert-block" >
- <button type = „button” class = „close” data-dismiss = „alert” > × </button>
- <h4> Ostrzeżenie! </h4>
- Najlepiej sprawdź się, nie jesteś...
- </div>
Dodaj opcjonalne klasy, aby zmienić konotację alertu.
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Domyślny pasek postępu z pionowym gradientem.
- <div class = "postęp" >
- <div class = "bar" style = " szerokość : 60 %; " ></div>
- </div>
Używa gradientu, aby uzyskać efekt pasków. Niedostępne w IE7-8.
- <div class = "progress progress-striped" >
- <div class = "bar" style = " szerokość : 20 %; " ></div>
- </div>
Dodaj .active
do, .progress-striped
aby animować paski od prawej do lewej. Niedostępne we wszystkich wersjach IE.
- <div class = "aktywny postęp z paskiem postępu" >
- <div class = "bar" style = " szerokość : 40 %; " ></div>
- </div>
Umieść wiele sztabek w tym samym .progress
, aby je ułożyć.
- <div class = "postęp" >
- <div class = "bar bar-success" style = " szerokość : 35 %; " ></div>
- <div class = "bar bar-warning" style = " width : 20 %; " ></div>
- <div class = "bar bar-niebezpieczeństwo" style = " szerokość : 10 %; " ></div>
- </div>
Paski postępu wykorzystują niektóre z tych samych klas przycisków i alertów, aby zapewnić spójne style.
- <div class = "informacje o postępach" >
- <div class = "bar" style = " szerokość : 20 % " ></div>
- </div>
- <div class = "postęp postęp-sukces" >
- <div class = "bar" style = " szerokość : 40 % " ></div>
- </div>
- <div class = "ostrzeżenie o postępie postępu" >
- <div class = "bar" style = " szerokość : 60 % " ></div>
- </div>
- <div class = "postęp-niebezpieczeństwo postępu" >
- <div class = "bar" style = " szerokość : 80 % " ></div>
- </div>
Podobnie jak w przypadku jednolitych kolorów, mamy zróżnicowane paski postępu.
- <div class = "progress progress-info progress-striped" >
- <div class = "bar" style = " szerokość : 20 % " ></div>
- </div>
- <div class = "progress progress-success Progress-striped" >
- <div class = "bar" style = " szerokość : 40 % " ></div>
- </div>
- <div class = "progress progress-warning progress-striped" >
- <div class = "bar" style = " szerokość : 60 % " ></div>
- </div>
- <div class = "postęp postęp-niebezpieczeństwo postęp-paski" >
- <div class = "bar" style = " szerokość : 80 % " ></div>
- </div>
Paski postępu wykorzystują gradienty, przejścia i animacje CSS3, aby osiągnąć wszystkie swoje efekty. Te funkcje nie są obsługiwane w IE7-9 lub starszych wersjach Firefoksa.
Wersje wcześniejsze niż Internet Explorer 10 i Opera 12 nie obsługują animacji.
Użyj studni jako prostego efektu na elemencie, aby nadać mu efekt wstawki.
- <div class = "dobrze" >
- ...
- </div>
Kontroluj dopełnienie i zaokrąglone rogi za pomocą dwóch opcjonalnych klas modyfikatorów.
- <div class = "dobrze dobrze-duży" >
- ...
- </div>
- <div class = "dobrze dobrze-mały" >
- ...
- </div>
Użyj ogólnej ikony zamykania, aby odrzucić treści, takie jak modalne i alerty.
- <button class = "zamknij" > × </button>
Urządzenia z iOS wymagają atrybutu href="#" dla zdarzeń kliknięcia, jeśli wolisz używać kotwicy.
- <a class = "close" href = "#" > × </a>
Proste, skoncentrowane klasy do drobnych poprawek w wyświetlaniu lub zachowaniu.
Przesuń element w lewo
- class = "pociągnij w lewo"
- . pociągnij - w lewo {
- pływak : lewy ;
- }
Unieś element w prawo
- class = "pociągnij w prawo"
- . pociągnij - w prawo {
- pływak : prawo ;
- }
Zmień kolor elementu na#999
- klasa = "wyciszony"
- . wyciszony {
- kolor : #999;
- }
Wyczyść float
na dowolnym elemencie
- klasa = "wyczyść"
- . poprawka {
- * powiększenie : 1 ;
- &: przed ,
- &: po {
- wyświetlacz : tabela ;
- zawartość : "" ;
- }
- &: po {
- jasne : oba ;
- }
- }