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 de relative URL-opsje levere troch de Minder-kompiler.
  • Feroarje de url()paden yn 'e kompilearre CSS.

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.

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

Foarbylden

Brûk se yn knoppen, knopgroepen foar in arkbalke, navigaasje, of foarôfgeande formulierynputs.

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

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.

<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

Wizigje, kontekstueel menu foar it werjaan fan listen mei keppelings. Ynteraktyf makke mei de dropdown JavaScript-plugin .

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.

<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-menu's kinne feroare wurde om nei boppen (ynstee fan nei ûnderen) út te wreidzjen troch ta te foegjen .dropupoan de âlder.

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

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.

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

Foegje in koptekst ta om seksjes fan aksjes te markearjen yn elk útklapmenu.

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

Foegje in skieding ta oan aparte searje keppelings yn in útklapmenu.

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

Taheakje .disabledoan in <li>yn it útklapmenu om de keppeling út te skeakeljen.

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

Knop groepen

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.

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

Knop arkbalke

Kombinearje sets fan <div class="btn-group">yn in <div class="btn-toolbar">foar mear komplekse komponinten.

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

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.




<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

Pleats in .btn-groupyn in oar .btn-groupas jo útklapmenu's wolle mingd mei in searje knoppen.

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

Fertikale fariaasje

Meitsje in set fan knoppen ferskine fertikaal steapele ynstee horizontaal. Dropdowns foar splitknop wurde hjir net stipe.

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

Rjochtfeardige knopgroepen

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.

Sjoch # 12476 foar mear ynformaasje.

Mei <a>eleminten

Krekt wrap in rige fan .btns yn .btn-group.btn-group-justified.

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

Keppelings fungearje as knoppen

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.

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

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.

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

Meitsje op deselde manier dropdowns foar splitknop mei deselde markupwizigingen, allinich mei in aparte knop.

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

Sizing

Button dropdowns wurkje mei knoppen fan alle maten.

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

Trigger dropdown-menu's boppe eleminten troch ta te foegjen .dropupoan 'e âlder.

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

Ynput groepen

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.

@

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

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.

@

@

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

Checkboxes en radio tafoegings

Plak elke karfakje as radio-opsje binnen de addon fan in ynfiergroep ynstee fan tekst.

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

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.

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

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

Segmentearre knoppen

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

Meardere knoppen

Wylst jo mar ien tafoeging per kant kinne hawwe, kinne jo meardere knoppen binnen ien hawwe .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 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.

Tink derom dat de klasse de basisklasse .nav-tabsfereasket ..nav

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

Nim deselde HTML, mar brûk .nav-pillsynstee:

<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 binne ek fertikaal stapelber. Foegje gewoan ta .nav-stacked.

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

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 .

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

Foar elke nav-komponint (ljeppers of pillen), tafoegje .disabledfoar grize keppelings en gjin hover-effekten .

Linkfunksjonaliteit net beynfloede

Dizze klasse sil allinich it <a>uterlik feroarje, net syn funksjonaliteit. Brûk oanpaste JavaScript om hjir keppelings út te skeakeljen.

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

Foegje dropdown-menu's ta mei in bytsje ekstra HTML en de dropdowns JavaScript-plugin .

Ljeppers mei 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 mei 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 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:

  1. Ferminderje it bedrach of breedte fan navbar items.
  2. Ferbergje bepaalde navbar-items op bepaalde skermgrutte mei help fan responsive nutklassen .
  3. 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.

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

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.

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

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.

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

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.

Foegje de .navbar-btnklasse ta oan <button>eleminten dy't net wenje yn in <form>om se fertikaal te sintrum yn 'e navbar.

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

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.

Wrap strings fan tekst yn in elemint mei .navbar-text, meastal op in <p>tag foar goede lieding en kleur.

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

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.

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

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.

Foegje .navbar-fixed-topin .containerof ta en tafoegje .container-fluidoan sintrum- en pad-navbar-ynhâld.

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

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.

body { padding-top: 70px; }

Soargje derfoar dat jo dit opnimme nei de kearn Bootstrap CSS.

Foegje .navbar-fixed-bottomin .containerof ta en tafoegje .container-fluidoan sintrum- en pad-navbar-ynhâld.

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

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.

body { padding-bottom: 70px; }

Soargje derfoar dat jo dit opnimme nei de kearn Bootstrap CSS.

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.

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

Feroarje it uterlik fan 'e navigaasjebalke troch .navbar-inverse.

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

Broodkruimels

Jou de lokaasje fan de aktuele side oan binnen in navigaasjehierarchy.

Separators wurde automatysk tafoege yn CSS troch :beforeen content.

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

Paginaasje

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.

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

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.

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

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.

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

Sizing

Wolle jo in gruttere of lytsere paginaasje? Add .pagination-lgof .pagination-smfoar ekstra maten.

<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

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.

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

As alternatyf kinne jo elke keppeling oan 'e kanten rjochtsje:

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

Opsjoneel útskeakele steat

Pager-keppelings brûke ek de algemiene .disablednutklasse fan 'e paginaasje.

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

Labels

Foarbyld

Foarbyld heading New

Foarbyld heading New

Foarbyld heading New

Foarbyld heading New

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

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

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.

Postfak42

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

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

Sels ynstoarten

As d'r gjin nije of net-lêzen items binne, sille badges gewoan ynstoarten (fia CSS's :emptyselector) mits der gjin ynhâld bestiet.

Cross-browser kompatibiliteit

Badges sille net sels ynstoarten yn Internet Explorer 8, om't it gjin stipe foar de :emptyselector.

Past oan aktive nav steaten

Ynboude stilen binne opnommen foar it pleatsen fan badges yn aktive steaten yn pilnavigaasje.

<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

In lichtgewicht, fleksibel komponint dat opsjoneel de heule viewport kin útwreidzje om wichtige ynhâld op jo side te werjaan.

Hallo wrâld!

Dit is in ienfâldige helde-ienheid, in ienfâldige komponint yn jumbotron-styl om ekstra omtinken te freegjen foar featured ynhâld of ynformaasje.

Lear mear

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

Om de jumbotron folsleine breedte, en sûnder ôfrûne hoeken, pleats it bûten alle .containers en ynstee foegjen in .containerbinnen.

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

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

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

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.

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

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.

100%x200

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.

Knop Knop

100%x200

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.

Knop Knop

100%x200

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.

Knop Knop

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

Alerts

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.

<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 warskôgings

Bou op elke warskôging troch in opsjonele .alert-dismissibleen slute knop ta te foegjen.

Fereasket JavaScript alert plugin

Foar folslein funksjonearjende, dismissible warskôgings, moatte jo de warskôgings JavaScript-plugin brûke .

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

Soargje foar goed gedrach oer alle apparaten

Wês wis dat jo it <button>elemint brûke mei it data-dismiss="alert"data-attribút.

Brûk de .alert-linknutklasse om fluch oerienkommende kleurde keppelings te leverjen binnen elke warskôging.

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

Progress bars

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

Mei label

Fuortsmite de <span>mei .sr-only-klasse út 'e foarútgongbalke om in sichtber persintaazje te sjen.

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>

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

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

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

Animated

Taheakje .activeoan .progress-bar-stripedom de strepen fan rjochts nei lofts te animearjen. Net beskikber yn IE9 en hjirûnder.

45% kompleet
<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>

Opsteapele

Plak meardere balken yn itselde .progressom se te stapeljen.

35% kompleet (sukses)
20% kompleet (warskôging)
10% kompleet (gefaar)
<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>

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

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.

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

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

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
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Badges

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
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

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.

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

Knop items

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.

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

Utskeakele items

Taheakje .disabledoan in .list-group-itemom grize it út te ferskinen útskeakele.

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

Kontekstuele klassen

Brûk kontekstuele klassen foar styllist items, standert as keppele. Omfettet ek .activesteat.

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

Oanpaste ynhâld

Foegje hast elke HTML ta binnen, sels foar keppele listgroepen lykas de hjirûnder.

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

Panels

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
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

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
<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 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
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

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

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

As der gjin paniel lichem, de komponint beweecht fan paniel kop nei tafel sûnder ûnderbrekking.

Panel heading
# Foarnamme Achternamme Brûkersnamme
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Mei list groepen

Meitsje maklik listgroepen mei folsleine breedte op yn elk paniel.

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.

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

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.

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

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!
<div class="well">...</div>

Opsjonele klassen

Kontrolearje padding en rûne hoeken mei twa opsjonele modifier klassen.

Sjoch, ik sit yn in grutte put!
<div class="well well-lg">...</div>
Sjoch, ik sit yn in lytse put!
<div class="well well-sm">...</div>