Verfügbar Glyphen

Ëmfaasst iwwer 250 Glyphen a Schrëftformat aus dem Glyphicon Halflings Set. Glyphicons Halflings sinn normalerweis net gratis verfügbar, awer hire Schëpfer huet se gratis fir Bootstrap zur Verfügung gestallt. Als Merci froe mir nëmmen datt Dir e Link zréck op Glyphicons enthält wa méiglech.

glyphicon glyphicon-Asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-wollek
glyphicon glyphicon-Enveloppe
Glyphicon Glyphicon-Bleistift
glyphicon glyphicon-glas
glyphicon glyphicon-Musek
glyphicon glyphicon-sich
glyphicon glyphicon-Häerz
glyphicon glyphicon-Stär
glyphicon glyphicon-Stär-eidel
glyphicon glyphicon-Benotzer
glyphicon glyphicon-film
glyphicon glyphicon-th-grouss
glyphicon glyphicon-th
glyphicon glyphicon-th-Lëscht
glyphicon glyphicon-ok
glyphicon glyphicon-entfernen
glyphicon glyphicon-Zoom-in
glyphicon glyphicon-Zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-Signal
glyphicon glyphicon-Zann
glyphicon glyphicon-Trash
glyphicon glyphicon-doheem
glyphicon glyphicon-Datei
glyphicon glyphicon-Zäit
glyphicon glyphicon-Strooss
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-Inbox
glyphicon glyphicon-Spill-Krees
glyphicon glyphicon-widderhuelen
glyphicon glyphicon-erfrëschen
glyphicon glyphicon-list-alt
glyphicon glyphicon-Spär
glyphicon glyphicon-Fändel
glyphicon glyphicon-Kopfhörer
glyphicon glyphicon-volumen-off
glyphicon glyphicon-Volumen-Down
glyphicon glyphicon-Volumen-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-buch
glyphicon glyphicon-Bookmark
glyphicon glyphicon-print
glyphicon glyphicon-Kamera
glyphicon glyphicon-Schrëft
glyphicon glyphicon-fett
glyphicon glyphicon-kursiv
glyphicon glyphicon-Text-Héicht
glyphicon glyphicon-Text-Breet
glyphicon glyphicon-align-lénks
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-Lëscht
glyphicon glyphicon-indent-lénks
glyphicon glyphicon-indent-riets
glyphicon glyphicon-facetime-video
glyphicon glyphicon-Bild
glyphicon glyphicon-map-marker
glyphicon glyphicon-ajustéieren
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-deelen
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-Schrëtt-zeréck
glyphicon glyphicon-séier-zréck
glyphicon glyphicon-zeréck
glyphicon glyphicon-Spill
glyphicon glyphicon-paus
glyphicon glyphicon-stoppen
glyphicon glyphicon-viraus
glyphicon glyphicon-séier-Forward
glyphicon glyphicon-Schrëtt-Forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-lénks
glyphicon glyphicon-chevron-riets
glyphicon glyphicon-plus-Zeechen
glyphicon glyphicon-minus-Zeechen
glyphicon glyphicon-entfernen-Zeechen
glyphicon glyphicon-ok-sign
glyphicon glyphicon-Fro-Zeechen
glyphicon glyphicon-info-sign
glyphicon glyphicon-Screenshot
glyphicon glyphicon-ewechhuelen-Krees
glyphicon glyphicon-ok-krees
glyphicon glyphicon-verbuet-Krees
glyphicon glyphicon-Pfeil-lénks
glyphicon glyphicon-Pfeil-riets
glyphicon glyphicon-Pfeil-up
glyphicon glyphicon-Pfeil erof
glyphicon glyphicon-share-alt
glyphicon glyphicon-Gréisst änneren-voll
glyphicon glyphicon-Gréisst änneren-kleng
glyphicon glyphicon-Ausrufezeichen
glyphicon glyphicon-Geschenk
glyphicon glyphicon-Blat
glyphicon glyphicon-feier
glyphicon glyphicon-Aen-oppen
glyphicon glyphicon-Aen-zou
glyphicon glyphicon-warnungszeichen
glyphicon glyphicon-Fliger
glyphicon glyphicon-Kalenner
glyphicon glyphicon-zoufälleg
glyphicon glyphicon-kommentar
glyphicon glyphicon-Magnéit
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-Dossier-zou
glyphicon glyphicon-Dossier-oppen
glyphicon glyphicon-Gréisst änneren-vertikal
glyphicon glyphicon-Gréisst änneren-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-Zertifikat
glyphicon glyphicon-Daumen-up
glyphicon glyphicon-Daumen-down
glyphicon glyphicon-hand-riets
glyphicon glyphicon-Hand-lénks
glyphicon glyphicon-Hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-krees-Pfeil-riets
glyphicon glyphicon-Krees-Pfeil-lénks
glyphicon glyphicon-Circle-Pfeil-up
glyphicon glyphicon-Circle-Pfeil-Down
glyphicon glyphicon-globe
Glyphicon Glyphicon-Schlüssel
glyphicon glyphicon-Aufgaben
Glyphicon Glyphicon Filter
glyphicon glyphicon-koffer
glyphicon glyphicon-Vollbildschierm
glyphicon glyphicon-Dashboard
glyphicon glyphicon-Paperclip
glyphicon glyphicon-Häerz-eidel
glyphicon glyphicon-Link
glyphicon glyphicon-Telefon
glyphicon glyphicon-Pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-Zort
glyphicon glyphicon-Zort-op-Alfabet
glyphicon glyphicon-sortéieren-op-Alphabet-alt
glyphicon glyphicon-Zort-vun-Uerdnung
glyphicon glyphicon-Zort-op-Uerdnung-alt
glyphicon glyphicon-Zort-vun-Attributer
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-unchecked
glyphicon glyphicon-erweideren
glyphicon glyphicon-zesummebroch-verwandelt
glyphicon glyphicon-Zoufall
glyphicon glyphicon-Login
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-nei-Fënster
glyphicon glyphicon-Rekord
glyphicon glyphicon-späicheren
glyphicon glyphicon-oppen
glyphicon glyphicon-gespuert
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-schécken
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-gespuert
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-späicheren
glyphicon glyphicon-floppy-oppen
glyphicon glyphicon-Kreditkaart
glyphicon glyphicon-Transfer
glyphicon glyphicon-besteck
glyphicon glyphicon-header
glyphicon glyphicon-kompriméiert
glyphicon glyphicon-Earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tuerm
glyphicon glyphicon-statistiken
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-Ënnertitelen
glyphicon glyphicon-Sound-Stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-Copyright-Mark
glyphicon glyphicon-Registréierungsmark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-späicheren-Datei
glyphicon glyphicon-Open-Datei
glyphicon glyphicon-Niveau erop
glyphicon glyphicon-Kopie
glyphicon glyphicon-paste
glyphicon glyphicon-alarm
glyphicon glyphicon-Equalizer
glyphicon glyphicon-Kinnek
glyphicon glyphicon-Queen
glyphicon glyphicon-Pawn
glyphicon glyphicon-Bëschof
glyphicon glyphicon-ritter
glyphicon glyphicon-Baby-Formel
glyphicon glyphicon-Zelt
glyphicon glyphicon-Blackboard
glyphicon glyphicon-Bett
glyphicon glyphicon-apple
glyphicon glyphicon-läschen
glyphicon glyphicon-Stonnglas
glyphicon glyphicon-lamp
glyphicon glyphicon-duplizéiert
glyphicon glyphicon-Piggy-Bank
glyphicon glyphicon-Schéier
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-reiwen
glyphicon glyphicon-Skala
glyphicon glyphicon-Äis-Lolly
glyphicon glyphicon-Äis-Lolly-geschmaacht
glyphicon glyphicon-Ausbildung
glyphicon glyphicon-Optioun-horizontal
glyphicon glyphicon-Optioun-vertikal
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-Fënster
glyphicon glyphicon-Ueleg
glyphicon glyphicon-grain
glyphicon glyphicon-Sonnebrëller
glyphicon glyphicon-Textgréisst
glyphicon glyphicon-Text-Faarf
glyphicon glyphicon-Text-Hannergrond
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-Dräilännereck-riets
glyphicon glyphicon-Dräilännereck-lénks
glyphicon glyphicon-Dräilännereck-ënnen
glyphicon glyphicon-dreieck-top
glyphicon glyphicon-konsole
glyphicon glyphicon-Superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-lénks
glyphicon glyphicon-Menu-Recht
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Wéi benotzen

Aus Leeschtungsgrënn erfuerderen all Symboler eng Basisklass an eng individuell Ikonklass. Ze benotzen, Plaz de folgende Code just iwwerall. Vergewëssert Iech e Raum tëscht der Ikon an dem Text fir eng korrekt Padding ze loossen.

Vermëschen net mat anere Komponenten

Ikon Klassen kënnen net direkt mat anere Komponente kombinéiert ginn. Si sollen net zesumme mat anere Klassen op déi selwecht Element benotzt ginn. Amplaz, füügt eng nestéiert <span>an applizéiert d'Ikonklassen op d' <span>.

Nëmme fir benotzen op eidel Elementer

Ikon Klassen sollen nëmmen op Elementer benotzt ginn, déi keen Text Inhalt enthalen a keng Kanner Elementer hunn.

Änneren der Ikon Schrëft Plaz

Bootstrap iwwerhëlt Ikon Schrëftdateien am ../fonts/Verzeechnes läit, relativ zu de kompiléierte CSS Dateien. Beweegen oder ëmbenennen dës Schrëftdateien bedeit d'Update vun der CSS op eng vun dräi Weeër:

Änneren @icon-font-pathan / oder @icon-font-nameVariabelen an der Quell Manner Fichieren.
Benotzt d' relativ URLen Optioun, déi vum Less Compiler geliwwert gëtt.
Ännert d' url()Weeër an der kompiléierter CSS.

Benotzt egal wéi eng Optioun déi am Beschten Äre spezifesche Entwécklungssetup passt.

Zougänglech Ikonen

Modern Versioune vun Hëllefstechnologien wäerten CSS generéiert Inhalt annoncéieren, souwéi spezifesch Unicode Charaktere. Fir ongewollt a konfus Ausgang an Écran Lieser ze vermeiden (besonnesch wann Ikonen reng fir Dekoratioun benotzt ginn), verstoppe mir se mam aria-hidden="true"Attribut.

Wann Dir eng Ikon benotzt fir Bedeitung ze vermëttelen (anstatt nëmmen als dekorativen Element), gitt sécher datt dës Bedeitung och un Assistenztechnologien vermëttelt gëtt - zum Beispill zousätzlech Inhalter enthalen, visuell verstoppt mat der .sr-onlyKlass.

Wann Dir Kontrollen erstellt ouni aner Text (wéi zum Beispill en <button>deen nëmmen eng Ikon enthält), sollt Dir ëmmer alternativ Inhalter ubidden fir den Zweck vun der Kontroll z'identifizéieren, sou datt et Sënn mécht fir d'Benotzer vun Hëllefstechnologien. An dësem Fall kënnt Dir en aria-labelAttribut op der Kontroll selwer addéieren.

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

Beispiller

Benotzt se a Knäppercher, Knäpperchergruppen fir eng Toolbar, Navigatioun oder Prepended Form Input.

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

Eng Ikon déi an enger Alarm benotzt gëtt fir ze vermëttelen datt et eng Fehlermeldung ass, mat zousätzlechen .sr-onlyText fir dësen Hiweis un d'Benotzer vun Hëllefstechnologien ze vermëttelen.

Gitt eng valabel Email Adress

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

Toggleable, Kontextmenü fir Lëschte vu Linken ze weisen. Interaktiv gemaach mam Dropdown JavaScript Plugin .

Beispill

Wickelt den Ausléiser vum Dropdown an den Dropdown-Menü bannent .dropdown, oder en anert Element dat deklaréiert position: relative;. Füügt dann den HTML vum Menü derbäi.

<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-Menüen kënne geännert ginn fir no uewen (amplaz no ënnen) auszebauen andeems se .dropupun den Elterendeel bäigefüügt ginn.

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

Ausriichtung

Par défaut gëtt en Dropdown-Menü automatesch 100% vun uewen a laanscht déi lénks Säit vu sengem Elterendeel positionéiert. Füügt .dropdown-menu-rightop eng .dropdown-menuriets ausgeriicht den Dropdown-Menü.

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

Header

Füügt en Header fir Sektiounen vun Aktiounen an all Dropdown-Menü ze markéieren.

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

Divider

Füügt en Trenndeel fir d'Serie vu Linken an engem Dropdown-Menü ze trennen.

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

Behënnert Menü Elementer

Füügt .disabledzu engem <li>am Dropdown fir de Link auszeschalten.

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

Grupp eng Rei vu Knäppercher zesummen op enger eenzeger Linn mat der Knäppchen Grupp. Füügt op optional JavaScript Radio a Checkbox Style Verhalen mat eisem Knäppchen Plugin .

Tooltips & Popovers a Knäpperchergruppen erfuerderen spezielle Kader

Wann Dir Tooltips oder Popovers op Elementer bannent engem benotzt .btn-group, musst Dir d'Optioun spezifizéieren container: 'body'fir ongewollte Nebenwirkungen ze vermeiden (sou wéi d'Element méi breet gëtt an / oder seng ofgerënnt Ecker verléiert wann den Tooltip oder Popover ausgeléist gëtt).

Vergewëssert Iech richteg `role`a gitt e Label

Fir Hëllefstechnologien - wéi Écran Lieser - ze vermëttelen datt eng Serie vu Knäppercher gruppéiert ass, muss e passenden roleAttribut geliwwert ginn. Fir Knäpperchergruppen wier dëst role="group", während Toolbaren e role="toolbar".

Eng Ausnam sinn Gruppen déi nëmmen eng eenzeg Kontroll enthalen (zum Beispill déi gerechtfäerdegt Knäppercher mat <button>Elementer) oder en Dropdown.

Ausserdeem sollten Gruppen an Toolbaren en explizit Label kréien, well déi meescht Hëllefstechnologien se soss net annoncéieren, trotz der Präsenz vum korrekten roleAttribut. An de Beispiller hei geliwwert benotze mir aria-label, awer Alternativen wéi aria-labelledbykënnen och benotzt ginn.

Basis Beispill

Wickelt eng Serie vu Knäppercher mat .btnan .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>

Kombinéiert Sätze vun <div class="btn-group">an eng <div class="btn-toolbar">fir méi komplex Komponenten.

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

Gréisst

Amplaz d'Knäppchengréisst Klassen op all Knäppchen an enger Grupp z'applizéieren, füügt just .btn-group-*un all .btn-group, och wann Dir verschidde Gruppen nestéiert.

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

Nesting

Plaz e .btn-groupbannent engem aneren .btn-groupwann Dir wëllt Dropdown-Menüen gemëscht mat enger Serie vu Knäppercher.

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

Maacht eng Rei vu Knäppercher vertikal gestapelt anstatt horizontal. Split Button Dropdowns ginn hei net ënnerstëtzt.

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

Justifizéiert Knäppchen Gruppen

Maacht e Grupp vu Knäppercher op gläiche Gréissten fir d'ganz Breet vu sengem Elterendeel ze spanen. Schafft och mat Knäppchen dropdowns bannent der Knäppchen Grupp.

Ëmgank Grenzen

Wéinst dem spezifesche HTML an CSS benotzt fir Knäppercher ze justifiéieren (nämlech display: table-cell), sinn d'Grenzen tëscht hinnen verduebelt. A reguläre Knäppercher, margin-left: -1pxgëtt benotzt fir d'Grenzen ze stackelen anstatt se ze läschen. Allerdéngs marginfunktionnéiert net mat display: table-cell. Als Resultat, ofhängeg vun Äre Personnalisatiounen op Bootstrap, wëllt Dir d'Grenzen ewechhuelen oder nei faarwen.

IE8 a Grenzen

Internet Explorer 8 liwwert keng Grenzen op Knäppercher an enger gerechtfäerdegt Knäpperchergrupp, egal ob et op <a>oder <button>Elementer ass. Fir dat ëmzegoen, wéckelt all Knäppchen an engem aneren .btn-group.

Gesinn # 12476 fir méi Informatiounen.

Mat `<a>`Elementer

Wickelt just eng Serie vu .btns an .btn-group.btn-group-justified.

Lénks Mëtt Riets

Lénks Mëtt

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

Linken déi als Knäpper handelen

Wann d' <a>Elementer benotzt gi fir als Knäppercher ze handelen - d'Funktionalitéit op der Säit ausléisen, anstatt an en anert Dokument oder Sektioun op der aktueller Säit ze navigéieren - sollten se och e passende role="button".

Mat `<button>`Elementer

Fir gerechtfäerdegt Knäppercher mat <button>Elementer ze benotzen, musst Dir all Knäpp an eng Knäppergrupp wéckelen . Déi meescht Browser applizéieren eis CSS net richteg fir <button>Elementer ze berechtegen, awer well mir Knäppchen Dropdowns ënnerstëtzen, kënne mir ronderëm dat ëmgoen.

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

Benotzt all Knäppchen fir e Dropdown-Menü auszeléisen andeems Dir en an engem plazéiert .btn-groupan déi richteg Menümarkéierung ubitt.

Plugin Ofhängegkeet

Button Dropdowns erfuerderen datt den Dropdown Plugin an Ärer Versioun vum Bootstrap abegraff ass.

Single Knäppchen Dropdowns

Maacht e Knäppchen an e Dropdown Toggle mat e puer grondleeënd Markup Ännerungen.

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

Split Knäppchen Dropdowns

Ähnlech erstellt Splitknäppchen Dropdowns mat de selwechte Markup Ännerungen, nëmme mat engem getrennten Knäppchen.

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

Gréisst

Knäppchen Dropdowns funktionnéieren mat Knäppercher vun alle Gréissten.

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

Ausléiser Dropdown-Menüen iwwer Elementer andeems Dir .dropupun den Elterendeel bäidréit.

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

Verlängert d'Form Kontrollen andeems Dir Text oder Knäppercher virum, no oder op béide Säiten vun all Text-baséiert <input>. Benotzt .input-groupmat engem .input-group-addonoder .input-group-btnfir Elementer un eng eenzeg virzebereeden oder ze addéieren .form-control.

Textuell `<input>`nëmmen

Vermeit <select>Elementer hei ze benotzen well se net komplett an WebKit Browser kënnen stylesch ginn.

Vermeit <textarea>Elementer hei ze benotzen well hiren rowsAttribut an e puer Fäll net respektéiert gëtt.

Tooltips & Popovers an Inputgruppen erfuerderen spezielle Kader

Wann Dir Tooltips oder Popovers op Elementer bannent engem benotzt .input-group, musst Dir d'Optioun spezifizéieren container: 'body'fir ongewollte Nebenwirkungen ze vermeiden (sou wéi d'Element méi breet gëtt an / oder seng ofgerënnt Ecker verléiert wann den Tooltip oder Popover ausgeléist gëtt).

Vermëschen net mat anere Komponenten

Vermëschen net Formgruppen oder Gitterkolonneklassen direkt mat Inputgruppen. Amplaz, Nest d'Input Grupp bannent der Form Grupp oder Gitter-Zesummenhang Element.

Füügt ëmmer Etiketten derbäi

Écran Lieser wäerten Problemer mat Äre Formulairen hunn wann Dir kee Label fir all Input enthält. Fir dës Inputgruppen, suergt dofir datt all zousätzlech Label oder Funktionalitéit un Hëllefstechnologien vermëttelt gëtt.

Déi genee Technik déi benotzt gëtt (siichtbar <label>Elementer, <label>Elementer verstoppt mat der Klass, oder .sr-onlyd'Benotzung vum aria-label, aria-labelledby, aria-describedbyoder Attribut) a wéi eng zousätzlech Informatioune musse vermëttelt ginn, variéieren jee no der exakt Aart vum Interface Widget deen Dir implementéiert. D'Beispiller an dëser Rubrik bidden e puer proposéiert, case-spezifesch Approche.titleplaceholder

Basis Beispill

Plaz een Add-on oder Knäppchen op béide Säiten vun engem Input. Dir kënnt och een op béide Säiten vun engem Input setzen.

Mir ënnerstëtzen net méi Add-ons ( .input-group-addonoder .input-group-btn) op enger eenzeger Säit.

Mir ënnerstëtzen net verschidde Formkontrollen an enger eenzeger Inputgrupp.

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

Gréisst

Füügt déi relativ Formgréisst Klassen un der .input-groupselwer an d'Inhalter bannen wäerten automatesch d'Gréisst änneren - kee Besoin fir d'Form Kontrollgréisst Klassen op all Element ze widderhuelen.

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

Checkboxen a Radio Addons

Setzt all Checkbox oder Radiooptioun an engem Addon vun engem Inputgrupp amplaz vum 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 -->

Knäppchen addons

Knäppercher an Input Gruppen sinn e bëssen anescht a verlaangen een extra Niveau vun Nesting. Amplaz .input-group-addon, musst Dir benotze .input-group-btnfir d'Knäppercher ze wéckelen. Dëst ass erfuerderlech wéinst Standardbrowserstiler déi net iwwerschratt kënne ginn.

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

Knäppercher mat 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 -->

Segmentéiert Knäppercher

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

Multiple Knäppercher

Och wann Dir nëmmen een Add-on pro Säit hutt, kënnt Dir verschidde Knäppercher an enger eenzeger hunn .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 verfügbar am Bootstrap hunn gedeelt Markup, ugefaange mat der .navBasisklass, souwéi gedeelt Staaten. Tauscht Modifizéierungsklassen fir tëscht all Stil ze wiesselen.

D'Benotzung vun Navs fir Tab Panels erfuerdert JavaScript Tabs Plugin

Fir Tabs mat tabbare Beräicher, musst Dir de Tabs JavaScript Plugin benotzen . D'Markup erfuerdert och zousätzlech rolean ARIA Attributer - kuckt de Beispill Markup vum Plugin fir weider Detailer.

Maachen navs benotzt als Navigatioun zougänglech

Wann Dir navs benotzt fir eng Navigatiounsbar ze bidden, gitt sécher datt Dir en role="navigation"an de logeschsten Elterenbehälter vun der <ul>bäidréit oder en <nav>Element ëm déi ganz Navigatioun wéckelt. Füügt d'Roll net un d' <ul>Selbst, well dëst verhënnert datt se als aktuell Lëscht vun Hëllefstechnologien ugekënnegt gëtt.

Tabs

Notéiert d' .nav-tabsKlass erfuerdert d' .navBasisklass.

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

Pëllen

Huelt datselwecht HTML, awer benotzt .nav-pillsamplaz:

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

Pillen sinn och vertikal stackbar. Just addéieren .nav-stacked.

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

Justifiéiert

Maacht einfach Tabs oder Pëllen déiselwecht Breet vun hiren Elteren op Schiirme méi breet wéi 768px mat .nav-justified. Op méi klengen Schiirme sinn d'Navigatiounslinks gestapelt.

Justifizéiert navbar nav Linken ginn am Moment net ënnerstëtzt.

Safari a reaktiounsfäeger gerechtfäerdegt Nav

Zënter v9.1.2 weist Safari e Feeler an deem d'Gréisst vun Ärem Browser horizontal Renderingfehler am gerechtfäerdegten Navigatioun verursaacht, déi beim Erfrëschung geläscht ginn. Dëse Feeler gëtt och am berechtegten nav Beispill gewisen .

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

Behënnerte Linken

Fir all nav Komponent (Tabs oder Pëllen), füügt .disabledfir gro Linken a keng Hover Effekter .

Link Funktionalitéit net beaflosst

Dës Klass wäert nëmmen d' <a>Erscheinung änneren, net seng Funktionalitéit. Benotzt personaliséiert JavaScript fir Linken hei auszeschalten.

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

Benotzt Dropdowns

Füügt Dropdown-Menüen mat e bëssen extra HTML an den Dropdowns JavaScript Plugin .

Tabs mat Dropdowns

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

Pillen mat Dropdowns

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

Navbars sinn reaktiounsfäeger Meta Komponenten déi als Navigatioun Header fir Är Applikatioun oder Site déngen. Si fänken un zesummegeklappt (a sinn togglebar) a mobilen Usiichten a ginn horizontal wéi déi verfügbar Viewport Breet eropgeet.

Justifizéiert navbar nav Linken ginn am Moment net ënnerstëtzt.

Iwwerflossend Inhalt

Zënter Bootstrap weess net wéi vill Plaz den Inhalt an Ärer Navbar brauch, kënnt Dir mat Probleemer mat Inhaltsverpackung an eng zweet Zeil lafen. Fir dëst ze léisen, kënnt Dir:

Reduzéieren de Betrag oder d'Breet vun Navbar Elementer.
Verstoppt bestëmmte Navbar Elementer op bestëmmte Bildschirmgréissten mat reaktiounsfäeger Utility Klassen .
Ännert de Punkt op deem Är Navbar tëscht zesummegeklappte an horizontale Modus wiesselt. Personnaliséiert d' @grid-float-breakpointVariabel oder füügt Är eege Medienufro un.

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

Ersetzt d'Navbar Mark mat Ärem eegene Bild andeems Dir den Text fir eng <img>. Zënter datt de .navbar-brandseng eege Padding an Héicht huet, musst Dir vläicht e puer CSS iwwerschreiden ofhängeg vun Ärem 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>

Plaz Form Inhalt bannen .navbar-formfir eng korrekt vertikal Ausriichtung an zesummegeklappt Verhalen a schmuele Viewports. Benotzt d'Ausrichtungsoptiounen fir ze entscheeden wou et am navbar Inhalt wunnt.

Als Heads up, .navbar-formdeelt vill vu sengem Code mat .form-inlineiwwer Mixin. E puer Form Kontrollen, wéi Inputgruppen, kënnen fix Breeten erfuerderen fir richteg an enger Navbar ze weisen.

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

Füügt ëmmer Etiketten derbäi

Écran Lieser wäerten Problemer mat Äre Formulairen hunn wann Dir kee Label fir all Input enthält. .sr-onlyFir dës Inline Formen, kënnt Dir d'Etiketten mat der Klass verstoppen . Et gi weider alternativ Methoden fir e Label fir Hëllefstechnologien ze liwweren, sou wéi den aria-label, aria-labelledbyoder titleAttribut. Wann keng vun dësen präsent ass, kënnen Écran Lieser d' placeholderAttributer benotzen, wann präsent, awer notéiert datt d'Benotzung vun placeholderals Ersatz fir aner Etikettéierungsmethoden net ugeroden ass.

Füügt d' .navbar-btnKlass un <button>Elementer déi net an engem wunnen <form>fir se vertikal an der Navbar ze zentréieren.

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

Wrap Strings vum Text an engem Element mat .navbar-text, normalerweis op engem <p>Tag fir richteg Féierung a Faarf.

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

Fir Leit déi Standardlinks benotzen déi net an der regulärer Navbar Navigatiounskomponent sinn, benotzt d' .navbar-linkKlass fir déi richteg Faarwen fir d'Standard- an Inverse Navbar-Optiounen ze addéieren.

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

Alignéieren nav Linken, Formen, Knäppercher oder Text, mat der .navbar-leftoder .navbar-rightUtility Klassen. Béid Klassen addéieren e CSS Float an der spezifizéierter Richtung. Zum Beispill, fir nav Linken auszegläichen, setzen se an eng separat <ul>mat der jeweileger Utility Klass ugewandt.

Dës Klassen si mixin-ed Versioune vun .pull-lefta .pull-right, awer si sinn op Medienufroen scoped fir méi einfach Handhabung vun Navbar Komponenten iwwer Apparatgréissten.

Füügt .navbar-fixed-topan enthält en .containeroder .container-fluidzum Zentrum a Pad Navbar Inhalt.

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

Kierperpolsterung erfuerderlech

Déi fix Navbar wäert Ären aneren Inhalt iwwerlageren, ausser Dir füügt paddingun der Spëtzt vun der <body>. Probéiert Är eege Wäerter aus oder benotzt eisen Snippet hei ënnen. Tipp: Par défaut ass d'Navigatioun 50px héich.

body { padding-top: 70px; }

Vergewëssert Iech dëst no der Core Bootstrap CSS abegraff.

Füügt .navbar-fixed-bottoman enthält en .containeroder .container-fluidzum Zentrum a Pad Navbar Inhalt.

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

Kierperpolsterung erfuerderlech

Déi fix Navbar wäert Ären aneren Inhalt iwwerlageren, ausser Dir füügt paddingum Enn vun der <body>. Probéiert Är eege Wäerter aus oder benotzt eisen Snippet hei ënnen. Tipp: Par défaut ass d'Navigatioun 50px héich.

body { padding-bottom: 70px; }

Vergewëssert Iech dëst no der Core Bootstrap CSS abegraff.

Erstellt eng Vollbreet-Navbar déi mat der Säit fort scrollt andeems Dir .navbar-static-topen .containeroder .container-fluidfir den Zentren a Pad Navbar Inhalt bäidréit an enthält.

Am Géigesaz zu de .navbar-fixed-*Klassen, musst Dir keng Padding op der änneren body.

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

Ännert de Look vun der Navbar andeems Dir .navbar-inverse.

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

Brout

Gitt d'Location vun der aktueller Säit an enger Navigatiounshierarchie un.

Separatoren ginn automatesch an CSS dobäigesat duerch :beforean content.

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

Paginatioun

Gitt Paginatiounslinke fir Är Site oder App mat der Multi-Säit Paginatiounskomponent, oder der méi einfacher Pager Alternativ .

Default Paginatioun

Einfach Paginatioun inspiréiert vu Rdio, super fir Apps a Sichresultater. De grousse Block ass schwéier ze verpassen, liicht skalierbar a bitt grouss Klickflächen.

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

Etikettéiere vun der Paginatiounskomponent

D'Paginéierungskomponent soll an engem <nav>Element gewéckelt ginn fir et als Navigatiounssektioun fir Écran Lieser an aner Hëllefstechnologien ze identifizéieren. Zousätzlech, well eng Säit méiglecherweis scho méi wéi eng sou Navigatiounssektioun huet (wéi déi primär Navigatioun am Header, oder eng Sidebar Navigatioun), ass et unzeroden eng deskriptiv aria-labelfir déi ze bidden <nav>déi säin Zweck reflektéiert. Zum Beispill, wann d'Paginéierungskomponent benotzt gëtt fir tëscht enger Rei vu Sichresultater ze navigéieren, kann e passende Label aria-label="Search results pages".

Behënnert an aktiv Staaten

Links sinn personaliséierbar fir verschidden Ëmstänn. Benotzt .disabledfir onklickbar Linken a .activefir déi aktuell Säit unzeginn.

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

Mir recommandéieren datt Dir aktiv oder behënnert Ankeren austauscht fir <span>, oder den Anker am Fall vun de viregte/nächste Pfeile auszetauschen, fir Klickfunktionalitéit ze läschen, wärend geplangte Stiler behalen.

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

Gréisst

Loscht op méi grouss oder méi kleng Paginatioun? Addéieren .pagination-lgoder .pagination-smfir zousätzlech Gréissten.

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

Pager

Schnell virdrun an nächst Linke fir einfach Paginéierungsimplementatiounen mat liicht Markup a Stiler. Et ass super fir einfache Site wéi Blogs oder Zäitschrëften.

Standard Beispill

Par défaut zentréiert de Pager Links.

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

Ausgeriicht Linken

Alternativ kënnt Dir all Link op d'Säiten ausriichten:

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

Fakultativ behënnert Staat

Pager Links benotzen och déi allgemeng .disabledUtility Klass vun der Pagination.

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

Beispill

Beispill Rubrik New

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

Verfügbar Variatiounen

Füügt eng vun den uewe genannten Modifikatiounsklassen fir d'Erscheinung vun engem Label z'änneren.

Standard Primär Erfolleg Info Warnung Gefor

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

Hutt Dir Tonne Etiketten?

Rendering Probleemer kënnen entstoen wann Dir Dosende vun Inline Etiketten an engem schmuele Container hutt, jidderee enthält säin eegent inline-blockElement (wéi eng Ikon). De Wee ronderëm dëst ass Astellung display: inline-block;. Fir Kontext an e Beispill, gesinn #13219 .

Einfach nei oder ongelies Elementer markéieren andeems Dir <span class="badge">Linken, Bootstrap Navs a méi bäidréit.

Inbox42

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

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

Selbst Zesummebroch

Wann et keng nei oder ongelies Elementer gëtt, wäerten d'Badges einfach zesummeklappen (iwwer CSS's :emptySelector) wann keen Inhalt dobannen existéiert.

Cross-Browser Kompatibilitéit

Badges wäerten net selwer am Internet Explorer 8 zesummeklappen well et keng Ënnerstëtzung fir de :emptySelektor feelt.

Passt op aktiv nav Staaten

Built-in Stiler si mat abegraff fir Schëlder an aktive Staaten an Pëllennavigatiounen ze placéieren.

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

E liichte, flexibele Bestanddeel deen optional de ganze Viewport kann verlängeren fir Schlësselinhalt op Ärem Site ze weisen.

Moien Welt!

Dëst ass eng einfach Heldenheet, en einfachen Jumbotron-Stil Komponent fir extra Opmierksamkeet op Featured Inhalt oder Informatioun ze ruffen.

Léier méi

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

Ze maachen de Jumbotron voll Breet, an ouni ofgerënnt Corner, Plaz et ausserhalb all .containers an amplaz e .containerbannen dobäi.

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

Eng einfach Schuel fir eng h1passend Plaz aus a segmentéiert Sektiounen vum Inhalt op enger Säit. Et kann d' h1Standardelementer benotzen small, souwéi déi meescht aner Komponenten (mat zousätzlech Stiler).

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

Verlängert dem Bootstrap säi Gittersystem mat der Miniaturkomponent fir einfach Gitter vu Biller, Videoen, Text a méi ze weisen.

Wann Dir no Pinterest-ähnleche Presentatioun vu Miniaturbiller vu variabelen Héichten an/oder Breet sicht, musst Dir en Drëtt Partei Plugin wéi Masonry , Isotope oder Salvattore benotzen .

Standard Beispill

Par défaut sinn d'Bootstrap Thumbnails entwéckelt fir verlinkte Biller mat minimaler erfuerderlecher Markup ze weisen.

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

Benotzerdefinéiert Inhalt

Mat e bëssen extra Markup ass et méiglech all Zort HTML Inhalt wéi Rubriken, Abschnitter oder Knäppercher a Miniatur ze addéieren.

Thumbnail Label

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.

Knäppchen Knäppchen

Thumbnail Label

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.

Knäppchen Knäppchen

Thumbnail Label

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.

Knäppchen Knäppchen

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

Gitt kontextuell Feedback Messagen fir typesch Benotzeraktiounen mat der Handvoll verfügbaren a flexibelen Alarmmeldungen.

Beispiller

Wickelt all Text an en optionalen Entlooss Knäppchen .alertan eng vun de véier kontextuelle Klassen (zB, .alert-success) fir Basiswarnungsmeldungen.

Keng Standard Klass

Alarmer hu keng Standardklassen, nëmmen Basis- a Modifizéierungsklassen. Eng Standardgro Alarm mécht net ze vill Sënn, also musst Dir en Typ iwwer kontextuell Klass spezifizéieren. Wielt aus Erfolleg, Info, Warnung oder Gefor.

Gutt gemaach! Dir hutt dës wichteg Alarmmeldung erfollegräich gelies.

Kapp erop! Dës Alarm brauch Är Opmierksamkeet, awer et ass net super wichteg.

Opgepasst! Besser selwer kontrolléiert, Dir gesitt net ze gutt aus.

Oh snap! Ännert e puer Saachen a probéiert nach eng Kéier ofzeginn.

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

Dismissible Alarmer

Build op all Alarm andeems Dir en optionalen .alert-dismissiblean zoumaachen Knäppchen bäidréit.

Verlaangt JavaScript Alarm Plugin

Fir voll funktionéierend, entloossbar Alarmer, musst Dir den Alarm JavaScript Plugin benotzen .

Opgepasst! Besser selwer kontrolléiert, Dir gesitt net ze gutt aus.

<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écherstellen entspriechend Verhalen iwwer all Apparater

Gitt sécher d' <button>Element mat dem data-dismiss="alert"Datattribut ze benotzen.

Linken an Alarmer

Benotzt d' .alert-linkUtility-Klass fir séier passende faarweg Linken an all Alarm ze bidden.

Gutt gemaach! Dir hutt dës wichteg Alarmmeldung erfollegräich gelies .

Kapp erop! Dës Alarm brauch Är Opmierksamkeet , awer et ass net super wichteg.

Opgepasst! Besser kontrolléiert Iech selwer, Dir gesitt net ze gutt aus .

Oh snap! Ännert e puer Saachen a probéiert nach eng Kéier ofzeginn.

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

Gitt aktuell Feedback iwwer de Fortschrëtt vun engem Workflow oder Handlung mat einfachen awer flexibel Fortschrëtter Baren.

Cross-Browser Kompatibilitéit

Fortschrëtter Baren benotzen CSS3 Iwwergäng an Animatiounen e puer vun hiren Effekter ze erreechen. Dës Fonctiounen ginn net am Internet Explorer 9 an ënner oder méi al Versioune vu Firefox ënnerstëtzt. Opera 12 ënnerstëtzt keng Animatiounen.

Inhalt Sécherheetspolitik (CSP) Kompatibilitéit

Wann Är Websäit eng Inhaltssécherheetspolitik (CSP) huet déi et net erlaabt style-src 'unsafe-inline', da kënnt Dir keng Inline styleAttributer benotze fir Fortschrëttbar Breet ze setzen wéi an eise Beispiller hei ënnendrënner. Alternativ Methode fir d'Breeten ze setzen, déi mat strenge CSPs kompatibel sinn, enthalen d'Benotzung vun engem klenge personaliséierte JavaScript (dat setzt element.style.width) oder d'Benotze vu personaliséierte CSS Klassen.

Basis Beispill

Standard Fortschrëtt Bar.

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

Mat Label

Ewechzehuelen de <span>mat .sr-onlyKlass aus der Fortschrëtt Bar fir e siichtbar Prozentsaz ze weisen.

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>

Fir sécherzestellen datt de Labeltext liesbar bleift och fir niddereg Prozentzuelen, betruecht eng min-widthan der Fortschrëttbar ze addéieren.

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>

Kontextuell Alternativen

Fortschrëtt Baren benotzen e puer vun der selwechter Knäppchen an Alarm Klassen fir konsequent Stiler.

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

Gestreift

Benotzt e Gradient fir e gesträifte Effekt ze kreéieren. Net verfügbar an IE9 an drënner.

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

Animéiert

Füügt .activeun .progress-bar-stripedfir d'Sträifen vu riets op lénks ze animéieren. Net verfügbar an IE9 an drënner.

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

Gestapelt

Setzt verschidde Baren an d'selwecht .progressfir se ze stackelen.

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

Abstrakt Objektstile fir verschidden Aarte vu Komponenten ze bauen (wéi Blogkommentarer, Tweets, etc) déi e lénks- oder rietsausgeriicht Bild niewent dem textuellen Inhalt hunn.

Standard Medien

De Standard Medien weist e Medienobjekt (Biller, Video, Audio) lénks oder riets vun engem Inhaltsblock.

Medien Iwwerschrëft

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

Medien Iwwerschrëft

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

Nested Medien Rubrik

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

Medien Iwwerschrëft

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

Medien Iwwerschrëft

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

D'Klassen .pull-leftan .pull-rightexistéieren och a goufen virdrun als Deel vun der Medien Komponente benotzt, mä si fir datt Benotzung vun v3.3.0 deprecated. Si sinn ongeféier gläichwäerteg mat .media-leftan .media-right, ausser datt .media-rightsoll no der .media-bodyam HTML gesat ginn.

Medien Ausrichtung

D'Biller oder aner Medien kënnen uewen, Mëtt oder ënnen ausgeriicht ginn. De Standard ass uewen ausgeriicht.

Top ausgeriicht Medien

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in 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.

Mëtt ausgeriicht Medien

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in 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.

Ënnen ausgeriicht Medien

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in 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>

Medien Lëscht

Mat e bëssen extra Markup kënnt Dir Medien an der Lëscht benotzen (nëtzlech fir Kommentar thread oder Artikellëschten).

Medien Iwwerschrëft

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

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

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

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

Lëschtgruppen sinn e flexibelen a mächtege Bestanddeel fir net nëmmen einfach Lëschte vun Elementer ze weisen, awer komplexe mat personaliséierten Inhalt.

Basis Beispill

Déi meescht Basis Lëscht Grupp ass einfach eng ongeuerdnet Lëscht mat Lëscht Artikelen, an déi richteg Klassen. Baut drop mat den Optiounen déi verfollegen, oder Ären eegene CSS wéi néideg.

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

Schëlder

Füügt d'Badges Komponent un all Lëscht Grupp Element an et gëtt automatesch op der rietser positionéiert.

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>

Verknëppelt Elementer

Linkify Lëscht Grupp Elementer andeems Dir Ankertags benotzt anstatt Lëschteartikelen (dat heescht och en Elterendeel <div>anstatt en <ul>). Kee Besoin fir eenzel Elteren ëm all Element.

Cras justo Odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum an Eros

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

Knäppchen Elementer

Lëscht Grupp Elementer kënnen Knäppercher amplaz Lëscht Elementer ginn (dat heescht och en Elterendeel <div>amplaz vun engem <ul>). Kee Besoin fir eenzel Elteren ëm all Element. Benotzt d'Standardklassen net .btnhei.

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

Behënnert Elementer

Füügt .disabledzu engem .list-group-itemgrau eraus fir behënnert ze erschéngen.

Cras justo Odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum an Eros

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

Kontextuell Klassen

Benotzt kontextuell Klassen fir Artikelen ze stiléieren, Standard oder verlinkt. Ëmfaasst och .activeStaat.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum an Eros

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

Benotzerdefinéiert Inhalt

Füügt bal all HTML bannent, och fir verlinkte Lëschtgruppen wéi déi hei ënnen.

Lëscht Grupp Element Rubrik

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

Lëscht Grupp Element Rubrik

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

Lëscht Grupp Element Rubrik

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

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

Och wann net ëmmer néideg, heiansdo musst Dir Är DOM an eng Këscht setzen. Fir dës Situatiounen, probéiert de Panelkomponent.

Basis Beispill

Par défaut ass alles .panelwat Dir maacht e puer grondleeënd Grenz a Polsterung fir e puer Inhalt ze enthalen.

Basis Panel Beispill

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

Panel mat Rubrik

Füügt einfach e Rubrikbehälter op Äre Panel mat .panel-heading. Dir kënnt och all <h1>- <h6>mat enger .panel-titleKlass enthalen fir eng virgestilte Rubrik derbäi ze ginn. Wéi och ëmmer, d'Schrëftgréissten vun <h1>- <h6>gi vun .panel-heading.

Fir richteg Linkfärbung, gitt sécher Linken an Rubriken bannent .panel-title.

Panel Rubrik ouni Titel

Panel Inhalt

Panel Titel

Panel Inhalt

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

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

Panel mat Fousszeilen

Wrap Knäppercher oder sekundären Text an .panel-footer. Bedenkt datt Panelfusser keng Faarwen a Grenzen ierwen wann Dir kontextuell Variatiounen benotzt, well se net geduecht sinn am Virdergrond ze sinn.

Panel Inhalt

Panel Fousszeilen

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

Kontextuell Alternativen

Wéi aner Komponenten, maacht einfach e Panel méi sënnvoll fir e bestëmmte Kontext andeems Dir eng vun de kontextuelle Staatsklassen bäidréit.

Panel Titel

Panel Inhalt

Panel Titel

Panel Inhalt

Panel Titel

Panel Inhalt

Panel Titel

Panel Inhalt

Panel Titel

Panel Inhalt

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

Mat Dëscher

Füügt all net grenzt .tablean engem Panel fir en nahtlosen Design. Wann et e gëtt .panel-body, addéiere mer eng extra Grenz un der Spëtzt vum Dësch fir Trennung.

Panel Rubrik

E puer Standard Panel Inhalt hei. 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.

#	Virnumm	Familljennumm	Benotzernumm
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry	de Vugel	@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>

Wann et kee Panelkierper gëtt, bewegt de Komponent vum Panel Header op den Dësch ouni Ënnerbriechung.

Panel Rubrik

#	Virnumm	Familljennumm	Benotzernumm
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry	de Vugel	@twitter

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

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

Mat Lëscht Gruppen

Einfach Vollbreet Lëschtgruppen an all Panel enthalen.

Panel Rubrik

E puer Standard Panel Inhalt hei. 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 an 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>

Erlaabt de Browser d'Dimensioune vu Video oder Diashow ze bestëmmen baséiert op der Breet vun hirem Inhaltsblock andeems en intrinsesche Verhältnis erstellt deen op all Apparat richteg skaléiert.

Regele ginn direkt op <iframe>, <embed>, <video>, an <object>Elementer applizéiert; benotzen optional eng explizit Nokommen Klass .embed-responsive-itemwann Dir de Styling fir aner Attributer ze Match wëllt.

Pro-Tipp! Dir musst net frameborder="0"an Ären <iframe>s enthalen well mir dat fir Iech iwwerschreiden.

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

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

Standard gutt

Benotzt d'Wuel als einfachen Effekt op en Element fir en inset Effekt ze ginn.

Kuckt, ech sinn an enger Brunn!

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

Fakultativ Klassen

Kontroll padding a ofgerënnt Corner mat zwou fakultativ Modifikatioun Klassen.

Kuckt, ech sinn an enger grousser Brunn!

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

Kuckt, ech sinn an enger klenger Brunn!

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

Komponenten

Glyphicons

Verfügbar Glyphen

Wéi benotzen

Vermëschen net mat anere Komponenten

Nëmme fir benotzen op eidel Elementer

Änneren der Ikon Schrëft Plaz

Zougänglech Ikonen

Beispiller

Dropdowns

Beispill

Ausriichtung

Kann zousätzlech Positionéierung erfuerderen

Deprecéiert .pull-rightAusrichtung

Header

Divider

Behënnert Menü Elementer

Knäppchen Gruppen

Tooltips & Popovers a Knäpperchergruppen erfuerderen spezielle Kader

Vergewëssert Iech richteg rolea gitt e Label

Basis Beispill

Knäppchen Toolbar

Gréisst

Nesting

Vertikal Variatioun

Justifizéiert Knäppchen Gruppen

Ëmgank Grenzen

IE8 a Grenzen

Mat <a>Elementer

Linken déi als Knäpper handelen

Mat <button>Elementer

Knäppchen dropdowns

Plugin Ofhängegkeet

Single Knäppchen Dropdowns

Split Knäppchen Dropdowns

Gréisst

Dropup Variatioun

Input Gruppen

Textuell <input>nëmmen

Tooltips & Popovers an Inputgruppen erfuerderen spezielle Kader

Vermëschen net mat anere Komponenten

Füügt ëmmer Etiketten derbäi

Basis Beispill

Gréisst

Checkboxen a Radio Addons

Knäppchen addons

Knäppercher mat Dropdowns

Segmentéiert Knäppercher

Multiple Knäppercher

Navs

D'Benotzung vun Navs fir Tab Panels erfuerdert JavaScript Tabs Plugin

Maachen navs benotzt als Navigatioun zougänglech

Tabs

Pëllen

Justifiéiert

Safari a reaktiounsfäeger gerechtfäerdegt Nav

Behënnerte Linken

Link Funktionalitéit net beaflosst

Benotzt Dropdowns

Tabs mat Dropdowns

Pillen mat Dropdowns

Navbar

Default Navbar

Iwwerflossend Inhalt

Verlaangt JavaScript Plugin

Änneren vum zesummegeklappte mobilen Navbar Breakpoint

Maachen navbars zougänglech

Mark Bild

Formen

Handy Apparat Viraussetzunge

Füügt ëmmer Etiketten derbäi

Knäppercher

Kontextspezifesch Notzung

Text

Net-nav Linken

Komponent Ausrichtung

Richteg Ausriichtung vu ville Komponenten

Fixéiert uewen

Kierperpolsterung erfuerderlech

Befestegt bis ënnen

Deprecéiert `.pull-right`Ausrichtung

Vergewëssert Iech richteg `role`a gitt e Label

Mat `<a>`Elementer

Mat `<button>`Elementer

Textuell `<input>`nëmmen