Kapin sa usa ka dosena nga magamit pag-usab nga mga sangkap nga gihimo aron mahatagan ang iconograpiya, mga dropdown, mga grupo sa input, nabigasyon, mga alerto, ug daghan pa.
Mga Glyphicon
Magamit nga mga glyph
Naglakip sa kapin sa 250 ka mga glyph sa format sa font gikan sa set sa Glyphicon Halflings. Ang Glyphicons Halflings kasagarang dili magamit nga libre, apan ang ilang magbubuhat naghimo kanila nga magamit alang sa Bootstrap nga walay bayad. Isip pasalamat, gihangyo lang namo nga iapil nimo ang link balik sa Glyphicons kung mahimo.
glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-sobre
glyphicon glyphicon-pencil
glyphicon glyphicon-bildo
glyphicon glyphicon-musika
glyphicon glyphicon-search
glyphicon glyphicon-kasingkasing
glyphicon glyphicon-star
glyphicon glyphicon-star-walay sulod
glyphicon glyphicon-user
glyphicon glyphicon-film
glyphicon glyphicon-th-dako
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-pagtangtang
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-basura
glyphicon glyphicon-balay
glyphicon glyphicon-file
glyphicon glyphicon-oras
glyphicon glyphicon-dalan
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-libro
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-gitas-on
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-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-lakang-paatras
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-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-left
glyphicon glyphicon-arrow-tuo
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-puno
glyphicon glyphicon-resize-gamay
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-regalo
glyphicon glyphicon-dahon
glyphicon glyphicon-fire
glyphicon glyphicon-open-mata
glyphicon glyphicon-mata-duol
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-komento
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-kamot-kamot
glyphicon glyphicon-kamot-wala
glyphicon glyphicon-kamot
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
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-kasingkasing-walay sulod
glyphicon glyphicon-link
glyphicon glyphicon-telepono
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-wala masusi
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-naluwas
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-naluwas
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-pagbalhin
glyphicon glyphicon-cutlery
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-reyna
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-higdaanan
glyphicon glyphicon-apple
glyphicon glyphicon-pagpapas
glyphicon glyphicon-hourglass
glyphicon glyphicon-lampa
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-natilawan
glyphicon glyphicon-education
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-lana
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-right
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-sa tuo
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
Unsaon paggamit
Alang sa mga hinungdan sa pasundayag, ang tanan nga mga icon nanginahanglan usa ka base nga klase ug indibidwal nga klase sa icon. Aron magamit, ibutang ang mosunod nga code bisan asa. Siguroha nga magbilin ug luna tali sa icon ug teksto para sa hustong padding.
Ayaw pagsagol sa ubang mga sangkap
Ang mga klase sa icon dili mahimong direktang ikombinar sa ubang mga sangkap. Kinahanglan nga dili sila gamiton kauban sa ubang mga klase sa parehas nga elemento. Hinuon, pagdugang usa ka nested <span>ug i-apply ang mga klase sa icon sa <span>.
Alang lamang sa paggamit sa walay sulod nga mga elemento
Ang mga klase sa icon kinahanglan nga gamiton lamang sa mga elemento nga walay sulod nga teksto ug walay mga elemento sa bata.
Pag-ilis sa lokasyon sa font sa icon
Gituohan sa Bootstrap nga ang mga file sa font sa icon mahimutang sa ../fonts/direktoryo, nga may kalabotan sa giipon nga mga file sa CSS. Ang pagbalhin o pag-ilis sa ngalan sa mga font file nagpasabot sa pag-update sa CSS sa usa sa tulo ka paagi:
Usba ang @icon-font-pathug/o @icon-font-namemga baryable sa tinubdan Dili kaayo mga file.
Gamita ang bisan unsang kapilian nga labing angay sa imong piho nga pag-setup sa pag-uswag.
Ma-access nga mga icon
Ang mga moderno nga bersyon sa mga teknolohiya sa pagtabang magpahibalo sa sulud nga nahimo sa CSS, ingon man ang piho nga mga karakter sa Unicode. Aron malikayan ang wala tuyoa ug makalibog nga output sa mga screen reader (ilabi na kung ang mga icon gigamit lamang alang sa dekorasyon), among itago kini uban ang aria-hidden="true"hiyas.
Kung nagagamit ka ug icon aron ipaabot ang kahulogan (imbes isip pangdekorasyon lang nga elemento), siguruha nga kini nga kahulogan gipasabot usab sa mga teknolohiyang makatabang – pananglitan, ilakip ang dugang nga sulod, nga makita sa .sr-onlyklase.
Kung nagmugna ka ug mga kontrol nga wala’y lain nga teksto (sama sa usa <button>nga adunay sulud lamang nga icon), kinahanglan ka kanunay nga maghatag alternatibo nga sulud aron mahibal-an ang katuyoan sa pagkontrol, aron kini masabtan sa mga tiggamit sa mga teknolohiya nga makatabang. Sa kini nga kaso, mahimo nimong idugang ang usa ka aria-labelhiyas sa kontrol mismo.
Mga pananglitan
Gamita kini sa mga buton, mga grupo sa butones para sa usa ka toolbar, nabigasyon, o mga prepended nga porma nga mga input.
Usa ka icon nga gigamit sa usa ka alerto aron ipahibalo nga kini usa ka mensahe sa sayup, nga adunay dugang .sr-onlynga teksto aron ipahayag kini nga pahiwatig sa mga tiggamit sa mga teknolohiya nga makatabang.
Sayop:Pagsulod ug balido nga email address
Mga dropdown
Ma-toggle, contextual nga menu para sa pagpakita sa mga lista sa mga link. Gihimo nga interactive sa dropdown JavaScript plugin .
Pananglitan
I-wrap ang trigger sa dropdown ug ang dropdown menu sulod sa .dropdown, o laing elemento nga nagdeklara position: relative;. Dayon idugang ang HTML sa menu.
Sa kasagaran, ang usa ka dropdown menu awtomatik nga gipahimutang 100% gikan sa ibabaw ug ubay sa wala nga bahin sa ginikanan niini. Idugang .dropdown-menu-rightsa usa .dropdown-menungadto sa tuo nga i-align ang dropdown menu.
Mahimong manginahanglan dugang nga posisyon
Ang mga dropdown awtomatikong gipahimutang pinaagi sa CSS sulod sa normal nga dagan sa dokumento. Nagpasabot kini nga ang mga dropdown mahimong i-crop sa mga ginikanan nga adunay piho nga mga overflowkabtangan o makita nga wala sa mga utlanan sa viewport. Tubaga kini nga mga isyu sa imong kaugalingon samtang kini motungha.
Wala na gigamit .pull-rightnga paglinya
Sa v3.1.0, wala na namo gigamit .pull-rightang mga dropdown menu. Aron i-align sa tuo ang usa ka menu, gamita ang .dropdown-menu-right. Ang right-aligned nav component sa navbar naggamit ug mixin nga bersyon niini nga klase aron awtomatikong i-align ang menu. Aron ma-override kini, gamita ang .dropdown-menu-left.
Mga ulohan
Pagdugang og usa ka header sa pag-label sa mga seksyon sa mga aksyon sa bisan unsang dropdown menu.
Paggrupo ang serye sa mga buton sa usa ka linya nga adunay grupo sa butones. Idugang ang opsyonal nga JavaScript radio ug checkbox style behavior gamit ang among buttons plugin .
Ang mga tooltip ug popover sa mga grupo sa butones nanginahanglan espesyal nga setting
Kung mogamit mga tooltip o popovers sa mga elemento sa sulod sa usa ka .btn-group, kinahanglan nimo nga itakda ang kapilian container: 'body'aron malikayan ang dili gusto nga mga epekto (sama sa elemento nga modako ug / o mawala ang mga lingin nga suok kung ang tooltip o popover ma-trigger).
Siguroha nga husto roleug paghatag og label
Aron ang mga teknolohiya sa pagtabang - sama sa mga tigbasa sa screen - aron ipahayag nga usa ka serye sa mga buton ang gi-grupo, usa ka angay rolenga kinaiya ang kinahanglan nga ihatag. Alang sa mga grupo sa butones, kini mao ang role="group", samtang ang mga toolbar kinahanglan adunay usa ka role="toolbar".
Ang usa ka eksepsiyon mao ang mga grupo nga adunay usa lamang ka kontrol (pananglitan ang gipakamatarong nga mga grupo sa buton nga adunay <button>mga elemento) o usa ka dropdown.
Dugang pa, ang mga grupo ug mga toolbar kinahanglan nga hatagan usa ka tin-aw nga label, tungod kay ang kadaghanan sa mga teknolohiya nga makatabang kung dili kini ipahibalo, bisan pa sa presensya sa husto rolenga hiyas. Sa mga pananglitan nga gihatag dinhi, among gigamit ang aria-label, apan ang mga alternatibo sama sa aria-labelledbymagamit usab.
Panguna nga pananglitan
I-wrap ang usa ka serye sa mga buton gamit ang .btnin .btn-group.
Butang nga toolbar
Combine sets sa <div class="btn-group">ngadto sa usa ka <div class="btn-toolbar">alang sa mas komplikado nga mga sangkap.
Pagsukod
Imbis nga i-apply ang mga klase sa pag-size sa butones sa matag buton sa usa ka grupo, idugang lang .btn-group-*ang matag usa .btn-group, lakip na kung magsalag sa daghang mga grupo.
Nagsalag
Ibutang ang usa .btn-groupsa sulod sa lain .btn-groupkung gusto nimo ang mga dropdown menu nga gisagol sa usa ka serye sa mga buton.
Paghimo usa ka grupo sa mga butones nga nagbuklad sa parehas nga gidak-on aron masangkapan ang tibuuk nga gilapdon sa ginikanan niini. Naglihok usab sa mga dropdown sa butones sulod sa grupo sa buton.
Pagdumala sa mga utlanan
Tungod sa piho nga HTML ug CSS nga gigamit sa paghatag og katarungan sa mga buton (nga mao display: table-cell), ang mga utlanan tali kanila gidoble. Sa regular nga mga grupo sa buton, margin-left: -1pxgigamit sa pag-stack sa mga utlanan imbes nga tangtangon kini. Bisan pa, margindili molihok sa display: table-cell. Ingon usa ka sangputanan, depende sa imong mga pag-customize sa Bootstrap, mahimo nimong tangtangon o koloran pag-usab ang mga utlanan.
IE8 ug mga utlanan
Ang Internet Explorer 8 wala maghatag ug mga utlanan sa mga buton sa usa ka gipakamatarong nga grupo sa buton, naa man kini <a>o <button>mga elemento. Aron makalibot niana, ibutang ang matag buton sa lain .btn-group.
Tan-awa ang #12476 para sa dugang nga impormasyon.
Uban sa <a>mga elemento
Pagputos lang ug serye sa .btns sa .btn-group.btn-group-justified.
Kung ang mga <a>elemento gigamit aron molihok ingon mga buton - nagpalihok sa in-page nga pagpaandar, imbes nga mag-navigate sa lain nga dokumento o seksyon sa sulod sa karon nga panid - kinahanglan usab nga hatagan sila usa ka angay nga role="button".
Uban sa <button>mga elemento
Aron magamit ang makatarunganon nga mga grupo sa butones nga adunay <button>mga elemento, kinahanglan nimo nga ibalot ang matag butones sa usa ka grupo sa butones . Kadaghanan sa mga browser dili husto nga magamit ang among CSS alang sa katarungan sa <button>mga elemento, apan tungod kay gisuportahan namon ang mga dropdown sa butones, mahimo namon kana nga buhaton.
Mga dropdown sa buton
Gamita ang bisan unsang buton aron ma-trigger ang usa ka dropdown menu pinaagi sa pagbutang niini sa sulod sa usa .btn-groupug paghatag sa tukma nga marka sa menu.
Pagsalig sa plugin
Ang mga dropdown sa buton nagkinahanglan nga ang dropdown plugin iapil sa imong bersyon sa Bootstrap.
Usa ka butones nga dropdown
Himua ang usa ka buton nga usa ka dropdown toggle nga adunay pipila nga sukaranan nga pagbag-o sa markup.
Ipalapad ang mga kontrol sa porma pinaagi sa pagdugang sa teksto o mga buton sa wala pa, pagkahuman, o sa duha ka kilid sa bisan unsang gibase sa teksto <input>. Gamita .input-groupuban sa .input-group-addono .input-group-btnsa pag-andam o pagdugang sa mga elemento sa usa ka .form-control.
Textual <input>lang
Likayi ang paggamit sa <select>mga elemento dinhi tungod kay dili kini hingpit nga maestilo sa mga browser sa WebKit.
Likayi ang paggamit sa <textarea>mga elemento dinhi tungod kay ang ilang mga rowshiyas dili tahuron sa pipila ka mga kaso.
Ang mga tooltip ug popover sa input nga mga grupo nanginahanglan espesyal nga setting
Kung mogamit mga tooltip o popovers sa mga elemento sa sulod sa usa ka .input-group, kinahanglan nimo nga itakda ang kapilian container: 'body'aron malikayan ang dili gusto nga mga epekto (sama sa elemento nga modako ug / o mawala ang mga lingin nga suok kung ang tooltip o popover na-trigger).
Ayaw pagsagol sa ubang mga sangkap
Ayaw pagsagol sa mga grupo sa porma o mga klase sa kolum sa grid direkta sa mga grupo sa input. Hinuon, ibutang ang input nga grupo sa sulod sa porma nga grupo o elemento nga may kalabutan sa grid.
Kanunay idugang ang mga label
Ang mga magbabasa sa screen adunay problema sa imong mga porma kung dili nimo iapil ang usa ka label sa matag input. Alang sa kini nga mga grupo sa pag-input, siguruha nga ang bisan unsang dugang nga label o pagpaandar gihatag sa mga teknolohiya nga makatabang.
Ang eksakto nga teknik nga gamiton (makita <label>nga mga elemento, <label>mga elemento nga gitago gamit ang .sr-onlyklase, o paggamit sa aria-label, aria-labelledby, aria-describedby, titleo placeholderattribute) ug unsa nga dugang nga impormasyon ang kinahanglan nga ipaabot magkalahi depende sa eksaktong matang sa interface widget nga imong gipatuman. Ang mga pananglitan niini nga seksyon naghatag og pipila ka gisugyot, piho nga mga paagi sa kaso.
Panguna nga pananglitan
Ibutang ang usa ka add-on o buton sa bisan asa nga kilid sa usa ka input. Mahimo usab nimo ibutang ang usa sa duha ka kilid sa usa ka input.
Wala kami nagsuporta sa daghang mga add-on ( .input-group-addono .input-group-btn) sa usa ka bahin.
Wala kami nagsuporta sa daghang mga kontrol sa porma sa usa ka grupo sa pag-input.
Pagsukod
Idugang ang mga relatibong porma sa .input-groupgidak-on nga mga klase sa iyang kaugalingon ug ang mga sulud sa sulod awtomatiko nga magbag-o-dili kinahanglan nga balikon ang mga klase sa gidak-on sa pagkontrol sa porma sa matag elemento.
Mga checkbox ug mga addon sa radyo
Ibutang ang bisan unsang checkbox o opsyon sa radyo sulod sa addon sa input group imbes sa text.
Mga addon sa butones
Ang mga butones sa mga grupo sa pag-input medyo lahi ug nanginahanglan usa ka dugang nga lebel sa pagsalag. Imbis nga .input-group-addon, kinahanglan nimo nga gamiton .input-group-btnang pagputos sa mga buton. Gikinahanglan kini tungod sa default nga mga estilo sa browser nga dili ma-override.
Mga buton nga adunay mga dropdown
Gibahin nga mga buton
Daghang butones
Samtang mahimo ka lang adunay usa ka add-on matag kilid, mahimo ka adunay daghang mga buton sa sulod sa usa ka .input-group-btn.
Nav
Ang mga nav nga anaa sa Bootstrap adunay gipaambit nga markup, sugod sa base .navnga klase, ingon man usab sa gipaambit nga mga estado. Ibaylo ang mga klase sa modifier aron mabalhin sa matag istilo.
Ang paggamit sa navs para sa mga tab panel nanginahanglan ug JavaScript tabs plugin
Alang sa mga tab nga adunay tabbable nga mga lugar, kinahanglan nimong gamiton ang mga tab nga JavaScript plugin . Ang markup magkinahanglan usab ug dugang roleug ARIA attributes – tan-awa ang pananglitan nga markup sa plugin para sa dugang mga detalye.
Himua ang mga nav nga gigamit ingon nabigasyon nga ma-access
Kung naggamit ka ug navs para maghatag ug navigation bar, siguruha nga magdugang ug usa role="navigation"sa labing lohikal nga sudlanan sa ginikanan sa <ul>, o ibutang ang usa ka <nav>elemento sa tibuok nabigasyon. Ayaw idugang ang papel sa <ul>iyang kaugalingon, tungod kay kini makapugong niini nga ipahibalo ingon usa ka aktwal nga lista sa mga teknolohiya nga makatabang.
Mga tab
Timan-i nga ang .nav-tabsklase nagkinahanglan sa .navbase nga klase.
Sayon paghimo sa mga tab o pills nga managsama ang gilapdon sa ilang ginikanan sa mga screen nga mas lapad kaysa 768px nga adunay .nav-justified. Sa gagmay nga mga screen, ang mga link sa nav gipatong.
Ang gipakamatarong nga navbar nav link sa pagkakaron wala gisuportahan.
Safari ug responsive nga makatarunganon nga navs
Sukad sa v9.1.2, ang Safari nagpakita og bug diin ang pag-usab sa imong browser nga pinahigda hinungdan sa paghubad sa mga sayop sa makatarunganon nga nav nga gitangtang sa pag-refresh. Kini nga bug gipakita usab sa gipakamatarong nga pananglitan sa nav .
Ang mga Navbars mga responsive meta component nga nagsilbing navigation header para sa imong aplikasyon o site. Nagsugod sila sa pagkahugno (ug mahimong i-toggle) sa mga pagtan-aw sa mobile ug mahimong pinahigda samtang ang mga magamit nga gilapdon sa viewport nagdugang.
Ang gipakamatarong nga navbar nav link sa pagkakaron wala gisuportahan.
Nag-awas nga sulod
Tungod kay wala mahibal-an sa Bootstrap kung unsa ka dako nga wanang ang kinahanglan sa sulud sa imong navbar, mahimo ka nga adunay mga isyu sa pagputos sa sulud sa ikaduha nga laray. Aron masulbad kini, mahimo nimo:
Bawasan ang gidaghanon o gilapdon sa mga butang sa navbar.
Tagoa ang pipila ka mga butang sa navbar sa pipila ka gidak-on sa screen gamit ang responsive utility classes .
Usba ang punto diin ang imong navbar mobalhin tali sa collapsed ug horizontal mode. Ipasibo ang @grid-float-breakpointvariable o idugang ang imong kaugalingon nga pangutana sa media.
Nagkinahanglan ug JavaScript plugin
Kung ang JavaScript gi-disable ug ang viewport igo nga hiktin nga ang navbar mahugno, imposible nga mapalapad ang navbar ug tan-awon ang sulod sulod sa.navbar-collapse .
Ang responsive navbar nagkinahanglan sa collapse plugin nga iapil sa imong bersyon sa Bootstrap.
Pag-usab sa nahugno nga mobile navbar breakpoint
Ang navbar nahugno ngadto sa iyang bertikal nga mobile view kung ang viewport mas pig-ot kay sa @grid-float-breakpoint, ug molapad ngadto sa iyang horizontal non-mobile nga view kung ang viewport kay labing menos @grid-float-breakpointsa gilapdon. I-adjust kini nga variable sa Less source aron makontrol kung ang navbar nahugno/nagkalapad. Ang default nga bili mao ang 768px(ang pinakagamay nga "gamay" o "tablet" nga screen).
Himua nga ma-access ang mga navbar
Siguroha ang paggamit og <nav>elemento o, kon mogamit og mas generic nga elemento sama sa <div>, idugang ang usa role="navigation"sa matag navbar aron klaro nga mailhan kini isip usa ka landmark nga rehiyon alang sa mga tiggamit sa mga teknolohiya sa pagtabang.
Imahe sa brand
Ilisan ang brand sa navbar sa imong kaugalingon nga imahe pinaagi sa pagbaylo sa teksto alang sa usa ka <img>. Tungod kay ang .navbar-brandadunay kaugalingon nga padding ug gitas-on, kinahanglan nimo nga i-override ang pipila ka CSS depende sa imong imahe.
Mga porma
Ibutang ang sulod sa porma sa sulod .navbar-formpara sa hustong bertikal nga paglinya ug nahugno nga kinaiya sa pig-ot nga viewports. Gamita ang mga opsyon sa pag-align sa pagdesisyon kung asa kini nagpuyo sulod sa sulod sa navbar.
Ingon usa ka ulo, .navbar-formgipaambit ang kadaghanan sa code niini .form-inlinepinaagi sa mixin. Ang ubang mga kontrol sa porma, sama sa mga grupo sa pag-input, mahimong magkinahanglan og mga gitakdang gilapdon aron ipakita sa husto sulod sa usa ka navbar.
Mga pasidaan sa mobile device
Adunay pipila ka mga pasidaan bahin sa paggamit sa mga kontrol sa porma sulod sa mga naayos nga elemento sa mga mobile device. Tan-awa ang among browser support docs para sa mga detalye.
Kanunay idugang ang mga label
Ang mga magbabasa sa screen adunay problema sa imong mga porma kung dili nimo iapil ang usa ka label sa matag input. Alang niining mga inline nga porma, mahimo nimong tagoan ang mga label gamit ang .sr-onlyklase. Adunay dugang nga alternatibong mga pamaagi sa paghatag og label para sa mga teknolohiya sa pagtabang, sama sa aria-label, aria-labelledbyo titleattribute. Kung wala niini, ang mga magbabasa sa screen mahimong mogamit sa placeholderhiyas, kung naa, apan timan-i nga ang paggamit placeholderingon usa ka kapuli sa ubang mga pamaagi sa pag-label wala gitambagan.
Mga butones
Idugang ang .navbar-btnklase sa <button>mga elemento nga wala magpuyo sa usa <form>aron patindog nga isentro kini sa navbar.
Paggamit nga espesipiko sa konteksto
Sama sa standard button nga mga klase , .navbar-btnmahimong gamiton sa <a>ug <input>mga elemento. Bisan pa, dili .navbar-btnni ang standard nga mga klase sa butones kinahanglan gamiton sa <a>mga elemento sa sulod .navbar-nav.
Text
I-wrap ang mga string sa teksto sa usa ka elemento nga adunay .navbar-text, kasagaran sa usa ka <p>tag alang sa husto nga pagpangulo ug kolor.
Non-nav links
Para sa mga tawo nga naggamit ug standard links nga wala sa sulod sa regular navbar navigation component, gamita ang .navbar-linkklase aron idugang ang saktong mga kolor para sa default ug inverse navbar nga mga opsyon.
Pag-align sa mga sangkap
I-align ang mga link sa nav, mga porma, mga buton, o teksto, gamit ang .navbar-lefto .navbar-rightmga klase sa utility. Ang duha ka klase magdugang ug CSS float sa espesipikong direksyon. Pananglitan, aron ipahiangay ang mga link sa nav, ibutang kini sa usa ka bulag <ul>nga adunay gi-apply nga klase sa utility.
Kini nga mga klase kay mixin-ed nga mga bersyon sa .pull-leftug .pull-right, apan nasakpan kini sa mga pangutana sa media para sa mas sayon nga pagdumala sa mga component sa navbar sa tanang gidak-on sa device.
Tuo nga pag-align sa daghang mga sangkap
Ang mga Navbar sa pagkakaron adunay limitasyon sa daghang mga .navbar-rightklase. Aron husto ang sulod sa luna, atong gamiton ang negatibong margin sa kataposang .navbar-rightelemento. Kung adunay daghang mga elemento nga naggamit sa kana nga klase, kini nga mga margin dili molihok sama sa katuyoan.
Atong balikon kini kung mahimo natong isulat pag-usab ang bahin sa v4.
Giayo sa ibabaw
Idugang .navbar-fixed-topug iapil ang .containero .container-fluidsa sentro ug pad navbar nga sulod.
Gikinahanglan ang padding sa lawas
Ang fixed navbar mosapaw sa imong uban nga sulod, gawas kon imong idugang paddingsa ibabaw sa <body>. Sulayi ang imong kaugalingon nga mga mithi o gamita ang among snippet sa ubos. Tip: Sa kasagaran, ang navbar kay 50px ang taas.
Siguruha nga iapil kini pagkahuman sa kinauyokan nga Bootstrap CSS.
Giayo hangtod sa ilawom
Idugang .navbar-fixed-bottomug iapil ang .containero .container-fluidsa sentro ug pad navbar nga sulod.
Gikinahanglan ang padding sa lawas
Ang fixed navbar mosapaw sa imong uban nga sulod, gawas kon imong idugang paddingsa ubos sa <body>. Sulayi ang imong kaugalingon nga mga mithi o gamita ang among snippet sa ubos. Tip: Sa kasagaran, ang navbar kay 50px ang taas.
Siguruha nga iapil kini pagkahuman sa kinauyokan nga Bootstrap CSS.
Static nga ibabaw
Paghimo og bug-os nga gilapdon nga navbar nga mag-scroll palayo sa panid pinaagi sa pagdugang .navbar-static-topug paglakip sa sulod sa .containero .container-fluidsa sentro ug pad navbar.
Dili sama sa mga .navbar-fixed-*klase, dili nimo kinahanglan nga usbon ang bisan unsang padding sa body.
Baliktad nga navbar
Usba ang hitsura sa navbar pinaagi sa pagdugang .navbar-inverse.
Mga mumho sa pan
Itudlo ang kasamtangan nga lokasyon sa panid sulod sa usa ka hierarchy sa nabigasyon.
Ang mga separator awtomatikong idugang sa CSS pinaagi sa :beforeug content.
Paghatag og mga link sa pagination para sa imong site o app nga adunay multi-page nga pagination component, o ang mas simple nga alternatibo sa pager .
Default nga pagination
Yano nga pagination nga giinspirar sa Rdio, maayo alang sa mga app ug mga resulta sa pagpangita. Ang dako nga bloke lisud makalimtan, dali nga masukod, ug naghatag daghang mga lugar sa pag-klik.
Pag-label sa sangkap sa pagination
Ang sangkap sa pagination kinahanglan nga giputos sa usa ka <nav>elemento aron mailhan kini ingon usa ka seksyon sa nabigasyon aron i-screen ang mga magbabasa ug uban pang mga teknolohiya nga makatabang. Dugang pa, tungod kay ang usa ka panid lagmit adunay labaw pa sa usa ka seksyon sa nabigasyon (sama sa panguna nga nabigasyon sa ulohan, o usa ka nabigasyon sa sidebar), gitambagan nga maghatag usa ka deskriptibo aria-labelnga <nav>nagpakita sa katuyoan niini. Pananglitan, kung ang bahin sa pagination gigamit sa pag-navigate tali sa usa ka set sa mga resulta sa pagpangita, ang usa ka angay nga label mahimong aria-label="Search results pages".
Baldado ug aktibo nga estado
Ang mga link napasibo alang sa lainlaing mga kahimtang. Gigamit .disabledalang sa dili ma-klik nga mga link ug .activearon ipakita ang kasamtangan nga panid.
Among girekomendar nga imong ibaylo ang aktibo o baldado nga mga angkla alang sa <span>, o ihiklin ang angkla sa kaso sa miaging/sunod nga mga pana, aron matangtang ang pag-andar sa pag-klik samtang gipabilin ang gituyo nga mga estilo.
Pagsukod
Gusto nga mas dako o mas gamay nga pagination? Idugang .pagination-lgo .pagination-smpara sa dugang nga mga gidak-on.
Pager
Dali nga nangagi ug sunod nga mga link alang sa yano nga pag-implementar sa pagination nga adunay light markup ug mga istilo. Maayo kini alang sa yano nga mga site sama sa mga blog o magasin.
Default nga pananglitan
Sa kasagaran, ang pager nagsentro sa mga link.
Nahiangay nga mga link
Sa laing paagi, mahimo nimong i-align ang matag link sa mga kilid:
Opsyonal nga baldado nga estado
Ang mga link sa pager naggamit usab sa kinatibuk-ang .disabledklase sa utility gikan sa pagination.
Mga label
Pananglitan
Pananglitan nga ulohan Bag -o
Pananglitan nga ulohan Bag -o
Pananglitan nga ulohan Bag -o
Pananglitan nga ulohan Bag -o
Pananglitan nga ulohan Bag -o
Pananglitan nga ulohan Bag -o
Anaa nga mga kalainan
Idugang ang bisan unsa sa nahisgutan sa ubos nga mga klase sa modifier aron mabag-o ang hitsura sa usa ka label.
Default nga Panguna nga Kalampusan nga Impormasyon Warning Peligro
Adunay daghang mga label?
Mahimong motumaw ang mga problema sa pag-render kung adunay ka daghang mga inline nga label sa sulod sa usa ka pig-ot nga sudlanan, ang matag usa adunay kaugalingon inline-blocknga elemento (sama sa usa ka icon). Ang paagi sa palibot niini mao ang setting display: inline-block;. Para sa konteksto ug pananglitan, tan-awa ang #13219 .
Mga badge
Dali nga i-highlight ang mga bag-o o wala pa mabasa nga mga butang pinaagi sa pagdugang <span class="badge">sa mga link, Bootstrap navs, ug uban pa.
Usa ka gaan, flexible nga sangkap nga mahimo nga opsyonal nga mapalawig ang tibuuk nga viewport aron ipakita ang hinungdanon nga sulud sa imong site.
Hello, kalibutan!
Kini usa ka yano nga yunit sa bayani, usa ka yano nga sangkap nga istilo sa jumbotron alang sa pagtawag sa dugang nga atensyon sa gipakita nga sulud o kasayuran.
Aron mahimo ang jumbotron nga bug-os nga gilapdon, ug walay lingin nga mga kanto, ibutang kini sa gawas sa tanan .containerug idugang ang .containersulod.
Ulohan sa panid
Usa ka yano nga kabhang alang sa usa ka h1tukma nga lugar ug bahin sa mga seksyon sa sulud sa usa ka panid. Mahimong gamiton niini ang h1default smallnga elemento, ingon man ang kadaghanan sa ubang mga sangkap (nga adunay dugang nga mga istilo).
Panig-ingnan nga ulohan sa panid Subtext para sa ulohan
Mga thumbnail
I-extend ang grid system sa Bootstrap gamit ang thumbnail component aron daling mapakita ang grids sa mga hulagway, video, text, ug uban pa.
Kung nangita ka nga sama sa Pinterest nga presentasyon sa mga thumbnail nga lainlain ang gitas-on ug/o gilapdon, kinahanglan nimo nga mogamit usa ka ikatulo nga partido nga plugin sama sa Masonry , Isotope , o Salvattore .
Default nga pananglitan
Sa default, ang mga thumbnail sa Bootstrap gidisenyo aron ipakita ang mga nalambigit nga mga imahe nga adunay gamay nga kinahanglan nga marka.
Custom nga sulod
Uban sa gamay nga dugang nga marka, posible nga idugang ang bisan unsang klase sa sulud sa HTML sama sa mga ulohan, parapo, o butones sa mga thumbnail.
Label sa thumbnail
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ug 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 ug 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 ug eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Paghatag mga mensahe sa feedback sa konteksto alang sa kasagaran nga mga aksyon sa gumagamit nga adunay pipila nga magamit ug nabag-o nga mga mensahe sa alerto.
Mga pananglitan
I-wrap ang bisan unsang teksto ug usa ka opsyonal nga dismiss nga buton .alertug usa sa upat ka mga klase sa konteksto (pananglitan, .alert-success) alang sa mga batakang mensahe sa alerto.
Walay default nga klase
Ang mga alerto walay mga default nga klase, base lamang ug mga klase sa modifier. Ang usa ka default nga gray nga alerto dili kaayo makatarunganon, mao nga kinahanglan nimo nga itakda ang usa ka tipo pinaagi sa klase sa konteksto. Pagpili gikan sa kalampusan, impormasyon, pasidaan, o peligro.
Maayong pagkabuhat! Malampuson nimong nabasa kining importanteng mensahe sa alerto.
Taas ang ulo! Kini nga alerto nanginahanglan sa imong atensyon, apan dili kini labi ka hinungdanon.
Pasidaan! Mas maayo nga susihon ang imong kaugalingon, dili ka maayo tan-awon.
Oh kalit! Usba ang pipila ka mga butang ug sulayi pagsumite pag-usab.
Dili madawat nga mga alerto
Pagtukod sa bisan unsang alerto pinaagi sa pagdugang usa ka opsyonal .alert-dismissibleug close nga buton.
Nagkinahanglan ug JavaScript alert plugin
Para sa bug-os nga paglihok, dili madawat nga mga alerto, kinahanglan nimong gamiton ang mga alerto nga JavaScript plugin .
Pasidaan! Mas maayo nga susihon ang imong kaugalingon, dili ka maayo tan-awon.
Siguruha ang husto nga pamatasan sa tanan nga mga aparato
Siguroha nga gamiton ang <button>elemento nga adunay data-dismiss="alert"data attribute.
Mga link sa mga alerto
Gamita ang .alert-linkklase sa utility aron dali nga mahatagan ang parehas nga kolor nga mga link sa sulod sa bisan unsang alerto.
Paghatag ug pinakabag-o nga feedback sa pag-uswag sa usa ka workflow o aksyon nga adunay yano apan flexible nga progress bar.
Pagkaangay sa cross-browser
Ang mga progress bar naggamit sa CSS3 nga mga transisyon ug mga animation aron makab-ot ang pipila sa ilang mga epekto. Kini nga mga bahin wala gisuportahan sa Internet Explorer 9 ug sa ubos o mas karaan nga mga bersyon sa Firefox. Ang Opera 12 wala nagsuporta sa mga animation.
Pagkaangay sa Content Security Policy (CSP).
Kung ang imong website adunay Content Security Policy (CSP) nga dili motugot style-src 'unsafe-inline', nan dili ka makagamit sa inline stylenga mga hiyas aron itakda ang mga gilapdon sa progress bar sama sa gipakita sa among mga pananglitan sa ubos. Ang mga alternatibong pamaagi sa pagtakda sa mga gilapdon nga nahiuyon sa estrikto nga mga CSP naglakip sa paggamit ug gamay nga custom JavaScript (nga nagtakda element.style.width) o paggamit sa custom CSS classes.
Panguna nga pananglitan
Default nga progress bar.
60% Kumpleto
Uban sa label
Kuhaa ang <span>uban nga .sr-onlyklase gikan sa sulod sa progress bar aron ipakita ang usa ka makita nga porsyento.
60%
Aron masiguro nga ang teksto sa label magpabilin nga mabasa bisan sa gamay nga porsyento, hunahunaa ang pagdugang usa min-widthsa progress bar.
0%
2%
Mga alternatibo sa konteksto
Ang mga progress bar naggamit sa pipila sa parehas nga buton ug alerto nga mga klase alang sa makanunayon nga mga istilo.
40% Kompleto (kalampusan)
20% Kumpleto
60% Kompleto (pasidaan)
80% Kompleto (peligro)
Kinudlisan
Naggamit og gradient aron makahimo og striped effect. Dili magamit sa IE9 ug sa ubos.
40% Kompleto (kalampusan)
20% Kumpleto
60% Kompleto (pasidaan)
80% Kompleto (peligro)
Animated
Idugang .activesa .progress-bar-stripedaron ma-animate ang mga labud gikan sa tuo ngadto sa wala. Dili magamit sa IE9 ug sa ubos.
45% Kumpleto
Gipatong
Ibutang ang daghang mga bar sa parehas .progressaron i-stack kini.
35% Kompleto (kalampusan)
20% Kompleto (pasidaan)
10% Kompleto (peligro)
Media object
Abstract nga mga estilo sa butang alang sa pagtukod sa lain-laing mga matang sa mga sangkap (sama sa blog comments, Tweets, etc) nga nagpakita sa usa ka wala-o-tuo-aligned nga larawan uban sa teksto nga sulod.
Default nga media
Ang default nga media nagpakita ug media object (mga hulagway, video, audio) sa wala o tuo sa usa ka content block.
Ulohan sa media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.
Ulohan sa media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.
Nested nga ulohan sa media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.
Ulohan sa media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.
Ulohan sa media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.
Ang mga klase .pull-leftug .pull-rightnaglungtad usab ug gigamit kaniadto isip bahin sa sangkap sa media, apan wala magamit alang sa kana nga paggamit sa v3.3.0. Kini gibana-bana nga katumbas sa .media-leftug .media-right, gawas nga .media-rightkinahanglan ibutang pagkahuman sa .media-bodysa html.
Pag-align sa media
Ang mga hulagway o uban pang media mahimong i-align sa ibabaw, tunga, o ubos. Ang default kay top aligned.
Top aligned nga media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.
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.
Middle aligned nga media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.
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.
Ubos nga linya nga media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.
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 sa media
Uban sa gamay nga dugang nga markup, mahimo nimong gamiton ang media sa sulod nga lista (mapuslanon alang sa mga thread sa komento o mga lista sa artikulo).
Ulohan sa media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.
Nested nga ulohan sa media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.
Nested nga ulohan sa media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.
Nested nga ulohan sa media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.
Ilista ang grupo
Ang mga grupo sa lista usa ka flexible ug gamhanan nga sangkap alang sa pagpakita dili lamang sa yano nga mga lista sa mga elemento, apan mga komplikado nga adunay naandan nga sulud.
Panguna nga pananglitan
Ang pinaka-basic nga grupo sa listahan kay usa lang ka unordered list nga adunay list items, ug ang saktong mga klase. Pagtukod niini uban ang mga kapilian nga nagsunod, o ang imong kaugalingon nga CSS kung gikinahanglan.
Cras justo odio
Dapibus ac facilisis sa
Morbi leo risus
Porta ac consectetur ac
Vestibulum ug eros
Mga badge
Idugang ang sangkap sa badge sa bisan unsang butang nga lista sa grupo ug awtomatiko kini nga ibutang sa tuo.
14Cras justo odio
2Dapibus ac facilisis sa
1Morbi leo risus
Gisumpay nga mga butang
I-link ang mga butang sa lista sa grupo pinaagi sa paggamit sa mga tag sa angkla imbes sa mga butang sa lista (nga nagpasabut usab usa ka ginikanan <div>imbis usa ka <ul>). Dili kinahanglan alang sa indibidwal nga mga ginikanan sa palibot sa matag elemento.
Ang mga butang sa lista sa grupo mahimong mga butones imbis nga mga butang sa lista (nga nagpasabut usab usa ka ginikanan <div>imbis usa ka <ul>). Dili kinahanglan alang sa indibidwal nga mga ginikanan sa palibot sa matag elemento. Ayaw gamita ang standard nga .btnmga klase dinhi.
Mga butang nga nabaldado
Idugang .disabledsa usa .list-group-itemaron ma-gray kini aron makita nga disabled.
Samtang dili kanunay gikinahanglan, usahay kinahanglan nimo nga ibutang ang imong DOM sa usa ka kahon. Alang sa maong mga sitwasyon, sulayi ang panel component.
Panguna nga pananglitan
Sa kasagaran, ang tanan nga .panelbuhaton mao ang paggamit sa pipila ka sukaranan nga utlanan ug padding aron adunay sulud nga sulud.
Pananglitan sa sukaranan nga panel
Panel nga adunay ulohan
Sayon nga pagdugang usa ka sulud sa ulohan sa imong panel nga adunay .panel-heading. Mahimo usab nimong iapil ang bisan unsang <h1>- <h6>nga adunay usa ka .panel-titleklase aron makadugang usa ka pre-styled nga ulohan. Bisan pa, ang mga gidak-on sa font sa <h1>- <h6>gi-override sa .panel-heading.
Para sa hustong pagkolor sa link, siguroha nga ibutang ang mga link sa mga ulohan sulod sa .panel-title.
Ulohan sa panel nga walay titulo
Kontento sa panel
Titulo sa panel
Kontento sa panel
Panel nga adunay footer
I-wrap ang mga buton o sekondaryang teksto sa .panel-footer. Timan-i nga ang mga footer sa panel dili makapanunod sa mga kolor ug mga utlanan kung naggamit sa mga kalainan sa konteksto tungod kay wala kini gituyo nga naa sa foreground.
Kontento sa panel
Mga alternatibo sa konteksto
Sama sa ubang mga sangkap, dali paghimo sa usa ka panel nga mas makahuluganon sa usa ka partikular nga konteksto pinaagi sa pagdugang sa bisan unsang mga klase sa estado sa konteksto.
Titulo sa panel
Kontento sa panel
Titulo sa panel
Kontento sa panel
Titulo sa panel
Kontento sa panel
Titulo sa panel
Kontento sa panel
Titulo sa panel
Kontento sa panel
Uban sa mga lamesa
Idugang ang bisan unsang non-bordered .tablesulod sa usa ka panel alang sa usa ka seamless nga disenyo. Kung adunay usa ka .panel-body, magdugang kami og dugang nga utlanan sa ibabaw sa lamesa alang sa pagbulag.
Ulohan sa panel
Pipila ka default nga sulud sa panel dinhi. Nulla vitae elit libero, usa ka pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Espesye sa tanom nga bulak ang pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
#
Unang Ngalan
Apelyido
Username
1
Mark
Si Otto
@mdo
2
Jacob
Thornton
@tambok
3
Larry
Ang langgam
@twitter
Kung walay panel body, ang component mobalhin gikan sa panel header ngadto sa lamesa nga walay hunong.
Pipila ka default nga sulud sa panel dinhi. Nulla vitae elit libero, usa ka pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Espesye sa tanom nga bulak ang pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio
Dapibus ac facilisis sa
Morbi leo risus
Porta ac consectetur ac
Vestibulum ug eros
Responsive nga pag-embed
Tugoti ang mga browser sa pagdeterminar sa mga dimensyon sa video o slideshow base sa gilapdon sa ilang gisudlan nga block pinaagi sa pagmugna og intrinsic ratio nga hustong mosukod sa bisan unsang device.
Ang mga lagda direktang gigamit sa <iframe>, <embed>, <video>, ug <object>mga elemento; opsyonal nga gamiton ang usa ka tin-aw nga kaliwat nga klase .embed-responsive-itemkung gusto nimo ipares ang estilo para sa ubang mga hiyas.
Pro-Tip! Dili nimo kinahanglan nga ilakip frameborder="0"sa imong <iframe>s ingon nga among gi-override kana alang kanimo.
Mga atabay
Default nga maayo
Gamita ang atabay isip usa ka yano nga epekto sa usa ka elemento aron mahatagan kini og inset nga epekto.
Tan-awa, naa ko sa atabay!
Opsyonal nga mga klase
Kontrola ang padding ug mga rounded corner nga adunay duha ka opsyonal nga mga klase sa modifier.