Pamata CSS

Papildus sastatnēm pamata HTML elementi ir veidoti un uzlaboti ar paplašināmām klasēm, lai nodrošinātu svaigu, konsekventu izskatu un sajūtu.

Virsraksti un pamatteksta kopija

Tipogrāfiskais mērogs

Viss tipogrāfiskais režģis ir balstīts uz diviem mainīgajiem mazāk mūsu failā mainīgajiem.less: @baseFontSizeun @baseLineHeight. Pirmais ir visā izmantotais pamata fonta lielums, bet otrais ir bāzes līnijas augstums.

Mēs izmantojam šos mainīgos lielumus un daļu matemātikas, lai izveidotu visu veidu piemales, polsterējumus un līniju augstumus un citus.

Pamatteksta piemērs

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.

Galvenā pamatteksta kopija

Izceliet rindkopu, pievienojot .lead.

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

h1. 1. virsraksts

h2. 2. virsraksts

h3. 3. virsraksts

h4. 4. virsraksts

h5. 5. virsraksts
h6. 6. virsraksts

Uzsvars, adrese un saīsinājums

Elements Lietošana Neobligāti
<strong> Lai uzsvērtu teksta fragmentu ar svarīgu Nav
<em> Lai uzsvērtu teksta fragmentu ar stresu Nav
<abbr> Iesaiņo saīsinājumus un akronīmus, lai rādītu izvērsto versiju, novietojot kursoru

titleIekļaut izvērsta teksta izvēles atribūtu

.initialismLielo burtu saīsinājumiem izmantojiet klasi.
<address> Lai iegūtu tuvākā senča kontaktinformāciju vai visu darbu Saglabājiet formatējumu, visas rindiņas beidzot ar<br>

Izmantojot uzsvaru

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.

Piezīme. Jūtieties brīvi izmantot <b>un <i>HTML5, taču to lietojums ir nedaudz mainījies. <b>ir paredzēts, lai izceltu vārdus vai frāzes, nepiešķirot papildu nozīmi, bet <i>galvenokārt balss, tehniskie termini utt.

Adrešu piemēri

Šeit ir divi piemēri, kā <address>var izmantot tagu.

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

Saīsinājumu piemēri

Saīsinājumiem ar titleatribūtu ir gaiša punktēta apakšējā apmale un palīdzības kursors, kas atrodas virs kursora. Tas lietotājiem sniedz papildu norādi, ka kaut kas tiks rādīts, virzot kursoru.

Pievienojiet initialismklasi saīsinājumam, lai palielinātu tipogrāfisko harmoniju, piešķirot tai nedaudz mazāku teksta izmēru.

HTML ir labākā lieta kopš sagrieztas maizes.

Vārda atribūts saīsinājums ir attr .

Bloķēt citātus

Elements Lietošana Neobligāti
<blockquote> Bloka līmeņa elements satura citēšanai no cita avota

Pievienojiet citeatribūtu avota URL

Izmantojiet .pull-leftun .pull-rightklases peldošām opcijām
<small> Neobligāts elements, lai pievienotu lietotājam paredzētu citātu, parasti autoru ar darba nosaukumu Novietojiet <cite>ap virsrakstu vai avota nosaukumu

Lai iekļautu citātu, aptiniet <blockquote>jebkuru HTML kā citātu. Tiešām pēdiņām mēs iesakām <p>.

Iekļaujiet neobligātu <small>elementu, lai norādītu savu avotu, un pirms tā tiks parādīta defise &mdash;stila nolūkos.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante venenatis. </p>
  3. <small> Kāds slavens </small>
  4. </blockquote>

Bloku citātu piemēri

Noklusējuma pēdiņas tiek veidotas šādi:

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

Kāds slavens darbā Body of work

Lai pārvietotu citātu pa labi, pievienojiet class="pull-right":

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

Kāds slavens darbā Body of work

Saraksti

Nesakārtots

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem un massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat plkst
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Bez stila

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem un massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat plkst
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Pasūtīts

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem un 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

Apraksts

<dl>

Aprakstu saraksti
Aprakstu saraksts ir lieliski piemērots terminu definēšanai.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida un eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontālais apraksts

<dl class="dl-horizontal">

Aprakstu saraksti
Aprakstu saraksts ir lieliski piemērots terminu definēšanai.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida un 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.

Uzmanību! Horizontālajos aprakstu sarakstos tiks saīsināti termini, kas ir pārāk gari, lai ietilptu kreisās kolonnas labojumā text-overflow. Šaurākos skata portos tie tiks mainīti uz noklusējuma grupēto izkārtojumu.

Rindā

Aptiniet iekļautos koda fragmentus ar <code>.

  1. Piemēram , sadaļai < code> sadaļa </ code > ir jāietver iekļauta .

Pamata bloks

Izmantojiet <pre>vairākām koda rindām. Lai nodrošinātu pareizu renderēšanu, kodā noteikti neizmantojiet leņķiekavas.

<p>Teksta paraugs šeit...</p>
  1. <iepriekš>
  2. <p>Teksta paraugs šeit...</p>
  3. </pre>

Piezīme. Noteikti glabājiet kodu <pre>tagos pēc iespējas tuvāk pa kreisi. tas atveidos visas cilnes.

Pēc izvēles varat pievienot .pre-scrollableklasi, kas iestatīs 350 pikseļu maksimālo augstumu un nodrošinās y ass ritjoslu.

Google Prettify

Paņemiet to pašu <pre>elementu un pievienojiet divas izvēles klases uzlabotai renderēšanai.

  1. <p> Teksta paraugs šeit... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Teksta paraugs šeit...</p>
  4. </pre>

Lejupielādējiet google-code-prettify un skatiet readme, lai uzzinātu, kā to izmantot.

Tabulas iezīmēšana

Tag Apraksts
<table> Iesaiņošanas elements datu attēlošanai tabulas formātā
<thead> Konteinera elements tabulas galvenes rindām ( <tr>), lai apzīmētu tabulas kolonnas
<tbody> Konteinera elements tabulas rindām ( <tr>) tabulas pamattekstā
<tr> Konteinera elements tabulas šūnu kopai ( <td>vai <th>), kas tiek rādīta vienā rindā
<td> Noklusējuma tabulas šūna
<th> Īpaša tabulas šūna kolonnas (vai rindas, atkarībā no tvēruma un izvietojuma) etiķetēm
Jāizmanto a<thead>
<caption> Tabulas satura apraksts vai kopsavilkums, īpaši noderīgs ekrāna lasītājiem
  1. <tabula>
  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>

Tabulas iespējas

Vārds Klase Apraksts
Noklusējums Nav Nav stilu, tikai kolonnas un rindas
Pamata .table Tikai horizontālas līnijas starp rindām
Apmales .table-bordered Noapaļo stūrus un pievieno ārējo apmali
Zebra-svītra .table-striped Pievieno gaiši pelēku fona krāsu nepāra rindām (1, 3, 5 utt.)
Kondensēts .table-condensed Pārgriež vertikālo polsterējumu uz pusēm no 8 pikseļiem līdz 4 pikseļiem visos tdun thelementos

Tabulu piemēri

1. Noklusējuma tabulu stili

Tabulas tiek automātiski veidotas tikai ar dažām apmalēm, lai nodrošinātu lasāmību un saglabātu struktūru. Ar 2.0 .tableklase ir nepieciešama.

  1. <tabula klase = "tabula" >
  2. </table>
# Vārds Uzvārds Lietotājvārds
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @twitter

2. Svītrains galds

Izbaudiet savus galdus, pievienojot zebras joslas — vienkārši pievienojiet .table-stripedklasi.

Piezīme. Svītrainām tabulām tiek izmantots :nth-childCSS atlasītājs, un tas nav pieejams IE7-IE8.

  1. <table class = "tabula svītraina" >
  2. </table>
# Vārds Uzvārds Lietotājvārds
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @twitter

3. Galds ar malām

Estētikas nolūkos pievienojiet apmales ap visu galdu un noapaļotus stūrus.

  1. <table class = "tabula ar tabulas robežām" >
  2. </table>
# Vārds Uzvārds Lietotājvārds
1 Atzīmēt Otto @mdo
Atzīmēt Otto @getbootstrap
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter

4. Saīsināts galds

Padariet tabulas kompaktākas, pievienojot .table-condensedklasi, lai tabulas šūnu polsterējumu samazinātu uz pusēm (no 8 pikseļiem līdz 4 pikseļiem).

  1. <table class = "tabula saīsināta tabula" >
  2. </table>
# Vārds Uzvārds Lietotājvārds
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter

5. Apvieno tos visus!

Jūtieties brīvi apvienot jebkuru no tabulas klasēm, lai iegūtu atšķirīgu izskatu, izmantojot jebkuru no pieejamajām klasēm.

  1. <table class = "tabula-svītrota tabula-bordered table-condensed" >
  2. ...
  3. </table>
Pilnais vārds
# Vārds Uzvārds Lietotājvārds
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter

Elastīgs HTML un CSS

Labākā daļa no Bootstrap veidlapām ir tā, ka visas jūsu ievades un vadīklas izskatās lieliski neatkarīgi no tā, kā tās veidojat savā iezīmēšanā. Nav nepieciešams lieks HTML, taču mēs nodrošinām modeļus tiem, kam tas nepieciešams.

Sarežģītākos izkārtojumos ir iekļautas kodolīgas un mērogojamas klases, kas nodrošina vieglu stilu un notikumu iesiešanu, lai jūs būtu nodrošināts ik uz soļa.

Iekļauti četri izkārtojumi

Bootstrap nodrošina četru veidu veidlapu izkārtojumu atbalstu:

  • Vertikāls (noklusējums)
  • Meklēt
  • Rindā
  • Horizontāli

Dažādu veidu veidlapu izkārtojumiem ir nepieciešamas dažas izmaiņas iezīmēšanā, taču pašas vadīklas paliek un darbojas tāpat.

Kontroles stāvokļi un vairāk

Bootstrap veidlapas ietver stilus visām pamata veidlapu vadīklām, piemēram, ievadei, teksta apgabalam un atlasei. Bet tajā ir arī vairāki pielāgoti komponenti, piemēram, pievienotas un pievienotas ievades, kā arī izvēles rūtiņu sarakstu atbalsts.

Katram veidlapas vadīkla veidam ir iekļauti tādi stāvokļi kā kļūda, brīdinājums un panākumi. Iekļauti arī stili invalīdām vadīklām.

Četru veidu veidlapas

Bootstrap nodrošina vienkāršu iezīmēšanu un stilus četriem izplatītāko tīmekļa formu stiliem.

Vārds Klase Apraksts
Vertikāls (noklusējums) .form-vertical (nav nepieciešams) Sakrautas, pa kreisi līdzinātas etiķetes virs vadīklām
Rindā .form-inline Pa kreisi līdzinātas etiķetes un iekļautas bloka vadīklas kompaktam stilam
Meklēt .form-search Īpaši noapaļota teksta ievade tipiskai meklēšanas estētikai
Horizontāli .form-horizontal Peldiet pa kreisi, pa labi līdzinātās etiķetes vienā rindā ar vadīklām

Veidlapu piemēri , izmantojot tikai veidlapas vadīklas, bez papildu marķējuma

Pamatforma

Viedi un vieglie noklusējuma iestatījumi bez papildu uzcenojumiem.

Šeit ir bloka līmeņa palīdzības teksta piemērs.

  1. <form class = "labi" >
  2. <label> Etiķetes nosaukums </label>
  3. <input type = "text" class = "span3" placeholder = "Ierakstiet kaut ko..." >
  4. <span class = "help-block" > Šeit ir bloka līmeņa palīdzības teksta piemērs. </span>
  5. <label class = "izvēles rūtiņa" >
  6. <input type = "checkbox" > Pārbaudiet mani
  7. </label>
  8. <button type = "submit" class = "btn" > Iesniegt </button>
  9. </form>

Meklēšanas forma

Pievienojiet .form-searchveidlapai .search-queryun input.

  1. <form class = "akas formas meklēšana" >
  2. <input type = "text" class = "ievades vides meklēšanas vaicājums" >
  3. <button type = "submit" class = "btn" > Meklēt </button>
  4. </form>

Iekļautā forma

Pievienojiet .form-inlineveidlapas vadīklu vertikālo līdzinājumu un atstarpi, lai izsmalcinātu.

  1. <form class = "aka forma-inline" >
  2. <input type = "text" class = "input-small" placeholder = "E-pasts" >
  3. <input type = "password" class = "input-small" placeholder = "Parole" >
  4. <label class = "izvēles rūtiņa" >
  5. <input type = "checkbox" > Atcerēties mani
  6. </label>
  7. <button type = "submit" class = "btn" > Pierakstīties </button>
  8. </form>

Horizontālās formas

Labajā pusē ir parādītas visas mūsu atbalstītās noklusējuma veidlapas vadīklas. Šeit ir saraksts ar aizzīmēm:

  • teksta ievade (teksts, parole, e-pasts utt.)
  • izvēles rūtiņa
  • radio
  • atlasiet
  • vairākas atlases
  • faila ievade
  • teksta apgabals

Papildus brīvas formas tekstam jebkura HTML5 teksta ievade parādās kā tāda.

Marķējuma piemērs

Ņemot vērā iepriekš minēto veidlapas izkārtojuma piemēru, šeit ir marķējums, kas saistīts ar pirmo ievades un vadības grupu. Veidošanai ir nepieciešamas visas klases .control-group, .control-label, un ..controls

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Leģendas teksts </legend>
  4. <div class = "kontrolgrupa" >
  5. <label class = "control-label" for = "input01" > Teksta ievade </label>
  6. <div class = "vadības ierīces" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Atbalsta palīdzības teksts </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Veidlapu kontroles stāvokļi

Bootstrap piedāvā stilus pārlūkprogrammas atbalstītajiem fokusētajiem un disabledstāvokļiem. Mēs noņemam noklusējuma Webkit outlineun box-shadowtā vietā lietojam a :focus.


Veidlapas apstiprināšana

Tas ietver arī kļūdu, brīdinājumu un panākumu validācijas stilus. Lai izmantotu, pievienojiet kļūdas klasi apkārtējai .control-group.

  1. <fieldset
  2. class = "kontrolgrupas kļūda" >
  3. </fieldset>
Šeit ir kāda vērtība
Iespējams, kaut kas ir nogājis greizi
Lūdzu, izlabojiet kļūdu
Woohoo!
Woohoo!

Veidlapu vadīklu paplašināšana

Pirms un pievienot ievades

Ievades grupas — ar pievienotu vai priekšā pievienotu tekstu — nodrošina vienkāršu veidu, kā ievadīt ievadei plašāku kontekstu. Lieliski piemēri ir @ zīme Twitter lietotājvārdiem vai $ finansēm.


Izvēles rūtiņas un radio

Līdz pat versijai 1.4, Bootstrap bija nepieciešams papildu marķējums ap izvēles rūtiņām un radio, lai tās sakārtotu. Tagad ir vienkārši atkārtot to <label class="checkbox">, kas ieskauj <input type="checkbox">.

Tiek atbalstītas arī iekļautās izvēles rūtiņas un radio. Vienkārši pievienojiet .inlinejebkuram .checkboxvai .radioun esat pabeidzis.


Iekļauts veidlapas un pievienot/priekšpievienot

Lai izmantotu ievades ievades vai pievienošanas ievadi iekļautā formā, noteikti ievietojiet .add-onun inputtajā pašā rindā, bez atstarpēm.


Veidlapas palīdzības teksts

Lai pievienotu palīdzības tekstu veidlapas ievadei, iekļaujiet iekļauto palīdzības tekstu ar ievades elementu <span class="help-inline">vai palīdzības teksta bloku ar to.<p class="help-block">

Ievades lielumiem izmantojiet tās pašas .span*klases no režģa sistēmas.

Varat arī izmantot statiskas klases, kas netiek kartētas ar režģi, nepielāgojas adaptīvajiem CSS stiliem vai ņem vērā dažāda veida vadīklas (piemēram, inputpret select).

@

Šeit ir daži palīdzības teksti

.00
Šeit ir vairāk palīdzības teksta
$ .00

Piezīme. Uzlīmes aptver visas opcijas, kas nodrošina daudz lielāku klikšķu apgabalu un ērtāk lietojamu formu.

Poga class="" Apraksts
btn Standarta pelēka poga ar gradientu
btn btn-primary Nodrošina papildu vizuālo svaru un identificē galveno darbību pogu komplektā
btn btn-info Izmanto kā alternatīvu noklusējuma stiliem
btn btn-success Norāda uz veiksmīgu vai pozitīvu darbību
btn btn-warning Norāda, ka, veicot šo darbību, jāievēro piesardzība
btn btn-danger Norāda uz bīstamu vai potenciāli negatīvu darbību
btn btn-inverse Alternatīva tumši pelēka poga, kas nav saistīta ar semantisku darbību vai lietojumu

Pogas darbībām

Parasti pogas ir jāizmanto tikai darbībām, savukārt hipersaites ir jāizmanto objektiem. Piemēram, “Lejupielādēt” ir jābūt pogai, bet “nesenajai darbībai” jābūt saitei.

Pogu stilus var lietot jebko, ja tiek lietota .btnklase. Tomēr parasti vēlaties tos lietot tikai <a>un <button>elementiem.

Saderība starp pārlūkprogrammām

IE9 neapgriež fona gradientus uz noapaļotiem stūriem, tāpēc mēs to noņemam. Saistīts ar to, ka IE9 izjauc atspējotos buttonelementus, padarot tekstu pelēku ar nepatīkamu teksta ēnu, ko nevaram novērst.

Vairāki izmēri

Vai vēlaties lielākas vai mazākas pogas? Pievienojiet .btn-large, .btn-small, vai .btn-minidiviem papildu izmēriem.


Atspējots stāvoklis

Atspējotām pogām pievienojiet .disabledsaitēm klasi un elementu disabledatribūtu <button>.

Primārā saite Saite

Uzmanību! Šeit mēs izmantojam .disabledkā lietderības klasi, kas ir līdzīga parastajai .activeklasei, tāpēc prefikss nav nepieciešams.

Viena klase, vairākas atzīmes

Izmantojiet .btnklasi elementā <a>, <button>, vai .<input>

Saite
  1. <a class = "btn" href = "" > Saite </a>
  2. <button class = "btn" type = "iesniegt" >
  3. Poga
  4. </button>
  5. <ievades klase = "btn" type = "poga"
  6. vērtība = "Ievade" >
  7. <input class = "btn" type = "iesniegt"
  8. value = "Iesniegt" >

Labākā prakse ir mēģiniet pielāgot elementu savam kontekstam, lai nodrošinātu atbilstošu vairāku pārlūkprogrammu renderēšanu. Ja jums ir input, izmantojiet <input type="submit">pogu savai pogai.

  • ikonu stikls
  • ikonu mūzika
  • ikonu meklēšana
  • ikona-aploksne
  • ikona-sirds
  • ikona-zvaigzne
  • ikona-zvaigzne-tukša
  • ikonas lietotājs
  • ikona-filma
  • ikona-th-lielā
  • ikona-th
  • ikonu saraksts
  • ikona-ok
  • ikonas noņemšana
  • ikona-tuvināt
  • ikona-tālināt
  • ikona izslēgta
  • ikona-signāls
  • ikonas zobrats
  • ikona-miskaste
  • ikona-mājas
  • ikonas fails
  • ikonas laiks
  • ikonu ceļš
  • icon-download-alt
  • ikonu lejupielāde
  • ikonas augšupielāde
  • ikona-iesūtne
  • ikona-spēlēt-aplis
  • ikonas atkārtojums
  • ikona-atsvaidzināt
  • icon-list-alt
  • ikonu bloķēšana
  • ikona-karogs
  • ikonas-austiņas
  • ikonas skaļuma izslēgšana
  • ikona-skaļuma samazināšana
  • ikonas skaļuma palielināšana
  • ikona-qrcode
  • ikona-svītrkods
  • ikona-taga
  • ikonu tagi
  • ikonu grāmata
  • ikona-grāmatzīme
  • ikonu drukāšana
  • ikona-kamera
  • ikonas fonts
  • ikona treknrakstā
  • ikona — slīpraksts
  • ikona-teksta augstums
  • ikona-teksta platums
  • ikona-līdzināt-pa kreisi
  • ikona-līdzināt-centrs
  • ikona-līdzināt-pa labi
  • icon-align-justify
  • ikonu saraksts
  • ikona-atkāpe-pa kreisi
  • ikona-atkāpe-pa labi
  • ikona-facetime-video
  • ikona-attēls
  • ikona-zīmulis
  • ikona-karte-marķieris
  • ikonas pielāgošana
  • ikonu nokrāsa
  • ikonu rediģēšana
  • ikonu koplietošana
  • ikonu pārbaude
  • ikonu pārvietošana
  • ikona-solis-atpakaļ
  • ikona-ātri atpakaļ
  • ikona atpakaļ
  • ikonu atskaņošana
  • ikonas pauze
  • ikona-stop
  • ikona-uz priekšu
  • ikona-ātrīt uz priekšu
  • ikona-solis uz priekšu
  • ikonas izstumšana
  • ikona-ševrons-pa kreisi
  • ikona-ševrons-pa labi
  • ikona-plus-zīme
  • ikona-mīnus-zīme
  • ikona-noņemt-zīme
  • ikona-ok-zīme
  • ikona-jautājums-zīme
  • ikona-info-zīme
  • ikona-ekrānuzņēmums
  • ikona-noņemt-aplis
  • ikona-ok-aplis
  • ikona-ban-aplis
  • ikona-bultiņa-pa kreisi
  • ikona-bultiņa-pa labi
  • ikona-bultiņa uz augšu
  • ikona-bultiņa-lejup
  • ikona-share-alt
  • icon-resize-full
  • ikona-mainiet izmērus-small
  • ikona-pluss
  • ikona-mīnuss
  • ikona-zvaigznīte
  • ikona-izsaukuma-zīme
  • ikona-dāvana
  • ikonu lapa
  • ikona-uguns
  • ikona-acis-atvērts
  • ikona-acs-aizvērt
  • ikona-brīdinājuma zīme
  • ikonu plakne
  • ikona-kalendārs
  • ikonas nejauši
  • ikona-komentārs
  • ikona-magnēts
  • icon-chevron-up
  • icon-chevron-down
  • ikona-retweet
  • ikona-iepirkumu grozs
  • ikona-mape-aizvērt
  • ikona-mape-atvērt
  • ikona-resize-vertikāla
  • ikona-mainiet izmērus-horizontāli
  • ikona-hdd
  • ikona-bullhorn
  • ikona-zvans
  • ikona-sertifikāts
  • ikona īkšķi uz augšu
  • ikona-īkšķi uz leju
  • ikona-roka-pa labi
  • ikona-roka-pa kreisi
  • ikona-roka uz augšu
  • ikona-roku uz leju
  • ikona-aplis-bultiņa-pa labi
  • ikona-aplis-bultiņa-pa kreisi
  • ikona-aplis-bultiņa-augšup
  • ikona-aplis-bultiņa-lejup
  • ikona-globuss
  • ikonu uzgriežņu atslēga
  • ikonu uzdevumi
  • ikonu filtrs
  • ikona-portfelis
  • ikonas pilnekrāna režīmā

Būvēts kā spraits

Tā vietā, lai katru ikonu padarītu par papildu pieprasījumu, mēs esam tās apkopojuši spraitā — attēlu kopumā vienā failā, kas izmanto CSS, lai attēlus novietotu ar background-position. Šī ir tā pati metode, ko mēs izmantojam vietnē Twitter.com, un tā mums ir labi palīdzējusi.

Visām ikonu klasēm ir pievienots prefikss, .icon-lai nodrošinātu pareizu nosaukumu atstarpes un darbības jomu, līdzīgi kā citiem mūsu komponentiem. Tas palīdzēs izvairīties no konfliktiem ar citiem rīkiem.

Glyphicons ir atļāvis mums izmantot mūsu atvērtā koda rīkkopā esošo Halflings komplektu, ja vien mēs nodrošinām saiti un kredītu šeit, dokumentos. Lūdzu, apsveriet iespēju darīt to pašu savos projektos.

Kā izmantot

Bootstrap visām ikonām izmanto <i>tagu, taču tām nav reģistra klases — tikai koplietots prefikss. Lai izmantotu, ievietojiet šo kodu gandrīz jebkurā vietā:

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

Ir pieejami arī stili apgrieztām (baltām) ikonām, kas sagatavotas ar vienu papildu klasi:

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

Ir pieejamas 140 klases, no kurām izvēlēties jūsu ikonas. Vienkārši pievienojiet <i>tagu ar pareizajām klasēm, un esat gatavs. Pilnu sarakstu varat atrast vietnē sprites.less vai šeit, šajā dokumentā.

Uzmanību! Ja izmantojat blakus teksta virknēm, piemēram, pogām vai navigācijas saitēm, noteikti atstājiet atstarpi aiz <i>taga, lai nodrošinātu pareizu atstarpi.

Lietošanas gadījumi

Ikonas ir lieliskas, bet kur tās izmantot? Šeit ir dažas idejas:

  • Kā vizuālie materiāli sānjoslas navigācijai
  • Tīri uz ikonām balstītai navigācijai
  • Pogām, kas palīdz izteikt darbības nozīmi
  • Ar saitēm, lai kopīgotu lietotāja galamērķa kontekstu

Būtībā visur, kur varat ievietot <i>atzīmi, varat ievietot ikonu.

Piemēri

Izmantojiet tos pogās, pogu grupās rīkjoslai, navigācijai vai pievienotās veidlapas ievadei.