Przykład

Przełączalne menu kontekstowe do wyświetlania list linków. Interaktywna 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>

Narzut

Patrząc tylko na menu rozwijane, oto wymagany kod HTML. Musisz owinąć wyzwalacz listy rozwijanej i menu rozwijane w obrębie .dropdownlub 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>

Opcje

Wyrównaj menu w prawo i dodaj dodatkowe poziomy menu rozwijanych.

Wyrównywanie menu

Dodaj .pull-rightdo .dropdown-menuprawej wyrównaj menu rozwijane.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Wyłączone opcje menu

Dodaj .disableddo <li>listy rozwijanej, aby wyłączyć łącze.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#"> Zwykły link </a></li >  
  <li class = "disabled" ><a tabindex = "-1" href = "#"> Wyłączone łącze </a></li >   
  <li><a tabindex = "-1" href = "#"> Kolejny link </a></li >  
</ul>

Podmenu w menu rozwijanych

Dodaj dodatkowy poziom menu rozwijanych, pojawiających się po najechaniu kursorem, jak te w OS X, z kilkoma prostymi dodatkami znaczników. Dodaj .dropdown-submenudo dowolnego liw 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>

Przykłady

Dwie podstawowe opcje, wraz z dwoma bardziej szczegółowymi wariantami.

Grupa z jednym przyciskiem

Zawiń serię przycisków .btnw .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Lewo </button> 
  <button class = "btn" > Środkowy </button> 
  <button class = "btn" > Prawo </button> 
</div>

Wiele grup przycisków

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>

Pionowe grupy przycisków

Ustaw zestaw przycisków ułożonych pionowo, a nie poziomo.

<div class = "btn-group btn-group-vertical" > 
  ...
</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 .

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.

<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

Menu rozwijane przycisków działają w dowolnym rozmiarze: .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 kodu JavaScript.

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.

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

Rozmiary

Wykorzystaj dodatkowe klasy przycisków .btn-mini, .btn-smalllub .btn-largedo zmiany rozmiaru.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Akcja </button> 
  <button class = "btn btn-mini 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

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

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>

Stan niepełnosprawny

W przypadku dowolnego komponentu nawigacyjnego (kart, pigułek lub listy) dodaj szare linki i brak efektów.disabled najechania . Linki pozostaną jednak klikalne, chyba że usuniesz atrybut. Alternatywnie możesz zaimplementować niestandardowy JavaScript, aby zapobiec takim kliknięciom.href

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

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.

Możliwość układania w stos

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

Dodaj rozwijane menu z trochę dodatkowym kodem HTML i rozwijaną wtyczką JavaScript .

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

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

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 class = "active" ><a href = "#"> Strona główna </a> </li>  
  <li><a href = "#"> Biblioteka </a> </li> 
  ...
</ul>

NotatkaW przypadku zagnieżdżania na liście nawigacyjnej uwzględnij class="nav nav-list"w dowolnym zagnieżdżonym <ul>.

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>

Nawigacja z kartami

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.

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.

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

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 .

Tablicowanie w dowolnym kierunku

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>

Podstawowy pasek nawigacyjny

Na początek paski nawigacyjne są statyczne (nie są przymocowane do góry) i obejmują obsługę nazwy projektu i podstawową nawigację. Umieść je w dowolnym miejscu w .container, który określa szerokość witryny i treści.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#"> Tytuł </a> _  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#"> Strona główna </a> </li>  
      <li><a href = "#"> Link </a> </li> 
      <li><a href = "#"> Link </a> </li> 
    </ul>
  </div>
</div>

Komponenty paska nawigacyjnego

Marka

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

<a class = "brand" href = "#"> Nazwa projektu </a>  

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

Formularze

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” >  
  <button type = "prześlij" class = "btn" > Prześlij </button>  
</form>

Formularz wyszukiwania

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>

Wyrównanie komponentów

Dopasuj linki nawigacyjne, formularz wyszukiwania lub tekst, użyj klas narzędziowych .pull-leftlub . .pull-rightObie klasy dodadzą pływak CSS w określonym kierunku.

Korzystanie z menu rozwijanych

Dodaj listy rozwijane i listy rozwijane do nawigacji za pomocą odrobiny znaczników i wtyczki JavaScript listy rozwijanej .

<ul class = "nav" > 
  <li class = "menu rozwijane" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Rachunek
      <b klasa = "karetka" ></b> 
    </a>
    <ul class = "menu rozwijane" > 
      ...
    </ul>
  </li>
</ul>

Odwiedź dokumentację list rozwijanych JavaScript, aby uzyskać więcej znaczników i informacji na temat wywoływania list rozwijanych.

Tekst

Zawijaj ciągi tekstu w elemencie za pomocą .navbar-text, zwykle na <p>tagu, aby uzyskać odpowiednią interlinię i kolor.

Opcjonalne warianty wyświetlania

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

Naprawiono do góry

Dodaj .navbar-fixed-topi pamiętaj, aby uwzględnić ukryty obszar pod nim, dodając co najmniej 40 pikseli paddingdo <body>. Pamiętaj, aby dodać to po rdzeniu Bootstrap CSS i przed opcjonalnym responsywnym CSS.

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

Naprawiono do dołu

Dodaj .navbar-fixed-bottomzamiast tego.

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

Statyczny górny pasek nawigacyjny

Utwórz pasek nawigacyjny o pełnej szerokości, który przewija się wraz ze stroną, dodając .navbar-static-top. W przeciwieństwie do .navbar-fixed-topklasy, nie musisz zmieniać żadnego dopełnienia na body.

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

Responsywny pasek nawigacyjny

Aby zaimplementować zwijający się responsywny pasek nawigacyjny, zawiń zawartość paska nawigacyjnego 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form itp -->
      </div>
 
    </div>
  </div>
</div>

Odwrócona odmiana

Zmodyfikuj wygląd paska nawigacyjnego, dodając .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Przykłady

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

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

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

<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 = "#" > 5 </a></li> 
    <li><a href = "#"> Dalej </a> </li> 
  </ul>
</div>

Opcje

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.

<div class = "paginacja" > 
  <ul>
    <li class = "wyłączone" ><a href = "#" > « </a></li>  
    <li class = "aktywny" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Możesz opcjonalnie zamienić aktywne lub wyłączone kotwice na rozpiętości, aby usunąć funkcję kliknięcia przy zachowaniu zamierzonych stylów.

<div class = "paginacja" > 
  <ul>
    <li class = "wyłączone" ><span> « </span></li> 
    <li class = "aktywny" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Rozmiary

Masz ochotę na większą lub mniejszą paginację? Dodaj .pagination-large, .pagination-smalllub .pagination-minidla dodatkowych rozmiarów.

<div class = "paginacja-duża paginacja" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginacja" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginacja paginacja-mała" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginacja paginacja-mini" > 
  <ul>
    ...
  </ul>
</div>

Wyrównanie

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

<div class = "paginacja skoncentrowana na paginacji" > 
  ...
</div>

<div class = "paginacja po prawej stronie" > 
  ...
</div>

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.

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

Opcjonalny stan wyłączony

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

<ul class = „pager” > 
  <li class = "poprzednio wyłączone" > 
    <a href = "#" > ← Starsze </a> 
  </li>
  ...
</ul>

Etykiety

Odznaki

Łatwo składany

W celu łatwej implementacji etykiety i plakietki po prostu zwijają się (za pomocą :emptyselektora CSS), gdy nie ma w nich żadnej treści.

Jednostka bohatera

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.

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

Nagłówek

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 <small> Podtekst nagłówka </small></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.

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.

Narzut

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 data-src = "holder.js/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 data-src = "holder.js/300x200" alt = "" >  
      <h3> Etykieta miniatury </h3>
      <p> Podpis miniatury... </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.

Alert domyślny

Zawiń dowolny tekst i opcjonalny przycisk odrzucenia, .alertaby otrzymać podstawowy komunikat ostrzegawczy.

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

Odrzuć przyciski

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" > × </a>   

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 = "zamknij" data-dismiss = "alert" > × </button>   

Odrzuć alerty przez JavaScript

Użyj wtyczki alerts jQuery do szybkiego i łatwego odrzucania alertów.

Opcje

W przypadku dłuższych wiadomości zwiększ dopełnienie na górze i na dole opakowania alertu, dodając .alert-block.

<div class = "alert alert-block" > 
  <button type = "button" class = "zamknij" data-dismiss = "alert" > × </button>   
  <h4> Ostrzeżenie! </h4>
  Najlepiej sprawdź się, nie jesteś...
</div>

Alternatywy kontekstowe

Dodaj opcjonalne klasy, aby zmienić konotację alertu.

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>

Przykłady i znaczniki

Podstawowy

Domyślny pasek postępu z pionowym gradientem.

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

W paski

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>

Ożywiony

Dodaj .activedo, .progress-stripedaby 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>

Ułożone w stos

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-danger" style = " width : 10 %; " ></div>   
</div>

Opcje

Dodatkowe kolory

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>

Paski w paski

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>

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.

Wersje wcześniejsze niż Internet Explorer 10 i Opera 12 nie obsługują animacji.

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.

Przykład domyślny

Media domyślne pozwalają na umieszczenie obiektu multimedialnego (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.

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.

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "nagłówek-mediów" > Nagłówek mediów </h4> 
    ...
 
    <!-- Zagnieżdżony obiekt multimedialny -->
    <div class = "media" > 
      ...
    </div>
  </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).

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "nagłówek-mediów" > Nagłówek mediów </h4> 
      ...
 
      <!-- Zagnieżdżony obiekt multimedialny -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

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

Zajęcia opcjonalne

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>

Zamknij ikonę

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

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

Urządzenia z systemem iOS wymagają href="#"zdarzenia kliknięcia, jeśli wolisz używać kotwicy.

<a class = "close" href = "#" > × </a>  

Zajęcia pomocnicze

Proste, skoncentrowane klasy do drobnych poprawek w wyświetlaniu lub zachowaniu.

.pull-lewo

Przesuń element w lewo

class = "pociągnij w lewo"

. pociągnij - w lewo {
  pływak : lewy ;
}

.pull-w prawo

Unieś element w prawo

class = "pociągnij w prawo"

. pociągnij - w prawo {
  pływak : prawo ;
}

.wyciszony

Zmień kolor elementu na#999

klasa = "wyciszony"

. wyciszony {
  kolor : #999; 
}

.jasna poprawka

Wyczyść floatna dowolnym elemencie

klasa = "wyczyść"

. poprawka {
  * powiększenie :  1 ;
  &: przed ,
  &: po {
    wyświetlacz : tabela ;
    zawartość :  "" ;
  }
  &: po {
    jasne : oba ;
  }
}