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.

Najlepsze praktyki

Zalecamy następujące wskazówki dotyczące korzystania z grup przycisków i pasków narzędzi:

Zawsze używaj tego samego elementu w jednej grupie przycisków <a>lub <button>.
Nie mieszaj przycisków o różnych kolorach w tej samej grupie przycisków.
Używaj ikon obok tekstu lub zamiast niego, ale w razie potrzeby pamiętaj o dołączeniu tekstu alternatywnego i tytułu.

Powiązane grupy przycisków z listami rozwijanymi (patrz poniżej) powinny być wywoływane osobno i zawsze zawierać karetkę rozwijaną, aby wskazać zamierzone zachowanie.

Przykład domyślny

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

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Przykład paska narzędzi

Połącz zestawy <div class="btn-group">w <div class="btn-toolbar">bardziej złożone komponenty.

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

Listy rozwijane w grupach przycisków

Heads-up! Przyciski z listami rozwijanymi muszą być pojedynczo opakowane we własne .btn-groupw .btn-toolbarcelu prawidłowego renderowania.

Przyciski rozwijane

Przegląd i przykłady

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>

Działa ze wszystkimi rozmiarami przycisków

Rozwijane przyciski działają w dowolnym rozmiarze. rozmiary przycisków to .btn-large, .btn-smalllub .btn-mini.

Wymaga javascript

Menu rozwijane przycisków wymagają do działania wtyczki rozwijanej Bootstrap .

W niektórych przypadkach — na przykład na urządzeniach mobilnych — menu rozwijane wychodzą poza widoczny obszar. Musisz rozwiązać wyrównanie ręcznie lub za pomocą niestandardowego javascript.

Podziel rozwijane przyciski

Przegląd i przykłady

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.

Rozmiary

Wykorzystaj dodatkową klasę przycisku .btn-mini, .btn-smalllub .btn-largedo zmiany rozmiaru.

<div class = "btn-group" > 
  ...
  <ul class = "menu rozwijane w prawo" > 
    <!-- linki do menu rozwijanego -->
  </ul>
</div>

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" > 
  <button class = "btn" > Akcja </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "karetka" ></span> 
  </button>
  <ul class = "menu rozwijane" > 
    <!-- linki do menu rozwijanego -->
  </ul>
</div>

Wyskakujące menu

Menu rozwijane można również przełączać od dołu do góry, dodając pojedynczą klasę do bezpośredniego elementu nadrzędnego .dropdown-menu. Odwróci kierunek .careti zmieni położenie samego menu, aby przejść od dołu do góry zamiast od góry do dołu.

<div class = "porzucanie grupy btn" > 
  <button class = "btn" > Porzucanie </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "karetka" ></span> 
  </button>
  <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.

Kiedy użyć

Karty i pigułki świetnie nadają się do sekcji treści lub przechodzenia między stronami z pokrewną treścią.

Wyrównanie komponentów

Aby wyrównać łącza nawigacyjne, użyj klas narzędziowych .pull-leftlub . .pull-rightObie klasy dodadzą pływak CSS w określonym kierunku.

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.

Przegrody poziome

Dodaj poziomy separator, tworząc pusty element listy z klasą .divider, na przykład:

<ul class = "nav nav-list" > 
  ...
  <li klasa = "dzielnik" ></li> 
  ...
</ul>

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>

Naprawiono pasek nawigacyjny

Przymocuj pasek nawigacyjny do góry lub dołu rzutni z dodatkową klasą na zewnętrznym div, .navbar.

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

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

Kiedy umieszczasz pasek nawigacyjny, pamiętaj, aby uwzględnić ukryty obszar pod spodem. Dodaj co najmniej 40 pikseli dodawania do <body>. Pamiętaj, aby dodać to po rdzeniu Bootstrap CSS i przed opcjonalnym responsywnym CSS.

Nazwa handlowa

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

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

Formularze na pasku nawigacyjnym

Aby prawidłowo wystylizować i umieścić formularz na pasku nawigacyjnym, dodaj odpowiednie klasy, jak pokazano poniżej. W przypadku formularza domyślnego dołącz .navbar-formi albo .pull-leftalbo , .pull-rightaby odpowiednio go wyrównać.

<form class = "navbar-form pull-left" > 
  < typ wejścia = „tekst” klasa = „span2” >  
</form>

Aby uzyskać bardziej dostosowany formularz wyszukiwania, dodaj .navbar-searchklasę, aby otrzymywać wyspecjalizowane style na pasku nawigacyjnym.

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

Możesz łatwo dodać dzielniki do łączy nawigacyjnych za pomocą pustego elementu listy i prostej klasy. Po prostu dodaj to między linkami:

<ul class = "nav" > 
  ...
  <li class = "dzielnik-pion" ></li> 
  ...
</ul>

Wyrównanie komponentów

Aby wyrównać nawigację, formularz wyszukiwania lub tekst, użyj klas narzędziowych .pull-leftlub . .pull-rightObie klasy dodadzą pływak CSS w określonym kierunku.

Dodawanie rozwijanych menu

Dodawanie list rozwijanych i zrzutów 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 →

Tekst na pasku nawigacyjnym

Zawijaj ciągi tekstu w <p>tag, aby uzyskać odpowiednią interlinię i kolor.

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 class = "aktywny" > Dane </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 stronicowania z lekkimi znacznikami i jeszcze lżejszymi stylami. Świetnie nadaje się do prostych witryn, takich jak blogi czy czasopisma.

Opcjonalny stan wyłączony

Linki do stronicowania używają również ogólnej .disabledklasy z paginacji.

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

O

Plakietki to małe, proste elementy służące do wyświetlania wskaźnika lub pewnego rodzaju liczby. Są one często spotykane w klientach poczty e-mail, takich jak Mail.app lub w aplikacjach mobilnych do powiadomień push.

Dostępne klasy

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>`
Błąd	6	`<span class="badge badge-error">6</span>`
Informacje	8	`<span class="badge badge-info">8</span>`
Odwrotność	10	`<span class="badge badge-inverse">10</span>`

Jednostka bohatera

Bootstrap zapewnia lekki, elastyczny komponent zwany jednostką bohatera do prezentowania treści w Twojej witrynie. Sprawdza się dobrze w witrynach o dużej zawartości marketingowej i treści.

Narzut

Zawiń zawartość w divtaki sposób:

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

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

Nagłówek

Prosta powłoka h1do odpowiedniego rozmieszczenia i segmentacji 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> Przykładowy nagłówek strony </h1>
</div>

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” data-dismiss = „alert” > × </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” data-dismiss = „alert” > × </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 do tworzenia efektu pasków (bez IE).

<div class = "progress progress-striped" > 
  <div klasa = "bar" 
       styl = " szerokość : 20 %; " ></div> 
</div>

Ożywiony

Bierze przykład w paski i animuje go (bez IE).

<div class = "progresja w paski postępu 
     aktywny" >
  <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 klas przycisków i alertów, aby zapewnić spójne style.

Paski w paski

Podobnie jak w przypadku jednolitych kolorów, mamy zróżnicowane paski postępu.

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-9 lub starszych wersjach Firefoksa.

Opera i IE nie obsługują 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>

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

Najlepsze praktyki

Przykład domyślny

Przykład paska narzędzi

Smaki checkboxa i radia

Listy rozwijane w grupach przycisków

Rozwijane menu przycisków Wbudowane grupy przycisków zapewniające menu kontekstowe

Przyciski rozwijane

Przegląd i przykłady

Przykładowy znacznik

Działa ze wszystkimi rozmiarami przycisków

Wymaga javascript

Podziel rozwijane przyciski

Przegląd i przykłady

Rozmiary

Przykładowy znacznik

Wyskakujące menu

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

Kiedy użyć

Wyrównanie komponentów

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

Przegrody poziome

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

Naprawiono pasek nawigacyjny

Nazwa handlowa

Formularze na pasku nawigacyjnym

Opcjonalna odmiana responsywna

Łącza nawigacyjne

Wyrównanie komponentów

Dodawanie rozwijanych menu

Tekst na pasku nawigacyjnym

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

Opcjonalny stan wyłączony

Przykład domyślny

Wyrównane linki

Etykiety w tekście Etykieta i tekst adnotacji

Odznaki Wskaźniki i nieprzeczytane liczby

O

Dostępne klasy

Komponenty typograficzne Nagłówek strony i jednostka bohatera do segmentacji treści