Tilgængelige glyffer

Indeholder over 250 glyffer i skrifttypeformat fra Glyphicon Halflings-sættet. Glyphicons Halflings er normalt ikke tilgængelige gratis, men deres skaber har gjort dem tilgængelige for Bootstrap gratis. Som tak beder vi kun om, at du inkluderer et link tilbage til Glyphicons , når det er muligt.

glyphicon glyphicon-stjerne
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-sky
glyphicon glyphicon-konvolut
glyphicon glyphicon-blyant
glyphicon glyphicon-glas
glyphicon glyphicon-musik
glyphicon glyphicon-søgning
glyphicon glyphicon-hjerte
glyphicon glyphicon-stjerne
glyphicon glyphicon-stjerne-tom
glyphicon glyphicon-bruger
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-tandhjul
glyphicon glyphicon-trash
glyphicon glyphicon-hjem
glyphicon glyphicon-fil
glyphicon glyphicon-tid
glyphicon glyphicon-vej
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-indbakke
glyphicon glyphicon-lege-cirkel
glyphicon glyphicon-gentag
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lås
glyphicon glyphicon-flag
glyphicon glyphicon-hovedtelefoner
glyphicon glyphicon-volume-off
glyphicon glyphicon-volumen-ned
glyphicon glyphicon-volumen-op
glyphicon glyphicon-qrcode
glyphicon glyphicon-stregkode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-bog
glyphicon glyphicon-bogmærke
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-fed
glyphicon glyphicon-kursiv
glyphicon glyphicon-tekst-højde
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-indent-venstre
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-billede
glyphicon glyphicon-map-marker
glyphicon glyphicon-juster
glyphicon glyphicon-farve
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-tjek
glyphicon glyphicon-move
glyphicon glyphicon-skridt-tilbage
glyphicon glyphicon-hurtigt-bagud
glyphicon glyphicon-bagud
glyphicon glyphicon-spil
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-spol frem
glyphicon glyphicon-skridt-fremad
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-venstre
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-tegn
glyphicon glyphicon-minus-tegn
glyphicon glyphicon-fjern-tegn
glyphicon glyphicon-ok-tegn
glyphicon glyphicon-spørgsmål-tegn
glyphicon glyphicon-info-skilt
glyphicon glyphicon-skærmbillede
glyphicon glyphicon-fjern-cirkel
glyphicon glyphicon-ok-cirkel
glyphicon glyphicon-ban-cirkel
glyphicon glyphicon-pil-venstre
glyphicon glyphicon-pil-højre
glyphicon glyphicon-pil op
glyphicon glyphicon-pil ned
glyphicon glyphicon-share-alt
glyphicon glyphicon-ændre størrelse-fuld
glyphicon glyphicon-ændre størrelse-lille
glyphicon glyphicon-udråbstegn
glyphicon glyphicon-gave
glyphicon glyphicon-blad
glyphicon glyphicon-ild
glyphicon glyphicon-øje-åben
glyphicon glyphicon-øje-luk
glyphicon glyphicon-advarselsskilt
glyphicon glyphicon-plan
glyphicon glyphicon-kalender
glyphicon glyphicon-tilfældig
glyphicon glyphicon-kommentar
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-indkøbsvogn
glyphicon glyphicon-mappe-luk
glyphicon glyphicon-mappe-åben
glyphicon glyphicon-ændre størrelse-lodret
glyphicon glyphicon-ændre størrelse-vandret
glyphicon glyphicon-hdd
glyphicon glyphicon-tyrehorn
glyphicon glyphicon-klokke
glyphicon glyphicon-certifikat
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hånd-højre
glyphicon glyphicon-hånd-venstre
glyphicon glyphicon-hånd-op
glyphicon glyphicon-hånd-ned
glyphicon glyphicon-cirkel-pil-højre
glyphicon glyphicon-cirkel-pil-venstre
glyphicon glyphicon-cirkel-pil-op
glyphicon glyphicon-cirkel-pil-ned
glyphicon glyphicon-klode
glyphicon glyphicon-nøgle
glyphicon glyphicon-opgaver
glyphicon glyphicon-filter
glyphicon glyphicon-mappe
glyphicon glyphicon-fuldskærm
glyphicon glyphicon-dashboard
glyphicon glyphicon-papirclips
glyphicon glyphicon-hjerte-tom
glyphicon glyphicon-link
glyphicon glyphicon-telefon
glyphicon glyphicon-nål
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sortér-efter-alfabet
glyphicon glyphicon-sortér-efter-alfabet-alt
glyphicon glyphicon-sorteret-efter-rækkefølge
glyphicon glyphicon-sort-efter-rækkefølge-alt
glyphicon glyphicon-sort-efter-attributter
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-ikke markeret
glyphicon glyphicon-expand
glyphicon glyphicon-kollaps-ned
glyphicon glyphicon-kollaps-op
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-nyt-vindue
glyphicon glyphicon-record
glyphicon glyphicon-gem
glyphicon glyphicon-åben
glyphicon glyphicon-gemt
glyphicon glyphicon-import
glyphicon glyphicon-eksport
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-gemt
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-kreditkort
glyphicon glyphicon-overførsel
glyphicon glyphicon-bestik
glyphicon glyphicon-header
glyphicon glyphicon-komprimeret
glyphicon glyphicon-øretelefon
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tårn
glyphicon glyphicon-stats
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-mærke
glyphicon glyphicon-registreringsmærke
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-træ-nåletræ
glyphicon glyphicon-træ-løvfældende
glyphicon glyphicon-cd
glyphicon glyphicon-gem-fil
glyphicon glyphicon-open-file
glyphicon glyphicon-niveau op
glyphicon glyphicon-kopi
glyphicon glyphicon-pasta
glyphicon glyphicon-advarsel
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-æble
glyphicon glyphicon-sletning
glyphicon glyphicon-timeglas
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-ispind
glyphicon glyphicon-is-pind-smag
glyphicon glyphicon-uddannelse
glyphicon glyphicon-option-horisontal
glyphicon glyphicon-option-vertikal
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-vindue
glyphicon glyphicon-olie
glyphicon glyphicon-korn
glyphicon glyphicon-solbriller
glyphicon glyphicon-tekst-størrelse
glyphicon glyphicon-tekst-farve
glyphicon glyphicon-tekst-baggrund
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-objekt-align-horisontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-trekant-højre
glyphicon glyphicon-trekant-venstre
glyphicon glyphicon-trekant-bund
glyphicon glyphicon-trekant-top
glyphicon glyphicon-konsol
glyphicon glyphicon-overskrift
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-venstre
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-ned
glyphicon glyphicon-menu-op

Sådan bruges

Af præstationsmæssige årsager kræver alle ikoner en basisklasse og individuel ikonklasse. For at bruge skal du placere følgende kode stort set hvor som helst. Sørg for at efterlade et mellemrum mellem ikonet og teksten for korrekt udfyldning.

Bland ikke med andre komponenter

Ikonklasser kan ikke kombineres direkte med andre komponenter. De bør ikke bruges sammen med andre klasser på det samme element. Tilføj i stedet en indlejret <span>og anvende ikonklasserne på <span>.

Kun til brug på tomme elementer

Ikonklasser bør kun bruges på elementer, der ikke indeholder noget tekstindhold og ikke har underordnede elementer.

Ændring af ikonets skrifttypeplacering

Bootstrap antager, at ikonskrifttypefiler vil være placeret i ../fonts/mappen i forhold til de kompilerede CSS-filer. Flytning eller omdøbning af disse skrifttypefiler betyder at opdatere CSS'en på en af tre måder:

Skift variablerne @icon-font-pathog/eller @icon-font-namei kilden Mindre filer.
Brug muligheden for relative URL'er fra Less-kompileren.
Skift url()stierne i den kompilerede CSS.

Brug den mulighed, der passer bedst til din specifikke udviklingsopsætning.

Tilgængelige ikoner

Moderne versioner af hjælpeteknologier vil annoncere CSS-genereret indhold, såvel som specifikke Unicode-tegn. For at undgå utilsigtet og forvirrende output i skærmlæsere (især når ikoner udelukkende bruges til dekoration), skjuler vi dem med aria-hidden="true"attributten.

Hvis du bruger et ikon til at formidle mening (i stedet for kun som et dekorativt element), skal du sikre dig, at denne betydning også formidles til hjælpeteknologier – for eksempel inkludere yderligere indhold, visuelt skjult med .sr-onlyklassen.

Hvis du opretter kontrolelementer uden anden tekst (såsom en <button>, der kun indeholder et ikon), bør du altid levere alternativt indhold for at identificere formålet med kontrolelementet, så det giver mening for brugere af hjælpeteknologier. I dette tilfælde kan du tilføje en aria-labelattribut på selve kontrolelementet.

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

Eksempler

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

<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, der bruges i en advarsel til at formidle, at det er en fejlmeddelelse, med yderligere .sr-onlytekst for at formidle dette tip til brugere af hjælpeteknologier.

Indtast en gyldig email addresse

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

Skiftbar, kontekstmenu til visning af lister over links. Gjorde interaktiv med dropdown JavaScript-plugin .

Eksempel

Pak rullemenuens udløser og rullemenuen i .dropdown, eller et andet element, der erklærer position: relative;. Tilføj derefter menuens 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>

Dropdown-menuer kan ændres til at udvide opad (i stedet for nedad) ved at tilføje .dropuptil forælderen.

<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 placeres en rullemenu automatisk 100 % fra toppen og langs venstre side af dens forælder. Føj .dropdown-menu-righttil en .dropdown-menuhøjrejuster rullemenuen.

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

Overskrifter

Tilføj en overskrift til at mærke sektioner af handlinger i enhver rullemenu.

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

Afdeler

Tilføj en skillelinje til separate serier af links i en rullemenu.

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

Deaktiverede menupunkter

Tilføj .disabledtil en <li>i rullemenuen for at deaktivere linket.

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

Gruppér en række knapper sammen på en enkelt linje med knapgruppen. Tilføj valgfri JavaScript-radio og afkrydsningsfeltstiladfærd med vores knapper-plugin .

Værktøjstip og popovers i knapgrupper kræver specielle indstillinger

Når du bruger værktøjstip eller popovers på elementer i en .btn-group, skal du angive muligheden container: 'body'for at undgå uønskede bivirkninger (såsom elementet bliver bredere og/eller mister dets afrundede hjørner, når værktøjstip eller popover udløses).

Sørg for korrekt `role`og giv en etiket

For at hjælpeteknologier – såsom skærmlæsere – kan formidle, at en række knapper er grupperet, roleskal der angives en passende egenskab. For knapgrupper vil dette være role="group", mens værktøjslinjer skal have en role="toolbar".

En undtagelse er grupper, der kun indeholder en enkelt kontrol (f.eks. de berettigede knapgrupper med <button>elementer) eller en dropdown.

Derudover bør grupper og værktøjslinjer have en eksplicit etiket, da de fleste hjælpeteknologier ellers ikke vil annoncere dem på trods af tilstedeværelsen af den korrekte roleegenskab. I eksemplerne her bruger vi aria-label, men alternativer som f.eks. aria-labelledbykan også bruges.

Grundlæggende eksempel

Pak en række knapper ind .btnmed .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 sæt <div class="btn-group">til en <div class="btn-toolbar">for mere 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>

Dimensionering

I stedet for at anvende knapstørrelsesklasser på hver knap i en gruppe, skal du bare tilføje .btn-group-*til hver .btn-group, også når du indlejrer 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>

Indlejring

Placer en .btn-groupi en anden .btn-group, når du vil have rullemenuer blandet med en række 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>

Lodret variation

Få et sæt knapper til at se ud lodret stablet i stedet for vandret. Rullemenuer med splitknap understøttes ikke her.

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

Justerede knapgrupper

Få en gruppe knapper til at strække sig i lige store størrelser, så de spænder over hele dens forælders bredde. Fungerer også med knap dropdowns i knapgruppen.

Håndtering af grænser

På grund af den specifikke HTML og CSS, der bruges til at retfærdiggøre knapper (nemlig display: table-cell), er grænserne mellem dem fordoblet. I almindelige knapgrupper, margin-left: -1pxbruges til at stable kanterne i stedet for at fjerne dem. Virker margindog ikke med display: table-cell. Som et resultat, afhængigt af dine tilpasninger til Bootstrap, kan du ønske at fjerne eller omfarve kanterne.

IE8 og grænser

Internet Explorer 8 gengiver ikke kanter på knapper i en justeret knapgruppe, uanset om den er tændt <a>eller <button>elementer. For at komme uden om det, pak hver knap ind i en anden .btn-group.

Se #12476 for mere information.

Med `<a>`elementer

Pak bare en række .btns ind .btn-group.btn-group-justified.

Venstre Midten Ret

Venstre Midten

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

Links, der fungerer som knapper

Hvis <a>elementerne bruges til at fungere som knapper – der udløser funktionalitet på siden, i stedet for at navigere til et andet dokument eller afsnit på den aktuelle side – skal de også have en passende role="button".

Med `<button>`elementer

For at bruge justerede knapgrupper med <button>elementer, skal du pakke hver knap ind i en knapgruppe . De fleste browsere anvender ikke vores CSS korrekt til begrundelse for <button>elementer, men da vi understøtter dropdown-knapper, 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>

Brug en hvilken som helst knap til at udløse en rullemenu ved at placere den i en .btn-groupog give den korrekte menumarkering.

Plugin-afhængighed

Knap-dropdowns kræver, at dropdown-pluginet er inkluderet i din version af Bootstrap.

Enkeltknap rullemenuer

Gør en knap til en rullemenu med nogle grundlæggende markup-ændringer.

<!-- 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>

Rullemenuer med splitknap

På samme måde kan du oprette rullemenuer med delt knap med de samme markupændringer, kun med en separat knap.

<!-- 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>

Dimensionering

Knap dropdowns 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 variation

Udløs rullemenuer over elementer ved at tilføje .dropuptil det 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>

Udvid formularkontrolelementerne ved at tilføje tekst eller knapper før, efter eller på begge sider af en tekstbaseret <input>. Brug .input-groupsammen med en .input-group-addoneller .input-group-btntil at tilføje eller tilføje elementer til en enkelt .form-control.

Kun tekstlige `<input>`s

Undgå at bruge <select>elementer her, da de ikke kan styles fuldt ud i WebKit-browsere.

Undgå at bruge <textarea>elementer her, da deres rowsegenskaber ikke vil blive respekteret i nogle tilfælde.

Værktøjstip og popovers i inputgrupper kræver specielle indstillinger

Når du bruger værktøjstip eller popovers på elementer i en .input-group, skal du angive muligheden container: 'body'for at undgå uønskede bivirkninger (såsom elementet bliver bredere og/eller mister dets afrundede hjørner, når værktøjstip eller popover udløses).

Bland ikke med andre komponenter

Bland ikke formulargrupper eller gitterkolonneklasser direkte med inputgrupper. Indlejr i stedet inputgruppen inde i formulargruppen eller det gitterrelaterede element.

Tilføj altid etiketter

Skærmlæsere vil have problemer med dine formularer, hvis du ikke inkluderer en etiket for hver input. For disse inputgrupper skal du sikre, at enhver yderligere etiket eller funktionalitet overføres til hjælpeteknologier.

Den nøjagtige teknik, der skal bruges (synlige <label>elementer, <label>elementer skjult ved hjælp af .sr-onlyklassen eller brug af aria-label, aria-labelledby, aria-describedbyeller attributten) titleog placeholderhvilke yderligere oplysninger, der skal formidles, vil variere afhængigt af den nøjagtige type interface-widget, du implementerer. Eksemplerne i dette afsnit giver et par foreslåede, case-specifikke tilgange.

Grundlæggende eksempel

Placer én tilføjelse eller knap på hver side af en input. Du kan også placere en på begge sider af et input.

Vi understøtter ikke flere tilføjelser ( .input-group-addoneller .input-group-btn) på en enkelt side.

Vi understøtter ikke flere formularkontrolelementer i en enkelt inputgruppe.

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

Dimensionering

Føj de relative formstørrelsesklasser til sig .input-groupselv, og indholdet indenfor vil automatisk ændre størrelsen – det er ikke nødvendigt at gentage formkontrolstørrelsesklasserne 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>

Afkrydsningsfelter og radiotilføjelser

Placer et afkrydsningsfelt eller radioindstilling i en inputgruppes tilføjelse 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 -->

Knap tilføjelser

Knapper i inputgrupper er lidt forskellige og kræver et ekstra niveau af indlejring. I stedet for .input-group-addonskal du bruge til .input-group-btnat pakke knapperne ind. Dette er påkrævet på grund af standardbrowserstile, der ikke kan tilsidesættes.

<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 dropdowns

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

Segmenterede 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

Selvom du kun kan have én tilføjelse pr. side, kan du have flere knapper inde 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 tilgængelige i Bootstrap har delt opmærkning, startende med basisklassen .nav, såvel som delte tilstande. Skift modifikatorklasser for at skifte mellem hver stil.

Brug af navs til fanepaneler kræver JavaScript-faner-plugin

For faner med tabuleringsområder skal du bruge faneblads JavaScript-plugin . Markup'et vil også kræve yderligere roleog ARIA-attributter – se plugin's eksempelmarkup for yderligere detaljer.

Gør navs, der bruges som navigation, tilgængelige

Hvis du bruger nav'er til at levere en navigationslinje, skal du sørge for at tilføje en role="navigation"til den mest logiske overordnede container for <ul>, eller omslutte et <nav>element omkring hele navigationen. Tilføj ikke rollen til sig <ul>selv, da dette ville forhindre den i at blive annonceret som en faktisk liste af hjælpeteknologier.

Faner

Bemærk, at .nav-tabsklassen kræver .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

Tag den samme HTML, men brug .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 lodret. Bare tilføj .nav-stacked.

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

Berettiget

Gør nemt faner eller piller til lige store bredder af deres forældre på skærme, der er bredere end 768px med .nav-justified. På mindre skærme er nav-linkene stablet.

Begrundede navbar nav-links understøttes ikke i øjeblikket.

Safari og responsive berettigede nav

Fra v9.1.2 udviser Safari en fejl, hvor ændring af størrelsen på din browser vandret forårsager gengivelsesfejl i den berettigede nav, som slettes ved opdatering. Denne fejl er også vist i det berettigede nav-eksempel .

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

Deaktiverede links

For enhver nav-komponent (faner eller piller), tilføj .disabledfor grå links og ingen hover-effekter .

Linkfunktionaliteten er ikke påvirket

Denne klasse ændrer kun <a>'s udseende, ikke dens funktionalitet. Brug tilpasset JavaScript til at deaktivere links her.

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

Brug af dropdowns

Tilføj dropdown menuer med lidt ekstra HTML og dropdowns JavaScript plugin .

Faner med rullemenuer

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

Navbars er responsive metakomponenter, der fungerer som navigationsoverskrifter for din applikation eller dit websted. De begynder at klappe sammen (og kan skiftes) i mobilvisninger og bliver vandrette, efterhånden som den tilgængelige visningsportsbredde øges.

Begrundede navbar nav-links understøttes ikke i øjeblikket.

Overfyldt indhold

Da Bootstrap ikke ved, hvor meget plads indholdet i din navbar har brug for, kan du løbe ind i problemer med indholdsindpakning i en anden række. For at løse dette kan du:

Reducer mængden eller bredden af navbar-elementer.
Skjul bestemte navbar-elementer ved bestemte skærmstørrelser ved hjælp af responsive hjælpeklasser .
Skift det punkt, hvor din navbar skifter mellem sammenklappet og vandret tilstand. Tilpas @grid-float-breakpointvariablen eller tilføj din egen medieforespørgsel.

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

Erstat navbar-mærket med dit eget billede ved at bytte teksten ud med en <img>. Da den .navbar-brandhar sin egen polstring og højde, skal du muligvis tilsidesætte noget CSS afhængigt af dit billede.

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

Placer formularindhold indeni .navbar-formfor korrekt lodret justering og sammenklappet adfærd i smalle visningsporte. Brug justeringsindstillingerne til at bestemme, hvor det er i navbarens indhold.

Som en heads up, .navbar-formdeler meget af sin kode med .form-inlinevia mixin. Nogle formularkontrolelementer, som inputgrupper, kan kræve, at faste bredder vises korrekt i en navbar.

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

Tilføj altid etiketter

Skærmlæsere vil have problemer med dine formularer, hvis du ikke inkluderer en etiket for hver input. For disse indlejrede formularer kan du skjule etiketterne ved hjælp af .sr-onlyklassen. Der er yderligere alternative metoder til at give en etiket for hjælpeteknologier, såsom aria-label, aria-labelledbyeller titleattributten. Hvis ingen af disse er til stede, kan skærmlæsere ty til at bruge placeholderattributten, hvis den findes, men bemærk, at brug af placeholdersom erstatning for andre mærkningsmetoder ikke tilrådes.

Tilføj .navbar-btnklassen til <button>elementer, der ikke findes i a <form>for at centrere dem lodret i navigeringslinjen.

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

Ombryd tekststrenge i et element med .navbar-text, normalt på et <p>tag for at få den rigtige linjeføring og farve.

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

For folk, der bruger standardlinks, der ikke er inden for den almindelige navigeringskomponent, skal du bruge .navbar-linkklassen til at tilføje de korrekte farver til standard- og omvendte navbar-indstillinger.

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

Juster nav-links, formularer, knapper eller tekst ved hjælp af hjælpeklasserne .navbar-lefteller . .navbar-rightBegge klasser vil tilføje en CSS-float i den angivne retning. For at justere nav-links skal du f.eks. placere dem i en separat <ul>med den respektive hjælpeklasse anvendt.

Disse klasser er blandede versioner af .pull-leftog .pull-right, men de er rettet mod medieforespørgsler for lettere håndtering af navbar-komponenter på tværs af enhedsstørrelser.

Tilføj .navbar-fixed-topog medtag et .containereller .container-fluidtil center- og padnavigationslinjeindhold.

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

Kropspolstring påkrævet

Den faste navbar vil overlejre dit andet indhold, medmindre du tilføjer paddingtil toppen af <body>. Prøv dine egne værdier eller brug vores uddrag nedenfor. Tip: Som standard er navigationslinjen 50px høj.

body { padding-top: 70px; }

Sørg for at inkludere dette efter kerne Bootstrap CSS.

Tilføj .navbar-fixed-bottomog medtag et .containereller .container-fluidtil center- og padnavigationslinjeindhold.

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

Kropspolstring påkrævet

Den faste navbar vil overlejre dit andet indhold, medmindre du tilføjer paddingtil bunden af <body>. Prøv dine egne værdier eller brug vores uddrag nedenfor. Tip: Som standard er navigationslinjen 50px høj.

body { padding-bottom: 70px; }

Sørg for at inkludere dette efter kerne Bootstrap CSS.

Opret en navigeringslinje i fuld bredde, der ruller væk med siden ved at tilføje .navbar-static-topog inkludere en .containereller .container-fluidfor at centrere og pads navbar indhold.

I modsætning til .navbar-fixed-*klasserne behøver du ikke at ændre polstring på body.

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

Rediger udseendet af navigeringslinjen ved at tilføje .navbar-inverse.

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

Brødkrummer

Angiv den aktuelle sides placering i et navigationshierarki.

Separatorer tilføjes automatisk i CSS gennem :beforeog content.

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

Sideinddeling

Angiv pagineringslinks til dit websted eller din app med komponenten til flere siders paginering eller det enklere personsøgeralternativ .

Standard paginering

Enkel paginering inspireret af Rdio, fantastisk til apps og søgeresultater. Den store blok er svær at gå glip af, let skalerbar og giver store klikområ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>

Mærkning af pagineringskomponenten

Pagineringskomponenten skal pakkes ind i et <nav>element for at identificere den som en navigationssektion for skærmlæsere og andre hjælpeteknologier. Derudover, da en side sandsynligvis allerede har mere end én sådan navigationssektion (såsom den primære navigation i overskriften eller en sidebar-navigation), er det tilrådeligt at give en beskrivende aria-labelfor den <nav>, som afspejler dens formål. For eksempel, hvis pagineringskomponenten bruges til at navigere mellem et sæt søgeresultater, kunne en passende etiket være aria-label="Search results pages".

Deaktiveret og aktiv tilstand

Links kan tilpasses til forskellige omstændigheder. Bruges .disabledtil uklikbare links og .activetil at angive den aktuelle 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 udskifter aktive eller deaktiverede ankre med <span>, eller udelader ankeret i tilfælde af de forrige/næste pile, for at fjerne klikfunktionaliteten, mens du beholder tilsigtede stilarter.

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

Dimensionering

Kunne du tænke dig større eller mindre paginering? Tilføj .pagination-lgeller .pagination-smfor yderligere 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øger

Hurtige forrige og næste links til simple pagineringsimplementeringer med let opmærkning og stilarter. Det er fantastisk til simple websteder som blogs eller magasiner.

Standard eksempel

Som standard centrerer personsøgeren links.

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

Justerede links

Alternativt kan du justere hvert link til siderne:

<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 deaktiveret tilstand

Pager-links bruger også den generelle .disabledhjælpeklasse 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

Eksempel overskrift Ny

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

Tilgængelige varianter

Tilføj en af de nedenfor nævnte modifikatorklasser for at ændre udseendet af en etiket.

Standard Primær Success Info 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 tonsvis af etiketter?

Gengivelsesproblemer kan opstå, når du har snesevis af inline-etiketter i en smal beholder, der hver indeholder sit eget inline-blockelement (som et ikon). Vejen rundt om dette er indstilling display: inline-block;. For kontekst og et eksempel, se #13219 .

Fremhæv nemt nye eller ulæste elementer ved at tilføje et <span class="badge">til links, Bootstrap-navigationer og mere.

Indbakke42

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

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

Selv kollapsende

Når der ikke er nye eller ulæste elementer, vil badges simpelthen kollapse (via CSS's :emptyvælger), forudsat at der ikke findes noget indhold indeni.

Cross-browser kompatibilitet

Badges vil ikke selv kollapse i Internet Explorer 8, fordi det mangler understøttelse af :emptyvælgeren.

Tilpasser sig aktive nav-tilstande

Indbyggede stilarter er inkluderet til at placere badges i aktive tilstande i pillenavigation.

<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 let, fleksibel komponent, der valgfrit kan udvide hele visningsporten for at fremvise nøgleindhold på dit websted.

Hej Verden!

Dette er en simpel heltenhed, en simpel jumbotron-lignende komponent til at gøre ekstra opmærksom på fremhævet indhold eller information.

Lær mere

<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 at gøre jumbotronen i fuld bredde, og uden afrundede hjørner, skal du placere den uden for alle .containers og i stedet tilføje en .containerindeni.

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

En simpel skal h1til passende afstand og segmentering af sektioner af indhold på en side. Det kan bruge h1standardelementet 's smallsåvel som de fleste andre komponenter (med yderligere stilarter).

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

Udvid Bootstraps gittersystem med thumbnail-komponenten for nemt at vise gitter af billeder, videoer, tekst og mere.

Hvis du leder efter Pinterest-lignende præsentation af thumbnails af varierende højder og/eller bredder, skal du bruge et tredjeparts-plugin såsom Masonry , Isotope eller Salvattore .

Standard eksempel

Bootstraps thumbnails er som standard designet til at vise sammenkædede billeder med minimalt påkrævet opmærkning.

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

Tilpasset indhold

Med lidt ekstra markering er det muligt at tilføje enhver form for HTML-indhold som overskrifter, afsnit eller knapper til miniaturebilleder.

Miniaturelabel

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.

Knap Knap

Miniaturelabel

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.

Knap Knap

Miniaturelabel

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.

Knap Knap

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

Giv kontekstuelle feedbackmeddelelser til typiske brugerhandlinger med den håndfuld tilgængelige og fleksible advarselsmeddelelser.

Eksempler

Pak enhver tekst og en valgfri afvis-knap ind i .alertog en af de fire kontekstuelle klasser (f.eks. .alert-success) til grundlæggende advarselsmeddelelser.

Ingen standardklasse

Advarsler har ikke standardklasser, kun basis- og modifikationsklasser. En standard grå alarm giver ikke for meget mening, så du er forpligtet til at angive en type via kontekstuel klasse. Vælg mellem succes, info, advarsel eller fare.

Godt klaret! Du har læst denne vigtige advarselsmeddelelse.

Heads up! Denne advarsel kræver din opmærksomhed, men den er ikke super vigtig.

Advarsel! Tjek hellere selv, du ser ikke for godt ud.

Oh snap! Skift et par ting, og prøv at indsende igen.

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

Advarsler, der kan afvises

Byg videre på enhver advarsel ved at tilføje en valgfri .alert-dismissibleog lukkeknap.

Kræver JavaScript-advarselsplugin

For fuldt fungerende advarsler, der kan afvises, skal du bruge JavaScript-pluginnet for advarsler .

Advarsel! Tjek hellere selv, du ser ikke for godt ud.

<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 korrekt adfærd på tværs af alle enheder

Sørg for at bruge <button>elementet med data-dismiss="alert"dataattributten.

Links i advarsler

Brug .alert-linkværktøjsklassen til hurtigt at give matchende farvede links inden for enhver advarsel.

Godt klaret! Du har læst denne vigtige advarselsmeddelelse .

Heads up! Denne advarsel kræver din opmærksomhed , men den er ikke super vigtig.

Advarsel! Tjek hellere selv, du ser ikke for godt ud .

Oh snap! Skift et par ting, og prøv at indsende igen.

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

Giv up-to-date feedback om fremskridtene af en arbejdsgang eller handling med enkle, men fleksible statuslinjer.

Cross-browser kompatibilitet

Fremskridtsbjælker bruger CSS3-overgange og animationer til at opnå nogle af deres effekter. Disse funktioner understøttes ikke i Internet Explorer 9 og ældre eller ældre versioner af Firefox. Opera 12 understøtter ikke animationer.

Content Security Policy (CSP) kompatibilitet

Hvis dit websted har en indholdssikkerhedspolitik (CSP) , som ikke tillader style-src 'unsafe-inline', så vil du ikke være i stand til at bruge indlejrede styleattributter til at indstille bredden på statuslinjen som vist i vores eksempler nedenfor. Alternative metoder til at indstille de bredder, der er kompatible med strenge CSP'er, omfatter brug af lidt brugerdefineret JavaScript (som sætter element.style.width) eller brug af brugerdefinerede CSS-klasser.

Grundlæggende eksempel

Standard statuslinje.

<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 etiket

Fjern <span>med .sr-only-klassen fra statuslinjen for at vise en synlig procentdel.

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 at sikre, at etiketteksten forbliver læselig selv for lave procenter, kan du overveje at tilføje et min-widthtil statuslinjen.

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

Fremskridtslinjer bruger nogle af de samme knap- og advarselsklasser til ensartede stilarter.

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

Stribet

Bruger en gradient til at skabe en stribet effekt. Ikke tilgængelig i IE9 og derunder.

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

Animeret

Tilføj .activetil .progress-bar-stripedfor at animere striberne fra højre mod venstre. Ikke tilgængelig i IE9 og derunder.

<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

Placer flere stænger i det samme .progressfor at 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 objektstile til at bygge forskellige typer komponenter (såsom blogkommentarer, tweets osv.), der har et venstre- eller højrejusteret billede sammen med tekstindhold.

Standardmedie

Standardmediet viser et medieobjekt (billeder, video, lyd) til venstre eller højre for en indholdsblok.

Mediers overskrift

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.

Mediers overskrift

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.

Indlejret 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.

Mediers overskrift

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.

Mediers overskrift

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>

Klasserne .pull-leftog .pull-rightfindes også og blev tidligere brugt som en del af mediekomponenten, men er forældet til den brug fra v3.3.0. De svarer omtrent til .media-leftog .media-right, bortset fra at de .media-rightskal placeres efter .media-bodyi html'en.

Mediejustering

Billederne eller andre medier kan justeres øverst, midterste eller nederst. Standard er topjusteret.

Topjusterede medier

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.

Midtstillede medier

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.

Bundjusteret medie

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 lidt ekstra opmærkning kan du bruge medier inde i listen (nyttigt til kommentartråde eller artikellister).

Mediers overskrift

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.

Indlejret 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.

Indlejret 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.

Indlejret 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 kraftfuld komponent til at vise ikke kun simple lister over elementer, men komplekse lister med tilpasset indhold.

Grundlæggende eksempel

Den mest basale listegruppe er simpelthen en uordnet liste med listeelementer og de rigtige klasser. Byg videre på det med de muligheder, der følger, eller din egen CSS efter 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>

Badges

Tilføj badges-komponenten til ethvert listegruppeelement, og det vil automatisk blive placeret til højre.

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>

Tilknyttede varer

Tilknyt listegruppeelementer ved at bruge ankertags i stedet for listeelementer (det betyder også en forælder <div>i stedet for en <ul>). Der er ikke behov for individuelle forældre omkring 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>

Knapelementer

Listegruppeelementer kan være knapper i stedet for listeelementer (det betyder også en forælder <div>i stedet for en <ul>). Der er ikke behov for individuelle forældre omkring hvert element. Brug ikke standardklasserne .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>

Deaktiverede varer

Tilføj .disabledtil en .list-group-itemfor at nedtone den for at se deaktiveret ud.

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

Brug kontekstuelle klasser til at style listeelementer, standard eller linkede. Omfatter også .activestat.

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>

Tilpasset indhold

Tilføj næsten enhver HTML indeni, selv for linkede 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>

Selvom det ikke altid er nødvendigt, skal du nogle gange lægge din DOM i en boks. Prøv panelkomponenten i disse situationer.

Grundlæggende eksempel

Som standard er alt, hvad .panelder skal til, at anvende nogle grundlæggende rammer og polstring for at indeholde noget indhold.

Grundlæggende paneleksempel

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

Panel med overskrift

Tilføj nemt en overskriftsbeholder til dit panel med .panel-heading. Du kan også inkludere en hvilken som helst <h1>- <h6>med en .panel-titleklasse for at tilføje en præ-stilet overskrift. Dog er skriftstørrelserne på <h1>- <h6>tilsidesat af .panel-heading.

For korrekt linkfarvning skal du sørge for at placere links i overskrifter i .panel-title.

Paneloverskrift uden titel

Panelindhold

Panelets titel

Panelindhold

<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 sidefod

Ombryd knapper eller sekundær tekst i .panel-footer. Bemærk, at panelfødder ikke arver farver og kanter, når du bruger kontekstuelle variationer, da de ikke er beregnet til at være i forgrunden.

Panelindhold

Sidefod på panel

<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 nemt gøre et panel mere meningsfuldt for en bestemt kontekst ved at tilføje en af de kontekstuelle tilstandsklasser.

Panelets titel

Panelindhold

Panelets titel

Panelindhold

Panelets titel

Panelindhold

Panelets titel

Panelindhold

Panelets titel

Panelindhold

<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 borde

Tilføj ethvert panel uden grænser .tablefor et sømløst design. Hvis der er en .panel-body, tilføjer vi en ekstra kant til toppen af bordet til adskillelse.

Paneloverskrift

Noget standard panelindhold 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	Efternavn	Brugernavn
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
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 der ikke er nogen paneltekst, flyttes komponenten fra paneloverskrift til tabel uden afbrydelse.

Paneloverskrift

#	Fornavn	Efternavn	Brugernavn
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
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

Medtag nemt listegrupper i fuld bredde i ethvert panel.

Paneloverskrift

Noget standard panelindhold 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>

Tillad browsere at bestemme video- eller diasshowdimensioner baseret på bredden af deres indeholdende blok ved at skabe et iboende forhold, der skaleres korrekt på enhver enhed.

Regler anvendes direkte på <iframe>, <embed>, <video>, og <object>elementer; brug eventuelt en eksplicit efterkommerklasse, .embed-responsive-itemnår du vil matche stilen for andre attributter.

Pro-tip! Du behøver ikke at inkludere frameborder="0"i dine <iframe>s, da vi tilsidesætter det for dig.

<!-- 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 godt

Brug brønden som en simpel effekt på et element for at give det en indsat effekt.

Se, jeg er i en brønd!

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

Valgfri klasser

Kontrolpolstring og afrundede hjørner med to valgfri modifikationsklasser.

Se, jeg er i en stor brønd!

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

Se, jeg er i en lille brønd!

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

Komponenter

Glyphicons

Tilgængelige glyffer

Sådan bruges

Bland ikke med andre komponenter

Kun til brug på tomme elementer

Ændring af ikonets skrifttypeplacering

Tilgængelige ikoner

Eksempler

Dropdowns

Eksempel

Justering

Kan kræve yderligere positionering

Forældet .pull-rightjustering

Overskrifter

Afdeler

Deaktiverede menupunkter

Knapgrupper

Værktøjstip og popovers i knapgrupper kræver specielle indstillinger

Sørg for korrekt roleog giv en etiket

Grundlæggende eksempel

Knap værktøjslinje

Dimensionering

Indlejring

Lodret variation

Justerede knapgrupper

Håndtering af grænser

IE8 og grænser

Med <a>elementer

Links, der fungerer som knapper

Med <button>elementer

Knap rullemenuer

Plugin-afhængighed

Enkeltknap rullemenuer

Rullemenuer med splitknap

Dimensionering

Dropup variation

Input grupper

Kun tekstlige <input>s

Værktøjstip og popovers i inputgrupper kræver specielle indstillinger

Bland ikke med andre komponenter

Tilføj altid etiketter

Grundlæggende eksempel

Dimensionering

Afkrydsningsfelter og radiotilføjelser

Knap tilføjelser

Knapper med dropdowns

Segmenterede knapper

Flere knapper

Navs

Brug af navs til fanepaneler kræver JavaScript-faner-plugin

Gør navs, der bruges som navigation, tilgængelige

Faner

Piller

Berettiget

Safari og responsive berettigede nav

Deaktiverede links

Linkfunktionaliteten er ikke påvirket

Brug af dropdowns

Faner med rullemenuer

Piller med dropdowns

Navbar

Standard navigeringslinje

Overfyldt indhold

Kræver JavaScript-plugin

Ændring af det skjulte mobile navbar-brudpunkt

Gør navbarer tilgængelige

Mærkebillede

Formularer

Forbehold for mobilenheder

Tilføj altid etiketter

Knapper

Kontekstspecifik brug

Tekst

Ikke-nav-links

Komponentjustering

Højrejustering af flere komponenter

Fastgjort til toppen

Kropspolstring påkrævet

Fastgjort til bunden

Forældet `.pull-right`justering

Sørg for korrekt `role`og giv en etiket

Med `<a>`elementer

Med `<button>`elementer

Kun tekstlige `<input>`s