Base CSS

På toppen av stillaset er grunnleggende HTML-elementer stylet og forbedret med utvidbare klasser for å gi et friskt, konsistent utseende og følelse.

Overskrifter og brødtekst

Typografisk skala

Hele det typografiske rutenettet er basert på to Less-variabler i filen variables.less: @baseFontSizeog @baseLineHeight. Den første er grunnskriftstørrelsen som brukes hele veien, og den andre er grunnlinjehøyden.

Vi bruker disse variablene, og litt matematikk, for å lage marginer, utfyllinger og linjehøyder for alle våre typer og mer.

Eksempel på 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.

Bly kropp kopi

Få et avsnitt til å skille seg ut ved å legge til .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

Utheving, adresse og forkortelse

Element Bruk Valgfri
<strong> For å fremheve en tekstbit med viktig Ingen
<em> For å understreke en tekstbit med stress Ingen
<abbr> Bryter inn forkortelser og akronymer for å vise den utvidede versjonen når du peker

Ta med valgfritt titleattributt for utvidet tekst

Bruk .initialismklasse for forkortelser med store bokstaver.
<address> For kontaktinformasjon for sin nærmeste stamfar eller hele arbeidet Bevar formateringen ved å avslutte alle linjer med<br>

Ved å bruke vekt

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

Merk: Bruk gjerne <b>og <i>i HTML5, men bruken deres har endret seg litt. <b>er ment å fremheve ord eller setninger uten å formidle ekstra betydning, mens <i>det er mest for stemme, tekniske termer, etc.

Eksempeladresser

Her er to eksempler på hvordan <address>taggen kan brukes:

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

Eksempel på forkortelser

Forkortelser med et titleattributt har en lys prikket bunnkant og en hjelpemarkør når du peker. Dette gir brukerne en ekstra indikasjon på at noe vil bli vist når de peker.

Legg initialismklassen til en forkortelse for å øke typografisk harmoni ved å gi den en litt mindre tekststørrelse.

HTML er det beste siden oppskåret brød.

En forkortelse av ordet attributt er attr .

Blockquotes

Element Bruk Valgfri
<blockquote> Element på blokknivå for å sitere innhold fra en annen kilde

Legg citetil attributt for kilde-URL

Bruk .pull-leftog .pull-rightklasser for flytende alternativer
<small> Valgfritt element for å legge til en brukervendt sitering, vanligvis en forfatter med tittel på arbeidet Plasser <cite>rundt tittelen eller navnet på kilden

For å inkludere et blokkanførselstegn, kan du pakke <blockquote>rundt hvilken som helst HTML som sitat. For rette sitater anbefaler vi en <p>.

Inkluder et valgfritt <small>element for å sitere kilden din, og du vil få en strek &mdash;foran den for stylingformål.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante venenatis. </p>
  3. <small> Noen kjent </small>
  4. </blockquote>

Eksempel på blokksitater

Standard blokksitater er stilt slik:

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

Noen kjent i Body of work

For å flyte blokkanførselen til høyre, legg til class="pull-right":

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

Noen kjent 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

Ustilt

<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 for å definere begreper.
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.

Horisontal beskrivelse

<dl class="dl-horizontal">

Beskrivelseslister
En beskrivelsesliste er perfekt for å definere begreper.
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.

Vær oppmerksom! Horisontale beskrivelseslister vil avkorte termer som er for lange til å passe inn i den venstre kolonnen text-overflow. I smalere visningsporter vil de endres til standard stablet layout.

På linje

Pakk inn innebygde kodebiter med <code>.

  1. For eksempel bør <code> -seksjonen </ code > pakkes inn som inline .

Grunnblokk

Bruk <pre>for flere linjer med kode. Pass på å unnslippe eventuelle vinkelparenteser i koden for riktig gjengivelse.

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

Merk: Sørg for å holde koden i <pre>tagger så nær venstre som mulig; det vil gjengi alle faner.

Du kan eventuelt legge til .pre-scrollableklassen som vil sette en maks-høyde på 350px og gi en y-akse rullefelt.

Google Pretify

Ta det samme <pre>elementet og legg til to valgfrie klasser for forbedret gjengivelse.

  1. <p> Eksempeltekst her... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Eksempeltekst her...</p>
  4. </pre>

Last ned google-code-prettify og se readme for hvordan du bruker.

Tabellmarkering

stikkord Beskrivelse
<table> Innpakningselement for visning av data i tabellformat
<thead> Beholderelement for tabelloverskriftsrader ( <tr>) for å merke tabellkolonner
<tbody> Beholderelement for tabellrader ( <tr>) i brødteksten i tabellen
<tr> Beholderelement for et sett med tabellceller ( <td>eller <th>) som vises på en enkelt rad
<td> Standard tabellcelle
<th> Spesiell tabellcelle for kolonne (eller rad, avhengig av omfang og plassering) etiketter
Må brukes innenfor en<thead>
<caption> Beskrivelse eller oppsummering av hva tabellen inneholder, spesielt nyttig for skjermlesere
  1. <tabell>
  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>

Tabellalternativer

Navn Klasse Beskrivelse
Misligholde Ingen Ingen stiler, bare kolonner og rader
Grunnleggende .table Kun horisontale linjer mellom radene
Avgrenset .table-bordered Avrunder hjørner og legger til ytre kant
Sebra-stripe .table-striped Legger til lys grå bakgrunnsfarge til odde rader (1, 3, 5, osv.)
Kondensert .table-condensed Kutter vertikal polstring i to, fra 8px til 4px, innenfor alle tdog thelementer

Eksempeltabeller

1. Standard tabellstiler

Tabeller stiles automatisk med bare noen få kanter for å sikre lesbarhet og opprettholde struktur. Med 2.0 er .tableklassen påkrevd.

  1. < tabellklasse = "tabell" >
  2. </table>
# Fornavn Etternavn Brukernavn
1 merke Otto @mdo
2 Jacob Thornton @fett
3 Larry fuglen @twitter

2. Stripete bord

Bli litt fancy med bordene dine ved å legge til sebrastriper – bare legg til .table-stripedklassen.

Merk: Stripede tabeller bruker :nth-childCSS-velgeren og er ikke tilgjengelig i IE7-IE8.

  1. < tabellklasse = "tabell-tabellstripet" >
  2. </table>
# Fornavn Etternavn Brukernavn
1 merke Otto @mdo
2 Jacob Thornton @fett
3 Larry fuglen @twitter

3. Border bord

Legg til kanter rundt hele bordet og avrundede hjørner for estetiske formål.

  1. < tabellklasse = "tabellkantet" >
  2. </table>
# Fornavn Etternavn Brukernavn
1 merke Otto @mdo
merke Otto @getbootstrap
2 Jacob Thornton @fett
3 Fuglen Larry @twitter

4. Kondensert bord

Gjør bordene dine mer kompakte ved å legge til .table-condensedklassen for å kutte bordcellefylling i to (fra 8px til 4px).

  1. < tabellklasse = "tabelltabellkondensert" >
  2. </table>
# Fornavn Etternavn Brukernavn
1 merke Otto @mdo
2 Jacob Thornton @fett
3 Fuglen Larry @twitter

5. Kombiner dem alle!

Kombiner gjerne hvilken som helst av bordklassene for å oppnå forskjellige utseender ved å bruke noen av de tilgjengelige klassene.

  1. < tabellklasse = "tabellstripete bordkantet bordkondensert" >
  2. ...
  3. </table>
Fullt navn
# Fornavn Etternavn Brukernavn
1 merke Otto @mdo
2 Jacob Thornton @fett
3 Fuglen Larry @twitter

Fleksibel HTML og CSS

Det beste med skjemaer i Bootstrap er at alle inngangene og kontrollene dine ser bra ut uansett hvordan du bygger dem i markeringen. Ingen overflødig HTML er nødvendig, men vi leverer mønstrene for de som trenger det.

Mer kompliserte oppsett kommer med kortfattede og skalerbare klasser for enkel styling og eventbinding, slik at du er dekket på hvert trinn.

Fire oppsett inkludert

Bootstrap kommer med støtte for fire typer skjemaoppsett:

  • Vertikal (standard)
  • Søk
  • På linje
  • Horisontal

Ulike typer skjemaoppsett krever noen endringer i markeringen, men selve kontrollene forblir og oppfører seg på samme måte.

Kontrolltilstander og mer

Bootstraps skjemaer inkluderer stiler for alle basisskjemakontrollene som input, tekstområde og valg du forventer. Men den kommer også med en rekke tilpassede komponenter som vedlagte og forhåndsdefinerte innganger og støtte for lister over avmerkingsbokser.

Tilstander som feil, advarsel og suksess er inkludert for hver type skjemakontroll. Også inkludert er stiler for deaktiverte kontroller.

Fire typer skjemaer

Bootstrap gir enkel markering og stiler for fire stiler av vanlige nettskjemaer.

Navn Klasse Beskrivelse
Vertikal (standard) .form-vertical (ikke obligatorisk) Stablede, venstrejusterte etiketter over kontroller
På linje .form-inline Venstrejusterte etikett- og inline-blokkkontroller for kompakt stil
Søk .form-search Ekstra avrundet tekstinntasting for en typisk søkeestetikk
Horisontal .form-horizontal Flyt venstre, høyrejusterte etiketter på samme linje som kontrollene

Eksempelskjemaer som bare bruker skjemakontroller, ingen ekstra markering

Grunnskjema

Smarte og lette standardinnstillinger uten ekstra markering.

Eksempel på hjelpetekst på blokknivå her.

  1. <form class = "vel" >
  2. <label> Etikettnavn < /label>
  3. <input type = "text" class = "span3" plassholder = "Skriv noe..." >
  4. <span class = "help-block" > Eksempel hjelpetekst på blokknivå her. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Sjekk meg ut
  7. </label>
  8. <button type = "submit" class = "btn" > Send inn </button>
  9. </form>

Søkeskjema

Legg .form-searchtil i skjemaet og .search-queryi input.

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

Innebygd skjema

Legg .form-inlinetil den vertikale justeringen og avstanden til skjemakontrollene for finesse.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" plassholder = "E-post" >
  3. <input type = "password" class = "input-small" plassholder = "Passord" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Husk meg
  6. </label>
  7. <button type = "submit" class = "btn" > Logg på </button>
  8. </form>

Horisontale former

Til høyre vises alle standard skjemakontroller vi støtter. Her er punktlisten:

  • tekstinndata (tekst, passord, e-post osv.)
  • avmerkingsboksen
  • radio
  • å velge
  • flere utvalg
  • filinndata
  • tekstområde

I tillegg til friformtekst, ser alle HTML5-tekstbaserte inndata slik ut.

Eksempel på markering

Gitt eksempelskjemaoppsettet ovenfor, her er markeringen knyttet til den første inndata- og kontrollgruppen. Klassene .control-group, .control-label, og .controlser alle nødvendige for styling.

  1. <form class = "form-horisontal" >
  2. <feltsett>
  3. <legend> Forklaringstekst </legend>
  4. <div class = "kontrollgruppe" >
  5. <label class = "control-label" for = "input01" > Tekstinndata </label>
  6. <div class = "kontroller" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Støttende hjelpetekst </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Skjemakontrolltilstander

Bootstrap har stiler for nettleserstøttede fokuserte og disabledtilstander. Vi fjerner standard Webkit outlineog bruker en box-shadowi stedet for :focus.


Skjemavalidering

Den inkluderer også valideringsstiler for feil, advarsler og suksess. For å bruke, legg til feilklassen til den omgivende .control-group.

  1. <feltsett
  2. class = "kontrollgruppefeil" >
  3. </fieldset>
Noe verdi her
Noe kan ha gått galt
Rett opp feilen
Woohoo!
Woohoo!

Utvide skjemakontroller

Legg til og legg til innganger

Inndatagrupper – med vedlagt eller foranstående tekst – gir en enkel måte å gi mer kontekst for inputene dine. Gode ​​eksempler inkluderer @-tegnet for Twitter-brukernavn eller $ for økonomi.


Avmerkingsbokser og radioer

Opp til v1.4 krevde Bootstrap ekstra markering rundt avmerkingsbokser og radioer for å stable dem. Nå er det en enkel sak å gjenta den <label class="checkbox">som omslutter <input type="checkbox">.

Innebygde avmerkingsbokser og radioer støttes også. Bare legg .inlinetil noen .checkboxeller .radioog du er ferdig.


Innebygde skjemaer og legg til/prepend

For å bruke forhånds- eller tilføy-inndata i et innebygd skjema, pass på å plassere .add-onog inputpå samme linje, uten mellomrom.


Skjema hjelpetekst

For å legge til hjelpetekst for skjemainndataene dine, inkluderer du innebygd hjelpetekst med <span class="help-inline">eller en hjelpetekstblokk med <p class="help-block">etter inndataelementet.

Bruk de samme .span*klassene fra rutenettsystemet for inngangsstørrelser.

Du kan også bruke statiske klasser som ikke kartlegger til rutenettet, tilpasser seg responsive CSS-stiler eller tar hensyn til ulike typer kontroller (f.eks. inputkontra select).

@

Her er litt hjelpetekst

0,00
Her er mer hjelpetekst
$ 0,00

Merk: Etiketter omgir alle alternativene for mye større klikkområder og en mer brukbar form.

Knapp klasse="" Beskrivelse
btn Standard grå knapp med gradient
btn btn-primary Gir ekstra visuell vekt og identifiserer hovedhandlingen i et sett med knapper
btn btn-info Brukes som et alternativ til standardstilene
btn btn-success Indikerer en vellykket eller positiv handling
btn btn-warning Indikerer at det bør utvises forsiktighet med denne handlingen
btn btn-danger Indikerer en farlig eller potensielt negativ handling
btn btn-inverse Alternativ mørkegrå knapp, ikke knyttet til en semantisk handling eller bruk

Knapper for handlinger

Som konvensjon skal knapper kun brukes til handlinger mens hyperkoblinger skal brukes til objekter. For eksempel skal "Last ned" være en knapp mens "nylig aktivitet" skal være en lenke.

Knappestiler kan brukes på hva som helst med .btnklassen brukt. Vanligvis vil du imidlertid bruke disse på bare <a>og <button>elementer.

Kryssnettleserkompatibilitet

IE9 beskjærer ikke bakgrunnsgradienter på avrundede hjørner, så vi fjerner den. Beslektet, IE9 jankifies deaktiverte buttonelementer, gjengir tekst grå med en ekkel tekst-skygge som vi ikke kan fikse.

Flere størrelser

Lyst på større eller mindre knapper? Legg til .btn-large, .btn-small, eller .btn-minifor to ekstra størrelser.


Deaktivert tilstand

For deaktiverte knapper, legg til .disabledklassen i lenker og disabledattributtet for <button>elementer.

Primær lenke Link

Vær oppmerksom! Vi bruker .disabledsom en bruksklasse her, lik den vanlige .activeklassen, så ingen prefiks er nødvendig.

Én klasse, flere tagger

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

Link
  1. <a class = "btn" href = "" > Link </a>
  2. <button class = "btn" type = "send inn" >
  3. Knapp
  4. </button>
  5. <input class = "btn" type = "button"
  6. verdi = "Input" >
  7. <input class = "btn" type = "send"
  8. value = "Send inn" >

Som en god fremgangsmåte, prøv å matche elementet for konteksten din for å sikre samsvarende gjengivelse på tvers av nettlesere. Hvis du har en input, bruk en <input type="submit">for knappen din.

  • ikon-glass
  • ikon-musikk
  • ikon-søk
  • ikon-konvolutt
  • ikon-hjerte
  • ikon-stjerne
  • ikon-stjerne-tom
  • ikon-bruker
  • ikon-film
  • ikon-th-large
  • ikon-th
  • ikon-te-listen
  • ikon-ok
  • ikon-fjern
  • ikon-zoome inn
  • ikon-zoome ut
  • ikon av
  • ikon-signal
  • ikon-tannhjul
  • ikon-søppel
  • ikon-hjem
  • ikon-fil
  • ikon-tid
  • ikon-vei
  • ikon-last ned-alt
  • ikon-last ned
  • ikon-opplasting
  • ikon-innboks
  • ikon-spill-sirkel
  • ikon-gjenta
  • ikon-oppdatering
  • icon-list-alt
  • ikon-lås
  • ikon-flagg
  • ikon-hodetelefoner
  • ikon-volum av
  • ikon-volum ned
  • ikon-volum opp
  • icon-qrcode
  • ikon-strekkode
  • ikon-tag
  • ikon-tagger
  • ikon-bok
  • ikon-bokmerke
  • ikon-utskrift
  • ikon-kamera
  • ikon-font
  • ikon-fet skrift
  • ikon-kursiv
  • ikon-tekst-høyde
  • ikon-tekst-bredde
  • icon-align-venstre
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • ikon-liste
  • ikon-innrykk-venstre
  • ikon-innrykk-høyre
  • icon-facetime-video
  • ikon-bilde
  • ikon-blyant
  • ikon-kart-markør
  • ikon-juster
  • ikon-farge
  • icon-edit
  • ikon-deling
  • ikon-sjekk
  • icon-move
  • ikon-trinn-bakover
  • ikon-raskt-bakover
  • ikon-bakover
  • ikon-spill
  • ikon-pause
  • ikon-stopp
  • ikon-fremover
  • ikon-spol fremover
  • ikon-skritt-fremover
  • ikon-utkast
  • icon-chevron-venstre
  • icon-chevron-right
  • ikon-pluss-tegn
  • ikon-minus-tegn
  • ikon-fjern-tegn
  • ikon-ok-tegn
  • ikon-spørsmål-tegn
  • ikon-info-skilt
  • ikon-skjermbilde
  • ikon-fjern-sirkel
  • ikon-ok-sirkel
  • icon-ban-sirkel
  • ikon-pil-venstre
  • ikon-pil-høyre
  • ikon-pil opp
  • ikon-pil ned
  • icon-share-alt
  • ikon-endre størrelse-full
  • ikon-endre størrelse-liten
  • ikon-pluss
  • ikon-minus
  • ikon-stjerne
  • ikon-utropstegn
  • ikon-gave
  • ikon-blad
  • ikon-brann
  • ikon-øyeåpent
  • ikon-øye-lukk
  • ikon-advarselsskilt
  • ikon-plan
  • ikon-kalender
  • ikon-tilfeldig
  • ikon-kommentar
  • ikon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • ikon-retweet
  • ikon-handlevogn
  • ikon-mappe-lukk
  • ikon-mappe-åpen
  • ikon-endre størrelse-vertikal
  • ikon-endre størrelse-horisontal
  • ikon-hdd
  • ikon-tyrehorn
  • ikon-bjelle
  • ikon-sertifikat
  • ikon-tommel opp
  • ikon-tommel ned
  • ikon-hånd-høyre
  • ikon-hånd-venstre
  • ikon-hånd opp
  • ikon-hånd-ned
  • ikon-sirkel-pil-høyre
  • ikon-sirkel-pil-venstre
  • ikon-sirkel-pil opp
  • ikon-sirkel-pil ned
  • ikon-klode
  • ikon-nøkkel
  • ikon-oppgaver
  • ikon-filter
  • ikon-koffert
  • ikon-fullskjerm

Bygget som en sprite

I stedet for å gjøre hvert ikon til en ekstra forespørsel, har vi kompilert dem til en sprite – en haug med bilder i én fil som bruker CSS til å plassere bildene med background-position. Dette er den samme metoden vi bruker på Twitter.com og den har fungert bra for oss.

Alle ikonklasser er prefiks med .icon-for riktig navneavstand og omfang, omtrent som våre andre komponenter. Dette vil bidra til å unngå konflikter med andre verktøy.

Glyphicons har gitt oss bruk av Halflings-settet i vår åpen kildekode-verktøykasse så lenge vi gir en lenke og kreditt her i dokumentene. Vennligst vurder å gjøre det samme i prosjektene dine.

Hvordan å bruke

Bootstrap bruker en <i>kode for alle ikoner, men de har ingen kasusklasse – bare et delt prefiks. For å bruke, plasser følgende kode omtrent hvor som helst:

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

Det er også stiler tilgjengelig for inverterte (hvite) ikoner, gjort klare med én ekstra klasse:

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

Det er 140 klasser å velge mellom for ikonene dine. Bare legg til en <i>tag med de riktige klassene, så er du klar. Du finner hele listen i sprites.less eller rett her i dette dokumentet.

Vær oppmerksom! Når du bruker tekststrenger ved siden av, som i knapper eller nav-lenker, må du sørge for å legge igjen et mellomrom etter <i>taggen for riktig avstand.

Brukssaker

Ikoner er flotte, men hvor kan man bruke dem? Her er noen ideer:

  • Som grafikk for navigasjonen i sidefeltet
  • For en rent ikondrevet navigasjon
  • For knapper for å formidle betydningen av en handling
  • Med lenker for å dele kontekst på en brukers destinasjon

I hovedsak, hvor som helst du kan sette en <i>tag, kan du sette et ikon.

Eksempler

Bruk dem i knapper, knappegrupper for en verktøylinje, navigasjon eller forhåndsinnlagte skjemainndata.