Bootstrap

Podstawowy CSS

Podstawowe elementy HTML stylizowane i wzbogacone o rozszerzalne klasy.

Heads-up! Te dokumenty dotyczą wersji 2.3.2, która nie jest już oficjalnie obsługiwana. Sprawdź najnowszą wersję Bootstrapa!

Typografia

Nagłówki

Dostępne są wszystkie nagłówki HTML, <h1>poprzez <h6>.

h1. Nagłówek 1

h2. Nagłówek 2

h3. Nagłówek 3

h4. Nagłówek 4

h5. Nagłówek 5
h6. Nagłówek 6

Kopia ciała

Globalna wartość domyślna Bootstrapa font-sizeto 14px , line-heightz 20px . Dotyczy to <body>wszystkich paragrafów. Ponadto <p>(akapity) otrzymują margines dolny równy połowie wysokości wiersza (domyślnie 10 pikseli).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Mecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Kopia treści głównej

Wyróżnij akapit, dodając .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commododo luctus.

<p class = „lead” > ... </p>

Zbudowany z Less

Skala typograficzna oparta jest na dwóch zmiennych LESS w zmiennych.less : @baseFontSizei @baseLineHeight. Pierwszy to podstawowy rozmiar czcionki używany w całym tekście, a drugi to podstawowa wysokość linii. Używamy tych zmiennych i prostej matematyki do tworzenia marginesów, dopełnień i wysokości linii wszystkich naszych typów i nie tylko. Dostosuj je i dostosuje Bootstrap.

Podkreślenie

Korzystaj z domyślnych znaczników nacisku HTML z lekkimi stylami.

<small>

Aby usunąć wyróżnienie w tekście lub bloki tekstu, użyj małego znacznika.

Ta linia tekstu ma być traktowana jako drobny druk.

<p> <small> Ta linia tekstu powinna być traktowana jako drobny druk. </small> </p>

Pogrubienie

Do podkreślania fragmentu tekstu grubszą czcionką.

Poniższy fragment tekstu jest renderowany jako tekst pogrubiony .

<strong> renderowane jako tekst pogrubiony </strong>

Kursywa

Za podkreślenie fragmentu tekstu kursywą.

Poniższy fragment tekstu jest renderowany kursywą .

<em> renderowane jako tekst pisany kursywą </em>

Heads-up!Zapraszam do korzystania <b>i <i>w HTML5. <b>ma na celu podkreślenie słów lub fraz bez przekazywania dodatkowego znaczenia, podczas gdy <i>dotyczy głównie głosu, terminów technicznych itp.

Klasy wyrównania

Łatwo wyrównuj tekst do komponentów za pomocą klas wyrównania tekstu.

Tekst wyrównany do lewej.

Tekst wyśrodkowany.

Tekst wyrównany do prawej.

  1. <p class = "text-left" > Tekst wyrównany do lewej. </p> 
  2. <p class = "text-center" > Tekst wyśrodkowany. </p> 
  3. <p class = "text-right" > Tekst wyrównany do prawej. </p>

Zajęcia z naciskiem

Przekazuj znaczenie kolorem dzięki garstce klas użytkowych akcentujących.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "wyciszony" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "ostrzeżenie tekstowe" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = „text-success” > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Skróty

Stylizowana implementacja elementu HTML <abbr>dla skrótów i akronimów, aby wyświetlić rozszerzoną wersję po najechaniu myszą. Skróty z titleatrybutem mają dolną granicę z jasnymi kropkami i kursor pomocy po najechaniu myszą, zapewniając dodatkowy kontekst po najechaniu myszą.

<abbr>

W przypadku tekstu rozszerzonego po długim najechaniu kursorem na skrót dołącz titleatrybut.

Skrót atrybutu słowa to attr .

<abbr title = „atrybut” > atrybut </abbr>

<abbr class="initialism">

Dodaj .initialismdo skrótu, aby uzyskać nieco mniejszy rozmiar czcionki.

HTML to najlepsza rzecz od czasów krojonego chleba.

<abbr title = „HyperText Markup Language” class = „initialism” > HTML </abbr>

Adresy

Przedstaw dane kontaktowe najbliższego przodka lub całej pracy.

<address>

Zachowaj formatowanie, kończąc wszystkie wiersze na <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Imię i nazwisko
[email protected] 
  1. <adres>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Apartament 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = „Telefon” > P: </abbr> (123) 456-7890 
  6. </adres>
  7.  
  8. <adres>
  9.   <strong> Imię i nazwisko </strong><br>
  10.   <a href = "mailto:#"> [email protected] </a> _ 
  11. </adres>

Cytaty blokowe

Do cytowania bloków treści z innego źródła w Twoim dokumencie.

Domyślny cytat blokowy

Owiń <blockquote>dowolny kod HTML jako cytat. W przypadku prostych cytatów zalecamy <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat ante.

  1. <cytat blokowy>
  2.   <p> Lorem ipsum dolor sit amet, konsektetur adipisująca elita. Liczba całkowita posuere erat ante. </p>
  3. </blockquote>

Opcje cytatów blokowych

Zmiany stylu i treści dla prostych wariacji standardowego cytatu blokowego.

Nazywanie źródła

Dodaj <small>tag do identyfikacji źródła. Zawijaj nazwę pracy źródłowej w <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat ante.

Ktoś sławny w tytule źródła 
  1. <cytat blokowy>
  2.   <p> Lorem ipsum dolor sit amet, konsektetur adipisująca elita. Liczba całkowita posuere erat ante. </p>
  3.   <small> Ktoś znany <cite title = „Tytuł źródła” > Tytuł źródła </cite></small> 
  4. </blockquote>

Wyświetlacze alternatywne

Używaj .pull-rightdo pływającego cytatu blokowego z wyrównaniem do prawej.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat ante.

Ktoś sławny w tytule źródła 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Listy

Niezamówiony

Lista pozycji, w których kolejność wyraźnie nie ma znaczenia.

  • Lorem ipsum dolor sit amet
  • Consectetur adipisująca elita
  • Integer molestie lorem w massa
  • Facilisis w pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Fasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Zamówione

Lista pozycji, w których kolejność ma znaczenie.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipisująca elita
  3. Integer molestie lorem w massa
  4. Facilisis w pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Bez stylu

Usuń domyślne list-stylei lewe dopełnienie elementów listy (tylko bezpośrednie dzieci).

  • Lorem ipsum dolor sit amet
  • Consectetur adipisująca elita
  • Integer molestie lorem w massa
  • Facilisis w pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Fasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "bez stylu" > 
  2.   <li> ... </li>
  3. </ul>

W linii

Umieść wszystkie elementy listy w jednej linii z inline-blocklekkim wypełnieniem.

  • Lorem ipsum
  • Fazallus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Opis

Lista terminów wraz z powiązanymi opisami.

Listy opisów
Lista opisowa jest idealna do definiowania terminów.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Opis poziomy

Ułóż terminy i opisy <dl>obok siebie.

Listy opisów
Lista opisowa jest idealna do definiowania terminów.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Heads-up!Poziome listy opisów skrócą terminy, które są zbyt długie, aby zmieściły się w lewej kolumnie text-overflow. W węższych rzutniach zmienią się na domyślny układ piętrowy.

Kod

W linii

Zawijaj wbudowane fragmenty kodu za pomocą <code>.

Na przykład <section>powinien być opakowany jako inline. 
  1. Na przykład <kod > & lt ; sekcja & gt ;</ code > powinna być opakowana jako inline .

Blok podstawowy

Użyj <pre>dla wielu wierszy kodu. Upewnij się, że w kodzie zostały usunięte nawiasy kątowe, aby zapewnić prawidłowe renderowanie.

<p>Tutaj przykładowy tekst...</p>
  1. <pre>
  2.   <p>Przykładowy tekst tutaj...</p>
  3. </pre>

Heads-up!Pamiętaj, aby trzymać kod w <pre>tagach jak najbliżej lewej strony; wyrenderuje wszystkie karty.

Możesz opcjonalnie dodać .pre-scrollableklasę, która ustawi maksymalną wysokość na 350px i zapewni pasek przewijania na osi y.

Stoły

Style domyślne

W przypadku podstawowych stylów — lekkie wypełnienie i tylko poziome dzielniki — dodaj klasę bazową .tabledo any <table>.

# Imię Nazwisko Nazwa użytkownika
1 Ocena Otto @mdo
2 Jakub Thornton @tłuszcz
3 Larry ptak @świergot 
  1. < klasa tabeli = "tabela" > 
  2.   …
  3. </table>

Zajęcia opcjonalne

Dodaj dowolną z następujących klas do .tableklasy podstawowej.

.table-striped

Dodaje paski zebry do dowolnego wiersza tabeli w <tbody>selektorze :nth-childCSS (niedostępne w IE7-8).

# Imię Nazwisko Nazwa użytkownika
1 Ocena Otto @mdo
2 Jakub Thornton @tłuszcz
3 Larry ptak @świergot 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

Dodaj obramowania i zaokrąglone rogi do stołu.

# Imię Nazwisko Nazwa użytkownika
1 Ocena Otto @mdo
Ocena Otto @oczywiście
2 Jakub Thornton @tłuszcz
3 Larry ptak @świergot 
  1. <table class = "tabela z obramowaniem tabeli" > 
  2.   …
  3. </table>

.table-hover

Włącz stan najechania na wiersze tabeli w <tbody>.

# Imię Nazwisko Nazwa użytkownika
1 Ocena Otto @mdo
2 Jakub Thornton @tłuszcz
3 Larry ptak @świergot 
  1. <table class = "table-hover" > 
  2.   …
  3. </table>

.table-condensed

Sprawia, że ​​stoły są bardziej zwarte, przecinając wypełnienie komórek na pół.

# Imię Nazwisko Nazwa użytkownika
1 Ocena Otto @mdo
2 Jakub Thornton @tłuszcz
3 Larry ptak @świergot 
  1. <table class = "tabela skondensowana" > 
  2.   …
  3. </table>

Opcjonalne klasy wierszy

Użyj klas kontekstowych, aby pokolorować wiersze tabeli.

Klasa Opis
.success Wskazuje udane lub pozytywne działanie.
.error Wskazuje na niebezpieczne lub potencjalnie negatywne działanie.
.warning Wskazuje ostrzeżenie, które może wymagać uwagi.
.info Używany jako alternatywa dla stylów domyślnych.
# Produkt Płatność podjęta Status
1 TB - Miesięcznie 01.04.2012 Zatwierdzony
2 TB - Miesięcznie 02.04.2012 Odrzucony
3 TB - Miesięcznie 03.04.2012 W oczekiwaniu
4 TB - Miesięcznie 04.04.2012 Zadzwoń, aby potwierdzić 
  1. ...
  2.   < klasa tr = "sukces" >
  3.     <td> 1 < /td>
  4.     <td>TB – co miesiąc</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Zatwierdzone</ td >
  7.   </ tr >
  8. ...

Obsługiwane znaczniki tabeli

Lista obsługiwanych elementów HTML tabeli i sposób ich użycia.

Etykietka Opis
<table> Element opakowujący do wyświetlania danych w formacie tabelarycznym
<thead> Element kontenera dla wierszy nagłówka tabeli ( <tr>) do etykietowania kolumn tabeli
<tbody> Element kontenera dla wierszy tabeli ( <tr>) w treści tabeli
<tr> Element kontenera dla zestawu komórek tabeli ( <td>lub <th>), który pojawia się w jednym wierszu
<td> Domyślna komórka tabeli
<th> Specjalna komórka tabeli dla etykiet kolumn (lub wierszy, w zależności od zakresu i położenia)
<caption> Opis lub podsumowanie zawartości tabeli, szczególnie przydatne dla czytników ekranu 
  1. <tabela>
  2.   <caption> ... </caption>
  3.   <głowa>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </head>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Formularze

Style domyślne

Poszczególne kontrolki formularzy otrzymują styl, ale bez wymaganej klasy bazowej <form>lub dużych zmian w znacznikach. Wynikiem są skumulowane, wyrównane do lewej etykiety na górze kontrolek formularza.

Legenda Przykładowy tekst pomocy na poziomie bloku tutaj. 
  1. <formularz>
  2.   <zestaw pól>
  3.     <legend> Legenda </legend>
  4.     <label> Nazwa etykiety </label>
  5.     <input type = „text” placeholder = „Wpisz coś…” >  
  6.     <span class = "help-block" > Przykładowy tekst pomocy na poziomie bloku tutaj. </span> 
  7.     <label class = "pole wyboru" > 
  8.       <input type = "checkbox" > Sprawdź mnie 
  9.     </label>
  10.     <button type = "prześlij" class = "btn" > Prześlij </button>  
  11.   </fieldset>
  12. </form>

Opcjonalne układy

Do programu Bootstrap dołączone są trzy opcjonalne układy formularzy do typowych zastosowań.

Formularz wyszukiwania

Dodaj .form-searchdo formularza i .search-querydo, aby <input>uzyskać bardziej zaokrąglone wprowadzanie tekstu.

  1. < klasa formularza = "wyszukiwanie formularzy" > 
  2.   <input type = „text” class = „input-medium search-query” >  
  3.   <button type = "submit" class = "btn" > Szukaj </button>  
  4. </form>

Formularz wbudowany

Dodaj .form-inlinedla wyrównanych do lewej etykiet i wbudowanych elementów sterujących w celu uzyskania kompaktowego układu.

  1. < klasa formularza = "form-inline" > 
  2.   <input type = „text” class = „input-small” symbol zastępczy = „Email” >   
  3.   <input type = „password” class = „input-small” symbol zastępczy = „Password” >   
  4.   <label class = "pole wyboru" > 
  5.     <input type = "checkbox" > Zapamiętaj mnie 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Zaloguj się </button>  
  8. </form>

Forma pozioma

Wyrównaj etykiety do prawej i przesuń je w lewo, aby pojawiły się w tym samym wierszu, co kontrolki. Wymaga większości zmian znaczników z formularza domyślnego:

  • Dodaj .form-horizontaldo formularza
  • Owiń etykiety i elementy sterujące w.control-group
  • Dodaj .control-labeldo etykiety
  • Owiń wszystkie powiązane elementy sterujące w .controlscelu prawidłowego wyrównania
  1. < klasa formularza = "forma-pozioma" > 
  2.   <div class = "grupa kontrolna" > 
  3.     <label class = "etykieta-kontrolna" for = "inputEmail" > E-mail </label>  
  4.     <div class = "kontrole" > 
  5.       <input type = „text” id = „inputEmail” symbol zastępczy = „Email” >   
  6.     </div>
  7.   </div>
  8.   <div class = "grupa kontrolna" > 
  9.     <label class = "etykieta-kontrolna" for = "inputPassword" > Hasło </label>  
  10.     <div class = "kontrole" > 
  11.       <input type = „password” id = „inputPassword” symbol zastępczy = „Password” >   
  12.     </div>
  13.   </div>
  14.   <div class = "grupa kontrolna" > 
  15.     <div class = "kontrole" > 
  16.       <label class = "pole wyboru" > 
  17.         <input type = "checkbox" > Zapamiętaj mnie 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Zaloguj się </button>  
  20.     </div>
  21.   </div>
  22. </form>

Obsługiwane kontrolki formularzy

Przykłady standardowych kontrolek formularza obsługiwanych w przykładowym układzie formularza.

Wejścia

Najpopularniejsza kontrolka formularza, tekstowe pola wprowadzania. Obejmuje obsługę wszystkich typów HTML5: tekst, hasło, data/godzina, data/godzina-lokalna, data, miesiąc, godzina, tydzień, numer, e-mail, adres URL, wyszukiwanie, tel i kolor.

Wymaga użycia określonego typeprzez cały czas.

  1. <input type = „tekst” symbol zastępczy = „Wprowadzanie tekstu” >

Obszar tekstowy

Formant formularza, który obsługuje wiele wierszy tekstu. W razie potrzeby zmień rowsatrybut.

  1. <textarea wiersze = "3" ></textarea>

Pola wyboru i radia

Pola wyboru służą do wyboru jednej lub kilku opcji z listy, podczas gdy radia służą do wyboru jednej opcji z wielu.

Domyślny (skumulowany)


  1. <label class = "pole wyboru" > 
  2.   < typ wejściowy = wartość „pole wyboru” = „” >  
  3.   Opcja pierwsza to to i tamto — pamiętaj, aby podać, dlaczego jest świetna
  4. </label>
  5.  
  6. < klasa etykiety = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" zaznaczone >     
  8.   Opcja pierwsza to to i tamto — pamiętaj, aby podać, dlaczego jest świetna
  9. </label>
  10. < klasa etykiety = "radio" > 
  11.   <input type = „radio” name = „optionsRadios” id = „optionsRadios2” value = „option2” >    
  12.   Opcja druga może być czymś innym, a wybranie jej spowoduje odznaczenie opcji pierwszej
  13. </label>

Wbudowane pola wyboru

Dodaj .inlineklasę do szeregu pól wyboru lub radia, aby elementy sterujące pojawiły się w tym samym wierszu.

  1. <label class = "checkbox inline" > 
  2.   <input type = „checkbox” id = „inlineCheckbox1” value = „option1” > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = „checkbox” id = „inlineCheckbox2” value = „option2” > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Zaznacza

Użyj opcji domyślnej lub określ a, multiple="multiple"aby wyświetlić wiele opcji jednocześnie.


  1. <wybierz>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. <wybierz wiele = "wiele" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

Rozszerzenie kontroli formularza

Dodając do istniejących kontrolek przeglądarki, Bootstrap zawiera inne przydatne składniki formularzy.

Dołączone i dołączone dane wejściowe

Dodaj tekst lub przyciski przed lub po wprowadzeniu tekstu. Zwróć uwagę, że selectelementy nie są tutaj obsługiwane.

Opcje domyślne

Zawijaj an .add-oni inputjedną z dwóch klas, aby dodać tekst do danych wejściowych.

@

0,00 
  1. <div class = "input-prepend" > 
  2.   <span class = "dodatek" > @ </span> 
  3.   <input class = „span2” id = „prependedInput” type = „text” symbol zastępczy = „Username” >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = „span2” id = „appendedInput ” type = „text” >   
  7.   <span class = „dodatek” > ​​0,00 </span> 
  8. </div>

Łączny

Użyj obu klas i dwóch wystąpień , .add-onaby dodać i dodać dane wejściowe.

$ 0,00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "dodatek" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = „dodatek” > ​​0,00 </span> 
  5. </div>

Przyciski zamiast tekstu

Zamiast <span>z tekstem użyj a, .btnaby dołączyć przycisk (lub dwa) do danych wejściowych.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Idź! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Szukaj </button>  
  4.   <button class = "btn" type = "button" > Opcje </button>  
  5. </div>

Przyciski rozwijane

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Akcja
  6.       <span class = "karetka" ></span> 
  7.     </button>
  8.     <ul class = "menu rozwijane" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Akcja
  5.       <span class = "karetka" ></span> 
  6.     </button>
  7.     <ul class = "menu rozwijane" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Akcja
  5.       <span class = "karetka" ></span> 
  6.     </button>
  7.     <ul class = "menu rozwijane" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Akcja
  15.       <span class = "karetka" ></span> 
  16.     </button>
  17.     <ul class = "menu rozwijane" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmentowane grupy rozwijane

  1. <formularz>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     < typ wejścia = "tekst" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     < typ wejścia = "tekst" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Formularz wyszukiwania

  1. < klasa formularza = "wyszukiwanie formularzy" > 
  2.   <div class = "input-append" > 
  3.     <input type = „text” class = „span2 search-query” >  
  4.     <button type = "submit" class = "btn" > Szukaj </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Szukaj </button>  
  8.     <input type = „text” class = „span2 search-query” >  
  9.   </div>
  10. </form>

Kontroluj rozmiar

Użyj względnych klas rozmiarów, takich jak .input-largelub dopasuj dane wejściowe do rozmiarów kolumn siatki, używając.span* klas.

Wejścia poziomu blokowego

Spraw, aby dowolny element <input>lub <textarea>zachowywał się jak element na poziomie bloku.

  1. <input class = „input-block-level” type = „text” placeholder = „.input-block-level” >

Rozmiary względne

  1. <input class = „input-mini” type = „text” symbol zastępczy = „.input-mini” >   
  2. <input class = „input-small” type = „text” symbol zastępczy = „.input-small” >   
  3. <input class = „input-medium” type = „text” symbol zastępczy = „.input-medium” >   
  4. <input class = „input-large” type = „text” symbol zastępczy = „.input-large” >   
  5. <input class = „input-xlarge” type = „text” symbol zastępczy = „.input-xlarge” >   
  6. <input class = „input-xxlarge” type = „text” symbol zastępczy = „.input-xxlarge” >

Heads-up!W przyszłych wersjach będziemy zmieniać użycie tych względnych klas wejściowych, aby dopasować rozmiary naszych przycisków. Na przykład,.input-large zwiększy dopełnienie i rozmiar czcionki danych wejściowych.

Rozmiar siatki

Użyj .span1do .span12dla danych wejściowych, które pasują do tych samych rozmiarów kolumn siatki.

  1. <input class = "span1" type = "text" symbol zastępczy = ".span1" >   
  2. <input class = „span2” type = „text” symbol zastępczy = „.span2” >   
  3. <input class = "span3" type = "text" symbol zastępczy = ".span3" >   
  4. <wybierz klasę = "span1" > 
  5.   ...
  6. </select>
  7. <wybierz klasę = "span2" > 
  8.   ...
  9. </select>
  10. <wybierz klasę = "span3" > 
  11.   ...
  12. </select>

W przypadku wielu wejść siatki na linię użyj .controls-rowklasy modyfikatora, aby uzyskać odpowiednie odstępy . Przesuwa dane wejściowe, aby zwinąć białe znaki, ustawia odpowiednie marginesy i czyści pływak.

  1. <div class = "kontrole" > 
  2.   <input class = „span5” type = „text” symbol zastępczy = „.span5” >   
  3. </div>
  4. <div class = "controls-controls-row" > 
  5.   <input class = „span4” type = „text” symbol zastępczy = „.span4” >   
  6.   <input class = "span1" type = "text" symbol zastępczy = ".span1" >   
  7. </div>
  8. ...

Nieedytowalne dane wejściowe

Prezentuj dane w formularzu, którego nie można edytować bez użycia rzeczywistych znaczników formularza.

Jakaś wartość tutaj 
  1. <span class = "input-xlarge uneditable-input" > Jakaś wartość tutaj </span>

Akcje formularza

Zakończ formularz grupą akcji (przycisków). Po umieszczeniu w .form-actions, przyciski zostaną automatycznie wcięte, aby dopasować je do kontrolek formularza.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Zapisz zmiany </button>  
  3.   <button type = „button” class = „btn” > Anuluj </button>  
  4. </div>

Tekst pomocy

Wsparcie na poziomie wiersza i bloku dla tekstu pomocy, który pojawia się wokół kontrolek formularza.

Pomoc inline

Wbudowany tekst pomocy 
  1. <input type = "text" ><span class = "help-inline" > Wbudowany tekst pomocy </span>

Zablokuj pomoc

Dłuższy blok tekstu pomocy, który przechodzi w nowy wiersz i może wykraczać poza jeden wiersz. 
  1. <input type = "text" ><span class = "help-block" > Dłuższy blok tekstu pomocy, który przechodzi w nowy wiersz i może wykraczać poza jeden wiersz. </span>

Stany kontroli formularzy

Przekazywanie opinii użytkownikom lub odwiedzającym za pomocą podstawowych stanów opinii dotyczących kontrolek formularzy i etykiet.

Koncentracja na wejściu

Usuwamy domyślne outlinestyle w niektórych kontrolkach formularzy i stosujemy box-shadoww ich miejsce dla :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "To jest skupione..." >

Nieprawidłowe dane wejściowe

Stylizuj dane wejściowe za pomocą domyślnej funkcji przeglądarki za pomocą :invalid. Określ a type, dodaj requiredatrybut, jeśli pole nie jest opcjonalne, i (jeśli dotyczy) określ pattern.

Nie jest to dostępne w wersjach Internet Explorera 7-9 ze względu na brak obsługi pseudoselektorów CSS.

  1. <input class = "span3" type = "email" wymagane >

Nieaktywne wejścia

Dodaj disabledatrybut do danych wejściowych, aby uniemożliwić wprowadzanie danych przez użytkownika i wywołać nieco inny wygląd.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Wyłączone wejście tutaj..." wyłączone >

Stany walidacji

Bootstrap zawiera style sprawdzania poprawności komunikatów o błędach, ostrzeżeniach, informacjach i sukcesach. Aby użyć, dodaj odpowiednią klasę do otoczenia .control-group.

Coś mogło pójść nie tak
Popraw błąd
Nazwa użytkownika jest zajęta
Hurra! 
  1. <div class = "ostrzeżenie grupy kontrolnej" > 
  2.   <label class = "etykieta-kontrolna" for = "inputWarning" > Dane wejściowe z ostrzeżeniem </label>  
  3.   <div class = "kontrole" > 
  4.     <input type = „text” id = „inputWarning” >  
  5.     <span class = "help-inline" > Coś mogło pójść nie tak </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "błąd grupy kontrolnej" > 
  10.   <label class = "etykieta-kontrolna" for = "inputError" > Dane wejściowe z błędem </label>  
  11.   <div class = "kontrole" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Popraw błąd </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "informacje o grupie kontrolnej" > 
  18.   <label class = "etykieta-kontrolna" for = "inputInfo" > Dane wejściowe z informacjami </label>  
  19.   <div class = "kontrole" > 
  20.     <input type = „text” id = „inputInfo” >  
  21.     <span class = "help-inline" > Nazwa użytkownika jest już zajęta </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "sukces grupy kontrolnej" > 
  26.   <label class = "etykieta-kontrolna" for = "inputSuccess" > Dane wejściowe zakończone powodzeniem </label>  
  27.   <div class = "kontrole" > 
  28.     <input type = „text” id = „inputSuccess” >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

guziki

Przyciski domyślne

Style przycisków można stosować do wszystkiego, do czego .btnzastosowano klasę. Jednak zazwyczaj będziesz chciał zastosować je tylko do elementów <a>i <button>w celu uzyskania najlepszego renderowania.

Przycisk klasa ="" Opis
btn Standardowy szary przycisk z gradientem
btn btn-primary Zapewnia dodatkową wizualną wagę i identyfikuje podstawową akcję w zestawie przycisków
btn btn-info Używany jako alternatywa dla domyślnych stylów
btn btn-success Wskazuje udane lub pozytywne działanie
btn btn-warning Wskazuje, że należy zachować ostrożność przy tym działaniu
btn btn-danger Wskazuje na niebezpieczne lub potencjalnie negatywne działanie
btn btn-inverse Alternatywny ciemnoszary przycisk, niezwiązany z akcją semantyczną lub użyciem
btn btn-link Zmniejsz nacisk na przycisk, sprawiając, że wygląda jak link, zachowując zachowanie przycisku

Kompatybilność z różnymi przeglądarkami

IE9 nie przycina gradientów tła w zaokrąglonych rogach, więc je usuwamy. Pokrewny, IE9 jankesuje wyłączone buttonelementy, renderując tekst na szaro z paskudnym cieniem tekstu, którego nie możemy naprawić.

Rozmiary przycisków

Masz ochotę na większe czy mniejsze guziki? Dodaj .btn-large, .btn-smalllub .btn-minidla dodatkowych rozmiarów.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Duży przycisk </button>  
  3.   <button class = "btn btn-large" type = "button" > Duży przycisk </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Przycisk domyślny </button>  
  7.   <button class = "btn" type = "button" > Przycisk domyślny </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Mały przycisk </button>  
  11.   <button class = "btn btn-small" type = "button" > Mały przycisk </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini przycisk </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini przycisk </button>  
  16. </p>

Utwórz przyciski na poziomie bloku — te, które obejmują całą szerokość elementu nadrzędnego — dodając .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Przycisk poziomu blokady </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Przycisk poziomu blokady </button>

Stan niepełnosprawny

Spraw, aby przyciski wyglądały na niemożliwe do kliknięcia, cofając je o 50%.

Element kotwicy

Dodaj .disabledklasę do <a>przycisków.

Główny link Połączyć 

  1. <a href = "#" class = "btn btn-large btn-primary disabled"> Link główny </a>  
  2. <a href = "#" class = "btn btn-large disabled"> Link </a>

Heads-up!Używamy .disabledtutaj jako klasy użytkowej, podobnej do zwykłej .activeklasy, więc nie jest wymagany przedrostek. Ponadto ta klasa jest przeznaczona tylko dla estetyki; musisz użyć niestandardowego JavaScript, aby wyłączyć linki tutaj.

Element przycisku

Dodaj disabledatrybut do <button>przycisków.

  1. <button type = „button” class = „btn btn-large btn-primary disabled” disabled = „wyłączone” > Przycisk główny </button>   
  2. <button type = „button” class = „btn btn-large” wyłączony > Przycisk </button>

Jedna klasa, wiele tagów

Użyj .btnklasy na elemencie <a>, <button>lub .<input>

Połączyć 
  1. <a class = "btn" href = ""> Link </a> _  
  2. <button class = "btn" type = "wyślij" > Przycisk </button>  
  3. < klasa wejściowa = typ „btn” = wartość „przycisk” = „Wejście” >   
  4. < klasa wejściowa = typ „btn” = „prześlij” wartość = „Prześlij” >

W ramach najlepszej praktyki spróbuj dopasować element do kontekstu, aby zapewnić dopasowanie renderowania w różnych przeglądarkach. Jeśli masz input, użyj <input type="submit">dla swojego przycisku.

Obrazy

Dodaj klasy do <img>elementu, aby łatwo stylizować obrazy w dowolnym projekcie.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

Heads-up! .img-roundedi .img-circlenie działają w IE7-8 z powodu braku border-radiuswsparcia.

Ikony glifów _

Glify ikon

140 ikon w formie sprite, dostępnych w kolorze ciemnoszarym (domyślnie) i białym, dostarczonych przez Glyphicons .

  • ikona-szkło
  • ikona-muzyka
  • wyszukiwanie ikon
  • ikona-koperta
  • ikona-serce
  • ikona-gwiazda
  • ikona-gwiazda-pusta
  • ikona-użytkownik
  • ikona-film
  • ikona-th-duża
  • ikona-th
  • ikona-th-lista
  • ikona-ok
  • ikona-usuń
  • ikona-powiększanie
  • ikona-oddalanie
  • ikona wyłączenia
  • ikona-sygnał
  • ikona-kog
  • ikona-śmieci
  • ikona-domu
  • ikona-plik
  • ikona-czas
  • ikona-droga
  • ikona-pobierz-alt
  • ikona-pobierz
  • przesyłanie-ikony
  • ikona-skrzynka odbiorcza
  • ikona-play-circle
  • ikona-powtórz
  • ikona-odśwież
  • ikona-lista-alt
  • ikona blokady
  • ikona-flaga
  • słuchawki-ikony
  • ikona-wyłączenie głośności
  • ikona-głośność-ciszej
  • ikona-zwiększanie głośności
  • ikona-qrcode
  • ikona-kod kreskowy
  • ikona-tag
  • ikona-tagi
  • ikona-książka
  • ikona-zakładka
  • ikona-print
  • ikona-aparat
  • ikona-czcionka
  • ikona pogrubiona
  • ikona-kursywa
  • ikona-tekst-wysokość
  • szerokość-tekstu-ikony
  • ikona-wyrównaj-do-lewej
  • ikona-wyrównaj-środek
  • ikona-wyrównaj-do-prawo
  • ikona-wyrównaj-wyrównaj
  • lista ikon
  • ikona-wcięcie-lewe
  • ikona-wcięcie-prawo
  • ikona-facetime-wideo
  • ikona-obraz
  • ikona-ołówek
  • ikona-mapa-znacznik
  • ikona-dostosuj
  • ikona-odcień
  • ikona-edytuj
  • ikona-share
  • sprawdzanie ikon
  • ikona-ruch
  • ikona krok wstecz
  • ikona-szybko do tyłu
  • ikona wstecz
  • odtwarzanie ikon
  • ikona-pauza
  • ikona-stop
  • ikona do przodu
  • ikona-szybkie przewijanie do przodu
  • ikona-krok-do przodu
  • wysuwanie ikon
  • ikona-jodełka-lewo
  • ikona-chevron-prawo
  • ikona-plus-znak
  • ikona-minus-znak
  • ikona-usuń-znak
  • ikona-ok-znak
  • ikona-pytanie-znak
  • ikona-informacja-znak
  • ikona-zrzut ekranu
  • ikona-usuń-okrąg
  • ikona-ok-okrąg
  • ikona-ban-krąg
  • ikona-strzałka-w lewo
  • ikona-strzałka-w prawo
  • ikona-strzałka-w górę
  • ikona-strzałka-w dół
  • ikona-share-alt
  • ikona-zmiana rozmiaru-pełna
  • ikona-zmiana rozmiaru-mała
  • ikona-plus
  • ikona-minus
  • ikona-gwiazdka
  • ikona-wykrzyknik-znak
  • ikona-prezent
  • ikona-liść
  • ikona-ogień
  • ikona-oko-otwarte
  • ikona-zamknij oko
  • ikona-znak-ostrzegawczy
  • ikona-płaszczyzna
  • ikona-kalendarz
  • ikona-losowa
  • ikona-komentarz
  • ikona-magnes
  • ikona-chevron-up
  • ikona-chevron-w dół
  • ikona-retweet
  • koszyk-ikona
  • ikona-folder-zamknij
  • ikona-folder-otwarty
  • ikona zmiany rozmiaru w pionie
  • ikona-zmiana rozmiaru-pozioma
  • ikona-HDD
  • ikona-bullhorn
  • ikona-dzwonek
  • ikona-certyfikat
  • ikona-kciuki w górę
  • ikona-kciuki-w dół
  • ikona-ręka-prawo
  • ikona-strona-lewa
  • ikona dłoni w górę
  • ikona w dół
  • ikona-koło-strzałka-w prawo
  • ikona-koło-strzałka-w lewo
  • ikona-kółko-strzałka w górę
  • ikona-kółko-strzałka-w dół
  • ikona-globus
  • ikona-klucz
  • ikona-zadania
  • filtr-ikona
  • aktówka-ikona
  • ikona-pełny ekran

Atrybucja glifów

Niziołki Glyphicons zwykle nie są dostępne za darmo, ale porozumienie między Bootstrapem a twórcami Glyphicons umożliwiło to bez żadnych kosztów dla deweloperów. W ramach podziękowania prosimy o dołączenie opcjonalnego linku z powrotem do Glyphicons , gdy tylko jest to możliwe.

Jak używać

Wszystkie ikony wymagają <i>tagu z unikalną klasą, poprzedzonego icon-. Aby użyć, umieść następujący kod w dowolnym miejscu:

  1. <i class = "icon-search" ></i>

Dostępne są również style dla odwróconych (białych) ikon, przygotowane z jedną dodatkową klasą. W szczególności będziemy egzekwować tę klasę w stanach najechania i aktywnych dla linków nawigacyjnych i rozwijanych.

  1. <i class = „ikona-wyszukiwanie ikona-biała” ></i>

Heads-up!Używając obok ciągów tekstu, jak w przyciskach lub linkach nawigacyjnych, pamiętaj o pozostawieniu spacji po <i>tagu, aby zapewnić prawidłowe odstępy.

Przykłady ikon

Używaj ich w przyciskach, grupach przycisków dla paska narzędzi, nawigacji lub dołączonych danych wejściowych formularza.

guziki

Grupa przycisków na pasku narzędzi przycisków
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Lista rozwijana w grupie przycisków
Użytkownik 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Użytkownik </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "menu rozwijane" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Edytuj </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Usuń </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Zablokuj </a></li>  
  8.     <li klasa = "dzielnik" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Ustaw administratora </a></li>  
  10.   </ul>
  11. </div>
Rozmiary przycisków
Gwiazda Gwiazda Gwiazda 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Gwiazdka </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Gwiazdka </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Gwiazdka </a>

Nawigacja

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Strona główna </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Biblioteka </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Aplikacje </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Różne </a></li>  
  6. </ul>

Pola formularza

  1. <div class = "grupa kontrolna" > 
  2.   <label class = "etykieta-kontrolna" for = "inputIcon" > Adres e-mail </label>  
  3.   <div class = "kontrole" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "dodatek" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = „span2” id = „inputIcon” type = „text” >   
  7.     </div>
  8.   </div>
  9. </div>