Tillgängliga glyfer

Inkluderar över 250 glyfer i teckensnittsformat från Glyphicon Halflings-setet. Glyphicons Halflings är normalt inte tillgängliga gratis, men deras skapare har gjort dem tillgängliga för Bootstrap utan kostnad. Som tack ber vi dig bara att inkludera en länk tillbaka till Glyphicons när det är möjligt.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-moln
glyphicon glyphicon-kuvert
glyphicon glyphicon-penna
glyphicon glyphicon-glas
glyphicon glyphicon-musik
glyphicon glyphicon-sökning
glyphicon glyphicon-hjärta
glyphicon glyphicon-stjärna
glyphicon glyphicon-stjärna-tom
glyphicon glyphicon-användare
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-ta bort
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zooma ut
glyphicon glyphicon-av
glyphicon glyphicon-signal
glyphicon glyphicon-kugg
glyphicon glyphicon-trash
glyphicon glyphicon-hem
glyphicon glyphicon-fil
glyphicon glyphicon-tid
glyphicon glyphicon-väg
glyphicon glyphicon-download-alt
glyphicon glyphicon-nedladdning
glyphicon glyphicon-uppladdning
glyphicon glyphicon-inkorg
glyphicon glyphicon-play-cirkel
glyphicon glyphicon-repeat
glyphicon glyphicon-uppdatera
glyphicon glyphicon-list-alt
glyphicon glyphicon-lås
glyphicon glyphicon-flagga
glyphicon glyphicon-hörlurar
glyphicon glyphicon-volym-av
glyphicon glyphicon-volym ned
glyphicon glyphicon-volym upp
glyphicon glyphicon-qrcode
glyphicon glyphicon-streckkod
glyphicon glyphicon-tagg
glyphicon glyphicon-taggar
glyphicon glyphicon-bok
glyphicon glyphicon-bokmärke
glyphicon glyphicon-tryck
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-fet
glyphicon glyphicon-kursiv
glyphicon glyphicon-text-höjd
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-lista
glyphicon glyphicon-indrag-vänster
glyphicon glyphicon-indrag-höger
glyphicon glyphicon-facetime-video
glyphicon glyphicon-bild
glyphicon glyphicon-map-marker
glyphicon glyphicon-justera
glyphicon glyphicon-ton
glyphicon glyphicon-edit
glyphicon glyphicon-andel
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-steg-bakåt
glyphicon glyphicon-snabb-bakåt
glyphicon glyphicon-bakåt
glyphicon glyphicon-spel
glyphicon glyphicon-paus
glyphicon glyphicon-stop
glyphicon glyphicon-framåt
glyphicon glyphicon-snabbspolning framåt
glyphicon glyphicon-steg-framåt
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-vänster
glyphicon glyphicon-chevron-höger
glyphicon glyphicon-plus-tecken
glyphicon glyphicon-minus-tecken
glyphicon glyphicon-ta bort-tecken
glyphicon glyphicon-ok-tecken
glyphicon glyphicon-fråga-tecken
glyphicon glyphicon-info-tecken
glyphicon glyphicon-skärmdump
glyphicon glyphicon-ta bort-cirkel
glyphicon glyphicon-ok-cirkel
glyphicon glyphicon-ban-cirkel
glyphicon glyphicon-pil-vänster
glyphicon glyphicon-pil-höger
glyphicon glyphicon-pil upp
glyphicon glyphicon-pil ner
glyphicon glyphicon-share-alt
glyphicon glyphicon-ändra storlek-full
glyphicon glyphicon-ändra storlek-liten
glyphicon glyphicon-utropstecken
glyphicon glyphicon-gåva
glyphicon glyphicon-blad
glyphicon glyphicon-eld
glyphicon glyphicon-öga-öppen
glyphicon glyphicon-öga-stäng
glyphicon glyphicon-varningsskylt
glyphicon glyphicon-plan
glyphicon glyphicon-kalender
glyphicon glyphicon-slumpmässig
glyphicon glyphicon-kommentar
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-mapp-stäng
glyphicon glyphicon-mapp-öppen
glyphicon glyphicon-ändra storlek-vertikal
glyphicon glyphicon-ändra storlek-horisontell
glyphicon glyphicon-hdd
glyphicon glyphicon-tjurhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certifikat
glyphicon glyphicon-tummen upp
glyphicon glyphicon-tummen-ner
glyphicon glyphicon-hand-höger
glyphicon glyphicon-hand-vänster
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-cirkel-pil-höger
glyphicon glyphicon-cirkel-pil-vänster
glyphicon glyphicon-cirkel-pil upp
glyphicon glyphicon-cirkel-pil-ner
glyphicon glyphicon-glob
glyphicon glyphicon-skiftnyckel
glyphicon glyphicon-uppgifter
glyphicon glyphicon-filter
glyphicon glyphicon-portfölj
glyphicon glyphicon-helskärm
glyphicon glyphicon-dashboard
glyphicon glyphicon-gem
glyphicon glyphicon-hjärta-tom
glyphicon glyphicon-länk
glyphicon glyphicon-telefon
glyphicon glyphicon-sticknål
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sortera-efter-alfabet
glyphicon glyphicon-sortera-efter-alfabet-alt
glyphicon glyphicon-sorteras efter ordning
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sortera-efter-attribut
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-avmarkerad
glyphicon glyphicon-expandera
glyphicon glyphicon-kollaps-ner
glyphicon glyphicon-kollaps upp
glyphicon glyphicon-logga in
glyphicon glyphicon-blixt
glyphicon glyphicon-logga ut
glyphicon glyphicon-nytt-fönster
glyphicon glyphicon-rekord
glyphicon glyphicon-spara
glyphicon glyphicon-öppen
glyphicon glyphicon-sparad
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-skicka
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-sparad
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-öppen
glyphicon glyphicon-kreditkort
glyphicon glyphicon-överföring
glyphicon glyphicon-bestick
glyphicon glyphicon-header
glyphicon glyphicon-komprimerad
glyphicon glyphicon-hörlurar
glyphicon glyphicon-phone-alt
glyphicon glyphicon-torn
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-undertexter
glyphicon glyphicon-ljud-stereo
glyphicon glyphicon-ljud-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-upphovsrättsmärke
glyphicon glyphicon-registreringsmärke
glyphicon glyphicon-moln-nedladdning
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-träd-barrträd
glyphicon glyphicon-träd-lövfällande
glyphicon glyphicon-cd
glyphicon glyphicon-spara-fil
glyphicon glyphicon-öppen-fil
glyphicon glyphicon-nivå upp
glyphicon glyphicon-kopia
glyphicon glyphicon-pasta
glyphicon glyphicon-varning
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-bonde
glyphicon glyphicon-biskop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formel
glyphicon glyphicon-tält
glyphicon glyphicon-svarta tavlan
glyphicon glyphicon-bädd
glyphicon glyphicon-äpple
glyphicon glyphicon-radering
glyphicon glyphicon-timglas
glyphicon glyphicon-lampa
glyphicon glyphicon-duplicate
glyphicon glyphicon-spargris
glyphicon glyphicon-sax
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rubel
glyphicon glyphicon-gnugga
glyphicon glyphicon-skala
glyphicon glyphicon-is-glass
glyphicon glyphicon-is-glass-smakade
glyphicon glyphicon-utbildning
glyphicon glyphicon-alternativ-horisontell
glyphicon glyphicon-option-vertikal
glyphicon glyphicon-meny-hamburgare
glyphicon glyphicon-modal-window
glyphicon glyphicon-olja
glyphicon glyphicon-korn
glyphicon glyphicon-solglasögon
glyphicon glyphicon-text-storlek
glyphicon glyphicon-text-färg
glyphicon glyphicon-text-bakgrund
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horisontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangel-right
glyphicon glyphicon-triangel-vänster
glyphicon glyphicon-triangel-botten
glyphicon glyphicon-triangel-top
glyphicon glyphicon-konsol
glyphicon glyphicon-överskrift
glyphicon glyphicon-subscript
glyphicon glyphicon-meny-vänster
glyphicon glyphicon-meny-höger
glyphicon glyphicon-meny-ner
glyphicon glyphicon-meny-upp

Hur man använder

Av prestandaskäl kräver alla ikoner en basklass och individuell ikonklass. För att använda, placera följande kod nästan var som helst. Se till att lämna ett mellanslag mellan ikonen och texten för korrekt utfyllnad.

Blanda inte med andra komponenter

Ikonklasser kan inte direkt kombineras med andra komponenter. De bör inte användas tillsammans med andra klasser på samma element. Lägg istället till en kapslad <span>och tillämpa ikonklasserna på <span>.

Endast för användning på tomma element

Ikonklasser bör endast användas på element som inte innehåller något textinnehåll och inte har underordnade element.

Ändra ikonens teckensnittsplats

Bootstrap förutsätter att ikontypsnittsfiler finns i ../fonts/katalogen, i förhållande till de kompilerade CSS-filerna. Att flytta eller byta namn på dessa teckensnittsfiler innebär att man uppdaterar CSS på ett av tre sätt:

Ändra @icon-font-pathoch/eller @icon-font-namevariablerna i källfilen Mindre filer.
Använd alternativet för relativa webbadresser som tillhandahålls av Less-kompilatorn.
Ändra url()sökvägarna i den kompilerade CSS.

Använd det alternativ som bäst passar din specifika utvecklingsinställning.

Tillgängliga ikoner

Moderna versioner av hjälpmedel kommer att tillkännage CSS-genererat innehåll, såväl som specifika Unicode-tecken. För att undvika oavsiktlig och förvirrande utdata i skärmläsare (särskilt när ikoner används enbart för dekoration), döljer vi dem med aria-hidden="true"attributet.

Om du använder en ikon för att förmedla mening (snarare än bara som ett dekorativt element), se till att denna betydelse också förmedlas till hjälpmedelstekniker – till exempel inkludera ytterligare innehåll, visuellt dolt med .sr-onlyklassen.

Om du skapar kontroller utan annan text (som en <button>som bara innehåller en ikon), bör du alltid tillhandahålla alternativt innehåll för att identifiera syftet med kontrollen, så att det blir meningsfullt för användare av hjälpmedelsteknik. I det här fallet kan du lägga till ett aria-labelattribut på själva kontrollen.

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

Exempel

Använd dem i knappar, knappgrupper för ett verktygsfält, navigering eller förhandsinmatningar.

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

En ikon som används i en varning för att förmedla att det är ett felmeddelande, med ytterligare .sr-onlytext för att förmedla denna ledtråd till användare av hjälpmedel.

Ange en giltig e-postadress

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

Växlingsbar, sammanhangsberoende meny för att visa listor med länkar. Gjorde interaktiva med rullgardinsmenyn JavaScript-plugin .

Exempel

Slå in rullgardinsmenyns utlösare och rullgardinsmenyn inom .dropdown, eller ett annat element som deklarerar position: relative;. Lägg sedan till menyns 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-menyer kan ändras för att expandera uppåt (istället för nedåt) genom att lägga .dropuptill föräldern.

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

Inriktning

Som standard placeras en rullgardinsmeny automatiskt 100 % uppifrån och längs den vänstra sidan av sin förälder. Lägg .dropdown-menu-righttill .dropdown-menuhögerjustera rullgardinsmenyn.

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

Rubriker

Lägg till en rubrik för att markera avsnitt av åtgärder i valfri rullgardinsmeny.

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

Delare

Lägg till en avdelare för separata länkserier i en rullgardinsmeny.

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

Inaktiverade menyalternativ

Lägg .disabledtill ett <li>i rullgardinsmenyn för att inaktivera länken.

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

Gruppera en serie knappar på en enda rad med knappgruppen. Lägg till valfritt JavaScript-radio- och kryssrutestilbeteende med vårt plugin för knappar .

Verktygstips och popovers i knappgrupper kräver speciella inställningar

När du använder verktygstips eller popovers på element inom en .btn-group, måste du ange alternativet container: 'body'för att undvika oönskade bieffekter (som att elementet växer bredare och/eller tappar sina rundade hörn när verktygstipset eller popover utlöses).

Se till att det är rätt `role`och tillhandahåll en etikett

För att hjälpmedel – som skärmläsare – ska förmedla att en serie knappar är grupperade, rolemåste ett lämpligt attribut tillhandahållas. För knappgrupper skulle detta vara role="group", medan verktygsfält ska ha en role="toolbar".

Ett undantag är grupper som bara innehåller en enda kontroll (till exempel de motiverade knappgrupperna med <button>element) eller en rullgardinsmeny.

Dessutom bör grupper och verktygsfält ges en explicit etikett, eftersom de flesta hjälpmedelstekniker annars inte kommer att tillkännage dem, trots närvaron av det korrekta roleattributet. I exemplen här använder vi aria-label, men alternativ som aria-labelledbykan också användas.

Grundläggande exempel

Linda en serie knappar med .btnin .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>

Kombinera uppsättningar <div class="btn-group">till en <div class="btn-toolbar">för mer komplexa 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

Istället för att tillämpa knappstorleksklasser på varje knapp i en grupp, lägg bara .btn-group-*till i varje .btn-group, även när du kapslar flera 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>

Häckande

Placera en i en .btn-groupannan .btn-groupnär du vill ha rullgardinsmenyer blandade med en rad knappar.

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

Få en uppsättning knappar att se vertikalt staplade snarare än horisontellt. Rullgardinsmenyn för delade knappar stöds inte här.

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

Justerade knappgrupper

Få en grupp knappar att sträcka sig lika stora så att de spänner över hela dess bredd. Fungerar även med rullgardinsknappar inom knappgruppen.

Hantera gränser

På grund av den specifika HTML och CSS som används för att motivera knappar (nämligen display: table-cell), fördubblas gränserna mellan dem. I vanliga knappgrupper, margin-left: -1pxanvänds för att stapla kanterna istället för att ta bort dem. Fungerar dock margininte med display: table-cell. Som ett resultat, beroende på dina anpassningar till Bootstrap, kanske du vill ta bort eller färga om kanterna.

IE8 och gränser

Internet Explorer 8 återger inte kanter på knappar i en justerad knappgrupp, vare sig den är på <a>eller <button>element. För att komma runt det, linda in varje knapp i en annan .btn-group.

Se #12476 för mer information.

Med `<a>`element

Slå bara in en serie .btns i .btn-group.btn-group-justified.

Vänster Mitten Höger

Vänster Mitten

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

Länkar som fungerar som knappar

Om <a>elementen används för att fungera som knappar – som utlöser funktionalitet på sidan, snarare än att navigera till ett annat dokument eller avsnitt på den aktuella sidan – bör de också ges en lämplig role="button".

Med `<button>`element

För att använda justerade knappgrupper med <button>element måste du slå in varje knapp i en knappgrupp . De flesta webbläsare tillämpar inte vår CSS korrekt för att motivera <button>element, men eftersom vi stöder rullgardinsknappar kan vi komma runt 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>

Använd valfri knapp för att aktivera en rullgardinsmeny genom att placera den i en .btn-groupoch tillhandahålla rätt menyuppmärkning.

Plugin-beroende

Knapprullgardinsmenyer kräver att dropdown-pluginen ingår i din version av Bootstrap.

En knapp rullgardinsmeny

Förvandla en knapp till en rullgardinsmeny med några grundläggande uppmärkningsändringar.

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

Rullgardinsmenyer för dela knappar

Skapa på samma sätt rullgardinsmenyn för delade knappar med samma uppmärkningsändringar, bara 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>

Dimensionering

Knapprullgardinsmenyn fungerar med knappar i alla storlekar.

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

Utlösa rullgardinsmenyer ovanför element genom att lägga .dropuptill i den överordnade.

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

Utöka formulärkontrollerna genom att lägga till text eller knappar före, efter eller på båda sidor av en textbaserad <input>. Använd .input-groupmed en .input-group-addoneller .input-group-btnför att lägga till eller lägga till element till en singel .form-control.

Endast `<input>`text

Undvik att använda <select>element här eftersom de inte kan formateras helt i WebKit-webbläsare.

Undvik att använda <textarea>element här eftersom deras rowsattribut inte kommer att respekteras i vissa fall.

Verktygstips och popovers i inmatningsgrupper kräver speciella inställningar

När du använder verktygstips eller popovers på element inom en .input-group, måste du ange alternativet container: 'body'för att undvika oönskade biverkningar (som att elementet växer bredare och/eller tappar sina rundade hörn när verktygstipset eller popover utlöses).

Blanda inte med andra komponenter

Blanda inte formulärgrupper eller kolumnklasser i rutnät direkt med inmatningsgrupper. Kapsla istället indatagruppen inuti formulärgruppen eller rutnätsrelaterade element.

Lägg alltid till etiketter

Skärmläsare kommer att få problem med dina formulär om du inte inkluderar en etikett för varje inmatning. För dessa indatagrupper, se till att eventuell ytterligare etikett eller funktionalitet överförs till hjälpmedelstekniker.

Den exakta tekniken som ska användas (synliga <label>element, <label>element dolda med .sr-onlyklassen eller användning av aria-label, aria-labelledby, aria-describedby, titleeller placeholderattributet) och vilken ytterligare information som behöver förmedlas kommer att variera beroende på den exakta typen av gränssnittswidget du implementerar. Exemplen i det här avsnittet ger några förslag på fallspecifika tillvägagångssätt.

Grundläggande exempel

Placera ett tillägg eller en knapp på vardera sidan av en ingång. Du kan också placera en på båda sidor av en ingång.

Vi stöder inte flera tillägg ( .input-group-addoneller .input-group-btn) på en enda sida.

Vi stöder inte flera formulärkontroller i en enda inmatningsgrupp.

<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

Lägg till de relativa formulärstorleksklasserna till sig .input-groupsjälv och innehållet inom kommer automatiskt att ändra storlek – inget behov av att upprepa formulärkontrollstorleksklasserna på varje 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>

Kryssrutor och radiotillägg

Placera valfri kryssruta eller radioalternativ i en inmatningsgrupps tillägg istället för text.

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

Knapptillägg

Knappar i inmatningsgrupper är lite olika och kräver en extra nivå av kapsling. Istället för .input-group-addonmåste du använda .input-group-btnför att linda knapparna. Detta krävs på grund av standard webbläsarstilar som inte kan åsidosättas.

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

Knappar med rullgardinsmenyer

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

Segmenterade knappar

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

Flera knappar

Även om du bara kan ha ett tillägg per sida, kan du ha flera knappar inuti en enda .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>

Nav som är tillgängliga i Bootstrap har delad markering, som börjar med basklassen .nav, såväl som delade tillstånd. Byt modifieringsklasser för att växla mellan varje stil.

Att använda nav för flikpaneler kräver JavaScript-flikar-plugin

För flikar med flikområden måste du använda JavaScript-plugin för flikar . Markeringen kommer också att kräva ytterligare roleoch ARIA-attribut – se insticksprogrammets exempeluppmärkning för ytterligare detaljer.

Gör nav som används som navigering tillgängliga

Om du använder nav för att tillhandahålla ett navigeringsfält, se till att lägga till en role="navigation"i den mest logiska överordnade behållaren för <ul>, eller linda ett <nav>element runt hela navigeringen. Lägg inte till rollen till sig <ul>själv, eftersom detta skulle förhindra att den annonseras som en faktisk lista av hjälpmedel.

Flikar

Observera att .nav-tabsklassen kräver .navbasklassen.

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

Biljard

Ta samma HTML, men använd .nav-pillsistället:

<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 också staplas vertikalt. Lägg bara till .nav-stacked.

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

Berättigat

Gör enkelt flikar eller piller lika breda på sina föräldrar på skärmar som är bredare än 768px med .nav-justified. På mindre skärmar är nav-länkarna staplade.

Justerade navbar nav-länkar stöds för närvarande inte.

Safari och lyhörd berättigad navigering

Från och med v9.1.2 uppvisar Safari ett fel där ändra storlek på din webbläsare horisontellt orsakar renderingsfel i den berättigade navigeringen som rensas vid uppdatering. Denna bugg visas också i exemplet med motiverad nav .

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

Inaktiverade länkar

För alla nav-komponenter (tabs eller piller), lägg .disabledtill för grå länkar och inga hovringseffekter .

Länkfunktionen påverkas inte

Den här klassen kommer bara att ändra <a>utseendet, inte dess funktionalitet. Använd anpassad JavaScript för att inaktivera länkar här.

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

Använder rullgardinsmenyn

Lägg till rullgardinsmenyer med lite extra HTML och rullgardinsmenyn JavaScript-plugin .

Flikar med rullgardinsmenyer

<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 är responsiva metakomponenter som fungerar som navigeringsrubriker för din applikation eller webbplats. De börjar kollapsa (och går att växla) i mobilvyer och blir horisontella när den tillgängliga visningsportens bredd ökar.

Justerade navbar nav-länkar stöds för närvarande inte.

Överflödande innehåll

Eftersom Bootstrap inte vet hur mycket utrymme innehållet i ditt navigeringsfält behöver, kan du stöta på problem med att lägga in innehåll i en andra rad. För att lösa detta kan du:

Minska mängden eller bredden på navbar-objekt.
Dölj vissa navbarobjekt i vissa skärmstorlekar med hjälp av responsiva verktygsklasser .
Ändra punkten där navigeringsfältet växlar mellan komprimerat och horisontellt läge. Anpassa @grid-float-breakpointvariabeln eller lägg till din egen mediefråga.

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

Byt ut navbar-märket med din egen bild genom att byta ut texten mot en <img>. Eftersom den .navbar-brandhar sin egen stoppning och höjd kan du behöva åsidosätta viss CSS beroende på din bild.

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

Placera formulärinnehåll inom .navbar-formför korrekt vertikal justering och kollapsat beteende i smala vyportar. Använd justeringsalternativen för att bestämma var den finns i navigeringsfältets innehåll.

Som en heads up, .navbar-formdelar mycket av sin kod med .form-inlinevia mixin. Vissa formulärkontroller, som inmatningsgrupper, kan kräva att fasta bredder visas korrekt i en navigeringsfält.

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

Lägg alltid till etiketter

Skärmläsare kommer att få problem med dina formulär om du inte inkluderar en etikett för varje inmatning. För dessa infogade formulär kan du dölja etiketterna med hjälp av .sr-onlyklassen. Det finns ytterligare alternativa metoder för att tillhandahålla en märkning för hjälpmedel, som aria-labelattributet eller aria-labelledby. titleOm ingen av dessa finns kan skärmläsare använda placeholderattributet, om det finns, men observera att användning av placeholdersom ersättning för andra märkningsmetoder inte rekommenderas.

Lägg till .navbar-btnklassen till <button>element som inte finns i a <form>för att centrera dem vertikalt i navigeringsfältet.

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

Linda textsträngar i ett element med .navbar-text, vanligtvis på en <p>tagg för korrekt ledning och färg.

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

För personer som använder standardlänkar som inte finns inom den vanliga navigeringskomponenten, använd .navbar-linkklassen för att lägga till de rätta färgerna för standard- och omvändnavigeringsalternativen.

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

Justera nav-länkar, formulär, knappar eller text med hjälp av verktygsklasserna .navbar-lefteller . .navbar-rightBåda klasserna kommer att lägga till en CSS-float i den angivna riktningen. Till exempel, för att justera nav-länkar, placera dem i en separat <ul>med respektive verktygsklass tillämpad.

Dessa klasser är blandade versioner av .pull-leftoch .pull-right, men de är anpassade till mediafrågor för enklare hantering av navbar-komponenter över enhetsstorlekar.

Lägg till .navbar-fixed-topoch inkludera ett .containereller .container-fluidtill centrera och pad navigeringsfältsinnehåll.

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

Kroppsstoppning krävs

Det fasta navigeringsfältet kommer att överlappa ditt övriga innehåll, om du inte lägger paddingtill överst i <body>. Prova dina egna värderingar eller använd vårt utdrag nedan. Tips: Som standard är navigeringsfältet 50px högt.

body { padding-top: 70px; }

Se till att inkludera detta efter kärnan Bootstrap CSS.

Lägg till .navbar-fixed-bottomoch inkludera ett .containereller .container-fluidtill centrera och pad navigeringsfältsinnehåll.

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

Kroppsstoppning krävs

Det fasta navigeringsfältet kommer att överlappa ditt övriga innehåll, om du inte lägger paddingtill längst ned i <body>. Prova dina egna värderingar eller använd vårt utdrag nedan. Tips: Som standard är navigeringsfältet 50px högt.

body { padding-bottom: 70px; }

Se till att inkludera detta efter kärnan Bootstrap CSS.

Skapa ett navigeringsfält i full bredd som rullar iväg med sidan genom att lägga till .navbar-static-topoch inkludera ett .containereller .container-fluidför att centrera och paddla navigeringsfältets innehåll.

Till skillnad från .navbar-fixed-*klasserna behöver du inte ändra någon stoppning på body.

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

Ändra utseendet på navigeringsfältet genom att lägga till .navbar-inverse.

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

Ströbröd

Ange den aktuella sidans plats i en navigeringshierarki.

Separatorer läggs automatiskt till i CSS genom :beforeoch content.

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

Paginering

Ange pagineringslänkar för din webbplats eller app med komponenten för flersidig paginering eller det enklare personsökaralternativet .

Standard paginering

Enkel paginering inspirerad av Rdio, perfekt för appar och sökresultat. Det stora blocket är svårt att missa, lätt skalbart och ger stora klickytor.

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

Pagineringskomponenten ska vara inslagen i ett <nav>element för att identifiera den som en navigeringssektion för skärmläsare och andra hjälpmedel. Dessutom, eftersom en sida sannolikt redan har mer än ett sådant navigeringsavsnitt (som den primära navigeringen i sidhuvudet, eller en sidofältsnavigering), är det tillrådligt att tillhandahålla en beskrivning aria-labelför den <nav>som återspeglar dess syfte. Om sidnumreringskomponenten till exempel används för att navigera mellan en uppsättning sökresultat kan en lämplig etikett vara aria-label="Search results pages".

Inaktiverade och aktiva tillstånd

Länkar är anpassningsbara för olika omständigheter. Använd .disabledför oklickbara länkar och .activeför att indikera den aktuella sidan.

<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 rekommenderar att du byter ut aktiva eller inaktiverade ankare mot <span>, eller utelämnar ankaret i fallet med föregående/nästa pilar, för att ta bort klickfunktionalitet samtidigt som du behåller avsedda stilar.

<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

Vill du ha större eller mindre paginering? Lägg till .pagination-lgeller .pagination-smför ytterligare storlekar.

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

Snabba föregående och nästa länkar för enkla sideringsimplementeringar med lätt uppmärkning och stilar. Det är bra för enkla webbplatser som bloggar eller tidskrifter.

Standardexempel

Som standard centrerar personsökaren länkar.

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

Justerade länkar

Alternativt kan du justera varje länk mot sidorna:

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

Valfritt inaktiverat tillstånd

Personsökarlänkar använder också den allmänna .disabledverktygsklassen från sideringen.

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

Exempel

Exempelrubrik Ny

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

Tillgängliga varianter

Lägg till någon av nedan nämnda modifieringsklasser för att ändra utseendet på en etikett.

Standard primär framgångsinformation Varning Fara _

<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 massor av etiketter?

Återgivningsproblem kan uppstå när du har dussintals inline-etiketter i en smal behållare, som var och en innehåller sitt eget inline-blockelement (som en ikon). Vägen runt detta är inställningen display: inline-block;. För sammanhang och ett exempel, se #13219 .

Markera enkelt nya eller olästa objekt genom att lägga till en <span class="badge">till länkar, Bootstrap navs och mer.

Inkorg42

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

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

Själv kollapsar

När det inte finns några nya eller olästa föremål, kommer märken helt enkelt att kollapsa (via CSS:s :emptyväljare) förutsatt att inget innehåll finns inom.

Kompatibilitet över webbläsare

Märken kommer inte att kollapsa i Internet Explorer 8 eftersom det saknar stöd för :emptyväljaren.

Anpassar sig till aktiva navigeringslägen

Inbyggda stilar ingår för att placera märken i aktiva lägen i pillernavigering.

<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 lätt, flexibel komponent som valfritt kan utöka hela visningsporten för att visa upp nyckelinnehåll på din webbplats.

Hej världen!

Det här är en enkel hjälteenhet, en enkel jumbotronliknande komponent för att påkalla extra uppmärksamhet åt utvalt innehåll eller information.

Läs 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>

För att göra jumbotronen full bredd, och utan rundade hörn, placera den utanför alla .containers och lägg istället till en .containerinom.

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

Ett enkelt skal för h1att på lämpligt sätt placera ut och segmentera avsnitt av innehåll på en sida. Den kan använda h1standardelementet 's small, såväl som de flesta andra komponenter (med ytterligare stilar).

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

Utöka Bootstraps rutsystem med miniatyrbildskomponenten för att enkelt visa rutnät med bilder, videor, text och mer.

Om du letar efter Pinterest-liknande presentation av miniatyrer av olika höjder och/eller bredder, måste du använda ett plugin från tredje part som Masonry , Isotope eller Salvattore .

Standardexempel

Som standard är Bootstraps miniatyrer utformade för att visa länkade bilder med minimal uppmärkning.

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

Anpassat innehåll

Med lite extra uppmärkning är det möjligt att lägga till alla typer av HTML-innehåll som rubriker, stycken eller knappar i miniatyrbilder.

Miniatyretikett

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

Miniatyretikett

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

Miniatyretikett

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>

Ge kontextuella feedbackmeddelanden för typiska användaråtgärder med en handfull tillgängliga och flexibla varningsmeddelanden.

Exempel

Slå in valfri text och en valfri avvisande knapp i .alerten av de fyra kontextuella klasserna (t.ex. .alert-success) för grundläggande varningsmeddelanden.

Ingen standardklass

Varningar har inga standardklasser, bara bas- och modifieringsklasser. En standard grå varning är inte så vettig, så du måste ange en typ via kontextuell klass. Välj mellan framgång, information, varning eller fara.

Bra gjort! Du har läst detta viktiga varningsmeddelande.

Se upp! Den här varningen kräver din uppmärksamhet, men den är inte superviktig.

Varning! Bäst att kolla upp dig själv, du ser inte för bra ut.

Åh knäpp! Ändra några saker och försök skicka 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>

Avvisbara varningar

Bygg på vilken varning som helst genom att lägga till en valfri .alert-dismissibleoch stängningsknapp.

Kräver JavaScript-varningsplugin

För fullt fungerande, avvisbara varningar måste du använda JavaScript-plugin för varningar .

Varning! Bäst att kolla upp dig själv, du ser inte för 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äkerställ korrekt beteende på alla enheter

Se till att använda <button>elementet med data-dismiss="alert"dataattributet.

Länkar i varningar

Använd .alert-linkverktygsklassen för att snabbt tillhandahålla matchande färgade länkar i alla varningar.

Bra gjort! Du har läst detta viktiga varningsmeddelande .

Se upp! Den här varningen kräver din uppmärksamhet , men den är inte superviktig.

Varning! Bäst att kolla upp dig själv, du ser inte för bra ut .

Åh knäpp! Ändra några saker och försök skicka 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>

Ge aktuell feedback om framstegen i ett arbetsflöde eller en åtgärd med enkla men flexibla förloppsindikatorer.

Kompatibilitet över webbläsare

Förloppsindikatorer använder CSS3-övergångar och animationer för att uppnå några av sina effekter. Dessa funktioner stöds inte i Internet Explorer 9 och lägre eller äldre versioner av Firefox. Opera 12 stöder inte animationer.

Content Security Policy (CSP) kompatibilitet

Om din webbplats har en innehållssäkerhetspolicy (CSP) som inte tillåter style-src 'unsafe-inline'kommer du inte att kunna använda inline- styleattribut för att ställa in förloppsindikatorns bredd som visas i våra exempel nedan. Alternativa metoder för att ställa in bredder som är kompatibla med strikta CSP:er inkluderar att använda lite anpassad JavaScript (som ställer in element.style.width) eller att använda anpassade CSS-klasser.

Grundläggande exempel

Standard förloppsindikator.

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

Ta bort klassen <span>med .sr-onlyfrån förloppsfältet för att visa en synlig procentandel.

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>

För att säkerställa att etiketttexten förblir läsbar även för låga procentsatser, överväg att lägga till a min-widthi förloppsindikatorn.

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>

Kontextuella alternativ

Förloppsindikatorer använder några av samma knapp- och varningsklasser för konsekventa stilar.

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

Randig

Använder en gradient för att skapa en randig effekt. Ej tillgängligt i IE9 och nedan.

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

Animerad

Lägg .activetill .progress-bar-stripedför att animera ränderna från höger till vänster. Ej tillgängligt i IE9 och nedan.

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

Staplad

Placera flera barer i samma .progressför att stapla 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>

Abstrakta objektstilar för att bygga olika typer av komponenter (som bloggkommentarer, Tweets, etc) som har en vänster- eller högerjusterad bild tillsammans med textinnehåll.

Standardmedia

Standardmediet visar ett medieobjekt (bilder, video, ljud) till vänster eller höger om ett innehållsblock.

Media rubrik

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

Media rubrik

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

Kapslad mediarubrik

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

Media rubrik

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

Media rubrik

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate vid, 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>

Klasserna .pull-leftoch .pull-rightfinns också och användes tidigare som en del av mediekomponenten, men är utfasade för den användningen från och med v3.3.0. De motsvarar ungefär .media-leftoch .media-right, förutom att .media-rightde ska placeras efter .media-bodyi html.

Medieuppriktning

Bilderna eller andra media kan justeras upptill, mitten eller nedtill. Standardinställningen är toppjusterad.

Toppjusterat media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate vid, 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.

Mellanjusterat media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate vid, 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.

Bottenjusterat media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate vid, 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>

Medialista

Med lite extra uppmärkning kan du använda media inuti listan (användbart för kommentarstrådar eller artikellistor).

Media rubrik

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

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

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

Kapslad mediarubrik
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate vid, 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>

Listgrupper är en flexibel och kraftfull komponent för att visa inte bara enkla listor med element, utan komplexa sådana med anpassat innehåll.

Grundläggande exempel

Den mest grundläggande listgruppen är helt enkelt en oordnad lista med listobjekt och de rätta klasserna. Bygg på det med alternativen som följer, eller din egen CSS efter behov.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum vid 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>

Märken

Lägg till märkeskomponenten i valfri listgrupp så kommer den automatiskt att placeras till höger.

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

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

Länkade objekt

Länka listgruppobjekt genom att använda ankartaggar istället för listobjekt (det betyder också en förälder <div>istället för en <ul>). Inget behov av enskilda föräldrar runt varje element.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum vid 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>

Knappobjekt

Listgruppobjekt kan vara knappar istället för listobjekt (det betyder också en förälder <div>istället för en <ul>). Inget behov av enskilda föräldrar runt varje element. Använd inte standardklasserna .btnhär.

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

Inaktiverade objekt

Lägg .disabledtill i en .list-group-itemför att gråa så att den verkar inaktiverad.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum vid 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>

Kontextuella klasser

Använd kontextuella klasser för att utforma listobjekt, standard eller länkade. Inkluderar även .activestaten.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum vid eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum vid 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>

Anpassat innehåll

Lägg till nästan vilken HTML som helst inom, även för länkade listgrupper som den nedan.

Rubrik för listgruppobjekt

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

Rubrik för listgruppobjekt

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

Rubrik för listgruppobjekt

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>

Även om det inte alltid är nödvändigt, behöver du ibland lägga din DOM i en låda. För dessa situationer, prova panelkomponenten.

Grundläggande exempel

Som standard är det .panelenda du behöver använda en grundläggande ram och utfyllnad för att innehålla innehåll.

Grundläggande panelexempel

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

Panel med rubrik

Lägg enkelt till en rubrikbehållare till din panel med .panel-heading. Du kan också inkludera vilken som helst <h1>- <h6>med en .panel-titleklass för att lägga till en förinställd rubrik. Teckenstorlekarna för <h1>- <h6>åsidosätts dock av .panel-heading.

För korrekt länkfärgning, se till att placera länkar i rubriker inom .panel-title.

Panelrubrik utan titel

Panelinnehåll

Panelens titel

Panelinnehåll

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

Radbryt knappar eller sekundär text i .panel-footer. Observera att panelsidfötter inte ärver färger och ramar när du använder kontextuella variationer eftersom de inte är avsedda att vara i förgrunden.

Panelinnehåll

Panelsidfot

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

Kontextuella alternativ

Precis som andra komponenter kan du enkelt göra en panel mer meningsfull för ett visst sammanhang genom att lägga till någon av de kontextuella tillståndsklasserna.

Panelens titel

Panelinnehåll

Panelens titel

Panelinnehåll

Panelens titel

Panelinnehåll

Panelens titel

Panelinnehåll

Panelens titel

Panelinnehåll

<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

Lägg till alla icke-kantade .tableinom en panel för en sömlös design. Om det finns en .panel-body, lägger vi till en extra kant längst upp på tabellen för separation.

Panel rubrik

Lite standardpanelinnehåll här. Nulla vitae elit libero, a 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.

#	Förnamn	Efternamn	Användarnamn
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@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>

Om det inte finns någon panelkropp flyttas komponenten från panelhuvud till tabell utan avbrott.

Panel rubrik

#	Förnamn	Efternamn	Användarnamn
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@Twitter

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

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

Med listgrupper

Inkludera enkelt listgrupper i full bredd i vilken panel som helst.

Panel rubrik

Lite standardpanelinnehåll här. Nulla vitae elit libero, a 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 in
Morbi leo risus
Porta ac consectetur ac
Vestibulum vid 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>

Tillåt webbläsare att bestämma video- eller bildspelsdimensioner baserat på bredden på deras innehållande block genom att skapa ett inneboende förhållande som kommer att skalas korrekt på alla enheter.

Regler tillämpas direkt på <iframe>, <embed>, <video>, och <object>element; använd eventuellt en explicit efterkommande klass .embed-responsive-itemnär du vill matcha stilen för andra attribut.

Proffstips! Du behöver inte inkludera frameborder="0"i dina <iframe>s eftersom vi åsidosätter det åt 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 väl

Använd brunnen som en enkel effekt på ett element för att ge det en infälld effekt.

Titta, jag är i en brunn!

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

Valfria klasser

Kontrollstoppning och rundade hörn med två valfria modifieringsklasser.

Titta, jag är i en stor brunn!

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

Titta, jag är i en liten brunn!

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

Komponenter

Glyfikoner

Tillgängliga glyfer

Hur man använder

Blanda inte med andra komponenter

Endast för användning på tomma element

Ändra ikonens teckensnittsplats

Tillgängliga ikoner

Exempel

Dropdowns

Exempel

Inriktning

Kan kräva ytterligare positionering

Utfasad .pull-rightjustering

Rubriker

Delare

Inaktiverade menyalternativ

Knappgrupper

Verktygstips och popovers i knappgrupper kräver speciella inställningar

Se till att det är rätt roleoch tillhandahåll en etikett

Grundläggande exempel

Knappens verktygsfält

Dimensionering

Häckande

Vertikal variation

Justerade knappgrupper

Hantera gränser

IE8 och gränser

Med <a>element

Länkar som fungerar som knappar

Med <button>element

Nedrullningsbara knappar

Plugin-beroende

En knapp rullgardinsmeny

Rullgardinsmenyer för dela knappar

Dimensionering

Dropup variation

Inmatningsgrupper

Endast <input>text

Verktygstips och popovers i inmatningsgrupper kräver speciella inställningar

Blanda inte med andra komponenter

Lägg alltid till etiketter

Grundläggande exempel

Dimensionering

Kryssrutor och radiotillägg

Knapptillägg

Knappar med rullgardinsmenyer

Segmenterade knappar

Flera knappar

Navs

Att använda nav för flikpaneler kräver JavaScript-flikar-plugin

Gör nav som används som navigering tillgängliga

Flikar

Biljard

Berättigat

Safari och lyhörd berättigad navigering

Inaktiverade länkar

Länkfunktionen påverkas inte

Använder rullgardinsmenyn

Flikar med rullgardinsmenyer

Piller med dropdowns

Navbar

Standard navigeringsfält

Överflödande innehåll

Kräver JavaScript-plugin

Ändra den komprimerade brytpunkten för mobilnavigeringsfältet

Gör navbarer tillgängliga

Märkesbild

Blanketter

Varningar för mobila enheter

Lägg alltid till etiketter

Knappar

Kontextspecifik användning

Text

Icke-navigeringslänkar

Komponentjustering

Högerjustera flera komponenter

Fast upptill

Kroppsstoppning krävs

Fast i botten

Utfasad `.pull-right`justering

Se till att det är rätt `role`och tillhandahåll en etikett

Med `<a>`element

Med `<button>`element

Endast `<input>`text