Glyphicons

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.

<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

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

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>

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

Kann zousätzlech Positionéierung erfuerderen

Dropdowns ginn automatesch iwwer CSS am normale Flux vum Dokument positionéiert. Dëst bedeit datt Dropdowns vun den Elteren mat bestëmmten overflowEegeschaften ofgeschnidden kënne ginn oder ausserhalb vum Viewport erscheinen. Adresséiert dës Themen op Iech selwer wéi se entstinn.

Deprecéiert .pull-rightAusrichtung

Zënter v3.1.0 hu mir .pull-rightop Dropdown-Menüen ofgeschaaft. Fir e Menü riets ausgeriicht ze benotzen, benotzt .dropdown-menu-right. Rietsausgeriichtte nav Komponenten an der navbar benotzen eng mixin Versioun vun dëser Klass fir automatesch de Menü auszegläichen. Fir et z'iwwerschreiden, benotzt .dropdown-menu-left.

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

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>

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>

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>

Knäppchen Gruppen

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

Knäppchen Toolbar

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.

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

Knäppchen dropdowns

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>

Input Gruppen

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.

@

@example.com

$ .00

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

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

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

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

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

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.

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>

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>

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>

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>

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>

Navbar

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:

  1. Reduzéieren de Betrag oder d'Breet vun Navbar Elementer.
  2. Verstoppt bestëmmte Navbar Elementer op bestëmmte Bildschirmgréissten mat reaktiounsfäeger Utility Klassen .
  3. Ä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.

Verlaangt JavaScript Plugin

Wann JavaScript behënnert ass an de Viewport schmuel genuch ass datt d'Navbar zesummeklappt, ass et onméiglech d'Navbar auszebauen an den Inhalt an der .navbar-collapse.

Déi reaktiounsfäeger Navbar erfuerdert datt den Zesummebroch Plugin an Ärer Versioun vum Bootstrap abegraff ass.

Änneren vum zesummegeklappte mobilen Navbar Breakpoint

D'Navbar zerklappt a seng vertikal mobil Vue wann de Viewport méi schmuel ass wéi @grid-float-breakpoint, an erweidert sech a seng horizontal net mobil Vue wann de Viewport op d'mannst @grid-float-breakpointan der Breet ass. Passt dës Variabel an der Manner Quell un fir ze kontrolléieren wann d'Navbar zesummeklappt / erweidert. De Standardwäert ass 768px(de klengste "klengen" oder "Tablet" Écran).

Maachen navbars zougänglech

Gitt sécher en <nav>Element ze benotzen oder, wann Dir e méi generescht Element benotzt wéi e <div>, füügt en role="navigation"un all Navbar fir et explizit als Landmarkregioun fir Benotzer vun Hëllefstechnologien z'identifizéieren.

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

Handy Apparat Viraussetzunge

Et ginn e puer Viraussetzungen iwwer d'Benotzung vu Formkontrolle bannent fixen Elementer op mobilen Apparater. Gesinn eis Browser Support Dokumenter fir Detailer.

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>

Kontextspezifesch Notzung

Wéi de Standard Knäppchen Klassen , .navbar-btnkann op <a>an <input>Elementer benotzt ginn. Wéi och ëmmer, weder .navbar-btnnach d'Standard Knäppchen Klassen sollen op <a>Elementer bannent benotzt ginn .navbar-nav.

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.

Richteg Ausriichtung vu ville Komponenten

Navbars hunn de Moment eng Begrenzung mat multiple .navbar-rightKlassen. Fir richteg Plaz Inhalt, mir benotzen negativ Spillraum op de leschten .navbar-rightElement. Wann et méi Elementer sinn déi dës Klass benotzen, funktionnéieren dës Margen net wéi virgesinn.

Mir wäerten dëst nach eng Kéier iwwerpréiwen wa mir dee Komponent am v4 kënnen iwwerschreiwen.

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>

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>

Etiketten

Beispill

Beispill Rubrik New

Beispill Rubrik New

Beispill Rubrik New

Beispill Rubrik New

Beispill Rubrik New
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 .

Schëlder

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>

Jumbotron

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>

Säit Header

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>

Thumbnails

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.

100% x 200

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

100% x 200

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

100% x 200

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>

Alarmer

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.

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

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

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

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

Fortschrëtt Baren

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.

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

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.

40% Komplett (Erfolleg)
20% Komplett
60% Komplett (Warnung)
80% Komplett (Gefor)
<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.

40% Komplett (Erfolleg)
20% Komplett
60% Komplett (Warnung)
80% Komplett (Gefor)
<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.

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

Gestapelt

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

35% Komplett (Erfolleg)
20% Komplett (Warnung)
10% Komplett (Gefor)
<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>

Medien Objet

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ëscht Grupp

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.

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

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

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

Panneauen

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>

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

Reaktiounsfäeger embed

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>

Wells

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>