Na vrcholu lešení jsou základní prvky HTML stylizovány a vylepšeny rozšiřitelnými třídami, které poskytují svěží, konzistentní vzhled a dojem.
Celá typografická mřížka je založena na dvou proměnných Less v našem souboru variables.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 trochu matematiky používáme k vytváření okrajů, odsazení a výšek řádků všech našich typů a další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.
Nechte odstavec vyniknout přidáním .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| Živel | Používání | Volitelný |
|---|---|---|
<strong> |
Pro zdůraznění úryvku textu důležitým | Žádný |
<em> |
Pro zdůraznění úryvku textu s důrazem | Žádný |
<abbr> |
Zabalí zkratky a akronymy, aby se při umístění kurzoru zobrazila rozšířená verze | Zahrnout volitelný .initialismPro velké zkratky použijte class. |
<address> |
Kontaktní informace na nejbližšího předka nebo na celé pracoviště | Zachovejte formátování ukončením všech řádků znakem<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elitní libero, pharetra augue.
Poznámka: Klidně používejte <b>a <i>v HTML5, ale jejich použití se trochu změnilo. <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.
Zde jsou dva příklady použití <address>značky:
Zkratky s titleatributem mají světlý tečkovaný spodní okraj a pomocný kurzor při najetí myší. To dává uživatelům další indikaci, že se při umístění kurzoru něco zobrazí.
Přidejte initialismtřídu ke zkratce, abyste zvýšili typografickou harmonii tím, že jí dáte o něco menší velikost textu.
HTML je nejlepší věc od krájeného chleba.
Zkratka slova atribut je attr .
| Živel | Používání | Volitelný |
|---|---|---|
<blockquote> |
Prvek na úrovni bloku pro citování obsahu z jiného zdroje | Přidejte .pull-lefta .pull-righttřídy pro plovoucí opce |
<small> |
Volitelný prvek pro přidání citace pro uživatele, obvykle autora s názvem díla | Umístěte <cite>kolem názvu nebo názvu zdroje |
Chcete-li zahrnout blokovou uvozovku, obtočte jako citaci <blockquote>libovolný kód HTML . Pro přímé uvozovky doporučujeme <p>.
Zahrňte volitelný <small>prvek pro citaci zdroje a dostanete —před ním em pomlčku pro účely stylingu.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elita. Celé číslo posuere erat a ante venenatis. </p>
- <small> Někdo slavný </small>
- </blockquote>
Výchozí blokové uvozovky jsou stylizovány takto:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante venenatis.
Někdo slavný v Body of work
Chcete-li svou blokovou nabídku přesunout doprava, přidejte class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante venenatis.
Někdo slavný v Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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í.
Zabalte vložené úryvky kódu pomocí <code>.
- Například < code > sekce </ code > by měla být zabalena jako vložená .
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>
- <před>
- <p>Ukázka textu zde...</p>
- </pre>
Poznámka: 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.
Vezměte stejný <pre>prvek a přidejte dvě volitelné třídy pro vylepšené vykreslování.
- <p> Ukázkový text zde... </p>
- <pre class = "prettyprint
- prádlo" >
- <p>Ukázka textu zde...</p>
- </pre>
Stáhněte si google-code-prettify a prohlédněte si readme, jak používat.
| Š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í) Musí být použita v a <thead> |
<caption> |
Popis nebo shrnutí toho, co tabulka obsahuje, zvláště užitečné pro čtečky obrazovky |
- <tabulka>
- <hlava>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| název | Třída | Popis |
|---|---|---|
| Výchozí | Žádný | Žádné styly, jen sloupce a řádky |
| Základní | .table |
Pouze vodorovné čáry mezi řádky |
| Ohraničený | .table-bordered |
Zaobluje rohy a přidává vnější okraj |
| Zebra-proužek | .table-striped |
Přidá světle šedou barvu pozadí do lichých řádků (1, 3, 5 atd.) |
| Zhuštěný | .table-condensed |
Zkrátí vertikální výplň na polovinu, z 8px na 4px, ve všech tda thprvcích |
Tabulky jsou automaticky upraveny pouze s několika okraji, aby byla zajištěna čitelnost a zachována struktura. S 2.0 je .tabletřída povinná.
- <table class = "table" >
- …
- </table>
| # | Jméno | Příjmení | Uživatelské jméno |
|---|---|---|---|
| 1 | Označit | Otto | @mdo |
| 2 | Jacobe | Thornton | @Tlustý |
| 3 | Larry | pták | @cvrlikání |
Získejte trochu fantazie se svými tabulkami přidáním pruhů zebry – stačí přidat .table-stripedtřídu.
Poznámka: Pruhované tabulky používají :nth-childselektor CSS a nejsou dostupné v IE7-IE8.
- <table class = "tabulka-prokládaný" >
- …
- </table>
| # | Jméno | Příjmení | Uživatelské jméno |
|---|---|---|---|
| 1 | Označit | Otto | @mdo |
| 2 | Jacobe | Thornton | @Tlustý |
| 3 | Larry | pták | @cvrlikání |
Přidejte okraje kolem celého stolu a zaoblené rohy pro estetické účely.
- < třída tabulky = "tabulka ohraničená tabulkou" >
- …
- </table>
| # | 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í | |
Udělejte své tabulky kompaktnější přidáním .table-condensedtřídy, která zkrátí výplň buněk tabulky na polovinu (z 8 pixelů na 4 pixely).
- <table class = "table table-condended" >
- …
- </table>
| # | Jméno | Příjmení | Uživatelské jméno |
|---|---|---|---|
| 1 | Označit | Otto | @mdo |
| 2 | Jacobe | Thornton | @Tlustý |
| 3 | Pták Larry | @cvrlikání | |
Neváhejte zkombinovat kteroukoli z tříd tabulek, abyste dosáhli různého vzhledu pomocí kterékoli z dostupných tříd.
- <table class = "tabulka s proužkovanou tabulkou ohraničená tabulkou-zhuštěná" >
- ...
- </table>
| Celé jméno | |||
|---|---|---|---|
| # | Jméno | Příjmení | Uživatelské jméno |
| 1 | Označit | Otto | @mdo |
| 2 | Jacobe | Thornton | @Tlustý |
| 3 | Pták Larry | @cvrlikání | |
Nejlepší na formulářích v Bootstrapu je to, že všechny vaše vstupy a ovládací prvky vypadají skvěle bez ohledu na to, jak je vytvoříte ve svém označení. Není vyžadován žádný nadbytečný HTML, ale poskytujeme vzory pro ty, kteří to vyžadují.
Složitější rozvržení se dodávají se stručnými a škálovatelnými třídami pro snadný styl a vazbu událostí, takže budete pokryti na každém kroku.
Bootstrap přichází s podporou čtyř typů rozvržení formulářů:
Různé typy rozvržení formulářů vyžadují určité změny v označení, ale samotné ovládací prvky zůstávají a chovají se stejně.
Formuláře Bootstrapu obsahují styly pro všechny ovládací prvky základního formuláře, jako je vstup, textová oblast a výběr, které byste očekávali. Ale také přichází s řadou vlastních komponent, jako jsou připojené a předpřipojené vstupy a podpora pro seznamy zaškrtávacích políček.
Stavy jako chyba, varování a úspěch jsou zahrnuty pro každý typ ovládacího prvku formuláře. Zahrnuty jsou také styly pro zakázané ovládací prvky.
Bootstrap poskytuje jednoduché označení a styly pro čtyři styly běžných webových formulářů.
| název | Třída | Popis |
|---|---|---|
| Vertikální (výchozí) | .form-vertical (není požadováno) |
Naskládané štítky zarovnané doleva nad ovládacími prvky |
| V souladu | .form-inline |
Doleva zarovnaný štítek a ovládací prvky vložené do bloku pro kompaktní styl |
| Vyhledávání | .form-search |
Extra zaoblený textový vstup pro typickou estetiku vyhledávání |
| Horizontální | .form-horizontal |
Plovoucí vlevo, vpravo zarovnané štítky na stejném řádku jako ovládací prvky |
Inteligentní a lehké výchozí nastavení bez dalšího značení.
- < třída formuláře = "dobře" >
- <label> Název štítku </label>
- <input type = "text" class = "span3" placeholder = "Napište něco…" >
- <span class = "help-block" > Příklad textu nápovědy na úrovni bloku zde. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Check me out
- </label>
- <button type = "submit" class = "btn" > Submit </button>
- </form>
Přidejte .form-searchdo formuláře a .search-querydo input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Hledat </button>
- </form>
Přidáním .form-inlinedolaďte svislé zarovnání a rozestupy ovládacích prvků formuláře.
- <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" > Zapamatovat si mě
- </label>
- <button type = "submit" class = "btn" > Přihlásit se </button>
- </form>
Vpravo jsou zobrazeny všechny výchozí ovládací prvky formuláře, které podporujeme. Zde je seznam s odrážkami:
Vzhledem k výše uvedenému příkladu rozložení formuláře je zde označení spojené s první vstupní a ovládací skupinou. Všechny třídy .control-group, .control-label, a .controlsjsou vyžadovány pro styling.
- < třída formuláře = "forma-horizontální" >
- <fieldset>
- <legend> Text legendy </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Zadávání textu </label>
- <div class = "controls" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Podpůrný text nápovědy </p>
- </div>
- </div>
- </fieldset>
- </form>
disabledBootstrap obsahuje styly pro zaměření a stavy podporované prohlížečem . Odebereme výchozí Webkit outlinea box-shadowna jeho místo použijeme a pro :focus.
Zahrnuje také styly ověřování chyb, varování a úspěchu. Chcete-li použít, přidejte třídu chyb do okolního .control-group.
- <fieldset
- class = "chyba kontrolní skupiny" >
- …
- </fieldset>
Skupiny vstupů – s připojeným nebo předřazeným textem – poskytují snadný způsob, jak poskytnout více kontextu pro vaše vstupy. Mezi skvělé příklady patří znak @ pro uživatelská jména na Twitteru nebo $ pro finance.
Až do verze 1.4 vyžadoval Bootstrap další označení kolem zaškrtávacích políček a rádií, aby je bylo možné naskládat. Nyní je to jednoduchá záležitost zopakovat to <label class="checkbox">, co obaluje <input type="checkbox">.
Podporována jsou také zaškrtávací políčka a rádia. Stačí přidat .inlinedo libovolného .checkboxnebo .radioa máte hotovo.
Chcete-li použít vstupy prepend nebo append ve vloženém formuláři, nezapomeňte umístit .add-ona inputna stejný řádek bez mezer.
Chcete-li přidat text nápovědy pro vstupy z formuláře, vložte text nápovědy s textem nápovědy <span class="help-inline">nebo blok textu nápovědy <p class="help-block">za prvek input.
Místo toho, abychom z každé ikony udělali zvláštní požadavek, zkompilovali jsme je do sprite – hromady obrázků v jednom souboru, který používá CSS k umístění obrázků pomocí background-position. Jedná se o stejnou metodu, kterou používáme na Twitter.com a osvědčila se nám.
Všechny třídy ikon mají předponu .icon-pro správné umístění názvů a rozsah, podobně jako naše ostatní komponenty. To pomůže vyhnout se konfliktům s jinými nástroji.
Společnost Glyphicons nám umožnila používat sadu Halflings v naší sadě nástrojů s otevřeným zdrojovým kódem, pokud zde v dokumentaci poskytneme odkaz a poděkování. Zvažte totéž ve svých projektech.
Bootstrap používá <i>značku pro všechny ikony, ale nemají třídu velkých písmen – pouze sdílenou předponu. Chcete-li použít, umístěte následující kód téměř kamkoli:
- <i class = "icon-search" ></i>
K dispozici jsou také styly pro obrácené (bílé) ikony, připravené s jednou extra třídou:
- <i class = "icon-search icon-white" ></i>
Pro své ikony si můžete vybrat ze 140 tříd. Stačí přidat <i>štítek se správnými třídami a máte hotovo. Úplný seznam najdete na sprites.less nebo přímo zde v tomto dokumentu.
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.
Ikony jsou skvělé, ale kde by se daly použít? Zde je několik nápadů:
V podstatě kamkoli můžete umístit <i>značku, můžete umístit ikonu.
Použijte je v tlačítkách, skupinách tlačítek pro panel nástrojů, navigaci nebo vstupy do formuláře.