Dagiti paset

Pinulpullo a mausar manen a paset ti naibangon iti Bootstrap tapno mangipaay iti nabigasion, alerto, popovers, ken adu pay.

Dagiti grupo ti buton

Usaren dagiti grupo ti buton tapno pagtitiponen ti adu a buton a kas maysa a kompuesto a paset. Ibangon dagitoy babaen ti agsasaruno <a>wenno <button>elemento.

Kasayaatan nga aramid

Irekomendarmi dagiti sumaganad a pagannurotan para iti panagusar kadagiti grupo ti buton ken dagiti toolbar:

  • Kanayon nga usaren ti isu met laeng nga elemento iti maymaysa a grupo ti buton, <a>wenno <button>.
  • Dimo paglaoken dagiti buton a nagduduma ti kolorda iti isu met laeng a grupo ti buton.
  • Agusarka kadagiti ikono a mainayon wenno imbes a teksto, ngem siguraduem nga iraman ti alt ken teksto ti paulo no maitutop.

Dagiti mainaig a grupo ti Buton nga addaan kadagiti dropdown (kitaen iti baba) ket rumbeng a maawagan a naisina ken kanayon a mangiraman ti dropdown caret tapno mangipakita ti nairanta a kababalin.

Default nga pagarigan

Adtoy no kasano ti panagsapul ti HTML ti gagangay a grupo ti buton a naibangon babaen dagiti buton ti etiketa ti angkla:

  1. <div klase = "btn-grupo" >
  2. < klase ti buton = "btn" > 1 </button>
  3. < klase ti buton = "btn" > 2 </buton>
  4. < klase ti buton = "btn" > 3 </buton>
  5. </div>

Pagarigan ti Toolbar

Pagtiponen dagiti set ti <div class="btn-group">iti maysa <div class="btn-toolbar">para kadagiti mas komplikado a paset.

  1. <div klase = "btn-a baras ti ramit" >
  2. <div klase = "btn-grupo" >
  3. ...
  4. </div>
  5. </div>

Checkbox ken dagiti raman ti radio

Mabalin met nga agtignay dagiti grupo ti buton kas radio, a sadiay maysa laeng a buton ti mabalin nga aktibo, wenno dagiti kahon ti tsek, a mabalin nga aktibo ti aniaman a bilang dagiti buton. Kitaen dagiti docs ti Javascript para iti dayta.

Alaen ti javascript »

Dagiti dropdown kadagiti grupo ti buton

Ulo nga agpangato! Dagiti buton nga addaan kadagiti dropdown ket masapul a saggaysa a nabalkot iti bukodda .btn-groupiti uneg ti a .btn-toolbarpara iti umno a panagiparang.

Dagiti dropdown ti buton

Panangkita iti pakabuklan ken dagiti pagarigan

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.

Pagarigan ti markup

Kasla ti maysa a grupo ti buton, ti markami ket agus-usar ti regular a marka ti buton, ngem addaan iti sumagmamano a nainayon tapno mapasayaat ti estilo ken suportaran ti dropdown a jQuery plugin ti Bootstrap.

  1. <div klase = "btn-grupo" >
  2. <a klase = "btn a mangibaba-a-mabaliwan" data-a-mabaliwan = "agbaba" href = "#" >
  3. Aksion
  4. <span klase = "caret" </span>
  5. </a>
  6. <ul klase = "nababa-a-menu" >
  7. <!-- dagiti silpo ti dropdown a menu -->
  8. </ul>
  9. </div>

Agtrabaho iti amin a kadakkel ti buton

Agtrabaho dagiti button dropdown iti aniaman a kadakkel. dagiti kadakkel ti butonmo iti .btn-large, .btn-small, wenno .btn-mini.

Kasapulan ti javascript

Dagiti dropdown ti buton ket kasapulan ti Bootstrap dropdown plugin tapno agtignay.

Iti dadduma a kaso—kas iti mobile—dagiti dropdown menu ket agsaknapto iti ruar ti viewport. Masapul a marisutmo ti panagtunos a manual wenno babaen ti kostumbre a javascript.


Split dagiti dropdown ti buton

Panangkita iti pakabuklan ken dagiti pagarigan

Iti panangibangon kadagiti estilo ti grupo ti buton ken markup, nalaka laeng a makaaramidtayo iti split button. Dagiti nabingay a buton ket mangitampok ti gagangay a panagtignay iti kannigid ken ti dropdown a panagbalbaliw iti kannawan nga addaan kadagiti konteksto a silpo.

Dagiti Kadakkel

Usaren dagiti ekstra a klase ti buton .btn-mini, .btn-small, wenno .btn-largepara iti panagdakkel.

  1. <div klase = "btn-grupo" >
  2. ...
  3. <ul klase = "dropdown-menu nga guyoden-kannigid" >
  4. <!-- dagiti silpo ti dropdown a menu -->
  5. </ul>
  6. </div>

Pagarigan ti markup

Palawaenmi dagiti gagangay a dropdown ti buton tapno mangipaay ti maikadua a panagtignay ti buton nga agtigtignay a kas ti naisina a dropdown a trigger.

  1. <div klase = "btn-grupo" >
  2. <buton klase = "btn" > Aksyon </button>
  3. < klase ti buton = "btn dropdown-toggle" panagbalbaliw -datos = "pababa" >
  4. <span klase = "caret" </span>
  5. </button> nga
  6. <ul klase = "nababa-a-menu" >
  7. <!-- dagiti silpo ti dropdown a menu -->
  8. </ul>
  9. </div>

Dagiti menu ti dropup

Dagiti dropdown a menu ket mabalin pay a mai-toggle manipud iti baba nga agpangato babaen ti pananginayon ti maymaysa a klase iti dagus a nagannak ti .dropdown-menu. I-flip-na ti direksion ti .caretken iposisionna manen ti menu a mismo tapno umakar manipud baba nga agpangato imbes nga agpangato nga agpababa.

  1. <div class = "panagbaba ti btn-grupo" >
  2. < klase ti buton = "btn" > Panag- dropup </button>
  3. < klase ti buton = "btn dropdown-toggle" panagbalbaliw -datos = "pababa" >
  4. <span klase = "caret" </span>
  5. </button> nga
  6. <ul klase = "nababa-a-menu" >
  7. <!-- dagiti silpo ti dropdown a menu -->
  8. </ul>
  9. </div>

Multicon-panid a panagpagina

Kaano nga usaren

Ultra simple ken minimally styled pagination nga inspired ti Rdio, nasayaat para kadagiti apps ken resulta ti panagsapul. Ti dakkel a bloke ket narigat a malipatan, nalaka a maipadakkel, ken mangipaay kadagiti dadakkel a lugar ti panag-click.

Dagiti silpo ti panid nga addaan estado

Dagiti silpo ket mabalin a maibagay ken agtrabaho iti sumagmamano a kasasaad nga addaan iti umno a klase. .disabledpara kadagiti saan a mai-click a silpo ken .activepara iti agdama a panid.

Nalaka a maibagay a panagtunos

Inayon ti ania man kadagiti dua nga opsional a klase tapno baliwan ti panagtunos dagiti silpo ti pagination: .pagination-centeredken .pagination-right.

Dagiti pagarigan

Ti kasisigud a paset ti panid ket nalaka a maibagay ken agtrabaho kadagiti sumagmamano a panagduduma.

Panagmarka

Nabalkot iti maysa a <div>, pagination ket maysa laeng a <ul>.

  1. <div klase = "paginasyon" >
  2. <ul> nga
  3. <li><a href = "#" > Naudi </a></li>
  4. <li klase = "aktibo" >
  5. <a href = "#" > 1 nga </a>
  6. </li>
  7. <li><a href = "#" > 2 nga </a></li>
  8. <li><a href = "#" > 3 nga </a></li>
  9. <li><a href = "#" > 4 ​​nga </a></li>
  10. <li><a href = "#" > Sumaruno </a></li>
  11. </ul>
  12. </div>

Pager Para kadagiti napardas a napalabas ken sumaruno a link

Maipapan iti pager

Ti paset ti pager ket maysa a grupo dagiti silpo para kadagiti simple a pannakaipatungpal ti paginasion nga addaan iti nalawag a marka ken dagiti pay nalaglag-an nga estilo. Nasayaat dayta para kadagiti simple a site a kas kadagiti blog wenno magasin.

Opsional a baldado nga estado

Dagiti silpo ti pager ket agus-usar pay ti sapasap .disableda klase manipud iti paginasion.

Default nga pagarigan

Babaen ti default, ti pager ket mangisentro kadagiti silpo.

  1. <ul klase = "pager" >
  2. <li> nga
  3. <a href = "#" > Naudi </a>
  4. </li>
  5. <li> nga
  6. <a href = "#" > Sumaruno </a>
  7. </li>
  8. </ul>

Naitunos dagiti silpo

Saan laeng a dayta, mabalinmo nga itunos ti tunggal silpo kadagiti sikigan:

  1. <ul klase = "pager" >
  2. <li klase = "naudi" >
  3. <a href = "#" > ken dagiti dadduma pay. Nataengan </a>
  4. </li>
  5. <li klase = "sumaruno" >
  6. <a href = "#" > Baro nga </a>
  7. </li>
  8. </ul>
Dagiti etiketa Panagmarka
Default <span class="label">Default</span>
Balligi <span class="label label-success">Success</span>
Pakdaar <span class="label label-warning">Warning</span>
Napateg <span class="label label-important">Important</span>
Info nga <span class="label label-info">Info</span>
Balikas nga <span class="label label-inverse">Inverse</span>

Maipapan

Dagiti badge ket babassit, simple a paset para iti panangiparang iti maysa a mangipakita wenno bilang ti sumagmamano a kita. Gagangay a masarakan dagitoy kadagiti email client a kas iti Mail.app wenno kadagiti mobile apps para kadagiti push notification.

Magun-odan dagiti klase

Nagan Pagwadan Panagmarka
Default 1 nga <span class="badge">1</span>
Balligi 2. 2 <span class="badge badge-success">2</span>
Pakdaar 4. <span class="badge badge-warning">4</span>
Napateg 6. <span class="badge badge-important">6</span>
Info nga 8 nga <span class="badge badge-info">8</span>
Balikas nga 10 nga <span class="badge badge-inverse">10</span>

Bannuar nga yunit

Mangipaay ti Bootstrap iti nalag-an, nalaka a maibagay a paset a maawagan iti hero unit tapno maipakita ti linaon iti site-mo. Nasayaat ti panagtrabahona kadagiti site a paglakuan ken nadagsen ti linaonna.

Panagmarka

Balkoten ti linaonmo iti divlike so:

  1. <div klase = "bannuar-yunit" >
  2. <h1> Paulo </h1>
  3. <p> Tagline nga </p>
  4. <p> nga
  5. <a klase = "btn btn-pangruna a btn-dakkel" >
  6. Ammuem ti ad-adu pay
  7. </a>
  8. </p>
  9. </div>

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.

Ammuem ti ad-adu pay

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 small, nga elemento a kas met laeng ti kaaduan a dadduma a paset (nga addaan kadagiti kanayonan nga estilo).

  1. <div class = "paulo-ti-panid" >
  2. <h1> Pagarigan ti ulo ti panid </h1>
  3. </div>

Dagiti default a thumbnail

Babaen ti default, dagiti thumbnail ti Bootstrap ket nadisenio a mangipakita kadagiti naisilpo a ladawan nga addaan iti kabassitan a kasapulan a marka.

Mabalin a ma-customize unay

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.

    Aksion Aksion

  • 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.

    Aksion Aksion

Apay nga agusar kadagiti thumbnail

Dagiti thumbnail (dati .media-gridagingga iti v1.4) ket nasayaat para kadagiti grid dagiti retrato wenno video, resulta ti panagsapul ti ladawan, produkto ti panagtagilako, portfolio, ken adu pay. Mabalin a link wenno static content dagitoy.

Simple, nalaka a maibagay a markup

Simple laeng ti panangmarka iti thumbnail—a nga uladdaan iti aniaman a bilang dagiti lielemento ti kasapulan laeng. Daytoy ket super flexible pay, a mangipalubos para iti ania man a kita ti linaon nga addaan laeng iti bassit nga ad-adu a markup a mangbalkot kadagiti linaonmo.

Agus-usar kadagiti kadakkel ti adigi ti grid

Maudi, ti paset dagiti thumbnail ket agus-usar kadagiti addan a klase ti sistema ti grid—kas .span2wenno .span3—para iti panagtengngel kadagiti rukod ti thumbnail.

Ti markup

Kas nadakamaten, nalag-an ken diretso ti kasapulan a markup para kadagiti thumbnail. Adda ditoy ti panangkita ti default a panagisaad para kadagiti naisilpo a ladawan :

  1. <ul class = "dagiti bassit a ladawan" >
  2. <li klase = "span3" >
  3. <a href = "#" klase = "pabassit a ladawan" >
  4. <img src = "Libre nga lugar.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Para iti kostumbre a linaon ti HTML kadagiti thumbnail, agbaliw bassit ti markup. Tapno maipalubos ti linaon ti lebel ti bloke iti sadinoman, isukatmi ti <a>para iti <div>kas iti kasta:

  1. <ul class = "dagiti bassit a ladawan" >
  2. <li klase = "span3" >
  3. <div klase = "pabassit nga larawan" >
  4. <img src = "Libre nga lugar.it/260x180" alt = "" >
  5. <h5> Etiketa ti bassit a ladawan </h5>
  6. <p> Kapsion ti thumbnail ditoy mismo... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Ad-adu pay a pagarigan

Sukisoken amin a pagpiliam babaen kadagiti nadumaduma a klase ti grid a magun-odmo. Mabalin met a paglaoken ken pagtunos ti nadumaduma a kadakkel.

Nalag-an dagiti default

Naisurat manen a base class

Iti Bootstrap 2, pinasimplemi ti batayan a klase: .alertimbes a .alert-message. Pinabassitmi met ti kabassitan a kasapulan a markup—saan <p>ti kasapulan babaen ti default, ti laeng makinruar <div>.

Maymaysa a mensahe ti alerto

Para iti ad-adu a nalagda a paset nga addaan iti basbassit a kodigo, inikkatmi ti mangiduma a panagkita para kadagiti alerto ti bloke, dagiti mensahe nga umay nga addaan iti ad-adu a padding ken kadawyan nga ad-adu a teksto. Nagbaliw metten ti klase iti .alert-block.


Nasayaat ti mapan iti javascript

Ti Bootstrap ket umay nga addaan iti nagsayaat a plugin ti jQuery a mangsuporta kadagiti mensahe ti alerto, a mangaramid ti panangilaksid kadagitoy a napardas ken nalaka.

Alaen ti plugin »

Pagarigan dagiti alerto

Balkoten ti mensahem ken ti opsional a close icon iti div nga addaan iti simple a klase.

Pakdaar! Best check yo self, saan ka nga nasayaat unay ti langam.
  1. <div klase = "alerto" >
  2. <buton klase = "serraan" data-dismiss = "alerto" > × </buton>
  3. <strong> Pakdaar! </strong> Best check yo self, saan ka nga nasayaat unay ti langam.
  4. </div>

Ulo nga agpangato! Dagiti alikamen ti iOS ket kasapulan ti maysa href="#"para iti pannakaikkat dagiti alerto. Siguraduen nga iraman daytoy ken ti data attribute para kadagiti anchor close icons. Saan laeng a dayta, mabalinmo nga usaren ti <button>elemento nga addaan iti attribute ti datos, a pinilimi nga aramiden para kadagiti dokmi. No usarem ti <button>, masapul nga iramanmo type="button"wenno saan a mabalin nga isubmite dagiti pormam.

Nalaka a palawaen ti gagangay a mensahe ti alerto babaen ti dua nga opsional a klase: .alert-blockpara iti ad-adu a padding ken dagiti kontrol ti teksto ken .alert-headingpara iti agpapada a paulo.

Pakdaar!

Best check yo self, saan ka nga nasayaat unay ti langam. Nulla vitae elit libero, maysa a pharetra nga augue. Praesent a komodo a kursus magna, vel scelerisko a nisl a consectetur ken.

  1. <div class = "alerto-a-block ti alerto" >
  2. <a klase = "serraan" data-dismiss = "alerto" href = "#" > × </a>
  3. <h4 class = "alerto-paulo" > Pakdaar! </h4>
  4. Best check yo self, saan ka nga...
  5. </div>

Dagiti alternatibo ti konteksto Manginayon kadagiti opsional a klase tapno baliwan ti konotasion ti maysa nga alerto

Biddut wenno peggad

Oh snap! Baliwam ti sumagmamano a banag ket padasem manen ti agsubmitir.
  1. <div class = "alerto-a-biddut" >
  2. ...
  3. </div>

Balligi

Naglaing! Sibaballigi a nabasam daytoy napateg a mensahe ti alerto.
  1. <div class = "alerto-balligi ti alerto" >
  2. ...
  3. </div>

Impormasion

Ulo nga agpangato! Kasapulan daytoy nga alerto ti atensionmo, ngem saan a super napateg dayta.
  1. <div class = "impormasion ti alerto ti alerto" >
  2. ...
  3. </div>

Dagiti pagarigan ken markup

Kadawyan

Default a bara ti panagrang-ay nga addaan iti bertikal a panagrang-ay.

  1. <div klase = "panagrang-ay" >
  2. <div nga klase = "bar".
  3. estilo = " kalawa : 60 %; " ></div>
  4. </div>

Garitgaritan

Usaren ti gradient tapno mangpartuat ti garitgaritan nga epekto (awan ti IE).

  1. <div class = "panagrang-ay a garitgaritan" >
  2. <div nga klase = "bar".
  3. estilo = " kalawa : 20 %; " ></div>
  4. </div>

Animado nga

Alaenna ti garitgaritan a pagarigan ken mang-animate iti dayta (awan ti IE).

  1. <div class = "progreso nga progreso-a-garit."
  2. aktibo" >
  3. <div nga klase = "bar".
  4. estilo = " kalawa : 40 %; " ></div>
  5. </div>

Dagiti pagpilian ken suporta ti browser

Dagiti kanayonan a kolor

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.

Dagiti garitgaritan a bara

Kas kadagiti solido a kolor, addaankami kadagiti nadumaduma a garitgaritan a progress bar.

Panagtignay

Dagiti bara ti panagrang-ay ket agus-usar kadagiti panagbalbaliw ti CSS3, isu a no dinamiko nga ilintegmo ti kalawa babaen ti javascript, daytoy ket naannayas a mangbalbaliw ti kadakkel.

No usarem ti .activeklase, dagiti .progress-stripedprogress bar-mo ti mang-animate kadagiti garit iti kannigid agingga iti kannawan.

Suporta ti browser

Dagiti bara ti panagrang-ay ket agus-usar kadagiti CSS3 a panagrang-ay, dagiti panagbalbaliw, ken dagiti animasion tapno magun-od amin dagiti epektoda. Dagitoy a tampok ket saan a nasuportaran iti IE7-9 wenno dagiti daan a bersion ti Firefox.

Saan a suportaran ti Opera ken IE dagiti animasion iti daytoy a panawen.

Dagiti Bubon

Usaren ti bubon a kas simple nga epekto iti maysa nga elemento tapno maited daytoy iti inset nga epekto.

Kitaem, addaak iti bubon!
  1. <div klase = "nasayaat" >
  2. ...
  3. </div>

Iserram ti ikono

Usaren ti generic close icon para iti panangilaksid ti linaon a kas dagiti modal ken alerto.

  1. < klase ti buton = "serraan" > × </button> nga

Dagiti alikamen ti iOS ket agkasapulan ti href="#" para kadagiti pasamak ti panagpidut no kaykayatmo ti agusar ti angkla.

  1. <a klase = "serraan" href = "#" > &panawen; </a>