Mear dan in tsiental werbrûkbere komponinten boud om ikonografy, dropdowns, ynfiergroepen, navigaasje, warskôgings, en folle mear te leverjen.
Glyphicons
Beskikbere glyphs
Omfettet mear dan 250 glyphs yn lettertypeformaat fan 'e Glyphicon Halflings-set. Glyphicons Halflings binne normaal net fergees beskikber, mar har makker hat se fergees beskikber steld foar Bootstrap. As tank freegje wy jo allinich in keppeling werom nei Glyphicons as it mooglik is.
glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-wolk
glyphicon glyphicon-envelope
glyphicon glyphicon-potlead
glyphicon glyphicon-glês
glyphicon glyphicon-muzyk
glyphicon glyphicon-sykje
glyphicon glyphicon-hert
glyphicon glyphicon-stjer
glyphicon glyphicon-stjer-leech
glyphicon glyphicon-brûker
glyphicon glyphicon-film
glyphicon glyphicon-th-grutte
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-ynzoomen
glyphicon glyphicon-útzoomen
glyphicon glyphicon-út
glyphicon glyphicon-sinjaal
glyphicon glyphicon-cog
glyphicon glyphicon-jiskefet
glyphicon glyphicon-home
glyphicon glyphicon-bestân
glyphicon glyphicon-tiid
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-ynfak
glyphicon glyphicon-play-sirkel
glyphicon glyphicon-repeat
glyphicon glyphicon-ferfarskje
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flagge
glyphicon glyphicon-koptelefoan
glyphicon glyphicon-volume-off
glyphicon glyphicon-folume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-boek
glyphicon glyphicon-blêdwizer
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-kursyf
glyphicon glyphicon-tekst-hichte
glyphicon glyphicon-tekstbreedte
glyphicon glyphicon-align-lofts
glyphicon glyphicon-align-center
glyphicon glyphicon-align-rjochts
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-ynspring-lofts
glyphicon glyphicon-ynspring-rjochts
glyphicon glyphicon-facetime-fideo
glyphicon glyphicon-picture
glyphicon glyphicon-map-marker
glyphicon glyphicon-oanpasse
glyphicon glyphicon-tint
glyphicon glyphicon-bewurkje
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-stap-efterút
glyphicon glyphicon-fast-backward
glyphicon glyphicon-efterút
glyphicon glyphicon-spielje
glyphicon glyphicon-pauze
glyphicon glyphicon-stop
glyphicon glyphicon-foarút
glyphicon glyphicon-fast-forward
glyphicon glyphicon-stap-foarút
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-lofts
glyphicon glyphicon-chevron-rjochts
glyphicon glyphicon-plus-teken
glyphicon glyphicon-minus-teken
glyphicon glyphicon-ferwiderje-teken
glyphicon glyphicon-ok-teken
glyphicon glyphicon-fraach-teken
glyphicon glyphicon-info-teken
glyphicon glyphicon-skermôfbylding
glyphicon glyphicon-remove-sirkel
glyphicon glyphicon-ok-sirkel
glyphicon glyphicon-ban-sirkel
glyphicon glyphicon-pylk-links
glyphicon glyphicon-pylk-rjochts
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-grutte feroarje-fol
glyphicon glyphicon-grutte feroarje-lyts
glyphicon glyphicon-útropteken
glyphicon glyphicon-kado
glyphicon glyphicon-leaf
glyphicon glyphicon-fjoer
glyphicon glyphicon-each-iepen
glyphicon glyphicon-each-ticht
glyphicon glyphicon-warskôgingsteken
glyphicon glyphicon-flak
glyphicon glyphicon-kalinder
glyphicon glyphicon-willekeurich
glyphicon glyphicon-kommentaar
glyphicon glyphicon-magneet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-winkelkarre
glyphicon glyphicon-map-slute
glyphicon glyphicon-map-iepen
glyphicon glyphicon-feroarje-fertikaal
glyphicon glyphicon-feroarje-horizontaal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-sertifikaat
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-rjochts
glyphicon glyphicon-hand-lofts
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-sirkel-pylk-rjochts
glyphicon glyphicon-sirkel-pylk-lofts
glyphicon glyphicon-sirkel-pylk omheech
glyphicon glyphicon-sirkel-pylk-omleech
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-taken
glyphicon glyphicon-filter
glyphicon glyphicon-aktetas
glyphicon glyphicon-folslein skerm
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-hert-leech
glyphicon glyphicon-link
glyphicon glyphicon-tillefoan
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-soarte
glyphicon glyphicon-sort-op-alfabet
glyphicon glyphicon-sort-by-alfabet-alt
glyphicon glyphicon-sort-by-oarder
glyphicon glyphicon-sort-by-oarder-alt
glyphicon glyphicon-sort-by-attributen
glyphicon glyphicon-sort-by-attributen-alt
glyphicon glyphicon-net kontrolearre
glyphicon glyphicon-útwreidzje
glyphicon glyphicon-collapse-down
glyphicon glyphicon-ynstoarten
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-nij-finster
glyphicon glyphicon-record
glyphicon glyphicon-bewarje
glyphicon glyphicon-iepen
glyphicon glyphicon-opslein
glyphicon glyphicon-ymport
glyphicon glyphicon-eksportearje
glyphicon glyphicon-ferstjoere
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-opslein
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-bewarje
glyphicon glyphicon-floppy-iepen
glyphicon glyphicon-kredytkaart
glyphicon glyphicon-oerdracht
glyphicon glyphicon-bestek
glyphicon glyphicon-header
glyphicon glyphicon-komprimearre
glyphicon glyphicon-oortelefoon
glyphicon glyphicon-phone-alt
glyphicon glyphicon-toer
glyphicon glyphicon-stats
glyphicon glyphicon-sd-fideo
glyphicon glyphicon-hd-fideo
glyphicon glyphicon-ûndertitels
glyphicon glyphicon-lûd-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-registraasje-mark
glyphicon glyphicon-wolk-download
glyphicon glyphicon-wolk-upload
glyphicon glyphicon-beam-conifer
glyphicon glyphicon-beam-leaven
glyphicon glyphicon-cd
glyphicon glyphicon-bewarje-bestân
glyphicon glyphicon-iepen-bestân
glyphicon glyphicon-nivo-up
glyphicon glyphicon-kopy
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-kening
glyphicon glyphicon-keninginne
glyphicon glyphicon-pion
glyphicon glyphicon-biskop
glyphicon glyphicon-ridder
glyphicon glyphicon-baby-formule
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-bed
glyphicon glyphicon-apple
glyphicon glyphicon-wiskje
glyphicon glyphicon-sandglas
glyphicon glyphicon-lamp
glyphicon glyphicon-duplikaat
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-skjirre
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-roebel
glyphicon glyphicon-rub
glyphicon glyphicon-skaal
glyphicon glyphicon-iis-lolly
glyphicon glyphicon-iis-lolly-smaak
glyphicon glyphicon-ûnderwiis
glyphicon glyphicon-opsje-horizontaal
glyphicon glyphicon-opsje-fertikaal
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modaal-finster
glyphicon glyphicon-oalje
glyphicon glyphicon-grain
glyphicon glyphicon-sinnebril
glyphicon glyphicon-tekstgrutte
glyphicon glyphicon-tekst-kleur
glyphicon glyphicon-tekst-eftergrûn
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-objekt-align-fertikaal
glyphicon glyphicon-object-align-right
glyphicon glyphicon-trijehoek-rjochts
glyphicon glyphicon-trijehoek-lofts
glyphicon glyphicon-trijehoek-boaiem
glyphicon glyphicon-trijehoek-top
glyphicon glyphicon-konsole
glyphicon glyphicon-superskript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-lofts
glyphicon glyphicon-menu-rjochts
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
Hoe te brûken
Foar prestaasjes redenen fereaskje alle ikoanen in basisklasse en yndividuele ikoanklasse. Om te brûken, pleats de folgjende koade sawat oeral. Wês der wis fan dat jo in spaasje litte tusken it ikoan en de tekst foar juste padding.
Net mingje mei oare komponinten
Ikoanklassen kinne net direkt kombineare wurde mei oare komponinten. Se moatte net brûkt wurde tegearre mei oare klassen op itselde elemint. Foegje ynstee in nested <span>ta en tapasse de ikoanklassen oan 'e <span>.
Allinnich foar gebrûk op lege eleminten
Ikoanklassen moatte allinich brûkt wurde op eleminten dy't gjin tekstynhâld befetsje en gjin berneleminten hawwe.
It feroarjen fan it ikoan lettertype lokaasje
Bootstrap giet derfan út dat ikoanlettertypen yn 'e ../fonts/map sille lizze, relatyf oan de kompilearre CSS-bestannen. It ferpleatsen of omneame fan dy lettertypebestannen betsjuttet it bywurkjen fan de CSS op ien fan trije manieren:
Feroarje de @icon-font-pathen / of @icon-font-namefariabelen yn de boarne Minder triemmen.
Brûk hokker opsje it bêste past by jo spesifike ûntwikkelingsopset.
Tagonklike ikoanen
Moderne ferzjes fan assistinte technologyen sille CSS-generearre ynhâld oankundigje, lykas spesifike Unicode-karakters. Om ûnbedoelde en betiizjende útfier yn skermlêzers te foarkommen (benammen as ikoanen suver wurde brûkt foar dekoraasje), ferbergje wy se mei it aria-hidden="true"attribút.
As jo in ikoan brûke om betsjutting oer te bringen (ynstee fan allinich as dekoratyf elemint), soargje derfoar dat dizze betsjutting ek wurdt oerdroegen oan assistinte technologyen - bygelyks ekstra ynhâld opnimme, visueel ferburgen mei de .sr-onlyklasse.
As jo kontrôles meitsje sûnder oare tekst (lykas in <button>dy't allinich in ikoan befettet), moatte jo altyd alternative ynhâld leverje om it doel fan 'e kontrôle te identifisearjen, sadat it sin sil meitsje foar brûkers fan assistinte technologyen. Yn dit gefal kinne jo in aria-labelattribút tafoegje oan 'e kontrôle sels.
Foarbylden
Brûk se yn knoppen, knopgroepen foar in arkbalke, navigaasje, of foarôfgeande formulierynputs.
In ikoan brûkt yn in warskôging om oer te bringen dat it in flaterberjocht is, mei ekstra .sr-onlytekst om dizze hint oer te bringen oan brûkers fan assistinte technologyen.
Fersin:Folje in jildich e-mailadres yn
Dropdowns
Wizigje, kontekstueel menu foar it werjaan fan listen mei keppelings. Ynteraktyf makke mei de dropdown JavaScript-plugin .
Foarbyld
Wrap de trigger fan it dellûkmenu en it dellûkmenu binnen .dropdown, of in oar elemint dat ferklearret position: relative;. Foegje dan de HTML fan it menu ta.
Standert wurdt in útklapmenu automatysk 100% fan boppen en lâns de linkerkant fan syn âlder pleatst. Taheakje .dropdown-menu-rightoan in .dropdown-menurjochts rjochtsje it dellûkmenu.
Kin ekstra posysjonearring nedich wêze
Dropdowns wurde automatysk pleatst fia CSS binnen de normale stream fan it dokumint. Dit betsjut dat dropdowns kinne wurde besnien troch âlders mei bepaalde overfloweigenskippen of ferskine bûten de grinzen fan 'e viewport. Behannelje dizze problemen op jo eigen as se foarkomme.
Deprecated .pull-rightalignment
Fanôf v3.1.0 hawwe wy ôfkarre .pull-rightop dellûkmenu's. Om in menu rjochts út te lizzen, brûk .dropdown-menu-right. Rjochts rjochte nav komponinten yn de navbar brûke in mixin ferzje fan dizze klasse foar in automatysk align it menu. Om it te oerskriuwen, brûk .dropdown-menu-left.
Kopteksten
Foegje in koptekst ta om seksjes fan aksjes te markearjen yn elk útklapmenu.
Groepearje in searje knoppen tegearre op ien rigel mei de knopgroep. Foegje opsjoneel JavaScript-radio- en karfakjestylgedrach ta mei ús knopplugin .
Tooltips & popovers yn knopgroepen fereaskje spesjale ynstelling
By it brûken fan tooltips of popovers op eleminten binnen in .btn-group, moatte jo de opsje opjaan container: 'body'om net winske side-effekten te foarkommen (lykas it elemint dat breder groeit en/of syn rûne hoeken ferliest as de tooltip of popover wurdt aktivearre).
Fersekerje korrekt roleen jouwe in label
Om helptechnologyen - lykas skermlêzers - oer te bringen dat in searje knoppen groepearre is, rolemoat in passend attribút oanbean wurde. Foar knopgroepen soe dit wêze role="group", wylst arkbalken in role="toolbar".
Ien útsûndering binne groepen dy't mar ien kontrôle befetsje (bygelyks de rjochtfeardige knopgroepen mei <button>eleminten) of in dropdown.
Dêrneist moatte groepen en arkbalken in eksplisyt label krije, om't de measte assistinte technologyen se oars net oankundigje, nettsjinsteande de oanwêzigens fan it juste roleattribút. Yn 'e hjirre levere foarbylden brûke wy aria-label, mar alternativen lykas aria-labelledbykinne ek brûkt wurde.
Basis foarbyld
Wrap in rige fan knoppen mei .btnyn .btn-group.
Knop arkbalke
Kombinearje sets fan <div class="btn-group">yn in <div class="btn-toolbar">foar mear komplekse komponinten.
Sizing
Ynstee fan it tapassen fan klassen foar knopgrutte op elke knop yn in groep, foegje gewoan ta .btn-group-*oan elk .btn-group, ynklusyf by it nesteljen fan meardere groepen.
Nesting
Pleats in .btn-groupyn in oar .btn-groupas jo útklapmenu's wolle mingd mei in searje knoppen.
Meitsje in groep knoppen stretch op gelikense grutte te span de hiele breedte fan syn âlder. Wurket ek mei knop dropdowns binnen de knop groep.
Behanneling grinzen
Troch de spesifike HTML en CSS dy't brûkt wurde om knoppen te rjochtfeardigjen (nammentlik display: table-cell), wurde de grinzen dertusken ferdûbele. Yn gewoane knopgroepen margin-left: -1pxwurdt brûkt om de grinzen te stapeljen ynstee fan se te ferwiderjen. It marginwurket lykwols net mei display: table-cell. As gefolch, ôfhinklik fan jo oanpassingen oan Bootstrap, kinne jo de grinzen ferwiderje of opnij kleurje.
IE8 en grinzen
Internet Explorer 8 jout gjin grinzen oan knoppen yn in rjochtfeardige knopgroep, of it no oan is <a>of <button>eleminten. Om dat te kommen, wikkel elke knop yn in oare .btn-group.
As de <a>eleminten wurde brûkt om te fungearjen as knoppen - aktivearje yn-side-funksjonaliteit, ynstee fan te navigearjen nei in oar dokumint of seksje binnen de hjoeddeistige side - moatte se ek in passende role="button".
Mei <button>eleminten
Om rjochtfeardige knopgroepen mei <button>eleminten te brûken, moatte jo elke knop yn in knopgroep ferpakke . De measte browsers tapasse ús CSS net goed foar rjochtfeardiging op <button>eleminten, mar om't wy knopútklapmenu's stypje, kinne wy dat omgean.
Knop dropdowns
Brûk elke knop om in útklapmenu te triggerjen troch it yn in te pleatsen .btn-groupen de juste menuopmaak te leverjen.
Plugin ôfhinklikens
Button dropdowns fereaskje dat de dropdown-plugin opnommen is yn jo ferzje fan Bootstrap.
Dropdowns mei ien knop
Feroarje in knop yn in dropdown-skeakel mei wat basale markupwizigingen.
Formkontrôles útwreidzje troch tekst of knoppen ta te foegjen foar, nei of oan beide kanten fan elke tekstbasearre <input>. Brûk .input-groupmei in .input-group-addonof .input-group-btnom eleminten foar of taheakje oan in inkele .form-control.
Allinnich tekstuele <input>s
Meitsje <select>hjir eleminten te brûken, om't se net folslein kinne wurde styled yn WebKit-browsers.
Meitsje <textarea>hjir eleminten te brûken, om't har rowsattribút yn guon gefallen net wurde respektearre.
Tooltips & popovers yn ynfiergroepen fereaskje spesjale ynstelling
By it brûken fan tooltips of popovers op eleminten binnen in .input-group, moatte jo de opsje opjaan container: 'body'om net winske side-effekten te foarkommen (lykas it elemint dat breder groeit en/of syn rûne hoeken ferliest as de tooltip of popover wurdt aktivearre).
Net mingje mei oare komponinten
Meitsje gjin formuliergroepen of rasterkolomklassen direkt mei ynfiergroepen. Ynstee, nêst de ynfier groep binnen fan de formulier groep of raster-relatearre elemint.
Altyd labels tafoegje
Skermlêzers sille problemen hawwe mei jo formulieren as jo gjin label foar elke ynfier opnimme. Soargje foar dizze ynfiergroepen dat alle ekstra label of funksjonaliteit wurdt oerbrocht nei assistinte technologyen.
De krekte te brûken technyk (sichtbere <label>eleminten, <label>eleminten dy't ferburgen binne mei de .sr-onlyklasse, of gebrûk fan 'e aria-label, aria-labelledby, aria-describedby, titleof placeholderattribút) en hokker oanfoljende ynformaasje sil moatte wurde oerbrocht sille ferskille ôfhinklik fan it krekte type ynterface-widget dat jo ymplementearje. De foarbylden yn dizze seksje jouwe in pear foarstelde, saakspesifike oanpak.
Basis foarbyld
Plak ien tafoeging of knop oan beide kanten fan in ynfier. Jo kinne ek ien oan beide kanten fan in ynfier pleatse.
Wy stypje gjin meardere tafoegings ( .input-group-addonof .input-group-btn) op ien kant.
Wy stypje gjin meardere formulierkontrôles yn ien ynfiergroep.
Sizing
Foegje de relative formuliergrutteklassen ta oan it .input-groupsels en de ynhâld binnen sil automatysk de grutte feroarje - gjin ferlet fan it werheljen fan de formulierkontrôlegrutteklassen op elk elemint.
Checkboxes en radio tafoegings
Plak elke karfakje as radio-opsje binnen de addon fan in ynfiergroep ynstee fan tekst.
Knop tafoegings
Knoppen yn ynfiergroepen binne in bytsje oars en fereaskje ien ekstra nivo fan nêst. Ynstee fan .input-group-addon, moatte jo brûke .input-group-btnom de knoppen te wikkeljen. Dit is nedich fanwegen standert blêderstilen dy't net oerskreaun wurde kinne.
Knoppen mei dropdowns
Segmentearre knoppen
Meardere knoppen
Wylst jo mar ien tafoeging per kant kinne hawwe, kinne jo meardere knoppen binnen ien hawwe .input-group-btn.
Navs
Navs beskikber yn Bootstrap hawwe dield markup, begjinnend mei de basis .navklasse, likegoed as dielde steaten. Wissel modifierklassen om te wikseljen tusken elke styl.
It brûken fan navs foar ljeppanielen fereasket JavaScript-ljeppers-plugin
Foar ljeppers mei tabbere gebieten moatte jo de ljeppers JavaScript-plugin brûke . De opmaak sil ek ekstra roleen ARIA-attributen fereaskje - sjoch de foarbyldmarkearring fan 'e plugin foar fierdere details.
Meitsje navs brûkt as navigaasje tagonklik
As jo navs brûke om in navigaasjebalke te leverjen, wês dan wis dat jo in tafoegje role="navigation"oan 'e meast logyske âlderkontener fan' e <ul>, of in <nav>elemint om 'e hiele navigaasje. Foegje de rol net ta oan it <ul>sels, om't dit soe foarkomme dat it wurdt oankundige as in feitlike list troch assistinte technologyen.
Ljepkes
Tink derom dat de klasse de basisklasse .nav-tabsfereasket ..nav
Maklik meitsje ljeppers of pillen gelikense breedte fan harren âlder op skermen breder as 768px mei .nav-justified. Op lytsere skermen wurde de nav-keppelings steapele.
Justified navbar nav keppelings wurde op it stuit net stipe.
Safari en responsive rjochtfeardige navs
Fanôf v9.1.2 lit Safari in brek sjen wêryn it feroarjen fan de grutte fan jo blêder horizontaal renderingsflaters yn 'e rjochtfeardige nav feroarsaket dy't wiske wurde by it ferfarskje. Dizze brek wurdt ek werjûn yn it justified nav foarbyld .
Navbars binne responsive meta-komponinten dy't tsjinje as navigaasjekoppen foar jo applikaasje of side. Se begjinne ynstoarten (en binne te wikseljen) yn mobile werjeften en wurde horizontaal as de beskikbere viewportbreedte ferheget.
Justified navbar nav keppelings wurde op it stuit net stipe.
Oerfloedich ynhâld
Om't Bootstrap net wit hoefolle romte de ynhâld yn jo navbar nedich is, kinne jo problemen hawwe mei it ynpakken fan ynhâld yn in twadde rige. Om dit op te lossen kinne jo:
Ferminderje it bedrach of breedte fan navbar items.
Ferbergje bepaalde navbar-items op bepaalde skermgrutte mei help fan responsive nutklassen .
Feroarje it punt wêrop jo navbar wikselt tusken ynstoarten en horizontale modus. Pas de @grid-float-breakpointfariabele oan of foegje jo eigen mediaquery ta.
Fereasket JavaScript plugin
As JavaScript is útskeakele en de viewport is smel genôch dat de navbar ynstoart, sil it ûnmooglik wêze om de navbar út te wreidzjen en de ynhâld binnen de .navbar-collapse.
De responsive navbar fereasket dat it ynstoartplugin opnommen is yn jo ferzje fan Bootstrap.
It ynstoarte brekpunt fan de mobile navbar feroarje
De navbar falt yn syn fertikale mobile werjefte as de viewport is smeller as @grid-float-breakpoint, en wreidet út yn syn horizontale net-mobile werjefte doe't de viewport is op syn minst @grid-float-breakpointyn breedte. Pas dizze fariabele oan yn 'e Minder boarne om te kontrolearjen wannear't de navigaasjebalke ynstoart / útwreidet. De standertwearde is 768px(it lytste "lytse" of "tablet" skerm).
Meitsje navbars tagonklik
Wês wis dat jo in <nav>elemint brûke of, as jo in mear generyk elemint brûke, lykas in <div>, foegje in role="navigation"oan elke navbalke ta om it eksplisyt te identifisearjen as in landmarkregio foar brûkers fan assistinte technologyen.
Merk ôfbylding
Ferfang de navbar-merk mei jo eigen ôfbylding troch de tekst te wikseljen foar in <img>. Sûnt de .navbar-brandhat syn eigen padding en hichte, Jo moatte miskien oerskriuwe wat CSS ôfhinklik fan jo ôfbylding.
Formulieren
Plak formulierynhâld binnen .navbar-formfoar juste fertikale ôfstimming en ynstoarte gedrach yn smelle viewports. Brûk de ôfstimmingsopsjes om te besluten wêr't it leit binnen de navbar-ynhâld.
As heads up, .navbar-formdielt in protte fan syn koade mei .form-inlinefia mixin. Guon formulierkontrôles, lykas ynfiergroepen, kinne fêste breedtes nedich wêze om goed te sjen yn in navbar.
Bewaringen foar mobyl apparaat
D'r binne wat caveats oangeande it brûken fan formulierkontrôles binnen fêste eleminten op mobile apparaten. Sjoch ús browser-stipedokuminten foar details.
Altyd labels tafoegje
Skermlêzers sille problemen hawwe mei jo formulieren as jo gjin label foar elke ynfier opnimme. Foar dizze ynline formulieren kinne jo de labels ferbergje mei de .sr-onlyklasse. D'r binne fierdere alternative metoaden foar it leverjen fan in label foar assistinte technologyen, lykas de aria-label, aria-labelledbyof titleattribút. As net ien fan dizze is oanwêzich, meie skermlêzers taflecht ta it brûken fan it placeholderattribút, as oanwêzich, mar tink derom dat it brûken fan placeholderas ferfanging foar oare labeling metoaden wurdt net oanret.
Knoppen
Foegje de .navbar-btnklasse ta oan <button>eleminten dy't net wenje yn in <form>om se fertikaal te sintrum yn 'e navbar.
Kontekst-spesifike gebrûk
Lykas de standert knopklassen , .navbar-btnkinne wurde brûkt op <a>en <input>eleminten. Noch .navbar-btnnoch de standert knopklassen moatte lykwols brûkt wurde op <a>eleminten binnen .navbar-nav.
Tekst
Wrap strings fan tekst yn in elemint mei .navbar-text, meastal op in <p>tag foar goede lieding en kleur.
Net-nav keppelings
Foar minsken dy't standertkeppelings brûke dy't net binnen de reguliere navigaasjekomponint binne, brûk de .navbar-linkklasse om de juste kleuren ta te foegjen foar de standert- en omkearde navigaasje-opsjes.
Component alignment
Align nav keppelings, formulieren, knoppen, of tekst, mei help fan de .navbar-leftof .navbar-rightnut klassen. Beide klassen sille in CSS-float tafoegje yn 'e oantsjutte rjochting. Bygelyks, foar align nav keppelings, set se yn in apart <ul>mei de oanbelangjende nut klasse tapast.
Dizze klassen binne mixin-ed ferzjes fan .pull-leften .pull-right, mar se binne scoped nei mediafragen foar makliker ôfhanneljen fan navbar-komponinten oer apparaatgrutte.
Rjochts aligning meardere komponinten
Navbars hawwe op it stuit in beheining mei meardere .navbar-rightklassen. Om ynhâld goed te romte, brûke wy negative marzje op it lêste .navbar-rightelemint. As d'r meardere eleminten binne dy't dizze klasse brûke, wurkje dizze marzjes net lykas bedoeld.
Wy sille dit opnij besjen as wy dat komponint yn v4 kinne herskriuwe.
Fêst oan boppe
Foegje .navbar-fixed-topin .containerof ta en tafoegje .container-fluidoan sintrum- en pad-navbar-ynhâld.
Body padding nedich
De fêste navbar sil jo oare ynhâld oerlizze, útsein as jo tafoegje paddingoan 'e boppekant fan' e <body>. Besykje jo eigen wearden of brûk ús snippet hjirûnder. Tip: Standert is de navigaasjebalke 50px heech.
Soargje derfoar dat jo dit opnimme nei de kearn Bootstrap CSS.
Fêst oan ûnderkant
Foegje .navbar-fixed-bottomin .containerof ta en tafoegje .container-fluidoan sintrum- en pad-navbar-ynhâld.
Body padding nedich
De fêste navbar sil jo oare ynhâld oerlizze, útsein as jo tafoegje paddingoan 'e boaiem fan' e <body>. Besykje jo eigen wearden of brûk ús snippet hjirûnder. Tip: Standert is de navigaasjebalke 50px heech.
Soargje derfoar dat jo dit opnimme nei de kearn Bootstrap CSS.
Statyske top
Meitsje in navigaasjebalke mei folsleine breedte dy't mei de side fuort rôlet troch in of ta te foegjen .navbar-static-topen op te nimmen om de ynhâld fan 'e navbalke sintrum en pad te meitsjen..container.container-fluid
Oars as de .navbar-fixed-*klassen, hoege jo net te feroarjen gjin padding op de body.
Omkearde navigaasjebalke
Feroarje it uterlik fan 'e navigaasjebalke troch .navbar-inverse.
Broodkruimels
Jou de lokaasje fan de aktuele side oan binnen in navigaasjehierarchy.
Separators wurde automatysk tafoege yn CSS troch :beforeen content.
Jou pagineringslinks foar jo side of app mei de pagineringskomponint mei meardere siden, as it ienfâldiger pager-alternatyf .
Standert paginaasje
Ienfâldige paginaasje ynspireare troch Rdio, geweldig foar apps en sykresultaten. It grutte blok is min te missen, maklik skalberber en leveret grutte klikgebieten.
Labeling fan de pagineringskomponint
De pagineringskomponint moat yn in <nav>elemint ferpakt wurde om it te identifisearjen as in navigaasjediel foar skermlêzers en oare assistinte technologyen. Derneist, om't in side wierskynlik al mear as ien sa'n navigaasje-seksje hat (lykas de primêre navigaasje yn 'e koptekst, of in sydbalke-navigaasje), is it oan te rieden om in beskriuwing te jaan aria-labelfoar de <nav>dy't it doel reflektearret. Bygelyks, as de pagineringskomponint wurdt brûkt om te navigearjen tusken in set sykresultaten, kin in passend label wêze aria-label="Search results pages".
Utskeakele en aktive steaten
Keppelings binne oanpasber foar ferskate omstannichheden. Brûk .disabledfoar net-klikbere keppelings en .activeom de aktuele side oan te jaan.
Wy riede oan dat jo aktive of útskeakele ankers útwikselje foar <span>, of it anker oerlitte yn it gefal fan 'e foarige/folgjende pylken, om klikfunksjonaliteit te ferwiderjen, wylst jo bedoelde stilen behâlde.
Sizing
Wolle jo in gruttere of lytsere paginaasje? Add .pagination-lgof .pagination-smfoar ekstra maten.
Pager
Snelle foarige en folgjende keppelings foar ienfâldige pagineringsimplementaasjes mei ljochte markup en stilen. It is geweldich foar ienfâldige siden lykas blogs of tydskriften.
Standert foarbyld
Standert sintraat de pager keppelings.
Oanpaste keppelings
As alternatyf kinne jo elke keppeling oan 'e kanten rjochtsje:
Opsjoneel útskeakele steat
Pager-keppelings brûke ek de algemiene .disablednutklasse fan 'e paginaasje.
Labels
Foarbyld
Foarbyld heading New
Foarbyld heading New
Foarbyld heading New
Foarbyld heading New
Foarbyld heading New
Foarbyld heading New
Beskikbere fariaasjes
Foegje ien fan 'e hjirûnder neamde modifikaasjeklassen ta om it uterlik fan in label te feroarjen.
Standert Primary Success Info Warskôging Danger
Hawwe tonnen labels?
Renderingproblemen kinne ûntstean as jo tsientallen ynline labels hawwe binnen in smelle kontener, elk mei in eigen inline-blockelemint (lykas in ikoan). De manier om dit hinne is ynsteld display: inline-block;. Foar kontekst en in foarbyld, sjoch #13219 .
Badges
Markearje maklik nije as net-lêzen items troch in ta te foegjen <span class="badge">oan keppelings, Bootstrap-navs, en mear.
Om de jumbotron folsleine breedte, en sûnder ôfrûne hoeken, pleats it bûten alle .containers en ynstee foegjen in .containerbinnen.
Sidekoptekst
In ienfâldige shell foar in h1passend romte út en segment seksjes fan ynhâld op in side. It kin it h1standertelemint fan ' e brûke small, lykas de measte oare komponinten (mei ekstra stilen).
Foarbyld sidekoptekst Subtekst foar koptekst
Miniatueren
Wreidzje it rastersysteem fan Bootstrap út mei de thumbnail-komponint om maklik rasters fan ôfbyldings, fideo's, tekst, en mear te werjaan.
As jo op syk binne nei Pinterest-like presintaasje fan thumbnails fan wikseljende hichten en/of breedtes, dan moatte jo in plugin fan tredden brûke lykas Masonry , Isotope , of Salvattore .
Standert foarbyld
Standert binne de thumbnails fan Bootstrap ûntworpen om keppele ôfbyldings wer te jaan mei minimale fereaske markup.
Oanpaste ynhâld
Mei in bytsje ekstra opmaak is it mooglik om elke soart HTML-ynhâld lykas kopteksten, paragrafen of knoppen ta te foegjen oan thumbnails.
Miniatuerlabel
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.
Biede kontekstuele feedbackberjochten foar typyske brûkersaksjes mei it hantsjefol beskikbere en fleksibele warskôgingsberjochten.
Foarbylden
Wrap eltse tekst en in opsjoneel ôfwize knop yn .alerten ien fan de fjouwer kontekstuele klassen (bgl, .alert-success) foar basis alert berjochten.
Gjin standert klasse
Alerts hawwe gjin standertklassen, allinich basis- en modifikaasjeklassen. In standert grize warskôging makket net te folle sin, dus jo binne ferplichte om in type op te jaan fia kontekstuele klasse. Kies út súkses, ynfo, warskôging of gefaar.
Goed dien! Jo hawwe dit wichtige warskôgingsberjocht mei súkses lêzen.
Heads up! Dizze warskôging hat jo oandacht nedich, mar it is net super wichtich.
Warskôging! Kontrolearje josels better, jo sjogge net te goed.
Oh snap! Feroarje in pear dingen en besykje it opnij yn te stjoeren.
Dismissible warskôgings
Bou op elke warskôging troch in opsjonele .alert-dismissibleen slute knop ta te foegjen.
Jou aktuele feedback oer de fuortgong fan in workflow of aksje mei ienfâldige noch fleksibele foarútgongsbalken.
Cross-browser kompatibiliteit
Foarútgongsbalken brûke CSS3-transysjes en animaasjes om guon fan har effekten te berikken. Dizze funksjes wurde net stipe yn Internet Explorer 9 en ûnder of âldere ferzjes fan Firefox. Opera 12 stipet gjin animaasjes.
Ynhâld Security Policy (CSP) kompatibiliteit
As jo webside in Content Security Policy (CSP) hat dat net tastiet style-src 'unsafe-inline', dan kinne jo gjin ynline style-attributen brûke om de breedte fan 'e foarútgongbalke yn te stellen lykas werjûn yn ús foarbylden hjirûnder. Alternative metoaden foar it ynstellen fan de breedtes dy't kompatibel binne mei strikte CSP's omfetsje it brûken fan in bytsje oanpast JavaScript (dat stelt element.style.width) of it brûken fan oanpaste CSS-klassen.
Basis foarbyld
Standert foarútgong bar.
60% kompleet
Mei label
Fuortsmite de <span>mei .sr-only-klasse út 'e foarútgongbalke om in sichtber persintaazje te sjen.
60%
Om derfoar te soargjen dat de labeltekst lêsber bliuwt sels foar lege persintaazjes, beskôgje dan in tafoegje min-widthoan 'e foarútgongbalke.
0%
2%
Kontekstuele alternativen
Foarútgongsbalken brûke guon fan deselde knop- en warskôgingsklassen foar konsekwinte stilen.
40% kompleet (sukses)
20% kompleet
60% kompleet (warskôging)
80% kompleet (gefaar)
Striped
Brûkt in gradient om in striped effekt te meitsjen. Net beskikber yn IE9 en hjirûnder.
40% kompleet (sukses)
20% kompleet
60% kompleet (warskôging)
80% kompleet (gefaar)
Animated
Taheakje .activeoan .progress-bar-stripedom de strepen fan rjochts nei lofts te animearjen. Net beskikber yn IE9 en hjirûnder.
45% kompleet
Opsteapele
Plak meardere balken yn itselde .progressom se te stapeljen.
35% kompleet (sukses)
20% kompleet (warskôging)
10% kompleet (gefaar)
Media foarwerp
Abstrakte objektstilen foar it bouwen fan ferskate soarten komponinten (lykas blogkommentaar, Tweets, ensfh.)
Standert media
De standert media toant in mediaobjekt (ôfbyldings, fideo, audio) links of rjochts fan in ynhâldblok.
Media heading
Cras sit amet nibh libero, yn 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 yn faucibus.
Media heading
Cras sit amet nibh libero, yn 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 yn faucibus.
Nested media heading
Cras sit amet nibh libero, yn 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 yn faucibus.
Media heading
Cras sit amet nibh libero, yn gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, yn gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
De klassen .pull-leften .pull-rightek bestean en waarden earder brûkt as ûnderdiel fan de media komponint, mar wurde ôfret foar dat gebrûk as fan v3.3.0. Se binne likernôch lykweardich oan .media-leften .media-right, útsein dat .media-rightmoat wurde pleatst nei de .media-bodyyn de html.
Media alignment
De ôfbyldings of oare media kinne boppe, midden of ûnder wurde ôfstimd. De standert is top ôfstimd.
Top rjochte media
Cras sit amet nibh libero, yn 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 yn 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.
Midden rjochte media
Cras sit amet nibh libero, yn 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 yn 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.
Underste rjochte media
Cras sit amet nibh libero, yn 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 yn 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.
Media list
Mei in bytsje ekstra opmaak kinne jo media yn 'e list brûke (nuttich foar kommentaar threads of artikellisten).
Media heading
Cras sit amet nibh libero, yn gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, yn gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, yn gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, yn gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
List groep
Listgroepen binne in fleksibele en krêftige komponint foar it werjaan fan net allinich ienfâldige listen mei eleminten, mar komplekse mei oanpaste ynhâld.
Basis foarbyld
De meast basale listgroep is gewoan in net-oardere list mei listitems, en de juste klassen. Bou derop mei de opsjes dy't folgje, of jo eigen CSS as nedich.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum en eros
Badges
Foegje de badges-komponint ta oan elk listgroepitem en it sil automatysk rjochts wurde pleatst.
14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus
Keppele items
Linkify list groep items troch it brûken fan anker tags ynstee fan list items (dat betsjut ek in âlder <div>ynstee fan in <ul>). Gjin ferlet fan yndividuele âlden om elk elemint.
List groep items kinne knoppen wêze ynstee fan list items (dat betsjut ek in âlder <div>ynstee fan in <ul>). Gjin ferlet fan yndividuele âlden om elk elemint. Brûk de standertklassen .btnhjir net.
Utskeakele items
Taheakje .disabledoan in .list-group-itemom grize it út te ferskinen útskeakele.
Hoewol net altyd nedich, moatte jo soms jo DOM yn in doaze pleatse. Foar dy situaasjes, besykje it paniel komponint.
Basis foarbyld
Standert is alles wat jo .paneldocht wat basisrâne en padding tapasse om wat ynhâld te befetsjen.
Basis paniel foarbyld
Panel mei koptekst
Foegje maklik in koptekstcontainer ta oan jo paniel mei .panel-heading. Jo kinne ek elk opnimme <h1>- <h6>mei in .panel-titleklasse om in foarôfgeande koptekst ta te foegjen. De lettertypegrutte fan <h1>- <h6>wurde lykwols oerskreaun troch .panel-heading.
Foar juste keppelingskleuring, wês wis dat jo keppelings pleatse yn kopteksten binnen .panel-title.
Paneelkop sûnder titel
Panel ynhâld
Panel titel
Panel ynhâld
Panel mei foettekst
Wrap knoppen as sekundêre tekst yn .panel-footer. Tink derom dat panielfuotteksten gjin kleuren en rânen erfje by it brûken fan kontekstuele fariaasjes, om't se net bedoeld binne om op 'e foargrûn te stean.
Panel ynhâld
Kontekstuele alternativen
Lykas oare komponinten, meitsje in paniel maklik sinfoller foar in bepaalde kontekst troch ien fan 'e kontekstuele steatklassen ta te foegjen.
Panel titel
Panel ynhâld
Panel titel
Panel ynhâld
Panel titel
Panel ynhâld
Panel titel
Panel ynhâld
Panel titel
Panel ynhâld
Mei tabellen
Foegje alle net-grinzen ta .tablebinnen in paniel foar in naadloos ûntwerp. As d'r in is .panel-body, foegje wy in ekstra râne ta oan 'e boppekant fan' e tafel foar skieding.
Panel heading
Guon standert paniel ynhâld hjir. Nulla vitae elit libero, in 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.
#
Foarnamme
Achternamme
Brûkersnamme
1
Merk
Otto
@mdo
2
Jacob
Thornton
@fet
3
Larry
de fûgel
@twitter
As der gjin paniel lichem, de komponint beweecht fan paniel kop nei tafel sûnder ûnderbrekking.
Guon standert paniel ynhâld hjir. Nulla vitae elit libero, in 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 en eros
Responsive ynbêde
Tastean browsers de dimensjes fan fideo of diashow te bepalen op basis fan 'e breedte fan har befetsjende blok troch in yntrinsike ferhâlding te meitsjen dy't goed sil skaalje op elk apparaat.
Regels wurde direkt tapast op <iframe>, <embed>, <video>, en <object>eleminten; opsjoneel brûke in eksplisite neiteam klasse .embed-responsive-itemas jo wolle oerienkomme mei de styling foar oare attributen.
Pro-Tip! Jo hoege jo net op te nimmen frameborder="0"yn jo <iframe>s, om't wy dat foar jo oerskriuwe.
Wells
Standert goed
Brûk de put as in ienfâldich effekt op in elemint om it in ynset effekt te jaan.
Sjoch, ik sit yn in put!
Opsjonele klassen
Kontrolearje padding en rûne hoeken mei twa opsjonele modifier klassen.