Alap CSS

Az állványzat tetején az alapvető HTML-elemek stílusosan és bővíthető osztályokkal vannak kiegészítve, hogy friss, egységes megjelenést és hangulatot biztosítsanak.

Címsorok és törzsmásolat

Tipográfiai lépték

A teljes tipográfiai rács két Less változón alapul a változók.less fájlunkban: @baseFontSizeés @baseLineHeight. Az első az egész használt alap betűméret, a második pedig az alapvonal magassága.

Ezeket a változókat és némi matematikát használunk a margók, kitöltések és vonalmagasságok létrehozásához minden típusunkhoz és még sok máshoz.

Példa törzsszöveg

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.

Vezető törzs másolata

Tegye kiemelhetővé a bekezdést a hozzáadásával .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. 1. címsor

h2. 2. címsor

h3. 3. címsor

h4. 4. címsor

h5. 5. címsor
h6. 6. címsor

Kiemelés, cím és rövidítés

Elem Használat Választható
<strong> Egy szövegrészlet fontos hangsúlyozására Egyik sem
<em> Egy szövegrészlet hangsúlyozására Egyik sem
<abbr> A rövidítéseket és a mozaikszavakat becsomagolja, hogy a kibővített változatot mutasson

titleA kiterjesztett szöveg opcionális attribútuma szerepeltetése

Használja .initialismaz osztályt a nagybetűs rövidítésekhez.
<address> A legközelebbi ősének vagy az egész munkának elérhetőségeiért A formázás megőrzéséhez az összes sort a következővel fejezze be<br>

Hangsúly használata

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, a pharetra augue.

Megjegyzés: Nyugodtan használhatja <b>és <i>HTML5-ben, de a használatuk megváltozott egy kicsit. <b>célja, hogy kiemelje a szavakat vagy kifejezéseket anélkül, hogy további jelentőséget tulajdonítana, míg <i>többnyire hang, szakkifejezések stb.

Példa címek

Íme két példa a <address>címke használatára:

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

Példa rövidítések

Az attribútumot tartalmazó rövidítések titlealsó szegélye világos pontozott, és a súgó kurzor lebeg. Ez extra jelzést ad a felhasználóknak, hogy valami megjelenik a lebegtetéskor.

Adja hozzá az initialismosztályt egy rövidítéshez, hogy növelje a tipográfiai harmóniát azáltal, hogy valamivel kisebb szövegméretet ad neki.

A HTML a legjobb dolog a szeletelt kenyér óta.

Az attribútum szó rövidítése az attr .

Blokkidézetek

Elem Használat Választható
<blockquote> Blokkszintű elem egy másik forrásból származó tartalom idézéséhez

Attribútum hozzáadása citea forrás URL-hez

Használja .pull-leftés .pull-rightosztályokat a lebegtetett opciókhoz
<small> Opcionális elem a felhasználónak szánt idézet hozzáadásához, jellemzően egy szerző a mű címével Helyezze a <cite>jelet a forrás címe vagy neve köré

Idézet beillesztéséhez <blockquote>bármilyen HTML -kódot körbefűzhet idézetként. Egyenes idézetekhez a <p>.

Adjon meg egy opcionális <small>elemet a forrásra hivatkozva, és &mdash;előtte egy em kötőjelet kap stílusozási célból.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Valaki híres </small>
  4. </blockquote>

Példa blokk idézőjelekre

Az alapértelmezett idézőjelek stílusa a következő:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Valaki híres a Body of work -ban

Az idézet jobb oldali lebegtetéséhez adja hozzá a class="pull-right"következőt:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Valaki híres a Body of work -ban

Listák

Rendeletlen

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem és massa
  • Facilisis in 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

Stílus nélküli

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem és massa
  • Facilisis in 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

Rendelve

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem és massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Leírás

<dl>

Leírás listák
A leírások listája tökéletes a kifejezések meghatározásához.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Vízszintes leírás

<dl class="dl-horizontal">

Leírás listák
A leírások listája tökéletes a kifejezések meghatározásához.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
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.

Fel a fejjel! A vízszintes leíráslisták csonkolják azokat a kifejezéseket, amelyek túl hosszúak ahhoz, hogy elférjenek a bal oldali oszlop javításában text-overflow. Szűkebb nézetablakban az alapértelmezett halmozott elrendezésre váltanak.

Sorban

Burkolja be a soron belüli kódrészleteket a következővel: <code>.

  1. Például a <code> szakaszt </ code > soron belüliként kell tördelni .

Alap blokk

<pre>Többsoros kódhoz használja . Ügyeljen arra, hogy minden szögletes zárójelet elhagyjon a kódban a megfelelő megjelenítés érdekében.

<p>Minta szöveg itt...</p>
  1. <pre>
  2. <p>Minta szöveg itt...</p>
  3. </pre>

Megjegyzés: Ügyeljen arra, hogy a kód a <pre>címkéken belül legyen a lehető legközelebb a bal oldalhoz; az összes lapot megjeleníti.

Opcionálisan hozzáadhatja az .pre-scrollableosztályt, amely 350 képpont maximális magasságot állít be, és egy y-tengely görgetősávot biztosít.

Google Prettify

Vegyük ugyanazt az <pre>elemet, és adjunk hozzá két opcionális osztályt a továbbfejlesztett megjelenítés érdekében.

  1. <p> Minta szöveg itt... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Minta szöveg itt...</p>
  4. </pre>

Töltse le a google-code-prettify programot, és tekintse meg a readme-t a használatához.

Táblázat jelölése

Címke Leírás
<table> Burkolat elem az adatok táblázatos formátumban történő megjelenítéséhez
<thead> Tárolóelem a táblázat fejlécsoraihoz ( <tr>) a táblázat oszlopainak címkézéséhez
<tbody> Tárolóelem a táblázat soraihoz ( <tr>) a táblázat törzsében
<tr> Tárolóelem a táblázatcellák ( <td>vagy <th>) halmazához, amely egyetlen sorban jelenik meg
<td> Alapértelmezett táblázatcella
<th> Speciális táblázatcella oszlop- (vagy sor, hatókörtől és elhelyezéstől függően) címkéihez
A belül kell használni<thead>
<caption> A táblázat leírása vagy összefoglalása, különösen a képernyőolvasók számára hasznos
  1. <tábla>
  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>

Táblázat opciók

Név Osztály Leírás
Alapértelmezett Egyik sem Nincsenek stílusok, csak oszlopok és sorok
Alapvető .table Csak vízszintes vonalak a sorok között
Szegélyezett .table-bordered Lekerekíti a sarkokat és külső szegélyt ad hozzá
Zebra-csík .table-striped Világosszürke háttérszínt ad a páratlan sorokhoz (1, 3, 5 stb.)
Sűrítve .table-condensed Félbevágja a függőleges párnázást, 8 képpontról 4 képpontra, az összes tdés az thelemeken belül

Példa táblázatok

1. Alapértelmezett táblázatstílusok

A táblázatok stílusa automatikusan csak néhány szegéllyel történik az olvashatóság és a szerkezet fenntartása érdekében. 2.0 esetén az .tableosztály kötelező.

  1. <table class = "tábla" >
  2. </table>
# Keresztnév Vezetéknév Felhasználónév
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @twitter

2. Csíkos asztal

Tegye egy kicsit divatosabbá az asztalait zebracsíkok hozzáadásával – csak adja hozzá az .table-stripedosztályt.

Megjegyzés: A csíkos táblázatok a :nth-childCSS-választót használják, és nem érhetők el az IE7-IE8-ban.

  1. <table class = "tábla asztalcsíkos" >
  2. </table>
# Keresztnév Vezetéknév Felhasználónév
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @twitter

3. Szegélyezett táblázat

Esztétikai okokból adjon hozzá szegélyeket az egész asztalhoz és lekerekített sarkokat.

  1. <table class = "táblázat szegélyezett" >
  2. </table>
# Keresztnév Vezetéknév Felhasználónév
1 Mark Ottó @mdo
Mark Ottó @getbootstrap
2 Jákób Thornton @zsír
3 Larry, a madár @twitter

4. Sűrített asztal

Tegye kompaktabbá táblázatait az .table-condensedosztály hozzáadásával a táblázatcellák kitöltésének felére (8 képpontról 4 képpontra).

  1. <table class = "táblázat-sűrített" >
  2. </table>
# Keresztnév Vezetéknév Felhasználónév
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @twitter

5. Kombináld mindet!

Nyugodtan kombinálhatja az asztali osztályok bármelyikét, hogy a rendelkezésre álló osztályok bármelyikének felhasználásával különböző megjelenést érjen el.

  1. <table class = "tábla táblázat-csíkos táblázat-szegélyezett táblázat-sűrített" >
  2. ...
  3. </table>
Teljes név
# Keresztnév Vezetéknév Felhasználónév
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @twitter

Rugalmas HTML és CSS

A Bootstrap űrlapjainak legjobb része az, hogy minden bemenete és vezérlőeleme nagyszerűen néz ki, függetlenül attól, hogy hogyan építi fel őket a jelölésben. Nincs szükség felesleges HTML-re, de a mintákat biztosítjuk azoknak, akiknek szüksége van rá.

A bonyolultabb elrendezésekhez tömör és méretezhető osztályok tartoznak az egyszerű stílus és eseménykötés érdekében, így Ön minden lépésben lefedett.

Négy elrendezést tartalmaz

A Bootstrap négyféle űrlapelrendezést támogat:

  • Függőleges (alapértelmezett)
  • Keresés
  • Sorban
  • Vízszintes

A különböző típusú űrlapelrendezések bizonyos változtatásokat igényelnek a jelölésben, de maguk a vezérlők változatlanok maradnak, és ugyanúgy viselkednek.

Kontrollállapotok és egyebek

A Bootstrap űrlapjai stílusokat tartalmaznak az összes alapvető űrlapvezérlőhöz, például a bevitelhez, a szövegterülethez és a kívánt kijelöléshez. De számos egyéni összetevővel is rendelkezik, például hozzáfűzött és elejére fűzött bemenetekkel, valamint a jelölőnégyzetek listájának támogatásával.

Az olyan állapotok, mint a hiba, a figyelmeztetés és a siker, minden típusú űrlapvezérlőnél szerepelnek. A letiltott vezérlők stílusait is tartalmazza.

Négyféle űrlap

A Bootstrap egyszerű jelölést és stílusokat biztosít a gyakori webes űrlapok négy stílusához.

Név Osztály Leírás
Függőleges (alapértelmezett) .form-vertical (nem szükséges) Halmozott, balra igazított címkék a vezérlők felett
Sorban .form-inline Balra igazított címke és soros blokkvezérlők a kompakt stílus érdekében
Keresés .form-search Extra lekerekített szövegbevitel a tipikus keresési esztétika érdekében
Vízszintes .form-horizontal Balra, jobbra igazított címkék lebegtetése ugyanazon a sorban, mint a vezérlők

Példaűrlapok csak űrlapvezérlőkkel, extra jelölés nélkül

Alapforma

Intelligens és könnyű alapértelmezések extra jelölés nélkül.

Példa blokk szintű súgószöveg itt.

  1. <form class = "kút" >
  2. <label> Címke neve </label>
  3. <input type = "text" class = "span3" placeholder = "Írjon be valamit..." >
  4. <span class = "help-block" > Példa blokkszintű súgószövegre itt. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Nézd meg
  7. </label>
  8. <button type = "submit" class = "btn" > Küldés </button>
  9. </form>

Keresés űrlap

Adja .form-searchhozzá az űrlaphoz és .search-querya input.

  1. <form class = "jól űrlap-keresés" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Keresés </button>
  4. </form>

Inline űrlap

Adja hozzá .form-inlineaz űrlapvezérlők függőleges igazítását és térközét.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "E-mail" >
  3. <input type = "password" class = "input-small" placeholder = "Jelszó" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Emlékezzen rám
  6. </label>
  7. <button type = "submit" class = "btn" > Bejelentkezés </button>
  8. </form>

Vízszintes formák

A jobb oldalon látható az összes általunk támogatott alapértelmezett űrlapvezérlő. Íme a pontozott lista:

  • szövegbevitel (szöveg, jelszó, e-mail stb.)
  • jelölőnégyzetet
  • rádió
  • válassza ki
  • többszörös kijelölés
  • fájl bemenet
  • textarea

A szabad formájú szöveg mellett minden HTML5 szövegalapú bevitel így jelenik meg.

Példa jelölésre

A fenti űrlapelrendezési példa alapján itt van az első bemeneti és vezérlőcsoporthoz társított jelölés. A .control-group, .control-label, és .controlsosztályok mindegyike szükséges a stílushoz.

  1. <form class = "form-horizontal" >
  2. <mezőkészlet>
  3. <legend> Jelmagyarázat szövege </legend>
  4. <div class = "kontrollcsoport" >
  5. <label class = "control-label" for = "input01" > Szövegbevitel </label>
  6. <div class = "vezérlők" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Támogató súgószöveg </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Űrlapvezérlő állapotok

A Bootstrap stílusokat tartalmaz a böngésző által támogatott fókuszáláshoz és disabledállapotokhoz. Eltávolítjuk az alapértelmezett Webkit -et outline, és box-shadowa helyére a-t alkalmazunk :focus.


Űrlap érvényesítése

Tartalmazza a hibák, a figyelmeztetések és a siker érvényesítési stílusait is. A használathoz adja hozzá a hibaosztályt a környezőhöz .control-group.

  1. <fieldset
  2. class = "vezérlőcsoport hiba" >
  3. </fieldset>
Itt van némi érték
Lehet, hogy valami elromlott
Kérjük, javítsa ki a hibát
Ju Hú!
Ju Hú!

Űrlapvezérlők kiterjesztése

Bemenetek elő- és hozzáfűzése

A beviteli csoportok – hozzáfűzött vagy hozzáfűzött szöveggel – egyszerű módot kínálnak arra, hogy több kontextust biztosítsanak a bemenetekhez. Jó példa erre a @ jel a Twitter-felhasználónevekre vagy a $ pénzügyekre.


Jelölőnégyzetek és rádiók

Az 1.4-es verzióig a Bootstrap extra jelölést igényelt a jelölőnégyzetek és a rádiók körül, hogy egymásra helyezze őket. <label class="checkbox">Most már csak annyit kell tennie, hogy megismételjük a <input type="checkbox">.

A beépített jelölőnégyzetek és a rádiók is támogatottak. Csak adja hozzá .inlinebármelyik .checkboxvagy -hoz .radio, és kész.


Soron belüli űrlapok és hozzáfűzés/előbefűzés

Ha az elő- vagy hozzáfűzés bemeneteket soron belüli formában szeretné használni, ügyeljen arra, hogy a .add-onés inputa szóközök nélkül ugyanabba a sorban legyen.


Űrlap súgószövege

Ha súgószöveget szeretne hozzáadni az űrlapbevitelhez, illesszen be soron belüli súgószöveget a beviteli elem után <span class="help-inline">vagy egy súgószöveg blokkot .<p class="help-block">

Használja ugyanazokat az .span*osztályokat a rácsrendszerből a bemeneti méretekhez.

Használhat olyan statikus osztályokat is, amelyek nem illeszkednek a rácshoz, nem alkalmazkodnak a reszponzív CSS-stílusokhoz, vagy figyelembe veszik a különböző típusú vezérlőket (pl. inputvs. select).

@

Íme néhány súgószöveg

.00
Itt van még egy súgószöveg
$ .00

Megjegyzés: A címkék körülveszik az összes lehetőséget a sokkal nagyobb kattintási területek és a használhatóbb forma érdekében.

Gomb class="" Leírás
btn Normál szürke gomb színátmenettel
btn btn-primary Extra vizuális súlyt biztosít, és egy gombkészletben azonosítja az elsődleges műveletet
btn btn-info Az alapértelmezett stílusok alternatívájaként használják
btn btn-success Sikeres vagy pozitív cselekvést jelez
btn btn-warning Azt jelzi, hogy ezzel a művelettel óvatosan kell eljárni
btn btn-danger Veszélyes vagy potenciálisan negatív tevékenységet jelez
btn btn-inverse Alternatív sötétszürke gomb, amely nincs szemantikai művelethez vagy használathoz kötve

Gombok a műveletekhez

Megállapodás szerint a gombokat csak műveletekhez, míg a hiperhivatkozásokat objektumokhoz kell használni. Például a „Letöltés” ​​egy gomb, míg a „legutóbbi tevékenység” egy hivatkozás.

A gombstílusok bármire alkalmazhatók, ha az .btnosztályt alkalmazzák. Általában azonban ezeket csak a <a>és <button>elemekre érdemes alkalmazni.

Böngészők közötti kompatibilitás

Az IE9 nem vágja le a háttér színátmeneteket a lekerekített sarkokon, ezért eltávolítjuk. Ehhez kapcsolódóan az IE9 kijavítja a letiltott buttonelemeket, és a szöveget szürkévé teszi, csúnya szövegárnyékkal, amelyet nem tudunk javítani.

Több méretben

Nagyobb vagy kisebb gombokat szeretne? Adjon hozzá .btn-large, .btn-small, vagy .btn-minikét további mérethez.


Letiltott állapot

Letiltott gombok esetén adja hozzá az .disabledosztályt a hivatkozásokhoz és az disabledattribútumot az <button>elemekhez.

Elsődleges link Link

Fel a fejjel! .disabledHasznossági osztályként használjuk itt, hasonlóan a közös .activeosztályhoz, tehát nem szükséges előtag.

Egy osztály, több címke

Használja az .btnosztályt egy <a>, <button>, vagy <input>elemen.

Link
  1. <a class = "btn" href = "" > Link </a>
  2. <button class = "btn" type = "submit" >
  3. Gomb
  4. </button>
  5. <input class = "btn" type = "button"
  6. érték = "Bemenet" >
  7. <input class = "btn" type = "submit"
  8. value = "Küldés" >

Bevált gyakorlatként próbálja meg az elemet a kontextusnak megfelelően illeszteni, hogy biztosítsa a böngészők közötti megfelelő megjelenítést. Ha van egy input, használjon egyet <input type="submit">a gombhoz.

  • ikon-üveg
  • ikon-zene
  • ikon-keresés
  • ikon-boríték
  • ikon-szív
  • ikon-csillag
  • ikon-csillag-üres
  • ikon-felhasználó
  • ikon-film
  • ikon-th-nagy
  • ikon-th
  • icon-th-list
  • ikon-ok
  • ikon-eltávolítás
  • ikon-nagyítás
  • ikon-kicsinyítés
  • ikon kikapcsolva
  • ikon-jel
  • ikon-fogaskerék
  • ikon-kuka
  • ikon-home
  • ikon-fájl
  • ikon-idő
  • ikon-út
  • ikon-letöltés-alt
  • ikon-letöltés
  • ikon-feltöltés
  • ikon-beérkező levelek
  • ikon-játék-kör
  • ikon-ismétlés
  • ikon-frissítés
  • ikon-lista-alt
  • ikon-zár
  • ikon-zászló
  • ikon-fejhallgató
  • ikon-hangerő-ki
  • ikon-hangerő-csökkentés
  • ikon-hangerő-növelés
  • ikon-qrcode
  • ikon-vonalkód
  • ikon-címke
  • ikon-címkék
  • ikon-könyv
  • ikon-könyvjelző
  • ikon-nyomtatás
  • ikon-kamera
  • ikon-betűtípus
  • ikon-félkövér
  • ikon-dőlt
  • ikon-szöveg magassága
  • ikon-szöveg-szélesség
  • ikon-igazítás-balra
  • icon-align-center
  • ikon-igazítás-jobbra
  • ikon-igazítás-igazítás
  • ikon-lista
  • ikon-behúzás-bal
  • ikon-behúzás-jobbra
  • ikon-facetime-videó
  • ikon-kép
  • ikon-ceruza
  • ikon-térkép-jelölő
  • ikon-beállítás
  • ikon-árnyalat
  • ikon-szerkesztés
  • ikon-megosztás
  • ikon-ellenőrzés
  • ikon-mozgatás
  • ikon-lépés-hátra
  • ikon-gyors vissza
  • ikon-vissza
  • ikon-játék
  • ikon-szünet
  • ikon-stop
  • ikon-előre
  • ikon-gyors előre
  • ikon-lépés előre
  • ikon-kiadás
  • icon-chevron-bal
  • icon-chevron-right
  • ikon-plusz-jel
  • ikon-mínusz-jel
  • ikon-eltávolítás-jel
  • ikon-ok-jel
  • ikon-kérdés-jel
  • ikon-info-jel
  • ikon-képernyőkép
  • ikon-eltávolítás-kör
  • ikon-ok-kör
  • ikon-ban-kör
  • ikon-nyíl-balra
  • ikon-nyíl-jobbra
  • ikon-nyil felfelé
  • ikon-nyíl-lefelé
  • icon-share-alt
  • ikon-resize-full
  • ikon-resize-small
  • ikon-plusz
  • ikon-mínusz
  • ikon-csillag
  • ikon-felkiáltó-jel
  • ikon-ajándék
  • ikon-levél
  • ikon-tűz
  • ikon-szem-nyitva
  • ikon-szem-csukva
  • ikon-figyelmeztető jel
  • ikon-sík
  • ikon-naptár
  • ikon-véletlen
  • ikon-megjegyzés
  • ikon-mágnes
  • icon-chevron-up
  • icon-chevron-down
  • ikon-retweet
  • ikon-bevásárlókosár
  • ikon-mappa-bezárás
  • ikon-mappa-nyitás
  • ikon-átméretezés-függőleges
  • ikon-átméretezés-vízszintes
  • ikon-hdd
  • ikon-bikakürt
  • ikon-csengő
  • ikon-tanúsítvány
  • ikon-hüvelykujj felfelé
  • ikon-hüvelykujj lefelé
  • ikon-kéz-jobb
  • ikon-kéz-bal
  • ikon-kéz-fel
  • ikon-lefelé
  • ikon-kör-nyíl-jobbra
  • ikon-kör-nyíl balra
  • ikon-kör-nyil felfelé
  • ikon-kör-nyíl-lefelé
  • ikon-gömb
  • ikon-csavarkulcs
  • ikon-feladatok
  • ikon-szűrő
  • ikon-aktatáska
  • ikon-teljes képernyő

Spriteként épült

Ahelyett, hogy minden ikont külön kérésnek tennénk, egy sprite-ba állítottuk össze őket – egy csomó kép egy fájlban, amely CSS segítségével pozícionálja a képeket a -val background-position. Ez ugyanaz a módszer, amit a Twitter.com-on használunk, és nálunk jól bevált.

Minden ikonosztály előtagja van .icon-a megfelelő névtér és hatókör érdekében, hasonlóan a többi komponensünkhöz. Ez segít elkerülni a konfliktusokat más eszközökkel.

A Glyphicons engedélyezte számunkra a nyílt forráskódú eszköztárunkban található Halflings készlet használatát mindaddig, amíg linket és hitelt adunk meg itt a dokumentumokban. Kérjük, fontolja meg ugyanezt a projektjei során.

Hogyan kell használni

A Bootstrap <i>minden ikonhoz címkét használ, de nincs kis- és nagybetűosztályuk – csak egy megosztott előtag. A használathoz helyezze el a következő kódot szinte bárhol:

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

A fordított (fehér) ikonokhoz is rendelkezésre állnak stílusok, amelyek egy extra osztállyal készültek:

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

140 osztály közül választhat az ikonjaihoz. Csak adjon hozzá egy <i>címkét a megfelelő osztályokkal, és már kész is. A teljes listát megtalálja a sprites.less oldalon vagy itt, ebben a dokumentumban.

Fel a fejjel! Ha szöveges karakterláncok mellett használ, mint például a gombokban vagy a navigációs hivatkozásokban, ügyeljen arra, hogy hagyjon szóközt a <i>címke után a megfelelő térköz érdekében.

Használati esetek

Az ikonok nagyszerűek, de hol lehet őket használni? Íme néhány ötlet:

  • Vizuális eszközként az oldalsáv navigációjához
  • Egy tisztán ikonvezérelt navigációhoz
  • A gombokért, amelyek segítenek átadni egy művelet jelentését
  • Linkekkel, amelyek segítségével megoszthatja a környezetet a felhasználó célhelyén

Lényegében bárhová elhelyezhet egy <i>címkét, elhelyezhet egy ikont.

Példák

Használja őket gombokban, gombcsoportokban az eszköztárhoz, a navigációhoz vagy az űrlap elé fűzött bevitelekhez.