Glyphicons

Beskikbare glyphs

Sluit meer as 250 glyfe in lettertipe-formaat van die Glyphicon Halflings-stel in. Glyphicons Halflings is gewoonlik nie gratis beskikbaar nie, maar hul skepper het dit gratis vir Bootstrap beskikbaar gestel. As 'n dankie, vra ons net dat jy 'n skakel terug na Glyphicons insluit waar moontlik.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-wolk
  • glyphicon glyphicon-omhulsel
  • glyphicon glyphicon-potlood
  • glyphicon glyphicon-glas
  • glyphicon glyphicon-musiek
  • glyphicon glyphicon-soektog
  • glyphicon glyphicon-hart
  • glyphicon glyphicon-ster
  • glyphicon glyphicon-ster-leeg
  • glyphicon glyphicon-gebruiker
  • glyphicon glyphicon-film
  • glyphicon glyphicon-de-groot
  • glyphicon glyphicon-th
  • glyphicon glyphicon-ste-lys
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-verwyder
  • glyphicon glyphicon-inzoomen
  • glyphicon glyphicon-uitzoomen
  • glyphicon glyphicon-af
  • glyphicon glyphicon-sein
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-asblik
  • glyphicon glyphicon-huis
  • glyphicon glyphicon-lêer
  • glyphicon glyphicon-tyd
  • glyphicon glyphicon-pad
  • glyphicon glyphicon-aflaai-alt
  • glyphicon glyphicon-aflaai
  • glyphicon glyphicon-oplaai
  • glyphicon glyphicon-inkassie
  • glyphicon glyphicon-speel-sirkel
  • glyphicon glyphicon-herhaal
  • glyphicon glyphicon-verfris
  • glyphicon glyphicon-lys-alt
  • glyphicon glyphicon-slot
  • glyphicon glyphicon-vlag
  • glyphicon glyphicon-koptelefoon
  • glyphicon glyphicon-volume-af
  • glyphicon glyphicon-volume-af
  • glyphicon glyphicon-volume-op
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-strepieskode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-boek
  • glyphicon glyphicon-boekmerk
  • glyphicon glyphicon-druk
  • glyphicon glyphicon-kamera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-vet
  • glyphicon glyphicon-kursief
  • glyphicon glyphicon-teks-hoogte
  • glyphicon glyphicon-teks-wydte
  • glyphicon glyphicon-align-links
  • glyphicon glyphicon-align-sentrum
  • glyphicon glyphicon-align-regs
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-lys
  • glyphicon glyphicon-indent-links
  • glyphicon glyphicon-inspring-regs
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-prentjie
  • glyphicon glyphicon-kaart-merker
  • glyphicon glyphicon-aanpas
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-wysig
  • glyphicon glyphicon-deel
  • glyphicon glyphicon-tjek
  • glyphicon glyphicon-skuif
  • glyphicon glyphicon-stap-agteruit
  • glyphicon glyphicon-vinnig-agteruit
  • glyphicon glyphicon-agteruit
  • glyphicon glyphicon-speel
  • glyphicon glyphicon-pouse
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-vorentoe
  • glyphicon glyphicon-snel vorentoe
  • glyphicon glyphicon-stap-vorentoe
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-links
  • glyphicon glyphicon-chevron-regs
  • glyphicon glyphicon-plus-teken
  • glyphicon glyphicon-minus-teken
  • glyphicon glyphicon-verwyder-teken
  • glyphicon glyphicon-ok-teken
  • glyphicon glyphicon-vraag-teken
  • glyphicon glyphicon-info-teken
  • glyphicon glyphicon-skermkiekie
  • glyphicon glyphicon-verwyder-sirkel
  • glyphicon glyphicon-ok-sirkel
  • glyphicon glyphicon-ban-sirkel
  • glyphicon glyphicon-pyltjie-links
  • glyphicon glyphicon-pyl-regs
  • glyphicon glyphicon-pyltjie-op
  • glyphicon glyphicon-pyl-af
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-verander grootte-vol
  • glyphicon glyphicon-grootte-klein
  • glyphicon glyphicon-uitroepteken
  • glyphicon glyphicon-geskenk
  • glyphicon glyphicon-blaar
  • glyphicon glyphicon-vuur
  • glyphicon glyphicon-oog-oop
  • glyphicon glyphicon-oog-toe
  • glyphicon glyphicon-waarskuwing-teken
  • glyphicon glyphicon-vlak
  • glyphicon glyphicon-kalender
  • glyphicon glyphicon-lukraak
  • glyphicon glyphicon-opmerking
  • glyphicon glyphicon-magneet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-inkopiemandjie
  • glyphicon glyphicon-vouer-toe
  • glyphicon glyphicon-vouer-oop
  • glyphicon glyphicon-verander grootte-vertikaal
  • glyphicon glyphicon-verander grootte-horisontaal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bulhorn
  • glyphicon glyphicon-klok
  • glyphicon glyphicon-sertifikaat
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-duim-af
  • glyphicon glyphicon-hand-regs
  • glyphicon glyphicon-hand-links
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-sirkel-pyl-regs
  • glyphicon glyphicon-sirkel-pyl-links
  • glyphicon glyphicon-sirkel-pyl-op
  • glyphicon glyphicon-sirkel-pyl-af
  • glyphicon glyphicon-aardbol
  • glyphicon glyphicon-sleutel
  • glyphicon glyphicon-take
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-aktetas
  • glyphicon glyphicon-volskerm
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-skuifspeld
  • glyphicon glyphicon-hart-leeg
  • glyphicon glyphicon-skakel
  • glyphicon glyphicon-foon
  • glyphicon glyphicon-drukpen
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-soort
  • glyphicon glyphicon-sorteer-volgens-alfabet
  • glyphicon glyphicon-sorteer-volgens-alfabet-alt
  • glyphicon glyphicon-sorteer-volgens-orde
  • glyphicon glyphicon-sorteer-volgens-orde-alt
  • glyphicon glyphicon-soort-volgens-kenmerke
  • glyphicon glyphicon-sorteer-volgens-kenmerke-alt
  • glyphicon glyphicon-ongemerk
  • glyphicon glyphicon-uitbrei
  • glyphicon glyphicon-ineenstorting
  • glyphicon glyphicon-ineenstorting
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flits
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-nuwe-venster
  • glyphicon glyphicon-rekord
  • glyphicon glyphicon-save
  • glyphicon glyphicon-oop
  • glyphicon glyphicon-gered
  • glyphicon glyphicon-invoer
  • glyphicon glyphicon-uitvoer
  • glyphicon glyphicon-stuur
  • glyphicon glyphicon-floppy-skyf
  • glyphicon glyphicon-floppy-gered
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-oop
  • glyphicon glyphicon-kredietkaart
  • glyphicon glyphicon-oordrag
  • glyphicon glyphicon-eetgerei
  • glyphicon glyphicon-header
  • glyphicon glyphicon-saamgepers
  • glyphicon glyphicon-oorfoon
  • glyphicon glyphicon-foon-alt
  • glyphicon glyphicon-toring
  • glyphicon glyphicon-statistieke
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-onderskrifte
  • glyphicon glyphicon-klank-stereo
  • glyphicon glyphicon-klank-dolby
  • glyphicon glyphicon-klank-5-1
  • glyphicon glyphicon-klank-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-kopieregmerk
  • glyphicon glyphicon-registrasiemerk
  • glyphicon glyphicon-wolk-aflaai
  • glyphicon glyphicon-wolk-oplaai
  • glyphicon glyphicon-boom-naaldboom
  • glyphicon glyphicon-boom-bladwisselend
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-lêer
  • glyphicon glyphicon-ooplêer
  • glyphicon glyphicon-vlak-op
  • glyphicon glyphicon-kopie
  • glyphicon glyphicon-pasta
  • glyphicon glyphicon-waarskuwing
  • glyphicon glyphicon-gelykmaker
  • glyphicon glyphicon-koning
  • glyphicon glyphicon-koningin
  • glyphicon glyphicon-pion
  • glyphicon glyphicon-biskop
  • glyphicon glyphicon-ridder
  • glyphicon glyphicon-baba-formule
  • glyphicon glyphicon-tent
  • glyphicon glyphicon-swartbord
  • glyphicon glyphicon-bed
  • glyphicon glyphicon-appel
  • glyphicon glyphicon-vee uit
  • glyphicon glyphicon-uurglas
  • glyphicon glyphicon-lamp
  • glyphicon glyphicon-duplikaat
  • glyphicon glyphicon-spaarvarkie
  • glyphicon glyphicon-skêr
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-jen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-roebel
  • glyphicon glyphicon-vryf
  • glyphicon glyphicon-skaal
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ys-lollie-geproe
  • glyphicon glyphicon-opvoeding
  • glyphicon glyphicon-opsie-horisontaal
  • glyphicon glyphicon-opsie-vertikaal
  • glyphicon glyphicon-spyskaart-hamburger
  • glyphicon glyphicon-modale-venster
  • glyphicon glyphicon-olie
  • glyphicon glyphicon-graan
  • glyphicon glyphicon-sonbril
  • glyphicon glyphicon-teks-grootte
  • glyphicon glyphicon-teks-kleur
  • glyphicon glyphicon-teks-agtergrond
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-objek-belyn-horisontaal
  • glyphicon glyphicon-object-align-links
  • glyphicon glyphicon-objek-belyn-vertikaal
  • glyphicon glyphicon-object-align-regs
  • glyphicon glyphicon-driehoek-regs
  • glyphicon glyphicon-driehoek-links
  • glyphicon glyphicon-driehoek-bodem
  • glyphicon glyphicon-driehoek-top
  • glyphicon glyphicon-konsole
  • glyphicon glyphicon-boskrif
  • glyphicon glyphicon-onderskrif
  • glyphicon glyphicon-menu-links
  • glyphicon glyphicon-menu-regs
  • glyphicon glyphicon-menu-af
  • glyphicon glyphicon-menu-up

Hoe om te gebruik

Om prestasieredes vereis alle ikone 'n basisklas en individuele ikoonklas. Om te gebruik, plaas die volgende kode omtrent enige plek. Maak seker dat jy 'n spasie tussen die ikoon en teks laat vir behoorlike opvulling.

Moenie met ander komponente meng nie

Ikoonklasse kan nie direk met ander komponente gekombineer word nie. Hulle moet nie saam met ander klasse op dieselfde element gebruik word nie. Voeg eerder 'n geneste by <span>en pas die ikoonklasse toe op die <span>.

Slegs vir gebruik op leë elemente

Ikoonklasse moet slegs gebruik word op elemente wat geen teksinhoud bevat nie en geen kinderelemente het nie.

Verander die ikoon font ligging

Bootstrap neem aan dat ikoonlettertipelêers in die ../fonts/gids geleë sal wees, relatief tot die saamgestelde CSS-lêers. Om daardie fontlêers te skuif of te hernoem, beteken om die CSS op een van drie maniere op te dateer:

  • Verander die @icon-font-pathen/of @icon-font-nameveranderlikes in die bron Minder lêers.
  • Gebruik die relatiewe URL-opsie wat deur die Less-samesteller verskaf word.
  • Verander die url()paaie in die saamgestelde CSS.

Gebruik enige opsie wat die beste by jou spesifieke ontwikkelingsopset pas.

Toeganklike ikone

Moderne weergawes van ondersteunende tegnologieë sal CSS-gegenereerde inhoud aankondig, sowel as spesifieke Unicode-karakters. Om onbedoelde en verwarrende uitset in skermlesers te vermy (veral wanneer ikone suiwer vir versiering gebruik word), versteek ons ​​dit met die aria-hidden="true"kenmerk.

As jy 'n ikoon gebruik om betekenis oor te dra (eerder as net as 'n dekoratiewe element), maak seker dat hierdie betekenis ook aan ondersteunende tegnologieë oorgedra word – sluit byvoorbeeld bykomende inhoud in, visueel versteek met die .sr-onlyklas.

As jy kontroles met geen ander teks skep nie (soos 'n <button>wat net 'n ikoon bevat), moet jy altyd alternatiewe inhoud verskaf om die doel van die beheer te identifiseer, sodat dit sin sal maak vir gebruikers van ondersteunende tegnologieë. In hierdie geval kan jy 'n aria-labelkenmerk by die kontrole self byvoeg.

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

Voorbeelde

Gebruik dit in knoppies, knoppiegroepe vir 'n nutsbalk, navigasie, of voorafgevoegde vorminvoer.

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

'n Ikoon wat in 'n waarskuwing gebruik word om oor te dra dat dit 'n foutboodskap is, met bykomende .sr-onlyteks om hierdie wenk aan gebruikers van ondersteunende tegnologieë oor te dra.

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

Aftrekkies

Wisselbare, kontekstuele kieslys vir die vertoon van lyste skakels. Interaktief gemaak met die aftreklys JavaScript-inprop .

Draai die aftreklys se sneller en die aftreklys in .dropdown, of 'n ander element wat verklaar position: relative;. Voeg dan die menu se HTML by.

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

Aftrekkieslyste kan verander word om opwaarts (in plaas van afwaarts) uit te brei deur by .dropupdie ouer by te voeg.

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

By verstek word 'n aftreklys outomaties 100% van bo en langs die linkerkant van sy ouer geposisioneer. Voeg .dropdown-menu-rightby 'n .dropdown-menuna regs-belyn die aftreklys.

Mag addisionele posisionering vereis

Dropdowns word outomaties geposisioneer via CSS binne die normale vloei van die dokument. Dit beteken aftrekkies kan deur ouers met sekere overfloweienskappe gesny word of buite die grense van die kykport verskyn. Pak hierdie kwessies op jou eie aan soos hulle opduik.

Verouderde .pull-rightbelyning

Vanaf v3.1.0 het ons die aftrekkieslys opgeskort .pull-right. Gebruik om 'n spyskaart regs te belyn .dropdown-menu-right. Regs-belynde nav-komponente in die navigasiebalk gebruik 'n mengweergawe van hierdie klas om die spyskaart outomaties in lyn te bring. Om dit te ignoreer, gebruik .dropdown-menu-left.

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

Voeg 'n kopskrif by om afdelings van handelinge in enige aftreklys te benoem.

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

Voeg 'n verdeler by 'n aparte reeks skakels in 'n aftreklys.

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

Voeg .disabledby 'n <li>in die aftreklys om die skakel te deaktiveer.

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

Knoppie groepe

Groepeer 'n reeks knoppies saam op 'n enkele reël met die knoppiesgroep. Voeg opsionele JavaScript-radio- en merkblokkie-stylgedrag by met ons knoppies-inprop .

Gereedskapwenke en popovers in knoppiegroepe vereis spesiale instellings

Wanneer jy gereedskapwenke of opspringers op elemente binne 'n .btn-groupgebruik, sal jy die opsie moet spesifiseer container: 'body'om ongewenste newe-effekte te vermy (soos die element wat wyer word en/of sy afgeronde hoeke verloor wanneer die nutswenk of opspringer geaktiveer word).

Verseker korrek roleen verskaf 'n etiket

Ten einde hulptegnologieë – soos skermlesers – oor te dra dat 'n reeks knoppies gegroepeer is, moet 'n toepaslike rolekenmerk verskaf word. Vir knoppiegroepe sal dit wees role="group", terwyl nutsbalke 'n role="toolbar".

Een uitsondering is groepe wat slegs 'n enkele kontrole bevat (byvoorbeeld die geregverdigde knoppiegroepe met <button>elemente) of 'n aftreklys.

Daarbenewens moet groepe en nutsbalke 'n eksplisiete etiket gegee word, aangesien die meeste hulptegnologieë hulle andersins nie sal aankondig nie, ten spyte van die teenwoordigheid van die korrekte roleeienskap. In die voorbeelde wat hier verskaf word, gebruik ons aria-label​​, maar alternatiewe soos aria-labelledbykan ook gebruik word.

Basiese voorbeeld

Draai 'n reeks knoppies toe met .btnin .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>

Knoppie nutsbalk

Kombineer stelle <div class="btn-group">in 'n <div class="btn-toolbar">vir meer komplekse komponente.

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

Grootte

In plaas daarvan om knoppiegrootteklasse op elke knoppie in 'n groep toe te pas, voeg net by .btn-group-*elkeen .btn-group, insluitend wanneer verskeie groepe nesgemaak word.




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

Nestel

Plaas 'n .btn-groupin 'n ander .btn-groupwanneer jy aftrekkieslys gemeng wil hê met 'n reeks knoppies.

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

Vertikale variasie

Laat 'n stel knoppies vertikaal gestapel vertoon eerder as horisontaal. Verdeelknoppie-aftrekkies word nie hier ondersteun nie.

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

Geregverdigde knoppie groepe

Laat 'n groep knoppies ewe groot strek om oor die hele breedte van sy ouer te strek. Werk ook met knoppie-aftrekkies binne die knoppie-groep.

Hanteer grense

As gevolg van die spesifieke HTML en CSS wat gebruik word om knoppies te regverdig (naamlik display: table-cell), word die grense tussen hulle verdubbel. In gewone knoppiegroepe margin-left: -1pxword dit gebruik om die grense te stapel in plaas daarvan om dit te verwyder. Werk egter marginnie met display: table-cell. As gevolg hiervan, afhangende van jou aanpassings aan Bootstrap, wil jy dalk die grense verwyder of herkleur.

IE8 en grense

Internet Explorer 8 gee nie grense aan knoppies in 'n geregverdigde knoppiegroep nie, of dit nou aan <a>of <button>elemente is. Om dit te vermy, draai elke knoppie in 'n ander .btn-group.

Sien #12476 vir meer inligting.

Met <a>elemente

Draai net 'n reeks .btns in .btn-group.btn-group-justified.

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

Skakels dien as knoppies

As die <a>elemente gebruik word om as knoppies op te tree - wat in-bladsy-funksionaliteit aktiveer, eerder as om na 'n ander dokument of afdeling binne die huidige bladsy te navigeer - moet hulle ook 'n toepaslike role="button".

Met <button>elemente

Om geregverdigde knoppiegroepe met <button>elemente te gebruik, moet jy elke knoppie in 'n knoppiegroep toevou . Die meeste blaaiers pas nie ons CSS behoorlik toe om <button>elemente te regverdig nie, maar aangesien ons knoppie-aftrekkies ondersteun, kan ons dit omseil.

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

Knoppie aftrekkies

Gebruik enige knoppie om 'n aftreklys te aktiveer deur dit binne 'n te plaas .btn-groupen die regte spyskaartopmaak te verskaf.

Inprop-afhanklikheid

Knoppie-aftrekkies vereis dat die aftrek-inprop by jou weergawe van Bootstrap ingesluit moet word.

Enkelknoppie-aftrekkies

Verander 'n knoppie in 'n aftrek-skakelaar met 'n paar basiese opmaakveranderinge.

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

Verdeel knoppie aftrekkies

Skep eweneens verdeelknoppie-aftrekkies met dieselfde opmaakveranderinge, net met 'n aparte knoppie.

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

Grootte

Knoppie-aftrekkies werk met knoppies van alle groottes.

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

Drop-up variasie

Sneller aftrekkieslys bo elemente deur by .dropupdie ouer te voeg.

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

Invoergroepe

Brei vormkontroles uit deur teks of knoppies voor, na of aan beide kante van enige teksgebaseerde <input>. Gebruik .input-groupsaam met 'n .input-group-addonof .input-group-btnom elemente voor of by 'n enkele aan te voeg .form-control.

Slegs tekstuele <input>s

Vermy die gebruik van <select>elemente hier aangesien dit nie volledig in WebKit-blaaiers gestileer kan word nie.

Vermy die gebruik van <textarea>elemente hier aangesien hul rowskenmerk in sommige gevalle nie gerespekteer sal word nie.

Gereedskapwenke en popovers in invoergroepe vereis spesiale instellings

Wanneer jy gereedskapwenke of opspringers op elemente binne 'n .input-groupgebruik, moet jy die opsie spesifiseer container: 'body'om ongewenste newe-effekte te vermy (soos die element wat wyer word en/of sy afgeronde hoeke verloor wanneer die nutswenk of omspringer geaktiveer word).

Moenie met ander komponente meng nie

Moenie vormgroepe of roosterkolomklasse direk met invoergroepe meng nie. In plaas daarvan, nes die invoergroep binne-in die vormgroep of roosterverwante element.

Voeg altyd etikette by

Skermlesers sal probleme met jou vorms hê as jy nie 'n etiket vir elke invoer insluit nie. Vir hierdie insetgroepe, maak seker dat enige bykomende etiket of funksionaliteit aan ondersteunende tegnologieë oorgedra word.

Die presiese tegniek wat gebruik moet word (sigbare <label>elemente, elemente wat deur die klas <label>versteek is, of die gebruik van die , , , of kenmerk) en watter bykomende inligting oorgedra moet word, sal wissel na gelang van die presiese tipe koppelvlaklegstuk wat jy implementeer. Die voorbeelde in hierdie afdeling verskaf 'n paar voorgestelde, gevalspesifieke benaderings..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

Basiese voorbeeld

Plaas een byvoeging of knoppie aan weerskante van 'n invoer. Jy kan ook een aan beide kante van 'n invoer plaas.

Ons ondersteun nie veelvuldige byvoegings ( .input-group-addonof .input-group-btn) aan 'n enkele kant nie.

Ons ondersteun nie veelvuldige vormkontroles in 'n enkele invoergroep nie.

@

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

Grootte

Voeg die relatiewe vormgrootteklasse by die .input-groupself en inhoud binne sal outomaties die grootte verander - dit is nie nodig om die vormbeheergrootteklasse op elke element te herhaal nie.

@

@

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

Merkblokkies en radio-byvoegings

Plaas enige merkblokkie of radio-opsie binne 'n invoergroep se byvoeging in plaas van teks.

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

Knoppie byvoegings

Knoppies in insetgroepe is 'n bietjie anders en vereis een ekstra vlak van nes. In plaas van .input-group-addon, sal jy moet gebruik .input-group-btnom die knoppies te draai. Dit word vereis weens verstekblaaierstyle wat nie oorskryf kan word nie.

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

Knoppies met aftreklys

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

Gesegmenteerde knoppies

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

Veelvuldige knoppies

Alhoewel jy net een byvoeging per kant kan hê, kan jy veelvuldige knoppies in 'n enkele .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 beskikbaar in Bootstrap het gedeelde opmaak, wat begin met die basisklas .nav, sowel as gedeelde state. Ruil wysigerklasse om tussen elke styl te wissel.

Die gebruik van navs vir oortjiepanele vereis JavaScript-oortjies-inprop

Vir oortjies met tabbare areas, moet jy die tabs JavaScript-inprop gebruik . Die opmaak sal ook bykomende roleen ARIA-kenmerke vereis – sien die inprop se voorbeeldopmaak vir verdere besonderhede.

Maak navigasie wat as navigasie gebruik word, toeganklik

As jy navs gebruik om 'n navigasiebalk te verskaf, maak seker dat jy 'n role="navigation"by die mees logiese ouerhouer van die voeg <ul>, of 'n <nav>element om die hele navigasie draai. Moenie die rol by die <ul>self voeg nie, aangesien dit sal verhoed dat dit as 'n werklike lys deur ondersteunende tegnologieë aangekondig word.

Let op die .nav-tabsklas vereis die .navbasisklas.

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

Neem dieselfde HTML, maar gebruik .nav-pillseerder:

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

Pille is ook vertikaal stapelbaar. Voeg net by .nav-stacked.

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

Maak maklik oortjies of pille gelyke breedtes van hul ouer by skerms breër as 768px met .nav-justified. Op kleiner skerms is die navigasieskakels gestapel.

Geregverdigde navigasiebalk-navigasieskakels word tans nie ondersteun nie.

Safari en responsiewe geregverdigde navigasie

Vanaf v9.1.2 vertoon Safari 'n fout waarin die verandering van die grootte van jou blaaier horisontaal leweringsfoute in die geregverdigde navigasie veroorsaak wat tydens herlaai uitgevee word. Hierdie fout word ook in die geregverdigde nav-voorbeeld gewys .

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

Vir enige nav-komponent (oortjies of pille), voeg by .disabledvir grys skakels en geen hover-effekte nie .

Skakelfunksie nie geraak nie

Hierdie klas sal slegs die <a>se voorkoms verander, nie sy funksionaliteit nie. Gebruik pasgemaakte JavaScript om skakels hier te deaktiveer.

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

Voeg aftrekkieslyste by met 'n bietjie ekstra HTML en die aftreklys JavaScript-inprop .

Oortjies met aftreklys

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

Pille met 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 is responsiewe metakomponente wat as navigasieopskrifte vir jou toepassing of werf dien. Hulle begin ineengevou (en is wisselbaar) in mobiele aansigte en word horisontaal soos die beskikbare kykpoortwydte toeneem.

Geregverdigde navigasiebalk-navigasieskakels word tans nie ondersteun nie.

Oorvol inhoud

Aangesien Bootstrap nie weet hoeveel spasie die inhoud in u navigasiebalk benodig nie, kan u probleme ondervind met inhoud wat in 'n tweede ry toevou. Om dit op te los, kan jy:

  1. Verminder die hoeveelheid of breedte van navigasiebalk-items.
  2. Versteek sekere navigasiebalkitems by sekere skermgroottes deur responsiewe nutsklasse te gebruik .
  3. Verander die punt waarop jou navigasiebalk tussen ingevoude en horisontale modus wissel. Pas die @grid-float-breakpointveranderlike aan of voeg jou eie medianavraag by.

Vereis JavaScript-inprop

As JavaScript gedeaktiveer is en die viewport is nou genoeg dat die navigasiebalk ineenstort, sal dit onmoontlik wees om die navigasiebalk uit te brei en die inhoud binne die .navbar-collapse.

Die responsiewe navigasiebalk vereis dat die invou-inprop by jou weergawe van Bootstrap ingesluit moet word.

Verander tans die ingevoude mobiele navigasiebalk-breekpunt

Die navigasiebalk vou in sy vertikale mobiele aansig in wanneer die uitsigpoort nouer is as @grid-float-breakpoint, en brei uit na sy horisontale nie-mobiele aansig wanneer die uitsigpoort ten minste @grid-float-breakpointin breedte is. Pas hierdie veranderlike in die Minder-bron aan om te beheer wanneer die navigasiebalk invou/uitbrei. Die verstekwaarde is 768px(die kleinste "klein" of "tablet" skerm).

Maak navigasiebalke toeganklik

Maak seker dat jy 'n <nav>element gebruik of, as jy 'n meer generiese element soos 'n <div>gebruik, voeg 'n role="navigation"by elke navigasiebalk om dit uitdruklik te identifiseer as 'n landmerkstreek vir gebruikers van ondersteunende tegnologieë.

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

Vervang die navbar-handelsmerk met jou eie beeld deur die teks vir 'n <img>. Aangesien .navbar-branddit sy eie vulling en hoogte het, sal jy dalk sekere CSS moet ignoreer, afhangende van jou beeld.

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

Plaas vorminhoud binne .navbar-formvir behoorlike vertikale belyning en ineengestorte gedrag in nou uitsigpoorte. Gebruik die belyningsopsies om te besluit waar dit binne die navigasiebalkinhoud is.

As 'n kop op, .navbar-formdeel baie van sy kode met .form-inlinevia mixin. Sommige vormkontroles, soos invoergroepe, mag vereis dat vaste breedtes behoorlik in 'n navigasiebalk vertoon word.

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

Waarskuwings vir mobiele toestelle

Daar is 'n paar waarskuwings rakende die gebruik van vormkontroles binne vaste elemente op mobiele toestelle. Sien ons blaaierondersteuningsdokumente vir besonderhede.

Voeg altyd etikette by

Skermlesers sal probleme met jou vorms hê as jy nie 'n etiket vir elke invoer insluit nie. Vir hierdie inlynvorms kan jy die byskrifte versteek deur die .sr-onlyklas te gebruik. Daar is verdere alternatiewe metodes om 'n etiket vir ondersteunende tegnologieë te verskaf, soos die aria-label, aria-labelledbyof titlekenmerk. As nie een van hierdie teenwoordig is nie, kan skermlesers gebruik maak van die placeholderkenmerk, indien teenwoordig, maar let daarop dat placeholderdit nie aanbeveel word om dit as 'n plaasvervanger vir ander etiketteringmetodes te gebruik nie.

Voeg die .navbar-btnklas by <button>elemente wat nie in a woon nie <form>om hulle vertikaal in die navigasiebalk te sentreer.

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

Konteksspesifieke gebruik

Soos die standaard knoppie klasse , .navbar-btnkan gebruik word op <a>en <input>elemente. Nie een .navbar-btnof die standaardknoppieklasse moet egter op <a>elemente binne gebruik word nie .navbar-nav.

Draai stringe teks toe in 'n element met .navbar-text, gewoonlik op 'n <p>merker vir behoorlike leiding en kleur.

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

Vir mense wat standaardskakels gebruik wat nie binne die gewone navigasiebalk-komponent is nie, gebruik die .navbar-linkklas om die regte kleure by te voeg vir die verstek- en omgekeerde navigasiebalkopsies.

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

Belyn navigasieskakels, vorms, knoppies of teks deur die .navbar-leftof .navbar-rightnutsklasse te gebruik. Beide klasse sal 'n CSS-float in die gespesifiseerde rigting byvoeg. Byvoorbeeld, om nav-skakels in lyn te bring, plaas hulle in 'n aparte <ul>met die onderskeie nutsklas toegepas.

Hierdie klasse is gemengde weergawes van .pull-leften .pull-right, maar hulle is gemik op medianavrae vir makliker hantering van navigasiebalk-komponente oor toestelgroottes.

Regsbelyning van verskeie komponente

Navbars het tans 'n beperking met veelvuldige .navbar-rightklasse. Om inhoud behoorlik te spasieer, gebruik ons ​​negatiewe marge op die laaste .navbar-rightelement. Wanneer daar veelvuldige elemente is wat daardie klas gebruik, werk hierdie marges nie soos bedoel nie.

Ons sal weer hierna kyk wanneer ons daardie komponent in v4 kan herskryf.

Voeg 'n of by .navbar-fixed-topen sluit 'n .containerof .container-fluidin by die inhoud van die navigasiebalk in die middel en die pad.

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

Liggaamsvulling benodig

Die vaste navigasiebalk sal jou ander inhoud bedek, tensy jy paddingbo-aan die <body>. Probeer jou eie waardes of gebruik ons ​​brokkie hieronder. Wenk: By verstek is die navigasiebalk 50px hoog.

body { padding-top: 70px; }

Maak seker dat jy dit insluit na die kern Bootstrap CSS.

Voeg 'n of by .navbar-fixed-bottomen sluit 'n .containerof .container-fluidin by die inhoud van die navigasiebalk in die middel en die pad.

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

Liggaamsvulling benodig

Die vaste navigasiebalk sal jou ander inhoud bedek, tensy jy paddingonderaan die <body>. Probeer jou eie waardes of gebruik ons ​​brokkie hieronder. Wenk: By verstek is die navigasiebalk 50px hoog.

body { padding-bottom: 70px; }

Maak seker dat jy dit insluit na die kern Bootstrap CSS.

Skep 'n volle wydte navigasiebalk wat saam met die bladsy wegrol deur ' n of by te voeg .navbar-static-topen in te sluit om die inhoud van die navigasiebalk te sentreer en in te vul..container.container-fluid

In teenstelling met die .navbar-fixed-*klasse, hoef jy nie enige vulling op die body.

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

Verander die voorkoms van die navigasiebalk deur by te voeg .navbar-inverse.

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

Broodkrummels

Dui die huidige bladsy se ligging binne 'n navigasiehiërargie aan.

Skeiers word outomaties bygevoeg in CSS deur :beforeen content.

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

Paginering

Verskaf pagineringskakels vir jou werf of program met die multi-bladsy paginering komponent, of die eenvoudiger pager alternatief .

Verstekpaginering

Eenvoudige paginering geïnspireer deur Rdio, ideaal vir toepassings en soekresultate. Die groot blok is moeilik om te mis, maklik skaalbaar en bied groot klikareas.

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

Benoem die paginering-komponent

Die pagineringskomponent moet in 'n element toegedraai <nav>word om dit as 'n navigasie-afdeling vir skermlesers en ander ondersteunende tegnologieë te identifiseer. Daarbenewens, aangesien 'n bladsy waarskynlik reeds meer as een so 'n navigasie-afdeling sal hê (soos die primêre navigasie in die kopskrif, of 'n sybalknavigasie), is dit raadsaam om 'n beskrywing aria-labeldaarvoor te verskaf <nav>wat die doel daarvan weerspieël. Byvoorbeeld, as die paginering-komponent gebruik word om tussen 'n stel soekresultate te navigeer, kan 'n gepaste etiket wees aria-label="Search results pages".

Gestremde en aktiewe state

Skakels is aanpasbaar vir verskillende omstandighede. Gebruik .disabledvir onklikbare skakels en .activeom die huidige bladsy aan te dui.

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

Ons beveel aan dat jy aktiewe of gedeaktiveerde ankers uitruil vir <span>, of die anker weglaat in die geval van die vorige/volgende pyle, om klikfunksionaliteit te verwyder terwyl beoogde style behou word.

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

Grootte

Lus vir groter of kleiner paginering? Voeg by .pagination-lgof .pagination-smvir addisionele groottes.

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

Blader

Vinnige vorige en volgende skakels vir eenvoudige paginering-implementerings met ligte opmaak en style. Dit is ideaal vir eenvoudige werwe soos blogs of tydskrifte.

Standaard voorbeeld

By verstek sentreer die pager skakels.

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

Alternatiewelik kan jy elke skakel na die kante in lyn bring:

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

Opsionele gedeaktiveerde toestand

Pager-skakels gebruik ook die algemene .disablednutsklas vanaf die paginering.

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

Etikette

Voorbeeld

Voorbeeld opskrif Nuut

Voorbeeld opskrif Nuut

Voorbeeld opskrif Nuut

Voorbeeld opskrif Nuut

Voorbeeld opskrif Nuut
Voorbeeld opskrif Nuut
<h3>Example heading <span class="label label-default">New</span></h3>

Beskikbare variasies

Voeg enige van die wysigerklasse hieronder by om die voorkoms van 'n etiket te verander.

Verstek Primêre Suksesinligting Waarskuwing Gevaar _
<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>

Het jy tonne etikette?

Weergaveprobleme kan ontstaan ​​wanneer jy dosyne inlyn-etikette binne 'n smal houer het, wat elkeen sy eie inline-blockelement bevat (soos 'n ikoon). Die manier om dit is opset display: inline-block;. Vir konteks en 'n voorbeeld, sien #13219 .

Kentekens

Merk maklik nuwe of ongeleesde items deur 'n <span class="badge">by skakels, Bootstrap navs, en meer by te voeg.

Inkassie42

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

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

Self in duie stort

Wanneer daar geen nuwe of ongeleesde items is nie, sal kentekens eenvoudig ineenstort (via CSS se :emptykeurder) mits geen inhoud binne bestaan ​​nie.

Kruisblaaierversoenbaarheid

Kentekens sal nie self ineenstort in Internet Explorer 8 nie omdat dit nie ondersteuning vir die :emptykieser het nie.

Pas aan by aktiewe navigasietoestande

Ingeboude style is ingesluit vir die plasing van kentekens in aktiewe toestande in pilnavigasie.

<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

'n Liggewig, buigsame komponent wat opsioneel die hele uitsigpoort kan uitbrei om sleutelinhoud op jou werf ten toon te stel.

Hello Wêreld!

Dit is 'n eenvoudige held-eenheid, 'n eenvoudige jumbotron-styl komponent om ekstra aandag te vestig op uitgesproke inhoud of inligting.

Leer meer

<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 die jumbotron volle breedte te maak, en sonder afgeronde hoeke, plaas dit buite alle .containers en voeg eerder 'n .containerbinne by.

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

Bladsykopskrif

'n Eenvoudige dop om h1gedeeltes van inhoud op 'n bladsy behoorlik uit te spasieer en te segmenteer. Dit kan die h1se verstekelement smallgebruik, sowel as die meeste ander komponente (met bykomende style).

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

Duimnaels

Brei Bootstrap se roosterstelsel uit met die duimnael-komponent om maklik roosters van beelde, video's, teks en meer te vertoon.

As jy op soek is na Pinterest-agtige aanbieding van duimnaels van verskillende hoogtes en/of breedtes, sal jy 'n derdeparty-inprop soos Masonry , Isotope of Salvattore moet gebruik .

Standaard voorbeeld

Bootstrap se duimnaels is by verstek ontwerp om gekoppelde beelde te vertoon met minimale vereiste opmaak.

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

Pasgemaakte inhoud

Met 'n bietjie ekstra opmaak is dit moontlik om enige soort HTML-inhoud soos opskrifte, paragrawe of knoppies by kleinkiekies by te voeg.

100%x200

Kleinkiekie-etiket

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida by eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Knoppie Knoppie

100%x200

Kleinkiekie-etiket

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida by eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Knoppie Knoppie

100%x200

Kleinkiekie-etiket

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida by eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Knoppie Knoppie

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

Waarskuwings

Verskaf kontekstuele terugvoerboodskappe vir tipiese gebruikeraksies met die handvol beskikbare en buigsame waarskuwingsboodskappe.

Voorbeelde

Vou enige teks en 'n opsionele afwys-knoppie in .alerten een van die vier kontekstuele klasse (bv. .alert-success) vir basiese waarskuwingsboodskappe toe.

Geen verstekklas nie

Waarskuwings het nie verstekklasse nie, slegs basis- en wysigerklasse. 'n Standaard grys waarskuwing maak nie te veel sin nie, so daar word van jou verwag om 'n tipe via kontekstuele klas te spesifiseer. Kies uit sukses, inligting, waarskuwing of gevaar.

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

Verwerpbare waarskuwings

Bou op enige waarskuwing deur 'n opsionele .alert-dismissibleen toemaakknoppie by te voeg.

Vereis JavaScript-waarskuwing-inprop

Vir ten volle funksionerende, weglaatbare waarskuwings, moet jy die waarskuwings JavaScript-inprop gebruik .

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

Verseker behoorlike gedrag op alle toestelle

Maak seker dat jy die <button>element met die data-dismiss="alert"data-kenmerk gebruik.

Gebruik die .alert-linknutsklas om vinnig bypassende gekleurde skakels binne enige waarskuwing te verskaf.

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

Vorderingstawe

Verskaf bygewerkte terugvoer oor die vordering van 'n werkvloei of aksie met eenvoudige dog buigsame vorderingstawe.

Kruisblaaierversoenbaarheid

Vorderingstawe gebruik CSS3-oorgange en animasies om sommige van hul effekte te bereik. Hierdie kenmerke word nie in Internet Explorer 9 en laer of ouer weergawes van Firefox ondersteun nie. Opera 12 ondersteun nie animasies nie.

Content Security Policy (CSP) verenigbaarheid

As jou webwerf 'n inhoudsekuriteitsbeleid (CSP) het wat nie toelaat nie style-src 'unsafe-inline', sal jy nie inlyn style-kenmerke kan gebruik om vorderingstaafwydtes te stel soos in ons voorbeelde hieronder getoon nie. Alternatiewe metodes vir die opstel van die breedtes wat versoenbaar is met streng CSP's sluit in die gebruik van 'n bietjie pasgemaakte JavaScript (wat stel element.style.width) of die gebruik van pasgemaakte CSS-klasse.

Basiese voorbeeld

Verstek vorderingsbalk.

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

Met etiket

Verwyder die <span>met .sr-only-klas van binne die vorderingsbalk om 'n sigbare persentasie te wys.

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 te verseker dat die etiketteks leesbaar bly selfs vir lae persentasies, oorweeg dit om 'n min-widthby die vorderingsbalk te voeg.

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 alternatiewe

Vorderingstawe gebruik sommige van dieselfde knoppie- en waarskuwingsklasse vir konsekwente style.

40% Voltooi (sukses)
20% Voltooi
60% voltooi (waarskuwing)
80% Voltooi (gevaar)
<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>

Gestreepte

Gebruik 'n gradiënt om 'n gestreepte effek te skep. Nie beskikbaar in IE9 en onder nie.

40% Voltooi (sukses)
20% Voltooi
60% voltooi (waarskuwing)
80% Voltooi (gevaar)
<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>

Geanimeerde

Voeg .activeby .progress-bar-stripedom die strepe regs na links te animeer. Nie beskikbaar in IE9 en onder nie.

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

Gestapel

Plaas verskeie stawe in dieselfde .progressom hulle te stapel.

35% Voltooi (sukses)
20% voltooi (waarskuwing)
10% Voltooi (gevaar)
<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 voorwerp

Abstrakte voorwerpstyle vir die bou van verskillende soorte komponente (soos blogopmerkings, tweets, ens.) wat 'n links- of regs-belynde prent langs tekstuele inhoud bevat.

Verstek media

Die verstekmedia vertoon 'n media-voorwerp (prente, video, oudio) links of regs van 'n inhoudblok.

Media opskrif

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media opskrif

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Geneste media-opskrif

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media opskrif

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media opskrif

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Die klasse .pull-leften .pull-rightbestaan ​​ook en is voorheen gebruik as deel van die mediakomponent, maar word opgeskort vir daardie gebruik vanaf v3.3.0. Hulle is ongeveer gelykstaande aan .media-leften .media-right, behalwe dat .media-rightdit na die .media-bodyin die html geplaas moet word.

Mediabelyning

Die beelde of ander media kan bo, middel of onder in lyn gebring word. Die verstek is bobelyn.

Top-belynde media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Middelbelynde media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Onderbelynde media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Media lys

Met 'n bietjie ekstra opmaak, kan jy media binne lys gebruik (nuttig vir kommentaar drade of artikellyste).

  • Media opskrif

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Geneste media-opskrif

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Geneste media-opskrif

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Geneste media-opskrif

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Lys groep

Lysgroepe is 'n buigsame en kragtige komponent vir die vertoon van nie net eenvoudige lyste van elemente nie, maar komplekse met persoonlike inhoud.

Basiese voorbeeld

Die mees basiese lysgroep is bloot 'n ongeordende lys met lysitems en die regte klasse. Bou daarop met die opsies wat volg, of jou eie CSS soos nodig.

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

Kentekens

Voeg die kentekens-komponent by enige lysgroepitem en dit sal outomaties aan die regterkant geposisioneer word.

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

Gekoppelde items

Koppel lysgroepitems deur ankermerkers in plaas van lysitems te gebruik (dit beteken ook 'n ouer <div>in plaas van 'n <ul>). Geen behoefte aan individuele ouers rondom elke element nie.

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

Knoppie items

Lys groepitems kan knoppies wees in plaas van lysitems (dit beteken ook 'n ouer <div>in plaas van 'n <ul>). Geen behoefte aan individuele ouers rondom elke element nie. Moenie die standaardklasse .btnhier gebruik nie.

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

Gedeaktiveerde items

Voeg .disabledby 'n .list-group-itemom dit uit te grys om gedeaktiveer te lyk.

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

Gebruik kontekstuele klasse om items te styl, verstek of gekoppel. Sluit ook .activestaat in.

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

Pasgemaakte inhoud

Voeg byna enige HTML binne, selfs vir gekoppelde lysgroepe soos die een hieronder.

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

Panele

Alhoewel dit nie altyd nodig is nie, moet jy soms jou DOM in 'n boks plaas. Vir daardie situasies, probeer die paneelkomponent.

Basiese voorbeeld

By verstek is al .panelwat nodig is om 'n paar basiese rand en opvulling toe te pas om 'n bietjie inhoud te bevat.

Basiese paneel voorbeeld
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Paneel met opskrif

Voeg maklik 'n opskrifhouer by jou paneel met .panel-heading. Jy kan ook enige <h1>- <h6>met 'n .panel-titleklas insluit om 'n vooraf-gestileerde opskrif by te voeg. Die lettergroottes van <h1>- <h6>word egter deur .panel-heading.

Vir behoorlike skakelkleur, maak seker dat jy skakels in opskrifte binne plaas .panel-title.

Paneelopskrif sonder titel
Paneelinhoud

Paneel titel

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

Wikkel knoppies of sekondêre teks in .panel-footer. Let daarop dat paneelvoettekste nie kleure en grense erf wanneer kontekstuele variasies gebruik word nie, aangesien dit nie bedoel is om op die voorgrond te wees nie.

Paneelinhoud
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Kontekstuele alternatiewe

Soos ander komponente, maak maklik 'n paneel meer betekenisvol vir 'n spesifieke konteks deur enige van die kontekstuele staatsklasse by te voeg.

Paneel titel

Paneelinhoud

Paneel titel

Paneelinhoud

Paneel titel

Paneelinhoud

Paneel titel

Paneelinhoud

Paneel titel

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

Met tafels

Voeg enige nie-begrensde .tablebinne 'n paneel by vir 'n naatlose ontwerp. As daar 'n .panel-bodyis, voeg ons 'n ekstra rand aan die bokant van die tabel vir skeiding.

Paneelopskrif

Sommige standaardpaneelinhoud hier. Nulla vitae elit libero, 'n 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.

# Eerste naam Van Gebruikersnaam
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @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 daar geen paneelliggaam is nie, beweeg die komponent van paneelkop na tabel sonder onderbreking.

Paneelopskrif
# Eerste naam Van Gebruikersnaam
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Met lys groepe

Sluit maklik volwydte lysgroepe binne enige paneel in.

Paneelopskrif

Sommige standaardpaneelinhoud hier. Nulla vitae elit libero, 'n 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 by 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>

Responsiewe inbed

Laat blaaiers toe om video- of skyfievertoning-afmetings te bepaal op grond van die breedte van hul inhoudblok deur 'n intrinsieke verhouding te skep wat behoorlik op enige toestel sal skaal.

Reëls word direk toegepas op <iframe>, <embed>, <video>, en <object>elemente; gebruik opsioneel 'n eksplisiete afstammelingklas .embed-responsive-itemwanneer jy die stilering vir ander eienskappe wil pas.

Pro-wenk! Jy hoef nie frameborder="0"by jou <iframe>s in te sluit nie, want ons ignoreer dit vir jou.

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

Standaard goed

Gebruik die put as 'n eenvoudige effek op 'n element om dit 'n inset effek te gee.

Kyk, ek is in 'n put!
<div class="well">...</div>

Opsionele klasse

Beheer vulling en afgeronde hoeke met twee opsionele wysigingsklasse.

Kyk, ek is in 'n groot put!
<div class="well well-lg">...</div>
Kyk, ek is in 'n klein put!
<div class="well well-sm">...</div>