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-zoom-yn
glyphicon glyphicon-útzoomen
glyphicon glyphicon-off
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.

Folje in jildich e-mailadres yn

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

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.

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

Alignment

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.

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

Kopteksten

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>

Divider

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>

Utskeakele menu items

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>

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

Soargje derfoar dat it korrekt is `role`en 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>

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.

Links Midden Rjochts

Links Midden

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

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>

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.

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

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

Pillen

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>

Rjochtfeardige

Meitsje maklik ljeppers as pillen lykweardige breedte fan har âlder op skermen breder dan 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>

Utskeakele keppelings

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 JavaSkript om keppelings hjir út te skeakeljen.

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

Mei help fan dropdowns

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>

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.

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

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>

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 navigaasjebalke komponint binne, brûk de .navbar-linkklasse om de juste kleuren ta te foegjen foar de standert en omkearde navbaropsjes.

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

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>

Oanpaste keppelings

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>

Foarbyld

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 .

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>

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>

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>

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.

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

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

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>

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.

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

Warskôging! Kontrolearje josels better, jo sjogge net te goed.

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

Keppelings yn warskôgings

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

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.

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

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.

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

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

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

Animearre

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

<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 bars yn itselde .progressom se te stapeljen.

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

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>

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.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum en eros

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

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.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum en eros

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

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

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.

List groep item heading

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

List groep item heading

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

List groep item heading

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

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

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>

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

Panel foettekst

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

Tastean browsers de dimensjes fan fideo of diashow te bepalen op basis fan de breedte fan har befetsjende blok troch in yntrinsike ferhâlding te meitsjen dy't op elk apparaat goed sil skaalje.

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>

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>

Components

Glyphicons

Beskikbere glyphs

Hoe te brûken

Net mingje mei oare komponinten

Allinnich foar gebrûk op lege eleminten

It feroarjen fan it ikoan lettertype lokaasje

Tagonklike ikoanen

Foarbylden

Dropdowns

Foarbyld

Alignment

Kin ekstra posysjonearring nedich wêze

Deprecated .pull-rightalignment

Kopteksten

Divider

Utskeakele menu items

Knop groepen

Tooltips & popovers yn knopgroepen fereaskje spesjale ynstelling

Soargje derfoar dat it korrekt is roleen jouwe in label

Basis foarbyld

Knop arkbalke

Sizing

Nesting

Fertikale fariaasje

Rjochtfeardige knopgroepen

Behanneling grinzen

IE8 en grinzen

Mei <a>eleminten

Keppelings fungearje as knoppen

Mei <button>eleminten

Knop dropdowns

Plugin ôfhinklikens

Dropdowns mei ien knop

Split knop dropdowns

Sizing

Dropup fariaasje

Ynput groepen

Allinnich tekstuele <input>s

Tooltips & popovers yn ynfiergroepen fereaskje spesjale ynstelling

Net mingje mei oare komponinten

Altyd labels tafoegje

Basis foarbyld

Sizing

Checkboxes en radio tafoegings

Knop tafoegings

Knoppen mei dropdowns

Segmentearre knoppen

Meardere knoppen

Navs

It brûken fan navs foar ljeppanielen fereasket JavaScript-ljeppers-plugin

Meitsje navs brûkt as navigaasje tagonklik

Ljepkes

Pillen

Rjochtfeardige

Safari en responsive rjochtfeardige navs

Utskeakele keppelings

Linkfunksjonaliteit net beynfloede

Mei help fan dropdowns

Ljeppers mei dropdowns

Pillen mei dropdowns

Navbar

Standert navigaasjebalke

Oerfloedich ynhâld

Fereasket JavaScript plugin

It ynstoarten brekpunt fan mobile navbar feroarje

Meitsje navbars tagonklik

Merk ôfbylding

Formulieren

Bewaringen foar mobyl apparaat

Altyd labels tafoegje

Knoppen

Kontekst-spesifike gebrûk

Tekst

Net-nav keppelings

Component alignment

Rjochts aligning meardere komponinten

Fêst oan boppe

Body padding nedich

Fêst oan ûnderkant

Deprecated `.pull-right`alignment

Soargje derfoar dat it korrekt is `role`en jouwe in label

Mei `<a>`eleminten

Mei `<button>`eleminten

Allinnich tekstuele `<input>`s