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.

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

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 dodatkowe klasy przycisków .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>

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:

• Dom
• Profil
• Wiadomości

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

• Dom
• Profil
• Wiadomości

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

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

• Dom
• Profil
• Wiadomości

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

Ułożone pigułki

• Dom
• Profil
• Wiadomości

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

Ł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

• Dom
• Pomoc
• Upuścić
  • Action
  • Another action
  • Something else here
  • Separated link

<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

• Dom
• Pomoc
• Upuścić
  • Action
  • Another action
  • Something else here
  • Separated link

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

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>

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.

Zniknij w zakładkach

Aby karty pojawiały się, dodaj .fadedo każdego .tab-pane.

Wymaga wtyczki 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 →

Przykład tabelaryczny

Aby umożliwić tworzenie kart, utwórz .tab-paneidentyfikator z unikalnym identyfikatorem dla każdej karty i zapakuj je w .tab-content.

W przypadku tabulatorów wyrównanych do prawej lub lewej zawiń .nav-tabsi .tab-content..tabbable

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" > <!-- Wymagane tylko dla lewych/prawych kart -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Sekcja 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab"> Sekcja 2 </a></li >  
  </ul>
  <div class = "zawartość karty" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Jestem w sekcji 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Cześć, jestem w sekcji 2. </p>
    </div>
  </div>
</div>

Zakładki na dole

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

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

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

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

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 40px lub więcej dopełnienia 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-searchdo formi .search-querydo danych wejściowych dla wyspecjalizowanych stylów 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>

Łą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 <.navbar-text>, zwykle na <p>tagu, 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.

• Dom

• Strona główna /
• Biblioteka

• Strona główna /
• Biblioteka /
• Dane

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>

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>

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.

• Poprzedni
• Następny

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

• ← Starsze
• Nowsze →

<ul class = „pager” > 
  <li klasa = "poprzednia" > 
    <a href = "#" > ← Starsze </a> 
  </li>
  <li klasa = "następny" > 
    <a href = "#"> Nowsze → </a> 
  </li>
</ul>

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

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>

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

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

<div class = "alert" > 
  <button class = "zamknij" data-dismiss = "alert" > × </button>  
  <strong> Ostrzeżenie! </strong> Najlepiej sprawdź sam, nie wyglądasz zbyt dobrze.
</div>

Heads-up! Urządzenia z systemem iOS wymagają href="#"odrzucania alertów. Pamiętaj, aby uwzględnić go i atrybut danych dla ikon zamknięcia kotwicy. Alternatywnie możesz użyć <button>elementu z atrybutem data, co zdecydowaliśmy się zrobić dla naszych dokumentów. Podczas korzystania <button>musisz dołączyćtype="button" lub Twoje formularze mogą nie zostać przesłane.

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.

<div class = "alert alert-block" > 
  <a class = „zamknij” data-dismiss = „alert” href = „#” > × </a>   
  <h4 class = "alert-heading" > Ostrzeżenie! </h4> 
  Najlepiej sprawdź się, nie jesteś...
</div>

Błąd lub niebezpieczeństwo

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

Powodzenie

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

Informacja

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

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>

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.

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

Zamknij ikonę

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>