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:

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

Przykład paska narzędzi

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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 rozwijanej przez Bootstrap.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#"> >
  3. Akcja
  4. <span class = "karetka" ></span>
  5. </a>
  6. <ul class = "menu rozwijane" >
  7. <!-- linki do menu rozwijanego -->
  8. </ul>
  9. </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 dodatkowe klasy przycisków .btn-mini, .btn-smalllub .btn-largedo zmiany rozmiaru.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "menu rozwijane w prawo" >
  4. <!-- linki do menu rozwijanego -->
  5. </ul>
  6. </div>

Przykładowy znacznik

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > Akcja </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "karetka" ></span>
  5. </button>
  6. <ul class = "menu rozwijane" >
  7. <!-- linki do menu rozwijanego -->
  8. </ul>
  9. </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.

  1. <div class = "porzucanie grupy btn" >
  2. <button class = "btn" > Porzucanie </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "karetka" ></span>
  5. </button>
  6. <ul class = "menu rozwijane" >
  7. <!-- linki do menu rozwijanego -->
  8. </ul>
  9. </div>

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

  1. <div class = "paginacja" >
  2. <ul>
  3. <li><a href = "#"> Poprzedni </a> </li>
  4. <li klasa = "aktywny" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#"> Dalej </a> </li>
  11. </ul>
  12. </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.

  1. <ul class = „pager” >
  2. <li>
  3. <a href = "#"> Poprzedni </a> _
  4. </li>
  5. <li>
  6. <a href = "#"> Dalej </a> _
  7. </li>
  8. </ul>

Wyrównane linki

Alternatywnie możesz wyrównać każdy link do boków:

  1. <ul class = „pager” >
  2. <li klasa = "poprzednia" >
  3. <a href = "#" > Starsze </a>
  4. </li>
  5. <li klasa = "następny" >
  6. <a href = "#"> Nowsze </a>
  7. </li>
  8. </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>
Ważny 6 <span class="badge badge-important">6</span>
Informacje 8 <span class="badge badge-info">8</span>
Odwrotność 10 <span class="badge badge-inverse">10</span>

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:

  1. <div class = "bohater-jednostka" >
  2. <h1> Nagłówek </h1>
  3. <p> Slogan </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Ucz się więcej
  7. </a>
  8. </p>
  9. </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 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).

  1. <div class = "page-header" >
  2. <h1> Przykładowy nagłówek strony </h1>
  3. </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 :

  1. <ul class = "miniaturki" >
  2. <li klasa = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "miniaturki" >
  2. <li klasa = "span3" >
  3. <div class = "miniaturka" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Etykieta miniatury </h5>
  6. <p> Podpis miniatury tutaj... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.
  1. <div class = "alert" >
  2. <button class = "zamknij" data-dismiss = "alert" > × </button>
  3. <strong> Ostrzeżenie! </strong> Najlepiej sprawdź sam, nie wyglądasz zbyt dobrze.
  4. </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.

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.

  1. <div class = "alert alert-block" >
  2. <a class = „zamknij” data-dismiss = „alert” href = „#” > × </a>
  3. <h4 class = "alert-heading" > Ostrzeżenie! </h4>
  4. Najlepiej sprawdź się, nie jesteś...
  5. </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.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Powodzenie

Bardzo dobrze! Pomyślnie przeczytałeś ten ważny komunikat ostrzegawczy.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Informacja

Heads-up! Ten alert wymaga Twojej uwagi, ale nie jest bardzo ważny.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Przykłady i znaczniki

Podstawowy

Domyślny pasek postępu z pionowym gradientem.

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

W paski

Używa gradientu do tworzenia efektu pasków (bez IE).

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

Ożywiony

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

  1. <div class = "progresja w paski postępu
  2. aktywny" >
  3. <div klasa = "bar"
  4. styl = " szerokość : 40 %; " ></div>
  5. </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!
  1. <div class = "dobrze" >
  2. ...
  3. </div>

Zamknij ikonę

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

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

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

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