Bootstrap

Základné CSS

Základné prvky HTML štylizované a vylepšené rozšíriteľnými triedami.

Typografia

Nadpisy

<h1>K dispozícii sú všetky nadpisy HTML <h6>.

h1. Nadpis 1

h2. Nadpis 2

h3. Nadpis 3

h4. Nadpis 4

h5. Nadpis 5
h6. Nadpis 6

Kópia tela

Globálna predvolená hodnota bootstrapu je 14 pixelovfont-size s hodnotou 20 pixelov . Platí to pre odseky a všetky odseky. Okrem toho (odseky) dostanú spodný okraj polovičnej výšky ich riadka (predvolene 10 pixelov).line-height<body><p>

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.

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

Kópia tela olova

Nechajte odsek vyniknúť pridaním .lead.

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

<p class = "lead" > ... </p>

Postavené s menej

Typografická škála je založená na dvoch premenných MENEJ v premenných.less : @baseFontSizea @baseLineHeight. Prvým je základná veľkosť písma používaná v celom texte a druhým je výška základného riadku. Tieto premenné a niekoľko jednoduchých matematických metód používame na vytvorenie okrajov, výplní a výšok riadkov všetkých našich typov a ďalších. Prispôsobte si ich a Bootstrap sa prispôsobí.

Dôraz

Využite predvolené značky zvýraznenia HTML s ľahkými štýlmi.

<small>

Na zníženie zvýraznenia vloženého textu alebo blokov textu použite malú značku.

S týmto riadkom textu sa má zaobchádzať ako s drobným písmom.

<p> <small> Tento riadok textu by sa mal považovať za drobné písmo. </small> </p>

Tučné

Na zvýraznenie úryvku textu s väčšou hmotnosťou písma.

Nasledujúci úryvok textu sa vykreslí ako tučný text .

<strong> vykreslený ako tučný text </strong>

Kurzíva

Na zvýraznenie úryvku textu kurzívou.

Nasledujúci úryvok textu sa vykreslí ako text kurzívou .

<em> vykreslený ako text kurzívou </em>

Hlavy hore!Neváhajte použiť <b>a <i>v HTML5. <b>je určený na zvýraznenie slov alebo fráz bez vyjadrenia ďalšej dôležitosti, zatiaľ čo <i>väčšinou ide o hlas, technické výrazy atď.

Triedy zarovnania

Pomocou tried zarovnania textu môžete jednoducho znova zarovnať text ku komponentom.

Text zarovnaný doľava.

Text zarovnaný na stred.

Text zarovnaný doprava.

  1. <p class = "text-left" > Text zarovnaný doľava. </p> 
  2. <p class = "text-center" > Text zarovnaný na stred. </p> 
  3. <p class = "text-right" > Text zarovnaný doprava. </p>

Triedy s dôrazom

Sprostredkujte význam prostredníctvom farieb s niekoľkými dôrazmi na úžitkové triedy.

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 = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > 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>

Skratky

Štylizovaná implementácia <abbr>prvku HTML pre skratky a akronymy na zobrazenie rozšírenej verzie pri umiestnení kurzora myši. Skratky s titleatribútom majú pri umiestnení kurzora myši svetlý bodkovaný spodný okraj a pomocný kurzor, ktorý poskytuje dodatočný kontext.

<abbr>

V prípade rozšíreného textu pri dlhom umiestnení kurzora myši na skratku uveďte titleatribút.

Skratka slova atribút je attr .

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

Pridajte .initialismskratku pre trochu menšiu veľkosť písma.

HTML je najlepšia vec od krájaného chleba.

<abbr title = "HyperText Markup Language" class = "inicializmus" > HTML </abbr>

Adresy

Uveďte kontaktné informácie na najbližšieho predka alebo celé dielo.

<address>

Zachovajte formátovanie ukončením všetkých riadkov znakom <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Celé meno
[email protected] 
  1. <adresa>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telefón" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <adresa>
  9.   <strong> Celé meno </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

Blokové úvodzovky

Na citovanie blokov obsahu z iného zdroja vo vašom dokumente.

Predvolená bloková ponuka

Ako citáciu obtočte <blockquote>ľubovoľný kód HTML . Pre priame cenové ponuky odporúčame <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elita. Celé číslo posuere erat a ante. </p>
  3. </blockquote>

Možnosti blockquote

Zmeny štýlu a obsahu pre jednoduché variácie štandardnej blokovej ponuky.

Pomenovanie zdroja

Pridajte <small>značku na identifikáciu zdroja. Názov zdrojového diela zabaľte do <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

Niekto slávny v Source Title 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elita. Celé číslo posuere erat a ante. </p>
  3.   <small> Niekto slávny <cite title = "Názov zdroja" > Názov zdroja </cite></small> 
  4. </blockquote>

Alternatívne zobrazenia

Použite .pull-rightpre plávajúcu, vpravo zarovnanú blokovú úvodzovku.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

Niekto slávny v Source Title 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

zoznamy

Neusporiadané

Zoznam položiek, pri ktorých na poradí výslovne nezáleží .

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

Objednané

Zoznam položiek, pri ktorých na poradí vyslovene záleží .

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

Neštylizované

Odstráňte predvolené list-stylea ľavé odsadenie na položkách zoznamu (iba okamžité deti).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elita
  • Integer molestie lorem at massa
  • Facilisis v pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla veľ
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

V rade

Umiestnite všetky položky zoznamu na jeden riadok so inline-blocksvetlou výplňou.

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

Popis

Zoznam výrazov s ich priradenými popismi.

Popisné zoznamy
Zoznam popisov je ideálny na definovanie výrazov.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Porta Malesuada
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Horizontálny popis

Urobte pojmy a popisy v <dl>rade vedľa seba.

Popisné zoznamy
Zoznam popisov je ideálny na definovanie výrazov.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Porta Malesuada
Etiam porta sem malesuada magna mollis euismod.
Felis euismod sempre eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontálne" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Hlavy hore!Vodorovné zoznamy popisov skrátia výrazy, ktoré sú príliš dlhé na to, aby sa zmestili do opravy v ľavom stĺpci text-overflow. V užších výrezoch sa zmenia na predvolené vrstvené rozloženie.

kód

V rade

Zabaľte vložené útržky kódu pomocou <code>.

Napríklad <section>by mali byť zabalené ako vložené. 
  1. Napríklad < code > & lt ; sekcia & gt ;</ code > by mala byť zabalená ako vložená .

Základný blok

Použite <pre>pre viacero riadkov kódu. Pre správne vykreslenie nezabudnite v kóde opustiť všetky lomené zátvorky.

<p>Ukážkový text tu...</p>
  1. <pred>
  2.   <p>Ukážkový text tu...</p>
  3. </pre>

Hlavy hore!Uistite sa, že kód v <pre>značkách máte čo najbližšie k ľavej strane. vykreslí všetky karty.

Voliteľne môžete pridať .pre-scrollabletriedu, ktorá nastaví maximálnu výšku 350 pixelov a poskytne posuvnú lištu osi y.

Tabuľky

Predvolené štýly

Pre základný štýl – ľahké čalúnenie a iba horizontálne prepážky – pridajte základnú triedu .tablek ľubovoľnému <table>.

# Krstné meno Priezvisko Používateľské meno
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Larry vták @twitter 
  1. <table class = "table" > 
  2.   …
  3. </table>

Voliteľné triedy

Pridajte ktorúkoľvek z nasledujúcich tried do .tablezákladnej triedy.

.table-striped

Pridá pruhované pruhy do ľubovoľného riadka tabuľky v rámci <tbody>selektora :nth-childCSS (nie je k dispozícii v IE7-8).

# Krstné meno Priezvisko Používateľské meno
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Larry vták @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

Pridajte k stolu okraje a zaoblené rohy.

# Krstné meno Priezvisko Používateľské meno
1 Marka Otto @mdo
Marka Otto @getbootstrap
2 Jacob Thornton @tuk
3 Vtáčik Larry @twitter 
  1. <table class = "table-bordered" > 
  2.   …
  3. </table>

.table-hover

Povoľte stav kurzora na riadky tabuľky v rámci súboru <tbody>.

# Krstné meno Priezvisko Používateľské meno
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Vtáčik Larry @twitter 
  1. <table class = "table-hover" > 
  2.   …
  3. </table>

.table-condensed

Stoly sú kompaktnejšie, pretože výplň buniek rozrežete na polovicu.

# Krstné meno Priezvisko Používateľské meno
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Vtáčik Larry @twitter 
  1. <table class = "table table-condended" > 
  2.   …
  3. </table>

Voliteľné triedy riadkov

Na zafarbenie riadkov tabuľky použite kontextové triedy.

Trieda Popis
.success Označuje úspešnú alebo pozitívnu akciu.
.error Označuje nebezpečnú alebo potenciálne negatívnu akciu.
.warning Označuje varovanie, ktoré si môže vyžadovať pozornosť.
.info Používa sa ako alternatíva k predvoleným štýlom.
# Produkt Platba prijatá Postavenie
1 TBC – mesačne 01/04/2012 Schválené
2 TBC – mesačne 02/04/2012 Odmietnuté
3 TBC – mesačne 03/04/2012 Čaká na spracovanie
4 TBC – mesačne 4. 4. 2012 Zavolajte a potvrďte 
  1. ...
  2.   < trieda tr = "úspech" >
  3.     <td> 1 < /td>
  4.     <td>TB – mesačne</ td >
  5.     < td > 01/04/2012 < / td >
  6.     <td>Schválené</ td >
  7.   </ tr >
  8. ...

Podporované označovanie tabuľky

Zoznam podporovaných prvkov HTML tabuľky a spôsob ich použitia.

Tag Popis
<table> Obalový prvok na zobrazenie údajov v tabuľkovom formáte
<thead> Element kontajnera pre riadky hlavičky tabuľky ( <tr>) na označenie stĺpcov tabuľky
<tbody> Prvok kontajnera pre riadky tabuľky ( <tr>) v tele tabuľky
<tr> Element kontajnera pre množinu buniek tabuľky ( <td>alebo <th>), ktorý sa zobrazuje v jednom riadku
<td> Predvolená bunka tabuľky
<th> Špeciálna bunka tabuľky pre štítky stĺpcov (alebo riadkov, v závislosti od rozsahu a umiestnenia).
<caption> Popis alebo zhrnutie obsahu tabuľky, užitočné najmä pre čítačky obrazovky 
  1. <tabuľka>
  2.   <caption> ... </caption>
  3.   <thead>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Formuláre

Predvolené štýly

Jednotlivé ovládacie prvky formulára dostávajú štýl, ale bez akejkoľvek požadovanej základnej triedy <form>alebo veľkých zmien v označovaní. Výsledkom sú zoskupené štítky zarovnané doľava nad ovládacími prvkami formulára.

Legenda Príklad textu pomoci na úrovni bloku nájdete tu. 
  1. <form>
  2.   <fieldset>
  3.     <legend> Legenda </legend>
  4.     <label> Názov menovky </label>
  5.     <input type = "text" zástupný symbol = "Napíšte niečo..." >  
  6.     <span class = "help-block" > Tu je príklad pomocného textu na úrovni bloku. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Check me out 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Submit </button>  
  11.   </fieldset>
  12. </form>

Voliteľné rozloženia

Súčasťou Bootstrapu sú tri voliteľné rozloženia formulárov pre bežné prípady použitia.

Vyhľadávací formulár

Pridajte .form-searchdo formulára a .search-querydo <input>pre extra zaoblený textový vstup.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Search </button>  
  4. </form>

Inline formulár

Pridajte .form-inlineštítky zarovnané doľava a ovládacie prvky vložené do bloku pre kompaktné rozloženie.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" zástupný symbol = "E-mail" >   
  3.   <input type = "password" class = "input-small" zástupný symbol = "Password" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Zapamätať si ma 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Prihlásiť sa </button>  
  8. </form>

Horizontálny tvar

Štítky zarovnajte doprava a posuňte ich doľava, aby sa zobrazili na rovnakom riadku ako ovládacie prvky. Vyžaduje najviac zmien značiek oproti predvolenému formuláru:

  • Pridajte .form-horizontaldo formulára
  • Zabaľte štítky a ovládacie prvky.control-group
  • Pridajte .control-labelna štítok
  • Zabaľte všetky súvisiace ovládacie prvky, .controlsaby boli správne zarovnané
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > Email </label>  
  4.     <div class = "controls" > 
  5.       <input type = "text" id = "inputEmail" zástupný symbol = "E-mail" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" for = "inputPassword" > Heslo </label>  
  10.     <div class = "controls" > 
  11.       <input type = "password" id = "inputPassword" zástupný symbol = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "controls" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Zapamätať si ma 
  18.       </label>
  19.       < typ tlačidla = "submit" class = "btn" > Prihlásiť sa </button> 
  20.     </div>
  21.   </div>
  22. </form>

Podporované ovládacie prvky formulárov

Príklady štandardných ovládacích prvkov formulára podporovaných vo vzorovom rozložení formulára.

Vstupy

Najbežnejší ovládací prvok formulára, textové vstupné polia. Zahŕňa podporu pre všetky typy HTML5: text, heslo, dátum a čas, dátum a čas-miestne, dátum, mesiac, čas, týždeň, číslo, e-mail, adresa URL, vyhľadávanie, tel a farba.

Vyžaduje použitie špecifikovaného typevždy.

  1. < typ vstupu = "text"   zástupný symbol = "Text input" >

Textarea

Ovládanie formulára, ktoré podporuje viacero riadkov textu. Zmeniťrows atribút podľa potreby.

  1. < riadky textovej oblasti  = "3" ></textarea>

Zaškrtávacie políčka a rádiá

Začiarkavacie políčka slúžia na výber jednej alebo viacerých možností v zozname, zatiaľ čo rádiá sú na výber jednej možnosti z mnohých.

Predvolené (zoskupené)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = ""   >
  3.   Prvá možnosť je toto a toto – nezabudnite uviesť, prečo je to skvelé
  4. </label>
  5.  
  6. <label class = "rádio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" zaškrtnuté >     
  8.   Prvá možnosť je toto a toto – nezabudnite uviesť, prečo je to skvelé
  9. </label>
  10. <label class = "rádio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2"     >
  12.   Druhá možnosť môže byť niečo iné a jej výber zruší výber možnosti jedna
  13. </label>

Vložené začiarkavacie políčka

Pridajte .inlinetriedu do série začiarkavacích políčok alebo sa na rovnakom riadku zobrazia ovládacie prvky.

  1. <label class = "vložené začiarkavacie políčko" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "vložené začiarkavacie políčko" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" >    2
  6. </label>
  7. <label class = "vložené začiarkavacie políčko" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Vyberie

multiple="multiple"Ak chcete zobraziť viacero možností naraz, použite predvolenú možnosť alebo zadajte a .


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

Rozšírenie ovládacích prvkov formulára

Okrem existujúcich ovládacích prvkov prehliadača obsahuje Bootstrap ďalšie užitočné komponenty formulárov.

Pripojené a pripojené vstupy

Pridajte text alebo tlačidlá pred alebo za akýkoľvek textový vstup. Upozorňujeme, že selectprvky tu nie sú podporované.

Predvolené možnosti

Ak chcete pridať text pred alebo pridať k vstupu, obaľte a a jednu z dvoch tried .add-on.input

@

0,00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" zástupný symbol = "Používateľské meno" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "add-on" > 0,00 </span> 
  8. </div>

Kombinované

.add-onNa pridanie a pridanie vstupu použite obe triedy a dve inštancie .

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

Tlačidlá namiesto textu

Namiesto a <span>s textom použite a .btnna pripojenie tlačidla (alebo dvoch) k vstupu.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " typ = "text" >   
  3.   <button class = "btn" type = "button" > Choď! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Hľadať </button>  
  4.   <button class = "btn" type = "button" > Možnosti </button>  
  5. </div>

Rozbaľovacie zoznamy tlačidiel

  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.       Akcia
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "rozbaľovacia ponuka" > 
  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.       Akcia
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "rozbaľovacia ponuka" > 
  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.       Akcia
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "rozbaľovacia ponuka" > 
  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.       Akcia
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "rozbaľovacia ponuka" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmentované rozbaľovacie skupiny

  1. <form>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     < typ vstupu = "text" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     < typ vstupu = "text" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Vyhľadávací formulár

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Search </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Search </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Ovládanie veľkosti

Použite relatívne triedy veľkostí, ako sú .input-largealebo priraďte svoje vstupy k veľkostiam stĺpcov mriežky pomocou .span*tried.

Vstupy na úrovni bloku

Zabezpečte, aby sa ľubovoľný prvok <input>alebo <textarea>prvok správal ako prvok na úrovni bloku.

  1. <input class = "input-block-level" type = "text" zástupný symbol = ".input-block-level" >

Relatívna veľkosť

  1. <input class = "input-mini" type = "text" zástupný symbol = ".input-mini" >   
  2. <input class = "input-small" type = "text" zástupný symbol = ".input-small" >   
  3. <input class = "input-medium" type = "text" zástupný symbol = ".input-medium" >   
  4. <input class = "input-large" type = "text" zástupný symbol = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" zástupný symbol = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" zástupný symbol = ".input-xxlarge" >

Hlavy hore!V budúcich verziách zmeníme použitie týchto relatívnych vstupných tried tak, aby zodpovedali našim veľkostiam tlačidiel. Napríklad,.input-large zväčší výplň a veľkosť písma vstupu.

Dimenzovanie mriežky

Použite .span1na .span12pre vstupy, ktoré zodpovedajú rovnakým veľkostiam stĺpcov mriežky.

  1. <input class = "span1" type = "text" zástupný symbol = ".span1" >   
  2. <input class = "span2" type = "text" zástupný symbol = ".span2" >   
  3. <input class = "span3" type = "text" zástupný symbol = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

V prípade viacerých vstupov mriežky na riadok použite .controls-rowtriedu modifikátora na správne rozmiestnenie . Pohybuje vstupy, aby sa zbalili biele miesta, nastavujú sa správne okraje a vymazávajú sa pohyblivé znaky.

  1. <div class = "controls" > 
  2.   <input class = "span5" type = "text" zástupný symbol = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" zástupný symbol = ".span4" >   
  6.   <input class = "span1" type = "text" zástupný symbol = ".span1" >   
  7. </div>
  8. ...

Neupraviteľné vstupy

Prezentujte údaje vo formulári, ktorý nie je možné upravovať bez použitia skutočného označenia formulára.

Nejakú hodnotu tu 
  1. <span class = "input-xlarge uneditable-input" > Tu je nejaká hodnota </span>

Akcie formulára

Ukončite formulár skupinou akcií (tlačidiel). Keď .form-actionssú tlačidlá umiestnené v rámci , automaticky sa odsadia, aby sa zarovnali s ovládacími prvkami formulára.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Uložiť zmeny </button>  
  3.   <button type = "button" class = "btn" > Zrušiť </button>  
  4. </div>

Pomocný text

Podpora na úrovni riadkov a blokov pre pomocný text, ktorý sa zobrazuje okolo ovládacích prvkov formulára.

Inline pomoc

Vložený pomocný text 
  1. <input type = "text" ><span class = "help-inline" > Vložený text pomocníka </span>

Blokovať pomoc

Dlhší blok pomocného textu, ktorý končí na novom riadku a môže presahovať jeden riadok. 
  1. <input type = "text" ><span class = "help-block" > Dlhší blok pomocného textu, ktorý sa zalomí na nový riadok a môže presahovať jeden riadok. </span>

Stavy riadenia formulára

Poskytnite používateľom alebo návštevníkom spätnú väzbu pomocou základných stavov spätnej väzby k ovládacím prvkom formulárov a menovkám.

Zameranie vstupu

Odstránime predvolené outlineštýly na niektorých ovládacích prvkoch formulárov a box-shadownamiesto nich použijeme a pre :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Toto je zamerané..." >

Neplatné vstupy

Štýl vstupov cez predvolenú funkciu prehliadača s :invalid. Zadajte a type, pridajte requiredatribút, ak pole nie je voliteľné, a (ak je to vhodné) zadajte pattern.

Táto funkcia nie je k dispozícii vo verziách prehliadača Internet Explorer 7-9 z dôvodu nedostatočnej podpory pseudoselektorov CSS.

  1. <input class = "span3" type = "email" povinné >

Zakázané vstupy

Pridajte disabledatribút na vstup, aby ste zabránili vstupu používateľa a vyvolali mierne odlišný vzhľad.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Zakázaný vstup tu..." vypnutý >

Stavy overenia

Bootstrap obsahuje overovacie štýly pre chybové, varovné, informačné a úspešné správy. Ak chcete použiť, pridajte príslušnú triedu do okolitého súboru .control-group.

Niečo sa mohlo pokaziť
Opravte chybu
Používateľské meno sa používa
Woohoo! 
  1. <div class = "control-group warning" > 
  2.   <label class = "control-label" for = "inputWarning" > Vstup s upozornením </label>  
  3.   <div class = "controls" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Niečo sa mohlo pokaziť </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "chyba kontrolnej skupiny" > 
  10.   <label class = "control-label" for = "inputError" > Vstup s chybou </label>  
  11.   <div class = "controls" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Opravte chybu </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "informácie o kontrolnej skupine" > 
  18.   <label class = "control-label" for = "inputInfo" > Vstup s informáciami </label>  
  19.   <div class = "controls" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Používateľské meno je už zadané </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "úspech kontrolnej skupiny" > 
  26.   <label class = "control-label" for = "inputSuccess" > Úspešný vstup </label>  
  27.   <div class = "controls" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Hurá! </span> 
  30.   </div>
  31. </div>

Tlačidlá

Predvolené tlačidlá

Štýly tlačidiel možno použiť na čokoľvek s .btnaplikovanou triedou. Zvyčajne ich však budete chcieť použiť iba na prvky <a>a <button>pre najlepšie vykreslenie.

Tlačidlo class="" Popis
btn Štandardné šedé tlačidlo s prechodom
btn btn-primary Poskytuje dodatočnú vizuálnu váhu a identifikuje primárnu akciu v súprave tlačidiel
btn btn-info Používa sa ako alternatíva k predvoleným štýlom
btn btn-success Označuje úspešnú alebo pozitívnu akciu
btn btn-warning Označuje, že pri tejto činnosti je potrebné postupovať opatrne
btn btn-danger Označuje nebezpečnú alebo potenciálne negatívnu akciu
btn btn-inverse Alternatívne tmavosivé tlačidlo, ktoré nie je viazané na sémantickú akciu alebo použitie
btn btn-link Znížte dôraz na tlačidlo tak, že bude vyzerať ako odkaz a zároveň zachováte správanie tlačidla

Kompatibilita medzi prehliadačmi

IE9 neorezáva prechody pozadia na zaoblených rohoch, takže ho odstránime. Súvisiace, IE9 jankify zakázanýbutton prvky, vykresľuje text sivou farbou s nepríjemným tieňom textu, ktorý nevieme opraviť.

Veľkosti gombíkov

Máte chuť na väčšie alebo menšie tlačidlá? Pridajte .btn-large, .btn-small, alebo .btn-minipre ďalšie veľkosti.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Veľké tlačidlo </button>  
  3.   <button class = "btn btn-large" type = "button" > Veľké tlačidlo </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Predvolené tlačidlo </button>  
  7.   <button class = "btn" type = "button" > Predvolené tlačidlo </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Malé tlačidlo </button>  
  11.   <button class = "btn btn-small" type = "button" > Malé tlačidlo </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini button </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini tlačidlo </button>  
  16. </p>

Vytvorte tlačidlá na úrovni bloku – tie, ktoré presahujú celú šírku rodiča – pridaním .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > tlačidlo na úrovni blokovania </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > tlačidlo na úrovni blokovania </button>

Deaktivovaný stav

Tlačidlá budú vyzerať tak, že sa na ne nedá kliknúť ich vyblednutím o 50 %.

Kotviaci prvok

Pridajte .disabledtriedu do <a>tlačidiel.

Primárny odkaz Odkaz 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Primárny odkaz </a>  
  2. <a href = "#" class = "btn btn-large disabled" > Link </a>

Hlavy hore!Tu používame .disabledako pomocnú triedu, podobnú bežnej .activetriede, takže nie je potrebná žiadna predpona. Táto trieda je tiež určená len pre estetiku; na zakázanie odkazov tu musíte použiť vlastný JavaScript.

Prvok tlačidla

Pridajte disabledatribút k <button>tlačidlám.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Primárne tlačidlo </button>   
  2. <button type = "button" class = "btn btn-large" vypnuté > Tlačidlo </button>

Jedna trieda, viacero značiek

Použite .btntriedu na prvok <a>, <button>, alebo .<input>

Odkaz 
  1. <a class = "btn" href = "" > Odkaz </a>  
  2. <button class = "btn" type = "submit" > Tlačidlo </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

Ako osvedčený postup sa pokúste priradiť prvok k svojmu kontextu, aby ste zaistili zodpovedajúce vykresľovanie naprieč prehliadačmi. Ak máte input, použite ako <input type="submit">tlačidlo.

snímky

Pridajte triedy do <img>prvku, aby ste mohli jednoducho upravovať obrázky v akomkoľvek projekte.

140 x 140 140 x 140 140 x 140 
  1. <img src = "..." class = "img-zaokrúhlené" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

Hlavy hore! .img-roundeda .img-circlenefungujú v IE7-8 kvôli nedostatku border-radiuspodpory.

Ikony od Glyphicons

Glyfy ikon

140 ikon vo forme sprite, dostupných v tmavosivej (predvolenej) a bielej farbe, ktoré poskytuje Glyphicons .

  • ikona-sklo
  • ikona-hudba
  • vyhľadávanie ikon
  • ikona-obálka
  • ikona-srdce
  • ikona-hviezda
  • ikona-hviezda-prázdna
  • ikona-užívateľ
  • ikona-film
  • ikona-tá-veľká
  • ikona-th
  • ikona-tý-zoznam
  • ikona-ok
  • ikonu odstrániť
  • ikona-zoom-in
  • ikona-oddialiť
  • ikona vypnutá
  • ikona-signál
  • ikona ozubeného kolieska
  • ikona-kôš
  • ikona-domov
  • súbor ikon
  • ikona-čas
  • ikona-cesta
  • ikona-stiahnutie-alt
  • ikona na stiahnutie
  • nahrávanie ikon
  • ikona-doručená pošta
  • ikona-play-circle
  • ikona-opakovanie
  • ikona-obnoviť
  • ikona-zoznam-alt
  • ikona zámku
  • ikona-vlajka
  • ikona-slúchadlá
  • ikona-vypnutie hlasitosti
  • ikona-zníženie hlasitosti
  • ikona-zvýšenie hlasitosti
  • ikona-qrcode
  • ikona-čiarový kód
  • ikona-tag
  • značky ikon
  • kniha ikon
  • ikona-záložka
  • ikona-tlač
  • ikona-kamera
  • ikona-font
  • ikona tučná
  • ikona-kurzíva
  • ikona-výška textu
  • ikona-šírka textu
  • ikona-zarovnať-vľavo
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • zoznam ikon
  • ikona-odsadenie-vľavo
  • ikona-odsadenie-vpravo
  • ikona-facetime-video
  • ikona-obrázok
  • ikona-ceruzka
  • ikona-mapa-značka
  • ikona-upraviť
  • ikona-odtieň
  • ikona-upraviť
  • zdieľanie ikon
  • ikona-kontrola
  • ikona-presun
  • ikona-krok vzad
  • ikona-rýchlo dozadu
  • ikona dozadu
  • prehrávanie ikon
  • ikona-pauza
  • ikona-stop
  • ikona-dopredu
  • ikona rýchleho posunu vpred
  • ikona-krok vpred
  • ikona-vysunutie
  • ikona-chevron-vľavo
  • ikona-chevron-vpravo
  • ikona-znamienko plus
  • ikona-znamienko mínus
  • ikona-odstrániť-znamenie
  • ikona-ok-znamenie
  • ikona-otázka-znamenie
  • ikona-info-znamenie
  • ikona-snímka obrazovky
  • ikona-odstrániť-kruh
  • ikona-ok-kruh
  • ikona-zákaz-kruh
  • ikona-šípka-vľavo
  • ikona-šípka-vpravo
  • ikona-šípka nahor
  • ikona-šípka-dole
  • icon-share-alt
  • ikona-zmena veľkosti-plná
  • ikona-zmena-veľkosť-malá
  • ikona plus
  • ikona mínus
  • ikona-hviezdička
  • ikona-výkričník-znamenie
  • ikona-darček
  • ikona-list
  • ikona-oheň
  • ikona-oko-otvorené
  • ikona-oko-zavrieť
  • ikona-varovný-znamenie
  • ikona-rovina
  • ikona-kalendár
  • ikona-náhodná
  • ikona-komentár
  • ikona-magnet
  • ikona so šípkou hore
  • ikona-šipka-dole
  • ikona-retweet
  • ikona-nákupný-košík
  • ikona-priečinok-zavrieť
  • ikona-priečinok-otvoriť
  • ikona-zmena-veľkosti-vertikálne
  • ikona-zmena-veľkosť-horizontálne
  • ikona-hdd
  • ikona-bullhorn
  • ikona-zvonček
  • ikona-certifikát
  • ikona-palec hore
  • ikona-palec-dole
  • ikona-ruka-vpravo
  • ikona-ruka-vľavo
  • ikona-ruka hore
  • ikona-ručne nadol
  • ikona-kruh-šípka-vpravo
  • ikona-kruh-šípka-vľavo
  • ikona-kruh-šípka-nahor
  • ikona-kruh-šípka-dole
  • ikona zemegule
  • ikonový kľúč
  • ikony-úlohy
  • ikona-filter
  • ikona-aktovka
  • ikona na celú obrazovku

Priradenie glyfík

Glyphicons Halflings bežne nie sú k dispozícii zadarmo, ale dohoda medzi Bootstrap a tvorcami Glyphicons to umožnila bez nákladov pre vás ako vývojárov. Ako poďakovanie vás žiadame, aby ste zahrnuli voliteľný odkaz späť na Glyphicons vždy, keď to bude praktické.

Ako použiť

Všetky ikony vyžadujú <i>značku s jedinečnou triedou s predponou icon-. Ak chcete použiť, umiestnite nasledujúci kód takmer kdekoľvek:

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

K dispozícii sú aj štýly pre obrátené (biele) ikony, pripravené s jednou extra triedou. Túto triedu budeme špecificky presadzovať pri umiestnení kurzora myši a aktívnych stavoch pre navigačné a rozbaľovacie odkazy.

  1. <i class = "ikona-vyhľadávanie ikon-biela" ></i>

Hlavy hore!Pri použití vedľa textových reťazcov, ako sú tlačidlá alebo navigačné odkazy, nezabudnite ponechať medzeru za <i>značkou, aby sa dosiahli správne medzery.

Príklady ikon

Použite ich v tlačidlách, skupinách tlačidiel pre panel s nástrojmi, navigáciu alebo vstupy do formulárov.

Tlačidlá

Skupina tlačidiel na paneli s nástrojmi tlačidiel
  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>
Rozbaľovacia ponuka v skupine tlačidiel
Používateľ 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Používateľ </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "rozbaľovacia ponuka" > 
  5.     <li><a href = "#" ><i class = "icon-ceruzka" ></i> Upraviť </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Odstrániť </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Zákaz </a></li>  
  8.     <li class = "delider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Urobiť správcu </a></li>  
  10.   </ul>
  11. </div>
Veľkosti gombíkov
Hviezda Hviezda Hviezda 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Hviezda </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Hviezda </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Hviezda </a>

Navigácia

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Domov </a></li>   
  3.   <li><a href = "#" ><i class = "kniha ikon" ></i> Knižnica </a></li>  
  4.   <li><a href = "#" ><i class = "icon-ceruzka" ></i> Aplikácie </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Rôzne </a></li>  
  6. </ul>

Polia formulára

  1. <div class = "control-group" > 
  2.   <label class = "control-label" for = "inputIcon" > E-mailová adresa </label>  
  3.   <div class = "controls" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "doplnok" ><i class = "ikona-obálka" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>