Plis pase yon douzèn eleman ki kapab itilize ankò ki te konstwi pou bay ikonografi, dropdowns, gwoup opinyon, navigasyon, alèt, ak plis ankò.
Glyphicons
Glif ki disponib
Gen plis pase 250 glif nan fòma font ki soti nan seri Glyphicon Halflings la. Glyphicons Halflings nòmalman pa disponib pou gratis, men kreyatè yo te fè yo disponib pou Bootstrap gratis. Kòm yon remèsiman, nou sèlman mande pou ou mete yon lyen ki tounen nan Glyphicons chak fwa sa posib.
glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-mwens
glyphicon glyphicon-cloud
glyphicon glyphicon-anvlòp
glyphicon glyphicon-kreyon
glyphicon glyphicon-glass
glyphicon glyphicon-mizik
glyphicon glyphicon-rechèch
glyphicon glyphicon-kè
glyphicon glyphicon-star
glyphicon glyphicon-star-vid
glyphicon glyphicon-itilizatè
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-retire
glyphicon glyphicon-zoom-an
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-fatra
glyphicon glyphicon-kay
glyphicon glyphicon-dosye
glyphicon glyphicon-time
glyphicon glyphicon-wout
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-jwe-sèk
glyphicon glyphicon-repete
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-drapo
glyphicon glyphicon-koutè
glyphicon glyphicon-volim-off
glyphicon glyphicon-volim-desann
glyphicon glyphicon-volim-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-liv
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-tèks-wotè
glyphicon glyphicon-tèks-lajè
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-dwat
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-dwat
glyphicon glyphicon-facetime-video
glyphicon glyphicon-foto
glyphicon glyphicon-map-marker
glyphicon glyphicon-ajiste
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-deplase
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-jwe
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-etap-devan
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-dwat
glyphicon glyphicon-plis-siy
glyphicon glyphicon-mwens-siy
glyphicon glyphicon-retire-siy
glyphicon glyphicon-ok-siy
glyphicon glyphicon-kesyon-siy
glyphicon glyphicon-info-siy
glyphicon glyphicon-screenshot
glyphicon glyphicon-retire-sèk
glyphicon glyphicon-ok-sèk
glyphicon glyphicon-ban-sèk
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-dwat
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-siy-eksklamasyon
glyphicon glyphicon-kado
glyphicon glyphicon-leaf
glyphicon glyphicon-dife
glyphicon glyphicon-je-louvri
glyphicon glyphicon-je-fèmen
glyphicon glyphicon-avètisman-siy
glyphicon glyphicon-avyon
glyphicon glyphicon-kalandriye
glyphicon glyphicon-random
glyphicon glyphicon-kòmantè
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-dosye-fèmen
glyphicon glyphicon-dosye-louvri
glyphicon glyphicon-resize-vètikal
glyphicon glyphicon-resize-orizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-sètifika
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-men-dwat
glyphicon glyphicon-men-gòch
glyphicon glyphicon-men-up
glyphicon glyphicon-men-desann
glyphicon glyphicon-sèk-flèch-adwat
glyphicon glyphicon-sèk-flèch-gòch
glyphicon glyphicon-sèk-flèch-up
glyphicon glyphicon-sèk-flèch-desann
glyphicon glyphicon-globe
glyphicon glyphicon-kle
glyphicon glyphicon-travay
glyphicon glyphicon-filtre
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dachboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-kè-vid
glyphicon glyphicon-lyen
glyphicon glyphicon-telefòn
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-pa-alfabè
glyphicon glyphicon-sort-pa-alfabè-alt
glyphicon glyphicon-sort-pa-lòd
glyphicon glyphicon-sort-pa-lòd-alt
glyphicon glyphicon-sort-pa-atribi
glyphicon glyphicon-sort-pa-atribi-alt
glyphicon glyphicon-unchecked
glyphicon glyphicon-expand
glyphicon glyphicon-effondreman-desann
glyphicon glyphicon-effondreman-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-nouvo-fenèt
glyphicon glyphicon-dosye
glyphicon glyphicon-save
glyphicon glyphicon-louvri
glyphicon glyphicon-sove
glyphicon glyphicon-enpòte
glyphicon glyphicon-ekspòtasyon
glyphicon glyphicon-voye
glyphicon glyphicon-diskèt
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-louvri
glyphicon glyphicon-kat-kredi
glyphicon glyphicon-transfer
glyphicon glyphicon-koutell
glyphicon glyphicon-header
glyphicon glyphicon-konprese
glyphicon glyphicon-koutè
glyphicon glyphicon-telefòn-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-sous-titres
glyphicon glyphicon-son-stereo
glyphicon glyphicon-son-dolby
glyphicon glyphicon-son-5-1
glyphicon glyphicon-son-6-1
glyphicon glyphicon-son-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-enskripsyon-mak
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-louvri-dosye
glyphicon glyphicon-level-up
glyphicon glyphicon-kopi
glyphicon glyphicon-paste
glyphicon glyphicon-alèt
glyphicon glyphicon-equalizer
glyphicon glyphicon-wa
glyphicon glyphicon-queen
glyphicon glyphicon-pyon
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tant
glyphicon glyphicon-blackboard
glyphicon glyphicon-bed
glyphicon glyphicon-apple
glyphicon glyphicon-efase
glyphicon glyphicon-hourglass
glyphicon glyphicon-lanp
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-sizo
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-fwote
glyphicon glyphicon-scale
glyphicon glyphicon-glas-lolly
glyphicon glyphicon-glas-piwi-goute
glyphicon glyphicon-education
glyphicon glyphicon-opsyon-orizontal
glyphicon glyphicon-opsyon-vètikal
glyphicon glyphicon-menu-anmbègè
glyphicon glyphicon-modal-window
glyphicon glyphicon-lwil
glyphicon glyphicon-grenn
glyphicon glyphicon-linèt solèy
glyphicon glyphicon-text-size
glyphicon glyphicon-tèks-koulè
glyphicon glyphicon-tèks-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-objè-aliy-orizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-objè-aliy-vètikal
glyphicon glyphicon-objè-aliy-dwa
glyphicon glyphicon-triyang-dwat
glyphicon glyphicon-triyang-left
glyphicon glyphicon-triyang-bottom
glyphicon glyphicon-triyang-top
glyphicon glyphicon-konsole
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-gòch
glyphicon glyphicon-menu-dwat
glyphicon glyphicon-menu-desann
glyphicon glyphicon-menu-up
Kouman pou itilize
Pou rezon pèfòmans, tout ikon mande pou yon klas debaz ak yon klas ikon endividyèl. Pou itilize, mete kòd sa a jis sou nenpòt kote. Asire ou ke ou kite yon espas ant icon nan ak tèks pou padding apwopriye.
Pa melanje ak lòt konpozan
Klas ikon yo pa ka konbine dirèkteman ak lòt konpozan. Yo pa ta dwe itilize ansanm ak lòt klas sou menm eleman. Olye de sa, ajoute yon enbrike <span>epi aplike klas icon yo nan <span>.
Sèlman pou itilize sou eleman vid
Klas ikon yo ta dwe itilize sèlman sou eleman ki pa gen okenn kontni tèks epi ki pa gen eleman pitit.
Chanje kote font icon yo
Bootstrap sipoze fichye font icon yo pral lokalize nan ../fonts/anyè a, parapò ak dosye CSS yo konpile. Deplase oswa chanje non fichye font sa yo vle di mete ajou CSS la nan youn nan twa fason:
Chanje @icon-font-pathak/oswa @icon-font-namevaryab nan sous la Mwens fichye yo.
Sèvi ak nenpòt opsyon ki pi bon kostim konfigirasyon devlopman espesifik ou.
Ikon aksesib
Vèsyon modèn teknoloji asistans yo pral anonse kontni CSS ki pwodui, ansanm ak karaktè Unicode espesifik. Pou evite pwodiksyon envolontè ak konfizyon nan lektè ekran (patikilyèman lè ikon yo itilize piman pou dekorasyon), nou kache yo ak aria-hidden="true"atribi a.
Si w ap itilize yon ikon pou transmèt siyifikasyon (olye ke sèlman kòm yon eleman dekoratif), asire ke siyifikasyon sa a transmèt tou nan teknoloji asistans – pou egzanp, enkli kontni adisyonèl, vizyèlman kache ak .sr-onlyklas la.
Si w ap kreye kontwòl ki pa gen okenn lòt tèks (tankou yon <button>ki gen sèlman yon ikòn), ou ta dwe toujou bay kontni altènatif pou idantifye objektif kontwòl la, pou li ka fè sans pou itilizatè teknoloji asistans yo. Nan ka sa a, ou ta ka ajoute yon aria-labelatribi sou kontwòl nan tèt li.
Egzanp yo
Sèvi ak yo nan bouton, gwoup bouton pou yon ba ikòn, navigasyon, oswa antre fòm avan.
Yon icon yo itilize nan yon alèt pou fè konnen se yon mesaj erè, ak tèks adisyonèl .sr-onlypou transmèt allusion sa a bay itilizatè teknoloji asistans yo.
Pa default, yon meni deroulant otomatikman pozisyone 100% soti nan tèt la ak sou bò gòch la nan paran li. Ajoute .dropdown-menu-rightyon .dropdown-menua dwat aliman meni an deroulant.
Ka mande pou pozisyon adisyonèl
Dropdowns yo otomatikman pozisyone atravè CSS nan koule nòmal nan dokiman an. Sa vle di paran ki gen sèten pwopriyete yo ka koupe dropdowns overflowoswa parèt andeyò pòtay la. Abòde pwoblèm sa yo poukont ou pandan y ap parèt.
Depreche .pull-rightaliyman
Kòm nan v3.1.0, nou te depreche .pull-rightsou meni deroulan. Pou fè aliman dwat yon meni, sèvi ak .dropdown-menu-right. Konpozan nav ki aliye adwat nan navbar la itilize yon vèsyon mixin nan klas sa a pou aliman meni an otomatikman. Pou pase sou tèt li, sèvi ak .dropdown-menu-left.
Tèt
Ajoute yon header pou make seksyon aksyon yo nan nenpòt meni deroulant.
Gwoup yon seri bouton ansanm sou yon sèl liy ak gwoup bouton an. Ajoute sou opsyon radyo JavaScript ak konpòtman stil kaz ak bouton plugin nou an .
Tooltips & popovers nan gwoup bouton mande pou yon anviwònman espesyal
Lè w ap itilize konsèy zouti oswa popovers sou eleman ki nan yon .btn-group, ou pral oblije presize opsyon container: 'body'pou evite efè segondè vle (tankou eleman nan ap grandi pi laj ak/oswa pèdi kwen awondi li yo lè konsèy la oswa popover deklanche).
Asire w kòrèk roleepi bay yon etikèt
Pou teknoloji asistans yo - tankou lektè ekran - pou transmèt ke yon seri de bouton gwoupe, roleyo dwe bay yon atribi apwopriye. Pou gwoup bouton, sa a ta dwe role="group", pandan y ap ba zouti yo ta dwe gen yon role="toolbar".
Yon eksepsyon se gwoup ki genyen sèlman yon sèl kontwòl (pa egzanp gwoup bouton jistifye ak <button>eleman) oswa yon dropdown.
Anplis de sa, gwoup yo ak ba zouti yo ta dwe bay yon etikèt klè, paske pifò teknoloji asistans pa pral anonse yo, malgre prezans roleatribi ki kòrèk la. Nan egzanp yo bay isit la, nou itilize aria-label, men altènativ tankou aria-labelledbyyo ka itilize tou.
Egzanp de baz
Vlope yon seri bouton ak .btnnan .btn-group.
Ba zouti bouton
Konbine ansanm <div class="btn-group">nan yon <div class="btn-toolbar">pou konpozan pi konplèks.
Dimansyon
Olye pou w aplike klas gwosè bouton nan chak bouton nan yon gwoup, jis ajoute .btn-group-*nan chak .btn-group, ki gen ladan lè nidifikasyon gwoup miltip.
Nidifikasyon
Mete yon .btn-groupnan yon lòt .btn-grouplè ou vle meni déroulant melanje ak yon seri de bouton.
Fè yon gwoup bouton detire nan gwosè egal pou span tout lajè paran li yo. Travay tou ak bouton dropdowns nan gwoup bouton an.
Manyen fwontyè yo
Akòz HTML espesifik ak CSS yo itilize pou jistifye bouton (savwa display: table-cell), fwontyè ki genyen ant yo double. Nan gwoup bouton regilye yo, margin-left: -1pxyo itilize pile fwontyè yo olye pou yo retire yo. Sepandan, marginli pa travay ak display: table-cell. Kòm yon rezilta, tou depann de personnalisation ou nan Bootstrap, ou ka vle retire oswa re-koulè fwontyè yo.
IE8 ak fwontyè
Internet Explorer 8 pa rann fwontyè sou bouton nan yon gwoup bouton jistifye, si li sou <a>oswa <button>eleman. Pou jwenn alantou sa, vlope chak bouton nan yon lòt .btn-group.
Si <a>yo itilize eleman yo pou yo aji kòm bouton - deklanche fonksyonalite nan paj, olye ke navige nan yon lòt dokiman oswa seksyon nan paj aktyèl la - yo ta dwe tou bay yon role="button".
Avèk <button>eleman
Pou itilize gwoup bouton jistifye ak <button>eleman, ou dwe vlope chak bouton nan yon gwoup bouton . Pifò navigatè pa byen aplike CSS nou an pou jistifikasyon nan <button>eleman, men depi nou sipòte dropdowns bouton, nou ka travay sou sa.
Bouton dropdowns
Sèvi ak nenpòt bouton pou deklanche yon meni deroulant lè w mete l nan yon .btn-groupepi bay meni apwopriye maketing la.
Depandans Plugin
Bouton dropdowns mande pou Plugin dropdown la dwe enkli nan vèsyon ou nan Bootstrap.
Dropdowns bouton sèl
Vire yon bouton nan yon deroulan ak kèk chanjman debaz maketing.
Pwolonje kontwòl fòm lè w ajoute tèks oswa bouton anvan, apre, oswa sou tou de bò nenpòt ki baze sou tèks <input>. Sèvi .input-groupak yon .input-group-addonoswa .input-group-btnpou ajoute oswa ajoute eleman nan yon sèl .form-control.
Textual <input>s sèlman
Evite itilize <select>eleman isit la paske yo pa ka konplètman style nan navigatè WebKit.
Evite itilize <textarea>eleman isit la kòm rowsatribi yo pa pral respekte nan kèk ka.
Tooltips & popovers nan gwoup opinyon yo mande pou yon anviwònman espesyal
Lè w ap itilize konsèy zouti oswa popovers sou eleman ki nan yon .input-group, ou pral oblije presize opsyon container: 'body'pou evite efè segondè endezirab (tankou eleman nan ap grandi pi laj ak/oswa pèdi kwen awondi li yo lè konsèy la oswa popover deklanche).
Pa melanje ak lòt konpozan
Pa melanje gwoup fòm oswa klas kolòn gri dirèkteman ak gwoup antre. Olye de sa, nich gwoup la antre anndan gwoup fòm oswa eleman ki gen rapò ak kadriyaj la.
Toujou ajoute etikèt
Lektè ekran yo pral gen pwoblèm ak fòm ou yo si ou pa mete yon etikèt pou chak opinyon. Pou gwoup opinyon sa yo, asire w ke nenpòt lòt etikèt oswa fonksyonalite transmèt nan teknoloji asistans.
Teknik egzak yo dwe itilize (eleman vizib <label>, <label>eleman kache lè l sèvi avèk .sr-onlyklas la, oswa itilizasyon aria-label, aria-labelledby, aria-describedby, titleoswa placeholderatribi) ak ki enfòmasyon adisyonèl yo pral bezwen transmèt yo pral varye selon kalite egzak widje koòdone w ap aplike. Egzanp yo nan seksyon sa a bay kèk sigjere, apwòch ka-espesifik.
Egzanp de baz
Mete yon sèl ajoute oswa bouton sou chak bò yon opinyon. Ou kapab tou mete youn sou tou de bò yon opinyon.
Nou pa sipòte plizyè ajoute ( .input-group-addonoswa .input-group-btn) sou yon sèl bò.
Nou pa sipòte plizyè fòm-kontwòl nan yon sèl gwoup opinyon.
Dimansyon
Ajoute klas relatif gwosè fòm yo nan .input-grouptèt li ak sa ki nan yo pral otomatikman redimensionne-pa bezwen repete klas gwosè kontwòl fòm yo sou chak eleman.
Case ak adisyon radyo
Mete nenpòt kaz oswa opsyon radyo nan addon yon gwoup opinyon olye pou yo tèks.
Addons bouton
Bouton nan gwoup opinyon yo yon ti jan diferan epi yo mande pou yon nivo siplemantè nan nidifikasyon. Olye de .input-group-addon, w ap bezwen sèvi .input-group-btnak vlope bouton yo. Sa a se obligatwa akòz estil navigatè default ki pa ka pase sou plas.
Bouton ak dropdowns
Bouton segmenté
Plizyè bouton
Pandan ke ou ka sèlman gen yon sèl ajoute sou chak bò, ou ka gen plizyè bouton andedan yon sèl .input-group-btn.
Navs
Navs ki disponib nan Bootstrap yo gen makasyon pataje, kòmanse ak .navklas debaz la, osi byen ke eta pataje. Boukante klas modifye pou chanje ant chak style.
Sèvi ak navs pou panno tab mande pou JavaScript tabs plugin
Pou onglè ki gen zòn tabulab, ou dwe itilize onglè JavaScript plugin . Markup la pral mande tou roleatribi adisyonèl ak ARIA - gade egzanp maketing plugin a pou plis detay.
Fè nav yo itilize kòm navigasyon aksesib
Si w ap itilize nav pou bay yon ba navigasyon, asire w ou ajoute yon role="navigation"nan veso paran ki pi lojik nan <ul>, oswa vlope yon <nav>eleman alantou tout navigasyon an. Pa ajoute wòl nan <ul>tèt li, paske sa ta anpeche teknoloji asistans yo anonse l kòm yon lis aktyèl.
Tabs
Remake byen .nav-tabsklas la mande pou .navklas debaz la.
Fasil fè tab oswa grenn egal lajè paran yo nan ekran ki pi laj pase 768px ak .nav-justified. Sou ekran ki pi piti yo, lyen navigasyon yo anpile.
Lyen nav nav jistifye yo pa sipòte kounye a.
Safari ak repons jistifye navs
Apati v9.1.2, Safari montre yon ensèk nan ki redimansyonman navigatè ou a orizontal lakòz erè nan rann nan navigasyon jistifye ki efase lè rafrechi. Ensèk sa a montre tou nan egzanp nav jistifye .
Navbar yo se eleman meta ki reponn ki sèvi kòm headers navigasyon pou aplikasyon w lan oswa sit. Yo kòmanse efondre (epi yo baskile) nan vi mobil yo epi yo vin orizontal kòm lajè vi ki disponib la ogmante.
Lyen nav nav jistifye yo pa sipòte kounye a.
Kontni debòde
Depi Bootstrap pa konnen ki kantite espas kontni an nan navbar ou bezwen, ou ta ka rankontre pwoblèm ak anbalaj kontni nan yon dezyèm ranje. Pou rezoud sa a, ou kapab:
Chanje pwen kote navbar ou a chanje ant mòd tonbe ak orizontal. Customize @grid-float-breakpointvaryab la oswa ajoute pwòp rekèt medya ou.
Mande JavaScript plugin
Si JavaScript dezaktive epi fenèt la ase etwat pou navbar la tonbe, li pral enposib pou elaji navbar la epi gade kontni an nan .navbar-collapse.
Navbar ki reponn a mande pou plugin efondreman an enkli nan vèsyon ou nan Bootstrap.
Chanje pwen rupture navbar mobil ki tonbe a
Navbar la tonbe nan vi mobil vètikal li lè vi a pi etwat pase @grid-float-breakpoint, epi li elaji nan vi orizontal li ki pa mobil lè vi a se omwen @grid-float-breakpointnan lajè. Ajiste varyab sa a nan sous la Mwens pou kontwole lè navbar la tonbe/agrandi. Valè default la se 768px(pi piti ekran an "ti" oswa "tablèt").
Fè navbars aksesib
Asire w ou sèvi ak yon <nav>eleman oswa, si w ap itilize yon eleman ki pi jenerik tankou yon <div>, ajoute yon role="navigation"nan chak navbar pou idantifye li klèman kòm yon rejyon enpòtan pou itilizatè teknoloji asistans.
Imaj mak
Ranplase mak navbar la ak pwòp imaj ou a lè w chanje tèks la pou yon <img>. Depi a .navbar-brandgen pwòp padding li yo ak wotè, ou ka bezwen pase sou desizyon kèk CSS depann sou imaj ou.
Fòm
Mete kontni fòm nan .navbar-formpou aliyman vètikal apwopriye ak konpòtman tonbe nan pòtay etwat. Sèvi ak opsyon aliyman yo pou deside ki kote li abite nan kontni navbar la.
Kòm yon tèt, .navbar-formpataje anpil nan kòd li yo ak .form-inlinevia mixin. Gen kèk kontwòl fòm, tankou gwoup antre, ki ka mande pou lajè fiks yo parèt byen nan yon navbar.
Opozisyon aparèy mobil
Gen kèk opozisyon konsènan lè l sèvi avèk kontwòl fòm nan eleman fiks sou aparèy mobil. Gade dokiman sipò navigatè nou an pou plis detay.
Toujou ajoute etikèt
Lektè ekran yo pral gen pwoblèm ak fòm ou yo si ou pa mete yon etikèt pou chak opinyon. Pou fòm enline sa yo, ou ka kache etikèt yo lè l sèvi avèk .sr-onlyklas la. Gen lòt metòd altènatif pou bay yon etikèt pou teknoloji asistans, tankou aria-label, aria-labelledbyoswa titleatribi. Si okenn nan sa yo pa prezan, lektè ekran yo ka itilize placeholderatribi a, si yo prezan, men sonje ke itilizasyon placeholderkòm yon ranplasman pou lòt metòd etikèt yo pa konseye.
Bouton
Ajoute .navbar-btnklas la nan <button>eleman ki pa abite nan yon <form>vètikal santre yo nan navbar la.
Itilizasyon kontèks espesifik
Tankou klas bouton estanda yo , .navbar-btnyo ka itilize sou <a>ak <input>eleman. Sepandan, ni .navbar-btnni klas bouton estanda yo ta dwe itilize sou <a>eleman ki nan .navbar-nav.
Tèks
Anvlope fisèl tèks nan yon eleman ak .navbar-text, anjeneral sou yon <p>tag pou bon dirijan ak koulè.
Lyen ki pa navigatè
Pou moun k ap itilize lyen estanda ki pa nan eleman navigasyon regilye navbar la, sèvi ak .navbar-linkklas la pou ajoute koulè apwopriye pou opsyon navbar default ak envès.
Aliyman eleman
Aliman lyen navigasyon, fòm, bouton, oswa tèks, lè l sèvi avèk .navbar-leftklas .navbar-rightsèvis piblik yo. Tou de klas yo pral ajoute yon flote CSS nan direksyon espesifye a. Pou egzanp, aliman lyen navigasyon, mete yo nan yon separe <ul>ak klas sèvis piblik respektif yo aplike.
Klas sa yo se vèsyon mixin-ed nan .pull-leftak .pull-right, men yo ap aplike nan demann medya pou pi fasil manyen konpozan navbar atravè gwosè aparèy.
Dwa aliman plizyè konpozan
Navbars kounye a gen yon limit ak plizyè .navbar-rightklas. Pou byen espas kontni, nou itilize maj negatif sou dènye .navbar-righteleman an. Lè gen plizyè eleman k ap itilize klas sa a, maj sa yo pa travay jan sa vle di.
Nou pral revize sa a lè nou ka reekri eleman sa a nan v4.
Fiks sou tèt
Ajoute .navbar-fixed-topepi enkli yon .containeroswa .container-fluidnan sant ak pad navbar kontni.
Kò padding obligatwa
Navbar fiks la pral kouvri lòt kontni ou, sof si ou ajoute paddingnan tèt la nan <body>. Eseye pwòp valè ou oswa itilize snippet nou anba a. Ide: Pa default, navbar la se 50px segondè.
Asire w ou mete sa a apre debaz Bootstrap CSS la.
Fiks anba
Ajoute .navbar-fixed-bottomepi enkli yon .containeroswa .container-fluidnan sant ak pad navbar kontni.
Kò padding obligatwa
Navbar fiks la pral kouvri lòt kontni ou a, sof si ou ajoute paddingnan anba a nan <body>. Eseye pwòp valè ou oswa itilize snippet nou anba a. Ide: Pa default, navbar la se 50px segondè.
Asire w ou mete sa a apre debaz Bootstrap CSS la.
Estatik tèt
Kreye yon navbar plen lajè ki defile ak paj la lè w ajoute .navbar-static-topepi enkli yon .containeroswa .container-fluidnan sant ak pad kontni navbar.
Kontrèman ak .navbar-fixed-*klas yo, ou pa bezwen chanje okenn padding sou body.
Navbar Envèse
Modifye aparans nan navbar la lè w ajoute .navbar-inverse.
Ti pen
Endike kote paj aktyèl la nan yon yerachi navigasyon.
Separatè yo otomatikman ajoute nan CSS atravè :beforeak content.
Bay lyen pajinasyon pou sit ou oswa aplikasyon w lan ak eleman pajinasyon ki gen plizyè paj, oswa altènatif pager ki pi senp lan .
Default pagination
Senp paginasyon enspire pa Rdio, bon pou apps ak rezilta rechèch. Gwo blòk la difisil pou rate, fasil évolutive, epi li bay gwo zòn klike sou.
Mete etikèt sou eleman paginasyon an
Yo ta dwe vlope eleman paginasyon an nan yon <nav>eleman pou idantifye li kòm yon seksyon navigasyon pou ekran lektè ak lòt teknoloji asistans. Anplis de sa, kòm yon paj gen anpil chans pou gen plis pase yon seksyon navigasyon sa yo deja (tankou navigasyon prensipal la nan header la, oswa yon navigasyon bò kote), li rekòmande bay yon deskripsyon aria-labelpou la <nav>ki reflete objektif li. Pou egzanp, si yo itilize eleman paginasyon an pou navige ant yon seri rezilta rechèch, yon etikèt apwopriye ta ka aria-label="Search results pages".
Eta andikape ak aktif
Lyen yo customizable pou diferan sikonstans. Itilize .disabledpou lyen ki pa klike ak .activepou endike paj aktyèl la.
Nou rekòmande pou ou chanje jete lank aktif oswa andikape pou <span>, oswa evite jete lank nan ka flèch anvan/pwochen yo, pou retire fonksyonalite klike yo pandan w ap kenbe estil entansyon yo.
Dimansyon
Anpenpan pi gwo oswa pi piti paginasyon? Ajoute .pagination-lgoswa .pagination-smpou gwosè adisyonèl.
Pager
Lyen rapid anvan ak pwochen pou enplemantasyon paginasyon senp ak mak ak estil limyè. Li bon pou sit senp tankou blog oswa magazin.
Default egzanp
Pa default, pager la santre lyen.
Lyen ki aliyen
Altènativman, ou ka aliman chak lyen sou kote sa yo:
Si ou vle eta andikape
Lyen pager yo itilize tou klas itilite jeneral .disabledki soti nan paginasyon an.
Etikèt
Egzanp
Egzanp tit Nouvo
Egzanp tit Nouvo
Egzanp tit Nouvo
Egzanp tit Nouvo
Egzanp tit Nouvo
Egzanp tit Nouvo
Varyasyon ki disponib
Ajoute nenpòt nan klas modifye yo mansyone anba a pou chanje aparans yon etikèt.
Default Primary Success Info Avètisman Danje
Gen tòn etikèt?
Pwoblèm rann yo ka parèt lè ou gen plizyè douzèn etikèt enline nan yon veso etwat, yo chak genyen inline-blockeleman pwòp pa yo (tankou yon icon). Wout la alantou sa a se anviwònman display: inline-block;. Pou yon kontèks ak yon egzanp, gade #13219 .
Badj
Fasil mete aksan sou atik nouvo oswa ki poko li lè w ajoute yon <span class="badge">nan lyen, Bootstrap navs, ak plis ankò.
Pou fè jumbotron a plen lajè, epi san kwen awondi, mete l deyò tout .containers epi olye ajoute yon .containerandedan.
Tèt paj
Yon kokiy senp pou yon h1espas apwopriye epi segman seksyon kontni sou yon paj. Li ka itilize eleman h1default smallla, osi byen ke pifò lòt konpozan (ak estil adisyonèl).
Egzanp header paj Subtext pou header
Miniatures
Pwolonje sistèm kadriyaj Bootstrap la ak eleman miniature pou montre fasilman griyaj imaj, videyo, tèks, ak plis ankò.
Si w ap chèche pou Pinterest-tankou prezantasyon nan miniatures nan diferan wotè ak / oswa lajè, w ap bezwen sèvi ak yon Plugin twazyèm-pati tankou Masonry , Isotope , oswa Salvattore .
Default egzanp
Pa default, ti miniatures Bootstrap yo fèt pou montre imaj ki lye yo ak maketing minimòm obligatwa.
Kontni Custom
Avèk yon ti mak siplemantè, li posib pou ajoute nenpòt kalite kontni HTML tankou tit, paragraf, oswa bouton nan miniatures.
Etikèt miniature
Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Bay mesaj fidbak kontèks pou aksyon itilizatè tipik ak ti ponyen mesaj alèt ki disponib ak fleksib.
Egzanp yo
Anvlope nenpòt tèks ak yon bouton anile opsyonèl nan .alertak youn nan kat klas kontèks yo (egzanp, .alert-success) pou mesaj alèt debaz yo.
Pa gen klas default
Alèt yo pa gen klas defo, sèlman klas baz ak modifikatè. Yon alèt gri default pa fè twòp sans, kidonk ou oblije presize yon kalite atravè klas kontèks. Chwazi nan siksè, enfòmasyon, avètisman, oswa danje.
Byen fè! Ou byen li mesaj alèt enpòtan sa a.
Tèt leve! Alèt sa a bezwen atansyon ou, men li pa trè enpòtan.
Avètisman! Pito tcheke tèt ou, ou pa gade twò bon.
Oh menen! Chanje kèk bagay epi eseye soumèt ankò.
Alèt ki pa gendwa
Bati sou nenpòt alèt lè w ajoute yon .alert-dismissiblebouton opsyonèl ak fèmen.
Bay fidbak ajou sou pwogrè yon workflow oswa aksyon ak ba pwogrè senp men fleksib.
Konpatibilite kwa-navigatè
Ba pwogrè sèvi ak tranzisyon CSS3 ak animasyon pou reyalize kèk nan efè yo. Karakteristik sa yo pa sipòte nan Internet Explorer 9 ak pi ba a oswa ansyen vèsyon Firefox. Opera 12 pa sipòte animasyon yo.
Kontni Sekirite Règleman (CSP) konpatibilite
Si sit entènèt ou a gen yon Règleman Sekirite Kontni (CSP) ki pa pèmèt style-src 'unsafe-inline', Lè sa a, ou p ap kapab sèvi ak styleatribi enline pou mete lajè ba pwogrè jan yo montre nan egzanp nou yo anba a. Metòd altènatif pou fikse lajè ki konpatib ak CSP strik yo enkli lè l sèvi avèk yon ti JavaScript koutim (ki mete element.style.width) oswa lè l sèvi avèk klas CSS koutim.
Egzanp de baz
Default ba pwogrè.
60% konplè
Avèk etikèt
Retire klas la nan <span>ba .sr-onlypwogrè a pou montre yon pousantaj vizib.
60%
Pou asire ke tèks etikèt la rete lizib menm pou pousantaj ki ba, konsidere ajoute yon min-widthnan ba pwogrè a.
0%
2%
Altènativ kontèks
Ba pwogrè sèvi ak kèk nan menm bouton ak klas alèt pou estil ki konsistan.
40% konplè (siksè)
20% konplè
60% konplè (avètisman)
80% konplè (danje)
Raye
Sèvi ak yon gradyan pou kreye yon efè trase. Pa disponib nan IE9 ak anba a.
40% konplè (siksè)
20% konplè
60% konplè (avètisman)
80% konplè (danje)
Anime
Ajoute .activenan .progress-bar-stripedpou anime bann yo dwat a goch. Pa disponib nan IE9 ak anba a.
45% Konplete
Anpile
Mete plizyè ba nan menm bagay la .progresspou anpile yo.
35% konplè (siksè)
20% konplè (avètisman)
10% konplè (danje)
Objè medya yo
Estil objè abstrè pou bati divès kalite konpozan (tankou kòmantè blog, Tweet, elatriye) ki prezante yon imaj ki aliye sou bò gòch oswa dwa ansanm ak kontni tèks.
Default medya
Medya default yo montre yon objè medya (imaj, videyo, odyo) sou bò gòch oswa adwat yon blòk kontni.
Medya tit
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 nan faucibus.
Medya tit
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 nan faucibus.
Tèt medya anbrike
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 nan faucibus.
Medya tit
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.
Medya tit
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.
Klas yo .pull-leftak .pull-rightegziste tou epi yo te deja itilize kòm yon pati nan eleman nan medya yo, men yo depreche pou itilizasyon sa a nan v3.3.0. Yo apeprè ekivalan a .media-leftak .media-right, eksepte ke .media-rightyo ta dwe mete apre a .media-bodynan html la.
Medya aliyman
Imaj yo oswa lòt medya yo ka aliyen anwo, mitan, oswa anba. Defo a se tèt ki aliyen.
Top medya ki aliyen
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 nan faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ak magnis dis parturient montes, nascetur ridiculus mus.
Mwayen ki aliyen medya yo
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 nan faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ak magnis dis parturient montes, nascetur ridiculus mus.
Anba ki aliyen medya yo
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 nan faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ak magnis dis parturient montes, nascetur ridiculus mus.
Lis medya yo
Avèk yon ti mak siplemantè, ou ka itilize medya andedan lis (itil pou fil kòmantè oswa lis atik).
Medya tit
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.
Tèt medya anbrike
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.
Tèt medya anbrike
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.
Tèt medya anbrike
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.
Lis gwoup
Gwoup lis yo se yon eleman fleksib ak pwisan pou montre non sèlman lis eleman senp, men lis konplèks ak kontni koutim.
Egzanp de baz
Gwoup lis ki pi fondamantal la se tou senpleman yon lis ki pa gen lòd ak atik lis yo, ak klas apwopriye yo. Bati sou li ak opsyon ki swiv yo, oswa pwòp CSS ou jan sa nesesè.
Cras justo odio
Dapibus ak fasilite nan
Morbi leo risus
Porta ac consectetur ac
Vestibulum nan eros
Badj
Ajoute eleman badj la nan nenpòt atik gwoup lis epi li pral otomatikman pozisyone sou bò dwat la.
14Cras justo odio
2Dapibus ak fasilite nan
1Morbi leo risus
Atik ki lye
Konekte atik gwoup lis yo lè l sèvi avèk etikèt jete lank olye pou yo atik lis yo (sa vle di tou yon paran <div>olye de yon <ul>). Pa bezwen paran endividyèl alantou chak eleman.
Atik gwoup lis yo ka bouton olye de atik lis (sa vle di tou yon paran <div>olye de yon <ul>). Pa bezwen paran endividyèl alantou chak eleman. Pa sèvi ak klas estanda .btnyo isit la.
Atik ki andikape
Ajoute .disablednan yon .list-group-itemgri li soti nan parèt enfim.
Pandan ke pa toujou nesesè, pafwa ou bezwen mete DOM ou nan yon bwat. Pou sitiyasyon sa yo, eseye eleman panèl la.
Egzanp de baz
Pa default, tout sa yo .panelfè se aplike kèk fwontyè debaz ak padding pou genyen kèk kontni.
Egzanp panèl debaz
Panel ak tit
Fasil ajoute yon veso tit nan panèl ou a ak .panel-heading. Ou ka genyen tou nenpòt <h1>- <h6>ak yon .panel-titleklas pou ajoute yon tit pre-estile. Sepandan, gwosè font yo nan <h1>- <h6>yo depase pa .panel-heading.
Pou bon koloran lyen, asire w ou mete lyen nan tit nan .panel-title.
Panèl tit san tit
Kontni panèl
Tit panèl
Kontni panèl
Panel ak footer
Anvlope bouton oswa tèks segondè nan .panel-footer. Remake byen ke pye panèl pa eritye koulè ak fwontyè lè w ap itilize varyasyon kontèks yo paske yo pa vle di yo dwe nan premye plan an.
Kontni panèl
Altènativ kontèks
Menm jan ak lòt eleman, fasilman fè yon panèl plis sans nan yon kontèks patikilye lè w ajoute nenpòt nan klas eta kontèks yo.
Tit panèl
Kontni panèl
Tit panèl
Kontni panèl
Tit panèl
Kontni panèl
Tit panèl
Kontni panèl
Tit panèl
Kontni panèl
Avèk tab
Ajoute nenpòt ki pa bòdi .tablenan yon panèl pou yon konsepsyon san pwoblèm. Si gen yon .panel-body, nou ajoute yon fwontyè siplemantè nan tèt tab la pou separasyon.
tit panèl
Gen kèk kontni panèl default isit la. Nulla vitae elit libero, a 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.
#
Premye Non
Siyati
Non itilizatè
1
Mak
Otto
@mdo
2
Jakòb
Thornton
@grès
3
Larry
Zwazo a
@twitter
Si pa gen okenn kò panèl, eleman an deplase soti nan header panèl nan tab san entèripsyon.
Gen kèk kontni panèl default isit la. Nulla vitae elit libero, a 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 ak fasilite nan
Morbi leo risus
Porta ac consectetur ac
Vestibulum nan eros
Reponn embed
Pèmèt navigatè yo detèmine dimansyon videyo oswa diaporama ki baze sou lajè blòk ki genyen yo lè yo kreye yon rapò intrinsèque ki pral byen echèl sou nenpòt aparèy.
Règ yo aplike dirèkteman nan <iframe>, <embed>, <video>, ak <object>eleman; opsyonèlman sèvi ak yon klas desandan eksplisit .embed-responsive-itemlè ou vle matche ak stil pou lòt atribi.
Pro-Tip! Ou pa bezwen mete frameborder="0"nan <iframe>s ou kòm nou pase sou desizyon sa pou ou.
Wells
Default byen
Sèvi ak pi a kòm yon efè senp sou yon eleman bay li yon efè ensèkle.
Gade, mwen nan yon pi!
Klas opsyonèl
Kontwòl padding ak kwen awondi ak de klas modifye opsyonèl.