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" > 
  < klase ti buton = "btn" > 1 </button> 
  < klase ti buton = "btn" > 2 </buton> 
  < klase ti buton = "btn" > 3 </buton> 
</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 »

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.

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.

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

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.

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.

<div klase = "btn-grupo" > 
  ...
  <ul klase = "dropdown-menu nga guyoden-kannigid" > 
    <!-- dagiti silpo ti dropdown a menu -->
  </ul>
</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.

<div klase = "btn-grupo" > 
  <buton klase = "btn" > Aksyon </button> 
  < klase ti buton = "btn dropdown-toggle" panagbalbaliw -datos = "pababa" >  
    <span klase = "caret" </span> 
  </button> nga
  <ul klase = "nababa-a-menu" > 
    <!-- dagiti silpo ti dropdown a menu -->
  </ul>
</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.

<div class = "panagbaba ti btn-grupo" > 
  < klase ti buton = "btn" > Panag- dropup </button> 
  < klase ti buton = "btn dropdown-toggle" panagbalbaliw -datos = "pababa" >  
    <span klase = "caret" </span> 
  </button> nga
  <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
• Tulong
• Dropdown nga
  • Action
  • Another action
  • Something else here
  • Separated link

<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
• Tulong
• Dropdown nga
  • Action
  • Another action
  • Something else here
  • Separated link

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

Dagiti horizontal a mangbingay

Manginayon ti horisontal a mangbingbingay babaen ti panagpartuat ti awan kargana a banag ti listaan ​​nga addaan ti klase .divider, a kas ti kasta:

<ul klase = "nav nav-listaan" > 
  ...
  <li klase = "mangbingay" </li> 
  ...
</ul>

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.

Agkupas kadagiti tab

Tapno agkupas dagiti tab, inayon .fadeiti tunggal .tab-pane.

Kasapulan ti 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 →

Pagarigan ti tabbable

Tapno agbalin a tabbable dagiti tab, mangpartuat ti .tab-paneaddaan iti naisangsangayan nga ID para iti tunggal tab ken baluten dagitoy iti .tab-content.

Para kadagiti kannawan wenno kannigid a naitunos a tab, baluten ti .nav-tabsken .tab-contentiti .tabbable.

Diretso nga markup

Ti panagusar kadagiti tabbable a tab ket agkasapulan ti panagbalkot a div, ti maysa a grupo dagiti tab, ken ti maysa a grupo dagiti tabbable a pane ti linaon.

<div class = "tabbable" > <!-- Masapul laeng para kadagiti kannigid/kannawan a tab -->  
  <ul klase = "nav nav-tabs" > 
    <li klase = "aktibo" ><a href = "#tab1" data-toggle = "tab" > Seksion 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Seksion 2 </a></li>  
  </ul>
  <div klase = "linaon-tab" > 
    <div klase = "aktibo ti tab-pane" id = "tab1" >  
      <p> Addaak iti Seksion 1. </p>
    </div>
    <div klase = "tab-pane" id = "tab2" >  
      <p> Howdy, addaak iti Seksion 2. </p>
    </div>
  </div>
</div>

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

Ilinteg ti navbar iti ngato wenno baba ti viewport nga addaan iti kanayonan a klase iti akinruar a div, .navbar.

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

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

No ikabilmo ti navbar, laglagipem nga kuentaen ti nailemmeng a lugar iti babana. Inayon ti 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 iti navbar

Tapno umno nga estilo ken iposision ti maysa a porma iti uneg ti navbar, inayon dagiti maitutop a klase a kas naipakita iti baba. Para iti default a porma, iraman .navbar-formken urayno .pull-leftwenno .pull-righttapno umiso ti panangitunos iti daytoy.

<porma ti klase = "navbar-porma ti guyoden-kannigid" > 
  < tipo ti input = "teksto" klase = "span2" >  
</porma>

Para iti ad-adu a napasadaan a porma ti panagbiruk, inayon .navbar-searchti formken .search-queryiti input para kadagiti espesial nga estilo iti navbar.

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

Ti pananginayon kadagiti dropdown ken dropup 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 →

Teksto iti navbar

Balkoten dagiti kuerdas ti teksto iti maysa a <.navbar-text>, kadawyan iti maysa nga <p>etiketa para iti umno a panangidaulo ken kolor.

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" > Datos </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.

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.

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

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

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

<div class = "paulo-ti-panid" > 
  <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" > 
  <buton klase = "serraan" data-dismiss = "alerto" > × </buton>  
  <strong> Pakdaar! </strong> Best check yo self, saan ka nga nasayaat unay ti langam.
</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.

<div class = "alerto-a-block ti alerto" > 
  <a klase = "serraan" data-dismiss = "alerto" href = "#" > × </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 mangpartuat ti garitgaritan nga epekto (awan ti IE).

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

Animado nga

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

<div class = "progreso nga progreso-a-garit." 
     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 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.

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

Iserram ti ikono

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

×

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

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