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.

Gee 'n geldige e-posadres

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

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

Voorbeeld

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>

Belyning

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.

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

Opskrifte

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>

Verdeler

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>

Gedeaktiveerde spyskaartitems

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>

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-group, 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 opspringer geaktiveer word).

Verseker korrek `role`en 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>

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.

Links Middel Reg

Links Middel

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

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>

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.

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

Oortjies

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>

Pille

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>

Geregverdigde

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>

Gedeaktiveerde skakels

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>

Gebruik aftreklys

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>

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:

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

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

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>

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.

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

Belynde skakels

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>

Voorbeeld

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 .

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>

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

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

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.

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

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

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>

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) toe vir basiese waarskuwingsboodskappe.

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.

Wel gedaan! Jy het hierdie belangrike waarskuwingsboodskap suksesvol gelees.

Let op! Hierdie waarskuwing benodig jou aandag, maar dit is nie baie belangrik nie.

Waarskuwing! Kyk beter na jouself, jy lyk nie te goed nie.

O snap! Verander 'n paar dinge en probeer weer indien.

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

Waarskuwing! Kyk beter na jouself, jy lyk nie te goed nie.

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

Skakels in waarskuwings

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

Wel gedaan! Jy het hierdie belangrike waarskuwingsboodskap suksesvol gelees .

Let op! Hierdie waarskuwing benodig jou aandag , maar dit is nie baie belangrik nie.

Waarskuwing! Kyk beter na jouself, jy lyk nie te goed nie .

O snap! Verander 'n paar dinge en probeer weer indien.

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

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.

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

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

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

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

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

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.

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

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.

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

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.

Lys groepitem opskrif

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

Lys groepitem opskrif

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

Lys groepitem opskrif

Donec id elit non mi porta gravida by 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>

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>

Paneel met voetskrif

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

Paneelvoetskrif

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

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>

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>

Komponente

Glyphicons

Beskikbare glyphs

Hoe om te gebruik

Moenie met ander komponente meng nie

Slegs vir gebruik op leë elemente

Verander die ikoon font ligging

Toeganklike ikone

Voorbeelde

Aftrekkies

Voorbeeld

Belyning

Mag addisionele posisionering vereis

Verouderde .pull-rightbelyning

Opskrifte

Verdeler

Gedeaktiveerde spyskaartitems

Knoppie groepe

Gereedskapwenke en popovers in knoppiegroepe vereis spesiale instellings

Verseker korrek roleen verskaf 'n etiket

Basiese voorbeeld

Knoppie nutsbalk

Grootte

Nestel

Vertikale variasie

Geregverdigde knoppie groepe

Hanteer grense

IE8 en grense

Met <a>elemente

Skakels dien as knoppies

Met <button>elemente

Knoppie aftrekkies

Inprop-afhanklikheid

Enkelknoppie-aftrekkies

Verdeel knoppie aftrekkies

Grootte

Drop-up variasie

Invoergroepe

Slegs tekstuele <input>s

Gereedskapwenke en popovers in invoergroepe vereis spesiale instellings

Moenie met ander komponente meng nie

Voeg altyd etikette by

Basiese voorbeeld

Grootte

Merkblokkies en radio-byvoegings

Knoppie byvoegings

Knoppies met aftreklys

Gesegmenteerde knoppies

Veelvuldige knoppies

Navs

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

Maak navigasie wat as navigasie gebruik word, toeganklik

Oortjies

Pille

Geregverdigde

Safari en responsiewe geregverdigde navigasie

Gedeaktiveerde skakels

Skakelfunksie nie geraak nie

Gebruik aftreklys

Oortjies met aftreklys

Pille met dropdowns

Navbar

Verstek navigasiebalk

Oorvol inhoud

Vereis JavaScript-inprop

Verander tans die ingevoude mobiele navigasiebalk-breekpunt

Maak navigasiebalke toeganklik

Handelsmerkbeeld

Vorms

Waarskuwings vir mobiele toestelle

Voeg altyd etikette by

Knoppies

Konteksspesifieke gebruik

Teks

Nie-nav-skakels

Komponentbelyning

Regsbelyning van verskeie komponente

Bo vasgemaak

Liggaamsvulling benodig

Vas aan die onderkant

Verouderde `.pull-right`belyning

Verseker korrek `role`en verskaf 'n etiket

Met `<a>`elemente

Met `<button>`elemente

Slegs tekstuele `<input>`s