Mahigit sa isang dosenang reusable na bahagi na binuo upang magbigay ng iconography, dropdown, input group, navigation, alerto, at marami pang iba.
Mga Glyphicon
Magagamit na mga glyph
May kasamang mahigit 250 glyph sa format ng font mula sa Glyphicon Halflings set. Karaniwang hindi available nang libre ang Glyphicons Halflings, ngunit ginawa silang available ng kanilang tagalikha para sa Bootstrap nang walang bayad. Bilang pasasalamat, hinihiling lang namin na magsama ka ng link pabalik sa Glyphicons hangga't maaari.
glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-envelope
glyphicon glyphicon-pencil
glyphicon glyphicon-glass
glyphicon glyphicon-musika
glyphicon glyphicon-search
glyphicon glyphicon-heart
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-alisin
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-daan
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
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-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
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-kanan
glyphicon glyphicon-facetime-video
glyphicon glyphicon-larawan
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-paatras
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-kanan
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-left
glyphicon glyphicon-arrow-kanan
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-regalo
glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
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-close
glyphicon glyphicon-folder-open
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-kamay-kanan
glyphicon glyphicon-kamay-kaliwa
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-kanan
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-heart-empty
glyphicon glyphicon-link
glyphicon glyphicon-phone
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-attribute
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-unchecked
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-save
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-credit-card
glyphicon glyphicon-transfer
glyphicon glyphicon-kubyertos
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-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-alerto
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-kama
glyphicon glyphicon-mansanas
glyphicon glyphicon-erase
glyphicon glyphicon-hourglass
glyphicon glyphicon-lamp
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-gunting
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-tikim
glyphicon glyphicon-education
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-langis
glyphicon glyphicon-grain
glyphicon glyphicon-sunglasses
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-kanan
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-kanan
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
Paano gamitin
Para sa mga dahilan ng pagganap, ang lahat ng mga icon ay nangangailangan ng isang batayang klase at indibidwal na klase ng icon. Upang magamit, ilagay ang sumusunod na code sa halos kahit saan. Tiyaking mag-iwan ng espasyo sa pagitan ng icon at teksto para sa wastong padding.
Huwag ihalo sa iba pang mga sangkap
Ang mga klase ng icon ay hindi maaaring direktang pagsamahin sa iba pang mga bahagi. Hindi sila dapat gamitin kasama ng iba pang mga klase sa parehong elemento. Sa halip, magdagdag ng nested <span>at ilapat ang mga klase ng icon sa <span>.
Para lamang gamitin sa mga walang laman na elemento
Ang mga klase ng icon ay dapat lamang gamitin sa mga elemento na walang nilalamang teksto at walang mga elemento ng bata.
Pagbabago ng lokasyon ng font ng icon
Ipinapalagay ng Bootstrap na ang mga file ng font ng icon ay matatagpuan sa ../fonts/direktoryo, na nauugnay sa mga pinagsama-samang CSS file. Ang paglipat o pagpapalit ng pangalan sa mga font file ay nangangahulugan ng pag-update ng CSS sa isa sa tatlong paraan:
Baguhin ang @icon-font-pathat/o @icon-font-namemga variable sa pinagmulan Mas kaunting mga file.
Baguhin ang mga url()landas sa pinagsama-samang CSS.
Gumamit ng anumang opsyon na pinakaangkop sa iyong partikular na setup ng development.
Mga naa-access na icon
Ang mga modernong bersyon ng mga pantulong na teknolohiya ay mag-aanunsyo ng nilalamang nabuo ng CSS, pati na rin ang mga partikular na Unicode na character. Upang maiwasan ang hindi sinasadya at nakakalito na output sa mga screen reader (lalo na kapag ang mga icon ay ginagamit lamang para sa dekorasyon), itinatago namin ang mga ito gamit ang aria-hidden="true"katangian.
Kung gumagamit ka ng icon para ipahiwatig ang kahulugan (sa halip na bilang isang elementong pampalamuti lamang), tiyaking ang kahulugan na ito ay ipinaparating din sa mga pantulong na teknolohiya – halimbawa, magsama ng karagdagang nilalaman, na biswal na nakatago sa .sr-onlyklase.
Kung lumilikha ka ng mga kontrol na walang ibang text (tulad ng <button>isang icon na naglalaman lamang), dapat kang palaging magbigay ng alternatibong nilalaman upang matukoy ang layunin ng kontrol, upang magkaroon ito ng kahulugan sa mga gumagamit ng mga pantulong na teknolohiya. Sa kasong ito, maaari kang magdagdag aria-labelng katangian sa mismong kontrol.
Mga halimbawa
Gamitin ang mga ito sa mga button, mga grupo ng button para sa isang toolbar, navigation, o mga naka-prepend na form input.
Isang icon na ginagamit sa isang alerto upang ipahiwatig na ito ay isang mensahe ng error, na may karagdagang .sr-onlyteksto upang ihatid ang pahiwatig na ito sa mga gumagamit ng mga pantulong na teknolohiya.
Error:Maglagay ng wastong email address
Mga dropdown
Toggleable, contextual na menu para sa pagpapakita ng mga listahan ng mga link. Ginawang interactive gamit ang dropdown na JavaScript plugin .
Halimbawa
I-wrap ang trigger ng dropdown at ang dropdown na menu sa loob ng .dropdown, o isa pang elementong nagdedeklara ng position: relative;. Pagkatapos ay idagdag ang HTML ng menu.
Bilang default, ang isang dropdown na menu ay awtomatikong nakaposisyon nang 100% mula sa itaas at sa kaliwang bahagi ng magulang nito. Idagdag.dropdown-menu-right sa isang .dropdown-menui-align sa kanan ang dropdown na menu.
Maaaring mangailangan ng karagdagang pagpoposisyon
Ang mga dropdown ay awtomatikong nakaposisyon sa pamamagitan ng CSS sa loob ng normal na daloy ng dokumento. Nangangahulugan ito na ang mga dropdown ay maaaring i-crop ng mga magulang na may ilang partikular na overflowkatangian o lumabas sa labas ng mga hangganan ng viewport. Tugunan ang mga isyung ito nang mag-isa kapag lumitaw ang mga ito.
Hindi na ginagamit.pull-right pagkakahanay
Simula sa v3.1.0, hindi na namin ginagamit ang mga .pull-rightdropdown na menu. Upang i-right-align ang isang menu, gamitin ang .dropdown-menu-right. Ang mga bahagi ng nav na nakahanay sa kanan sa navbar ay gumagamit ng mixin na bersyon ng klase na ito upang awtomatikong i-align ang menu. Upang i-override ito, gamitin ang .dropdown-menu-left.
Mga header
Magdagdag ng header upang lagyan ng label ang mga seksyon ng mga aksyon sa anumang dropdown na menu.
Pagsama-samahin ang isang serye ng mga pindutan sa isang linya kasama ang pangkat ng pindutan. Idagdag sa opsyonal na JavaScript radio at pag-uugali sa istilo ng checkbox gamit ang aming mga button na plugin .
Ang mga tooltip at popover sa mga pangkat ng button ay nangangailangan ng espesyal na setting
Kapag gumagamit ng mga tooltip o popover sa mga elemento sa loob ng .btn-group, kakailanganin mong tukuyin ang opsyon container: 'body'upang maiwasan ang mga hindi gustong side effect (tulad ng lumalawak na elemento at/o nawawala ang mga bilugan nitong sulok kapag na-trigger ang tooltip o popover).
Tiyaking tama roleat magbigay ng label
Upang maiparating ng mga pantulong na teknolohiya - tulad ng mga screen reader - na nakagrupo ang isang serye ng mga button, rolekailangang magbigay ng naaangkop na katangian. Para sa mga pangkat ng button, ito ay magiging role="group", habang ang mga toolbar ay dapat may role="toolbar".
Ang isang pagbubukod ay mga pangkat na naglalaman lamang ng iisang kontrol (halimbawa, ang mga pangkat ng justified na button na may mga <button>elemento) o isang dropdown.
Bilang karagdagan, ang mga pangkat at toolbar ay dapat na bigyan ng isang tahasang label, dahil karamihan sa mga teknolohiyang pantulong ay kung hindi man ay hindi ipahayag ang mga ito, sa kabila ng pagkakaroon ng tamang rolekatangian. Sa mga halimbawang ibinigay dito, ginagamit namin ang aria-label, ngunit magagamit din ang mga alternatibo tulad ng aria-labelledby.
Pangunahing halimbawa
I-wrap ang isang serye ng mga button na may .btnin .btn-group.
Toolbar ng pindutan
Pagsamahin ang mga set ng sa <div class="btn-group">isang <div class="btn-toolbar">para sa mas kumplikadong mga bahagi.
Pagsusukat
Sa halip na ilapat ang mga klase sa pag-size ng button sa bawat button sa isang grupo, idagdag lang .btn-group-*sa bawat isa .btn-group, kabilang ang kapag naglalagay ng maraming grupo.
Pugad
Maglagay ng isang sa .btn-grouploob ng isa pa .btn-groupkapag gusto mo ang mga dropdown na menu na may halong serye ng mga button.
Gumawa ng isang pangkat ng mga pindutan na mag-abot sa pantay na laki upang sumasaklaw sa buong lapad ng magulang nito. Gumagana rin sa mga dropdown ng button sa loob ng pangkat ng button.
Paghawak ng mga hangganan
Dahil sa partikular na HTML at CSS na ginamit upang bigyang-katwiran ang mga pindutan (ibig sabihin display: table-cell), ang mga hangganan sa pagitan ng mga ito ay nadoble. Sa mga regular na grupo ng button, margin-left: -1pxay ginagamit upang i-stack ang mga hangganan sa halip na alisin ang mga ito. Gayunpaman, marginhindi gumagana sa display: table-cell. Bilang resulta, depende sa iyong mga pagpapasadya sa Bootstrap, maaari mong hilingin na alisin o muling kulayan ang mga hangganan.
IE8 at mga hangganan
Ang Internet Explorer 8 ay hindi nagre-render ng mga hangganan sa mga button sa isang justified na pangkat ng button, ito man ay naka-on <a>o mga <button>elemento. Upang makayanan iyon, balutin ang bawat pindutan sa isa pa.btn-group .
Tingnan ang #12476 para sa karagdagang impormasyon.
Sa <a>mga elemento
I-wrap lang ang isang serye ng mga .btns sa .btn-group.btn-group-justified.
Kung ang mga <a>elemento ay ginagamit upang kumilos bilang mga pindutan - na nagti-trigger ng in-page na functionality, sa halip na mag-navigate sa isa pang dokumento o seksyon sa loob ng kasalukuyang pahina - dapat din silang bigyan ng naaangkop na role="button".
Sa <button>mga elemento
Upang gumamit ng mga makatwirang pangkat ng button na may <button>mga elemento, dapat mong balutin ang bawat button sa isang pangkat ng button . Karamihan sa mga browser ay hindi maayos na inilalapat ang aming CSS para sa pagbibigay-katwiran sa mga <button>elemento, ngunit dahil sinusuportahan namin ang mga dropdown ng button, magagawa namin iyon.
Mga dropdown ng button
Gumamit ng anumang button upang mag-trigger ng dropdown na menu sa pamamagitan ng paglalagay nito sa loob ng isang .btn-groupat pagbibigay ng wastong markup ng menu.
Dependency ng plugin
Ang mga dropdown ng button ay nangangailangan ng dropdown na plugin na isama sa iyong bersyon ng Bootstrap.
Mga dropdown ng solong button
Gawing dropdown toggle ang isang button na may ilang pangunahing pagbabago sa markup.
Palawakin ang mga kontrol sa form sa pamamagitan ng pagdaragdag ng text o mga button bago, pagkatapos, o sa magkabilang panig ng anumang text-based <input>. Gumamit ng .input-groupisang .input-group-addono .input-group-btnpara i-prepend o idagdag ang mga elemento sa isang solong .form-control.
Tekstwal <input>lamang
Iwasang gumamit <select>ng mga elemento dito dahil hindi sila ganap na mai-istilo sa mga browser ng WebKit.
Iwasan ang paggamit <textarea>ng mga elemento dito dahil ang kanilang rowskatangian ay hindi igagalang sa ilang mga kaso.
Ang mga tooltip at popover sa mga input group ay nangangailangan ng espesyal na setting
Kapag gumagamit ng mga tooltip o popovers sa mga elemento sa loob ng isang .input-group, kakailanganin mong tukuyin ang opsyon container: 'body'upang maiwasan ang mga hindi gustong side effect (tulad ng lumalawak na elemento at/o nawawala ang mga bilugan nitong sulok kapag na-trigger ang tooltip o popover).
Huwag ihalo sa iba pang mga sangkap
Huwag direktang paghaluin ang mga pangkat ng form o grid column sa mga pangkat ng input. Sa halip, ilagay ang pangkat ng input sa loob ng pangkat ng form o elementong nauugnay sa grid.
Palaging magdagdag ng mga label
Magkakaroon ng problema ang mga screen reader sa iyong mga form kung hindi ka magsasama ng label para sa bawat input. Para sa mga input group na ito, tiyaking ang anumang karagdagang label o functionality ay naihatid sa mga pantulong na teknolohiya.
Ang eksaktong pamamaraan na gagamitin (nakikitang mga <label>elemento, <label>mga elementong nakatago gamit ang .sr-onlyklase, o paggamit ng aria-label, aria-labelledby, aria-describedby, titleo placeholderattribute) at kung anong karagdagang impormasyon ang kailangang maihatid ay mag-iiba depende sa eksaktong uri ng interface widget na iyong ipinapatupad. Ang mga halimbawa sa seksyong ito ay nagbibigay ng ilang iminungkahing paraan na partikular sa kaso.
Pangunahing halimbawa
Maglagay ng isang add-on o button sa magkabilang gilid ng isang input. Maaari mo ring ilagay ang isa sa magkabilang panig ng isang input.
Hindi namin sinusuportahan ang maramihang mga add-on ( .input-group-addono .input-group-btn) sa iisang panig.
Hindi namin sinusuportahan ang maramihang mga form-control sa iisang input group.
Pagsusukat
Idagdag ang mga kamag-anak na klase ng pagpapalaki ng form sa .input-groupsarili nito at ang mga nilalaman sa loob ay awtomatikong magre-resize—hindi na kailangang ulitin ang mga klase sa laki ng control ng form sa bawat elemento.
Mga checkbox at radio addon
Ilagay ang anumang checkbox o opsyon sa radyo sa loob ng addon ng isang input group sa halip na text.
Mga addon ng pindutan
Ang mga pindutan sa mga pangkat ng pag-input ay medyo naiiba at nangangailangan ng isang dagdag na antas ng nesting. Sa halip na .input-group-addon, kakailanganin mong gamitin .input-group-btnupang i-wrap ang mga button. Kinakailangan ito dahil sa mga default na istilo ng browser na hindi ma-override.
Mga pindutan na may mga dropdown
Mga naka-segment na button
Maramihang mga pindutan
Bagama't maaari ka lamang magkaroon ng isang add-on sa bawat panig, maaari kang magkaroon ng maraming button sa loob ng iisang .input-group-btn.
Navs
Ang mga Nav na available sa Bootstrap ay may nakabahaging markup, simula sa batayang .navklase, gayundin sa mga nakabahaging estado. Magpalit ng mga klase ng modifier upang lumipat sa pagitan ng bawat istilo.
Ang paggamit ng navs para sa mga tab panel ay nangangailangan ng JavaScript tabs plugin
Para sa mga tab na may mga tab na lugar, dapat mong gamitin ang plugin ng mga tab na JavaScript . Mangangailangan din ang markup ng mga karagdagang roleat ARIA attribute – tingnan ang halimbawang markup ng plugin para sa mga karagdagang detalye.
Gawing naa-access ang mga nav na ginamit bilang nabigasyon
Kung gumagamit ka ng mga nav upang magbigay ng navigation bar, tiyaking magdagdag ng isang role="navigation"sa pinakalohikal na lalagyan ng magulang ng <ul>, o ibalot ang isang <nav>elemento sa buong nabigasyon. Huwag idagdag ang tungkulin sa <ul>sarili nito, dahil mapipigilan ito na maipahayag bilang isang aktwal na listahan ng mga pantulong na teknolohiya.
Mga tab
Tandaan na ang .nav-tabsklase ay nangangailangan ng .navbatayang klase.
Madaling gumawa ng mga tab o tableta na katumbas ng lapad ng kanilang magulang sa mga screen na mas malawak kaysa sa 768px na may .nav-justified. Sa mas maliliit na screen, nakasalansan ang mga nav link.
Kasalukuyang hindi sinusuportahan ang mga justified navbar nav link.
Safari at tumutugon sa mga makatwirang nav
Simula sa v9.1.2, nagpapakita ang Safari ng bug kung saan pahalang ang pagbabago ng laki ng iyong browser ay nagdudulot ng mga error sa pag-render sa justified nav na na-clear kapag nagre-refresh. Ang bug na ito ay ipinapakita din sa justified nav na halimbawa .
Para sa anumang bahagi ng nav (mga tab o tableta), magdagdag .disabledpara sa mga gray na link at walang hover effect .
Hindi naapektuhan ang functionality ng link
Babaguhin lamang ng klase na ito ang <a>hitsura ng 's, hindi ang functionality nito. Gumamit ng custom na JavaScript upang huwag paganahin ang mga link dito.
Ang mga Navbar ay tumutugon na mga bahagi ng meta na nagsisilbing mga header ng nabigasyon para sa iyong application o site. Nagsisimula silang mag-collapse (at maaaring i-toggle) sa mga mobile view at maging pahalang habang tumataas ang lapad ng available na viewport.
Kasalukuyang hindi sinusuportahan ang mga justified navbar nav link.
Umaapaw na nilalaman
Dahil hindi alam ng Bootstrap kung gaano karaming espasyo ang kailangan ng content sa iyong navbar, maaari kang magkaroon ng mga isyu sa pagbalot ng content sa pangalawang row. Upang malutas ito, maaari mong:
Bawasan ang dami o lapad ng navbar item.
Itago ang ilang partikular na item sa navbar sa ilang partikular na laki ng screen gamit ang mga tumutugong utility class .
Baguhin ang punto kung saan lumipat ang iyong navbar sa pagitan ng collapsed at horizontal mode. I-customize ang @grid-float-breakpointvariable o magdagdag ng sarili mong query sa media.
Nangangailangan ng JavaScript plugin
Kung ang JavaScript ay hindi pinagana at ang viewport ay sapat na makitid na ang navbar ay bumagsak, magiging imposibleng palawakin ang navbar at tingnan ang nilalaman sa loob ng .navbar-collapse.
Ang tumutugon na navbar ay nangangailangan ng collapse plugin na isama sa iyong bersyon ng Bootstrap.
Pagbabago sa na-collapse na mobile navbar breakpoint
Ang navbar ay bumagsak sa patayong mobile view nito kapag ang viewport ay mas makitid kaysa sa @grid-float-breakpoint, at lumalawak sa pahalang na view na hindi mobile kapag ang viewport ay hindi bababa @grid-float-breakpointsa lapad. Isaayos ang variable na ito sa Less source para makontrol kapag nag-collapse/lumawak ang navbar. Ang default na halaga ay 768px(ang pinakamaliit na "maliit" o "tablet" na screen).
Gawing naa-access ang mga navbar
Tiyaking gumamit ng <nav>elemento o, kung gumagamit ng mas generic na elemento gaya ng <div>, magdagdag ng a role="navigation"sa bawat navbar upang tahasan itong tukuyin bilang landmark na rehiyon para sa mga user ng mga pantulong na teknolohiya.
Larawan ng brand
Palitan ang navbar brand ng sarili mong larawan sa pamamagitan ng pagpapalit ng text para sa isang <img>. Dahil ang .navbar-brandmay sariling padding at taas, maaaring kailanganin mong i-override ang ilang CSS depende sa iyong larawan.
Mga porma
Ilagay ang nilalaman ng form sa loob .navbar-formpara sa tamang patayong pagkakahanay at pag-collapse na gawi sa makitid na viewport. Gamitin ang mga opsyon sa pag-align upang magpasya kung saan ito nakatira sa loob ng nilalaman ng navbar.
Bilang isang ulo, .navbar-formibinabahagi ang karamihan sa code nito sa .form-inlinepamamagitan ng mixin. Ang ilang mga kontrol sa form, tulad ng mga pangkat ng pag-input, ay maaaring mangailangan ng mga nakapirming lapad upang maipakita nang maayos sa loob ng isang navbar.
Mga babala sa mobile device
Mayroong ilang mga caveat tungkol sa paggamit ng mga kontrol ng form sa loob ng mga nakapirming elemento sa mga mobile device. Tingnan ang aming browser support docs para sa mga detalye.
Palaging magdagdag ng mga label
Magkakaroon ng problema ang mga screen reader sa iyong mga form kung hindi ka magsasama ng label para sa bawat input. Para sa mga inline na form na ito, maaari mong itago ang mga label gamit ang .sr-onlyklase. May mga karagdagang alternatibong paraan ng pagbibigay ng label para sa mga pantulong na teknolohiya, gaya ng aria-label, aria-labelledbyo titleattribute. Kung wala sa mga ito, maaaring gamitin ng mga screen reader ang placeholderkatangian, kung mayroon, ngunit tandaan na ang paggamit ng placeholderbilang kapalit para sa iba pang paraan ng pag-label ay hindi pinapayuhan.
Mga Pindutan
Idagdag ang .navbar-btnklase sa mga <button>elementong hindi naninirahan sa isang <form>upang patayong isentro ang mga ito sa navbar.
Paggamit na tukoy sa konteksto
Tulad ng karaniwang mga klase ng button , .navbar-btnmaaaring gamitin sa <a>at mga <input>elemento. Gayunpaman, hindi .navbar-btndapat gamitin o ang karaniwang mga klase ng button sa mga <a>elemento sa loob ng .navbar-nav.
Text
I-wrap ang mga string ng text sa isang elemento na may .navbar-text, kadalasan sa isang <p>tag para sa wastong pangunguna at kulay.
Mga link na hindi nav
Para sa mga taong gumagamit ng mga karaniwang link na wala sa regular na bahagi ng navigation ng navbar, gamitin ang .navbar-linkklase upang magdagdag ng mga wastong kulay para sa default at inverse na mga opsyon sa navbar.
Pag-align ng bahagi
I-align ang mga nav link, form, button, o text, gamit ang .navbar-lefto .navbar-rightutility classes. Ang parehong mga klase ay magdaragdag ng CSS float sa tinukoy na direksyon. Halimbawa, upang ihanay ang mga link sa nav, ilagay ang mga ito sa isang hiwalay <ul>na may naaangkop na klase ng utility.
Ang mga klase na ito ay mga mixin-ed na bersyon ng .pull-leftat .pull-right, ngunit saklaw ang mga ito sa mga query sa media para sa mas madaling pangangasiwa ng mga bahagi ng navbar sa mga laki ng device.
I-right aligning ng maraming bahagi
Ang mga Navbar ay kasalukuyang may limitasyon sa maraming .navbar-rightklase. Upang maayos na puwang ang nilalaman, gumagamit kami ng negatibong margin sa huling .navbar-rightelemento. Kapag maraming elemento ang gumagamit sa klase na iyon, ang mga margin na ito ay hindi gagana ayon sa nilalayon.
Muli naming bisitahin ito kapag maaari naming muling isulat ang bahaging iyon sa v4.
Naayos sa itaas
Magdagdag .navbar-fixed-topat magsama ng nilalaman ng .containero .container-fluidsa gitna at pad navbar.
Kinakailangan ang body padding
Ipapatong ng nakapirming navbar ang iyong iba pang nilalaman, maliban kung idaragdag mo paddingsa tuktok ng <body>. Subukan ang iyong sariling mga halaga o gamitin ang aming snippet sa ibaba. Tip: Bilang default, ang navbar ay 50px ang taas.
Tiyaking isama ito pagkatapos ng pangunahing Bootstrap CSS.
Naayos hanggang sa ibaba
Magdagdag .navbar-fixed-bottomat magsama ng nilalaman ng .containero .container-fluidsa gitna at pad navbar.
Kinakailangan ang body padding
Ipapatong ng nakapirming navbar ang iyong iba pang nilalaman, maliban kung idaragdag mo paddingsa ibaba ng <body>. Subukan ang iyong sariling mga halaga o gamitin ang aming snippet sa ibaba. Tip: Bilang default, ang navbar ay 50px ang taas.
Tiyaking isama ito pagkatapos ng pangunahing Bootstrap CSS.
Static na tuktok
Gumawa ng full-width navbar na nag-i-scroll palayo sa page sa pamamagitan ng pagdaragdag .navbar-static-topat pagsasama ng nilalaman ng .containero .container-fluidsa gitna at pad navbar.
Hindi tulad ng mga .navbar-fixed-*klase, hindi mo kailangang baguhin ang anumang padding sa body.
Baliktad na navbar
Baguhin ang hitsura ng navbar sa pamamagitan ng pagdaragdag ng .navbar-inverse.
Mga mumo ng tinapay
Ipahiwatig ang lokasyon ng kasalukuyang pahina sa loob ng isang hierarchy sa pag-navigate.
Awtomatikong idinaragdag ang mga separator sa CSS sa pamamagitan ng :beforeat content.
Magbigay ng mga link ng pagination para sa iyong site o app gamit ang bahagi ng pagination ng maraming pahina, o ang mas simpleng alternatibong pager .
Default na pagination
Simpleng pagination na inspirasyon ng Rdio, mahusay para sa mga app at resulta ng paghahanap. Ang malaking bloke ay mahirap makaligtaan, madaling masusukat, at nagbibigay ng malalaking lugar ng pag-click.
Paglalagay ng label sa bahagi ng pagination
Ang bahagi ng pagination ay dapat na nakabalot sa isang <nav>elemento upang matukoy ito bilang isang seksyon ng nabigasyon para sa mga screen reader at iba pang mga pantulong na teknolohiya. Bilang karagdagan, dahil ang isang pahina ay malamang na mayroon nang higit sa isang seksyon ng nabigasyon (tulad ng pangunahing nabigasyon sa header, o isang sidebar navigation), ipinapayong magbigay ng isang mapaglarawang aria-labelkung <nav>saan sumasalamin sa layunin nito. Halimbawa, kung ang bahagi ng pagination ay ginagamit upang mag-navigate sa pagitan ng isang hanay ng mga resulta ng paghahanap, ang isang naaangkop na label ay maaaring aria-label="Search results pages".
Hindi pinagana at aktibong estado
Nako-customize ang mga link para sa iba't ibang pagkakataon. Gamitin .disabledpara sa mga hindi naki-click na link at .activeupang ipahiwatig ang kasalukuyang pahina.
Inirerekomenda namin na magpalit ka ng aktibo o hindi pinaganang mga anchor para sa <span>, o alisin ang anchor sa kaso ng nauna/susunod na mga arrow, upang alisin ang pag-andar ng pag-click habang pinapanatili ang mga nilalayong istilo.
Pagsusukat
Gusto mo ba ng mas malaki o mas maliit na pagination? Magdagdag .pagination-lgo .pagination-smpara sa mga karagdagang laki.
Pager
Mabilis na nakaraan at susunod na mga link para sa mga simpleng pagpapatupad ng pagination na may magaan na markup at mga istilo. Ito ay mahusay para sa mga simpleng site tulad ng mga blog o magazine.
Default na halimbawa
Bilang default, ang pager ay nakasentro sa mga link.
Nakahanay na mga link
Bilang kahalili, maaari mong ihanay ang bawat link sa mga gilid:
Opsyonal na estadong may kapansanan
Ginagamit din ng mga link ng pager ang pangkalahatang .disabledklase ng utility mula sa pagination.
Mga label
Halimbawa
Halimbawa ng heading Bago
Halimbawa ng heading Bago
Halimbawa ng heading Bago
Halimbawa ng heading Bago
Halimbawa ng heading Bago
Halimbawa ng heading Bago
Magagamit na mga pagkakaiba-iba
Magdagdag ng alinman sa mga nabanggit na klase ng modifier sa ibaba upang baguhin ang hitsura ng isang label.
Default Pangunahing Tagumpay Impormasyon Babala Panganib
May mga toneladang label?
Maaaring lumitaw ang mga problema sa pag-render kapag mayroon kang dose-dosenang mga inline na label sa loob ng isang makitid na lalagyan, bawat isa ay naglalaman ng sarili nitong inline-blockelemento (tulad ng isang icon). Ang paraan sa paligid na ito ay setting display: inline-block;. Para sa konteksto at isang halimbawa, tingnan ang #13219 .
Mga badge
Madaling i-highlight ang mga bago o hindi pa nababasang mga item sa pamamagitan ng pagdaragdag ng <span class="badge">sa mga link, Bootstrap navs, at higit pa.
Kapag walang bago o hindi pa nababasang mga item, babagsak lang ang mga badge (sa pamamagitan ng :emptytagapili ng CSS) kung walang nilalamang umiiral sa loob.
Cross-browser compatibility
Hindi magko-collapse ang mga badge sa Internet Explorer 8 dahil kulang ito ng suporta para sa :emptyselector.
Iniangkop sa mga aktibong estado ng nav
Kasama ang mga built-in na istilo para sa paglalagay ng mga badge sa mga aktibong estado sa mga nabigasyon ng tableta.
Isang magaan, flexible na bahagi na maaaring opsyonal na mapalawak ang buong viewport upang maipakita ang pangunahing nilalaman sa iyong site.
Hello, mundo!
Ito ay isang simpleng yunit ng bayani, isang simpleng sangkap na istilo ng jumbotron para sa pagtawag ng karagdagang atensyon sa itinatampok na nilalaman o impormasyon.
Upang gawing buong lapad ang jumbotron, at walang mga bilugan na sulok, ilagay ito sa labas ng lahat .containerng s at sa halip ay magdagdag ng .containerloob.
Header ng page
Isang simpleng shell para sa isang h1naaangkop na espasyo at i-segment ang mga seksyon ng nilalaman sa isang pahina. Maaari nitong gamitin ang h1default smallna elemento ng 's, pati na rin ang karamihan sa iba pang mga bahagi (na may mga karagdagang istilo).
Halimbawa ng page header Subtext para sa header
Mga thumbnail
Palawakin ang grid system ng Bootstrap gamit ang thumbnail component para madaling magpakita ng mga grid ng mga larawan, video, text, at higit pa.
Kung naghahanap ka ng mala- Pinterest na presentasyon ng mga thumbnail na may iba't ibang taas at/o lapad, kakailanganin mong gumamit ng third-party na plugin gaya ng Masonry , Isotope , o Salvattore .
Default na halimbawa
Bilang default, ang mga thumbnail ng Bootstrap ay idinisenyo upang ipakita ang mga naka-link na larawan na may kaunting kinakailangang markup.
Custom na nilalaman
Sa kaunting dagdag na markup, posibleng magdagdag ng anumang uri ng nilalamang HTML tulad ng mga heading, talata, o mga button sa mga thumbnail.
Label ng thumbnail
Cras justo odio, dapibus ac facilisis 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 facilisis 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 facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Magbigay ng mga mensahe ng feedback ayon sa konteksto para sa mga karaniwang pagkilos ng user na may kakaunting available at flexible na mensahe ng alerto.
Mga halimbawa
I-wrap ang anumang text at isang opsyonal na dismiss button .alertat isa sa apat na contextual classes (hal, .alert-success) para sa mga basic alert messages.
Walang default na klase
Ang mga alerto ay walang mga default na klase, tanging mga base at modifier na klase lamang. Ang isang default na gray na alerto ay hindi masyadong makabuluhan, kaya kailangan mong tumukoy ng isang uri sa pamamagitan ng contextual class. Pumili mula sa tagumpay, impormasyon, babala, o panganib.
Magaling! Matagumpay mong nabasa ang mahalagang mensahe ng alerto na ito.
Heads up! Kailangan ng alertong ito ang iyong atensyon, ngunit hindi ito sobrang mahalaga.
Babala! Better check yourself, hindi ka masyadong maganda.
Ay snap! Baguhin ang ilang bagay at subukang isumite muli.
Mga natatanggal na alerto
Bumuo sa anumang alerto sa pamamagitan ng pagdaragdag ng opsyonal .alert-dismissibleat close na button.
Nangangailangan ng JavaScript alert plugin
Para sa ganap na paggana, mga natatanggal na alerto, dapat mong gamitin ang alerto JavaScript plugin .
Babala! Better check yourself, hindi ka masyadong maganda.
Tiyakin ang wastong pag-uugali sa lahat ng device
Tiyaking gamitin ang <button>elementong may data-dismiss="alert"katangian ng data.
Mga link sa mga alerto
Gamitin ang .alert-linkutility class para mabilis na makapagbigay ng mga katugmang kulay na link sa loob ng anumang alerto.
Magbigay ng up-to-date na feedback sa pag-usad ng isang workflow o aksyon na may simple ngunit flexible na progress bar.
Cross-browser compatibility
Gumagamit ang mga progress bar ng CSS3 na mga transition at animation upang makamit ang ilan sa kanilang mga epekto. Ang mga tampok na ito ay hindi suportado sa Internet Explorer 9 at mas mababa o mas lumang mga bersyon ng Firefox. Hindi sinusuportahan ng Opera 12 ang mga animation.
Pagkatugma sa Content Security Policy (CSP).
Kung ang iyong website ay may Content Security Policy (CSP) na hindi pinapayagan ang style-src 'unsafe-inline', hindi mo magagamit ang mga inline stylena katangian upang magtakda ng mga lapad ng progress bar gaya ng ipinapakita sa aming mga halimbawa sa ibaba. Kasama sa mga alternatibong paraan para sa pagtatakda ng mga lapad na katugma sa mga mahigpit na CSP ang paggamit ng kaunting custom na JavaScript (na nagtatakda element.style.width) o paggamit ng mga custom na klase ng CSS.
Pangunahing halimbawa
Default na progress bar.
60% Kumpleto
May label
Alisin ang <span>with .sr-onlyclass mula sa progress bar para magpakita ng nakikitang porsyento.
60%
Upang matiyak na ang teksto ng label ay mananatiling nababasa kahit na sa mababang porsyento, isaalang-alang ang pagdaragdag ng a min-widthsa progress bar.
0%
2%
Mga alternatibo sa konteksto
Gumagamit ang mga progress bar ng ilan sa parehong button at mga alertong klase para sa mga pare-parehong istilo.
40% Kumpleto (tagumpay)
20% Kumpleto
60% Kumpleto (babala)
80% Kumpleto (panganib)
may guhit
Gumagamit ng gradient para gumawa ng striped effect. Hindi available sa IE9 at sa ibaba.
40% Kumpleto (tagumpay)
20% Kumpleto
60% Kumpleto (babala)
80% Kumpleto (panganib)
Animated
Idagdag .activesa .progress-bar-stripedupang i-animate ang mga guhit mula kanan pakaliwa. Hindi available sa IE9 at sa ibaba.
45% Kumpleto
Nakasalansan
Maglagay ng maramihang mga bar sa pareho .progressupang i-stack ang mga ito.
35% Kumpleto (tagumpay)
20% Kumpleto (babala)
10% Kumpleto (panganib)
Media object
Mga abstract na istilo ng object para sa pagbuo ng iba't ibang uri ng mga bahagi (tulad ng mga komento sa blog, Tweet, atbp) na nagtatampok ng kaliwa o kanang-align na larawan kasama ng textual na nilalaman.
Default na media
Ang default na media ay nagpapakita ng isang media object (mga imahe, video, audio) sa kaliwa o kanan ng isang block ng nilalaman.
Media heading
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 sa faucibus.
Media heading
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 sa faucibus.
Nested media heading
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 sa faucibus.
Media heading
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 heading
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.
Ang mga klase .pull-leftat .pull-rightmayroon ding at dati nang ginamit bilang bahagi ng bahagi ng media, ngunit hindi na ginagamit para sa paggamit na iyon simula sa v3.3.0. Ang mga ito ay humigit-kumulang katumbas ng .media-leftat .media-right, maliban na .media-rightdapat ilagay pagkatapos ng .media-bodysa html.
Pag-align ng media
Ang mga larawan o iba pang media ay maaaring ihanay sa itaas, gitna, o ibaba. Ang default ay nakahanay sa itaas.
Nangungunang nakahanay na 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 sa 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.
Gitnang nakahanay na 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 sa 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.
Nakahanay sa ibabang 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 sa 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.
Listahan ng media
Sa kaunting dagdag na markup, maaari mong gamitin ang media sa loob ng listahan (kapaki-pakinabang para sa mga thread ng komento o listahan ng mga artikulo).
Media heading
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.
Nested media heading
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.
Nested media heading
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.
Nested media heading
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.
Listahan ng pangkat
Ang mga pangkat ng listahan ay isang nababaluktot at makapangyarihang bahagi para sa pagpapakita hindi lamang ng mga simpleng listahan ng mga elemento, kundi ng mga kumplikadong may custom na nilalaman.
Pangunahing halimbawa
Ang pinakapangunahing pangkat ng listahan ay isang hindi nakaayos na listahan na may mga item sa listahan, at ang mga wastong klase. Buuin ito gamit ang mga sumusunod na opsyon, o ang iyong sariling CSS kung kinakailangan.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Mga badge
Idagdag ang bahagi ng mga badge sa anumang item ng pangkat ng listahan at awtomatiko itong ipoposisyon sa kanan.
14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus
Mga naka-link na item
I-link ang mga item ng pangkat ng listahan sa pamamagitan ng paggamit ng mga anchor tag sa halip na mga item sa listahan (na nangangahulugan din ng isang magulang <div>sa halip na isang <ul>). Hindi na kailangan para sa mga indibidwal na magulang sa paligid ng bawat elemento.
Ang mga item sa listahan ng pangkat ay maaaring mga pindutan sa halip na mga item sa listahan (na nangangahulugan din ng isang magulang <div>sa halip na isang <ul>). Hindi na kailangan para sa mga indibidwal na magulang sa paligid ng bawat elemento. Huwag gamitin ang mga karaniwang .btnklase dito.
Mga item na hindi pinagana
Idagdag .disabledsa isang .list-group-itemupang i-gray ito upang lumitaw na hindi pinagana.
Bagama't hindi palaging kinakailangan, minsan kailangan mong ilagay ang iyong DOM sa isang kahon. Para sa mga sitwasyong iyon, subukan ang bahagi ng panel.
Pangunahing halimbawa
Bilang default, ang lahat ng .panelginagawa ay ilapat ang ilang pangunahing hangganan at padding upang maglaman ng ilang nilalaman.
Halimbawa ng pangunahing panel
Panel na may heading
Madaling magdagdag ng heading container sa iyong panel na may .panel-heading. Maaari mo ring isama ang anuman <h1>- na <h6>may .panel-titleklase upang magdagdag ng paunang istilong heading. Gayunpaman, ang mga laki ng font ng <h1>- <h6>ay na-override ng .panel-heading.
Para sa wastong pangkulay ng link, tiyaking maglagay ng mga link sa mga heading sa loob ng .panel-title.
Panel heading na walang pamagat
Nilalaman ng panel
Pamagat ng panel
Nilalaman ng panel
Panel na may footer
I-wrap ang mga button o pangalawang text sa .panel-footer. Tandaan na ang mga footer ng panel ay hindi nagmamana ng mga kulay at hangganan kapag gumagamit ng mga pagkakaiba-iba ayon sa konteksto dahil hindi nila inilaan na nasa harapan.
Nilalaman ng panel
Mga alternatibo sa konteksto
Tulad ng iba pang mga bahagi, madaling gawing mas makabuluhan ang isang panel sa isang partikular na konteksto sa pamamagitan ng pagdaragdag ng alinman sa mga klase ng estado sa konteksto.
Pamagat ng panel
Nilalaman ng panel
Pamagat ng panel
Nilalaman ng panel
Pamagat ng panel
Nilalaman ng panel
Pamagat ng panel
Nilalaman ng panel
Pamagat ng panel
Nilalaman ng panel
May mga mesa
Magdagdag ng anumang non-bordered .tablesa loob ng isang panel para sa isang seamless na disenyo. Kung mayroong .panel-body, nagdaragdag kami ng dagdag na hangganan sa tuktok ng talahanayan para sa paghihiwalay.
Heading ng panel
Ilang default na nilalaman ng panel dito. 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.
#
Pangalan
Huling pangalan
Username
1
marka
Otto
@mdo
2
Jacob
Thornton
@mataba
3
Larry
ang ibon
@twitter
Kung walang panel body, ang component ay lilipat mula sa panel header papunta sa table nang walang pagkaantala.
Ilang default na nilalaman ng panel dito. 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 ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Tumutugon sa pag-embed
Pahintulutan ang mga browser na tukuyin ang mga dimensyon ng video o slideshow batay sa lapad ng kanilang naglalaman ng block sa pamamagitan ng paggawa ng intrinsic ratio na wastong magsusukat sa anumang device.
Direktang inilalapat ang mga panuntunan sa <iframe>, <embed>, <video>, at mga <object>elemento; opsyonal na gumamit ng tahasang descendant class .embed-responsive-itemkapag gusto mong itugma ang styling para sa iba pang attribute.
Pro-Tip! Hindi mo na kailangang isama frameborder="0"sa iyong <iframe>s dahil ine-override namin iyon para sa iyo.
Mga balon
Default na rin
Gamitin ang balon bilang simpleng epekto sa isang elemento upang bigyan ito ng inset na epekto.
Tingnan mo, nasa balon ako!
Opsyonal na mga klase
Kontrolin ang padding at mga bilugan na sulok na may dalawang opsyonal na klase ng modifier.