Basis CSS

Boppe op 'e steigers wurde basis HTML-eleminten stylearre en ferbettere mei útwreide klassen om in frisse, konsekwinte uterlik en gefoel te leverjen.

Kopteksten & body copy

Typografyske skaal

De hiele typografyske raster is basearre op twa Minder fariabelen yn ús variables.less triem: @baseFontSizeen @baseLineHeight. De earste is de basislettertypegrutte dy't troch it heule brûkt wurdt en de twadde is de basislinehichte.

Wy brûke dy fariabelen, en wat wiskunde, om de marzjes, paddings, en line-hichtes fan al ús type en mear te meitsjen.

Foarbyld body text

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.

Kopy fan lead lichem

Meitsje in paragraaf opfallend troch ta te foegjen .lead.

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

h1. Koptekst 1

h2. Koptekst 2

h3. Opskrift 3

h4. Opskrift 4

h5. Opskrift 5
h6. Opskrift 6

Klem, adres, en ôfkoarting

Elemint Gebrûk Fakultatyf
<strong> Foar it beklamjen fan in stikje tekst mei wichtich Gjin
<em> Foar it beklamjen fan in stikje tekst mei stress Gjin
<abbr> Wikkelt ôfkoartings en akronyms om de útwreide ferzje te sjen op hover

Opsjoneel titleattribút opnimme foar útwreide tekst

Brûk .initialismklasse foar ôfkoartings foar haadletters.
<address> Foar kontaktynformaasje foar syn neiste foarâlder as it heule wurk Bewarje opmaak troch einigje alle rigels mei<br>

Mei help fan klam

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

Opmerking: Fiel jo frij om te brûken <b>en <i>yn HTML5, mar har gebrûk is in bytsje feroare. <b>is bedoeld om wurden of útdrukkingen te markearjen sûnder ekstra belang oer te bringen, wylst <i>it meast foar stim, technyske termen, ensfh.

Foarbyld adressen

Hjir binne twa foarbylden fan hoe't de <address>tag kin wurde brûkt:

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

Foarbyld ôfkoartings

Ofkoartings mei in titleattribút hawwe in ljocht stippele boaiem grins en in help rinnerke op hover. Dit jout brûkers ekstra oantsjutting dat wat sil wurde toand op hover.

Foegje de initialismklasse ta oan in ôfkoarting om typografyske harmony te fergrutsjen troch it in wat lytsere tekstgrutte te jaan.

HTML is it bêste ding sûnt gesneden bôle.

In ôfkoarting fan it wurd attribút is attr .

Blockquotes

Elemint Gebrûk Fakultatyf
<blockquote> Elemint op bloknivo foar it oanheljen fan ynhâld fan in oare boarne

Add citeattribút foar boarne URL

Gebrûk .pull-leften .pull-rightklassen foar driuwende opsjes
<small> Opsjoneel elemint foar it tafoegjen fan in brûker rjochte sitaat, typysk in auteur mei titel fan wurk Plak it <cite>om de titel of namme fan boarne

Om in blokquote op te nimmen, wikkel <blockquote>elke HTML as it sitaat. Foar rjochte quotes advisearje wy in <p>.

Omfetsje in opsjoneel <small>elemint om jo boarne te neamen en jo krije in em-streepje &mdash;derfoar foar styldoelen.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante venenatis. </p>
  3. <small> Immen ferneamd </small>
  4. </blockquote>

Foarbyld blockquotes

Standert blokquotes binne stylearre as sadanich:

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

Immen ferneamd yn Body of work

Om jo blokquote nei rjochts te driuwen, foegje jo ta class="pull-right":

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

Immen ferneamd yn Body of work

Listen

Net oardere

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer 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 at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unstyled

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer 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 at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Besteld

<ol>

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

Beskriuwing

<dl>

Beskriuwingslisten
In beskriuwingslist is perfekt foar it definiearjen fan termen.
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.

Horizontale beskriuwing

<dl class="dl-horizontal">

Beskriuwingslisten
In beskriuwingslist is perfekt foar it definiearjen fan termen.
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.

Heads up! Horizontale beskriuwingslisten sille termen ôfbrekke dy't te lang binne om te passen yn 'e lofterkolom fix text-overflow. Yn smellere viewports sille se feroarje nei de standert steapele yndieling.

Ynline

Wrap ynline snippets fan koade mei <code>.

  1. Bygelyks , <code> seksje </ code > moat wurde ferpakt as ynline .

Basis blok

Brûk <pre>foar meardere rigels koade. Wês wis dat jo ûntkomme oan alle hoeke heakjes yn 'e koade foar in goede rendering.

<p>In foarbyldtekst hjir...</p>
  1. <foar>
  2. <p>foarbyldtekst hjir...</p>
  3. </pre>

Opmerking: Wês wis dat jo koade binnen <pre>tags sa ticht mooglik by de lofter hâlde; it sil alle ljeppers werjaan.

Jo kinne opsjoneel de .pre-scrollableklasse tafoegje dy't in max-hichte fan 350px sil ynstelle en in y-as scrollbar leverje.

Google Pretify

Nim itselde <pre>elemint en foegje twa opsjonele klassen ta foar ferbettere rendering.

  1. <p> Foarbyldtekst hjir... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>foarbyldtekst hjir...</p>
  4. </pre>

Download google-code-prettify en besjoch de readme foar hoe te brûken.

Tafelmarkearring

Tag Beskriuwing
<table> Wrapping elemint foar it werjaan fan gegevens yn in tabelformaat
<thead> Container elemint foar tabelkop rigen ( <tr>) om tabelkolommen te labeljen
<tbody> Container elemint foar tabel rigen ( <tr>) yn it lichem fan 'e tabel
<tr> Container elemint foar in set fan tabel sellen ( <td>of <th>) dat ferskynt op in inkele rige
<td> Standert tabel sel
<th> Spesjale tabelsel foar kolom (as rige, ôfhinklik fan omfang en pleatsing) labels
Moatte brûkt wurde binnen in<thead>
<caption> Beskriuwing of gearfetting fan wat de tabel hâldt, benammen nuttich foar skermlêzers
  1. <tabel>
  2. <kop>
  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. </tabel>

Tabel opsjes

Namme Klasse Beskriuwing
Standert Gjin Gjin stilen, gewoan kolommen en rigen
Basic .table Allinnich horizontale linen tusken rigen
Bordered .table-bordered Rûnet hoeken en foeget bûtenrâne ta
Zebra-stripe .table-striped Foeget ljochtgrize eftergrûnkleur ta oan ûneven rigen (1, 3, 5, ensfh.)
Kondensearre .table-condensed Snijt fertikale padding yn 'e helte, fan 8px oant 4px, binnen alle tden theleminten

Foarbyld tabellen

1. Standert tabel styles

Tabellen wurde automatysk styled mei mar in pear rânen om te garandearjen lêsberens en ûnderhâlden struktuer. Mei 2.0 is de .tableklasse ferplicht.

  1. <table class = "tabel" >
  2. </tabel>
# Foarnamme Achternamme Brûkersnamme
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @twitter

2. Striped tafel

Krij in bytsje fancy mei jo tafels troch sebra-striping ta te foegjen - foegje gewoan de .table-stripedklasse ta.

Opmerking: Striped tabellen brûke de :nth-childCSS-selektor en is net beskikber yn IE7-IE8.

  1. <table class = "table table-striped" >
  2. </tabel>
# Foarnamme Achternamme Brûkersnamme
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @twitter

3. Bordered tafel

Foegje rânen om 'e hiele tafel en rûne hoeken ta foar estetyske doelen.

  1. <table class = "table-bordered" >
  2. </tabel>
# Foarnamme Achternamme Brûkersnamme
1 Merk Otto @mdo
Merk Otto @getbootstrap
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter

4. Kondensearre tafel

Meitsje jo tabellen kompakter troch de .table-condensedklasse ta te foegjen om tafelselpadding yn 'e helte te snijen (fan 8px oant 4px).

  1. <table class = "tabel tabel-kondensearre" >
  2. </tabel>
# Foarnamme Achternamme Brûkersnamme
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter

5. Kombinearje se allegear!

Fiel jo frij om ien fan 'e tafelklassen te kombinearjen om ferskate uterlik te berikken troch ien fan' e beskikbere klassen te brûken.

  1. <table class = "tabel-tabel-gestreepte tabel-grinzen tabel-kondensearre" >
  2. ...
  3. </tabel>
Folsleine namme
# Foarnamme Achternamme Brûkersnamme
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter

Fleksibele HTML en CSS

It bêste diel oer formulieren yn Bootstrap is dat al jo ynputs en kontrôles geweldich sjogge, nettsjinsteande hoe't jo se bouwe yn jo markup. Gjin oerstallige HTML is fereaske, mar wy leverje de patroanen foar dyjingen dy't it nedich binne.

Mear yngewikkeldere yndielingen komme mei beknopte en skalberbere klassen foar maklike styling en evenemintebinding, sadat jo by elke stap binne bedekt.

Fjouwer layouts ynbegrepen

Bootstrap komt mei stipe foar fjouwer soarten formulierlayouts:

  • Fertikaal (standert)
  • Sykje
  • Ynline
  • Horizontaal

Ferskillende soarten formulierlayouts fereaskje wat feroaringen foar markearring, mar de kontrôles sels bliuwe en gedrage itselde.

Kontrolearje steaten en mear

De formulieren fan Bootstrap omfetsje stilen foar alle basisfoarmkontrôles lykas ynfier, tekstgebiet, en selektearje dy't jo soene ferwachtsje. Mar it komt ek mei in oantal oanpaste komponinten lykas taheakke en foarôfgeande yngongen en stipe foar listen mei karfakjes.

Steaten lykas flater, warskôging en sukses binne opnommen foar elk type formulierkontrôle. Ek opnommen binne stilen foar útskeakele kontrôles.

Fjouwer soarten foarmen

Bootstrap leveret ienfâldige markearring en stilen foar fjouwer stilen fan gewoane webformulieren.

Namme Klasse Beskriuwing
Fertikaal (standert) .form-vertical (net fereaske) Opsteapele, lofts rjochte labels oer kontrôles
Ynline .form-inline Links rjochte label en ynline-blokkontrôles foar kompakte styl
Sykje .form-search Ekstra-ôfrûne tekstynfier foar in typyske estetyk foar sykjen
Horizontaal .form-horizontal Float links, rjochts rjochte labels op deselde line as kontrôles

Foarbyld formulieren mei gewoan formulierkontrôles, gjin ekstra markup

Basisfoarm

Smart en lichtgewicht standerts sûnder ekstra markup.

Foarbyld helptekst op bloknivo hjir.

  1. <form class = "goed" >
  2. <label> Labelnamme </label>
  3. <input type = "text" class = "span3" placeholder = " Typ wat…" >
  4. <span class = "help-block" > Foarbyld helptekst op bloknivo hjir. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Kontrolearje my
  7. </label>
  8. <button type = "submit" class = "btn" > Ferstjoere </button>
  9. </form>

Sykje formulier

Taheakje .form-searchoan it formulier en .search-queryoan de input.

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

Inline formulier

Foegje .form-inlinede fertikale ôfstimming en ôfstân fan formulierkontrôles ta om finesse te meitsjen.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "E-post" >
  3. <input type = "password" class = "input-small" placeholder = "Wachtwurd" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Unthâld my
  6. </label>
  7. <button type = "submit" class = "btn" > Oanmelde </button>
  8. </form>

Horizontale foarmen

Oan 'e rjochterkant wurde alle standertfoarmkontrôles werjûn dy't wy stypje. Hjir is de list mei kûgels:

  • tekstynfier (tekst, wachtwurd, e-post, ensfh.)
  • karfakje
  • radio
  • útkieze
  • meardere selektearje
  • triem ynfier
  • tekstgebiet

Neist frije foarm tekst, ferskynt elke HTML5 tekst-basearre ynfier sa.

Foarbyld markup

Sjoen it boppesteande foarbyldfoarmyndieling, hjir is de markup ferbûn mei de earste ynfier- en kontrôlegroep. De .control-group, .control-label, en .controlsklassen binne allegear nedich foar styling.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Legend tekst </legend>
  4. <div class = "kontrôlegroep" >
  5. <label class = "control-label" for = "input01" > Tekstynfier </label>
  6. <div class = "kontrôles" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Stypjende helptekst </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Form kontrôle steaten

Bootstrap hat stilen foar browser-stipe rjochte en disabledsteaten. Wy fuortsmite de standert Webkit outlineen tapasse in box-shadowop syn plak foar :focus.


Formulier validaasje

It omfettet ek falidaasjestilen foar flaters, warskôgings en sukses. Om te brûken, foegje de flaterklasse ta oan 'e omlizzende .control-group.

  1. <fieldset
  2. class = "kontrôlegroepflater" >
  3. </fieldset>
Guon wearde hjir
Der kin wat mis gien
Korrigearje asjebleaft de flater
Woohoo!
Woohoo!

It útwreidzjen fan formulierkontrôles

Ynputen foarby en taheakje

Ynfiergroepen - mei taheakke of foarôfgeande tekst - jouwe in maklike manier om mear kontekst te jaan foar jo ynfier. Grutte foarbylden omfetsje it @-teken foar Twitter-brûkersnammen of $ foar finânsjes.


Checkboxes en radio's

Oant v1.4 hat Bootstrap ekstra markearring nedich om karfakjes en radio's om se te stapeljen. No, it is in ienfâldige saak fan it werheljen fan 'e <label class="checkbox">dy't de <input type="checkbox">.

Inline karfakjes en radio's wurde ek stipe. Foegje gewoan ta .inlineoan ien .checkboxof .radioen jo binne klear.


Inline formulieren en taheakje / prepend

Om prepend of append yngongen te brûken yn in ynline formulier, wês wis dat jo de .add-onen inputop deselde rigel pleatse, sûnder spaasjes.


Formulier helptekst

Om helptekst ta te foegjen foar jo formulierynfier, befetsje inline helptekst mei <span class="help-inline">of in helptekstblok mei <p class="help-block">nei it ynfierelemint.

Brûk deselde .span*klassen fan it rastersysteem foar ynfiergrutte.

Jo kinne ek statyske klassen brûke dy't net yn kaart bringe nei it raster, oanpasse oan de responsive CSS-stilen, of rekken hâlde mei ferskate soarten kontrôles (bgl. inputvs. select).

@

Hjir is wat helptekst

.00
Hjir is mear helptekst
$ .00

Opmerking: Labels omfetsje alle opsjes foar folle gruttere klikgebieten en in mear brûkbere foarm.

Knop class="" Beskriuwing
btn Standert grize knop mei gradient
btn btn-primary Biedt ekstra fisueel gewicht en identifisearret de primêre aksje yn in set fan knoppen
btn btn-info Wurdt brûkt as alternatyf foar de standert stilen
btn btn-success Jout in suksesfolle of positive aksje oan
btn btn-warning Jout oan dat foarsichtigens moatte wurde nommen mei dizze aksje
btn btn-danger Jout in gefaarlike of mooglik negative aksje oan
btn btn-inverse Alternatyf donkergrize knop, net bûn oan in semantyske aksje of gebrûk

Knoppen foar aksjes

As konvinsje moatte knoppen allinich brûkt wurde foar aksjes, wylst hyperlinks moatte wurde brûkt foar objekten. Bygelyks, "Download" moat in knop wêze, wylst "resinte aktiviteit" in keppeling moat wêze.

Knopstilen kinne op alles tapast wurde mei de .btntapaste klasse. Typysk wolle jo dizze lykwols tapasse op allinich <a>en <button>eleminten.

Cross browser kompatibiliteit

IE9 snijt gjin eftergrûngradiënten op rûne hoeken, dus wy ferwiderje it. Related, IE9 jankifies útskeakele buttoneleminten, rendering tekst griis mei in ferfelende tekst-skaad dat wy net kinne reparearje.

Meardere maten

Wolle jo gruttere of lytsere knoppen? Add .btn-large, .btn-small, of .btn-minifoar twa ekstra maten.


Utskeakele steat

Foar útskeakele knoppen, foegje de .disabledklasse ta oan keppelings en it disabledattribút foar <button>eleminten.

Primêre keppeling Link

Heads up! Wy brûke .disabledhjir as nutsklasse, fergelykber mei de mienskiplike .activeklasse, dus gjin foarheaksel is nedich.

Ien klasse, meardere tags

Brûk de .btnklasse op in <a>, <button>, of <input>elemint.

Link
  1. <a class = "btn" href = ""> Keppeling </a> _
  2. <button class = "btn" type = "submit" >
  3. Knop
  4. </knop>
  5. <input class = "btn" type = "knop"
  6. value = "Ynfier" >
  7. <input class = "btn" type = "submit"
  8. value = "Ferstjoere" >

As in bêste praktyk, besykje it elemint foar jo kontekst te passen om te soargjen foar oerienkommende cross-browser-rendering. As jo ​​​​in hawwe input, brûk dan in <input type="submit">foar jo knop.

  • ikoan-glas
  • ikoan-muzyk
  • ikoan-sykje
  • ikoan-envelope
  • ikoan-hert
  • ikoan-stjer
  • ikoan-stjer-leech
  • ikoan-brûker
  • ikoan-film
  • ikoan-th-grutte
  • ikoan-th
  • ikoan-ste-list
  • ikoan-ok
  • ikoan-ferwiderje
  • ikoan-zoom-yn
  • ikoan-útzoomen
  • ikoan-út
  • ikoan-sinjaal
  • icon-cog
  • ikoan-jiskefet
  • ikoan-thús
  • ikoan-bestân
  • ikoan-tiid
  • ikoan-wei
  • ikoan-download-alt
  • ikoan-download
  • ikoan-upload
  • ikoan-ynfak
  • icon-play-sirkel
  • ikoan-werhelje
  • ikoan-ferfarskje
  • ikoan-list-alt
  • ikoan-slot
  • ikoan-flagge
  • ikoan-koptelefoan
  • ikoan-folume-út
  • ikoan-folume-omleech
  • ikoan-folume-up
  • icon-qrcode
  • ikoan-barcode
  • ikoan-tag
  • ikoan-tags
  • ikoan-boek
  • ikoan-blêdwizer
  • ikoan-print
  • ikoan-kamera
  • ikoan-lettertype
  • ikoan-bold
  • ikoan-kursyf
  • ikoan-tekst-hichte
  • ikoan-tekst-breedte
  • icon-align-lofts
  • icon-align-center
  • icon-align-rjochts
  • icon-align-justify
  • ikoan-list
  • ikoan-ynspringen-lofts
  • ikoan-ynspringen-rjochts
  • ikoan-facetime-fideo
  • ikoan-ôfbylding
  • ikoan-potlead
  • icon-map-marker
  • ikoan-oanpasse
  • ikoan-tint
  • icon-bewurkje
  • ikoan-share
  • ikoan-kontrolearje
  • ikoan-ferpleatse
  • ikoan-stap-efterút
  • ikoan-snel-efterút
  • ikoan-efterút
  • icon-play
  • ikoan-pauze
  • ikoan-stop
  • ikoan-foarút
  • ikoan-fast-foarút
  • ikoan-stap-foarút
  • ikoan-útwerp
  • ikoan-chevron-lofts
  • ikoan-chevron-rjochts
  • ikoan-plus-teken
  • ikoan-minus-teken
  • ikoan-ferwiderje-teken
  • ikoan-ok-teken
  • ikoan-fraach-teken
  • ikoan-ynfo-teken
  • ikoan-skermôfbylding
  • icon-remove-sirkel
  • ikoan-ok-sirkel
  • icon-ban-sirkel
  • ikoan-pylk-lofts
  • ikoan-pylk-rjochts
  • icon-arrow-up
  • ikoan-pylk-omleech
  • icon-share-alt
  • ikoan-feroarje-folslein
  • byldkaike-feroarje-lyts
  • ikoan-plus
  • ikoan-minus
  • ikoan-asterisk
  • ikoan-útropteken
  • ikoan-gift
  • ikoan-blêd
  • ikoan-fjoer
  • ikoan-each-iepen
  • ikoan-each-ticht
  • ikoan-warskôging-teken
  • ikoan-fleantúch
  • ikoan-kalinder
  • ikoan-willekeurich
  • ikoan-kommentaar
  • ikoan-magneet
  • ikoan-chevron-up
  • icon-chevron-down
  • icon-retweet
  • ikoan-winkelkarre
  • ikoan-map-slute
  • ikoan-map-iepen
  • ikoan-feroarje-fertikaal
  • ikoan-feroarje-horizontaal
  • ikoan-hdd
  • ikoan-bulhorn
  • ikoan-bell
  • ikoan-sertifikaat
  • ikoan-thumbs-up
  • icon-thumbs-down
  • ikoan-hân-rjochts
  • ikoan-hân-lofts
  • ikoan-hand-up
  • ikoan-hand-down
  • ikoan-sirkel-pylk-rjochts
  • ikoan-sirkel-pylk-lofts
  • ikoan-sirkel-pylk omheech
  • ikoan-sirkel-pylk-omleech
  • icon-globe
  • ikoan-wrench
  • ikoan-taken
  • ikoan-filter
  • ikoan-aktetas
  • ikoan-folslein skerm

Boud as sprite

Ynstee fan elk ikoan in ekstra oanfraach te meitsjen, hawwe wy se gearstald yn in sprite - in boskje ôfbyldings yn ien bestân dat CSS brûkt om de ôfbyldings te pleatsen mei background-position. Dit is deselde metoade dy't wy brûke op Twitter.com en it hat goed wurke foar ús.

Alle .icon-ikoanenklassen wurde foarôfgeand mei foar juste nammeromte en berik, krekt lykas ús oare komponinten. Dit sil helpe om konflikten mei oare ark te foarkommen.

Glyphicons hat ús it brûken fan de Halflings set yn ús iepenboarne toolkit ferliend, salang't wy hjir in keppeling en kredyt leverje yn 'e dokuminten. Besykje asjebleaft itselde te dwaan yn jo projekten.

Hoe te brûken

Bootstrap brûkt in <i>tag foar alle ikoanen, mar se hawwe gjin saakklasse - allinich in dielde foarheaksel. Om te brûken, pleats de folgjende koade sawat oeral:

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

D'r binne ek stilen beskikber foar omkearde (wite) ikoanen, klear makke mei ien ekstra klasse:

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

D'r binne 140 klassen om út te kiezen foar jo ikoanen. Foegje gewoan in <i>tag ta mei de juste klassen en jo binne ynsteld. Jo kinne de folsleine list fine yn sprites.less of hjir yn dit dokumint.

Heads up! As jo ​​​​njonken tekststrings brûke, lykas yn knoppen of nav-keppelings, wês dan wis dat jo in spaasje efter de <i>tag litte foar juste ôfstân.

Brûk gefallen

Ikoanen binne geweldich, mar wêr soe men se brûke? Hjir binne in pear ideeën:

  • As fisuele foar jo sydbalke-navigaasje
  • Foar in suver byldkaike-oandreaune navigaasje
  • Foar knoppen om te helpen de betsjutting fan in aksje oer te bringen
  • Mei keppelings om kontekst te dielen op 'e bestimming fan in brûker

Yn essinsje, oeral wêr't jo in <i>tag kinne pleatse, kinne jo in ikoan pleatse.

Foarbylden

Brûk se yn knoppen, knopgroepen foar in arkbalke, navigaasje, of foarôfgeande formulierynputs.