Meer as 'n dosyn herbruikbare komponente wat gebou is om ikonografie, aftreklys, invoergroepe, navigasie, waarskuwings en nog baie meer te verskaf.
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 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.
Voorbeelde
Gebruik dit in knoppies, knoppiegroepe vir 'n nutsbalk, navigasie, of voorafgevoegde vorminvoer.
'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.
Fout:Gee 'n geldige e-posadres
Aftrekkies
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.
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.
Opskrifte
Voeg 'n kopskrif by om afdelings van handelinge in enige aftreklys te benoem.
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.
Knoppie nutsbalk
Kombineer stelle <div class="btn-group">in 'n <div class="btn-toolbar">vir meer komplekse komponente.
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.
Nestel
Plaas 'n .btn-groupin 'n ander .btn-groupwanneer jy aftrekkieslys gemeng wil hê met 'n reeks knoppies.
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.
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.
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.
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.
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.
Merkblokkies en radio-byvoegings
Plaas enige merkblokkie of radio-opsie binne 'n invoergroep se byvoeging in plaas van teks.
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.
Knoppies met aftreklys
Gesegmenteerde knoppies
Veelvuldige knoppies
Alhoewel jy net een byvoeging per kant kan hê, kan jy veelvuldige knoppies in 'n enkele .input-group-btn.
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.
Oortjies
Let op die .nav-tabsklas vereis die .navbasisklas.
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 .
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.
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ë.
Handelsmerkbeeld
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.
Vorms
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.
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.
Knoppies
Voeg die .navbar-btnklas by <button>elemente wat nie in a woon nie <form>om hulle vertikaal in die navigasiebalk te sentreer.
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.
Teks
Draai stringe teks toe in 'n element met .navbar-text, gewoonlik op 'n <p>merker vir behoorlike leiding en kleur.
Nie-nav-skakels
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.
Komponentbelyning
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.
Bo vasgemaak
Voeg 'n of by .navbar-fixed-topen sluit 'n .containerof .container-fluidin by die inhoud van die navigasiebalk in die middel en die pad.
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.
Maak seker dat jy dit insluit na die kern Bootstrap CSS.
Vas aan die onderkant
Voeg 'n of by .navbar-fixed-bottomen sluit 'n .containerof .container-fluidin by die inhoud van die navigasiebalk in die middel en die pad.
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.
Maak seker dat jy dit insluit na die kern Bootstrap CSS.
Statiese top
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.
Omgekeerde navigasiebalk
Verander die voorkoms van die navigasiebalk deur by te voeg .navbar-inverse.
Broodkrummels
Dui die huidige bladsy se ligging binne 'n navigasiehiërargie aan.
Skeiers word outomaties bygevoeg in CSS deur :beforeen content.
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.
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.
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.
Grootte
Lus vir groter of kleiner paginering? Voeg by .pagination-lgof .pagination-smvir addisionele groottes.
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.
Belynde skakels
Alternatiewelik kan jy elke skakel na die kante in lyn bring:
Opsionele gedeaktiveerde toestand
Pager-skakels gebruik ook die algemene .disablednutsklas vanaf die paginering.
Etikette
Voorbeeld
Voorbeeld opskrif Nuut
Voorbeeld opskrif Nuut
Voorbeeld opskrif Nuut
Voorbeeld opskrif Nuut
Voorbeeld opskrif Nuut
Voorbeeld opskrif Nuut
Beskikbare variasies
Voeg enige van die wysigerklasse hieronder by om die voorkoms van 'n etiket te verander.
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.
Om die jumbotron volle breedte te maak, en sonder afgeronde hoeke, plaas dit buite alle .containers en voeg eerder 'n .containerbinne by.
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).
Voorbeeld bladsyopskrif Subteks vir kopskrif
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.
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.
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.
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.
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.
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.
Verwerpbare waarskuwings
Bou op enige waarskuwing deur 'n opsionele .alert-dismissibleen toemaakknoppie by te voeg.
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
Met etiket
Verwyder die <span>met .sr-only-klas van binne die vorderingsbalk om 'n sigbare persentasie te wys.
60%
Om te verseker dat die etiketteks leesbaar bly selfs vir lae persentasies, oorweeg dit om 'n min-widthby die vorderingsbalk te voeg.
0%
2%
Kontekstuele alternatiewe
Vorderingstawe gebruik sommige van dieselfde knoppie- en waarskuwingsklasse vir konsekwente style.
40% Voltooi (sukses)
20% Voltooi
60% voltooi (waarskuwing)
80% Voltooi (gevaar)
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)
Geanimeerde
Voeg .activeby .progress-bar-stripedom die strepe regs na links te animeer. Nie beskikbaar in IE9 en onder nie.
45% Voltooi
Gestapel
Plaas verskeie stawe in dieselfde .progressom hulle te stapel.
35% Voltooi (sukses)
20% voltooi (waarskuwing)
10% Voltooi (gevaar)
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.
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.
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.
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
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
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.
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.
Gedeaktiveerde items
Voeg .disabledby 'n .list-group-itemom dit uit te grys om gedeaktiveer te lyk.
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
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
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
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
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
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
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
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.
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!
Opsionele klasse
Beheer vulling en afgeronde hoeke met twee opsionele wysigingsklasse.