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:

<div klase = "btn-grupo" > 
  <a klase = "btn" href = "#" > 1 </a>  
  <a klase = "btn" href = "#" > 2 </a>  
  <a klase = "btn" href = "#" > 3 </a>  
</div>

Pagarigan ti Toolbar

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

<div klase = "btn-a baras ti ramit" > 
  <div klase = "btn-grupo" > 
    ...
  </div>
</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 »

Ulo nga agpangato

Ti CSS para kadagiti grupo ti buton ket adda iti naisina a papeles, button-groups.less.

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.

Ulo nga agpangato! Dagiti dropdown ti buton ket kasapulan ti Bootstrap dropdown plugin tapno agtignay.

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.

<div klase = "btn-grupo" > 
  <a klase = "btn a mangibaba-a-mabaliwan" data-a-mabaliwan = "agbaba" href = "#" >   
    Aksion
    <span klase = "caret" </span> 
  </a>
  <ul klase = "nababa-a-menu" > 
    <!-- dagiti silpo ti dropdown a menu -->
  </ul>
</div>

Split dagiti dropdown ti buton

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.

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.

<div klase = "btn-grupo" > 
  <a klase = "btn" href = "#" > Aksyon </a>  
  <a klase = "btn a mangibaba-a-mabaliwan" data-a-mabaliwan = "agbaba" href = "#" >   
    <span klase = "caret" </span> 
  </a>
  <ul klase = "nababa-a-menu" > 
    <!-- dagiti silpo ti dropdown a menu -->
  </ul>
</div>

Nabileg a base class

Amin a paset ti nav ditoy—tab, pildoras, ken listaan— ket mangibinglay iti isu met laeng a base markup ken estilo babaen ti .navklase.

Kaano nga usaren

Dagiti tab ken pildoras ket nasayaat para kadagiti benneg ti linaon wenno panag-navigate iti nagbaetan dagiti panid ti mainaig a linaon.

Panagtunos ti paset

Tapno maitunos dagiti silpo ti nav, usaren ti .pull-leftwenno .pull-rightdagiti klase ti utilidad. Agpada a manginayon dagiti klase ti CSS float iti naikeddeng a direksion.

Dagiti kangrunaan a tab

Mangala ti regular <ul>ti links ken inayon .nav-tabs:

• Balay
• Profile
• Dagiti Mensahe

<ul klase = "nav nav-tabs" > 
  <li klase = "aktibo" > 
    <a href = "#" > Pagtaengan </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Dagiti kangrunaan a pildoras

Alaem dayta met laeng nga HTML, ngem usarem .nav-pillsketdi:

• Balay
• Profile
• Dagiti Mensahe

<ul klase = "nav nav-pildoras" > 
  <li klase = "aktibo" > 
    <a href = "#" > Pagtaengan </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kasano ti agtumpok 'em

Kas dagiti tab ken pildoras ket horizontal babaen ti default, mangnayon laeng iti maikadua a klase, .nav-stacked, tapno agparangda a bertikal a naurnong.

Naurnong dagiti tab

• Balay
• Profile
• Dagiti Mensahe

<ul klase = "nav nav-tabs nav-naurnong" > 
  ...
</ul>

Naurnong a pildoras

• Balay
• Profile
• Dagiti Mensahe

<ul klase = "nav nav-pildoras nav-naurnong" > 
  ...
</ul>

Nabaknang a menu ti naaramid a nalaka

Dagiti dropdown menu kadagiti tab ken pildoras ti Bootstrap ket super nalaka ken kasapulan laeng ti bassit nga ekstra nga HTML ken nalag-an a jQuery plugin.

Agturong iti panid ti Javascript tapno basaen dagiti dok iti panangrugi kadagiti dropdown iti Bootstrap.

Dagiti tab nga addaan kadagiti dropdown

• Balay
• Profile
• Dropdown nga
  • Aksion
  • Sabali pay nga aramid
  • Sabali pay ditoy
  • Naisina a silpo

<ul klase = "nav nav-tabs" > 
  <li klase = "agpababa" > 
    <a klase = "panag-dropdown-a-mabaliwan". 
       data-toggle = "agpababa nga agpababa".
       href = "#" > nga
        Dropdown nga
        <b klase = "caret" ></b> 
      </a>
    <ul klase = "nababa-a-menu" > 
      <!-- dagiti silpo -->
    </ul>
  </li>
</ul>

Pildoras nga addaan dropdowns

• Balay
• Profile
• Dropdown nga
  • Aksion
  • Sabali pay nga aramid
  • Sabali pay ditoy
  • Naisina a silpo

<ul klase = "nav nav-pildoras" > 
  <li klase = "agpababa" > 
    <a klase = "panag-dropdown-a-mabaliwan". 
       data-toggle = "agpababa nga agpababa".
       href = "#" > nga
        Dropdown nga
        <b klase = "caret" ></b> 
      </a>
    <ul klase = "nababa-a-menu" > 
      <!-- dagiti silpo -->
    </ul>
  </li>
</ul>

Nabigasion nga estilo ti aplikasion

Dagiti listaan ​​ti Nav ket mangipaay ti simple ken nalaka a wagas a mangbangon kadagiti grupo dagiti silpo ti nav nga addaan kadagiti opsional nga ulo. Kasayaatan nga usaren dagitoy kadagiti sidebar a kas iti Finder iti OS X.

Iti estruktura, dagitoy ket naibangon kadagiti isu met laeng a kangrunaan nga estilo ti nav a kas dagiti tab ken pildoras, isu a ti panagusar ken panagpasayaat ket diretso.

Adda dagiti icon

Nalaka met nga alikamen dagiti nav list kadagiti icon. Inayon ti umno <i>a tag iti klase ket naikabilka.

Pagarigan ti listaan ​​ti nav

Mangala ti listaan ​​dagiti silpo ken inayon class="nav nav-list":

<ul klase = "nav nav-listaan" > 
  <li klase = "nav-ulo" > 
    Ulo ti listaan
  </li>
  <li klase = "aktibo" > 
    <a href = "#" > Pagtaengan </a> 
  </li>
  <li> nga
    <a href = "#" > Biblioteka </a> 
  </li>
  ...
</ul>

Pagarigan nga addaan kadagiti ikono

Kasta met laeng a pagarigan, ngem addaan kadagiti <i>etiketa para kadagiti ikono.

<ul klase = "nav nav-listaan" > 
  ...
  <li> nga
    <a href = "#" > 
      <i klase = "ikono-libro" </i> 
      Biblioteka
    </a>
  </li>
  ...
</ul>

Ania ti nairaman

Iyegmo ti biag dagiti tabmo babaen ti simple a plugin tapno ag-toggle iti nagbaetan ti linaon babaen kadagiti tab. Ti Bootstrap ket mangitipon kadagiti tabbable a tab kadagiti uppat nga estilo: ngato (default), kannawan, baba, ken kannigid.

Nalaka ti panagbalbaliw iti nagbaetan dagitoy ken kasapulan laeng ti panangbalbaliw iti bassit unay a markup.

Pagarigan ti tabbable

Tapno agbalin a tabbable dagiti tab, baluten ti .nav-tabsiti sabali a div nga addaan iti klase .tabbable.

Kostumbre nga plugin ti jQuery

Amin a tabbable a tab ket paandaren ti nalag-an a jQuery plugin-tayo. Basaen ti ad-adu pay maipapan no kasano ti mangyeg kadagiti tabbable a tab iti biag iti panid ti docs ti javascript.

Alaen ti javascript →

Tabs iti baba

I-flip ti urnos ti HTML ken mangnayon iti klase tapno mangikabil kadagiti tab iti baba.

<div class = "dagiti tabba ti tabba-iti baba" > 
  <div klase = "linaon-tab" > 
    ...
  </div>
  <ul klase = "nav nav-tabs" > 
    ...
  </ul>
</div>

Tabs iti kannigid

Isukat ti klase tapno mangikabil kadagiti tab iti kannigid.

<div class = "dagiti tabba ti tabba-kannigid" > 
  <ul klase = "nav nav-tabs" > 
    ...
  </ul>
  <div klase = "linaon-tab" > 
    ...
  </div>
</div>

Tabs iti kannawan

Isukat ti klase tapno mangikabil kadagiti tab iti kannawan.

<div class = "dagiti tabba ti tabba-kannigid" > 
  <ul klase = "nav nav-tabs" > 
    ...
  </ul>
  <div klase = "linaon-tab" > 
    ...
  </div>
</div>

Navbar nga andamio

Ti navbar ket agkasapulan laeng kadagiti sumagmamano a div tapno maistruktura daytoy a nasayaat para iti estatiko wenno naikeddeng a panagiparang.

< klase ti div = "navbar" > 
  <div klase = "navbar-a-uneg" > 
    <div klase = "laon" > 
      ...
    </div>
  </div>
</div>

Natarimaan ti navbar

Tapno maaramid ti navbar a naipatakder iti ngato ti viewport, inayon .navbar-fixed-topiti akinruar a div, .navbar.

<div class = "navbar navbar-natakder-nga-ngato" > 
  ...
</div>

Iti CSS-mo, kasapulam met nga i-account ti panagtuon a pataudenna babaen ti pananginayon iti 40px wenno ad-adu pay a padding iti <body>. Siguraduen nga inayon daytoy kalpasan ti kangrunaan a Bootstrap CSS ken sakbay ti opsional a sumungbat a CSS.

Nagan ti brand

Ti simple a link tapno maipakita ti brand wenno nagan ti proyektom ket kasapulan laeng ti anchor tag.

<a klase = "marka" href = "#" >  
  Nagan ti proyekto
</a>

Pormas ti panagsapul

Dagiti porma ti panagbiruk ket umawat kadagiti kostumbre nga estilo iti navbar nga addaan ti .navbar-searchklase. Iraman .pull-leftwenno .pull-rightiti formtapno maitunos dayta.

<porma ti klase = "navbar-biroken guyoden-kannigid" > 
  <input type = "teksto" klase = "biruk-saludsod" placeholder = "Agbirok" >   
</porma>

Opsional a makasungbat a panagduduma

Depende iti kaadu ti linaon iti topbar-mo, mabalin a kayatmo nga ipatungpal dagiti makasungbat a pagpilian. Tapno maaramidmo dayta, baluten ti linaon ti nav-mo iti naglaon iti div, .nav-collapse.collapse, ken inayonmo ti navbar toggle button, .btn-navbar.

< klase ti div = "navbar" > 
  <div klase = "navbar-a-uneg" > 
    <div klase = "laon" > 
 
      Ti <!-- Ti .btn-navbar ket naus-usar a kas ti toggle para iti narakrak a linaon ti navbar -->
      <a klase = "btn btn-navbar" datos-a-mangbalbaliw = "mang-collapse" datos-a-puntiria = ".nav-ag-collapse" >   
        <span klase = "ikono-bar" </span> 
        <span klase = "ikono-bar" </span> 
        <span klase = "ikono-bar" </span> 
      </a>
 
      <!-- Siguraduenyo a baybay-an ti brand sadiay ruar no kayatmo a maipakita -->
      <a class = "brand" href = "#" > Nagan ti proyekto </a>  
 
      <!-- Amin a kayatmo a mailemmeng iti 940px wenno basbassit, ikabilmo iti uneg ditoy -->
      <div klase = "nav-panag-collapse" > 
        <!-- .nav, .navbar-panagbiruk, .navbar-porma, kdpy -->
      </div>
 
    </div>
  </div>
</div>

Nav dagiti silpo

Simple nga inayon dagiti banag ti Nav babaen kadagiti di naurnos a listaan.

<ul klase = "nav" > 
  <li klase = "aktibo" > 
    <a href = "#" > Pagtaengan </a> 
  </li>
  <li><a href = "#" > Pagsilpoan </a></li> 
  <li><a href = "#" > Pagsilpoan </a></li> 
</ul>

Nalaka laeng a mainayonmo dagiti divider kadagiti nav a silpom babaen ti empty list item ken simple a klase. Inayon laeng daytoy iti nagbaetan dagiti silpo:

<ul klase = "nav" > 
  ...
  <li klase = "dibision-bertikal" </li> 
  ...
</ul>

Panagtunos ti paset

Tapno maitunos ti nav, porma ti panagbiruk, wenno teksto, usaren ti .pull-leftwenno .pull-rightdagiti klase ti utilidad. Agpada a manginayon dagiti klase ti CSS float iti naikeddeng a direksion.

Panagnayon kadagiti dropdown

Ti pananginayon kadagiti dropdown iti nav ket super simple, ngem kasapulan ti panagusar ti javascript plugin -tayo .

<ul klase = "nav" > 
  <li klase = "agpababa" > 
    <a href = "#". 
          klase = "panag-dropdown-a-mabaliwan".
          data-toggle = "agpababa" >
          Account
          <b klase = "caret" ></b> 
    </a>
    <ul klase = "nababa-a-menu" > 
      ...
    </ul>
  </li>
</ul>

Alaen ti javascript →

Apay nga usaren dagitoy

Ti breadcrumb navigation ket maus-usar a kas wagas a mangipakita kadagiti agar-aramat no sadino ti ayanda iti uneg ti maysa nga app wenno maysa a site, ngem saan a para iti kangrunaan a nabigasion. Pagtalinaedem a manmano ken ababa ti pannakausar dagitoy tapno epektibo unay.

Dagiti pagarigan

Ti maymaysa a pagarigan a naipakita a kas daytoy ket mabalin a maiparang iti ballasiw dagiti adu a panid.

• Balay

• Tahanan / .
• Biblioteka

• Tahanan / .
• Biblioteka / .
• Datos

Panagmarka

Ti HTML ti gagangay a di naurnos a listaanmo nga addaan kadagiti silpo.

<ul klase = "pigket ti tinapay" > 
  <li> nga
    <a href = "#" > Pagtaengan </a> < klase ti span = "mangbingbingay" > / </span>   
  </li>
  <li> nga
    <a href = "#" > Biblioteka </a> < klase ti span = "mangbingbingay" > / </span>   
  </li>
  <li klase = "aktibo" > 
    <a href = "#" > Datos nga </a> 
  </li>
</ul>

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

<div klase = "paginasyon" > 
  <ul> nga
    <li><a href = "#" > Naudi </a></li> 
    <li klase = "aktibo" > 
      <a href = "#" > 1 nga </a> 
    </li>
    <li><a href = "#" > 2 nga </a></li> 
    <li><a href = "#" > 3 nga </a></li> 
    <li><a href = "#" > 4 ​​nga </a></li> 
    <li><a href = "#" > Sumaruno </a></li> 
  </ul>
</div>

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.

Default nga pagarigan

Babaen ti default, ti pager ket mangisentro kadagiti silpo.

• Napalabas
• Sumaruno

<ul klase = "pager" > 
  <li> nga
    <a href = "#" > Naudi </a> 
  </li>
  <li> nga
    <a href = "#" > Sumaruno </a> 
  </li>
</ul>

Naitunos dagiti silpo

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

• ← Nataengan
• Baro nga →

<ul klase = "pager" > 
  <li klase = "naudi" > 
    <a href = "#" > ken dagiti dadduma pay. Nataengan </a> 
  </li>
  <li klase = "sumaruno" > 
    <a href = "#" > Baro nga → </a> 
  </li>
</ul>

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:

<div klase = "bannuar-yunit" > 
  <h1> Paulo </h1>
  <p> Tagline nga </p>
  <p> nga
    <a klase = "btn btn-pangruna a btn-dakkel" > 
      Ammuem ti ad-adu pay
    </a>
  </p>
</div>

Maysa a simple a shell para iti h1to appropratiely space out ken segment 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).

<div klase = "panid-haeder" > 
  <h1> Pagarigan ti ulo ti panid </h1>
</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 :

<ul class = "dagiti bassit a ladawan" > 
  <li klase = "span3" > 
    <a href = "#" klase = "pabassit a ladawan" >  
      <img src = "Libre nga lugar.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</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:

<ul class = "dagiti bassit a ladawan" > 
  <li klase = "span3" > 
    <div klase = "pabassit nga larawan" > 
      <img src = "Libre nga lugar.it/260x180" alt = "" >  
      <h5> Etiketa ti bassit a ladawan </h5>
      <p> Kapsion ti thumbnail ditoy mismo... </p>
    </div>
  </li>
  ...
</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.

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.

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

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.

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

Biddut wenno peggad

<div class = "alerto-a-biddut" > 
  ...
</div>

Balligi

<div class = "alerto-balligi ti alerto" > 
  ...
</div>

Impormasion

<div class = "impormasion ti alerto ti alerto" > 
  ...
</div>

Kadawyan

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

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

Garitgaritan

Usaren ti gradient tapno makaaramid ti garitgaritan nga epekto.

<div class = "impormasion ti panagrang-ay ti panagrang-ay." 
     progreso-a-garitan" >
  <div nga klase = "bar". 
       estilo = " kalawa : 20 %; " ></div> 
</div>

Animado nga

Alaenna ti garitgaritan a pagarigan ken mangpabiag iti dayta.

<div class = "panagrang-ay ti panagrang-ay-peggad." 
     progreso-guhit nga aktibo" >
  <div nga klase = "bar". 
       estilo = " kalawa : 40 %; " ></div> 
</div>

Dagiti kanayonan a kolor

Dagiti bara ti panagrang-ay ket agus-usar kadagiti sumagmamano kadagiti isu met laeng a nagan ti klase a kas dagiti buton ken dagiti alerto para kadagiti kapada nga estilo.

• .progress-info
• .progress-success
• .progress-danger

Saan laeng a dayta, mabalinmo nga i-customize dagiti LESS files ken i-roll dagiti bukodmo a kolor ken kadakkel.

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-8 wenno dagiti daan a bersion ti Firefox.

Saan a suportaran ti Opera 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.

<div klase = "nasayaat" > 
  ...
</div>

Dagiti Badge

Usaren ti badge iti maysa nga elemento para iti saan a nabasa a bilang wenno kas simple a mangipakita.

<span klase = "badge" > 3 </div> 

Iserram ti ikono

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

×

<a klase = "serraan" > × </a>