Basis CSS

Bo en behalwe die steierwerk word basiese HTML-elemente gestileer en verbeter met uitbreidbare klasse om 'n vars, konsekwente voorkoms en gevoel te gee.

Opskrifte en liggaamskopie

Tipografiese skaal

Die hele tipografiese rooster is gebaseer op twee Less veranderlikes in ons variables.less lêer: @baseFontSizeen @baseLineHeight. Die eerste is die basiese lettergrootte wat deurgaans gebruik word en die tweede is die basislynhoogte.

Ons gebruik daardie veranderlikes, en 'n mate van wiskunde, om die marges, opvullings en lynhoogtes van al ons tipe en meer te skep.

Voorbeeld liggaam teks

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.

Loodliggaamkopie

Laat 'n paragraaf uitstaan ​​deur by te voeg .lead.

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

h1. Opskrif 1

h2. Opskrif 2

h3. Opskrif 3

h4. Opskrif 4

h5. Opskrif 5
h6. Opskrif 6

Beklemtoning, adres en afkorting

Element Gebruik Opsioneel
<strong> Vir die klem op 'n stukkie teks met belangrike Geen
<em> Om 'n stukkie teks met stres te beklemtoon Geen
<abbr> Wikkel afkortings en akronieme om die uitgebreide weergawe te wys wanneer jy beweeg

Sluit opsionele titlekenmerk vir uitgebreide teks in

Gebruik .initialismklas vir hoofletters.
<address> Vir kontakinligting vir sy naaste voorouer of die hele liggaam van werk Behou formatering deur alle reëls te eindig met<br>

Die gebruik van klem

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , uit fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, 'n pharetra augue.

Let wel: Gebruik gerus <b>en <i>in HTML5, maar hul gebruik het 'n bietjie verander. <b>is bedoel om woorde of frases uit te lig sonder om bykomende belangrikheid oor te dra, terwyl <i>dit meestal vir stem, tegniese terme, ens.

Voorbeeld adresse

Hier is twee voorbeelde van hoe die <address>merker gebruik kan word:

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

Voorbeeld afkortings

Afkortings met 'n titleeienskap het 'n ligte gestippelde onderrand en 'n hulpwyser wanneer jy beweeg. Dit gee gebruikers 'n ekstra aanduiding dat iets gewys sal word wanneer hulle beweeg.

Voeg die initialismklas by 'n afkorting om tipografiese harmonie te verhoog deur dit 'n effens kleiner teksgrootte te gee.

HTML is die beste ding sedert gesnyde brood.

'n Afkorting van die woord eienskap is attr .

Blokaanhalings

Element Gebruik Opsioneel
<blockquote> Blokvlakelement om inhoud van 'n ander bron aan te haal

Voeg citekenmerk by vir bron-URL

Gebruik .pull-leften .pull-rightklasse vir gedryf opsies
<small> Opsionele element vir die byvoeging van 'n gebruikergerigte aanhaling, tipies 'n skrywer met titel van werk Plaas die <cite>om die titel of naam van die bron

Om 'n blokaanhaling in te sluit, draai <blockquote>om enige HTML as die aanhaling. Vir reguit aanhalings beveel ons 'n aan <p>.

Sluit 'n opsionele <small>element in om jou bron aan te haal en jy sal 'n streep &mdash;voor dit kry vir stileringsdoeleindes.

  1. <blokaanhaling>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere ert 'n ante venenatis. </p>
  3. <klein> Iemand beroemd </small>
  4. </blockquote>

Voorbeeld blokaanhalings

Verstek blokaanhalings word so gestileer:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere ert 'n ante venenatis.

Iemand bekend in Body of work

Om jou blokaanhaling na regs te laat dryf, voeg by class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere ert 'n ante venenatis.

Iemand bekend in Body of work

Lyste

Ongeorden

<ul>

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

Ongestileer

<ul class="unstyled">

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

Bestel

<ol>

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

Beskrywing

<dl>

Beskrywing lyste
'n Beskrywingslys is perfek om terme te definieer.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida by eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horisontale beskrywing

<dl class="dl-horizontal">

Beskrywing lyste
'n Beskrywingslys is perfek om terme te definieer.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida by 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, uit fermentum massa justo sit amet risus.

Let op! Horisontale beskrywingslyste sal terme wat te lank is om in die linkerkolomoplossing te pas, afkap text-overflow. In nouer viewports, sal hulle verander na die verstek gestapelde uitleg.

In lyn

Wikkel inlyn-brokkies kode met <code>.

  1. Byvoorbeeld , <code> afdeling </ code > moet as inlyn toegedraai word .

Basiese blok

Gebruik <pre>vir veelvuldige reëls kode. Maak seker dat jy enige hoekhakies in die kode ontsnap vir behoorlike weergawe.

<p>Voorbeeldteks hier...</p>
  1. <pre>
  2. <p>Voorbeeldteks hier...</p>
  3. </pre>

Let wel: Maak seker dat jy kode binne <pre>etikette so na as moontlik aan die linkerkant hou; dit sal alle oortjies weergee.

Jy kan opsioneel die .pre-scrollableklas byvoeg wat 'n maksimum hoogte van 350px sal stel en 'n y-as-rolbalk sal verskaf.

Google Pretify

Neem dieselfde <pre>element en voeg twee opsionele klasse by vir verbeterde weergawe.

  1. <p> Voorbeeldteks hier... </p>
  1. <pre class = "mooiafdruk
  2. lynnommers" >
  3. <p>Voorbeeldteks hier...</p>
  4. </pre>

Laai google-code-prettify af en kyk na die leesmy vir hoe om te gebruik.

Tabelopmaak

Merk Beskrywing
<table> Omvouelement vir die vertoon van data in 'n tabelformaat
<thead> Houerelement vir tabelopskrifrye ( <tr>) om tabelkolomme te benoem
<tbody> Houerelement vir tabelrye ( <tr>) in die liggaam van die tabel
<tr> Houerelement vir 'n stel tabelselle ( <td>of <th>) wat op 'n enkele ry verskyn
<td> Verstek tabelsel
<th> Spesiale tabelsel vir kolom (of ry, afhangende van omvang en plasing) etikette
Moet gebruik word binne 'n<thead>
<caption> Beskrywing of opsomming van wat die tabel bevat, veral nuttig vir skermlesers
  1. <tabel>
  2. <kop>
  3. <tr>
  4. <de> </de>
  5. <de> </de>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </tabel>

Tafelopsies

Naam Klas Beskrywing
Verstek Geen Geen style nie, net kolomme en rye
Basies .table Slegs horisontale lyne tussen rye
Omrand .table-bordered Rond hoeke af en voeg buitenste rand by
Sebra-streep .table-striped Voeg liggrys agtergrondkleur by vreemde rye (1, 3, 5, ens.)
Gekondenseerde .table-condensed Sny vertikale vulling in die helfte, van 8px tot 4px, binne alle tden thelemente

Voorbeeld tabelle

1. Verstek tabelstyle

Tabelle word outomaties gestileer met slegs 'n paar rande om leesbaarheid te verseker en struktuur te behou. Met 2.0 word die .tableklas vereis.

  1. <tabelklas = " tafel" >
  2. </tabel>
# Eerste naam Van Gebruikersnaam
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter

2. Gestreepte tafel

Raak 'n bietjie fyn met jou tafels deur sebrastrepe by te voeg—voeg net die .table-stripedklas by.

Let wel: Gestreepte tabelle gebruik die :nth-childCSS-kieser en is nie beskikbaar in IE7-IE8 nie.

  1. <table class = "tafel tafel-gestreep" >
  2. </tabel>
# Eerste naam Van Gebruikersnaam
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter

3. Bordered tafel

Voeg rande om die hele tafel en afgeronde hoeke by vir estetiese doeleindes.

  1. <table class = "table-bordered" >
  2. </tabel>
# Eerste naam Van Gebruikersnaam
1 Merk Otto @mdo
Merk Otto @getbootstrap
2 Jakob Thornton @vet
3 Larry die voël @twitter

4. Gekondenseerde tafel

Maak jou tafels meer kompak deur die .table-condensedklas by te voeg om tafelselvulling in die helfte te sny (van 8px tot 4px).

  1. <tabel klas = "tabel tabel-gekondenseerde" >
  2. </tabel>
# Eerste naam Van Gebruikersnaam
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter

5. Kombineer hulle almal!

Kombineer gerus enige van die tafelklasse om verskillende voorkoms te verkry deur enige van die beskikbare klasse te gebruik.

  1. <table class = "tafel-tafel-gestreepte tafel-begrensde tafel-gekondenseerde" >
  2. ...
  3. </tabel>
Volle naam
# Eerste naam Van Gebruikersnaam
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter

Buigsame HTML en CSS

Die beste deel van vorms in Bootstrap is dat al jou invoere en kontroles goed lyk, maak nie saak hoe jy dit in jou opmaak bou nie. Geen oortollige HTML word vereis nie, maar ons verskaf die patrone vir diegene wat dit benodig.

Meer ingewikkelde uitlegte kom met bondige en skaalbare klasse vir maklike stilering en gebeurtenisbinding, sodat jy by elke stap gedek is.

Vier uitlegte ingesluit

Bootstrap kom met ondersteuning vir vier tipes vormuitlegte:

  • Vertikaal (verstek)
  • Soek
  • In lyn
  • Horisontaal

Verskillende tipes vormuitlegte vereis 'n paar veranderinge aan opmaak, maar die kontroles self bly en tree dieselfde op.

Beheer state en meer

Bootstrap se vorms bevat style vir al die basisvormkontroles soos invoer, teksarea en seleksie wat jy sou verwag. Maar dit kom ook met 'n aantal pasgemaakte komponente soos aangehegte en voorafgesette invoere en ondersteuning vir lyste van merkblokkies.

State soos fout, waarskuwing en sukses is ingesluit vir elke tipe vormbeheer. Ook ingesluit is style vir gedeaktiveerde kontroles.

Vier tipes vorms

Bootstrap bied eenvoudige opmaak en style vir vier style van algemene webvorms.

Naam Klas Beskrywing
Vertikaal (verstek) .form-vertical (nie benodig nie) Gestapelde, links-belynde etikette oor kontroles
In lyn .form-inline Links-belynde etiket- en inlynblokkontroles vir kompakte styl
Soek .form-search Ekstra afgeronde teksinvoer vir 'n tipiese soek-estetiese
Horisontaal .form-horizontal Swaai links, regs-belynde etikette op dieselfde lyn as kontroles

Voorbeeldvorms wat slegs vormkontroles gebruik, geen ekstra opmaak nie

Basiese vorm

Slim en liggewig verstekke sonder ekstra opmaak.

Voorbeeld blokvlak-hulpteks hier.

  1. <vorm klas = "wel" >
  2. <label> Etiketnaam < /label>
  3. <input type = "text" class = "span3" placeholder = " Tik iets ..." >
  4. <span class = "help-block" > Voorbeeld blokvlak-hulpteks hier. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Kyk na my
  7. </label>
  8. <button type = "submit" class = "btn" > Dien in </button>
  9. </form>

Soek vorm

Voeg .form-searchby die vorm en .search-queryby die input.

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

Inlyn vorm

Voeg by .form-inlineom die vertikale belyning en spasiëring van vormkontroles te verfyn.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" plekhouer = "E-pos" >
  3. <input type = "password" class = "input-small" placeholder = "Wagwoord" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Onthou my
  6. </label>
  7. <button type = "submit" class = "btn" > Meld aan </button>
  8. </form>

Horisontale vorms

Aan die regterkant word al die verstekvormkontroles wat ons ondersteun, gewys. Hier is die kolpuntlys:

  • teksinvoer (teks, wagwoord, e-pos, ens.)
  • merkblokkie
  • radio
  • kies
  • meervoudige kies
  • lêerinvoer
  • teksarea

Benewens vryvorm teks, lyk enige HTML5-teksgebaseerde invoer so.

Voorbeeld opmaak

Gegewe die bostaande voorbeeldvormuitleg, hier is die opmaak wat met die eerste invoer- en kontrolegroep geassosieer word. Die .control-group, .control-label, en .controlsklasse word almal benodig vir stilering.

  1. <vorm klas = "vorm-horisontaal" >
  2. <veldset>
  3. <legend> Legendeteks </legend>
  4. <div klas = "kontrolegroep" >
  5. <label class = "control-label" for = "input01" > Teksinvoer </label>
  6. <div klas = "kontroles" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Ondersteunende hulpteks </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Vorm beheer state

Bootstrap beskik oor style vir blaaier-ondersteunde gefokusde en disabledstate. Ons verwyder die verstek Webkit outlineen pas 'n box-shadowin die plek daarvan toe vir :focus.


Vorm validering

Dit sluit ook valideringstyle vir foute, waarskuwings en sukses in. Om te gebruik, voeg die foutklas by die omliggende .control-group.

  1. <veldstel
  2. class = "kontrolegroepfout" >
  3. </fieldset>
Hier is 'n bietjie waarde
Iets het dalk verkeerd geloop
Maak asseblief die fout reg
Woohoo!
Woohoo!

Uitbreiding van vormkontroles

Voeg invoere voor en voeg dit by

Invoergroepe—met aangehegte of voorgeskrewe teks—verskaf 'n maklike manier om meer konteks vir jou insette te gee. Goeie voorbeelde sluit in die @-teken vir Twitter-gebruikersname of $ vir finansies.


Merkblokkies en radio's

Tot v1.4 het Bootstrap ekstra opmaak rondom merkblokkies en radio's vereis om dit op te stapel. Nou, dit is 'n eenvoudige kwessie van die herhaal <label class="checkbox">wat die omvou <input type="checkbox">.

Inlyn-merkblokkies en radio's word ook ondersteun. Voeg net .inlineby enige .checkboxof .radioen jy is klaar.


Inlynvorms en voeg by/vooraf

Om voor- of byvoeginsette in 'n inlynvorm te gebruik, maak seker dat jy die .add-onen inputop dieselfde lyn plaas, sonder spasies.


Vorm hulpteks

Om hulpteks vir jou vorminvoere by te voeg, sluit inlyn-hulpteks by <span class="help-inline">of 'n hulpteksblok <p class="help-block">na die invoerelement in.

Gebruik dieselfde .span*klasse van die roosterstelsel vir invoergroottes.

Jy kan ook statiese klasse gebruik wat nie na die rooster karteer nie, aanpas by die responsiewe CSS-style, of rekening hou met verskillende tipes kontroles (bv. inputvs. select).

@

Hier is 'n paar hulpteks

.00
Hier is meer hulpteks
$ .00

Let wel: Etikette omring al die opsies vir baie groter klikareas en 'n meer bruikbare vorm.

Knoppie klas="" Beskrywing
btn Standaard grys knoppie met gradiënt
btn btn-primary Verskaf ekstra visuele gewig en identifiseer die primêre aksie in 'n stel knoppies
btn btn-info Word gebruik as 'n alternatief vir die verstekstyle
btn btn-success Dui 'n suksesvolle of positiewe aksie aan
btn btn-warning Dui aan dat versigtigheid met hierdie aksie geneem moet word
btn btn-danger Dui 'n gevaarlike of potensieel negatiewe aksie aan
btn btn-inverse Alternatiewe donkergrys knoppie, nie gekoppel aan 'n semantiese aksie of gebruik nie

Knoppies vir aksies

As 'n konvensie moet knoppies slegs vir aksies gebruik word terwyl hiperskakels vir voorwerpe gebruik moet word. Byvoorbeeld, "Laai af" moet 'n knoppie wees terwyl "onlangse aktiwiteit" 'n skakel moet wees.

Knoppiestyle kan op enigiets toegepas word met die .btnklas toegepas. <a>U sal dit egter tipies op slegs en <button>elemente wil toepas .

Kruisblaaierversoenbaarheid

IE9 sny nie agtergrondgradiënte op afgeronde hoeke nie, so ons verwyder dit. Verwant, IE9 maak gedeaktiveerde buttonelemente weg, wat teks grys maak met 'n nare teksskadu wat ons nie kan regmaak nie.

Veelvuldige groottes

Lus vir groter of kleiner knoppies? Voeg .btn-large, .btn-small, of .btn-minivir twee bykomende groottes by.


Gestremde toestand

Vir gedeaktiveerde knoppies, voeg die .disabledklas by skakels en die disabledkenmerk vir <button>elemente.

Primêre skakel Skakel

Let op! Ons gebruik .disabledas 'n nutsklas hier, soortgelyk aan die algemene .activeklas, so geen voorvoegsel word vereis nie.

Een klas, veelvuldige etikette

Gebruik die .btnklas op 'n <a>, <button>, of <input>element.

Skakel
  1. <a class = "btn" href = "" > Skakel </a>
  2. <button class = "btn" type = "submit" >
  3. Knoppie
  4. </knoppie>
  5. <invoerklas = " btn" tipe = "knoppie"
  6. waarde = "Invoer" >
  7. <invoerklas = " btn" tipe = "dien in"
  8. value = "Dien in" >

As 'n beste praktyk, probeer om die element vir jou konteks te pas om te verseker dat ooreenstem met kruisblaaier-weergawe. As jy 'n input, gebruik 'n <input type="submit">vir jou knoppie.

  • ikoon-glas
  • ikoon-musiek
  • ikoon-soektog
  • ikoon-koevert
  • ikoon-hart
  • ikoon-ster
  • ikoon-ster-leeg
  • ikoon-gebruiker
  • ikoon-film
  • ikoon-de-groot
  • ikoon-ste
  • ikoon-ste lys
  • ikoon-ok
  • ikoon-verwyder
  • ikoon-zoem-in
  • ikoon-uitzoomen
  • ikoon-af
  • ikoon-sein
  • ikoon-rat
  • ikoon-asblik
  • ikoon-huis
  • ikoon-lêer
  • ikoon-tyd
  • ikoon-pad
  • ikoon-aflaai-alt
  • ikoon-aflaai
  • ikoon-oplaai
  • ikoon-inkassie
  • ikoon-speel-sirkel
  • ikoon-herhaal
  • ikoon-verfris
  • ikoon-lys-alt
  • ikoon-slot
  • ikoon-vlag
  • ikoon-oorfone
  • ikoon-volume-af
  • ikoon-volume-af
  • ikoon-volume-op
  • ikoon-qrcode
  • ikoon-strepieskode
  • ikoon-tag
  • ikoon-etikette
  • ikoon-boek
  • ikoon-boekmerk
  • ikoon-druk
  • ikoon-kamera
  • ikoon-font
  • ikoon-vetgedruk
  • ikoon-kursief
  • ikoon-teks-hoogte
  • ikoon-teks-wydte
  • ikoon-belyn-links
  • ikoon-belyn-sentrum
  • ikoon-belyn-regs
  • ikoon-belyn-regverdig
  • ikoon-lys
  • ikoon-inkeep-links
  • ikoon-inkeep-regs
  • ikoon-gesigtyd-video
  • ikoon-prentjie
  • ikoon-potlood
  • ikoon-kaart-merker
  • ikoon-pas
  • ikoon-tint
  • ikoon-wysig
  • ikoon-deel
  • ikoon-kontroleer
  • ikoon-skuif
  • ikoon-stap-terug
  • ikoon-vinnig-agteruit
  • ikoon-agteruit
  • ikoon-speel
  • ikoon-pouse
  • ikoon-stop
  • ikoon vorentoe
  • ikoon-snel vorentoe
  • ikoon-stap-vorentoe
  • ikoon-uitwerp
  • ikoon-chevron-links
  • ikoon-chevron-regs
  • ikoon-plus-teken
  • ikoon-minus-teken
  • ikoon-verwyder-teken
  • ikoon-ok-teken
  • ikoon-vraag-teken
  • ikoon-inligting-teken
  • ikoon-skermkiekie
  • ikoon-verwyder-sirkel
  • ikoon-ok-sirkel
  • ikoon-verbod-sirkel
  • ikoon-pyltjie-links
  • ikoon-pyl-regs
  • ikoon-pyltjie-op
  • ikoon-pyl-af
  • ikoon-deel-alt
  • ikoon-verander grootte-vol
  • ikoon-grootte-klein
  • ikoon-plus
  • ikoon-minus
  • ikoon-sterretjie
  • ikoon-uitroepteken
  • ikoon-geskenk
  • ikoon-blad
  • ikoon-vuur
  • ikoon-oog-oop
  • ikoon-oog-toe
  • ikoon-waarskuwing-teken
  • ikoon-vlak
  • ikoon-kalender
  • ikoon-lukraak
  • ikoon-opmerking
  • ikoon-magneet
  • ikoon-chevron-up
  • ikoon-chevron-af
  • ikoon-retweet
  • ikoon-inkopiemandjie
  • ikoon-vouer-toe
  • ikoon-vouer-oop
  • ikoon-verander grootte-vertikaal
  • ikoon-verander grootte-horisontaal
  • ikoon-hdd
  • ikoon-bulhorn
  • ikoon-klok
  • ikoon-sertifikaat
  • ikoon-duim-op
  • ikoon-duim-af
  • ikoon-hand-regs
  • ikoon-hand-links
  • ikoon-hand-up
  • ikoon-hand-down
  • ikoon-sirkel-pyl-regs
  • ikoon-sirkel-pyltjie-links
  • ikoon-sirkel-pyltjie-op
  • ikoon-sirkel-pyl-af
  • ikoon-wêreld
  • ikoonsleutel
  • ikoon-take
  • ikoon-filter
  • ikoon-aktetas
  • ikoon-volskerm

Gebou as 'n sprite

In plaas daarvan om elke ikoon 'n ekstra versoek te maak, het ons dit saamgestel in 'n sprite - 'n klomp beelde in een lêer wat CSS gebruik om die beelde met background-position. Dit is dieselfde metode wat ons op Twitter.com gebruik en dit het goed gewerk vir ons.

Alle ikoneklasse word voorafgegaan .icon-vir behoorlike naamspasiëring en omvang, net soos ons ander komponente. Dit sal help om konflikte met ander instrumente te vermy.

Glyphicons het ons die gebruik gegee van die Halflings-stel in ons oopbron-nutsmiddelstel solank ons ​​'n skakel en krediet hier in die dokumente verskaf. Oorweeg asseblief om dieselfde in jou projekte te doen.

Hoe om te gebruik

Bootstrap gebruik 'n <i>merker vir alle ikone, maar hulle het geen saakklas nie - slegs 'n gedeelde voorvoegsel. Om te gebruik, plaas die volgende kode omtrent enige plek:

  1. <i klas = "ikoon-soek" ></i>

Daar is ook style beskikbaar vir omgekeerde (wit) ikone, gereed gemaak met een ekstra klas:

  1. <i klas = "ikoon-soek ikoon-wit" ></i>

Daar is 140 klasse om van te kies vir jou ikone. Voeg net 'n <i>merker by met die regte klasse en jy is gereed. Jy kan die volledige lys in sprites.less of hier in hierdie dokument vind.

Let op! Wanneer jy langs stringe teks gebruik, soos in knoppies of navigasieskakels, maak seker dat jy 'n spasie agter die <i>merker laat vir behoorlike spasiëring.

Gebruik gevalle

Ikone is wonderlik, maar waar sal 'n mens dit gebruik? Hier is 'n paar idees:

  • As beeldmateriaal vir jou sybalknavigasie
  • Vir 'n suiwer ikoongedrewe navigasie
  • Vir knoppies om die betekenis van 'n aksie oor te dra
  • Met skakels om konteks op 'n gebruiker se bestemming te deel

In wese, enige plek waar jy 'n <i>merker kan plaas, kan jy 'n ikoon plaas.

Voorbeelde

Gebruik dit in knoppies, knoppiegroepe vir 'n nutsbalk, navigasie, of voorafgevoegde vorminvoer.