Glyphicons

Tilgængelige glyffer

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

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

Sådan bruges

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

Bland ikke med andre komponenter

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

Kun til brug på tomme elementer

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

Ændring af ikonets skrifttypeplacering

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

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

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

Tilgængelige ikoner

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

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

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

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

Eksempler

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

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

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

Et ikon, der bruges i en advarsel til at formidle, at det er en fejlmeddelelse, med yderligere .sr-onlytekst for at formidle dette tip til brugere af hjælpeteknologier.

<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

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

Pak rullemenuens udløser og rullemenuen i .dropdown, eller et andet element, der erklærer position: relative;. Tilføj derefter menuens HTML.

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

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

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

Som standard placeres en rullemenu automatisk 100 % fra toppen og langs venstre side af dens forælder. Føj .dropdown-menu-righttil en .dropdown-menuhøjrejuster rullemenuen.

Kan kræve yderligere positionering

Dropdowns placeres automatisk via CSS inden for dokumentets normale flow. Det betyder, at rullemenuer kan beskæres af forældre med visse overflowegenskaber eller vises uden for visningsportens grænser. Løs disse problemer på egen hånd, efterhånden som de opstår.

Forældet .pull-rightjustering

Fra v3.1.0 har vi forældet .pull-rightrullemenuer. Brug for at højrejustere en menu .dropdown-menu-right. Højrejusterede nav-komponenter i navbaren bruger en mixin-version af denne klasse til automatisk at justere menuen. For at tilsidesætte det, brug .dropdown-menu-left.

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

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

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

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

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

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

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

Knapgrupper

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

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

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

Sørg for korrekt roleog giv en etiket

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

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

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

Grundlæggende eksempel

Pak en række knapper ind .btnmed .btn-group.

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

Knap værktøjslinje

Kombiner sæt <div class="btn-group">til en <div class="btn-toolbar">for mere komplekse komponenter.

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

Dimensionering

I stedet for at anvende knapstørrelsesklasser på hver knap i en gruppe, skal du bare tilføje .btn-group-*til hver .btn-group, også når du indlejrer flere grupper.




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

Indlejring

Placer en .btn-groupi en anden .btn-group, når du vil have rullemenuer blandet med en række knapper.

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

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

Lodret variation

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

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

Justerede knapgrupper

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

Håndtering af grænser

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

IE8 og grænser

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

Se #12476 for mere information.

Med <a>elementer

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

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

Links, der fungerer som knapper

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

Med <button>elementer

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

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

Knap rullemenuer

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

Plugin-afhængighed

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

Enkeltknap rullemenuer

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

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

Rullemenuer med splitknap

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

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

Dimensionering

Knap dropdowns fungerer med knapper i alle størrelser.

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

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

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

Dropup variation

Udløs rullemenuer over elementer ved at tilføje .dropuptil det overordnede.

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

Input grupper

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

Kun tekstlige <input>s

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

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

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

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

Bland ikke med andre komponenter

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

Tilføj altid etiketter

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

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

Grundlæggende eksempel

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

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

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

@

@eksempel.com

$ 0,00

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

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

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

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

Dimensionering

Føj de relative formstørrelsesklasser til sig .input-groupselv, og indholdet indenfor vil automatisk ændre størrelsen – det er ikke nødvendigt at gentage formkontrolstørrelsesklasserne på hvert element.

@

@

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

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

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

Afkrydsningsfelter og radiotilføjelser

Placer et afkrydsningsfelt eller radioindstilling i en inputgruppes tilføjelse i stedet for tekst.

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

Knap tilføjelser

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

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

Knapper med dropdowns

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

Segmenterede knapper

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

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

Flere knapper

Selvom du kun kan have én tilføjelse pr. side, kan du have flere knapper inde i en enkelt .input-group-btn.

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

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

Navs

Navs tilgængelige i Bootstrap har delt opmærkning, startende med basisklassen .nav, såvel som delte tilstande. Skift modifikatorklasser for at skifte mellem hver stil.

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

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

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

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

Bemærk, at .nav-tabsklassen kræver .navbasisklassen.

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

Tag den samme HTML, men brug .nav-pillsi stedet:

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

Piller kan også stables lodret. Bare tilføj .nav-stacked.

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

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

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

Safari og responsive berettigede nav

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

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

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

Linkfunktionaliteten er ikke påvirket

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

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

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

Faner med rullemenuer

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

Piller med dropdowns

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

Navbar

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

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

Overfyldt indhold

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

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

Kræver JavaScript-plugin

Hvis JavaScript er deaktiveret, og visningsporten er snæver nok til, at navigationslinjen kollapser, vil det være umuligt at udvide navlinjen og se indholdet i.navbar-collapse .

Den responsive navbar kræver, at sammenbrudspluginnet er inkluderet i din version af Bootstrap.

Ændring af det skjulte mobile navbar-brudpunkt

Navigationslinjen falder sammen til dens lodrette mobile visning, når visningsporten er smallere end @grid-float-breakpoint, og udvides til dens vandrette ikke-mobile visning, når visningsporten er mindst @grid-float-breakpointi bredden. Juster denne variabel i kilden Mindre for at kontrollere, hvornår navigationslinjen kollapser/udvides. Standardværdien er 768px(den mindste "lille" eller "tablet"-skærm).

Gør navbarer tilgængelige

Sørg for at bruge et <nav>element, eller hvis du bruger et mere generisk element som f.eks. en <div>, tilføj et role="navigation"til hver navbar for eksplicit at identificere det som et skelsættende område for brugere af hjælpeteknologier.

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

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

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

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

Placer formularindhold inden .navbar-formfor for korrekt lodret justering og sammenklappet adfærd i smalle visningsporte. Brug justeringsindstillingerne til at bestemme, hvor den befinder sig i navbarens indhold.

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

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

Forbehold for mobilenheder

Der er nogle forbehold vedrørende brug af formularkontrolelementer i faste elementer på mobile enheder. Se vores browsersupportdokumenter for detaljer.

Tilføj altid etiketter

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

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

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

Kontekstspecifik brug

Ligesom standard knapklasserne kan .navbar-btnbruges på <a>og <input>elementer. Hverken .navbar-btneller standardknapklasserne bør dog bruges på <a>elementer inden for .navbar-nav.

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

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

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

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

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

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

Højrejustering af flere komponenter

Navbars har i øjeblikket en begrænsning med flere .navbar-rightklasser. For at placere indhold korrekt, bruger vi negativ margen på det sidste .navbar-rightelement. Når der er flere elementer, der bruger den klasse, fungerer disse marginer ikke efter hensigten.

Vi vil se på dette igen, når vi kan omskrive den komponent i v4.

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

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

Kropspolstring påkrævet

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

body { padding-top: 70px; }

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

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

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

Kropspolstring påkrævet

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

body { padding-bottom: 70px; }

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

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

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

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

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

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

Brødkrummer

Angiv den aktuelle sides placering i et navigationshierarki.

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

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

Sideinddeling

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

Standard paginering

Enkel paginering inspireret af Rdio, fantastisk til apps og søgeresultater. Den store blok er svær at gå glip af, let skalerbar og giver store klikområder.

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

Mærkning af pagineringskomponenten

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

Deaktiveret og aktiv tilstand

Links kan tilpasses til forskellige omstændigheder. Bruges .disabledtil uklikbare links og .activetil at angive den aktuelle side.

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

Vi anbefaler, at du udskifter aktive eller deaktiverede ankre med <span>, eller udelader ankeret i tilfælde af de forrige/næste pile, for at fjerne klikfunktionaliteten, mens du beholder tilsigtede stilarter.

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

Dimensionering

Kunne du tænke dig større eller mindre paginering? Tilføj .pagination-lgeller .pagination-smfor yderligere størrelser.

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

Personsøger

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

Standard eksempel

Som standard centrerer personsøgeren links.

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

Alternativt kan du justere hvert link til siderne:

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

Valgfri deaktiveret tilstand

Pager-links bruger også den generelle .disabledhjælpeklasse fra pagineringen.

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

Etiketter

Eksempel

Eksempel overskrift Ny

Eksempel overskrift Ny

Eksempel overskrift Ny

Eksempel overskrift Ny

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

Tilgængelige varianter

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

Standard Primær Success Info Advarsel Fare
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Har du tonsvis af etiketter?

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

Badges

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

Indbakke 42

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

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

Selv kollapsende

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

Cross-browser kompatibilitet

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

Tilpasser sig aktive nav-tilstande

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

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

Jumbotron

En let, fleksibel komponent, der valgfrit kan udvide hele visningsporten for at fremvise nøgleindhold på dit websted.

Hej Verden!

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

Lær mere

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

For at gøre jumbotronen i fuld bredde, og uden afrundede hjørner, skal du placere den uden for alle .containers og i stedet tilføje en .containerindeni.

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

Sidehoved

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

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

Miniaturebilleder

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

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

Standard eksempel

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

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

Tilpasset indhold

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

100 % x 200

Miniaturelabel

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

Knap Knap

100 % x 200

Miniaturelabel

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

Knap Knap

100 % x 200

Miniaturelabel

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

Knap Knap

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

Advarsler

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

Eksempler

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

Ingen standardklasse

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

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

Advarsler, der kan afvises

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

Kræver JavaScript-advarselsplugin

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

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

Sørg for korrekt adfærd på tværs af alle enheder

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

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

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

Fremskridtsbjælker

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

Cross-browser kompatibilitet

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

Content Security Policy (CSP) kompatibilitet

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

Grundlæggende eksempel

Standard statuslinje.

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

Med etiket

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

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

For at sikre, at etiketteksten forbliver læselig selv for lave procenter, kan du overveje at tilføje et min-widthtil statuslinjen.

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

Kontekstuelle alternativer

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

40 % gennemført (succes)
20% færdig
60 % gennemført (advarsel)
80 % fuldført (fare)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Stribet

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

40 % gennemført (succes)
20% færdig
60 % gennemført (advarsel)
80 % fuldført (fare)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animeret

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

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

Stablet

Placer flere stænger i det samme .progressfor at stable dem.

35 % gennemført (succes)
20 % gennemført (advarsel)
10 % fuldført (fare)
<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>

Medieobjekt

Abstrakte objektstile til at bygge forskellige typer komponenter (såsom blogkommentarer, tweets osv.), der har et venstre- eller højrejusteret billede sammen med tekstindhold.

Standardmedie

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

Mediers overskrift

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

Mediers overskrift

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

Indlejret medieoverskrift

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

Mediers overskrift

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

Mediers overskrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

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

Mediejustering

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

Topjusterede medier

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

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

Midtjusteret medie

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

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

Bundjusteret medie

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

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

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

Medieliste

Med lidt ekstra opmærkning kan du bruge medier inde i listen (nyttigt til kommentartråde eller artikellister).

  • Mediers overskrift

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

    Indlejret medieoverskrift

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

    Indlejret medieoverskrift

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

    Indlejret medieoverskrift

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Listegruppe

Listegrupper er en fleksibel og kraftfuld komponent til at vise ikke kun simple lister over elementer, men komplekse med tilpasset indhold.

Grundlæggende eksempel

Den mest basale listegruppe er simpelthen en uordnet liste med listeelementer og de rigtige klasser. Byg videre på det med de muligheder, der følger, eller din egen CSS efter behov.

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

Badges

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

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis i
  • 1 Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Tilknyttede varer

Tilknyt listegruppeelementer ved at bruge ankertags i stedet for listeelementer (det betyder også en forælder <div>i stedet for en <ul>). Der er ikke behov for individuelle forældre omkring hvert element.

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

Knapelementer

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

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

Deaktiverede varer

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

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

Kontekstuelle klasser

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

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

Tilpasset indhold

Tilføj næsten enhver HTML indeni, selv for linkede listegrupper som den nedenfor.

<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

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

Grundlæggende eksempel

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

Grundlæggende paneleksempel
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel med overskrift

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

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

Paneloverskrift uden titel
Panelindhold

Panelets titel

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

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

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

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

Kontekstuelle alternativer

Som andre komponenter kan du nemt gøre et panel mere meningsfuldt for en bestemt kontekst ved at tilføje en af ​​de kontekstuelle tilstandsklasser.

Panelets titel

Panelindhold

Panelets titel

Panelindhold

Panelets titel

Panelindhold

Panelets titel

Panelindhold

Panelets titel

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

Med borde

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

Paneloverskrift

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

# Fornavn Efternavn Brugernavn
1 Mærke Otto @mdo
2 Jacob Thornton @fed
3 Larry fuglen @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

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

Hvis der ikke er nogen paneltekst, flyttes komponenten fra paneloverskrift til tabel uden afbrydelse.

Paneloverskrift
# Fornavn Efternavn Brugernavn
1 Mærke Otto @mdo
2 Jacob Thornton @fed
3 Larry fuglen @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Med listegrupper

Medtag nemt listegrupper i fuld bredde i ethvert panel.

Paneloverskrift

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

  • Cras justo odio
  • Dapibus ac facilisis i
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum ved eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

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

Responsiv indlejring

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

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

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

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

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

Wells

Standard godt

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

Se, jeg er i en brønd!
<div class="well">...</div>

Valgfri klasser

Kontrolpolstring og afrundede hjørner med to valgfri modifikationsklasser.

Se, jeg er i en stor brønd!
<div class="well well-lg">...</div>
Se, jeg er i en lille brønd!
<div class="well well-sm">...</div>