Bootstrap

Základní CSS

Základní prvky HTML stylizované a vylepšené rozšiřitelnými třídami.

Hlavy vzhůru! Tyto dokumenty jsou pro verzi 2.3.2, která již není oficiálně podporována. Podívejte se na nejnovější verzi Bootstrapu!

Typografie

Nadpisy

Všechny HTML nadpisy jsou <h1>k <h6>dispozici.

h1. Nadpis 1

h2. Nadpis 2

h3. Nadpis 3

h4. Nadpis 4

h5. Nadpis 5
h6. Nadpis 6

Kopie těla

Globální výchozí nastavení Bootstrapu font-sizeje 14px s line-heighthodnotou 20px . To platí pro <body>odstavce a všechny. Kromě toho <p>(odstavce) obdrží spodní okraj poloviční své výšky řádku (10 pixelů ve výchozím nastavení).

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>

Kopie těla olova

Nechte odstavec vyniknout přidáním .lead.

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

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

Postaveno s Less

Typografická škála je založena na dvou proměnných LESS v proměnných.less : @baseFontSizea @baseLineHeight. První je základní velikost písma použitá v celém textu a druhá je výška základního řádku. Tyto proměnné a nějakou jednoduchou matematiku používáme k vytvoření okrajů, odsazení a výšek řádků všech našich typů a dalších. Přizpůsobte si je a Bootstrap se přizpůsobí.

Důraz

Využijte výchozí značky zvýraznění HTML s odlehčenými styly.

<small>

Pro snížení zvýraznění vloženého textu nebo bloků textu použijte malou značku.

Tento řádek textu má být považován za drobný tisk.

<p> <small> Tento řádek textu má být považován za drobný tisk. </small> </p>

tučně

Pro zvýraznění úryvku textu s vyšší gramáží písma.

Následující úryvek textu je vykreslen jako tučný text .

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

Kurzíva

Pro zvýraznění úryvku textu kurzívou.

Následující úryvek textu je vykreslen jako text psaný kurzívou .

<em> vykreslen jako text psaný kurzívou </em>

Hlavy vzhůru!Klidně používejte <b>a <i>v HTML5. <b>je určen ke zvýraznění slov nebo frází, aniž by zdůrazňoval další důležitost, zatímco <i>je většinou pro hlas, technické výrazy atd.

Třídy zarovnání

Snadno znovu zarovnejte text ke komponentám pomocí tříd zarovnání textu.

Text zarovnaný doleva.

Text zarovnaný na střed.

Text zarovnaný vpravo.

  1. <p class = "text-left" > Text zarovnaný doleva. </p> 
  2. <p class = "text-center" > Text zarovnaný na střed. </p> 
  3. <p class = "text-right" > Text zarovnaný doprava. </p>

Třídy důrazu

Přeneste význam prostřednictvím barev s několika zdůrazněnými užitnými třídami.

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>

Zkratky

Stylizovaná implementace prvku HTML <abbr>pro zkratky a akronymy pro zobrazení rozšířené verze při umístění kurzoru myši. Zkratky s titleatributem mají při umístění kurzoru světle tečkovaný spodní okraj a pomocný kurzor, který poskytuje další kontext při umístění kurzoru.

<abbr>

U rozšířeného textu při dlouhém umístění kurzoru na zkratku uveďte titleatribut.

Zkratka slova atribut je attr .

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

<abbr class="initialism">

Přidejte .initialismke zkratce pro trochu menší velikost písma.

HTML je nejlepší věc od krájeného chleba.

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

Adresy

Uveďte kontaktní informace na nejbližšího předka nebo celé dílo.

<address>

Zachovejte formátování ukončením všech řádků znakem <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Celé jméno
[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 = "Telefon" > P: </abbr> (123) 456-7890 
  6. </adresa>
  7.  
  8. <adresa>
  9.   <strong> Celé jméno </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </adresa>

Blokové uvozovky

Pro citování bloků obsahu z jiného zdroje ve vašem dokumentu.

Výchozí bloková nabídka

Zabalte <blockquote>do nabídky jakýkoli HTML . Pro přímé uvozovky doporučujeme <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

Změny stylu a obsahu pro jednoduché variace na standardní blokovou nabídku.

Pojmenování zdroje

Přidejte <small>značku pro identifikaci zdroje. Zabalte název zdrojového díla do <cite>.

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

Někdo slavný v Source Title 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elita. Celé číslo posuere erat a ante. </p>
  3.   <small> Někdo slavný <cite title = "Source Title" > Zdrojový název </cite></small> 
  4. </blockquote>

Střídavé displeje

Použijte .pull-rightpro plovoucí, vpravo zarovnané blokové uvozovky.

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

Někdo slavný v Source Title 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Seznamy

Neuspořádané

Seznam položek, u kterých na pořadí výslovně 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 vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Objednáno

Seznam položek, u kterých na pořadí výslovně 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 vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Bez stylu

Odeberte výchozí list-stylea levé odsazení u položek seznamu (pouze okamžité děti).

  • 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 vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

V souladu

Umístěte všechny položky seznamu na jeden řádek s inline-blocklehkým odsazením.

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

Popis

Seznam výrazů s jejich přidruženými popisy.

Popisné seznamy
Popisný seznam je ideální pro definování termínů.
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ální popis

Seřaďte termíny a popisy <dl>vedle sebe.

Popisné seznamy
Popisný seznam je ideální pro definování termínů.
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ální" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Hlavy vzhůru!Vodorovné seznamy popisů zkrátí výrazy, které jsou příliš dlouhé a nevejdou se do opravy v levém sloupci text-overflow. V užších výřezech se změní na výchozí skládané rozvržení.

Kód

V souladu

Zabalte vložené úryvky kódu pomocí <code>.

Například <section>by měl být zabalen jako vložený. 
  1. Například < code > & lt ; sekce & gt ;</ code > by měla být zabalena jako vložená .

Základní blok

Použijte <pre>pro více řádků kódu. Pro správné vykreslení nezapomeňte v kódu vynechat všechny lomené závorky.

<p>Ukázkový text zde...</p>
  1. <před>
  2.   <p>Ukázka textu zde...</p>
  3. </pre>

Hlavy vzhůru!Ujistěte se, že kód ve <pre>značkách držíte co nejblíže vlevo; vykreslí všechny karty.

Volitelně můžete přidat .pre-scrollabletřídu, která nastaví maximální výšku 350 pixelů a poskytne posuvník na ose y.

Tabulky

Výchozí styly

Pro základní styl – světlé vycpávky a pouze vodorovné oddělovače – přidejte základní třídu .tabledo libovolné <table>.

# Jméno Příjmení Uživatelské jméno
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Larry pták @cvrlikání 
  1. <table class = "table" > 
  2.   …
  3. </table>

Volitelné třídy

Přidejte kteroukoli z následujících tříd do .tablezákladní třídy.

.table-striped

Přidá pruhování zebry do libovolného řádku tabulky v rámci <tbody>selektoru :nth-childCSS (není k dispozici v IE7-8).

# Jméno Příjmení Uživatelské jméno
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Larry pták @cvrlikání 
  1. < třída tabulky = "tabulka s pruhy tabulky" > 
  2.   …
  3. </table>

.table-bordered

Přidejte do tabulky okraje a zaoblené rohy.

# Jméno Příjmení Uživatelské jméno
1 Označit Otto @mdo
Označit Otto @getbootstrap
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
  1. < třída tabulky = "tabulka ohraničená tabulkou" > 
  2.   …
  3. </table>

.table-hover

Povolit stav přechodu na řádky tabulky v rámci <tbody>.

# Jméno Příjmení Uživatelské jméno
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
  1. <table class = "table-hover" > 
  2.   …
  3. </table>

.table-condensed

Dělá stoly kompaktnější tím, že zkrátí výplň buněk na polovinu.

# Jméno Příjmení Uživatelské jméno
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
  1. <table class = "table table-condended" > 
  2.   …
  3. </table>

Volitelné třídy řádků

K obarvení řádků tabulky použijte kontextové třídy.

Třída Popis
.success Označuje úspěšnou nebo pozitivní akci.
.error Označuje nebezpečnou nebo potenciálně negativní akci.
.warning Označuje varování, které může vyžadovat pozornost.
.info Používá se jako alternativa k výchozím stylům.
# Produkt Platba přijata Postavení
1 TBC – měsíčně 01/04/2012 Schválený
2 TBC – měsíčně 02/04/2012 Odmítnuto
3 TBC – měsíčně 03/04/2012 čekající
4 TBC – měsíčně 4. 4. 2012 Zavolejte pro potvrzení 
  1. ...
  2.   < třída tr = "úspěch" >
  3.     <td> 1 < /td>
  4.     <td>TB – měsíčně</ td >
  5.     < td > 01/04/2012 < / td >
  6.     <td>Schváleno</ td >
  7.   </ tr >
  8. ...

Podporované značení tabulek

Seznam podporovaných prvků HTML tabulky a způsob jejich použití.

Štítek Popis
<table> Obalový prvek pro zobrazení dat v tabulkovém formátu
<thead> Prvek kontejneru pro řádky záhlaví tabulky ( <tr>) pro označení sloupců tabulky
<tbody> Prvek kontejneru pro řádky tabulky ( <tr>) v těle tabulky
<tr> Prvek kontejneru pro sadu buněk tabulky ( <td>nebo <th>), který se zobrazí na jednom řádku
<td> Výchozí buňka tabulky
<th> Speciální buňka tabulky pro popisky sloupců (nebo řádků, v závislosti na rozsahu a umístění).
<caption> Popis nebo shrnutí toho, co tabulka obsahuje, zvláště užitečné pro čtečky obrazovky 
  1. <tabulka>
  2.   <caption> ... </caption>
  3.   <hlava>
  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áře

Výchozí styly

Jednotlivé ovládací prvky formuláře dostávají styl, ale bez jakékoli požadované základní třídy <form>nebo velkých změn v označení. Výsledkem jsou skládané štítky zarovnané doleva nad ovládacími prvky formuláře.

Legenda Příklad textu nápovědy na úrovni bloku zde. 
  1. <formulář>
  2.   <fieldset>
  3.     <legend> Legenda </legend>
  4.     <label> Název štítku </label>
  5.     <input type = "text" zástupný symbol = "Napište něco…" >  
  6.     <span class = "help-block" > Příklad textu nápovědy na úrovni bloku zde. </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>

Volitelné rozvržení

Součástí Bootstrapu jsou tři volitelná rozvržení formulářů pro běžné případy použití.

Vyhledávací formulář

Přidejte .form-searchdo formuláře a .search-querydo <input>pro extra zaoblený textový vstup.

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

Inline formulář

Přidejte .form-inlineštítky zarovnané doleva a ovládací prvky vložené do bloku pro kompaktní rozvržení.

  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" > Zapamatovat si mě 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Přihlásit se </button>  
  8. </form>

Horizontální tvar

Štítky zarovnejte doprava a posuňte je doleva, aby se zobrazily na stejném řádku jako ovládací prvky. Vyžaduje nejvíce změn značek oproti výchozímu formuláři:

  • Přidejte .form-horizontaldo formuláře
  • Zabalte štítky a ovládací prvky.control-group
  • Přidejte .control-labelna štítek
  • .controlsPro správné zarovnání zabalte všechny související ovládací prvky
  1. < třída formuláře = "forma-horizontální" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > E-mail </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" > Zapamatovat si mě 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Přihlásit se </button>  
  20.     </div>
  21.   </div>
  22. </form>

Podporované ovládací prvky formuláře

Příklady standardních ovládacích prvků formuláře podporovaných v ukázkovém rozložení formuláře.

Vstupy

Nejběžnější ovládací prvek formuláře, textová vstupní pole. Zahrnuje podporu pro všechny typy HTML5: text, heslo, datum a čas, datum a čas-místní, datum, měsíc, čas, týden, číslo, e-mail, adresa URL, vyhledávání, tel a barva.

Vždy vyžaduje použití specifikovaného type.

  1. < typ vstupu = "text" zástupný symbol = "Zadávání textu" >

Textarea

Ovládací prvek formuláře, který podporuje více řádků textu. Změňte rowsatribut podle potřeby.

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

Zaškrtávací políčka a rádia

Zaškrtávací políčka jsou pro výběr jedné nebo několika možností v seznamu, zatímco rádia jsou pro výběr jedné možnosti z mnoha.

Výchozí (skládaný)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Možnost jedna je to a to – nezapomeňte uvést, proč je to skvělé
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" zaškrtnuto >     
  8.   Možnost jedna je to a to – nezapomeňte uvést, proč je to skvělé
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Možnost dvě může být něco jiného a její výběr zruší výběr možnosti jedna
  13. </label>

Vložená zaškrtávací políčka

Přidejte .inlinetřídu do řady zaškrtávacích políček nebo se na stejném řádku zobrazí přepínače pro ovládací prvky.

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

Vybírá

Použijte výchozí možnost nebo zadejte a, chcete- multiple="multiple"li zobrazit více možností najednou.


  1. <vybrat>
  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šíření ovládacích prvků formuláře

Kromě stávajících ovládacích prvků prohlížeče Bootstrap obsahuje další užitečné komponenty formuláře.

Předpřipojené a připojené vstupy

Přidejte text nebo tlačítka před nebo za jakýkoli textový vstup. Pamatujte, že selectprvky zde nejsou podporovány.

Výchozí možnosti

Zabalte .add-ona a inputjednou ze dvou tříd, chcete-li ke vstupu přidat nebo přidat text.

@

0,00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" zástupný symbol = "Uživatelské jméno" >    
  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ý

Použijte obě třídy a dvě instance .add-onpro předřazení a připojení vstupu.

$ 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čítka místo textu

Místo a <span>s textem použijte a .btnk připojení tlačítka (nebo dvou) ke vstupu.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " typ = "text" >   
  3.   <button class = "btn" type = "button" > Go! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Hledat </button>  
  4.   <button class = "btn" type = "button" > Možnosti </button>  
  5. </div>

Rozbalovací seznamy tlačítek

  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.       Akce
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "rozbalovací nabídka" > 
  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.       Akce
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "rozbalovací nabídka" > 
  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.       Akce
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "rozbalovací nabídka" > 
  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.       Akce
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "rozbalovací nabídka" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmentované rozbalovací skupiny

  1. <formulář>
  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>

Vyhledávací formulář

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 vyhledávací dotaz" >  
  4.     <button type = "submit" class = "btn" > Hledat </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Hledat </button>  
  8.     <input type = "text" class = "span2 vyhledávací dotaz" >  
  9.   </div>
  10. </form>

Kontrola velikosti

Použijte relativní třídy velikosti, jako jsou .input-largenebo přiřaďte své vstupy velikostem sloupců mřížky pomocí .span*tříd.

Vstupy na úrovni bloku

Zajistěte, aby se jakýkoli prvek <input>nebo <textarea>prvek choval jako prvek na úrovni bloku.

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

Relativní dimenzování

  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 vzhůru!V budoucích verzích změníme použití těchto relativních vstupních tříd tak, aby odpovídaly velikosti našich tlačítek. Například .input-largezvýší výplň a velikost písma vstupu.

Dimenzování mřížky

Použijte .span1to .span12pro vstupy, které odpovídají stejným velikostem sloupců mříž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>

Pro více vstupů mřížky na řádek použijte .controls-rowpro správné rozestupy třídu modifikátoru . Plovoucí vstupy sbalí prázdné znaky, nastaví správné okraje a vymaže plovoucí hodnotu.

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

Neupravitelné vstupy

Prezentujte data ve formuláři, který nelze upravovat bez použití skutečného označení formuláře.

Nějaká hodnota tady 
  1. <span class = "input-xlarge uneditable-input" > Nějaká hodnota zde </span>

Formální akce

Ukončete formulář skupinou akcí (tlačítek). Když jsou tlačítka umístěna do .form-actions, automaticky se odsadí, aby se zarovnala s ovládacími prvky formuláře.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Uložit změny </button>  
  3.   <button type = "button" class = "btn" > Zrušit </button>  
  4. </div>

Pomocný text

Vložená a bloková podpora pro text nápovědy, který se zobrazuje kolem ovládacích prvků formuláře.

Inline nápověda

Vložený text nápovědy 
  1. <input type = "text" ><span class = "help-inline" > Vložený text nápovědy </span>

Blokovat nápovědu

Delší blok textu nápovědy, který končí na novém řádku a může přesahovat jeden řádek. 
  1. <input type = "text" ><span class = "help-block" > Delší blok textu nápovědy, který se zalomí na nový řádek a může přesahovat jeden řádek. </span>

Stavy řízení formuláře

Poskytněte zpětnou vazbu uživatelům nebo návštěvníkům pomocí základních stavů zpětné vazby k ovládacím prvkům formulářů a štítkům.

Vstupní zaměření

Odebereme výchozí outlinestyly u některých ovládacích prvků formuláře a použijeme na box-shadowjeho místo pro :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Toto je zaměřeno..." >

Neplatné vstupy

Styl vstupů prostřednictvím výchozí funkce prohlížeče s :invalid. Zadejte a type, přidejte requiredatribut, pokud pole není volitelné, a (pokud existuje) zadejte pattern.

Toto není k dispozici ve verzích Internet Exploreru 7-9 kvůli nedostatečné podpoře pseudoselektorů CSS.

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

Zakázané vstupy

Přidejte disabledatribut na vstup, abyste zabránili vstupu uživatele a vyvolali mírně odlišný vzhled.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Deaktivován vstup zde..." vypnuto >

Stavy ověření

Bootstrap obsahuje styly ověření chyb, varování, informací a zpráv o úspěchu. Chcete-li použít, přidejte příslušnou třídu do okolního .control-group.

Něco se mohlo pokazit
Opravte prosím chybu
Uživatelské jméno je obsazeno
Woohoo! 
  1. <div class = "control-group warning" > 
  2.   <label class = "control-label" for = "inputWarning" > Vstup s varováním </label>  
  3.   <div class = "controls" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Něco se mohlo pokazit </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "chyba kontrolní 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 prosím chybu </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "control-group info" > 
  18.   <label class = "control-label" for = "inputInfo" > Vstup s informacemi </label>  
  19.   <div class = "controls" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Uživatelské jméno je již obsazeno </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "úspěch kontrolní skupiny" > 
  26.   <label class = "control-label" for = "inputSuccess" > Úspěšné zadání </label>  
  27.   <div class = "controls" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Hurá! </span> 
  30.   </div>
  31. </div>

Tlačítka

Výchozí tlačítka

Styly tlačítek lze použít na cokoli s .btnaplikovanou třídou. Obvykle je však budete chtít použít pouze na prvky <a>a <button>pro nejlepší vykreslení.

Knoflík class="" Popis
btn Standardní šedé tlačítko s přechodem
btn btn-primary Poskytuje extra vizuální váhu a identifikuje primární akci v sadě tlačítek
btn btn-info Používá se jako alternativa k výchozím stylům
btn btn-success Označuje úspěšnou nebo pozitivní akci
btn btn-warning Označuje, že při této akci je třeba postupovat opatrně
btn btn-danger Označuje nebezpečnou nebo potenciálně negativní akci
btn btn-inverse Alternativní tmavě šedé tlačítko, které není vázáno na sémantickou akci nebo použití
btn btn-link Znižte důraz na tlačítko tím, že bude vypadat jako odkaz, při zachování chování tlačítka

Kompatibilita mezi prohlížeči

IE9 neořízne přechody pozadí na zaoblených rozích, takže jej odstraníme. Související, IE9 zneškodňuje zakázané buttonprvky, vykresluje text šedě s ošklivým stínem textu, který nemůžeme opravit.

Velikosti knoflíků

Máte rádi větší nebo menší tlačítka? Přidejte .btn-large, .btn-small, nebo .btn-minipro další velikosti.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Velké tlačítko </button>  
  3.   <button class = "btn btn-large" type = "button" > Velké tlačítko </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Výchozí tlačítko </button>  
  7.   <button class = "btn" type = "button" > Výchozí tlačítko </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Malé tlačítko </button>  
  11.   <button class = "btn btn-small" type = "button" > Malé tlačítko </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini tlačítko </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini tlačítko </button>  
  16. </p>

Vytvořte tlačítka na úrovni bloku – ta, která zabírají celou šířku nadřazeného prvku – přidáním .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Tlačítko úrovně blokování </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Tlačítko úrovně blokování </button>

Deaktivovaný stav

Změníte-li tlačítka o 50% zpět, budou vypadat tak, že na ně nelze kliknout.

Kotevní prvek

Přidejte .disabledtřídu do <a>tlačítek.

Primární odkaz Odkaz 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Primární odkaz </a>  
  2. <a href = "#" class = "btn btn-large zakázán" > Odkaz </a>

Hlavy vzhůru!Používáme .disabledzde třídu utility, podobnou běžné .activetřídě, takže není vyžadována žádná předpona. Také tato třída je pouze pro estetiku; k deaktivaci odkazů zde musíte použít vlastní JavaScript.

Prvek tlačítka

Přidejte disabledatribut k <button>tlačítkům.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Primární tlačítko </button>   
  2. <button type = "button" class = "btn btn-large" vypnuto > Tlačítko </button>

Jedna třída, více značek

Použijte .btntřídu pro prvek <a>, <button>, nebo <input>.

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

Nejlepším postupem je pokusit se přiřadit prvek ke svému kontextu, abyste zajistili odpovídající vykreslování napříč prohlížeči. Pokud máte input, použijte <input type="submit">pro své tlačítko an.

snímky

Přidejte třídy k <img>prvku, abyste mohli snadno stylizovat obrázky v libovolném projektu.

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

Hlavy vzhůru! .img-roundeda .img-circlenefungují v IE7-8 kvůli nedostatku border-radiuspodpory.

Ikony od Glyphicons

Ikona glyfy

140 ikon ve formě sprite, dostupných v tmavě šedé (výchozí) a bílé, poskytuje Glyphicons .

  • ikona-sklo
  • ikona-hudba
  • vyhledávání ikon
  • ikona-obálka
  • ikona srdce
  • ikona-hvězda
  • ikona-hvězda-prázdná
  • ikona-uživatel
  • ikona-film
  • ikona-th-velká
  • ikona-th
  • ikona-th-list
  • ikona - ok
  • ikonu odstranit
  • ikona-přiblížení
  • ikona-oddálení
  • ikona vypnutá
  • ikona-signál
  • ikona ozubeného kola
  • ikona koše
  • ikona-domov
  • soubor ikon
  • ikona-čas
  • ikona silnice
  • ikona-stáhnout-alt
  • ikona ke stažení
  • nahrání ikon
  • ikona-doručená pošta
  • ikona-play-circle
  • opakování ikony
  • ikona-obnovení
  • icon-list-alt
  • ikona zámku
  • ikona-vlajka
  • ikona sluchátka
  • ikona-vypnutí hlasitosti
  • ikona-snížení hlasitosti
  • ikona-zvýšit hlasitost
  • ikona-qrcode
  • ikona-čárový kód
  • ikona-tag
  • značky ikon
  • kniha ikon
  • ikona-záložka
  • ikonový tisk
  • ikona-kamera
  • ikona-font
  • ikona tučně
  • ikona kurzíva
  • ikona-výška textu
  • ikona-šířka textu
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • seznam ikon
  • ikona-odsazení-vlevo
  • ikona-odsazení-vpravo
  • ikona-facetime-video
  • ikona-obrázek
  • ikona tužka
  • ikona-mapa-značka
  • upravit ikonu
  • odstín ikony
  • ikona-upravit
  • sdílení ikon
  • ikona-kontrola
  • ikona-pohyb
  • ikona-krok vzad
  • ikona-rychle-vzad
  • ikona-zpět
  • přehrávání ikon
  • ikona-pauza
  • ikona-stop
  • ikona vpřed
  • ikona-rychle vpřed
  • ikona-krok vpřed
  • ikona-vysunutí
  • ikona-chevron-levá
  • ikona-chevron-vpravo
  • ikona plus znaménko
  • ikona-znaménko mínus
  • ikona-odstranit-podepsat
  • ikona-ok-sign
  • ikona-otazník-znak
  • ikona-informační-znamení
  • ikona-snímek obrazovky
  • ikona-odstranit-kruh
  • ikona-ok-kruh
  • ikona-zákaz-kruh
  • ikona-šipka-doleva
  • ikona-šipka-vpravo
  • ikona-šipka nahoru
  • ikona-šipka-dolů
  • ikona-sdílet-alt
  • ikona-změna velikosti-plná
  • ikona-změna velikosti-malá
  • ikona plus
  • ikona mínus
  • ikona hvězdička
  • ikona-vykřičník-znamení
  • ikona-dárek
  • ikona-list
  • ikona-oheň
  • ikona-oko-otevřené
  • ikona-oko-zavřít
  • ikona-varovné-znamení
  • ikona-rovina
  • ikona kalendáře
  • ikona náhodná
  • ikona-komentář
  • ikona-magnet
  • ikona se šipkou nahoru
  • ikona-šipka dolů
  • ikona-retweet
  • ikona-nákupní-košík
  • ikona-složka-zavřít
  • ikona-složka-otevřená
  • ikona-změna velikosti-vertikálně
  • ikona-size-horizontální
  • ikona-hdd
  • ikona bullhorn
  • ikona zvonek
  • ikona-certifikát
  • ikona palec nahoru
  • ikona-palec-dolů
  • ikona-ruka-vpravo
  • ikona-ruka-vlevo
  • ikona-ruka nahoru
  • ikona-ručně dolů
  • ikona-kruh-šipka-vpravo
  • ikona-kruh-šipka-doleva
  • ikona-kruh-šipka-nahoru
  • ikona-kruh-šipka-dolů
  • ikona zeměkoule
  • ikona klíče
  • ikonové úkoly
  • ikonový filtr
  • ikona aktovka
  • ikona na celou obrazovku

Přiřazení glyfikonů

Glyphicons Halflings normálně nejsou k dispozici zdarma, ale dohoda mezi Bootstrap a tvůrci Glyphicons to umožnila bez nákladů pro vás jako vývojáře. Jako poděkování vás žádáme, abyste zahrnuli volitelný odkaz zpět na Glyphicons , kdykoli to bude praktické.

Jak používat

Všechny ikony vyžadují <i>značku s jedinečnou třídou s předponou icon-. Chcete-li použít, umístěte následující kód téměř kamkoli:

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

K dispozici jsou také styly pro obrácené (bílé) ikony, připravené s jednou třídou navíc. Tuto třídu budeme konkrétně vynucovat při umístění kurzoru a aktivních stavech pro navigační a rozevírací odkazy.

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

Hlavy vzhůru!Při použití vedle textových řetězců, jako jsou tlačítka nebo navigační odkazy, ponechejte za <i>tagem mezeru pro správné rozestupy.

Příklady ikon

Použijte je v tlačítkách, skupinách tlačítek pro panel nástrojů, navigaci nebo vstupy do formuláře.

Tlačítka

Skupina tlačítek na panelu nástrojů tlačítek
  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>
Rozbalovací seznam ve skupině tlačítek
Uživatel 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Uživatel </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "rozbalovací nabídka" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Upravit </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Smazat </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Zákaz </a></li>  
  8.     <li class = "rozdělovač" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Jmenovat správce </a></li>  
  10.   </ul>
  11. </div>
Velikosti knoflíků
Hvězda Hvězda Hvězda 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Hvězdička </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Hvězdička </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Hvězdička </a>

Navigace

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Home </a></li>   
  3.   <li><a href = "#" ><i class = "kniha ikon" ></i> Knihovna </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Aplikace </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Různé </a></li>  
  6. </ul>

Pole formuláře

  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 = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>