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

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

Triedy s dôrazom

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

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<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 nad 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]

<adresa>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Telefón" > P: </abbr> (123) 456-7890 
</address>
 
<adresa>
  <strong> Celé meno </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</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.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante. </p>
</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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante. </p>
  <small> Niekto slávny <cite title = "Názov zdroja" > Názov zdroja </cite></small> 
</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

<blockquote class = "pull-right" > 
  ...
</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

<ul>
  <li> ... </li>
</ul>

Objednané

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elita
Integer molestie lorem at massa
Facilisis v pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla veľ
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</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

<ul class = "unstyled" > 
  <li> ... </li>
</ul>

V rade

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</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.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</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.

<dl class = "dl-horizontálne" > 
  <dt> ... </dt>
  <dd> ... </dd>
</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.

V rade

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

Napríklad <section>by mali byť zabalené ako vložené.

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>

<pred>
  <p>Ukážkový text tu...</p>
</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.

Predvolené štýly

Pre základný štýl – ľahké čalúnenie a iba horizontálne oddeľovače – 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

<table class = "table" > 
  …
</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

<table class = "table table-striped" > 
  …
</table>

`.table-bordered`

Pridajte k stolu okraje a zaoblené rohy.

#	Krstné meno	Priezvisko	Používateľské meno
1	Marka	Otto	@mdo
1	Marka	Otto	@getbootstrap
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

<table class = "table-bordered" > 
  …
</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

<table class = "table-hover" > 
  …
</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

<table class = "table-condended" > 
  …
</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. apríla 2012	Zavolajte a potvrďte

...
  < trieda tr = "úspech" >
    <td> 1 < /td>
    <td>TB – mesačne</ td >
    < td > 01/04/2012 < / td >
    <td>Schválené</ td >
  </ tr >
...

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

<tabuľka>
  <caption> ... </caption>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

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.

<form>
  <fieldset>
    <legend> Legenda </legend>
    <label> Názov menovky </label>
    <input type = "text" zástupný symbol = "Napíšte niečo..." >  
    <span class = "help-block" > Tu je príklad pomocného textu na úrovni bloku. </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > Check me out 
    </label>
    <button type = "submit" class = "btn" > Submit </button>  
  </fieldset>
</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.

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Search </button>  
</form>

Inline formulár

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

<form class = "form-inline" > 
  <input type = "text" class = "input-small" zástupný symbol = "E-mail" >   
  <input type = "password" class = "input-small" zástupný symbol = "Password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Zapamätať si ma 
  </label>
  <button type = "submit" class = "btn" > Prihlásiť sa </button>  
</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é

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > Email </label>  
    <div class = "controls" > 
      <input type = "text" id = "inputEmail" zástupný symbol = "E-mail" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > Heslo </label>  
    <div class = "controls" > 
      <input type = "password" id = "inputPassword" zástupný symbol = "Password" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "controls" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > Zapamätať si ma 
      </label>
      <button type = "submit" class = "btn" > Prihlásiť sa </button>  
    </div>
  </div>
</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.

<input type = "text" zástupný symbol = "Text input" >

Textarea

Ovládanie formulára, ktoré podporuje viacero riadkov textu. Zmeňte rowsatribút podľa potreby.

<textarea rows = "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é)

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  Prvá možnosť je toto a toto – nezabudnite uviesť, prečo je to skvelé
</label>
 
<label class = "rádio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" zaškrtnuté >     
  Prvá možnosť je toto a toto – nezabudnite uviesť, prečo je to skvelé
</label>
<label class = "rádio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Možnosť dva môže byť niečo iné a jeho výber zruší výber možnosti jedna
</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.

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

Vyberie

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

<vybrať>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<select multiple = "multiple" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</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.

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

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

Kombinované

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

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  <span class = "add-on" > 0,00 </span> 
</div>

Tlačidlá namiesto textu

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

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " typ = "text" >   
  <button class = "btn" type = "button" > Choď! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "button" > Hľadať </button>  
  <button class = "btn" type = "button" > Možnosti </button>  
</div>

Rozbaľovacie zoznamy tlačidiel

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Akcia
      <span class = "caret" ></span> 
    </button>
    <ul class = "rozbaľovacia ponuka" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Akcia
      <span class = "caret" ></span> 
    </button>
    <ul class = "rozbaľovacia ponuka" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Akcia
      <span class = "caret" ></span> 
    </button>
    <ul class = "rozbaľovacia ponuka" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Akcia
      <span class = "caret" ></span> 
    </button>
    <ul class = "rozbaľovacia ponuka" > 
      ...
    </ul>
  </div>
</div>

Segmentované rozbaľovacie skupiny

<form>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < typ vstupu = "text" > 
  </div>
  <div class = "input-append" > 
    < typ vstupu = "text" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Vyhľadávací formulár

<form class = "form-search" > 
  <div class = "input-append" > 
    <vstup  type = "text" class = "span2 search-query" > 
    < typ tlačidla = "submit" class = "btn" > Search </button> 
  </div>
  <div class = "input-prepend" > 
    < typ tlačidla = "odoslať"  class = "btn" > Search </button>
    < typ vstupu = "text" class = "span2 search-query" > 
  </div>
</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 ktorýkoľvek prvok <input>alebo <textarea>prvok správal ako prvok na úrovni bloku.

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

Relatívna veľkosť

<input class = "input-mini" type = "text" zástupný symbol    = ".input-mini" >
<input class = "input-small" type = "text" zástupný symbol    = ".input-small" >
<input class = "input-medium" type = "text" zástupný symbol = ".input-medium" >   
<input class = "input-large" type = "text" zástupný symbol = ".input-large" >   
<input class = "input-xlarge" type = "text" zástupný symbol = ".input-xlarge" >   
<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-largezväčší 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.

<input class = "span1" type = "text" zástupný symbol = ".span1" >   
<input class = "span2" type = "text" zástupný symbol = ".span2"    >
<input class = "span3" type = "text" zástupný symbol = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</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.

<div class = "controls" > 
  <input class = "span5" type = "text" zástupný symbol = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" zástupný symbol = ".span4" >   
  <input class = "span1" type = "text" zástupný symbol = ".span1" >   
</div>
...

Neupraviteľné vstupy

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

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

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

Pomocný text

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

Inline pomoc

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

Blokovať pomoc

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

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

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.

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

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

<div class = "control-group warning" > 
  <label class = "control-label" for = "inputWarning" > Vstup s upozornením </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Niečo sa mohlo pokaziť </span> 
  </div>
</div>
 
<div class = "chyba kontrolnej skupiny" > 
  <label class = "control-label" for = "inputError" > Vstup s chybou </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Opravte chybu </span> 
  </div>
</div>
 
<div class = "informácie o kontrolnej skupine" > 
  <label class = "control-label" for = "inputInfo" > Vstup s informáciami </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Používateľské meno je už zadané </span> 
  </div>
</div>
 
<div class = "úspech kontrolnej skupiny" > 
  <label class = "control-label" for = "inputSuccess" > Úspešný vstup </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Hurá! </span> 
  </div>
</div>

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 jankizuje zakázané buttonprvky, 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.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Veľké tlačidlo </button>  
  <button class = "btn btn-large" type = "button" > Veľké tlačidlo </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Predvolené tlačidlo </button>  
  <button class = "btn" type = "button" > Predvolené tlačidlo </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Malé tlačidlo </button>  
  <button class = "btn btn-small" type = "button" > Malé tlačidlo </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Mini button </button>  
  <button class = "btn btn-mini" type = "button" > Mini tlačidlo </button>  
</p>

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

<button class = "btn btn-large btn-block btn-primary" type = "button" > tlačidlo na úrovni blokovania </button>  
<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 Link

<a href = "#" class = "btn btn-large btn-primary disabled" > Primárny odkaz </a>  
<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.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Primárne tlačidlo </button>   
<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>

<a class = "btn" href = "" > Odkaz </a>  
<button class = "btn" type = "submit" > Tlačidlo </button>  
<input class = "btn" type = "button" value = "Input" >   
<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.

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

<img src = "..." class = "img-zaokrúhlené" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

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

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-bold
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 nahor
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-bulhorn
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 akýchkoľvek 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:

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

<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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Rozbaľovacia ponuka v skupine tlačidiel

Používateľ

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Používateľ </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "rozbaľovacia ponuka" > 
    <li><a href = "#" ><i class = "icon-ceruzka" ></i> Upraviť </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Odstrániť </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Zákaz </a></li>  
    <li class = "delider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Urobiť správcu </a></li>  
  </ul>
</div>

Veľkosti gombíkov

Hviezda Hviezda Hviezda

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Hviezda </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Hviezda </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Hviezda </a>

Navigácia

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

Polia formulára

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > E-mailová adresa </label>  
  <div class = "controls" > 
    <div class = "input-prepend" > 
      <span class = "doplnok" ><i class = "ikona-obálka" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Typografia

Nadpisy

h1. Nadpis 1

h2. Nadpis 2

h3. Nadpis 3

h4. Nadpis 4

h5. Nadpis 5

h6. Nadpis 6

Kópia tela

Kópia tela olova

Postavené s menej

Dôraz

<small>

Tučné

Kurzíva

Triedy zarovnania

Triedy s dôrazom

Skratky

<abbr>

<abbr class="initialism">

Adresy

<address>

Blokové úvodzovky

Predvolená bloková ponuka

Možnosti blockquote

Pomenovanie zdroja

Alternatívne zobrazenia

zoznamy

Neusporiadané

Objednané

Neštylizované

V rade

Popis

Horizontálny popis

kód

V rade

Základný blok

Tabuľky

Predvolené štýly

Voliteľné triedy

.table-striped

.table-bordered

.table-hover

.table-condensed

Voliteľné triedy riadkov

Podporované označovanie tabuľky

Formuláre

Predvolené štýly

Voliteľné rozloženia

Vyhľadávací formulár

Inline formulár

Horizontálny tvar

Podporované ovládacie prvky formulárov

Vstupy

Textarea

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

Predvolené (zoskupené)

Vložené začiarkavacie políčka

Vyberie

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

Predpripojené a pripojené vstupy

Predvolené možnosti

Kombinované

Tlačidlá namiesto textu

Rozbaľovacie zoznamy tlačidiel

Segmentované rozbaľovacie skupiny

Vyhľadávací formulár

Ovládanie veľkosti

Vstupy na úrovni bloku

Relatívna veľkosť

Dimenzovanie mriežky

Neupraviteľné vstupy

Akcie formulára

Pomocný text

Inline pomoc

Blokovať pomoc

Stavy riadenia formulára

Zameranie vstupu

Neplatné vstupy

Zakázané vstupy

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`