Základné CSS

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.

Kópia nadpisov a tela

Typografická mierka

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.

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

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.

h1. Nadpis 1

h2. Nadpis 2

h3. Nadpis 3

h4. Nadpis 4

h5. Nadpis 5
h6. Nadpis 6

Dôraz, adresa a skratka

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ý titleatribút pre rozšírený text

Použite .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>

Použitie 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 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ď.

Príklady adries

Tu sú dva príklady použitia <address>značky:

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

Príklady skratiek

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 .

Blokové úvodzovky

Prvok Použitie Voliteľné
<blockquote> Prvok na úrovni bloku na citovanie obsahu z iného zdroja

Pridajte citeatribút pre adresu URL zdroja

Použitie .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 &mdash;pred ním pomlčku na účely úpravy.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante venenatis. </p>
  3. <small> Niekto slávny </small>
  4. </blockquote>

Príklad blokových úvodzoviek

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

zoznamy

Neusporiadané

<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 veľ
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Neštýlové

<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 veľ
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Objednané

<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 veľ
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Popis

<dl>

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.

Horizontálny popis

<dl class="dl-horizontal">

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.

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

  1. Napríklad <code> sekcia </ code > by mala byť zabalená ako inline .

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

Google Prettify

Vezmite rovnaký <pre>prvok a pridajte dve voliteľné triedy pre vylepšené vykresľovanie.

  1. <p> Vzorový text tu... </p>
  1. <pre class = "prettyprint
  2. obliečky" >
  3. <p>Ukážkový text tu...</p>
  4. </pre>

Stiahnite si google-code-prettify a pozrite si súbor readme, ako ho používať.

Označenie tabuľky

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
  1. <tabuľka>
  2. <thead>
  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 tabuľky

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

Príklady tabuliek

1. Predvolené štýly tabuliek

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

  1. <table class = "table" >
  2. </table>
# Krstné meno Priezvisko Používateľské meno
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Larry vták @twitter

2. Pruhovaný stôl

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.

  1. <table class = "table table-striped" >
  2. </table>
# Krstné meno Priezvisko Používateľské meno
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Larry vták @twitter

3. Ohraničený stôl

Pridajte okraje okolo celého stola a zaoblené rohy pre estetické účely.

  1. <table class = "table-bordered" >
  2. </table>
# Krstné meno Priezvisko Používateľské meno
1 Marka Otto @mdo
Marka Otto @getbootstrap
2 Jacob Thornton @tuk
3 Vtáčik Larry @twitter

4. Zhustená tabuľka

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

  1. <table class = "table-condended" >
  2. </table>
# Krstné meno Priezvisko Používateľské meno
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Vtáčik Larry @twitter

5. Spojte ich všetky!

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.

  1. <table class = "table-stripped table-bordered table-condensed" >
  2. ...
  3. </table>
Celé meno
# Krstné meno Priezvisko Používateľské meno
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Vtáčik Larry @twitter

Flexibilné HTML a CSS

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.

Zahrnuté štyri rozloženia

Bootstrap prichádza s podporou štyroch typov rozložení formulárov:

  • Vertikálne (predvolené)
  • Vyhľadávanie
  • V rade
  • Horizontálne

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.

Kontrolné stavy a ďalšie

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.

Štyri typy formulárov

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

Vzorové formuláre používajúce iba ovládacie prvky formulára, žiadne ďalšie značenie

Základná forma

Inteligentné a ľahké predvolené nastavenia bez dodatočných značiek.

Príklad textu pomoci na úrovni bloku nájdete tu.

  1. < trieda formulára = "dobre" >
  2. <label> Názov menovky </label>
  3. <input type = "text" class = "span3" zástupný symbol = "Napíšte niečo..." >
  4. <span class = "help-block" > Tu je príklad pomocného textu na úrovni bloku. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Check me out
  7. </label>
  8. <button type = "submit" class = "btn" > Submit </button>
  9. </form>

Vyhľadávací formulár

Pridajte .form-searchdo formulára a .search-querydo súboru input.

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

Inline formulár

Pridajte .form-inlinena doladenie vertikálneho zarovnania a rozstupov ovládacích prvkov formulára.

  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" > Zapamätať si ma
  6. </label>
  7. <button type = "submit" class = "btn" > Prihlásiť sa </button>
  8. </form>

Horizontálne formy

Vpravo sú zobrazené všetky predvolené ovládacie prvky formulára, ktoré podporujeme. Tu je zoznam s odrážkami:

  • textové vstupy (text, heslo, e-mail atď.)
  • začiarkavacie políčko
  • rádio
  • vyberte
  • viacnásobný výber
  • vstup do súboru
  • textarea

Okrem voľného textu sa takto javí akýkoľvek textový vstup HTML5.

Príklad značenia

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.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Text legendy </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Textový vstup </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Podporný text pomocníka </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Stavy riadenia formulára

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.


Overenie formulára

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.

  1. <fieldset
  2. class = "chyba kontrolnej skupiny" >
  3. </fieldset>
Nejakú hodnotu tu
Niečo sa mohlo pokaziť
Opravte chybu
Woohoo!
Woohoo!

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

Pridať a pridať vstupy

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.


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

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.


Vložené formuláre a pripojiť/predpísať

Ak chcete použiť vstupy na začiatok alebo na pripojenie v riadkovom formulári, nezabudnite umiestniť .add-ona inputna rovnaký riadok bez medzier.


Text pomocníka formulára

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.

Pre vstupné veľkosti použite rovnaké .span*triedy zo systému mriežky.

Môžete tiež použiť statické triedy, ktoré sa nemapujú na mriežku, prispôsobujú sa responzívnym štýlom CSS alebo zohľadňujú rôzne typy ovládacích prvkov (napr. inputvs. select).

@

Tu je nejaký pomocný text

0,00
Tu je ďalší pomocný text
$ 0,00

Poznámka: Štítky obklopujú všetky možnosti pre oveľa väčšie oblasti kliknutia a použiteľnejšiu formu.

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

Tlačidlá pre akcie

Podľa konvencie by sa tlačidlá mali používať iba na akcie, zatiaľ čo hypertextové odkazy sa majú používať na objekty. Napríklad „Stiahnuť“ by malo byť tlačidlo, zatiaľ čo „nedávna aktivita“ by mal byť odkaz.

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

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

Viaceré veľkosti

Máte chuť na väčšie alebo menšie tlačidlá? Pridajte .btn-large, .btn-small, alebo .btn-minipre dve ďalšie veľkosti.


Deaktivovaný stav

V prípade zakázaných tlačidiel pridajte .disabledtriedu k odkazom a disabledatribút k <button>prvkom.

Primárny odkaz Link

Hlavy hore! Tu používame .disabledako pomocnú triedu, podobnú bežnej .activetriede, takže nie je potrebná žiadna predpona.

Jedna trieda, viacero značiek

Použite .btntriedu na prvok <a>, <button>, alebo .<input>

Link
  1. <a class = "btn" href = "" > Odkaz </a>
  2. <button class = "btn" type = "submit" >
  3. Tlačidlo
  4. </button>
  5. <input class = "btn" type = "button"
  6. hodnota = "Vstup" >
  7. <input class = "btn" type = "submit"
  8. hodnota = "Odoslať" >

Osvedčeným postupom je, že sa pokúste priradiť prvok pre váš kontext, aby ste zaistili zodpovedajúce vykresľovanie naprieč prehliadačmi. Ak máte input, použite ako <input type="submit">tlačidlo.

  • 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 tučná
  • 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-bullhorn
  • 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

Postavený ako sprite

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.

Ako použiť

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:

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

K dispozícii sú aj štýly pre obrátené (biele) ikony, pripravené s jednou extra triedou:

  1. <i class = "ikona-vyhľadávanie ikon-biela" ></i>

Pre svoje ikony si môžete vybrať zo 140 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.

Prípady použitia

Ikony sú skvelé, ale kde by sa dali použiť? Tu je niekoľko nápadov:

  • Ako vizuály pre navigáciu na bočnom paneli
  • Pre čisto ikonovú navigáciu
  • Pre tlačidlá, ktoré vám pomôžu vyjadriť význam akcie
  • S odkazmi na zdieľanie kontextu na cieľovom mieste používateľa

V podstate kamkoľvek môžete umiestniť <i>značku, môžete umiestniť ikonu.

Príklady

Použite ich v tlačidlách, skupinách tlačidiel pre panel s nástrojmi, navigáciu alebo vstupy do formulárov.