Základní CSS

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.

Nadpisy a text textu

Typografické měřítko

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.

Příklad hlavního textu

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.

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.

h1. Nadpis 1

h2. Nadpis 2

h3. Nadpis 3

h4. Nadpis 4

h5. Nadpis 5
h6. Nadpis 6

Důraz, adresa a zkratka

Ž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ý titleatribut pro rozšířený text

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

Použití důrazu

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.

Příklady adres

Zde jsou dva příklady použití <address>značky:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Celé jméno
[email protected]

Příklad zkratek

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 .

Blokové uvozovky

Živel Používání Volitelný
<blockquote> Prvek na úrovni bloku pro citování obsahu z jiného zdroje

Přidejte citeatribut pro zdrojovou adresu URL

Použití .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 &mdash;před ním em pomlčku pro účely stylingu.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elita. Celé číslo posuere erat a ante venenatis. </p>
  3. <small> Někdo slavný </small>
  4. </blockquote>

Příklad blokových uvozovek

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

Seznamy

Neuspořádané

<ul>

  • 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

Bez stylu

<ul class="unstyled">

  • 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

Objednáno

<ol>

  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

Popis

<dl>

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.

Horizontální popis

<dl class="dl-horizontal">

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 semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

V souladu

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

  1. Například < code > sekce </ 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>

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.

Google Prettify

Vezměte stejný <pre>prvek a přidejte dvě volitelné třídy pro vylepšené vykreslování.

  1. <p> Ukázkový text zde... </p>
  1. <pre class = "prettyprint
  2. prádlo" >
  3. <p>Ukázka textu zde...</p>
  4. </pre>

Stáhněte si google-code-prettify a prohlédněte si readme, jak používat.

Označení tabulky

Š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
  1. <tabulka>
  2. <hlava>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Možnosti tabulky

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

Ukázkové tabulky

1. Výchozí styly tabulek

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

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

2. Pruhovaný stůl

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.

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

3. Ohraničený stůl

Přidejte okraje kolem celého stolu a zaoblené rohy pro estetické účely.

  1. < třída tabulky = "tabulka ohraničená tabulkou" >
  2. </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í

4. Zhuštěná tabulka

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

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

5. Spojte je všechny!

Neváhejte zkombinovat kteroukoli z tříd tabulek, abyste dosáhli různého vzhledu pomocí kterékoli z dostupných tříd.

  1. <table class = "tabulka s proužkovanou tabulkou ohraničená tabulkou-zhuštěná" >
  2. ...
  3. </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í

Flexibilní HTML a CSS

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.

Čtyři rozložení v ceně

Bootstrap přichází s podporou čtyř typů rozvržení formulářů:

  • Vertikální (výchozí)
  • Vyhledávání
  • V souladu
  • Horizontální

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

Kontrolní stavy a další

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.

Čtyři typy formulářů

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

Ukázkové formuláře používající pouze ovládací prvky formuláře, žádné další označení

Základní forma

Inteligentní a lehké výchozí nastavení bez dalšího značení.

Příklad textu nápovědy na úrovni bloku zde.

  1. < třída formuláře = "dobře" >
  2. <label> Název štítku </label>
  3. <input type = "text" class = "span3" placeholder = "Napište něco…" >
  4. <span class = "help-block" > Příklad textu nápovědy na úrovni bloku zde. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Check me out
  7. </label>
  8. <button type = "submit" class = "btn" > Submit </button>
  9. </form>

Vyhledávací formulář

Přidejte .form-searchdo formuláře a .search-querydo input.

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

Inline formulář

Přidáním .form-inlinedolaďte svislé zarovnání a rozestupy ovládacích prvků formuláře.

  1. <form class = "well 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í tvary

Vpravo jsou zobrazeny všechny výchozí ovládací prvky formuláře, které podporujeme. Zde je seznam s odrážkami:

  • textové vstupy (text, heslo, e-mail atd.)
  • zaškrtávací políčko
  • rádio
  • vybrat
  • vícenásobný výběr
  • vstup souboru
  • textarea

Kromě volného textu se takto zobrazí jakýkoli textový vstup HTML5.

Příklad označení

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.

  1. < třída formuláře = "forma-horizontální" >
  2. <fieldset>
  3. <legend> Text legendy </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Zadávání textu </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Podpůrný text nápovědy </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Stavy řízení formuláře

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.


Ověření formuláře

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.

  1. <fieldset
  2. class = "chyba kontrolní skupiny" >
  3. </fieldset>
Nějaká hodnota tady
Něco se mohlo pokazit
Opravte prosím chybu
Woohoo!
Woohoo!

Rozšíření ovládacích prvků formuláře

Připojit a přidat vstupy

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.


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

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.


Vložené formuláře a připojení/předřazení

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.


Text nápovědy formuláře

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.

Pro vstupní velikosti použijte stejné .span*třídy ze systému mřížky.

Můžete také použít statické třídy, které se nemapují na mřížku, přizpůsobují se responzivním stylům CSS nebo zohledňují různé typy ovládacích prvků (např. inputvs. select).

@

Zde je text nápovědy

0,00
Zde je další text nápovědy
$ 0,00

Poznámka: Štítky obklopují všechny možnosti pro mnohem větší oblasti kliknutí a použitelnější formu.

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í

Tlačítka pro akce

Podle konvence by se tlačítka měla používat pouze pro akce, zatímco pro objekty se mají používat hypertextové odkazy. Například „Stáhnout“ by mělo být tlačítko, zatímco „nedávná aktivita“ by měl být odkaz.

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

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.

Více velikostí

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


Deaktivovaný stav

U zakázaných tlačítek přidejte .disabledtřídu k odkazům a disabledatribut k <button>prvkům.

Primární odkaz Odkaz

Hlavy vzhůru! Používáme .disabledzde třídu utility, podobnou běžné .activetřídě, takže není vyžadována žádná předpona.

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" >
  3. Knoflík
  4. </button>
  5. <input class = "btn" type = "button"
  6. hodnota = "Vstup" >
  7. <input class = "btn" type = "submit"
  8. hodnota = "Odeslat" >

Nejlepším postupem je pokusit se přiřadit prvek pro váš kontext, 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.

  • 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

Postaven jako sprite

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.

Jak používat

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:

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

K dispozici jsou také styly pro obrácené (bílé) ikony, připravené s jednou extra třídou:

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

Případy užití

Ikony jsou skvělé, ale kde by se daly použít? Zde je několik nápadů:

  • Jako vizuály pro navigaci na postranním panelu
  • Pro navigaci řízenou čistě ikonami
  • Pro tlačítka, která pomohou vyjádřit význam akce
  • S odkazy pro sdílení kontextu na cílovém místě uživatele

V podstatě kamkoli můžete umístit <i>značku, můžete umístit ikonu.

Příklady

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