Tilgjengelige glyfer

Inkluderer over 250 glyfer i skriftformat fra Glyphicon Halflings-settet. Glyphicons Halflings er normalt ikke tilgjengelige gratis, men skaperen deres har gjort dem tilgjengelige for Bootstrap gratis. Som takk ber vi deg bare om å inkludere en lenke tilbake til Glyphicons når det er mulig.

glyphicon glyphicon-stjerne
glyphicon glyphicon-pluss
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-sky
glyphicon glyphicon-konvolutt
glyphicon glyphicon-blyant
glyphicon glyphicon-glass
glyphicon glyphicon-musikk
glyphicon glyphicon-søk
glyphicon glyphicon-hjerte
glyphicon glyphicon-stjerne
glyphicon glyphicon-stjerne-tom
glyphicon glyphicon-bruker
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-fjern
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-søppel
glyphicon glyphicon-hjem
glyphicon glyphicon-fil
glyphicon glyphicon-tid
glyphicon glyphicon-vei
glyphicon glyphicon-download-alt
Last ned glyphicon glyphicon
glyphicon glyphicon-opplasting
glyphicon glyphicon-innboks
glyphicon glyphicon-play-sirkel
glyphicon glyphicon-gjenta
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lås
glyphicon glyphicon-flagg
glyphicon glyphicon-hodetelefoner
glyphicon glyphicon-volum-av
glyphicon glyphicon-volum ned
glyphicon glyphicon-volum opp
glyphicon glyphicon-qrcode
glyphicon glyphicon-strekkode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-bok
glyphicon glyphicon-bokmerke
glyphicon glyphicon-trykk
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-fet skrift
glyphicon glyphicon-kursiv
glyphicon glyphicon-tekst-høyde
glyphicon glyphicon-tekst-bredde
glyphicon glyphicon-align-venstre
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-liste
glyphicon glyphicon-innrykk-venstre
glyphicon glyphicon-innrykk-høyre
glyphicon glyphicon-facetime-video
glyphicon glyphicon-bilde
glyphicon glyphicon-map-marker
glyphicon glyphicon-juster
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-andel
glyphicon glyphicon-sjekk
glyphicon glyphicon-move
glyphicon glyphicon-steg-bakover
glyphicon glyphicon-rask-bakover
glyphicon glyphicon-bakover
glyphicon glyphicon-spill
glyphicon glyphicon-pause
glyphicon glyphicon-stopp
glyphicon glyphicon-fremover
glyphicon glyphicon-spol fremover
glyphicon glyphicon-steg-forover
glyphicon glyphicon-utkast
glyphicon glyphicon-chevron-venstre
glyphicon glyphicon-chevron-høyre
glyphicon glyphicon-pluss-tegn
glyphicon glyphicon-minus-tegn
glyphicon glyphicon-fjern-tegn
glyphicon glyphicon-ok-tegn
glyphicon glyphicon-spørsmål-tegn
glyphicon glyphicon-info-skilt
glyphicon glyphicon-skjermbilde
glyphicon glyphicon-fjern-sirkel
glyphicon glyphicon-ok-sirkel
glyphicon glyphicon-ban-sirkel
glyphicon glyphicon-pil-venstre
glyphicon glyphicon-pil-høyre
glyphicon glyphicon-pil opp
glyphicon glyphicon-pil ned
glyphicon glyphicon-share-alt
glyphicon glyphicon-endre størrelse-full
glyphicon glyphicon-endre størrelse-liten
glyphicon glyphicon-utropstegn
glyphicon glyphicon-gave
glyphicon glyphicon-blad
glyphicon glyphicon-ild
glyphicon glyphicon-øyeåpent
glyphicon glyphicon-øye-lukke
glyphicon glyphicon-advarselsskilt
glyphicon glyphicon-plan
glyphicon glyphicon-kalender
glyphicon glyphicon-tilfeldig
glyphicon glyphicon-kommentar
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-handlevogn
glyphicon glyphicon-mappe-lukk
glyphicon glyphicon-mappe-åpen
glyphicon glyphicon-endre størrelse-vertikal
glyphicon glyphicon-endre størrelse-horisontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bjelle
glyphicon glyphicon-sertifikat
glyphicon glyphicon-tommel opp
glyphicon glyphicon-tommel-ned
glyphicon glyphicon-hånd-høyre
glyphicon glyphicon-hånd-venstre
glyphicon glyphicon-hånd-opp
glyphicon glyphicon-hand-down
glyphicon glyphicon-sirkel-pil-høyre
glyphicon glyphicon-sirkel-pil-venstre
glyphicon glyphicon-sirkel-pil opp
glyphicon glyphicon-sirkel-pil-ned
glyphicon glyphicon-klode
glyphicon glyphicon-nøkkel
glyphicon glyphicon-oppgaver
glyphicon glyphicon-filter
glyphicon glyphicon-koffert
glyphicon glyphicon-fullskjerm
glyphicon glyphicon-dashboard
glyphicon glyphicon-binders
glyphicon glyphicon-hjerte-tom
glyphicon glyphicon-link
glyphicon glyphicon-telefon
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-etter-alfabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-etter-rekkefølge
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-etter-attributter
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-ukontrollert
glyphicon glyphicon-expand
glyphicon glyphicon-kollaps-ned
glyphicon glyphicon-kollaps opp
glyphicon glyphicon-logg inn
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-nytt-vindu
glyphicon glyphicon-rekord
glyphicon glyphicon-lagre
glyphicon glyphicon-åpen
glyphicon glyphicon-lagret
glyphicon glyphicon-import
glyphicon glyphicon-eksport
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-lagret
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-kredittkort
glyphicon glyphicon-overføring
glyphicon glyphicon-bestikk
glyphicon glyphicon-header
glyphicon glyphicon-komprimert
glyphicon glyphicon-øretelefon
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tårn
glyphicon glyphicon-statistikk
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-undertekster
glyphicon glyphicon-lyd-stereo
glyphicon glyphicon-lyd-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-merke
glyphicon glyphicon-registreringsmerke
glyphicon glyphicon-cloud-nedlasting
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tre-bartrær
glyphicon glyphicon-tre-løvfellende
glyphicon glyphicon-cd
glyphicon glyphicon-lagre-fil
glyphicon glyphicon-open-file
glyphicon glyphicon-nivå opp
glyphicon glyphicon-kopi
glyphicon glyphicon-pasta
glyphicon glyphicon-varsel
glyphicon glyphicon-equalizer
glyphicon glyphicon-konge
glyphicon glyphicon-dronning
glyphicon glyphicon-bonde
glyphicon glyphicon-biskop
glyphicon glyphicon-ridder
glyphicon glyphicon-baby-formel
glyphicon glyphicon-telt
glyphicon glyphicon-tavle
glyphicon glyphicon-bed
glyphicon glyphicon-eple
glyphicon glyphicon-sletting
glyphicon glyphicon-timeglass
glyphicon glyphicon-lampe
glyphicon glyphicon-duplikat
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-saks
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rubel
glyphicon glyphicon-rub
glyphicon glyphicon-skala
glyphicon glyphicon-ispinne
glyphicon glyphicon-is-pinne-smak
glyphicon glyphicon-utdanning
glyphicon glyphicon-opsjon-horisontal
glyphicon glyphicon-opsjon-vertikal
glyphicon glyphicon-meny-hamburger
glyphicon glyphicon-modal-vindu
glyphicon glyphicon-olje
glyphicon glyphicon-korn
glyphicon glyphicon-solbriller
glyphicon glyphicon-tekst-størrelse
glyphicon glyphicon-tekst-farge
glyphicon glyphicon-tekst-bakgrunn
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-objekt-align-horisontal
glyphicon glyphicon-object-align-venstre
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-trekant-høyre
glyphicon glyphicon-trekant-venstre
glyphicon glyphicon-trekant-bunn
glyphicon glyphicon-triangel-topp
glyphicon glyphicon-konsoll
glyphicon glyphicon-overskrift
glyphicon glyphicon-subscript
glyphicon glyphicon-meny-venstre
glyphicon glyphicon-meny-høyre
glyphicon glyphicon-meny-ned
glyphicon glyphicon-meny-opp

Hvordan å bruke

Av ytelsesgrunner krever alle ikoner en basisklasse og individuell ikonklasse. For å bruke, plasser følgende kode omtrent hvor som helst. Sørg for å legge igjen et mellomrom mellom ikonet og teksten for riktig utfylling.

Ikke bland med andre komponenter

Ikonklasser kan ikke kombineres direkte med andre komponenter. De bør ikke brukes sammen med andre klasser på samme element. Legg i stedet til en nestet <span>og bruk ikonklassene på <span>.

Kun til bruk på tomme elementer

Ikonklasser skal bare brukes på elementer som ikke inneholder tekstinnhold og ikke har underordnede elementer.

Endre plassering av ikonets skrifttype

Bootstrap antar at ikonfontfiler vil være plassert i ../fonts/katalogen, i forhold til de kompilerte CSS-filene. Å flytte eller gi nytt navn til disse fontfilene betyr å oppdatere CSS på en av tre måter:

Endre @icon-font-pathog/eller @icon-font-namevariablene i kilden Mindre filer.
Bruk alternativet for relative URL -er fra Less-kompilatoren.
Endre url()banene i den kompilerte CSS-en.

Bruk det alternativet som passer best for ditt spesifikke utviklingsoppsett.

Tilgjengelige ikoner

Moderne versjoner av hjelpeteknologier vil kunngjøre CSS-generert innhold, samt spesifikke Unicode-tegn. For å unngå utilsiktede og forvirrende utdata i skjermlesere (spesielt når ikoner brukes utelukkende til dekorasjon), skjuler vi dem med aria-hidden="true"attributtet.

Hvis du bruker et ikon for å formidle mening (i stedet for bare som et dekorativt element), sørg for at denne betydningen også formidles til hjelpeteknologier – for eksempel inkludere tilleggsinnhold, visuelt skjult med .sr-onlyklassen.

Hvis du oppretter kontroller uten annen tekst (for eksempel en <button>som bare inneholder et ikon), bør du alltid oppgi alternativt innhold for å identifisere formålet med kontrollen, slik at det gir mening for brukere av hjelpeteknologier. I dette tilfellet kan du legge til et aria-labelattributt på selve kontrollen.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Eksempler

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Et ikon som brukes i et varsel for å formidle at det er en feilmelding, med ekstra .sr-onlytekst for å formidle dette hintet til brukere av hjelpemidler.

Oppgi en gyldig e-post-adresse

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Byttbar, kontekstuell meny for å vise lister over lenker. Gjorde interaktiv med JavaScript-pluginen for rullegardinmenyen .

Eksempel

Pakk rullegardinmenyens utløser og rullegardinmenyen innenfor .dropdown, eller et annet element som erklærer position: relative;. Deretter legger du til menyens HTML.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Rullegardinmenyer kan endres til å utvides oppover (i stedet for nedover) ved å legge .dropuptil overordnet.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Justering

Som standard er en rullegardinmeny automatisk plassert 100 % fra toppen og langs venstre side av overordnet. Legg .dropdown-menu-righttil en .dropdown-menutil høyre juster rullegardinmenyen.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Overskrifter

Legg til en overskrift for å merke deler av handlinger i en rullegardinmeny.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Deler

Legg til en skillelinje for separate serier med lenker i en rullegardinmeny.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Deaktiverte menyelementer

Legg .disabledtil <li>i rullegardinmenyen for å deaktivere koblingen.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Grupper en serie knapper sammen på en enkelt linje med knappegruppen. Legg til valgfri JavaScript-radio og avkrysningsboksstiladferd med vår knappe-plugin .

Verktøytips og popovers i knappegrupper krever spesielle innstillinger

Når du bruker verktøytips eller popovers på elementer i en .btn-group, må du spesifisere alternativet container: 'body'for å unngå uønskede bivirkninger (som at elementet vokser bredere og/eller mister sine avrundede hjørner når verktøytipset eller popoveren utløses).

Sørg for riktig `role`og gi en etikett

For at hjelpeteknologier – som skjermlesere – skal formidle at en rekke knapper er gruppert, må en passende roleegenskap angis. For knappegrupper vil dette være role="group", mens verktøylinjer skal ha en role="toolbar".

Ett unntak er grupper som bare inneholder en enkelt kontroll (for eksempel de justerte knappegruppene med <button>elementer) eller en rullegardin.

I tillegg bør grupper og verktøylinjer gis en eksplisitt etikett, da de fleste hjelpeteknologier ellers ikke vil kunngjøre dem, til tross for tilstedeværelsen av riktig roleattributt. I eksemplene som er gitt her, bruker vi aria-label, men alternativer som aria-labelledbykan også brukes.

Grunnleggende eksempel

Pakk inn en serie knapper med .btninn .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Kombiner sett <div class="btn-group">til en <div class="btn-toolbar">for mer komplekse komponenter.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Dimensjonering

I stedet for å bruke knappestørrelsesklasser på hver knapp i en gruppe, er det bare å legge .btn-group-*til i hver .btn-group, også når du legger flere grupper.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Hekking

Plasser en .btn-groupi en annen .btn-groupnår du vil ha rullegardinmenyer blandet med en rekke knapper.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Vertikal variasjon

Få et sett med knapper til å vises vertikalt stablet i stedet for horisontalt. Rullegardinmenyene for delte knapper støttes ikke her.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Justerte knappegrupper

Få en gruppe knapper til å strekke seg like store for å spenne over hele bredden til forelderen. Fungerer også med rullegardinknapper innenfor knappegruppen.

Håndtering av grenser

På grunn av den spesifikke HTML og CSS som brukes til å rettferdiggjøre knapper (nemlig display: table-cell), er grensene mellom dem doblet. I vanlige knappegrupper margin-left: -1pxbrukes til å stable kantlinjene i stedet for å fjerne dem. Fungerer marginimidlertid ikke med display: table-cell. Som et resultat, avhengig av tilpasningene til Bootstrap, kan det hende du ønsker å fjerne eller fargelegge kantene på nytt.

IE8 og grenser

Internet Explorer 8 gjengir ikke kanter på knapper i en justert knappegruppe, enten den er på <a>eller <button>elementer. For å omgå det, pakk hver knapp inn i en annen .btn-group.

Se #12476 for mer informasjon.

Med `<a>`elementer

Bare pakk inn en serie med .btns .btn-group.btn-group-justified.

Venstre Midten Ikke sant

Venstre Midten

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Lenker som fungerer som knapper

Hvis <a>elementene brukes til å fungere som knapper – som utløser funksjonalitet på siden, i stedet for å navigere til et annet dokument eller seksjon på gjeldende side – bør de også gis en passende role="button".

Med `<button>`elementer

For å bruke justerte knappegrupper med <button>elementer, må du pakke hver knapp inn i en knappegruppe . De fleste nettlesere bruker ikke CSS-en vår på riktig måte for å begrunne <button>elementer, men siden vi støtter rullegardinknapper, kan vi omgå det.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

Bruk en hvilken som helst knapp for å utløse en rullegardinmeny ved å plassere den i en .btn-groupog gi riktig menyoppmerking.

Plugin-avhengighet

Dropdown- knapper krever at dropdown-pluginen er inkludert i din versjon av Bootstrap.

En knapp rullegardinmeny

Gjør en knapp til en rullegardinbryter med noen grunnleggende markupendringer.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Rullegardiner for delt knapp

På samme måte oppretter du rullegardinmenyene med delte knapper med de samme markupendringene, bare med en separat knapp.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Dimensjonering

Dropdown-knapper fungerer med knapper i alle størrelser.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Dropup-variasjon

Utløs rullegardinmenyer over elementer ved å legge .dropuptil den overordnede.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Utvid skjemakontrollene ved å legge til tekst eller knapper før, etter eller på begge sider av tekstbasert <input>. Bruk .input-groupmed en .input-group-addoneller .input-group-btnfor å legge til elementer foran eller legge til elementer til en enkelt .form-control.

Kun tekstlige `<input>`s

Unngå å bruke <select>elementer her da de ikke kan styles fullt ut i WebKit-nettlesere.

Unngå å bruke <textarea>elementer her, siden deres rowsattributt ikke vil bli respektert i noen tilfeller.

Verktøytips og popovers i inndatagrupper krever spesielle innstillinger

Når du bruker verktøytips eller popovers på elementer i en .input-group, må du spesifisere alternativet container: 'body'for å unngå uønskede bivirkninger (som at elementet blir bredere og/eller mister sine avrundede hjørner når verktøytipset eller popoveren utløses).

Ikke bland med andre komponenter

Ikke bland skjemagrupper eller rutenettkolonneklasser direkte med inndatagrupper. Neste i stedet inndatagruppen inne i skjemagruppen eller det rutenettrelaterte elementet.

Legg alltid til etiketter

Skjermlesere vil ha problemer med skjemaene dine hvis du ikke inkluderer en etikett for hver inndata. For disse inngangsgruppene, sørg for at eventuell tilleggsetikett eller funksjonalitet overføres til hjelpeteknologier.

Den nøyaktige teknikken som skal brukes (synlige <label>elementer, <label>elementer som er skjult ved bruk av .sr-onlyklassen, eller bruk av aria-label, aria-labelledby, aria-describedby, titleeller placeholderattributtet) og hvilken tilleggsinformasjon som må formidles, vil variere avhengig av den eksakte typen grensesnitt-widget du implementerer. Eksemplene i denne delen gir noen foreslåtte saksspesifikke tilnærminger.

Grunnleggende eksempel

Plasser ett tillegg eller en knapp på hver side av en inngang. Du kan også plassere en på begge sider av en inngang.

Vi støtter ikke flere tillegg ( .input-group-addoneller .input-group-btn) på en enkelt side.

Vi støtter ikke flere skjemakontroller i en enkelt inndatagruppe.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Dimensjonering

Legg til de relative skjemastørrelsesklassene til seg .input-groupselv, og innholdet i vil automatisk endre størrelsen – det er ikke nødvendig å gjenta skjemakontrollstørrelsesklassene på hvert element.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Avmerkingsbokser og radiotillegg

Plasser en hvilken som helst avmerkingsboks eller radioalternativ i tillegget til en inngangsgruppe i stedet for tekst.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Knapptillegg

Knapper i inndatagrupper er litt forskjellige og krever ett ekstra nivå med hekking. I stedet for .input-group-addonmå du bruke .input-group-btnfor å pakke inn knappene. Dette er nødvendig på grunn av standard nettleserstiler som ikke kan overstyres.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Knapper med rullegardiner

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Segmenterte knapper

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Flere knapper

Mens du bare kan ha ett tillegg per side, kan du ha flere knapper inne i en enkelt .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs tilgjengelige i Bootstrap har delt markering, som starter med basisklassen .nav, så vel som delte tilstander. Bytt modifikatorklasser for å bytte mellom hver stil.

Bruk av nav for fanepaneler krever JavaScript-tabs-plugin

For faner med tabbare områder, må du bruke tabs JavaScript-plugin . Markeringen vil også kreve tilleggs- roleog ARIA-attributter – se plugin- eksemplet for mer informasjon.

Gjør nav som brukes som navigasjon tilgjengelig

Hvis du bruker nav for å gi en navigasjonslinje, må du legge til en role="navigation"i den mest logiske overordnede beholderen til <ul>, eller legge et <nav>element rundt hele navigasjonen. Ikke legg rollen til seg <ul>selv, da dette vil forhindre at den blir annonsert som en faktisk liste av hjelpeteknologier.

Faner

Merk at .nav-tabsklassen krever .navbasisklassen.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Piller

Ta den samme HTML-en, men bruk .nav-pillsi stedet:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Piller kan også stables vertikalt. Bare legg til .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Begrunnet

Gjør enkelt faner eller piller like bredder på foreldrene på skjermer som er bredere enn 768 piksler med .nav-justified. På mindre skjermer er nav-lenkene stablet.

Berettiget navbar nav-koblinger støttes for øyeblikket ikke.

Safari og responsive begrunnede navigasjoner

Fra og med v9.1.2 viser Safari en feil der endring av nettleserens størrelse horisontalt forårsaker gjengivelsesfeil i den berettigede navigasjonen som fjernes ved oppdatering. Denne feilen vises også i eksemplet med berettiget nav .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Deaktiverte lenker

For alle nav-komponenter (tabs eller piller), legg .disabledtil for grå lenker og ingen sveveeffekter .

Koblingsfunksjonalitet er ikke påvirket

Denne klassen vil bare endre <a>utseendet til den, ikke funksjonaliteten. Bruk tilpasset JavaScript for å deaktivere koblinger her.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Bruker rullegardinmenyene

Legg til rullegardinmenyer med litt ekstra HTML og JavaScript-plugin-modulen .

Faner med rullegardiner

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Piller med dropdowns

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbarer er responsive metakomponenter som fungerer som navigasjonshoder for applikasjonen eller nettstedet ditt. De begynner å kollapse (og kan byttes) i mobilvisninger og blir horisontale etter hvert som den tilgjengelige visningsportbredden øker.

Berettiget navbar nav-koblinger støttes for øyeblikket ikke.

Overfylt innhold

Siden Bootstrap ikke vet hvor mye plass innholdet i navigasjonslinjen din trenger, kan det hende du får problemer med å pakke innhold inn i en andre rad. For å løse dette kan du:

Reduser mengden eller bredden på navbar-elementer.
Skjul visse navbar-elementer ved bestemte skjermstørrelser ved å bruke responsive verktøyklasser .
Endre punktet der navigasjonslinjen veksler mellom sammenslått og horisontal modus. Tilpass @grid-float-breakpointvariabelen eller legg til ditt eget mediesøk.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Bytt ut navbar-merket med ditt eget bilde ved å bytte ut teksten med en <img>. Siden den .navbar-brandhar sin egen polstring og høyde, må du kanskje overstyre noe CSS avhengig av bildet ditt.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Plasser skjemainnhold innenfor .navbar-formfor riktig vertikal justering og skjult oppførsel i smale visningsporter. Bruk justeringsalternativene for å bestemme hvor den befinner seg i navigasjonslinjens innhold.

Som en heads up, .navbar-formdeler mye av koden sin med .form-inlinevia mixin. Noen skjemakontroller, som inndatagrupper, kan kreve at faste bredder vises riktig i en navigasjonslinje.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Legg alltid til etiketter

Skjermlesere vil ha problemer med skjemaene dine hvis du ikke inkluderer en etikett for hver inndata. For disse innebygde skjemaene kan du skjule etikettene ved å bruke .sr-onlyklassen. Det finnes flere alternative metoder for å gi en etikett for hjelpeteknologier, for eksempel aria-label, aria-labelledbyeller titleattributtet. Hvis ingen av disse er til stede, kan skjermlesere ty til å bruke placeholderattributtet, hvis det finnes, men vær oppmerksom på at bruk av placeholdersom erstatning for andre merkingsmetoder ikke anbefales.

Legg .navbar-btnklassen til <button>elementer som ikke ligger i a <form>for å sentrere dem vertikalt i navigasjonslinjen.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Pakk inn tekststrenger i et element med .navbar-text, vanligvis på en <p>tag for riktig visning og farge.

<p class="navbar-text">Signed in as Mark Otto</p>

For folk som bruker standardlenker som ikke er innenfor den vanlige navigasjonskomponenten, bruk .navbar-linkklassen til å legge til de riktige fargene for standard- og inverseringsnavigasjonsalternativene.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Juster nav-lenker, skjemaer, knapper eller tekst ved å bruke verktøyklassene .navbar-lefteller .navbar-right. Begge klassene vil legge til en CSS-float i den angitte retningen. For for eksempel å justere nav-lenker, legg dem i en separat <ul>med den respektive verktøyklassen brukt.

Disse klassene er blandede versjoner av .pull-leftog .pull-right, men de er rettet mot mediespørringer for enklere håndtering av navbar-komponenter på tvers av enhetsstørrelser.

Legg til .navbar-fixed-topog ta med et .containereller .container-fluidtil senter- og padnavigasjonslinjeinnhold.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Kroppspolstring kreves

Den faste navigasjonslinjen vil overlappe det øvrige innholdet ditt, med mindre du legger paddingtil toppen av <body>. Prøv ut dine egne verdier eller bruk utdraget vårt nedenfor. Tips: Som standard er navigasjonslinjen 50 px høy.

body { padding-top: 70px; }

Sørg for å inkludere dette etter kjernen Bootstrap CSS.

Legg til .navbar-fixed-bottomog ta med et .containereller .container-fluidtil senter- og padnavigasjonslinjeinnhold.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Kroppspolstring kreves

Den faste navigasjonslinjen vil overlegge det øvrige innholdet ditt, med mindre du legger paddingtil nederst i <body>. Prøv ut dine egne verdier eller bruk utdraget vårt nedenfor. Tips: Som standard er navigasjonslinjen 50 px høy.

body { padding-bottom: 70px; }

Sørg for å inkludere dette etter kjernen Bootstrap CSS.

Lag en navigasjonslinje i full bredde som ruller bort med siden ved å legge til .navbar-static-topog inkludere et .containereller .container-fluidfor å sentrere og legge navigasjonslinjens innhold.

I motsetning til .navbar-fixed-*klassene, trenger du ikke å endre noen polstring på body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Endre utseendet til navigasjonslinjen ved å legge til .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Brødsmuler

Angi gjeldende sides plassering i et navigasjonshierarki.

Separatorer legges automatisk til i CSS gjennom :beforeog content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Paginering

Oppgi pagineringskoblinger for nettstedet eller appen din med flersides pagineringskomponenten, eller det enklere personsøkeralternativet .

Standard paginering

Enkel paginering inspirert av Rdio, flott for apper og søkeresultater. Den store blokken er vanskelig å gå glipp av, lett skalerbar og gir store klikkområder.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Merking av pagineringskomponenten

Pagineringskomponenten bør pakkes inn i et <nav>element for å identifisere den som en navigasjonsdel for skjermlesere og andre hjelpeteknologier. I tillegg, siden en side sannsynligvis har mer enn én slik navigasjonsseksjon allerede (for eksempel den primære navigasjonen i overskriften eller en sidebarnavigasjon), er det tilrådelig å gi en beskrivelse aria-labelfor den <nav>som gjenspeiler formålet. Hvis for eksempel pagineringskomponenten brukes til å navigere mellom et sett med søkeresultater, kan en passende etikett være aria-label="Search results pages".

Deaktivert og aktiv tilstand

Lenker kan tilpasses for ulike omstendigheter. Bruk .disabledfor uklikkbare lenker og .activefor å indikere gjeldende side.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Vi anbefaler at du bytter ut aktive eller deaktiverte ankere med <span>, eller utelater ankeret i tilfelle av forrige/neste piler, for å fjerne klikkfunksjonalitet mens du beholder tiltenkte stiler.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Dimensjonering

Lyst på større eller mindre paginering? Legg til .pagination-lgeller .pagination-smfor flere størrelser.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Personsøker

Raske forrige og neste lenker for enkle pagineringsimplementeringer med lett markering og stiler. Det er flott for enkle nettsteder som blogger eller magasiner.

Standard eksempel

Som standard sentrerer personsøkeren lenker.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Justerte lenker

Alternativt kan du justere hver lenke til sidene:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Valgfri deaktivert tilstand

Personsøkerkoblinger bruker også den generelle .disabledverktøyklassen fra pagineringen.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Eksempel

Eksempeloverskrift Ny

<h3>Example heading <span class="label label-default">New</span></h3>

Tilgjengelige varianter

Legg til en av de nedenfor nevnte modifikatorklassene for å endre utseendet til en etikett.

Standard primær suksessinfo Advarsel Fare _

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Har du tonnevis av etiketter?

Gjengivelsesproblemer kan oppstå når du har dusinvis av innebygde etiketter i en smal beholder, som hver inneholder sitt eget inline-blockelement (som et ikon). Veien rundt dette er innstilling display: inline-block;. For kontekst og et eksempel, se #13219 .

Fremhev enkelt nye eller uleste elementer ved å legge <span class="badge">til lenker, Bootstrap-navigasjoner og mer.

Innboks42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Selv kollapser

Når det ikke er noen nye eller uleste elementer, vil merkene ganske enkelt kollapse (via CSS- :emptyvelgeren) forutsatt at det ikke finnes noe innhold i dem.

Kompatibilitet på tvers av nettlesere

Merker vil ikke selv kollapse i Internet Explorer 8 fordi den mangler støtte for :emptyvelgeren.

Tilpasser seg aktive nav-tilstander

Innebygde stiler er inkludert for å plassere merker i aktive tilstander i pillenavigering.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

En lett, fleksibel komponent som valgfritt kan utvide hele visningsporten for å vise frem viktig innhold på nettstedet ditt.

Hei Verden!

Dette er en enkel helteenhet, en enkel jumbotron-stil komponent for å vekke ekstra oppmerksomhet til fremhevet innhold eller informasjon.

Lære mer

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

For å gjøre jumbotronen i full bredde, og uten avrundede hjørner, plasser den utenfor alle .containers og legg i stedet til en .containerinnenfor.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Et enkelt skall for en h1passende plassering og segmentering av deler av innholdet på en side. Den kan bruke standardelementet h1's small, så vel som de fleste andre komponenter (med ekstra stiler).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Utvid Bootstraps rutenettsystem med miniatyrbildekomponenten for enkelt å vise rutenett med bilder, videoer, tekst og mer.

Hvis du leter etter Pinterest-lignende presentasjon av miniatyrbilder av varierende høyder og/eller bredder, må du bruke en tredjeparts plugin som Masonry , Isotope eller Salvattore .

Standard eksempel

Som standard er Bootstraps miniatyrbilder utformet for å vise frem koblede bilder med minimal nødvendig markering.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Egendefinert innhold

Med litt ekstra markering er det mulig å legge til alle slags HTML-innhold som overskrifter, avsnitt eller knapper i miniatyrbilder.

Miniatyrbildeetikett

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Knapp Knapp

Miniatyrbildeetikett

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Knapp Knapp

Miniatyrbildeetikett

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Knapp Knapp

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Gi kontekstuelle tilbakemeldingsmeldinger for typiske brukerhandlinger med en håndfull tilgjengelige og fleksible varslingsmeldinger.

Eksempler

Pakk inn hvilken som helst tekst og en valgfri avvisningsknapp i .alertog en av de fire kontekstuelle klassene (f.eks. .alert-success) for grunnleggende varselmeldinger.

Ingen standardklasse

Varsler har ikke standardklasser, bare basis- og modifikasjonsklasser. Et standard grått varsel gir ikke så mye mening, så du må spesifisere en type via kontekstuell klasse. Velg mellom suksess, info, advarsel eller fare.

Bra gjort! Du har lest denne viktige varselmeldingen.

Vær oppmerksom! Dette varselet trenger din oppmerksomhet, men det er ikke superviktig.

Advarsel! Bedre sjekk deg selv, du ser ikke for bra ut.

Oh Snap! Endre noen ting og prøv å sende inn på nytt.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Avvisbare varsler

Bygg videre på ethvert varsel ved å legge til en valgfri .alert-dismissibleog lukkeknapp.

Krever JavaScript-varslingsplugin

For fullt fungerende varsler som kan avvises, må du bruke JavaScript-pluginen for varsler .

Advarsel! Bedre sjekk deg selv, du ser ikke for bra ut.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Sørg for riktig oppførsel på tvers av alle enheter

Sørg for å bruke <button>elementet med data-dismiss="alert"dataattributtet.

Lenker i varsler

Bruk .alert-linkverktøyklassen for raskt å gi matchende fargede lenker i ethvert varsel.

Bra gjort! Du har lest denne viktige varselmeldingen .

Vær oppmerksom! Dette varselet trenger din oppmerksomhet , men det er ikke superviktig.

Advarsel! Bedre sjekk deg selv, du ser ikke for bra ut .

Oh Snap! Endre noen ting og prøv å sende inn på nytt.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Gi oppdatert tilbakemelding om fremdriften til en arbeidsflyt eller handling med enkle, men fleksible fremdriftslinjer.

Kompatibilitet på tvers av nettlesere

Fremdriftslinjer bruker CSS3-overganger og animasjoner for å oppnå noen av effektene. Disse funksjonene støttes ikke i Internet Explorer 9 og eldre eller eldre versjoner av Firefox. Opera 12 støtter ikke animasjoner.

Content Security Policy (CSP) kompatibilitet

Hvis nettstedet ditt har en innholdssikkerhetspolicy (CSP) som ikke tillater style-src 'unsafe-inline', vil du ikke kunne bruke innebygde styleattributter for å angi fremdriftslinjens bredder som vist i eksemplene nedenfor. Alternative metoder for å angi bredder som er kompatible med strenge CSP-er inkluderer bruk av litt tilpasset JavaScript (som setter element.style.width) eller bruk av tilpassede CSS-klasser.

Grunnleggende eksempel

Standard fremdriftslinje.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Med merkelapp

Fjern <span>med .sr-only-klassen fra fremdriftslinjen for å vise en synlig prosentandel.

60 %

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

For å sikre at etikettteksten forblir lesbar selv for lave prosenter, bør du vurdere å legge til a min-widthi fremdriftslinjen.

0 %

2 %

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Kontekstuelle alternativer

Fremdriftslinjer bruker noen av de samme knappe- og varslingsklassene for konsekvente stiler.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Stripete

Bruker en gradient for å lage en stripete effekt. Ikke tilgjengelig i IE9 og under.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animert

Legg .activetil .progress-bar-stripedfor å animere stripene fra høyre mot venstre. Ikke tilgjengelig i IE9 og under.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Stablet

Plasser flere stenger i samme .progressfor å stable dem.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Abstrakte objektstiler for å bygge ulike typer komponenter (som bloggkommentarer, tweets osv.) som har et venstre- eller høyrejustert bilde sammen med tekstinnhold.

Standard media

Standardmediet viser et medieobjekt (bilder, video, lyd) til venstre eller høyre for en innholdsblokk.

Medieoverskrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.

Medieoverskrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.

Nestet medieoverskrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.

Medieoverskrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis.

Medieoverskrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Klassene .pull-leftog .pull-righteksisterer også og ble tidligere brukt som en del av mediekomponenten, men er avviklet for den bruken fra og med v3.3.0. De er omtrent likeverdige med .media-leftog .media-right, bortsett fra at de .media-rightskal plasseres etter .media-bodyi html-en.

Mediejustering

Bildene eller andre medier kan justeres øverst, midt eller nederst. Standard er toppjustert.

Toppjustert media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Midtjustert media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bunnjustert media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Medieliste

Med litt ekstra markering kan du bruke media inne i listen (nyttig for kommentartråder eller artikkellister).

Medieoverskrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis.

Nestet medieoverskrift
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis.

Nestet medieoverskrift
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis.

Nestet medieoverskrift
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Listegrupper er en fleksibel og kraftig komponent for å vise ikke bare enkle lister over elementer, men komplekse med tilpasset innhold.

Grunnleggende eksempel

Den mest grunnleggende listegruppen er ganske enkelt en uordnet liste med listeelementer og de riktige klassene. Bygg på det med alternativene som følger, eller din egen CSS etter behov.

Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Porta ac consectetur ac
Vestibulum ved eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Merker

Legg merkekomponenten til et hvilket som helst listegruppeelement, og det vil automatisk bli plassert til høyre.

14Cras justo odio
2Dapibus ac facilisis i
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Koblede elementer

Koble listegruppeelementer ved å bruke ankertagger i stedet for listeelementer (det betyr også en forelder <div>i stedet for en <ul>). Ingen behov for individuelle foreldre rundt hvert element.

Cras justo odio Dapibus ac facilisis i Morbi leo risus Porta ac consectetur ac Vestibulum ved eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Knappeelementer

Listegruppeelementer kan være knapper i stedet for listeelementer (det betyr også en forelder <div>i stedet for en <ul>). Ingen behov for individuelle foreldre rundt hvert element. Ikke bruk standardklassene .btnher.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Deaktiverte elementer

Legg .disabledtil en .list-group-itemfor å gråne den for å se deaktivert.

Cras justo odio Dapibus ac facilisis i Morbi leo risus Porta ac consectetur ac Vestibulum ved eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Kontekstuelle klasser

Bruk kontekstuelle klasser for å style listeelementer, standard eller koblede. Inkluderer også .activestaten.

Dapibus ac facilisis i
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum ved eros

Dapibus ac facilisis i Cras sit amet nibh libero Porta ac consectetur ac Vestibulum ved eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Egendefinert innhold

Legg til nesten hvilken som helst HTML innenfor, selv for koblede listegrupper som den nedenfor.

Listegruppeelementoverskrift

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Listegruppeelementoverskrift

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Listegruppeelementoverskrift

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Selv om det ikke alltid er nødvendig, må du noen ganger legge DOM-en din i en boks. For slike situasjoner, prøv panelkomponenten.

Grunnleggende eksempel

Som standard er alt du .paneltrenger å bruke noen grunnleggende kantlinjer og polstring for å inneholde noe innhold.

Grunnleggende paneleksempel

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel med overskrift

Legg enkelt til en overskriftsbeholder til panelet ditt med .panel-heading. Du kan også inkludere hvilken som helst <h1>- <h6>med en .panel-titleklasse for å legge til en forhåndsstilt overskrift. Imidlertid overstyres skriftstørrelsene til <h1>- av .<h6>.panel-heading

For riktig koblingsfarging, sørg for å plassere lenker i overskrifter i .panel-title.

Paneloverskrift uten tittel

Panelinnhold

Paneltittel

Panelinnhold

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel med bunntekst

Pakk inn knapper eller sekundær tekst i .panel-footer. Vær oppmerksom på at panelbunntekst ikke arver farger og kanter når du bruker kontekstuelle variasjoner, da de ikke er ment å være i forgrunnen.

Panelinnhold

Panelbunntekst

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Kontekstuelle alternativer

Som andre komponenter kan du enkelt gjøre et panel mer meningsfullt for en bestemt kontekst ved å legge til en av de kontekstuelle tilstandsklassene.

Paneltittel

Panelinnhold

Paneltittel

Panelinnhold

Paneltittel

Panelinnhold

Paneltittel

Panelinnhold

Paneltittel

Panelinnhold

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Med bord

Legg til ethvert panel uten grenser .tablefor en sømløs design. Hvis det er en .panel-body, legger vi til en ekstra kant til toppen av tabellen for separasjon.

Paneloverskrift

Noe standard panelinnhold her. Nulla vitae elit libero, en pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Fornavn	Etternavn	Brukernavn
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Hvis det ikke er noen paneltekst, flyttes komponenten fra paneloverskrift til tabell uten avbrudd.

Paneloverskrift

#	Fornavn	Etternavn	Brukernavn
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Med listegrupper

Inkluder enkelt listegrupper i full bredde i et panel.

Paneloverskrift

Noe standard panelinnhold her. Nulla vitae elit libero, en pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Porta ac consectetur ac
Vestibulum ved eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Tillat nettlesere å bestemme video- eller lysbildefremvisningsdimensjoner basert på bredden på blokken deres ved å lage et iboende forhold som skaleres riktig på alle enheter.

Regler brukes direkte på <iframe>, <embed>, <video>, og <object>elementer; bruk eventuelt en eksplisitt etterkommerklasse .embed-responsive-itemnår du vil matche stilen for andre attributter.

Pro-tips! Du trenger ikke å inkludere frameborder="0"i dine <iframe>s, da vi overstyrer det for deg.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Standard brønn

Bruk brønnen som en enkel effekt på et element for å gi det en innfelt effekt.

Se, jeg er i en brønn!

<div class="well">...</div>

Valgfrie klasser

Kontrollpolstring og avrundede hjørner med to valgfrie modifikasjonsklasser.

Se, jeg er i en stor brønn!

<div class="well well-lg">...</div>

Se, jeg er i en liten brønn!

<div class="well well-sm">...</div>

Komponenter

Glyfikoner

Tilgjengelige glyfer

Hvordan å bruke

Ikke bland med andre komponenter

Kun til bruk på tomme elementer

Endre plassering av ikonets skrifttype

Tilgjengelige ikoner

Eksempler

Rullegardiner

Eksempel

Justering

Kan kreve ytterligere posisjonering

Utdatert .pull-rightjustering

Overskrifter

Deler

Deaktiverte menyelementer

Knappegrupper

Verktøytips og popovers i knappegrupper krever spesielle innstillinger

Sørg for riktig roleog gi en etikett

Grunnleggende eksempel

Knappverktøylinje

Dimensjonering

Hekking

Vertikal variasjon

Justerte knappegrupper

Håndtering av grenser

IE8 og grenser

Med <a>elementer

Lenker som fungerer som knapper

Med <button>elementer

Nedtrekkslister for knapper

Plugin-avhengighet

En knapp rullegardinmeny

Rullegardiner for delt knapp

Dimensjonering

Dropup-variasjon

Inndatagrupper

Kun tekstlige <input>s

Verktøytips og popovers i inndatagrupper krever spesielle innstillinger

Ikke bland med andre komponenter

Legg alltid til etiketter

Grunnleggende eksempel

Dimensjonering

Avmerkingsbokser og radiotillegg

Knapptillegg

Knapper med rullegardiner

Segmenterte knapper

Flere knapper

Navs

Bruk av nav for fanepaneler krever JavaScript-tabs-plugin

Gjør nav som brukes som navigasjon tilgjengelig

Faner

Piller

Begrunnet

Safari og responsive begrunnede navigasjoner

Deaktiverte lenker

Koblingsfunksjonalitet er ikke påvirket

Bruker rullegardinmenyene

Faner med rullegardiner

Piller med dropdowns

Navbar

Standard navigasjonslinje

Overfylt innhold

Krever JavaScript-plugin

Endre brytepunktet for den skjulte mobilnavigasjonslinjen

Gjør navbarer tilgjengelige

Varemerke

Skjemaer

Forbehold for mobilenheter

Legg alltid til etiketter

Knapper

Kontekstspesifikk bruk

Tekst

Ikke-nav-lenker

Komponentjustering

Høyrejustering av flere komponenter

Festet til toppen

Kroppspolstring kreves

Festet til bunnen

Utdatert `.pull-right`justering

Sørg for riktig `role`og gi en etikett

Med `<a>`elementer

Med `<button>`elementer

Kun tekstlige `<input>`s