Base CSS

Oven i stilladset er grundlæggende HTML-elementer stylet og forbedret med udvidelige klasser for at give et friskt, ensartet udseende og følelse.

Overskrifter & brødtekst

Typografisk skala

Hele det typografiske gitter er baseret på to Less-variabler i vores variables.less-fil: @baseFontSizeog @baseLineHeight. Den første er basisskriftstørrelsen, der bruges hele vejen igennem, og den anden er basislinjehøjden.

Vi bruger disse variable og noget matematik til at skabe marginer, fyldninger og linjehøjder af alle vores typer og mere.

Eksempel brødtekst

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.

Blykropskopi

Få et afsnit til at skille sig ud ved at tilføje .lead.

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

h1. Overskrift 1

h2. Overskrift 2

h3. Overskrift 3

h4. Overskrift 4

h5. Overskrift 5
h6. Overskrift 6

Understregning, adresse og forkortelse

Element Brug Valgfri
<strong> For at understrege et udsnit af tekst med vigtigt Ingen
<em> For at understrege et tekststykke med stress Ingen
<abbr> Ombryder forkortelser og akronymer for at vise den udvidede version ved svævning

Inkluder valgfri titleattribut for udvidet tekst

Brug .initialismklasse til forkortelser med store bogstaver.
<address> For kontaktoplysninger til sin nærmeste forfader eller hele arbejdet Bevar formateringen ved at afslutte alle linjer med<br>

Brug af vægt

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

Bemærk: Brug gerne <b>og <i>i HTML5, men deres brug har ændret sig en smule. <b>er beregnet til at fremhæve ord eller sætninger uden at formidle yderligere betydning, mens <i>det mest er til stemme, tekniske termer osv.

Eksempel adresser

Her er to eksempler på, hvordan <address>tagget kan bruges:

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

Eksempel på forkortelser

Forkortelser med en titleattribut har en let stiplet bundkant og en hjælpemarkør ved svævning. Dette giver brugerne en ekstra indikation, at noget vil blive vist, når de svæver.

Tilføj initialismklassen til en forkortelse for at øge den typografiske harmoni ved at give den en lidt mindre tekststørrelse.

HTML er det bedste siden skiveskåret brød.

En forkortelse af ordet attribut er attr .

Blokcitater

Element Brug Valgfri
<blockquote> Element på blokniveau til at citere indhold fra en anden kilde

Tilføj citeattribut for kilde-URL

Brug .pull-leftog .pull-rightklasser for flydende optioner
<small> Valgfrit element til tilføjelse af et brugervendt citat, typisk en forfatter med titel på værket Placer <cite>omkring titlen eller navnet på kilden

For at inkludere et blokcitat skal du ombryde <blockquote>enhver HTML som citatet. For lige citater anbefaler vi en <p>.

Inkluder et valgfrit <small>element for at citere din kilde, og du får en streg &mdash;før det til stylingformål.

  1. <blokcitat>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante venenatis. </p>
  3. <small> En berømt </small>
  4. </blockquote>

Eksempel blokcitater

Standard blokcitater er stylet som sådan:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante venenatis.

En berømt i Body of work

For at flyde dit blokcitat til højre skal du tilføje class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante venenatis.

En berømt i Body of work

Lister

Uordnet

<ul>

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

Ustylet

<ul class="unstyled">

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

Bestilt

<ol>

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

Beskrivelse

<dl>

Beskrivelseslister
En beskrivelsesliste er perfekt til at definere termer.
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.

Vandret beskrivelse

<dl class="dl-horizontal">

Beskrivelseslister
En beskrivelsesliste er perfekt til at definere termer.
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, ud fermentum massa justo sit amet risus.

Heads up! Horisontale beskrivelseslister vil afkorte termer, der er for lange til at passe ind i den venstre kolonne rettelse text-overflow. I smallere visningsporte vil de skifte til standard stablet layout.

Inline

Ombryd inline kodestykker med <code>.

  1. For eksempel skal <code> sektion </ code > pakkes ind som inline .

Grundblok

Bruges <pre>til flere linjer kode. Sørg for at undslippe eventuelle vinkelparenteser i koden for korrekt gengivelse.

<p>Eksempeltekst her...</p>
  1. <pre>
  2. <p>Eksempeltekst her...</p>
  3. </pre>

Bemærk: Sørg for at holde koden i <pre>tags så tæt på venstre som muligt; det vil gengive alle faner.

Du kan eventuelt tilføje .pre-scrollableklassen, som vil indstille en maks. højde på 350px og give en y-akse rullebjælke.

Google Prettify

Tag det samme <pre>element og tilføj to valgfrie klasser til forbedret gengivelse.

  1. <p> Eksempel på tekst her... </p>
  1. <pre class = "pænt print
  2. linenums" >
  3. <p>Eksempeltekst her...</p>
  4. </pre>

Download google-code-prettify og se readme for, hvordan du bruger.

Tabelmarkering

Tag Beskrivelse
<table> Indpakningselement til visning af data i tabelformat
<thead> Containerelement til tabeloverskriftsrækker ( <tr>) for at mærke tabelkolonner
<tbody> Containerelement til tabelrækker ( <tr>) i tabellens brødtekst
<tr> Containerelement for et sæt tabelceller ( <td>eller <th>), der vises på en enkelt række
<td> Standardtabelcelle
<th> Speciel tabelcelle til kolonne (eller række, afhængigt af omfang og placering) etiketter
Skal bruges inden for en<thead>
<caption> Beskrivelse eller oversigt over, hvad tabellen indeholder, især nyttig for skærmlæsere
  1. <tabel>
  2. <hoved>
  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>

Bordmuligheder

Navn Klasse Beskrivelse
Standard Ingen Ingen typografier, kun kolonner og rækker
Grundlæggende .table Kun vandrette linjer mellem rækkerne
Afgrænset .table-bordered Afrunder hjørner og tilføjer ydre kant
Zebra-stribe .table-striped Tilføjer lysegrå baggrundsfarve til ulige rækker (1, 3, 5 osv.)
Kondenseret .table-condensed Skærer lodret polstring i halve, fra 8px til 4px, inden for alle tdog thelementer

Eksempel tabeller

1. Standard tabelstile

Tabeller er automatisk stylet med kun få kanter for at sikre læsbarhed og opretholde struktur. Med 2.0 er .tableklassen påkrævet.

  1. < tabelklasse = "tabel" >
  2. </table>
# Fornavn Efternavn Brugernavn
1 Mærke Otto @mdo
2 Jacob Thornton @fed
3 Larry fuglen @twitter

2. Stribet bord

Bliv lidt fancy med dine borde ved at tilføje zebrastriber – bare tilføj .table-stripedklassen.

Bemærk: Stribede tabeller bruger :nth-childCSS-vælgeren og er ikke tilgængelige i IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# Fornavn Efternavn Brugernavn
1 Mærke Otto @mdo
2 Jacob Thornton @fed
3 Larry fuglen @twitter

3. Border med kant

Tilføj kanter rundt om hele bordet og afrundede hjørner til æstetiske formål.

  1. <table class = "tabel-bordered" >
  2. </table>
# Fornavn Efternavn Brugernavn
1 Mærke Otto @mdo
Mærke Otto @getbootstrap
2 Jacob Thornton @fed
3 Fuglen Larry @twitter

4. Kondenseret bord

Gør dine borde mere kompakte ved at tilføje .table-condensedklassen for at halvere bordcellepolstring (fra 8px til 4px).

  1. <tabel klasse = "tabel tabel-kondenseret" >
  2. </table>
# Fornavn Efternavn Brugernavn
1 Mærke Otto @mdo
2 Jacob Thornton @fed
3 Fuglen Larry @twitter

5. Kombiner dem alle sammen!

Du er velkommen til at kombinere en af ​​bordklasserne for at opnå forskellige udseender ved at bruge en af ​​de tilgængelige klasser.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Fulde navn
# Fornavn Efternavn Brugernavn
1 Mærke Otto @mdo
2 Jacob Thornton @fed
3 Fuglen Larry @twitter

Fleksibel HTML og CSS

Det bedste ved formularer i Bootstrap er, at alle dine input og kontroller ser godt ud, uanset hvordan du opbygger dem i din markup. Der kræves ingen overflødig HTML, men vi leverer mønstrene til dem, der har brug for det.

Mere komplicerede layouts kommer med kortfattede og skalerbare klasser for nem styling og begivenhedsbinding, så du er dækket på hvert trin.

Fire layouts inkluderet

Bootstrap leveres med understøttelse af fire typer formularlayouts:

  • Lodret (standard)
  • Søg
  • Inline
  • Vandret

Forskellige typer formularlayout kræver nogle ændringer af opmærkning, men selve kontrolelementerne forbliver og opfører sig på samme måde.

Kontroltilstande og mere

Bootstraps formularer inkluderer stilarter til alle basisformularkontroller som input, tekstområde og valg, du ville forvente. Men det kommer også med en række brugerdefinerede komponenter som tilføjede og forudsatte input og understøttelse af lister over afkrydsningsfelter.

Tilstande som fejl, advarsel og succes er inkluderet for hver type formularkontrol. Der er også inkluderet stilarter til deaktiverede kontroller.

Fire former for former

Bootstrap giver enkel opmærkning og stilarter til fire stilarter af almindelige webformularer.

Navn Klasse Beskrivelse
Lodret (standard) .form-vertical (ikke påkrævet) Stablede, venstrejusterede etiketter over kontroller
Inline .form-inline Venstrejusteret etiket og inline-blok-kontroller for kompakt stil
Søg .form-search Ekstra afrundet tekstinput for en typisk søgeæstetik
Vandret .form-horizontal Flyd venstre, højrejusterede etiketter på samme linje som kontroller

Eksempelformularer, der kun bruger formularkontrolelementer, ingen ekstra markup

Grundform

Smarte og lette standardindstillinger uden ekstra markering.

Eksempel på blokniveau hjælpetekst her.

  1. <form class = "godt" >
  2. <label> Etiketnavn </label>
  3. <input type = "text" class = "span3" pladsholder = "Skriv noget..." >
  4. <span class = "help-block" > Eksempel på blokniveau hjælpetekst her. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Tjek mig ud
  7. </label>
  8. <button type = "submit" class = "btn" > Send </button>
  9. </form>

Søgeformular

Tilføj .form-searchtil formularen og .search-querytil input.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium søgeforespørgsel" >
  3. <button type = "submit" class = "btn" > Søg </button>
  4. </form>

Inline formular

Tilføj .form-inlinefor at finesse den lodrette justering og afstand mellem formularkontroller.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" pladsholder = "E-mail" >
  3. <input type = "password" class = "input-small" pladsholder = "Adgangskode" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Husk mig
  6. </label>
  7. <button type = "submit" class = "btn" > Log ind </button>
  8. </form>

Vandrette former

Til højre vises alle de standardformularkontroller, vi understøtter. Her er punktlisten:

  • tekstinput (tekst, adgangskode, e-mail osv.)
  • afkrydsningsfeltet
  • radio
  • Vælg
  • flere valg
  • fil input
  • tekstområde

Ud over friteksttekst ser enhver HTML5-tekstbaseret input ud som sådan.

Eksempel markup

I betragtning af ovenstående eksempelformularlayout er her den markup, der er knyttet til den første input- og kontrolgruppe. Klasserne .control-group, .control-label, og .controlser alle nødvendige til styling.

  1. <form class = "form-horisontal" >
  2. <feltsæt>
  3. <legend> Forklaringstekst </legend>
  4. <div class = "kontrolgruppe" >
  5. <label class = "control-label" for = "input01" > Tekstinput </label>
  6. <div class = "kontroller" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Understøttende hjælpetekst </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Formkontroltilstande

Bootstrap har stilarter til browser-understøttede fokuserede og disabledtilstande. Vi fjerner standard Webkit outlineog anvender en box-shadowi stedet for :focus.


Formularvalidering

Det inkluderer også valideringsstile for fejl, advarsler og succes. For at bruge skal du tilføje fejlklassen til den omgivende .control-group.

  1. <feltsæt
  2. class = "kontrolgruppefejl" >
  3. </fieldset>
Nogen værdi her
Noget kan være gået galt
Ret venligst fejlen
Woohoo!
Woohoo!

Udvidelse af formularkontroller

Forsæt og vedføj input

Inputgrupper – med tilføjet eller forudsat tekst – giver en nem måde at give mere kontekst til dine input. Gode ​​eksempler inkluderer @-tegnet for Twitter-brugernavne eller $ for økonomi.


Afkrydsningsfelter og radioer

Op til v1.4 krævede Bootstrap ekstra markup omkring afkrydsningsfelter og radioer for at stable dem. Nu er det et simpelt spørgsmål om at gentage den <label class="checkbox">, der omslutter <input type="checkbox">.

Inline afkrydsningsfelter og radioer understøttes også. Bare føj .inlinetil et .checkboxeller .radio, og du er færdig.


Indlejrede formularer og tilføj/tilføj

For at bruge forudsæt eller tilføje input i en indlejret form, skal du sørge for at placere .add-onog inputpå samme linje uden mellemrum.


Formular hjælpetekst

For at tilføje hjælpetekst til dine formularinput skal du inkludere indbygget hjælpetekst med <span class="help-inline">eller en hjælpetekstblok med <p class="help-block">efter inputelementet.

Brug de samme .span*klasser fra gittersystemet til inputstørrelser.

Du kan også bruge statiske klasser, der ikke knytter sig til gitteret, tilpasser sig de responsive CSS-stilarter eller tager højde for forskellige typer kontrolelementer (f.eks. inputvs. select).

@

Her er lidt hjælpetekst

0,00
Her er mere hjælpetekst
$ 0,00

Bemærk: Etiketter omgiver alle muligheder for meget større klikområder og en mere brugbar form.

Knap klasse="" Beskrivelse
btn Standard grå knap med gradient
btn btn-primary Giver ekstra visuel vægt og identificerer den primære handling i et sæt knapper
btn btn-info Bruges som et alternativ til standardstilene
btn btn-success Angiver en vellykket eller positiv handling
btn btn-warning Angiver, at der skal udvises forsigtighed med denne handling
btn btn-danger Angiver en farlig eller potentielt negativ handling
btn btn-inverse Alternativ mørkegrå knap, ikke bundet til en semantisk handling eller brug

Knapper til handlinger

Som en konvention bør knapper kun bruges til handlinger, mens hyperlinks skal bruges til objekter. For eksempel skal "Download" være en knap, mens "seneste aktivitet" skal være et link.

Knapstile kan anvendes på alt med .btnklassen anvendt. Dog vil du typisk kun anvende disse på <a>og <button>elementer.

Cross browser kompatibilitet

IE9 beskærer ikke baggrundsgradienter på afrundede hjørner, så vi fjerner det. Relateret, IE9 jankifies deaktiverede buttonelementer, gør tekst grå med en grim tekst-skygge, som vi ikke kan rette.

Flere størrelser

Kunne du tænke dig større eller mindre knapper? Tilføj .btn-large, .btn-small, eller .btn-minifor yderligere to størrelser.


Deaktiveret tilstand

For deaktiverede knapper skal du tilføje .disabledklassen til links og disabledattributten for <button>elementer.

Primært link Link

Heads up! Vi bruger .disabledsom en hjælpeklasse her, i lighed med den almindelige .activeklasse, så der kræves ingen præfiks.

Én klasse, flere tags

Brug .btnklassen på et <a>, <button>, eller <input>element.

Link
  1. <a class = "btn" href = "" > Link </a>
  2. <button class = "btn" type = "submit" >
  3. Knap
  4. </button>
  5. <input klasse = "btn" type = "knap"
  6. værdi = "Input" >
  7. <input klasse = "btn" type = "send"
  8. værdi = "Send" >

Som en bedste praksis kan du prøve at matche elementet til din kontekst for at sikre matchende gengivelse på tværs af browsere. Hvis du har en input, skal du bruge en <input type="submit">til din knap.

  • ikon-glas
  • ikon-musik
  • ikon-søgning
  • ikon-konvolut
  • ikon-hjerte
  • ikon-stjerne
  • ikon-stjerne-tom
  • ikon-bruger
  • ikon-film
  • ikon-th-store
  • ikon-th
  • ikon-th-liste
  • ikon-ok
  • ikon-fjern
  • ikon-zoom-ind
  • ikon-zoom-ud
  • ikon-fra
  • ikon-signal
  • ikon-tandhjul
  • ikon-trash
  • ikon-hjem
  • ikon-fil
  • ikon-tid
  • ikon-vej
  • ikon-download-alt
  • ikon-download
  • ikon-upload
  • ikon-indbakke
  • ikon-afspil-cirkel
  • ikon-gentag
  • ikon-opdatering
  • ikon-liste-alt
  • ikon-lås
  • ikon-flag
  • ikon-hovedtelefoner
  • ikon-lydstyrke-fra
  • ikon-lydstyrke-ned
  • ikon-volumen op
  • icon-qrcode
  • ikon-stregkode
  • ikon-tag
  • ikon-tags
  • ikon-bog
  • ikon-bogmærke
  • ikon-print
  • ikon-kamera
  • ikon-skrifttype
  • ikon-fed
  • ikon-kursiv
  • ikon-tekst-højde
  • ikon-tekst-bredde
  • ikon-justering-venstre
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • ikon-liste
  • ikon-indryk-venstre
  • ikon-indryk-højre
  • ikon-facetime-video
  • ikon-billede
  • ikon-blyant
  • ikon-kort-markør
  • ikon-juster
  • ikon-farve
  • ikon-rediger
  • ikon-deling
  • ikon-tjek
  • ikon-flyt
  • ikon-trin-tilbage
  • ikon-hurtigt-tilbage
  • ikon tilbage
  • ikon-spil
  • ikon-pause
  • ikon-stop
  • ikon-frem
  • ikon-spol frem
  • ikon-skridt-frem
  • ikon-skub ud
  • ikon-chevron-venstre
  • ikon-chevron-højre
  • ikon-plus-tegn
  • ikon-minus-tegn
  • ikon-fjern-tegn
  • ikon-ok-tegn
  • ikon-spørgsmål-tegn
  • ikon-info-tegn
  • ikon-skærmbillede
  • ikon-fjern-cirkel
  • ikon-ok-cirkel
  • ikon-forbud-cirkel
  • ikon-pil-venstre
  • ikon-pil-højre
  • ikon-pil op
  • ikon-pil ned
  • icon-share-alt
  • ikon-ændre størrelse-fuld
  • ikon-ændre størrelse-lille
  • ikon-plus
  • ikon-minus
  • ikon-stjerne
  • ikon-udråbstegn
  • ikon-gave
  • ikon-blad
  • ikon-ild
  • ikon-øje-åben
  • ikon-øje-tæt
  • ikon-advarselsskilt
  • ikon-plan
  • ikon-kalender
  • ikon-tilfældig
  • ikon-kommentar
  • ikon-magnet
  • ikon-chevron-up
  • ikon-chevron-down
  • ikon-retweet
  • ikon-indkøbsvogn
  • ikon-mappe-luk
  • ikon-mappe-åben
  • ikon-ændre størrelse-lodret
  • ikon-ændre størrelse-vandret
  • ikon-hdd
  • ikon-tyrehorn
  • ikon-klokke
  • ikon-certifikat
  • ikon-thumbs-up
  • ikon-thumbs-down
  • ikon-hånd-højre
  • ikon-hånd-venstre
  • ikon-hånd op
  • ikon-hånd-ned
  • ikon-cirkel-pil-højre
  • ikon-cirkel-pil-venstre
  • ikon-cirkel-pil op
  • ikon-cirkel-pil ned
  • ikon-klode
  • ikon-skruenøgle
  • ikon-opgaver
  • ikon-filter
  • ikon-mappe
  • ikon-fuldskærm

Bygget som en sprite

I stedet for at gøre hvert ikon til en ekstra anmodning, har vi kompileret dem til en sprite - en masse billeder i én fil, der bruger CSS til at placere billederne med background-position. Dette er den samme metode, som vi bruger på Twitter.com, og det har fungeret godt for os.

Alle ikonklasser er præfikset med .icon-for korrekt navneafstand og omfang, ligesom vores andre komponenter. Dette vil hjælpe med at undgå konflikter med andre værktøjer.

Glyphicons har givet os brug af Halflings-sættet i vores open source-værktøjssæt, så længe vi giver et link og kredit her i dokumenterne. Overvej venligst at gøre det samme i dine projekter.

Sådan bruges

Bootstrap bruger et <i>tag for alle ikoner, men de har ingen kasusklasse - kun et delt præfiks. For at bruge skal du placere følgende kode stort set hvor som helst:

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

Der er også tilgængelige stilarter til omvendte (hvide) ikoner, klargjort med en ekstra klasse:

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

Der er 140 klasser at vælge imellem for dine ikoner. Du skal blot tilføje et <i>tag med de rigtige klasser, og du er klar. Du kan finde hele listen i sprites.less eller lige her i dette dokument.

Heads up! Når du bruger tekststrenge ved siden af, som i knapper eller nav-links, skal du sørge for at efterlade et mellemrum efter <i>tagget for korrekt mellemrum.

Brug cases

Ikoner er fantastiske, men hvor ville man bruge dem? Her er et par ideer:

  • Som visuals til din sidebar-navigation
  • For en rent ikon-drevet navigation
  • For knapper, der hjælper med at formidle betydningen af ​​en handling
  • Med links til at dele kontekst på en brugers destination

I det væsentlige, hvor som helst du kan sætte et <i>mærke, kan du sætte et ikon.

Eksempler

Brug dem i knapper, knapgrupper til en værktøjslinje, navigation eller forudsat formularinput.