składniki

W Bootstrap wbudowane są dziesiątki komponentów wielokrotnego użytku, które zapewniają nawigację, alerty, popovery i wiele więcej.

Grupy przycisków

Użyj grup przycisków, aby połączyć wiele przycisków w jeden złożony komponent. Zbuduj je z serii <a>lub <button>elementów.

Możesz także łączyć zestawy <div class="btn-group">w <div class="btn-toolbar">bardziej złożone projekty.

Przykładowy znacznik

Oto jak HTML wygląda dla standardowej grupy przycisków zbudowanej z przycisków tagów kotwicy:

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Oraz z paskiem narzędzi dla wielu grup:

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Smaki checkboxa i radia

Grupy przycisków mogą również funkcjonować jako radia, w których aktywny może być tylko jeden przycisk, lub pola wyboru, w których może być aktywna dowolna liczba przycisków. Zobacz w tym celu dokumentację JavaScript .

Pobierz javascript »

Heads-up

CSS dla grup przycisków znajduje się w osobnym pliku button-groups.less.

Przyciski rozwijane

Użyj dowolnego przycisku, aby uruchomić menu rozwijane, umieszczając je w obrębie .btn-groupi podając odpowiednie znaczniki menu.

Przykładowy znacznik

Podobnie jak w przypadku grupy przycisków, nasz znacznik wykorzystuje zwykłe znaczniki przycisków, ale z kilkoma dodatkami w celu dopracowania stylu i obsługi wtyczki jQuery w programie Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#"> >   
    Akcja
    <span class = "karetka" ></span> 
  </a>
  <ul class = "menu rozwijane" > 
    <!-- linki do menu rozwijanego -->
  </ul>
</div>

Podziel rozwijane przyciski

Bazując na stylach grup przycisków i znacznikach, możemy łatwo utworzyć przycisk dzielony. Przyciski dzielone mają standardową akcję po lewej stronie i rozwijany przełącznik po prawej z linkami kontekstowymi.

Przykładowy znacznik

Rozwijamy normalne menu rozwijane przycisków, aby zapewnić drugą akcję przycisku, która działa jako osobny wyzwalacz listy rozwijanej.

<div class = "btn-group" > 
  <a class = "btn" href = "#"> Akcja </a> _  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#"> >   
    <span class = "karetka" ></span> 
  </a>
  <ul class = "menu rozwijane" > 
    <!-- linki do menu rozwijanego -->
  </ul>
</div>

Lekkie wartości domyślne Ten sam znacznik, różne klasy

Potężna klasa podstawowa

Wszystkie komponenty nawigacji tutaj — karty, pigułki i listy — mają te same podstawowe oznaczenia i style w całej .navklasie.

Dlaczego tabletki i tabletki

Zakładki i pigułki w Bootstrap są zbudowane na bazie <ul>linków z tym samym rdzeniem HTML. Przełączaj się między tabletkami lub tabletkami tylko z klasą.

Obie opcje doskonale nadają się do podsekcji treści lub poruszania się między stronami z pokrewną treścią.

Podstawowe zakładki

Weź regularne <ul>linki i dodaj .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li klasa = "aktywny" > 
    <a href = "#"> Strona główna </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Podstawowe pigułki

Weź ten sam kod HTML, ale .nav-pillszamiast tego użyj:

<ul class = „pigułki nawigacyjne” > 
  <li klasa = "aktywny" > 
    <a href = "#"> Strona główna </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Możliwość układania w stos Ułóż tabletki lub pigułki w pionie

Jak je układać?

Ponieważ zakładki i pigułki są domyślnie poziome, wystarczy dodać drugą klasę, .nav-stacked, aby wyglądały na ustawione pionowo.

Ułożone zakładki

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Ułożone pigułki

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Menu rozwijane Zaawansowane komponenty nawigacyjne

Łatwe bogate menu

Rozwijane menu w zakładkach Bootstrap i pigułkach są bardzo proste i wymagają tylko trochę dodatkowego kodu HTML i lekkiej wtyczki jQuery.

Udaj się na stronę JavaScript, aby przeczytać dokumentację dotyczącą inicjowania list rozwijanych w Bootstrap.

Karty z listami rozwijanymi

<ul class = "nav nav-tabs" > 
  <li class = "menu rozwijane" > 
    <a class = "dropdown-toggle" 
       przełącznik danych = "rozwijane"
       href = "#" >
        Upuścić
        <b klasa = "karetka" ></b> 
      </a>
    <ul class = "menu rozwijane" > 
      <!-- linki -->
    </ul>
  </li>
</ul>

Pigułki z listami rozwijanymi

<ul class = „pigułki nawigacyjne” > 
  <li class = "menu rozwijane" > 
    <a class = "dropdown-toggle" 
       przełącznik danych = "rozwijane"
       href = "#" >
        Upuścić
        <b klasa = "karetka" ></b> 
      </a>
    <ul class = "menu rozwijane" > 
      <!-- linki -->
    </ul>
  </li>
</ul>

Listy nawigacyjne Twórz proste układy nawigacyjne, idealne dla pasków bocznych

Nawigacja w stylu aplikacji

Listy nawigacyjne zapewniają prosty i łatwy sposób tworzenia grup łączy nawigacyjnych z opcjonalnymi nagłówkami. Najlepiej używać ich na paskach bocznych, takich jak Finder w OS X.

Strukturalnie opierają się na tych samych podstawowych stylach nawigacji, co karty i pigułki, więc ich użycie i dostosowywanie są proste.

Z ikonami

Listy nawigacyjne są również łatwe do wyposażenia w ikony. Dodaj odpowiedni <i>tag z klasą i gotowe.

Przykładowa lista nawigacyjna

Zrób listę linków i dodaj class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Nagłówek listy
  </li>
  <li klasa = "aktywny" > 
    <a href = "#"> Strona główna </a> 
  </li>
  <li>
    <a href = "#"> Biblioteka </a> _ 
  </li>
  ...
</ul>

Przykład z ikonami

Ten sam przykład, ale z <i>tagami dla ikon.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = „ikona-książka” ></i> 
      Biblioteka
    </a>
  </li>
  ...
</ul>

Tabbable nav Ożyw karty za pomocą javascript

Co jest zawarte

Ożyw swoje karty za pomocą prostej wtyczki do przełączania się między treściami za pomocą kart. Bootstrap integruje zakładki z zakładkami w czterech stylach: górny (domyślny), prawy, dolny i lewy.

Zmiana między nimi jest łatwa i wymaga jedynie niewielkiej zmiany znaczników.

Przykład tabelaryczny

Aby zmienić tabulatory na tabulatory, umieść je .nav-tabsw innym div z class .tabbable.

Jestem w Sekcji 1.

Cześć, jestem w sekcji 2.

Co tam dziewczyno, to jest sekcja 3.

Niestandardowa wtyczka jQuery

Wszystkie zakładki z tabelami są zasilane przez naszą lekką wtyczkę jQuery. Przeczytaj więcej o tym, jak ożywić karty z tabulatorami na stronie z dokumentami javascript.

Pobierz javascript →

Prosty znacznik

Korzystanie z zakładek z zakładkami wymaga zawijania div, zestawu zakładek i zestawu okienek zawartości z zakładkami.

<div class = "tabable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Sekcja 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab"> Sekcja 2 </a></li >  
  </ul>
  <div class = "zawartość karty" > 
    <div class = „aktywne okienko kart” id = „1” >  
      <p> Jestem w sekcji 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Cześć, jestem w sekcji 2. </p>
    </div>
  </div>
</div>

Tablicowanie w dowolnym kierunku

Zakładki na dole

Odwróć kolejność kodu HTML i dodaj klasę, aby umieścić karty na dole.

Jestem w Sekcji A.

Cześć, jestem w Sekcji B.

Co tam dziewczyno, to jest sekcja C.

<div class = "tabable tabs-below" > 
  <div class = "zawartość karty" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Zakładki po lewej stronie

Zamień zajęcia, aby umieścić karty po lewej stronie.

Jestem w Sekcji A.

Cześć, jestem w Sekcji B.

Co tam dziewczyno, to jest sekcja C.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "zawartość karty" > 
    ...
  </div>
</div>

Zakładki po prawej stronie

Zamień zajęcia, aby umieścić karty po prawej stronie.

Jestem w Sekcji A.

Cześć, jestem w Sekcji B.

Co tam dziewczyno, to jest sekcja C.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "zawartość karty" > 
    ...
  </div>
</div>

Przykład statycznego paska nawigacyjnego

Przykład statycznego (nie przymocowanego do góry) paska nawigacyjnego z nazwą projektu, nawigacją i formularzem wyszukiwania.

Rusztowanie Navbar

Pasek nawigacyjny wymaga tylko kilku elementów div, aby dobrze ustrukturyzować go do wyświetlania statycznego lub stałego.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "kontener" > 
      ...
    </div>
  </div>
</div>

Aby pasek nawigacyjny był przymocowany do górnej części rzutni, dodaj .navbar-fixed-topdo najbardziej zewnętrznego elementu div, .navbar. W swoim CSS musisz również uwzględnić nakładanie się, które powoduje, dodając padding-top: 40px;do swojego <body>.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Nazwa handlowa

Prosty link do pokazania nazwy marki lub projektu wymaga jedynie znacznika kotwicy.

<a class = "marka" href = "#" >  
  Nazwa Projektu
</a>

Formularz wyszukiwania

Formularze wyszukiwania otrzymują niestandardowe style na pasku nawigacyjnym z .navbar-searchklasą. Uwzględnij .pull-leftlub .pull-rightna, formaby go wyrównać.

<form class = "navbar-search pull-left" > 
  <input type = „text” class = „search-query” symbol zastępczy = „Szukaj” >   
</form>

Opcjonalna odmiana responsywna

W zależności od ilości treści na pasku górnym możesz chcieć zaimplementować opcje responsywne. Aby to zrobić, zapakuj zawartość nawigacji w zawierający div, .nav-collapse.collapsei dodaj przycisk przełączania paska nawigacyjnego, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "kontener" > 
 
      <!-- .btn-navbar jest używany jako przełącznik dla zawartości zwiniętego paska nawigacyjnego -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse">   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Pamiętaj, aby pozostawić markę tam, jeśli chcesz, aby była wyświetlana -->
      <a class = "brand" href = "#"> Nazwa projektu </a>  
 
      <!-- Wszystko, co chcesz ukryć w rozdzielczości 940 pikseli lub mniejszej, umieść tutaj -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form itp -->
      </div>
 
    </div>
  </div>
</div>

Heads-up! Responsywny pasek nawigacyjny wymaga wtyczki zwijania .

Łącza nawigacyjne

Elementy nawigacji można łatwo dodawać za pomocą nieuporządkowanych list.

<ul class = "nav" > 
  <li klasa = "aktywny" > 
    <a href = "#"> Strona główna </a> 
  </li>
  <li><a href = "#"> Link </a> </li> 
  <li><a href = "#"> Link </a> </li> 
</ul>

Dodawanie list rozwijanych

Dodawanie list rozwijanych do nawigacji jest bardzo proste, ale wymaga użycia naszej wtyczki javascript .

<ul class = "nav" > 
  <li class = "menu rozwijane" > 
    <a href = "#" 
          class = "dropdown-toggle"
          przełącznik danych = "rozwijane" >
          Rachunek
          <b klasa = "karetka" ></b> 
    </a>
    <ul class = "menu rozwijane" > 
      ...
    </ul>
  </li>
</ul>

Pobierz javascript →

Dlaczego ich używać

Nawigacja Breadcrumb służy do pokazywania użytkownikom, gdzie się znajdują w aplikacji lub witrynie, ale nie do podstawowej nawigacji. Utrzymuj ich rzadkie i zwięzłe użycie, aby były najbardziej efektywne.

Przykłady

Pojedynczy przykład pokazany, ponieważ może być wyświetlany na wielu stronach.

Narzut

HTML to standardowa nieuporządkowana lista z linkami.

<ul class = "bułka tarta" > 
  <li>
    <a href = "#"> Strona główna </a> < span class = "dzielnik" > / </span>   
  </li>
  <li>
    <a href = "#"> Biblioteka </a> < span class = "dzielnik" > / </span>   
  </li>
  <li klasa = "aktywny" > 
    <a href = "#"> Dane </a> _ 
  </li>
</ul>

Paginacja wielostronna

Kiedy użyć

Niezwykle uproszczona i minimalistycznie stylizowana 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.

Stanowe linki do stron

Linki można dostosowywać i działają w wielu okolicznościach z odpowiednią klasą. .disableddla linków, których nie można kliknąć i .activedla bieżącej strony.

Elastyczne wyrównanie

Dodaj jedną z dwóch opcjonalnych klas, aby zmienić wyrównanie łączy stronicowania: .pagination-centeredi .pagination-right.

Przykłady

Domyślny składnik stronicowania jest elastyczny i działa w wielu odmianach.

Narzut

Zawinięty w <div>, paginacja to tylko <ul>.

<div class = "paginacja" > 
  <ul>
    <li><a href = "#"> Poprzedni </a> </li> 
    <li klasa = "aktywny" > 
      <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>

Pager Szybki poprzedni i następny link

O pagerze

Komponent pagera to zestaw linków do prostych implementacji paginacji z lekkimi znacznikami i jeszcze lżejszymi stylami. Świetnie nadaje się do prostych witryn, takich jak blogi czy czasopisma.

Przykład domyślny

Domyślnie strony centrują linki.

<ul class = „pager” > 
  <li>
    <a href = "#"> Poprzedni </a> _ 
  </li>
  <li>
    <a href = "#"> Dalej </a> _ 
  </li>
</ul>

Wyrównane linki

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>

Etykiety	Narzut
Domyślna	`<span class="label">Default</span>`
Nowy	`<span class="label label-success">New</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>`

Domyślne miniatury

Domyślnie miniatury Bootstrap są zaprojektowane tak, aby prezentować połączone obrazy z minimalnym wymaganym znacznikiem.

Wysoce konfigurowalny

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.

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

Akcja Akcja

Dlaczego warto korzystać z miniatur

Miniatury (wcześniej .media-griddo 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.

Prosty, elastyczny znacznik

Znaczniki miniatur są proste — wymagana jest uldowolna liczba elementów. liJest również bardzo elastyczny, pozwalając na dowolny rodzaj treści z odrobiną większej ilości znaczników, aby zawinąć zawartość.

Używa rozmiarów kolumn siatki

Wreszcie, składnik miniatury wykorzystuje istniejące klasy systemu siatki — takie jak .span2lub .span3— do sterowania wymiarami miniatur.

Znacznik

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 klasa = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" 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 klasa = "span3" > 
    <div class = "miniaturka" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Etykieta miniatury </h5>
      <p> Podpis miniatury tutaj... </p>
    </div>
  </li>
  ...
</ul>

Więcej przykładów

Poznaj wszystkie opcje dzięki różnym dostępnym klasom siatki. Możesz także mieszać i dopasowywać różne rozmiary.

Lekkie ustawienia domyślne

Przepisana klasa bazowa

W Bootstrap 2 uprościliśmy klasę bazową: .alertzamiast .alert-message. Zmniejszyliśmy również minimalny wymagany znacznik — <p>domyślnie nie jest wymagane, tylko zewnętrzna <div>.

Pojedynczy komunikat ostrzegawczy

Aby zapewnić trwalszy składnik z mniejszą ilością kodu, usunęliśmy wyróżniający się wygląd alertów blokowych, wiadomości z większym wypełnieniem i zazwyczaj większą ilością tekstu. Klasa również uległa zmianie na .alert-block.

Świetnie współpracuje z javascript

Bootstrap zawiera świetną wtyczkę jQuery, która obsługuje komunikaty ostrzegawcze, dzięki czemu odrzucanie ich jest szybkie i łatwe.

Pobierz wtyczkę »

Przykładowe alerty

Zapakuj swoją wiadomość i opcjonalną ikonę zamykania w div z prostą klasą.

× Ostrzeżenie! Najlepiej sprawdź sam, nie wyglądasz zbyt dobrze.

<div class = "alert" > 
  <a class = „zamknij” > × </a> 
  <strong> Ostrzeżenie! </strong> Najlepiej sprawdź sam, nie wyglądasz zbyt dobrze.
</div>

Z łatwością rozszerz standardowy komunikat ostrzegawczy o dwie opcjonalne klasy: .alert-blockdla większej liczby elementów sterujących dopełnieniem i tekstem oraz .alert-headingdla pasującego nagłówka.

Ostrzeżenie!

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" > 
  <a class = „zamknij” > × </a> 
  <h4 class = "alert-heading" > Ostrzeżenie! </h4> 
  Najlepiej sprawdź się, nie jesteś...
</div>

Alternatywy kontekstowe Dodaj opcjonalne klasy, aby zmienić konotację alertu

Błąd lub niebezpieczeństwo

× Och, pstryk! Zmień kilka rzeczy i spróbuj przesłać ponownie.

<div class = "alert alert-error" > 
  ...
</div>

Powodzenie

× Bardzo dobrze! Pomyślnie przeczytałeś ten ważny komunikat ostrzegawczy.

<div class = "alert alert-success" > 
  ...
</div>

Informacja

× Heads-up! Ten alert wymaga Twojej uwagi, ale nie jest bardzo ważny.

<div class = "alert alert-info" > 
  ...
</div>

Przykłady i znaczniki

Podstawowy

Domyślny pasek postępu z pionowym gradientem.

<div class = "postęp" > 
  <div klasa = "bar" 
       styl = " szerokość : 60 %; " ></div> 
</div>

W paski

Używa gradientu, aby uzyskać efekt pasków.

<div class = "informacje o postępach" 
     paski postępu" >
  <div klasa = "bar" 
       styl = " szerokość : 20 %; " ></div> 
</div>

Ożywiony

Bierze przykład w paski i animuje go.

<div class = "postęp postępu-niebezpieczeństwo 
     aktywne paski postępu" >
  <div klasa = "bar" 
       styl = " szerokość : 40 %; " ></div> 
</div>

Opcje i obsługa przeglądarek

Dodatkowe kolory

Paski postępu wykorzystują niektóre z tych samych nazw klas jako przyciski i alerty o podobnym stylu.

.progress-info
.progress-success
.progress-danger

Alternatywnie możesz dostosować pliki LESS i rolować własne kolory i rozmiary.

Zachowanie

Paski postępu używają przejść CSS3, więc jeśli dynamicznie dostosujesz szerokość za pomocą javascript, będzie ona płynnie zmieniać rozmiar.

Jeśli użyjesz .activeklasy, twoje .progress-stripedpaski postępu będą animować paski od lewej do prawej.

Obsługa przeglądarki

Paski postępu wykorzystują gradienty, przejścia i animacje CSS3, aby osiągnąć wszystkie swoje efekty. Te funkcje nie są obsługiwane w IE7-8 i starszych wersjach Firefoksa.

Opera nie obsługuje obecnie animacji.

Wells

Użyj studni jako prostego efektu na elemencie, aby nadać mu efekt wstawki.

Spójrz, jestem w studni!

<div class = "dobrze" > 
  ...
</div>

Odznaki

Użyj plakietki na elemencie, aby uzyskać nieprzeczytaną liczbę lub jako prosty wskaźnik.

<span class = "znaczek" > 3 </div>

Zamknij ikonę

Użyj ogólnej ikony zamykania, aby odrzucić treści, takie jak modalne i alerty.

<a class = "zamknij" > × </a>

Grupy przycisków Połącz przyciski, aby uzyskać więcej funkcji podobnych do paska narzędzi

Grupy przycisków

Przykładowy znacznik

Smaki checkboxa i radia

Heads-up

Rozwijane menu przycisków Rozwijane menu kontekstowe zbudowane na grupach przycisków

Przyciski rozwijane

Przykładowy znacznik

Podziel rozwijane przyciski

Przykładowy znacznik

Nawigacja , karty i pigułki Wysoce konfigurowalna nawigacja w stylu listy

Lekkie wartości domyślne Ten sam znacznik, różne klasy

Potężna klasa podstawowa

Dlaczego tabletki i tabletki

Podstawowe zakładki

Podstawowe pigułki

Możliwość układania w stos Ułóż tabletki lub pigułki w pionie

Jak je układać?

Ułożone zakładki

Ułożone pigułki

Menu rozwijane Zaawansowane komponenty nawigacyjne

Łatwe bogate menu

Karty z listami rozwijanymi

Pigułki z listami rozwijanymi

Listy nawigacyjne Twórz proste układy nawigacyjne, idealne dla pasków bocznych

Nawigacja w stylu aplikacji

Z ikonami

Przykładowa lista nawigacyjna

Przykład z ikonami

Tabbable nav Ożyw karty za pomocą javascript

Co jest zawarte

Przykład tabelaryczny

Niestandardowa wtyczka jQuery

Prosty znacznik

Tablicowanie w dowolnym kierunku

Zakładki na dole

Zakładki po lewej stronie

Zakładki po prawej stronie

Pasek nawigacyjny

Przykład statycznego paska nawigacyjnego

Rusztowanie Navbar

Nazwa handlowa

Formularz wyszukiwania

Opcjonalna odmiana responsywna

Łącza nawigacyjne

Dodawanie list rozwijanych

Bułka tarta

Dlaczego ich używać

Przykłady

Narzut

Paginacja Dwie opcje stronicowania treści

Paginacja wielostronna

Kiedy użyć

Stanowe linki do stron

Elastyczne wyrównanie

Przykłady

Narzut

Pager Szybki poprzedni i następny link

O pagerze

Przykład domyślny

Wyrównane linki

Etykiety w tekście Etykieta i tekst adnotacji

Miniatury Siatki obrazów, filmów, tekstu i nie tylko

Domyślne miniatury

Wysoce konfigurowalny

Etykieta miniatury

Etykieta miniatury

Dlaczego warto korzystać z miniatur

Prosty, elastyczny znacznik

Używa rozmiarów kolumn siatki

Znacznik

Więcej przykładów

Alerty Style komunikatów o sukcesie, ostrzeżeniach i błędach

Lekkie ustawienia domyślne

Przepisana klasa bazowa

Pojedynczy komunikat ostrzegawczy

Świetnie współpracuje z javascript

Przykładowe alerty

Ostrzeżenie!

Alternatywy kontekstowe Dodaj opcjonalne klasy, aby zmienić konotację alertu