Na vrchole lešenia sú základné prvky HTML štylizované a vylepšené rozšíriteľnými triedami, ktoré poskytujú svieži, konzistentný vzhľad a dojem.
Celá typografická mriežka je založená na dvoch premenných Less v našom súbore variables.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 trochu matematiky používame na vytváranie okrajov, výplní a výšok riadkov všetkých našich typov a ďalších.
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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| Prvok | Použitie | Voliteľné |
|---|---|---|
<strong> |
Na zdôraznenie úryvku textu dôležitým | žiadne |
<em> |
Pre zdôraznenie úryvku textu so stresom | žiadne |
<abbr> |
Zabalí skratky a akronymy, aby sa pri umiestnení kurzora myši zobrazila rozšírená verzia | Zahrňte voliteľný .initialismtriedu pre veľké skratky. |
<address> |
Pre kontaktné informácie na jeho najbližšieho predka alebo na celé pracovisko | Zachovať formátovanie ukončením všetkých riadkov s<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Poznámka: Pokojne použite <b>a <i>v HTML5, ale ich použitie sa trochu zmenilo. <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ď.
Tu sú dva príklady použitia <address>značky:
Skratky s titleatribútom majú svetlý bodkovaný spodný okraj a pomocný kurzor pri umiestnení kurzora myši. Používateľom to dáva dodatočnú indikáciu, že sa pri umiestnení kurzora myši niečo zobrazí.
Pridajte initialismtriedu ku skratke, aby ste zvýšili typografickú harmóniu tým, že jej dáte trochu menšiu veľkosť textu.
HTML je najlepšia vec od krájaného chleba.
Skratka slova atribút je attr .
| Prvok | Použitie | Voliteľné |
|---|---|---|
<blockquote> |
Prvok na úrovni bloku na citovanie obsahu z iného zdroja | Pridajte .pull-lefta .pull-righttriedy pre plávajúce možnosti |
<small> |
Voliteľný prvok na pridanie citácie pre používateľa, zvyčajne autora s názvom diela | Umiestnite <cite>okolo názvu alebo názvu zdroja |
Ak chcete zahrnúť blokovú citáciu, zabaľte ju <blockquote>do ľubovoľného kódu HTML . Pre priame cenové ponuky odporúčame <p>.
Zahrňte voliteľný <small>prvok na citovanie svojho zdroja a dostanete —pred ním pomlčku na účely úpravy.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante venenatis. </p>
- <small> Niekto slávny </small>
- </blockquote>
Predvolené blokové úvodzovky majú takýto štýl:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante venenatis.
Niekto slávny v Body of work
Ak chcete presunúť svoju blokovú ponuku doprava, pridajte class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante venenatis.
Niekto slávny v Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Zabaľte vložené útržky kódu pomocou <code>.
- Napríklad <code> sekcia </ code > by mala byť zabalená ako inline .
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>
Poznámka: Kód v <pre>značkách umiestnite č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.
Vezmite rovnaký <pre>prvok a pridajte dve voliteľné triedy pre vylepšené vykresľovanie.
- <p> Vzorový text tu... </p>
- <pre class = "prettyprint
- obliečky" >
- <p>Ukážkový text tu...</p>
- </pre>
Stiahnite si google-code-prettify a pozrite si súbor readme, ako ho používať.
| 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 menovky stĺpcov (alebo riadkov, v závislosti od rozsahu a umiestnenia) Musí sa použiť v rámci a <thead> |
<caption> |
Popis alebo zhrnutie obsahu tabuľky, užitočné najmä pre čítačky obrazovky |
- <tabuľka>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| názov | Trieda | Popis |
|---|---|---|
| Predvolené | žiadne | Žiadne štýly, len stĺpce a riadky |
| Základné | .table |
Iba vodorovné čiary medzi riadkami |
| Ohraničené | .table-bordered |
Zaobľuje rohy a pridáva vonkajší okraj |
| Zebra-pruh | .table-striped |
Pridá svetlošedú farbu pozadia k nepárnym riadkom (1, 3, 5 atď.) |
| Zhustené | .table-condensed |
Zredukuje vertikálne odsadenie na polovicu, z 8px na 4px, v rámci všetkých prvkov tda thprvkov |
Tabuľky sú automaticky štylizované len s niekoľkými okrajmi, aby sa zabezpečila čitateľnosť a zachovala štruktúra. Pri verzii 2.0 je .tabletrieda povinná.
- <table class = "table" >
- …
- </table>
| # | Krstné meno | Priezvisko | Používateľské meno |
|---|---|---|---|
| 1 | Marka | Otto | @mdo |
| 2 | Jacob | Thornton | @tuk |
| 3 | Larry | vták |
Urobte si trochu fantázie so svojimi tabuľkami pridaním pruhov zebry – stačí pridať .table-stripedtriedu.
Poznámka: Pruhované tabuľky používajú :nth-childselektor CSS a nie sú dostupné v IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
| # | Krstné meno | Priezvisko | Používateľské meno |
|---|---|---|---|
| 1 | Marka | Otto | @mdo |
| 2 | Jacob | Thornton | @tuk |
| 3 | Larry | vták |
Pridajte okraje okolo celého stola a zaoblené rohy pre estetické účely.
- <table class = "table-bordered" >
- …
- </table>
| # | Krstné meno | Priezvisko | Používateľské meno |
|---|---|---|---|
| 1 | Marka | Otto | @mdo |
| Marka | Otto | @getbootstrap | |
| 2 | Jacob | Thornton | @tuk |
| 3 | Vtáčik Larry | ||
Urobte svoje tabuľky kompaktnejšími pridaním .table-condensedtriedy na zníženie výplne buniek tabuľky na polovicu (z 8 pixelov na 4 pixely).
- <table class = "table-condended" >
- …
- </table>
| # | Krstné meno | Priezvisko | Používateľské meno |
|---|---|---|---|
| 1 | Marka | Otto | @mdo |
| 2 | Jacob | Thornton | @tuk |
| 3 | Vtáčik Larry | ||
Neváhajte skombinovať ktorúkoľvek z tried stolov, aby ste dosiahli odlišný vzhľad využitím ktorejkoľvek z dostupných tried.
- <table class = "table-stripped table-bordered table-condensed" >
- ...
- </table>
| Celé meno | |||
|---|---|---|---|
| # | Krstné meno | Priezvisko | Používateľské meno |
| 1 | Marka | Otto | @mdo |
| 2 | Jacob | Thornton | @tuk |
| 3 | Vtáčik Larry | ||
Najlepšie na formulároch v Bootstrape je to, že všetky vaše vstupy a ovládacie prvky vyzerajú skvele bez ohľadu na to, ako ich v značke vytvoríte. Nevyžaduje sa žiadny nadbytočný kód HTML, ale poskytujeme vzory pre tých, ktorí to vyžadujú.
Zložitejšie rozloženia sa dodávajú so stručnými a škálovateľnými triedami pre jednoduchý štýl a viazanie udalostí, takže ste pokrytí na každom kroku.
Bootstrap prichádza s podporou štyroch typov rozložení formulárov:
Rôzne typy rozložení formulárov vyžadujú určité zmeny v označovaní, ale samotné ovládacie prvky zostávajú a správajú sa rovnako.
Formuláre Bootstrapu obsahujú štýly pre všetky ovládacie prvky základného formulára, ako je vstup, textová oblasť a výber, ktoré by ste očakávali. Dodáva sa však aj s množstvom vlastných komponentov, ako sú pridané a predpridané vstupy a podpora zoznamov začiarkavacích políčok.
Stavy ako chyba, varovanie a úspech sú zahrnuté pre každý typ ovládacieho prvku formulára. Zahrnuté sú aj štýly pre vypnuté ovládacie prvky.
Bootstrap poskytuje jednoduché označenie a štýly pre štyri štýly bežných webových formulárov.
| názov | Trieda | Popis |
|---|---|---|
| Vertikálne (predvolené) | .form-vertical (nevyžaduje sa) |
Naskladané štítky zarovnané doľava nad ovládacími prvkami |
| V rade | .form-inline |
Doľava zarovnaný štítok a inline blokové ovládacie prvky pre kompaktný štýl |
| Vyhľadávanie | .form-search |
Extra zaoblený textový vstup pre typickú estetiku vyhľadávania |
| Horizontálne | .form-horizontal |
Pohyblivé štítky zarovnané doľava a doprava na rovnakom riadku ako ovládacie prvky |
Vo verzii 2.0 máme jednoduchšie a inteligentnejšie predvolené nastavenia pre štýly formulárov. Žiadne ďalšie značenie, iba ovládacie prvky formulára.
- < trieda formulára = "dobre" >
- <label> Názov menovky </label>
- <input type = "text" class = "span3" zástupný symbol = "Napíšte niečo..." >
- <span class = "help-inline" > Súvisiaci text pomocníka! </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Check me out
- </label>
- <button type = "submit" class = "btn" > Submit </button>
- </form>
Odrážajú predvolené štýly WebKit, stačí pridať .form-searchďalšie zaoblené vyhľadávacie polia.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Search </button>
- </form>
Vstupy sú na úrovni bloku na spustenie. Pre .form-inlinea .form-horizontalpoužívame inline-block.
- <form class = "well 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>
Vzhľadom na vyššie uvedený príklad rozloženia formulára je tu označenie spojené s prvou vstupnou a riadiacou skupinou. Všetky triedy .control-group, .control-label, a .controlssú potrebné na úpravu štýlu.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> Text legendy </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Textový vstup </label>
- <div class = "controls" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Podporný text pomocníka </p>
- </div>
- </div>
- </fieldset>
- </form>
Vľavo sú zobrazené všetky predvolené ovládacie prvky formulára, ktoré podporujeme. Tu je zoznam s odrážkami:
Až do verzie 1.4 používali predvolené štýly formulárov Bootstrapu horizontálne rozloženie. S Bootstrap 2 sme toto obmedzenie odstránili, aby sme mali inteligentnejšie a škálovateľnejšie predvolené hodnoty pre akýkoľvek formulár.
disabledBootstrap obsahuje štýly pre zameranie a stavy podporované prehliadačom . Odstránime predvolený Webkit outlinea box-shadowna jeho miesto použijeme a pre :focus.
Zahŕňa aj štýly overenia chýb, upozornení a úspechu. Ak chcete použiť, pridajte triedu chýb do okolitého súboru .control-group.
- <fieldset
- class = "chyba kontrolnej skupiny" >
- …
- </fieldset>
Skupiny vstupov – s pripojeným alebo predpridaným textom – poskytujú jednoduchý spôsob, ako poskytnúť vašim vstupom viac kontextu. Medzi skvelé príklady patrí znak @ pre používateľské mená na Twitteri alebo $ pre financie.
Až do verzie 1.4 vyžadoval Bootstrap dodatočné označenie okolo začiarkavacích políčok a rádií, aby ich naskladal. Teraz je to jednoduchá záležitosť zopakovať to <label class="checkbox">, čo obaluje <input type="checkbox">.
Podporované sú aj začiarkavacie políčka a rádiá. Stačí pridať .inlinedo ľubovoľného .checkboxalebo .radioa máte hotovo.
Ak chcete použiť vstupy na začiatok alebo na pripojenie v riadkovom formulári, nezabudnite umiestniť .add-ona inputna rovnaký riadok bez medzier.
Ak chcete pridať pomocný text pre vstupy z formulára, začleňte vložený pomocný text s <span class="help-inline">alebo blok pomocného textu <p class="help-block">za prvok vstupu.
Namiesto toho, aby sme z každej ikony urobili dodatočnú požiadavku, skompilovali sme ich do sprite – hromady obrázkov v jednom súbore, ktorý používa CSS na umiestnenie obrázkov pomocou background-position. Ide o rovnakú metódu, akú používame na Twitter.com, a osvedčila sa nám.
Všetky triedy ikon majú predponu .icon-pre správne rozmiestnenie názvov a rozsah, podobne ako naše ostatné komponenty. To pomôže vyhnúť sa konfliktom s inými nástrojmi.
Spoločnosť Glyphicons nám umožnila používať sadu Halflings v našej súprave nástrojov s otvoreným zdrojovým kódom, pokiaľ tu v dokumentoch poskytneme odkaz a kredit. Zvážte to isté vo svojich projektoch.
Bootstrap používa <i>značku pre všetky ikony, ale nemajú triedu veľkých a malých písmen – iba zdieľanú predponu. 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:
- <i class = "ikona-vyhľadávanie ikon-biela" ></i>
Pre svoje ikony si môžete vybrať zo 120 tried. Stačí pridať <i>štítok so správnymi triedami a je to. Úplný zoznam nájdete na sprites.less alebo priamo tu v tomto dokumente.
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.
Ikony sú skvelé, ale kde by sa dali použiť? Tu je niekoľko nápadov:
V podstate kamkoľvek môžete umiestniť <i>značku, môžete umiestniť ikonu.
Použite ich v tlačidlách, skupinách tlačidiel pre panel s nástrojmi, navigáciu alebo vstupy do formulárov.