Glyfikoner

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.

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

Dropdowns

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

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>

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.

Kan kräva ytterligare positionering

Dropdown-menyn placeras automatiskt via CSS inom dokumentets normala flöde. Detta innebär att rullgardinsmenyer kan beskäras av föräldrar med vissa overflowegenskaper eller visas utanför gränserna för visningsporten. Ta itu med dessa problem på egen hand när de uppstår.

Utfasad .pull-rightjustering

Från och med v3.1.0 har vi utfasat .pull-rightrullgardinsmenyerna. För att högerjustera en meny, använd .dropdown-menu-right. Högerjusterade nav-komponenter i navigeringsfältet använder en mixin-version av den här klassen för att automatiskt justera menyn. För att åsidosätta det, använd .dropdown-menu-left.

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

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>

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>

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>

Knappgrupper

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

Knappens verktygsfält

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.

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

Nedrullningsbara knappar

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>

Inmatningsgrupper

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.

@

@exempel.com

$ 0,00

https://example.com/users/
<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>

Navs

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.

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>

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>

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>

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>

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>

Navbar

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:

  1. Minska mängden eller bredden på navbar-objekt.
  2. Dölj vissa navbarobjekt i vissa skärmstorlekar med hjälp av responsiva verktygsklasser .
  3. Ä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.

Kräver JavaScript-plugin

Om JavaScript är inaktiverat och visningsporten är tillräckligt smal för att navigeringsfältet kollapsar, kommer det att vara omöjligt att expandera navigeringsfältet och visa innehållet i .navbar-collapse.

Det lyhörda navigeringsfältet kräver att kollaps-pluginen ingår i din version av Bootstrap.

Ändra den komprimerade brytpunkten för mobilnavigeringsfältet

Navigeringsfältet kollapsar till sin vertikala mobila vy när visningsporten är smalare än @grid-float-breakpoint, och expanderar till sin horisontella icke-mobila vy när visningsporten är åtminstone @grid-float-breakpointbred. Justera denna variabel i källan Mindre för att styra när navigeringsfältet kollapsar/expanderar. Standardvärdet är 768px(den minsta "lilla" eller "surfplatta" skärmen).

Gör navbarer tillgängliga

Var noga med att använda ett <nav>element eller, om du använder ett mer generiskt element som t.ex. ett <div>, lägg till ett role="navigation"i varje navigeringsfält för att uttryckligen identifiera det som ett landmärkesområde för användare av hjälpmedelsteknik.

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

Varningar för mobila enheter

Det finns några varningar när det gäller att använda formulärkontroller inom fasta element på mobila enheter. Se våra webbläsarsupportdokument för detaljer.

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>

Kontextspecifik användning

Precis som standardknappklasserna kan.navbar-btn de användas på <a>och <input>element. Däremot bör varken .navbar-btneller standardknappklasserna användas på <a>element inom .navbar-nav.

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.

Högerjustera flera komponenter

Navbars har för närvarande en begränsning med flera .navbar-rightklasser. För att placera innehåll korrekt använder vi negativ marginal på det sista .navbar-rightelementet. När det finns flera element som använder den klassen, fungerar dessa marginaler inte som avsett.

Vi kommer att återkomma till detta när vi kan skriva om den komponenten i v4.

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>

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>

Etiketter

Exempel

Exempelrubrik Ny

Exempelrubrik Ny

Exempelrubrik Ny

Exempelrubrik Ny

Exempelrubrik Ny
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 .

Märken

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>

Jumbotron

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>

Sidhuvud

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>

Miniatyrer

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.

100 % x 200

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

100 % x 200

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

100 % x 200

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>

Varningar

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.

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

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

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

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

Framstegsindikatorer

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.

60 % komplett
<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.

40 % klar (framgång)
20% komplett
60 % komplett (varning)
80 % komplett (fara)
<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.

40 % klar (framgång)
20% komplett
60 % komplett (varning)
80 % komplett (fara)
<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.

45 % komplett
<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.

35 % klar (framgång)
20 % komplett (varning)
10 % komplett (fara)
<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>

Mediaobjekt

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>

Listgrupp

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.

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

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

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

Paneler

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

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

Responsiv inbäddning

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>

Wells

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>