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: @baseFontSize
a @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 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.
Ž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é title pro rozšířený text |
<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 jsou stylizované s velkým textem a světle tečkovaným spodním okrajem. Mají také pomocný kurzor při umístění kurzoru, takže uživatelé mají navíc indikaci, že se při umístění kurzoru něco zobrazí.
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-left a .pull-right tří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>
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 převést všechny stříšky na znaky Unicode.
<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.
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 td a th prvcích |
Tabulky jsou automaticky upraveny pouze s několika okraji, aby byla zajištěna čitelnost a zachována struktura. S 2.0 je .table
třída povinná.
- <table class = "table" >
- …
- </table>
# | Jméno | Příjmení | Jazyk |
---|---|---|---|
1 | Označit | Otto | CSS |
2 | Jacobe | Thornton | Javascript |
3 | Stu | Důlek | HTML |
Získejte trochu fantazie se svými tabulkami přidáním pruhů zebry – stačí přidat .table-striped
třídu.
Poznámka: Spritované tabulky používají :nth-child
selektor CSS a nejsou dostupné v IE7-IE8.
- < třída tabulky = "tabulka s pruhy tabulky" >
- …
- </table>
# | Jméno | Příjmení | Jazyk |
---|---|---|---|
1 | Označit | Otto | CSS |
2 | Jacobe | Thornton | Javascript |
3 | Stu | Důlek | HTML |
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í | Jazyk |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Jacobe | Thornton | Javascript |
3 | Stu | Důlek | |
3 | Brosef | Stalin | HTML |
Udělejte své tabulky kompaktnější přidáním .table-condensed
tří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í | Jazyk |
---|---|---|---|
1 | Označit | Otto | CSS |
2 | Jacobe | Thornton | Javascript |
3 | Stu | Důlek | HTML |
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>
# | Jméno | Příjmení | Jazyk |
---|---|---|---|
1 | Označit | Otto | CSS |
2 | Jacobe | Thornton | Javascript |
3 | Stu | Důlek | HTML |
4 | Brosef | Stalin | HTML |
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í přicházejí se stručnými a škálovatelnými třídami pro snadný styl a vazbu událostí, takže jste 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 seznamů 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 |
S v2.0 máme jednodušší a chytřejší výchozí nastavení pro styly formulářů. Žádné další značkování, pouze ovládací prvky formuláře.
Odrážející výchozí styly WebKit, stačí přidat .form-search
pro extra zaoblená vyhledávací pole.
Vstupy jsou na úrovni bloku pro spuštění. Pro .form-inline
a .form-horizontal
používáme inline-block.
Vlevo jsou zobrazeny všechny výchozí ovládací prvky formuláře, které podporujeme. Zde je seznam s odrážkami:
Až do verze 1.4 používaly výchozí styly formulářů Bootstrapu horizontální rozložení. S Bootstrap 2 jsme toto omezení odstranili, abychom měli chytřejší a škálovatelnější výchozí hodnoty pro jakýkoli formulář.
disabled
Bootstrap obsahuje styly pro zaměření a stavy podporované prohlížečem . Odebereme výchozí Webkit outline
a použijeme na box-shadow
jeho místo 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 .inline
do libovolného .checkbox
nebo .radio
a máte hotovo.
Chcete-li použít vstupy prepend nebo append ve vloženém formuláři, nezapomeňte umístit .add-on
a input
na stejný řádek bez mezer.
Chcete-li přidat text nápovědy pro vstupy z formuláře, zařaďte za vstupní prvek <span class="help-inline">
text nápovědy nebo blok textu nápovědy .<p class="help-block">
:after
. V dokumentech zobrazujeme při umístění kurzoru světle červenou barvu pozadí, aby se zvýraznila velikost ikony.
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
. Toto je stejná metoda, jakou používáme na Twitter.com, a osvědčila se nám.
Všechny třídy ikon jsou opatřeny předponou .icon-
pro správný jmenný prostor 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.
Ve verzi 2.0.0 jsme se rozhodli používat <i>
značku pro všechny naše 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 120 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.
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.