Iwwer eng Dose weiderverwendbare Komponenten gebaut fir Ikonographie, Dropdowns, Inputgruppen, Navigatioun, Alarmer a vill méi ze bidden.
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 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.
Beispiller
Benotzt se a Knäppercher, Knäpperchergruppen fir eng Toolbar, Navigatioun oder Prepended Form Input.
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.
Feeler:Gitt eng valabel Email Adress
Dropdowns
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.
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.
Header
Füügt en Header fir Sektiounen vun Aktiounen an all Dropdown-Menü ze markéieren.
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.
Knäppchen Toolbar
Kombinéiert Sätze vun <div class="btn-group">an eng <div class="btn-toolbar">fir méi komplex Komponenten.
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.
Nesting
Plaz e .btn-groupbannent engem aneren .btn-groupwann Dir wëllt Dropdown-Menüen gemëscht mat enger Serie vu Knäppercher.
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.
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.
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.
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.
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.
Checkboxen a Radio Addons
Setzt all Checkbox oder Radiooptioun an engem Addon vun engem Inputgrupp amplaz vum Text.
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.
Knäppercher mat Dropdowns
Segmentéiert Knäppercher
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.
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.
Tabs
Notéiert d' .nav-tabsKlass erfuerdert d' .navBasisklass.
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 .
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.
Ä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.
Mark Bild
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.
Formen
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.
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.
Knäppercher
Füügt d' .navbar-btnKlass un <button>Elementer déi net an engem wunnen <form>fir se vertikal an der Navbar ze zentréieren.
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.
Text
Wrap Strings vum Text an engem Element mat .navbar-text, normalerweis op engem <p>Tag fir richteg Féierung a Faarf.
Net-nav Linken
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.
Komponent Ausrichtung
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.
Fixéiert uewen
Füügt .navbar-fixed-topan enthält en .containeroder .container-fluidzum Zentrum a Pad Navbar Inhalt.
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.
Vergewëssert Iech dëst no der Core Bootstrap CSS abegraff.
Befestegt bis ënnen
Füügt .navbar-fixed-bottoman enthält en .containeroder .container-fluidzum Zentrum a Pad Navbar Inhalt.
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.
Vergewëssert Iech dëst no der Core Bootstrap CSS abegraff.
Statesch Top
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.
Invertéiert Navbar
Ännert de Look vun der Navbar andeems Dir .navbar-inverse.
Brout
Gitt d'Location vun der aktueller Säit an enger Navigatiounshierarchie un.
Separatoren ginn automatesch an CSS dobäigesat duerch :beforean content.
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.
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.
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.
Gréisst
Loscht op méi grouss oder méi kleng Paginatioun? Addéieren .pagination-lgoder .pagination-smfir zousätzlech Gréissten.
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.
Ausgeriicht Linken
Alternativ kënnt Dir all Link op d'Säiten ausriichten:
Fakultativ behënnert Staat
Pager Links benotzen och déi allgemeng .disabledUtility Klass vun der Pagination.
Etiketten
Beispill
Beispill Rubrik New
Beispill Rubrik New
Beispill Rubrik New
Beispill Rubrik New
Beispill Rubrik New
Beispill Rubrik New
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
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.
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.
Ze maachen de Jumbotron voll Breet, an ouni ofgerënnt Corner, Plaz et ausserhalb all .containers an amplaz e .containerbannen dobäi.
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).
Beispill Säit Header Subtext fir Header
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.
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.
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.
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.
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.
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.
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.
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
Mat Label
Ewechzehuelen de <span>mat .sr-onlyKlass aus der Fortschrëtt Bar fir e siichtbar Prozentsaz ze weisen.
60%
Fir sécherzestellen datt de Labeltext liesbar bleift och fir niddereg Prozentzuelen, betruecht eng min-widthan der Fortschrëttbar ze addéieren.
0%
2%
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)
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)
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
Gestapelt
Setzt verschidde Baren an d'selwecht .progressfir se ze stackelen.
35% Komplett (Erfolleg)
20% Komplett (Warnung)
10% Komplett (Gefor)
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.
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.
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.
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
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
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.
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.
Behënnert Elementer
Füügt .disabledzu engem .list-group-itemgrau eraus fir behënnert ze erschéngen.
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
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
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
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
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
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
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
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.
Wells
Standard gutt
Benotzt d'Wuel als einfachen Effekt op en Element fir en inset Effekt ze ginn.
Kuckt, ech sinn an enger Brunn!
Fakultativ Klassen
Kontroll padding a ofgerënnt Corner mat zwou fakultativ Modifikatioun Klassen.