Maherin'ny am-polony singa azo ampiasaina indray naorina mba hanomezana kisary, dropdowns, vondrona fampidirana, fitetezana, fanairana, sy ny maro hafa.
Glyphicons
Misy glyphs
Ahitana glyphs mihoatra ny 250 amin'ny endrika endri-tsoratra avy amin'ny set Glyphicon Halflings. Ny Glyphicons Halflings dia matetika tsy misy maimaim-poana, fa ny mpamorona azy dia nanome azy ireo maimaim-poana ho an'ny Bootstrap. Ho fisaorana anao dia mangataka rohy mankany amin'ny Glyphicons ihany izahay raha azo atao.
glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-valopy
glyphicon glyphicon-pencil
glyphicon glyphicon-glass
glyphicon glyphicon-mozika
glyphicon glyphicon-search
glyphicon glyphicon-fo
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-user
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-esory
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-fako
glyphicon glyphicon-trano
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-avereno
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
glyphicon glyphicon-headphones
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-boky
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-haavo
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-picture
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-faingana-mandroso
glyphicon glyphicon-dingana-mandroso
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-question-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-ankavia
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-feno
glyphicon glyphicon-resize-kely
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-fanomezana
glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-maso-misokatra
glyphicon glyphicon-maso-akaiky
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-comment
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-akatona
glyphicon glyphicon-folder-misokatra
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certificate
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-right
glyphicon glyphicon-tanana-havia
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-ankavia
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-asa
glyphicon glyphicon-sivana
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-fo-foana
glyphicon glyphicon-rohy
glyphicon glyphicon-telefaonina
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-tsy voamarika
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-voavonjy
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-carte de crédit
glyphicon glyphicon-transfer
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tilikambo
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-feo-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
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-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-day
glyphicon glyphicon-blackboard
glyphicon glyphicon-fandriana
glyphicon glyphicon-apple
glyphicon glyphicon-famafana
glyphicon glyphicon-hourglass
glyphicon glyphicon-jiro
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-scissors
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-nanandrana
glyphicon glyphicon-education
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-oil
glyphicon glyphicon-grain
glyphicon glyphicon-solomaso
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-havia
glyphicon glyphicon-triangle-ambany
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-ankavia
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
Ny fomba fampiasana
Noho ny antony fampisehoana, ny kisary rehetra dia mitaky kilasy fototra sy kilasy kisary tsirairay. Raha hampiasaina dia apetraho amin'ny toerana rehetra ity kaody manaraka ity. Ataovy azo antoka ny mamela toerana eo anelanelan'ny kisary sy ny lahatsoratra mba hahazoana padding mety.
Aza mifangaro amin'ny singa hafa
Tsy azo atambatra mivantana amin'ny singa hafa ny kilasy kisary. Tsy tokony hampiasaina miaraka amin'ny kilasy hafa amin'ny singa iray ihany izy ireo. Fa kosa, ampio nested <span>ary ampiharo ny kilasy kisary amin'ny <span>.
Fampiasana amin'ny singa foana
Ny kilasin'ny kisary dia tsy tokony ampiasaina afa-tsy amin'ny singa tsy misy atiny lahatsoratra ary tsy misy singa zaza.
Fanovana ny toerana misy endritsoratra kisary
Bootstrap dia mihevitra fa ho hita ao amin'ny ../fonts/lahatahiry ny rakitra endri-tsoratra icon, mifandraika amin'ny rakitra CSS natambatra. Ny famindràna na fanovana anarana ireo rakitra endri-tsoratra dia midika hoe fanavaozana ny CSS amin'ny iray amin'ireo fomba telo:
Ovay ny @icon-font-pathsy/na @icon-font-nameny fari-piainana ao amin'ny loharano Less files.
Amin'ny alàlan'ny default, apetraka ho azy 100% avy any ambony sy eo amin'ny ilany havia amin'ny ray aman-dreniny ny menio midina. Ampio .dropdown-menu-rightamin'ny .dropdown-menurindran-kavanana ny menio midina.
Mety mitaky toerana fanampiny
Apetraka ho azy amin'ny alàlan'ny CSS ao anatin'ny fikorianan'ny antontan-taratasy ny dropdowns. Midika izany fa mety hesorin'ny ray aman-dreny manana overflowfananana sasany na miseho ivelan'ny sisin'ny seranan-tsambo ny fidina. Resaho samirery ireo olana ireo rehefa mipoitra.
Fandrindrana .pull-righttsy ampiasaina
Tamin'ny v3.1.0, dia nitsahatra tsy .pull-rightnampiasa ny menio midina izahay. Mba hanitsy ny menio iray, ampiasao ny .dropdown-menu-right. Ny singa nav mirindra havanana ao amin'ny navbar dia mampiasa dikan-teny mixin amin'ity kilasy ity mba hampifanaraka ho azy ny sakafo. Mba hanesorana azy dia ampiasao .dropdown-menu-left.
lohapejy
Manampia lohapejy hanamarihana ny ampahan'ny hetsika ao amin'ny menio midina.
Mitaky toe-javatra manokana ny toro-lalana & popover amin'ny vondrona bokotra
Rehefa mampiasa toro-hevitra na popover amin'ny singa ao anatin'ny .btn-group, dia tsy maintsy mamaritra ny safidy container: 'body'hialana amin'ny voka-dratsy tsy ilaina ianao (toy ny fitomboan'ny singa mivelatra sy/na very ny zorony boribory rehefa mipoitra ny tendron'ny fitaovana na popover).
Hamarino tsara roleary omeo marika
Mba hahafahan'ny teknolojia manampy - toy ny mpamaky efijery - hampita fa misy andiana bokotra mivondrona, rolemila omena toetra mifanaraka amin'izany. Ho an'ny vondrona bokotra, ity dia role="group", raha tokony hanana role="toolbar".
Ny singa iray dia vondrona izay tsy misy afa-tsy fanaraha-maso tokana (ohatra ny vondrona bokotra voamarina misy <button>singa) na fidina.
Fanampin'izany, tokony homena marika mazava ny vondrona sy ny barazy, satria ny ankamaroan'ny teknolojia manampy dia tsy hanambara izany, na dia eo aza ny fisian'ny roletoetra marina. Ao amin'ireo ohatra omena eto dia mampiasa aria-label, fa azo aria-labelledbyampiasaina ihany koa ny safidy hafa.
Noho ny HTML sy CSS manokana ampiasaina hanamarinana ny bokotra (izany hoe display: table-cell), dia avo roa heny ny sisin-tany eo anelanelan'izy ireo. Ao amin'ny vondrona bokotra mahazatra, margin-left: -1pxdia ampiasaina hametahana ny sisin-tany fa tsy manala azy ireo. Na izany aza, margintsy miasa amin'ny display: table-cell. Vokatr'izany, miankina amin'ny fanamboaranao amin'ny Bootstrap, azonao atao ny manaisotra na mandoko indray ny sisin-tany.
IE8 sy sisintany
Internet Explorer 8 dia tsy manome sisintany amin'ny bokotra ao anaty vondrona bokotra voamarina, na eo amin'ny singa <a>na <button>singa. Mba hialana amin'izany dia aforeto amin'ny bokotra iray hafa ny bokotra tsirairay .btn-group.
Raha <a>ampiasaina toy ny bokotra ireo singa - miteraka fampiasa ao anaty pejy, fa tsy mandeha mankany amin'ny antontan-taratasy na fizarana hafa ao anatin'ny pejy ankehitriny - dia tokony homena role="button".
Miaraka amin'ny <button>singa
Raha hampiasa vondrona bokotra nohamarinina miaraka amin'ny <button>singa dia tsy maintsy fonosinao ao anaty vondrona bokotra ny bokotra tsirairay . Ny ankamaroan'ny mpitety tranonkala dia tsy mampihatra araka ny tokony ho izy ny CSS-ntsika mba hanamarinana ireo <button>singa, fa satria manohana ny fidina bokotra izahay, dia afaka miasa amin'izany izahay.
Bokotra midina
Mampiasà bokotra iray hanetsika ny menio midina amin'ny alàlan'ny fametrahana azy ao anatin'ny iray .btn-groupary manome ny marika mena.
Fiankinan-doha amin'ny plugin
Ny fanidiana bokotra dia mitaky ny fampidirana plugin ao amin'ny kinova Bootstrap anao.
Hanitatra ny fifehezana endrika amin'ny alalan'ny fampidirana lahatsoratra na bokotra mialoha, aorian'ny, na amin'ny lafiny roa amin'ny lahatsoratra mifototra amin'ny lahatsoratra <input>. Ampiasao .input-groupmiaraka amin'ny .input-group-addonna .input-group-btnmba hanomanana na hampiditra singa amin'ny singa tokana .form-control.
Textuel <input>ihany
Fadio ny mampiasa <select>singa eto fa tsy azo atao tanteraka amin'ny navigateur WebKit.
Fadio ny mampiasa <textarea>singa eto rowsfa tsy hohajaina ny toetrany amin'ny toe-javatra sasany.
Mitaky toe-javatra manokana ny toro-lalana & popover amin'ny vondrona fampidirana
Rehefa mampiasa toro-hevitra na popover amin'ny singa ao anatin'ny .input-group, dia tsy maintsy mamaritra ny safidy container: 'body'hialana amin'ny voka-dratsy tsy ilaina ianao (toy ny fitomboan'ny singa mivelatra sy/na very ny zorony boribory rehefa mipoitra ny tendron'ny fitaovana na popover).
Aza mifangaro amin'ny singa hafa
Aza afangaro mivantana amin'ny vondrona fampidirana na vondrona tsanganana an-jorony. Alefaso kosa ny vondrona fampidirana ao anatin'ny vondrona endrika na singa mifandraika amin'ny grid.
Ampio etikety foana
Ny mpamaky efijery dia hanana olana amin'ny endrikao raha tsy mampiditra marika ho an'ny fidirana rehetra ianao. Ho an'ireo vondrona fampidirana ireo, alaivo antoka fa misy marika na fiasa fanampiny ampitaina amin'ny teknolojia manampy.
Ny teknika marina hampiasaina (singa hita maso <label>, <label>singa miafina amin'ny fampiasana ny .sr-onlykilasy, na fampiasana ny aria-label, aria-labelledby, aria-describedby, titlena placeholdertoetra) sy izay fampahalalana fanampiny ilaina hampitaina dia hiovaova arakaraka ny karazana widget interface tsara ampiharinao. Ny ohatra ato amin'ity fizarana ity dia manome soso-kevitra vitsivitsy, fomba fiasa manokana.
Ohatra fototra
Asio fanampiny na bokotra iray eo amin'ny andaniny roa amin'ny fampidirana. Azonao atao koa ny mametraka iray amin'ny lafiny roa amin'ny fampidirana.
Tsy manohana endrika-contrôle maromaro ao anaty vondrona fampidirana tokana izahay.
Sizing
Ampidiro amin'ny tenany ny kilasy fandrefesana endrika .input-groupary ny atiny ao anatiny dia hiova ho azy - tsy ilaina ny mamerina ny kilasy fanaraha-maso ny endrika amin'ny singa tsirairay.
Boxes sy radio addons
Apetraho ao anatin'ny addon an'ny vondrona fampidirana fa tsy lahatsoratra.
Addons bokotra
Somary hafa ny bokotra ao amin'ny vondrona fampidirana ary mitaky ambaratonga fanampiny fanatobiana. Raha tokony ho .input-group-addon, dia mila mampiasa ianao .input-group-btnhamehezana ny bokotra. Ilaina izany noho ny fomba fitetezana default izay tsy azo ovaina.
Bokotra misy fidina
Bokotra mizarazara
Bokotra maromaro
Na dia azonao atao aza ny manana add-on isaky ny lafiny iray, azonao atao ny manana bokotra maromaro ao anatin'ny iray .input-group-btn.
Navs
Ny Navs misy ao amin'ny Bootstrap dia manana marika nizara, manomboka amin'ny .navkilasy fototra, ary koa ny fanjakana iombonana. Ampifamadiho ny kilasy modifier mba hifindra eo amin'ny fomba tsirairay.
Ny fampiasana navs ho an'ny takelaka tabilao dia mila plugin JavaScript tabs
Ho an'ny kiheba misy faritra azo vakiana dia tsy maintsy mampiasa ny plugin JavaScript tabs ianao . Mitaky roletoetra fanampiny sy ARIA ihany koa ny marika - jereo ny mari-pamantarana ohatra amin'ny plugin raha mila fanazavana fanampiny.
Ataovy azo idirana ny navs ampiasaina
Raha mampiasa navs ianao mba hanomezana bara fitetezana, ataovy azo antoka ny manampy a role="navigation"amin'ny fitahirizana ray aman-dreny lojika indrindra amin'ny <ul>, na mamehy <nav>singa iray manodidina ny fitetezana manontolo. Aza ampidirina amin'ny <ul>tenany ny andraikitra, satria izany dia hanakana azy tsy hambara ho lisitra tena izy amin'ny alàlan'ny teknolojia manampy.
Tabs
Mariho fa ny .nav-tabskilasy dia mitaky ny .navkilasy fototra.
Ataovy mora ny tabilao na pilina mitovy sakan'ny ray aman-dreniny amin'ny efijery lehibe kokoa noho ny 768px miaraka amin'ny .nav-justified. Amin'ny efijery kely kokoa, ny rohy nav dia atambatra.
Tsy tohana amin'izao fotoana izao ny rohy navbar navbar voamarina.
Safari sy navs voamarina
Hatramin'ny v9.1.2, Safari dia mampiseho bibikely izay mahatonga ny fanovana ny navigateur mitsivalana mahatonga ny fahadisoana ao amin'ny nav voamarina izay voafafa rehefa mamelombelona. Ity bug ity koa dia aseho amin'ny ohatra nav voamarina .
Navbars dia singa meta mamaly izay miasa ho lohatenin'ny fitetezana ho an'ny fampiharana na tranokalanao. Nanomboka nirodana izy ireo (ary azo toggle) amin'ny fijerena finday ary lasa mitsivalana rehefa mitombo ny sakan'ny seranan-tsambo misy.
Tsy tohana amin'izao fotoana izao ny rohy navbar navbar voamarina.
Votoaty mitobaka
Satria tsy fantatr'i Bootstrap hoe ohatrinona ny habaka ilain'ny votoaty ao amin'ny navbar-nao, dia mety hisy olana amin'ny fametahana votoaty ho andalana faharoa. Mba hamahana izany dia azonao atao ny:
Ovay ny teboka ifindran'ny navbar-nao eo amin'ny maodely nirodana sy mitsivalana. Amboary ny @grid-float-breakpointfari-piainana na ampio ny fangatahanao manokana amin'ny haino aman-jery.
Mila JavaScript plugin
Raha toa ka kilemaina ny JavaScript ary tery loatra ny seranan-tsambo ka mirodana ny navbar, dia tsy ho azo atao ny manitatra ny navbar sy mijery ny atiny ao anatin'ny .navbar-collapse.
Ny navbar responsive dia mitaky ny plugin collapse mba hampidirina ao amin'ny kinova Bootstrap anao.
Fanovana ny toerana fiatoana navbar finday nirodana
Ny navbar dia mirodana amin'ny fijeriny finday mitsangana rehefa tery kokoa noho ny @grid-float-breakpoint, ary mivelatra mankany amin'ny fijeriny mitsivalana tsy mandeha amin'ny finday rehefa ny sakany dia farafaharatsiny @grid-float-breakpointny sakany. Ampifanaraho amin'ny loharano kely kokoa io fari-pahalalana io mba hifehezana rehefa mirodana/mivelatra ny navbar. Ny sandan'ny default dia 768px(ny efijery "kely" na "tablette" kely indrindra).
Ataovy azo idirana ny navbars
Aza hadino ny mampiasa <nav>singa iray na, raha mampiasa singa mazàna kokoa toy ny <div>, ampio a role="navigation"isaky ny navbar mba hamantarana azy mazava ho faritra manan-tantara ho an'ny mpampiasa ny teknolojia fanampiana.
Sarin'ny marika
Soloy amin'ny sarinao manokana ny marika navbar amin'ny alàlan'ny famadihana ny lahatsoratra amin'ny <img>. Koa satria .navbar-brandmanana ny padding sy ny haavony manokana, dia mety mila manilika CSS ianao arakaraka ny sarinao.
teny
Apetraho ao anatiny ny votoatin'ny endrika .navbar-formho an'ny fampifanarahana mitsangana tsara sy ny fitondran-tena nirodana ao amin'ny seranan-tsambo tery. Ampiasao ny safidy fampifanarahana hanapa-kevitra hoe aiza no misy azy ao anatin'ny atiny navbar.
Amin'ny maha lohan-doha azy, .navbar-formmizara ny ankamaroan'ny kaody ao aminy amin'ny .form-inlinealalan'ny mixin. Ny fanaraha-maso endrika sasany, toy ny vondrona fampidirana, dia mety mitaky sakan'ny raikitra mba hiseho tsara ao anaty navbar.
Ny mpamaky efijery dia hanana olana amin'ny endrikao raha tsy mampiditra marika ho an'ny fidirana rehetra ianao. Ho an'ireo endrika an-tsoratra ireo dia azonao atao ny manafina ireo etikety amin'ny fampiasana ny .sr-onlykilasy. Misy fomba hafa hafa amin'ny fanomezana marika ho an'ny teknolojia manampy, toy ny aria-label, aria-labelledbyna titletoetra. Raha tsy misy ny iray amin'ireo, dia mety hampiasa ilay placeholdertoetra ny mpamaky efijery, raha misy, saingy mariho fa tsy soso-kevitra ny fampiasana placeholderho solon'ny fomba fametahana marika hafa.
bokotra
Ampio ny .navbar-btnkilasy amin'ny <button>singa tsy mipetraka ao amin'ny iray <form>mba hampifantohana azy ireo amin'ny navbar.
Fampiasana manokana momba ny toe-javatra
Toy ny kilasy bokotra mahazatra , .navbar-btnazo ampiasaina amin'ny <a>sy <input>singa. Na izany aza, .navbar-btnna ny kilasy bokotra mahazatra dia tsy tokony hampiasaina amin'ny <a>singa ao anaty .navbar-nav.
Text
Fonosy tady lahatsoratra amin'ny singa misy .navbar-text, matetika amin'ny <p>marika mba hahazoana fitarihana sy loko mety.
Rohy tsy nav
Ho an'ny olona mampiasa rohy mahazatra izay tsy ao anatin'ny singa navigateur navbar mahazatra, ampiasao ny .navbar-linkkilasy mba hanampiana ny loko mety ho an'ny safidy navbar default sy inverse.
Fandrindrana singa
Ampifanaraho ny rohy nav, endrika, bokotra, na lahatsoratra, amin'ny fampiasana ny kilasy .navbar-leftna .navbar-rightutility. Ireo kilasy roa ireo dia hanampy mitsingevana CSS amin'ny lalana voafaritra. Ohatra, mba hampifanitsiana ny rohy nav, dia apetraho amin'ny sokajy mitokana izy ireo <ul>miaraka amin'ny kilasy ilaina ampiasaina.
Ireo kilasy ireo dia dikan-teny mifangaro amin'ny .pull-leftand .pull-right, saingy izy ireo dia miompana amin'ny fangatahan'ny haino aman-jery ho mora kokoa amin'ny fitantanana ireo singa navbar amin'ny haben'ny fitaovana.
Ahitsio tsara ny singa maromaro
Ny Navbars amin'izao fotoana izao dia manana fetra amin'ny .navbar-rightkilasy maromaro. Mba hanamafisana ny votoatin'ny habaka dia mampiasa sisiny ratsy amin'ny .navbar-rightsinga farany izahay. Rehefa misy singa maromaro mampiasa an'io kilasy io dia tsy mandeha araka ny tokony ho izy ireo sisiny ireo.
Ampio .navbar-fixed-topary ampidiro ny atiny .containerna .container-fluidamin'ny afovoany sy pad navbar.
Ilaina ny padding amin'ny vatana
Ny navbar raikitra dia hanarona ny atiny hafa, raha tsy ampidirinao paddingeo an-tampon'ny <body>. Andramo ny soatoavinao manokana na ampiasao ny snippet eto ambany. Soso-kevitra: Amin'ny alàlan'ny default, ny navbar dia 50px avo.
Ataovy azo antoka ny hampiditra izany aorian'ny CSS Bootstrap fototra.
Miorina hatrany ambany
Ampio .navbar-fixed-bottomary ampidiro ny atiny .containerna .container-fluidamin'ny afovoany sy pad navbar.
Ilaina ny padding amin'ny vatana
Ny navbar raikitra dia hanarona ny atiny hafa, raha tsy ampidirinao paddingeo amin'ny farany ambany ny <body>. Andramo ny soatoavinao manokana na ampiasao ny snippet eto ambany. Soso-kevitra: Amin'ny alàlan'ny default, ny navbar dia 50px avo.
Ataovy azo antoka ny hampiditra izany aorian'ny CSS Bootstrap fototra.
Omeo rohy pagination ho an'ny tranokalanao na fampiharana miaraka amin'ny singa pagination pejy maro, na ny safidy pager tsotra kokoa .
Default pagination
pagination tsotra aingam-panahy avy amin'ny Rdio, tsara ho an'ny fampiharana sy ny valin'ny fikarohana. Ny sakana lehibe dia sarotra adino, mora miendrika, ary manome faritra kitiho lehibe.
Famaritana ny singa pagination
Ny singa pagination dia tokony hofonosina singa <nav>iray mba hamantarana azy ho toy ny fizarana fitetezana amin'ny fijerena mpamaky sy ny teknolojia manampy. Ho fanampin'izany, satria ny pejy iray dia mety manana fizarana fitetezana mihoatra ny iray sahady (toy ny fitetezana voalohany amin'ny lohapejy, na ny fitetezana sisiny), dia tsara ny manome famaritana aria-labelizay <nav>maneho ny tanjony. Ohatra, raha ampiasaina hivezivezena eo anelanelan'ny andiana valim-pikarohana ny singa pagination, dia mety ho marika mety ny aria-label="Search results pages".
Fanjakana kilemaina sy mavitrika
Ny rohy dia azo zahana amin'ny toe-javatra samihafa. Ampiasao .disabledho an'ny rohy tsy azo kitihina sy .activehanondroana ny pejy ankehitriny.
Manoro hevitra izahay mba hanakalo vatofantsika mavitrika na kilemaina ho an'ny <span>, na esory ny vatofantsika raha ny zana-tsipìka teo aloha/manaraka, hanesorana ny fampiasa kitiho raha mitazona ny fomba nokasaina.
Rohy haingana teo aloha sy manaraka ho an'ny fampiharana pagination tsotra miaraka amin'ny marika maivana sy fomba. Tena tsara ho an'ny tranokala tsotra toy ny bilaogy na gazetiboky.
Ohatra default
Amin'ny alàlan'ny default, ny pager dia mametraka rohy.
Rohy mirindra
Azonao atao koa ny mampifanaraka ny rohy tsirairay amin'ny sisiny:
Toetran'ny olona kilemaina
Ny rohy pager koa dia mampiasa ny .disabledkilasin'ny fampiasa amin'ny ankapobeny avy amin'ny pagination.
etikety
OHATRA
Ohatra lohateny Vaovao
Ohatra lohateny Vaovao
Ohatra lohateny Vaovao
Ohatra lohateny Vaovao
Ohatra lohateny Vaovao
Ohatra lohateny Vaovao
Variations misy
Ampio ny iray amin'ireo kilasy modifier voalaza etsy ambany mba hanovana ny endriky ny marika.
Fampitandremana fampitandremana momba ny Fahombiazana Voalohany
Manana marika maromaro?
Mety hipoitra ny olana amin'ny famoahana rehefa manana etikety an-tsoratra am-polony ao anatin'ny fitoeran-javatra tery ianao, izay samy misy singany manokana inline-block(toy ny kisary). Ny fomba manodidina izany dia ny fametrahana display: inline-block;. Ho an'ny contexte sy ohatra iray dia jereo ny #13219 .
Badges
Asongadino mora foana ireo singa vaovao na tsy novakiana amin'ny alalan'ny fampidirana <span class="badge">rohy, navs Bootstrap, sy ny maro hafa.
Mba hahatonga ny jumbotron ho feno sakany, ary tsy misy zorony boribory, apetraho eo ivelan'ny .containers rehetra ary ampio .containerao anatiny.
Lohatenin'ny pejy
Akorandriaka tsotra ahafahana h1manasaraka sy mizara ampahany amin'ny atiny amin'ny pejy iray. Afaka mampiasa ny singa h1default ' small, ary koa ny ankamaroan'ny singa hafa (miaraka amin'ny fomba fanampiny).
Lohatenin'ny pejy Ohatra ho an'ny lohapejy
vinety
Hanitatra ny rafitry ny grid Bootstrap miaraka amin'ny singa thumbnail mba hampisehoana mora foana ny grids amin'ny sary, horonan-tsary, lahatsoratra, sy ny maro hafa.
Raha mitady famelabelarana saribakoly mitovy amin'ny Pinterest amin'ny haavony sy/na sakany ianao dia mila mampiasa plugin an'ny antoko fahatelo toy ny Masonry , Isotope , na Salvattore .
Ohatra default
Amin'ny alàlan'ny default, ny thumbnails Bootstrap dia natao hanehoana sary mifandray miaraka amin'ny marika kely ilaina.
atiny manokana
Miaraka amin'ny marika fanampiny, azo atao ny manampy karazana votoaty HTML toy ny lohateny, fehintsoratra, na bokotra amin'ny thumbnails.
Etikety thumbnail
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. 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 and eget metus. 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 and eget metus. Id dolor id nibh ultricies vehicula ut id elit.
Manomeza valin-teny manara-penitra momba ny fandrosoan'ny rindranasa na hetsika miaraka amin'ny bara fandrosoana tsotra nefa miovaova.
Mifanaraka amin'ny navigateur
Mampiasa fifindran'ny CSS3 sy sary mihetsika ny bara fandrosoana mba hanatrarana ny sasany amin'ireo fiantraikany. Ireo endri-javatra ireo dia tsy tohanana amin'ny Internet Explorer 9 sy ambany na dikan-teny taloha an'ny Firefox. Opera 12 dia tsy manohana sary mihetsika.
Fiarovana amin'ny atiny (CSP) mifanaraka
Raha manana Politika fiarovana amin'ny atiny (CSP) ny tranokalanao izay tsy mamela style-src 'unsafe-inline', dia tsy ho afaka hampiasa ny styletoetra an-tsipika ianao mba hametrahana ny sakan'ny bara fandrosoana araka ny aseho amin'ny ohatra eto ambany. Ny fomba hafa amin'ny fametrahana ny sakany mifanaraka amin'ny CSP henjana dia ahitana ny fampiasana JavaScript manokana (izay mametraka element.style.width) na fampiasana kilasy CSS mahazatra.
Ohatra fototra
Bara fandrosoana default.
60% feno
Miaraka amin'ny etikety
Esory ny kilasy <span>miaraka .sr-onlyao anatin'ny bara fandrosoana mba hanehoana isan-jato hita maso.
60%
Mba hahazoana antoka fa azo vakiana foana ny soratra misy soratra na dia ambany isan-jato aza, dia eritrereto ny manampy a min-widthamin'ny bara fandrosoana.
0%
2%
Alternatives contextual
Ny bara fandrosoan'ny fandrosoana dia mampiasa bokotra mitovy sy kilasy fanairana ho an'ny fomba tsy miovaova.
40% Vita (fahombiazana)
20% feno
60% feno (fampitandremana)
80% feno (loza)
mitsipitsipika
Mampiasa gradient mba hamoronana vokatra mitsipika. Tsy hita ao amin'ny IE9 sy ambany.
40% Vita (fahombiazana)
20% feno
60% feno (fampitandremana)
80% feno (loza)
animation
Ampio .activeamin'ny .progress-bar-stripedfamelomana ny tsipika havanana miankavia. Tsy hita ao amin'ny IE9 sy ambany.
45% Feno
Mivondrona
Asio bara maromaro ao anatin'ny iray mitovy .progressmba hametahana azy ireo.
35% Vita (fahombiazana)
20% feno (fampitandremana)
10% feno (loza)
Media object
Fomban-javatra manjavozavo amin'ny fananganana karazana singa isan-karazany (toy ny fanehoan-kevitry ny bilaogy, Tweets, sns) izay manasongadina sary mirindra havia na havanana miaraka amin'ny atiny soratra.
Media mahazatra
Ny haino aman-jery default dia mampiseho zavatra media (sary, horonan-tsary, feo) eo ankavia na havanana amin'ny sakana votoaty.
Lohatenin'ny haino aman-jery
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.
Lohatenin'ny haino aman-jery
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.
Lohatenin'ny haino aman-jery nested
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.
Lohatenin'ny haino aman-jery
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.
Lohatenin'ny haino aman-jery
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.
Ny sary na ny haino aman-jery hafa dia azo arindra ambony, afovoany, na ambany. Ny default dia mirindra ambony.
Fampahalalam-baovao mifanandrify indrindra
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 mirindra afovoany
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 mirindra ambany
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.
Lisitry ny media
Miaraka amin'ny mari-pamantarana fanampiny, azonao atao ny mampiasa media anaty lisitra (ilaina amin'ny kofehy fanehoan-kevitra na lisitry ny lahatsoratra).
Lohatenin'ny haino aman-jery
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.
Lohatenin'ny haino aman-jery nested
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.
Lohatenin'ny haino aman-jery nested
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.
Lohatenin'ny haino aman-jery nested
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.
Vondrona lisitra
Ny vondrona lisitra dia singa mora sy matanjaka amin'ny fanehoana tsy lisitry ny singa tsotra, fa ireo saro-takarina miaraka amin'ny atiny manokana.
Ohatra fototra
Ny vondrona lisitra fototra indrindra dia lisitra tsy misy filaharana miaraka amin'ireo singa lisitra, ary ireo kilasy mety. Amboary miaraka amin'ny safidy manaraka, na ny CSS anao manokana raha ilaina.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum sy eros
Badges
Ampio ny singa marika amin'ny singa vondrona lisitra ary hapetraka eo ankavanana ho azy izany.
14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus
Zavatra mifandray
Ampifandraiso ireo singa vondrona lisitra amin'ny fampiasana marika vatofantsika fa tsy zavatra lisitra (izay midika hoe ray aman-dreny <div>fa tsy <ul>). Tsy mila ray aman-dreny tsirairay manodidina ny singa tsirairay.
Ny singa vondrona lisitra dia mety ho bokotra fa tsy zavatra lisitra (izay midika hoe ray aman-dreny <div>fa tsy <ul>). Tsy mila ray aman-dreny tsirairay manodidina ny singa tsirairay. Aza mampiasa ny .btnkilasy mahazatra eto.
Zavatra kilemaina
Ampidiro .disabledamin'ny a .list-group-itemho fotsy izany mba hiseho ho kilemaina.
Ho an'ny fandokoana rohy mety dia ataovy izay hametrahana rohy amin'ny lohateny ao anatin'ny .panel-title.
Lohatenin'ny tontonana tsy misy lohateny
Ny votoatin'ny tontonana
Lohatenin'ny tontonana
Ny votoatin'ny tontonana
Panel misy footer
Fonosana bokotra na lahatsoratra faharoa amin'ny .panel-footer. Mariho fa tsy mandova loko sy sisin-tany ny tongotry ny tontonana rehefa mampiasa fiovaovan'ny contextual satria tsy natao ho eo aloha izy ireo.
Ny votoatin'ny tontonana
Alternatives contextual
Toy ny singa hafa, ataovy mora kokoa ny tontonana iray manan-danja kokoa amin'ny toe-javatra iray manokana amin'ny alalan'ny fampidirana ny iray amin'ireo kilasy fanjakana contextual.
Lohatenin'ny tontonana
Ny votoatin'ny tontonana
Lohatenin'ny tontonana
Ny votoatin'ny tontonana
Lohatenin'ny tontonana
Ny votoatin'ny tontonana
Lohatenin'ny tontonana
Ny votoatin'ny tontonana
Lohatenin'ny tontonana
Ny votoatin'ny tontonana
Miaraka amin'ny latabatra
Ampio izay tsy misy sisin-tany .tableao anatin'ny tontonana mba hamolavola tsy misy fotony. Raha misy .panel-body, dia asiana sisintany fanampiny eo an-tampon'ny latabatra hisarahana.
Lohatenin'ny tontonana
Ny votoatin'ny tontonana default eto. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Id dolor id nibh ultricies vehicula ut id elit.
#
Fanampin'anarana
Anarana
Anaran'ny mpampiasa
1
marika
Otto
@mdo
2
Jakoba
Thornton
@matavy
3
Larry
ny Vorona
@twitter
Raha tsy misy vatana tontonana, ny singa dia mifindra avy amin'ny lohatenin'ny tontonana mankany amin'ny latabatra tsy misy fahatapahana.
Ny votoatin'ny tontonana default eto. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum sy eros
Fampidirana mamaly
Avelao ny mpitety tranonkala hamantatra ny refin'ny horonan-tsary na sary mihetsika mifototra amin'ny sakan'ny sakana misy azy amin'ny alalan'ny famoronana ratio intrinsic izay mirefy araka ny tokony ho izy amin'ny fitaovana rehetra.
Ny fitsipika dia ampiharina mivantana amin'ny <iframe>, <embed>, <video>, ary <object>singa; raha azo atao dia ampiasao kilasy taranaka mazava .embed-responsive-itemraha te hampifanaraka ny styling amin'ny toetra hafa ianao.
Pro-Tip! Tsy mila ampidirinao frameborder="0"ao amin'ny <iframe>s anao fa fehezinay ho anao izany.
lavaka famorian-drano
Default tsara
Ampiasao ny fantsakana ho toy ny effet tsotsotra amin'ny singa iray mba hanomezana effet inset azy.
Jereo fa ao anaty lavaka fantsakana aho!
Kilasy azo atao
Fanaraha-maso ny padding sy ny zorony boribory miaraka amin'ny kilasy modifier roa.