Nasurok a dosena a mausar manen a paset a naibangon tapno mangipaay kadagiti ikonograpia, dropdown, grupo ti input, nabigasion, alerto, ken adu pay.
Dagiti Glyphicon
Dagiti magun-odan a gliph
Iramanna ti nasurok a 250 a glyph iti pormat ti letra manipud iti Glyphicon Halflings set. Dagiti Glyphicons Dagiti Halfling ket gagangay a saan a magun-od a libre, ngem ti namarsua kadagitoy ket pinagbalinna dagitoy a magun-od para iti Bootstrap a libre. Kas panagyaman, kiddawenmi laeng nga iramanmo ti silpo nga agsubli iti Glyphicons no mabalin.
glyphicon glipikon-asterisko
glyphicon nga glyphicon-plus
glyphicon nga glipikon-euro
glyphicon nga glipiko-eur
glyphicon glipikon-minus
glyphicon glyphicon-ulep nga ulep
glyphicon glyphicon-sobre nga
glyphicon glyphicon-lapis nga
glyphicon glyphicon-sarming nga
glyphicon glyphicon-musika
glyphicon glyphicon-panagbiruk
glyphicon glyphicon-puso
glyphicon glyphicon-bituen
glyphicon glyphicon-bituen-empty
glyphicon glyphicon-nga agus-usar
glyphicon glyphicon-pelikula nga
glyphicon glyphicon-maika-dakkel
glyphicon glyphicon-th nga
glyphicon glyphicon-maika-a-lista
glyphicon nga glyphicon-ok
glyphicon glyphicon-ikkaten
glyphicon glyphicon-a-panag-zoom
glyphicon glyphicon-a-panag-zoom
glyphicon glyphicon-a-naiddep
glyphicon glipikon-senyales
glyphicon nga glyphicon-cog
glyphicon glyphicon-basura
glyphicon glyphicon-pagtaengan
glyphicon glyphicon-a papeles
glyphicon glyphicon-panawen
glyphicon glyphicon-dalan
glyphicon glyphicon-i-download-alt
glyphicon glyphicon-i-download
glyphicon glyphicon-ag-upload
glyphicon glyphicon-inbox nga i-inbox
glyphicon glyphicon-agay-ayam-a-sirkulo
glyphicon glyphicon-uliten
glyphicon glyphicon-agpabaro
glyphicon glyphicon-listaan-alt
glyphicon glipikon-kandado
glyphicon glyphicon-bandiera
glyphicon dagiti glyphicon-headphone
glyphicon glyphicon-tomo-a-naiddep
glyphicon glyphicon-tomo-nga-agpababa
glyphicon glyphicon-ti-tomo nga agpangato
glyphicon nga glyphicon-qrcode nga
glyphicon glyphicon-barkodi ti barko
glyphicon glipikon-ti-tag
glyphicon dagiti glyphicon-dagiti etiketa
glyphicon glyphicon-libro
glyphicon glyphicon-marka ti libro
glyphicon glyphicon-a-imprenta
glyphicon glyphicon-kamera
glyphicon glyphicon-a-letra ti letra
glyphicon glyphicon-natangken
glyphicon glyphicon-italiko nga
glyphicon glyphicon-teksto-kangato
glyphicon glyphicon-teksto-ti-kalawa
glyphicon glyphicon-agtunos-kannigid
glyphicon glyphicon-agtunos-a-tengnga
glyphicon glyphicon-agtunos-kannawan
glyphicon glyphicon-i-align-a mangikalintegan
glyphicon glyphicon-lista nga
glyphicon glyphicon-indent-kannigid
glyphicon glyphicon-indent-kannigid
glyphicon glyphicon-rupa-panawen-video
glyphicon glyphicon-ladawan
glyphicon glyphicon-mapa-a-marka
glyphicon glyphicon-ibagay
glyphicon glyphicon-tint nga glipiko
glyphicon glyphicon-urnosen
glyphicon glyphicon-ibingay
glyphicon glyphicon-pagsukimat
glyphicon glyphicon-aggaraw
glyphicon glyphicon-addang-nga agpaatras
glyphicon glyphicon-napartak-nga agpaatras
glyphicon glyphicon-aglikud
glyphicon glyphicon-agay-ayam
glyphicon glyphicon-agsardeng
glyphicon glyphicon-panagsardeng
glyphicon glyphicon-agpasango
glyphicon glyphicon-napartak-nga-agpasango
glyphicon glyphicon-addang-nga-agpasango
glyphicon glyphicon-iparuar
glyphicon glyphicon-chevron-kannigid
glyphicon glyphicon-chevron-kannigid
glyphicon glyphicon-plus-a-pagilasinan
glyphicon glyphicon-minus-a-pagilasinan
glyphicon glyphicon-ikkaten-a-pagilasinan
glyphicon glyphicon-ok-a-pagilasinan
glyphicon glyphicon-pagsaludsodan-a-pagilasinan
glyphicon glyphicon-info-a-pagilasinan
glyphicon glyphicon-a ladawan ti iskrin
glyphicon glyphicon-ikkaten-ti-sirkulo
glyphicon glyphicon-ok-a sirkulo
glyphicon glyphicon-ban-a sirkulo
glyphicon glyphicon-pana-kannigid
glyphicon glyphicon-pana-kannawan
glyphicon glyphicon-pana-nga-nga-ngato
glyphicon glyphicon-pana-nga-pababa
glyphicon glyphicon-bingay-alt
glyphicon glyphicon-baliwan ti kadakkel-napno
glyphicon glyphicon-baliwan ti kadakkel-bassit
glyphicon glyphicon-pagilasinan-ti-exclamation
glyphicon glyphicon-regalo
glyphicon glyphicon-bulong ti glipikon
glyphicon glyphicon-apuy nga apuy
glyphicon glyphicon-silulukat ti mata
glyphicon glyphicon-mata-a-asideg
glyphicon glyphicon-pakdaar-a-pagilasinan
glyphicon glyphicon-a-plano
glyphicon glyphicon-kalendario
glyphicon glyphicon-naisangayan
glyphicon glyphicon-komento
glyphicon glipikon-imán
glipikon glipikon-chevron-nga-nga-ngato
glyphicon glyphicon-chevron-nga agpababa
glyphicon glyphicon-ag-retweet
glyphicon glyphicon-kariton ti panaggatang
glyphicon glyphicon-ti-folder-a-serraan
glyphicon glyphicon-a-luktan ti folder
glyphicon glyphicon-baliwan ti kadakkel-a-bertikal
Para kadagiti rason ti panagaramid, amin dagiti ikono ket agkasapulan ti batayan a klase ken indibidual a klase ti ikono. Tapno mausar, ikabilmo ti sumaganad a kodigo iti dandani sadinoman. Siguraduenyo a mangibati iti espasio iti nagbaetan ti icon ken teksto para iti umiso a padding.
Dika ilaok kadagiti dadduma a paset
Dagiti klase ti ikono ket saan a mabalin a direkta a maitipon kadagiti sabali a paset. Saanda koma nga usaren agraman dagiti dadduma a klase iti isu met laeng nga elemento. Imbes ketdi, manginayon ti maysa a nested <span>ken iyaplikar dagiti klase ti ikono iti <span>.
Para laeng iti panagusar kadagiti awan kargana nga elemento
Dagiti klase ti ikono ket rumbeng laeng a mausar kadagiti elemento nga awan ti linaon ti teksto ken awan dagiti anak nga elemento.
Panangbalbaliw iti lokasion ti icon font
Ipagarup ti Bootstrap a dagiti papeles ti letra ti ikono ket mabirukanto iti ../fonts/direktorio, a relatibo kadagiti naurnong a papeles ti CSS. Ti panangyakar wenno panangbalbaliw iti nagan kadagita a font file kaipapananna ti panangpabaro iti CSS iti maysa kadagiti tallo a wagas:
Baliwan dagiti @icon-font-pathken/wenno @icon-font-namedagiti variable kadagiti taudan a Basbassit a papeles.
Usaren ti aniaman a pagpilian a kasayaatan a maibagay iti espesipiko a panagisaadmo iti panagdur-as.
Dagiti madanon nga ikono
Dagiti moderno a bersion dagiti makatulong a teknolohia ket mangipakaammo ti linaon a pinataud ti CSS, ken dagiti pay espesipiko a karakter ti Unicode. Tapno maliklikan ti di nairanta ken makariro a panagruar kadagiti screen reader (nangruna no dagiti ikono ket maus-usar a puro para iti dekorasion), ilemmengmi dagitoy babaen ti aria-hidden="true"attribute.
No agus-usar ka ti maysa nga ikono tapno mangipakaammo ti kaipapanan (imbes laeng a kas maysa nga elemento ti dekorasion), siguraduem a daytoy a kaipapanan ket maidanon pay kadagiti makatulong a teknolohia – kas pagarigan, iraman ti kanayonan a linaon, a makita a nailemmeng a kadua ti .sr-onlyklase.
No agparpartuat ka kadagiti kontrol nga awan ti sabali a teksto (kas ti maysa <button>a naglaon laeng ti maysa nga ikono), rumbeng a kanayon a mangipaayka kadagiti alternatibo a linaon tapno mailasin ti panggep ti kontrol, tapno daytoy ket addaan iti kaipapanan kadagiti agar-aramat kadagiti makatulong a teknolohia. Iti daytoy a kaso, mabalinmo ti manginayon ti maysa nga aria-labelattribute iti kontrol a mismo.
Dagiti pagarigan
Usaren dagitoy kadagiti buton, grupo ti buton para iti toolbar, nabigasion, wenno dagiti prepended a panagserrek ti porma.
Maysa nga ikono a maus-usar iti maysa nga alerto tapno mangipakaammo a daytoy ket maysa a mensahe ti biddut, nga addaan iti kanayonan .sr-onlya teksto a mangidanon iti daytoy a pammalubos kadagiti agar-aramat kadagiti makatulong a teknolohia.
Biddut:Mangisurat iti balido nga email address
Dagiti dropdown
Mabaliwan, konteksto a menu para iti panangiparang kadagiti listaan dagiti silpo. Naaramid nga interaktibo babaen ti dropdown a plugin ti JavaScript .
Pagwadan
Balkoten ti trigger ti dropdown ken ti dropdown menu iti uneg ti .dropdown, wenno ti sabali nga elemento a mangideklara position: relative;ti . Kalpasanna, inayonmo ti HTML ti menu.
Babaen ti default, ti maysa a dropdown a menu ket automatiko a naiposision iti 100% manipud iti ngato ken iti kannigid a sikigan ti nagannakna. Inayon .dropdown-menu-rightiti a .dropdown-menuagingga iti kannawan nga i-align ti dropdown menu.
Mabalin a kasapulan ti kanayonan a posision
Dagiti dropdown ket automatiko a maiposision babaen ti CSS iti uneg ti gagangay nga ayus ti dokumento. Kayatna a sawen a dagiti dropdown ket mabalin a ma-crop babaen dagiti nagannak nga addaan kadagiti sumagmamano a overflowtagikua wenno agparang iti ruar dagiti beddeng ti viewport. Tamingem a bukodmo dagitoy nga isyu bayat a tumaud dagitoy.
Saanen a maus-usar .pull-righta panagtunos
Manipud iti v3.1.0, naikkatmi .pull-rightdagiti dropdown menu. Tapno mai-right-align ti maysa a menu, usarem ti .dropdown-menu-right. Dagiti kannawan a naitunos a paset ti nav iti navbar ket agus-usar ti bersion ti mixin daytoy a klase tapno automatiko a maitunos ti menu. Tapno ma-override dayta, usarem ti .dropdown-menu-left.
Dagiti ulo
Manginayon ti ulo a mangimarka kadagiti benneg dagiti tignay iti ania man a dropdown a menu.
Grupo ti agsasaruno a buton a sangsangkamaysa iti maymaysa a linia iti grupo ti buton. Inayon ti opsional a JavaScript a radio ken ti kahon ti tsek nga estilo a kababalin babaen ti plugin dagiti butonmi .
Dagiti Tooltips & popovers kadagiti grupo ti buton ket kasapulan ti espesial a setting
No agus-usar kadagiti tooltip wenno popover kadagiti elemento iti uneg ti maysa .btn-group, masapul nga ikeddengmo ti pagpilian container: 'body'tapno maliklikan dagiti di matarigagayan nga epekto (kas ti elemento a dumakkel a nalawa ken/wenno mapukaw dagiti nagtimbukel a sulina no ti tooltip wenno popover ket maitignay).
Siguraduen nga umiso roleken mangipaay iti etiketa
Tapno dagiti makatulong a teknolohia – a kas dagiti agbasbasa ti iskrin – ket mangipakaammo a ti maysa a serye dagiti buton ket nagrupo, ti maitutop rolea kababalin ket kasapulan a maited. Para kadagiti grupo ti buton, daytoy ket agbalin koma a role="group", bayat a dagiti toolbar ket rumbeng nga addaan iti role="toolbar".
Maysa a pannakailaksid ket dagiti grupo a naglaon laeng ti maymaysa a kontrol (kas pagarigan dagiti nainkalintegan a grupo ti buton nga addaan kadagiti <button>elemento) wenno ti dropdown.
Iti pay maipatinayon, dagiti grupo ken dagiti toolbar ket rumbeng a maited ti nalawag nga etiketa, a kas dagiti kaaduan a makatulong a teknolohia ket no saan ket saandanto nga ipakaammo dagitoy, iti laksid ti kaadda ti umno rolea kababalin. Kadagiti pagarigan a naited ditoy, usarenmi ti aria-label, ngem dagiti alternatibo a kas iti aria-labelledbymabalin met nga usaren.
Pangrugian a pagarigan
Balkoten ti agsasaruno a buton babaen ti .btnin .btn-group.
Buton ti toolbar
Pagtiponen dagiti set ti <div class="btn-group">iti maysa <div class="btn-toolbar">para kadagiti mas komplikado a paset.
Panag-sizing
Imbes nga iyaplikar dagiti klase ti panagdakkel ti buton iti tunggal maysa a buton iti maysa a grupo, mangnayon laeng .btn-group-*iti tunggal maysa .btn-group, a mairaman no ag-umok kadagiti adu a grupo.
Panag-umok
Ikabil ti maysa iti .btn-groupuneg ti sabali .btn-groupno kayatmo dagiti dropdown menu a nalaokan iti agsasaruno a buton.
Pagbalinen a ti maysa a set dagiti buton ket agparang a bertikal a naurnong imbes a horizontal. Saan a nasuportaran ditoy dagiti dropdown ti split button.
Pagbalinen ti maysa a grupo dagiti buton nga agyunnat iti agpapada a kadakkel tapno mangsaklaw iti intero a kalawa ti nagannakna. Agtrabaho pay kadagiti dropdown ti buton iti uneg ti grupo ti buton.
Panangtaming kadagiti beddeng
Gapu ti espesipiko nga HTML ken CSS a naus-usar a mangikalintegan kadagiti buton (nga isu ti display: table-cell), dagiti beddeng iti nagbaetan dagitoy ket madoble. Kadagiti regular a grupo ti buton, margin-left: -1pxket maus-usar a mangitumpok kadagiti beddeng imbes nga ikkaten dagitoy. Nupay kasta, marginsaan nga agtrabaho iti display: table-cell. Kas resulta, depende kadagiti panagpasayaatmo iti Bootstrap, mabalin a kayatmo nga ikkaten wenno kolor manen dagiti beddeng.
IE8 ken dagiti beddeng
Ti Internet Explorer 8 ket saan a mangiparang kadagiti beddeng kadagiti buton iti nainkalintegan a grupo ti buton, daytoy man ket nakalukat <a>wenno <button>dagiti elemento. Tapno maliklikan dayta, baluten ti tunggal buton iti sabali .btn-group.
Kitaen ti #12476 para iti ad-adu pay nga impormasion.
Buyogen <a>dagiti elemento
Balkoten laeng ti serye ti .btns iti .btn-group.btn-group-justified.
No dagiti <a>elemento ket maus-usar nga agtignay a kas dagiti buton – a mangtignay ti panagusar iti uneg ti panid, imbes a mangiturong iti sabali a dokumento wenno benneg iti uneg ti agdama a panid – rumbeng met a maited kadakuada ti maitutop role="button".
Buyogen <button>dagiti elemento
Tapno agusar kadagiti nainkalintegan a grupo ti buton nga addaan kadagiti <button>elemento, masapul a balutem ti tunggal maysa a buton iti maysa a grupo ti buton . Kaaduan a browser ket dida umiso nga iyaplikar ti CSSmi para iti panangikalintegan kadagiti <button>elemento, ngem gapu ta suportaranmi dagiti dropdown ti buton, mabalinmi nga agtrabaho iti aglawlaw dayta.
Dagiti dropdown ti buton
Usaren ti aniaman a buton tapno mangtignay iti dropdown menu babaen ti panangikabil iti dayta iti uneg ti a .btn-groupken panangipaay iti umno a menu markup.
Panagpannuray iti plugin
Dagiti dropdown ti buton ket kasapulan ti dropdown plugin a mairaman iti bersionmo ti Bootstrap.
Agmaymaysa a buton dagiti dropdown
Pagbalinem ti maysa a buton iti dropdown toggle nga addaan iti sumagmamano a kangrunaan a panagbalbaliw ti markup.
Kasta met, mangpartuat kadagiti dropdown ti split button nga addaan kadagiti isu met laeng a panagbalbaliw ti markup, nga addaan laeng iti naisina a buton.
Palawaen dagiti kontrol ti porma babaen ti pananginayon ti teksto wenno dagiti buton sakbay, kalpasan, wenno iti agsumbangir ti ania man a naibatay iti teksto <input>. Usaren .input-groupa kadua ti maysa .input-group-addonwenno .input-group-btntapno mangiprepend wenno manginayon kadagiti elemento iti maymaysa .form-control.
Tekstual <input>s laeng
Liklikan ti panagusar kadagiti <select>elemento ditoy ta saan a mabalin a naan-anay nga estilo kadagiti browser ti WebKit.
Liklikan ti panagusar kadagiti <textarea>elemento ditoy ta ti rowskababalinda ket saan a maraem iti sumagmamano a kaso.
Dagiti Tooltips & popovers kadagiti grupo ti input ket kasapulan ti espesial a setting
No agus-usar kadagiti tooltip wenno popover kadagiti elemento iti uneg ti maysa .input-group, masapul nga ikeddengmo ti pagpilian container: 'body'tapno maliklikan dagiti di matarigagayan nga epekto (kas ti elemento a dumakkel a nalawa ken/wenno mapukaw dagiti nagtimbukel a sulina no ti tooltip wenno popover ket maitignay).
Dika ilaok kadagiti dadduma a paset
Dimo paglaoken dagiti grupo ti porma wenno dagiti klase ti kolum ti grid a direkta kadagiti grupo ti input. Imbes ketdi, i-nest ti grupo ti input iti uneg ti grupo ti porma wenno elemento a mainaig iti grid.
Kanayon nga inayon dagiti etiketa
Marigatan dagiti screen reader kadagiti pormam no dimo iraman ti etiketa para iti tunggal input. Para kadagitoy a grupo ti input, siguraduen nga aniaman a kanayonan nga etiketa wenno panagandar ket maidanon kadagiti makatulong a teknolohia.
Ti eksakto a teknik a mausar (dagiti makita <label>nga elemento, <label>dagiti elemento a nailemmeng babaen ti panagusar ti .sr-onlyklase, wenno panagusar ti aria-label, aria-labelledby, aria-describedby, titlewenno placeholderattribute) ken no ania dagiti kanayonan nga impormasion a kasapulan a maidanon ket agdumaduma depende ti eksakto a kita ti interface widget nga ipatungpalmo. Dagiti pagarigan iti daytoy a benneg ket mangipaay kadagiti sumagmamano a naisingasing, kaso-espesipiko a pamay-an.
Pangrugian a pagarigan
Ikabil ti maysa nga add-on wenno buton iti agsumbangir ti maysa nga input. Mabalinmo met nga ikabil ti maysa iti agsumbangir a sikigan ti maysa nga input.
Saanmi a suportaran ti adu nga add-on ( .input-group-addonwenno .input-group-btn) iti maymaysa a sikigan.
Saanmi a suportaran dagiti adu a porma-a-kontrol iti maymaysa nga input a grupo.
Panag-sizing
Inayon dagiti relatibo a klase ti panagdakkel ti porma iti .input-groupbagina ken dagiti linaon iti uneg ket automatiko a mangbalbaliw ti kadakkel—saan a kasapulan ti panangulit kadagiti klase ti kadakkel ti panangtengngel ti porma iti tunggal maysa nga elemento.
Dagiti checkbox ken dagiti addon ti radio
Ikabil ti ania man a checkbox wenno pagpilian ti radio iti uneg ti addon ti maysa nga input group imbes a teksto.
Buton nga addons
Dagiti buton kadagiti grupo ti input ket naiduma bassit ken kasapulan ti maysa nga ekstra a lebel ti panagumok. Imbes a .input-group-addon, masapul nga usarem .input-group-btna mangbalkot kadagiti buton. Daytoy ket kasapulan gapu kadagiti default nga estilo ti browser a saan a mabalin a maibabawi.
Dagiti buton nga addaan kadagiti dropdown
Dagiti nasegmentado a butones
Adu a buton
Bayat a mabalinmo laeng ti maaddaan iti maysa nga add-on iti tunggal sikigan, mabalinmo ti maaddaan iti adu a buton iti uneg ti maymaysa .input-group-btn.
Navs nga
Dagiti Nav a magun-od iti Bootstrap ket addaan kadagiti naibingbingay a marka, a mangrugi iti batayan .nava klase, ken dagiti pay naibingbingay nga estado. Agsinnukat kadagiti klase ti mangbalbaliw tapno agsubli iti nagbaetan ti tunggal maysa nga estilo.
Ti panagusar kadagiti navs para kadagiti tab panel ket agkasapulan ti JavaScript tabs plugin
Para kadagiti tab nga addaan kadagiti tabbable a lugar, masapul nga usarem dagiti tab a JavaScript plugin . Ti marka ket agkasapulan pay kadagiti kanayonan roleken dagiti ARIA a kababalin – kitaen ti pagarigan a marka ti plugin para kadagiti kanayonan a detalye.
Pagbalinen dagiti nav a mausar a kas nabigasion a makastrek
No agus-usar ka ti navs tapno mangipaay ti bara ti nabigasion, siguraduem nga inayon ti role="navigation"a iti lohikal unay a nagannak a pagkargaan ti <ul>, wenno baluten ti maysa <nav>nga elemento iti aglawlaw ti sibubukel a nabigasion. Dimo inayon ti akem iti <ul>mismo, ta daytoy ti manglapped iti pannakaipakaammo dayta kas aktual a listaan babaen kadagiti makatulong a teknolohia.
Dagiti Tab
Paliiwenyo a .nav-tabskasapulan ti klase ti .navbase class.
Nalaka laeng nga aramiden dagiti tab wenno pildoras a kapada ti kalawa ti nagannakda kadagiti iskrin a nalalawa ngem 768px nga addaan iti .nav-justified. Kadagiti babbabassit nga iskrin, naurnong dagiti nav link.
Dagiti nainkalintegan a silpo ti navbar nav ket agdama a saan a nasuportaran.
Safari ken responsive nainkalintegan a navs
Manipud iti v9.1.2, ti Safari ket mangipakpakita ti maysa a bug a ti panagbalbaliw ti kadakkel ti browsermo a paidasig ket mangpataud kadagiti biddut ti panagiparang iti nainkalintegan a nav a maikkat iti panagpabaro. Daytoy a bug ket naipakita pay iti nainkalintegan a pagarigan ti nav .
Para iti ania man a paset ti nav (tab wenno pildoras), inayon .disabledpara kadagiti abuabuan a silpo ken awan dagiti epekto ti hover .
Saan a naapektaran ti panagandar ti link
Daytoy a klase ket mangbalbaliw laeng iti <a>langa ti ', saan a ti panagandar daytoy. Usaren ti kostumbre a JavaScript tapno mapasardeng dagiti silpo ditoy.
Dagiti navbar ket dagiti makasungbat a meta a paset nga agserbi a kas dagiti ulo ti nabigasion para iti aplikasion wenno site-mo. Mangrugida a narba (ken mabalin a mai-toggle) kadagiti mobile a panagkita ken agbalin a horisontal bayat nga umad-adu ti magun-od a kalawa ti viewport.
Dagiti nainkalintegan a silpo ti navbar nav ket agdama a saan a nasuportaran.
Aglaplapusanan a linaon
Gapu ta saan nga ammo ti Bootstrap no kasano kaadu ti espasio a kasapulan ti linaon iti navbarmo, mabalin a makasabatka kadagiti isyu iti panagbalkot ti linaon iti maikadua a linia. Tapno marisut daytoy, mabalinmo:
Kissayan ti kaadu wenno kalawa dagiti banag ti navbar.
Ilemmeng dagiti sumagmamano a banag ti navbar kadagiti sumagmamano a kadakkel ti iskrin babaen ti panagusar kadagiti makasungbat a klase ti utilidad .
Baliwan ti punto a ti navbar-mo ket agsubli iti nagbaetan ti collapsed ken horizontal mode. Ipasayaat ti @grid-float-breakpointvariable wenno inayon ti bukodmo a saludsod ti media.
Kasapulan ti plugin ti JavaScript
No ti JavaScript ket nabalbaliwan ken ti viewport ket umdas nga akikid tapno ti navbar ket agrupsa, daytoy ket imposible a mangpalawa ti navbar ken mangkita ti linaon iti uneg ti .navbar-collapse.
Ti makasungbat a navbar ket agkasapulan ti collapse plugin a mairaman iti bersionmo ti Bootstrap.
Panagbalbaliw ti narba a mobile navbar breakpoint
Ti navbar ket marpuog iti bertikal a mobile a panagkitana no ti viewport ket akikid ngem ti @grid-float-breakpoint, ken lumawa iti horisontal a saan a mobile a panagkitana no ti viewport ket saan a basbassit ngem @grid-float-breakpointti kalawa. Ibaga daytoy a variable iti Basbassit a taudan tapno makontrol no ti navbar ket agrupsa/agpalawa. Ti kasisigud a pateg ket 768px(ti kabassitan nga iskrin ti "bassit" wenno "tablet").
Pagbalinen a makastrek dagiti navbar
Siguraduen nga agusar ti maysa <nav>nga elemento wenno, no agus-usar ti ad-adu a sapasap nga elemento a kas ti <div>, inayon ti role="navigation"a iti tunggal maysa a navbar tapno nalawag a mailasin daytoy a kas maysa a pagilasinan a rehion para kadagiti agar-aramat kadagiti makatulong a teknolohia.
Imahe ti brand
Sukatan ti marka ti navbar iti bukodmo a ladawan babaen ti panangisukat ti teksto para iti <img>. Gapu ta ti ti .navbar-brandaddaan iti bukodna a padding ken kangato, mabalin a kasapulam nga i-override ti sumagmamano a CSS depende iti ladawam.
Dagiti Pormas
Ikabil ti linaon ti porma iti uneg .navbar-formpara iti umno a bertikal a panagitunos ken narba a kababalin kadagiti akikid a viewport. Usaren dagiti pagpilian ti panagtunos tapno mangikeddeng no sadino ti pagnanaedanna iti uneg ti linaon ti navbar.
Kas maysa nga heads up, .navbar-formibinglayna ti kaaduan a kodigona iti .form-inlinevia mixin. Sumagmamano a kontrol ti porma, a kas dagiti grupo ti panagserrek, ket mabalin a kasapulan dagiti naikeddeng a kalawa tapno maipakita a nasayaat iti uneg ti navbar.
Dagiti pakdaar ti mobile device
Adda dagiti sumagmamano a pakdaar maipapan ti panagusar kadagiti kontrol ti porma iti uneg dagiti naikeddeng nga elemento kadagiti mobile nga alikamen. Kitaen dagiti dokumento ti suporta ti browsermi para kadagiti detalye.
Kanayon nga inayon dagiti etiketa
Marigatan dagiti screen reader kadagiti pormam no dimo iraman ti etiketa para iti tunggal input. Para kadagitoy nga inline a porma, mabalinmo nga ilemmeng dagiti etiketa babaen ti panagusar ti .sr-onlyklase. Adda dagiti kanayonan nga alternatibo a pamay-an ti panangipaay ti etiketa para kadagiti makatulong a teknolohia, a kas ti aria-label, aria-labelledbywenno titleattribute. No awan kadagitoy ti adda, dagiti agbasbasa iti iskrin ket mabalinda ti agpatulong iti panagusar ti placeholderattribute, no adda, ngem laglagipen a ti panagusar ti placeholderkas kasukat dagiti sabali a pamay-an ti panagmarka ket saan a maibalakad.
Dagiti Buton
Inayon ti .navbar-btnklase kadagiti <button>elemento a saan nga agtataeng iti a <form>tapno bertikal a mangisentro kadagitoy iti navbar.
Konteksto-espesipiko a panagusar
Kas dagiti pagalagadan a klase ti buton , .navbar-btnmabalin nga usaren iti <a>ken <input>dagiti elemento. Nupay kasta, saan .navbar-btnkoma a mausar wenno dagiti pagalagadan a klase ti buton kadagiti <a>elemento iti uneg ti .navbar-nav.
Teksto
Balkoten dagiti kuerdas ti teksto iti maysa nga elemento nga addaan iti .navbar-text, kadawyan iti maysa nga <p>etiketa para iti umno a panangidaulo ken kolor.
Dagiti saan a nav a silpo
Para kadagiti tattao nga agus-usar kadagiti pagalagadan a silpo nga awan iti uneg ti regular a paset ti nabigasion ti navbar, usaren ti .navbar-linkklase tapno manginayon kadagiti umno a kolor para kadagiti default ken baliktad a pagpilian ti navbar.
Panagtunos ti paset
Itunos dagiti silpo ti nav, porma, buton, wenno teksto, babaen ti panagusar kadagiti klase ti .navbar-leftwenno .navbar-rightutilidad. Agpada a manginayon dagiti klase ti CSS float iti naikeddeng a direksion. Kas pagarigan, tapno maitunos dagiti silpo ti nav, ikabil dagitoy iti naisina <ul>nga addaan iti bukod a klase ti utilidad a naipakat.
Dagitoy a klase ket dagiti mixin-ed a bersion ti .pull-leftken .pull-right, ngem dagitoy ket naisakop kadagiti panagsaludsod ti media para iti nalaklaka a panagtengngel kadagiti paset ti navbar iti ballasiw dagiti kadakkel ti alikamen.
Kannawan a panangitunos iti adu a paset
Dagiti Navbar ket agdama nga addaan iti limitasion kadagiti adu a .navbar-rightklase. Tapno umno ti espasyo ti linaon, usarentayo ti negatibo a margin iti maudi .navbar-rightnga elemento. No adda dagiti adu nga elemento nga agus-usar iti dayta a klase, dagitoy a margin ket saan nga agtrabaho a kas nairanta.
Bisitaentayo manen daytoy inton mabalintayo nga isurat manen dayta a paset iti v4.
Natakder iti ngato
Inayon .navbar-fixed-topken iraman ti maysa .containerwenno .container-fluiditi tengnga ken pad ti linaon ti navbar.
Masapul ti body padding
Ti naikeddeng a navbar ket mangsakop ti sabali a linaonmo, malaksid no manginayonka paddingiti ngato ti <body>. Padasem dagiti bukodmo a pateg wenno usarem ti snippetmi iti baba. Tip: Babaen ti default, ti navbar ket 50px ti kangatona.
Siguraduen nga iraman daytoy kalpasan ti kangrunaan a Bootstrap CSS.
Natakder iti baba
Inayon .navbar-fixed-bottomken iraman ti maysa .containerwenno .container-fluiditi tengnga ken pad ti linaon ti navbar.
Masapul ti body padding
Ti naikeddeng a navbar ket mangsakop ti sabali a linaonmo, malaksid no manginayonka paddingiti baba ti <body>. Padasem dagiti bukodmo a pateg wenno usarem ti snippetmi iti baba. Tip: Babaen ti default, ti navbar ket 50px ti kangatona.
Siguraduen nga iraman daytoy kalpasan ti kangrunaan a Bootstrap CSS.
Estatiko nga tuktok
Mangaramid ti naan-anay a kalawa a navbar nga ag-scroll nga umadayo a kadua ti panid babaen ti pananginayon .navbar-static-topken mangiraman ti maysa .containerwenno .container-fluiditi tengnga ken pad ti linaon ti navbar.
Saan a kas kadagiti .navbar-fixed-*klase, saanmo a kasapulan a baliwan ti aniaman a padding iti body.
Nabaliktad a navbar
Baliwan ti langa ti navbar babaen ti pananginayon ti .navbar-inverse.
Dagiti tinapay
Ipamatmat ti lokasion ti agdama a panid iti uneg ti maysa a hirarkia ti nabigasion.
Dagiti mangisina ket automatiko a mainayon iti CSS babaen ti :beforeken content.
Mangted kadagiti silpo ti pagination para iti site wenno app-mo nga addaan iti multi-page pagination component, wenno ti nasimsimple nga alternatibo ti pager .
Default nga pagination
Simple a pagination nga inspired ti Rdio, nasayaat para kadagiti apps ken resulta ti panagbirok. Ti dakkel a bloke ket narigat a malipatan, nalaka a maipadakkel, ken mangipaay kadagiti dadakkel a lugar ti panag-click.
Panangmarka ti paset ti pagination
Ti paset ti pagination ket rumbeng a nabalkot iti maysa <nav>nga elemento tapno mailasin daytoy a kas maysa a paset ti nabigasion tapno ag-screen kadagiti agbasbasa ken dagiti dadduma pay a makatulong a teknolohia. Iti pay maipatinayon, a kas ti maysa a panid ket mabalin nga addaan iti ad-adu ngem maysa a kasta a paset ti panaglayag a dati (kas ti kangrunaan a panaglayag iti ulo, wenno ti panaglayag ti sikigan a bara), daytoy ket maibalakad a mangipaay ti mangiladawan aria-labelpara iti <nav>no ania ti mangipakita ti panggepna. Kas pagarigan, no ti paset ti panagpagina ket maus-usar a mangiturong iti nagbaetan ti maysa a grupo dagiti resulta ti panagbiruk, ti maitutop nga etiketa ket mabalin a aria-label="Search results pages".
Baldado ken aktibo nga estado
Mabalin a ma-customize dagiti link para iti nadumaduma a kasasaad. Usaren .disabledpara kadagiti saan a mai-klik a silpo ken .activetapno mangipakita ti agdama a panid.
Irekomendarmi a mangisukatka kadagiti aktibo wenno baldado nga angkla para iti <span>, wenno liklikam ti angkla iti kaso dagiti napalabas/sumaruno a pana, tapno maikkat ti panagusar ti panagpidut bayat a pagtalinaedem dagiti nairanta nga estilo.
Panag-sizing
Magarbo a dakdakkel wenno basbassit a pagination? Inayon .pagination-lgwenno .pagination-smpara kadagiti kanayonan a kadakkel.
Pager nga
Napardas a napalabas ken sumaganad a silpo para kadagiti simple a pannakaipatungpal ti pagination nga addaan iti nalawag a marka ken estilo. Nasayaat dayta para kadagiti simple a site a kas kadagiti blog wenno magasin.
Default nga pagarigan
Babaen ti default, ti pager ket mangisentro kadagiti silpo.
Naitunos dagiti silpo
Saan laeng a dayta, mabalinmo nga itunos ti tunggal silpo kadagiti sikigan:
Opsional a baldado nga estado
Dagiti silpo ti pager ket agus-usar pay ti sapasap .disableda klase ti utilidad manipud iti pagination.
Dagiti etiketa
Pagwadan
Pagarigan a paulo Baro
Pagarigan a paulo Baro
Pagarigan a paulo Baro
Pagarigan a paulo Baro
Pagarigan a paulo Baro
Pagarigan a paulo Baro
Dagiti magun-odan a panagduduma
Inayon ti ania man kadagiti nadakamat iti baba a klase ti mangbalbaliw tapno agbaliw ti langa ti maysa nga etiketa.
Default a Pakdaar ti Impormasion ti Balligi ti Primary Peligro
Adda kadi tonelada nga etiketa?
Mabalin a tumaud dagiti parikut iti panagiparang no addaanka kadagiti pinulpullo nga inline nga etiketa iti uneg ti akikid a pagkargaan, tunggal maysa ket naglaon ti bukodna inline-blocknga elemento (kas ti maysa nga ikono). Ti wagas a mangliklik iti daytoy ket setting display: inline-block;. Para iti konteksto ken ti pagarigan, kitaen ti #13219 .
Dagiti Badge
Nalaka laeng nga i-highlight dagiti baro wenno saan a nabasaan a banag babaen ti pananginayon iti a <span class="badge">to links, Bootstrap navs, ken dadduma pay.
Maysa a nalag-an, nalaka a maibagay a paset a mabalin a pagpilian a mangpalawa iti intero a viewport tapno maipakita ti kangrunaan a linaon iti site-mo.
Hello, lubong!
Daytoy ket simple a yunit ti bannuar, maysa a simple nga estilo ti jumbotron a paset para iti panangawag iti ekstra nga atension iti naiparang a linaon wenno impormasion.
Tapno ti jumbotron ket naan-anay a kalawa, ken awan dagiti nagtimbukel a suli, ikabil daytoy iti ruar amin nga .containers ken imbes ketdi mangnayon ti .containeruneg.
Paulo ti panid
Maysa a simple a shell para iti maysa h1a maitutop nga espasyo ken segmento dagiti benneg ti linaon iti maysa a panid. Daytoy ket mabalinna nga usaren ti h1's default smallnga elemento, ken kasta met ti kaaduan a dadduma pay a paset (nga addaan kadagiti kanayonan nga estilo).
Pagarigan ti ulo ti panid Subteksto para iti ulo
Dagiti Thumbnail
Palawaen ti sistema ti grid ti Bootstrap babaen ti paset ti thumbnail tapno nalaka a maipakita dagiti grid dagiti ladawan, video, teksto, ken dadduma pay.
No agsapsapulka iti kasla Pinterest a presentasion dagiti thumbnail a nadumaduma ti kangato ken/wenno kalawa, kasapulam ti agusar iti third-party plugin a kas iti Masonry , Isotope , wenno Salvattore .
Default nga pagarigan
Babaen ti default, dagiti thumbnail ti Bootstrap ket nadisenio a mangipakita kadagiti naisilpo a ladawan nga addaan iti kabassitan a kasapulan a marka.
Kostumbre a linaon
Babaen ti sangkabassit nga ekstra a marka, mabalin ti manginayon iti ania man a kita ti linaon ti HTML a kas dagiti paulo, parapo, wenno buton kadagiti thumbnail.
Etiketa ti thumbnail
Cras justo odio, dapibus a pasilidad iti, egestas eget quam. Donec id elit nga saan nga mi porta gravida iti eget metus. Nullam id dolor id nibh ultricies lugan ut id elit.
Cras justo odio, dapibus a pasilidad iti, egestas eget quam. Donec id elit nga saan nga mi porta gravida iti eget metus. Nullam id dolor id nibh ultricies lugan ut id elit.
Cras justo odio, dapibus a pasilidad iti, egestas eget quam. Donec id elit nga saan nga mi porta gravida iti eget metus. Nullam id dolor id nibh ultricies lugan ut id elit.
Mangted kadagiti mensahe ti konteksto a feedback para kadagiti gagangay nga aramid ti agar-aramat nga addaan kadagiti sumagmamano a magun-od ken nalaka a maibagay a mensahe ti alerto.
Dagiti pagarigan
Balkoten ti ania man a teksto ken ti opsional a buton ti panangilaksid iti .alertken maysa kadagiti uppat a klase ti konteksto (kas pagarigan, .alert-success) para kadagiti batayan a mensahe ti alerto.
Awan ti default a klase
Dagiti alerto ket awan dagiti default a klase, dagiti laeng klase ti batayan ken mangbalbaliw. Ti default nga abuabu nga alerto ket saan unay a makaipaay ti kaipapanan, isu a kasapulam nga ikeddeng ti maysa a kita babaen ti klase ti konteksto. Pilien manipud iti balligi, info, pakdaar, wenno peggad.
Naglaing! Sibaballigi a nabasam daytoy napateg a mensahe ti alerto.
Ulo nga agpangato! Kasapulan daytoy nga alerto ti atensionmo, ngem saan a super napateg dayta.
Pakdaar! Nasaysayaat no kitaem ti bagim, saanka a nasayaat unay ti langam.
Oh snap! Baliwam ti sumagmamano a banag ket padasem manen ti agsubmitir.
Dagiti mailaksid nga alerto
Mangbangon iti aniaman nga alerto babaen ti pananginayon iti opsional .alert-dismissibleken iserram a buton.
Kasapulan ti plugin ti alerto ti JavaScript
Para iti naan-anay a panagandar, dagiti mailaksid nga alerto, masapul nga usarem dagiti alerto a JavaScript plugin .
Pakdaar! Nasaysayaat no kitaem ti bagim, saanka a nasayaat unay ti langam.
Siguraduen ti umno a kababalin iti ballasiw ti amin nga alikamen
Siguraduen nga usaren ti <button>elemento nga addaan iti data-dismiss="alert"attribute ti datos.
Dagiti silpo kadagiti alerto
Usaren ti .alert-linkklase ti utilidad tapno napardas a mangipaay kadagiti agpapada a namaris a silpo iti uneg ti ania man nga alerto.
Mangted ti napabaro a feedback iti panagrang-ay ti panagayus ti trabaho wenno panagtignay nga addaan kadagiti simple ngem nalaka a maibagay a progress bar.
Panagtunos ti krus-browser
Dagiti bara ti panagrang-ay ket agus-usar kadagiti panagbalbaliw ti CSS3 ken dagiti animasion tapno magun-od ti sumagmamano kadagiti epektoda. Dagitoy a tampok ket saan a nasuportaran iti Internet Explorer 9 ken iti baba wenno dagiti daan a bersion ti Firefox. Saan a suportaran ti Opera 12 dagiti animasion.
Panagtunos ti Patakaran ti Seguridad ti Linaon (CSP).
No ti websitemo ket addaan iti Pagannurotan ti Seguridad ti Linaon (CSP) a saan a mangipalubos style-src 'unsafe-inline', kalpasanna saanmo a mabalin nga usaren dagiti inline stylea kababalin tapno mangikeddeng kadagiti kalawa ti bara ti panagrang-ay a kas naipakita kadagiti pagariganmi iti baba. Dagiti alternatibo a pamay-an para iti panangisaad kadagiti kalawa a maitunos kadagiti nainget a CSP ket mairaman ti panagusar ti bassit a kostumbre a JavaScript (a mangikeddeng element.style.width) wenno panagusar kadagiti kostumbre a klase ti CSS.
Pangrugian a pagarigan
Default a bara ti panagrang-ay.
60% Kompleto nga
Adda etiketa
Ikkaten ti <span>with .sr-onlyclass manipud iti uneg ti progress bar tapno maipakita ti makita a porsiento.
60% nga .
Tapno masigurado nga agtalinaed a mabasa ti teksto ti etiketa uray para kadagiti nababa a porsiento, ibilangmo ti pananginayon iti min-widtha iti progress bar.
0% nga .
2% nga .
Dagiti alternatibo iti konteksto
Dagiti bara ti panagrang-ay ket agus-usar kadagiti sumagmamano kadagiti isu met laeng a buton ken dagiti klase ti alerto para kadagiti agtultuloy nga estilo.
40% Kompleto (balligi) .
20% Kompleto nga
60% Kompleto (pakdaar) .
80% Kompleto (peggad) .
Garitgaritan
Usaren ti gradient tapno makaaramid ti garitgaritan nga epekto. Saan a magun-od iti IE9 ken iti baba.
40% Kompleto (balligi) .
20% Kompleto nga
60% Kompleto (pakdaar) .
80% Kompleto (peggad) .
Animado nga
Add .activeto .progress-bar-stripedtapno ma-animate dagiti garit iti kannawan agingga iti kannigid. Saan a magun-od iti IE9 ken iti baba.
45% Kompleto nga
Naurnong
Ikabil ti adu a bara iti isu met laeng .progresstapno maitumpok dagitoy.
35% Kompleto (balligi) .
20% Kompleto (pakdaar) .
10% Kompleto (peggad) .
Bagay ti media
Dagiti abstrakto nga estilo ti banag para iti panagbangon kadagiti nadumaduma a kita ti paset (kas dagiti komento ti blog, dagiti Tweet, kdpy) a mangitampok ti kannigid- wenno kannawan-a-naitunos a ladawan a kadua ti tekstual a linaon.
Default a media
Ti default a media ket mangiparang ti maysa a banag ti media (dagiti ladawan, video, audio) iti kannigid wenno kannawan ti maysa a bloke ti linaon.
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Naisanglad a paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
Dagiti klase .pull-leftken .pull-rightadda pay ken dati a naus-usar a kas paset ti paset ti media, ngem saanen a maus-usar para iti dayta a panagusar manipud iti v3.3.0. Dagitoy ket agarup a katupag ti .media-leftken .media-right, malaksid a .media-rightrumbeng a maikabil kalpasan ti .media-bodyiti html.
Panagtunos ti media
Mabalin nga itunos dagiti ladawan wenno dadduma pay a media iti ngato, tengnga, wenno baba. Ti default ket naitunos iti ngato.
Nangato a naitunos a media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Donec sed nga odio dui. Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus.
Tengnga a naitunos a media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Donec sed nga odio dui. Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus.
Naitunos iti baba a media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Donec sed nga odio dui. Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus.
Listaan ti media
Iti sangkabassit nga ekstra a marka, mabalinmo nga usaren ti media iti uneg ti listaan (mausar para kadagiti thread ti komento wenno dagiti listaan dagiti artikulo).
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
Naisanglad a paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
Naisanglad a paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
Naisanglad a paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
Ilista ti grupo
Dagiti grupo ti listaan ket maysa a nalaka a maibagay ken nabileg a paset para iti panangiparang saan laeng a dagiti simple a listaan dagiti elemento, ngem dagiti komplikado nga addaan kadagiti kostumbre a linaon.
Pangrugian a pagarigan
Ti kangrunaan unay a grupo ti listaan ket maysa laeng a saan a naurnos a listaan nga addaan kadagiti banag ti listaan, ken dagiti umno a klase. Mangbangon iti dayta nga addaan kadagiti pagpilian a sumaganad, wenno ti bukodmo a CSS no kasapulan.
Cras laeng nga odio
Dapibus ac pasilidad iti
Morbi leo nga risus
Porta nga consectetur nga
Vestibulum iti eros
Dagiti Badge
Inayon ti paset dagiti badge iti ania man a banag ti grupo ti listaan ket automatiko a maiposision daytoy iti kannawan.
14 ngaCras laeng nga odio
2. 2Dapibus ac pasilidad iti
1 ngaMorbi leo nga risus
Naisilpo a banag
Isilpo dagiti banag ti grupo ti listaan babaen ti panagusar kadagiti etiketa ti angkla imbes a dagiti banag ti listaan (dayta ket kayatna pay a sawen ti nagannak <div>imbes a ti <ul>). Saan a kasapulan dagiti indibidual a nagannak iti aglawlaw ti tunggal elemento.
Dagiti banag ti grupo ti listaan ket mabalin a dagiti buton imbes a dagiti banag ti listaan (kayatna pay a sawen ti maysa a nagannak <div>imbes a ti maysa <ul>). Saan a kasapulan dagiti indibidual a nagannak iti aglawlaw ti tunggal elemento. Dimo usaren dagiti gagangay a .btnklase ditoy.
Dagiti baldado a banag
Inayon .disablediti a .list-group-itemtapno gray dayta tapno agparang a baldado.
Nupay saan a kanayon a kasapulan, no dadduma kasapulam nga ikabil ti DOM-mo iti maysa a kahon. Para kadagita a kasasaad, padasem ti paset ti panel.
Pangrugian a pagarigan
Babaen ti default, amin nga .panelaramiden ket mangyaplikar ti sumagmamano a batayan a beddeng ken padding tapno aglaon ti sumagmamano a linaon.
Basic nga pagarigan ti panel
Panel nga addaan iti paulo
Nalaka laeng ti mangnayon iti heading container iti panelmo babaen ti .panel-heading. Mabalinmo pay nga iraman ti ania man <h1>- <h6>nga addaan iti .panel-titleklase tapno manginayon ti nasakbay nga estilo a paulo. Nupay kasta, dagiti kadakkel ti letra ti <h1>- <h6>ket nabaliwan babaen ti .panel-heading.
Para iti umno a panagkolor ti silpo, siguraduen nga ikabil dagiti silpo kadagiti paulo iti uneg ti .panel-title.
Panel heading nga awan ti paulo
Linaon ti panel
Titulo ti panel
Linaon ti panel
Panel nga may footer
Balkoten dagiti buton wenno segundario a teksto iti .panel-footer. Imutektekanyo a dagiti panel footer ket saan a mangtawid kadagiti kolor ken dagiti beddeng no agus-usar kadagiti konteksto a panagduduma a kas dagitoy ket saan a nairanta nga adda iti sango.
Linaon ti panel
Dagiti alternatibo iti konteksto
Kas dagiti dadduma a paset, nalaka a mangaramid ti maysa a panel nga ad-adu ti kaipapanan iti partikular a konteksto babaen ti pananginayon ti ania man kadagiti klase ti estado ti konteksto.
Titulo ti panel
Linaon ti panel
Titulo ti panel
Linaon ti panel
Titulo ti panel
Linaon ti panel
Titulo ti panel
Linaon ti panel
Titulo ti panel
Linaon ti panel
Adda dagiti lamisaan
Inayon ti aniaman a saan a nabeddengan .tableiti uneg ti maysa a panel para iti awan ti panagdadaitna a disenio. No adda .panel-body, manginayontayo ti ekstra a beddeng iti ngato ti lamisaan para iti panagsina.
Paulo ti panel
Sumagmamano a default a linaon ti panel ditoy. Nulla vitae elit libero, maysa a pharetra nga augue. Aenean a lacinia bibendum nga awan serserbina ti consectetur. Aenean nga eu leo quam. Pellentesque nga arkos ti lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies lugan ut id elit.
#
Nagan
Apelyido
Nagan ti agar-aramat
1 nga
Marka
Otto ni Otto
@mdo nga
2. 2
Jacob ni Jacob
Thornton nga
@nalukmeg
3.
Larry ni Larry
ti Tumatayab
@twitter nga
No awan ti bagi ti panel, ti paset ket umakar manipud iti ulo ti panel aginggana iti lamisaan nga awan ti pannakasinga.
Sumagmamano a default a linaon ti panel ditoy. Nulla vitae elit libero, maysa a pharetra nga augue. Aenean a lacinia bibendum nga awan serserbina ti consectetur. Aenean nga eu leo quam. Pellentesque nga arkos ti lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies lugan ut id elit.
Cras laeng nga odio
Dapibus ac pasilidad iti
Morbi leo nga risus
Porta nga consectetur nga
Vestibulum iti eros
Sungsungbatan nga embed
Palubosan dagiti browser a mangikeddeng kadagiti dimension ti video wenno slideshow a naibatay iti kalawa ti naglaon a blokeda babaen ti panagpartuat ti intrinsiko a ratio a siuumiso a mang-scale iti ania man nga alikamen.
Dagiti pagannurotan ket direkta a maipakat kadagiti <iframe>, <embed>, <video>, ken <object>dagiti elemento; opsional nga agusar ti nalawag a klase ti kaputotan .embed-responsive-itemno kayatmo a maipada ti estilo para kadagiti sabali a kababalin.
Pro-Tip nga! Saanmo a kasapulan nga iraman frameborder="0"iti <iframe>s-mo bayat nga i-override-mi dayta para kenka.
Dagiti Bubon
Default nga nasayaat
Usaren ti bubon a kas simple nga epekto iti maysa nga elemento tapno maited daytoy iti inset nga epekto.
Kitaem, addaak iti bubon!
Opsional a klase
Kontrol ti padding ken nagtimbukel a suli nga addaan iti dua nga opsional a klase ti modifier.