Dagiti paset

Pinulpullo a mausar manen a paset ti naaramid tapno mangipaay iti panaglayag, alerto, popovers, ken dadduma pay.

Dagiti pagarigan

Dua a kangrunaan a pagpilian, agraman ti dua pay nga espesipiko a panagduduma.

Agmaymaysa a buton ti grupo

Balkoten ti agsasaruno a buton babaen ti .btnin .btn-group.

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

Adu a grupo ti buton

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>

Bertikal a grupo dagiti buton

Pagbalinen a ti maysa a set dagiti buton ket agparang a bertikal a naurnong imbes a horizontal.

  1. <div klase = "btn-grupo btn-grupo-bertikal" >
  2. ...
  3. </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.

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.

  1. <div klase = "btn-grupo" >
  2. <a klase = "btn dropdown-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

Dagiti dropdown ti buton ket agtrabaho iti aniaman a kadakkel: .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

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.

  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 Kadakkel

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

  1. <div klase = "btn-grupo" >
  2. < klase ti buton = "btn btn-mini" > Aksyon </buton>
  3. < klase ti buton = "btn btn-mini 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>

Pagalagadan a paginasion

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.

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

Dagiti Pagpilian

Baldado ken aktibo nga estado

Mabalin a ma-customize dagiti link para iti nadumaduma a kasasaad. Usaren .disabledpara kadagiti saan a mai-click a silpo ken .activetapno mangipakita ti agdama a panid.

  1. <div klase = "paginasyon" >
  2. <ul> nga
  3. <li klase = "nabaldado" ><a href = "#" > « </a></li> nga adda
  4. <li klase = "aktibo" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Mabalinmo nga opsional nga isukat dagiti aktibo wenno baldado nga angkla para kadagiti span tapno maikkat ti panagusar ti panagpidut bayat a pagtalinaeden dagiti nairanta nga estilo.

  1. <div klase = "paginasyon" >
  2. <ul> nga
  3. <li klase = "baldado" ><span> « </span></li> nga adda
  4. <li klase = "aktibo" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Dagiti Kadakkel

Magarbo a dakdakkel wenno basbassit a pagination? Inayon ti .pagination-large, .pagination-small, wenno .pagination-minipara kadagiti kanayonan a kadakkel.

  1. <div class = "paginasion-paginasion-dakkel" >
  2. <ul> nga
  3. ...
  4. </ul>
  5. </div>
  6. <div klase = "paginasyon" >
  7. <ul> nga
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "paginasion ti panagpagina-bassit" >
  12. <ul> nga
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "paginasion ti panagpagina-mini" >
  17. <ul> nga
  18. ...
  19. </ul>
  20. </div>

Panagtunos

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

  1. <div class = "naisentro iti paginasion ti panid" >
  2. ...
  3. </div>
  1. <div class = "paginasion ti panagpagina-kannigid" >
  2. ...
  3. </div>

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.

  1. <ul klase = "pager" >
  2. <li><a href = "#" > Naudi </a></li>
  3. <li><a href = "#" > Sumaruno </a></li>
  4. </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>

Opsional a baldado nga estado

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

  1. <ul klase = "pager" >
  2. <li class = "naudi a nabaldado" >
  3. <a href = "#" > ken dagiti dadduma pay. Nataengan </a>
  4. </li>
  5. ...
  6. </ul>

Dagiti etiketa

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>

Dagiti Badge

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>

Nalaka a ma-collapsible

Para iti nalaka a pannakaipatungpal, dagiti etiketa ken badge ket basta agrupsa (babaen ti :emptyagpili ti CSS) no awan ti linaon nga adda iti uneg.

Bannuar nga yunit

Maysa a nalag-an, nalaka a maibagay a paset tapno maipakita dagiti kangrunaan a linaon iti site-mo. Nasayaat ti panagtrabahona kadagiti site a paglakuan ken nadagsen ti linaonna.

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

  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>

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 pay a paset (nga addaan kadagiti kanayonan nga estilo).

  1. <div class = "paulo-ti-panid" >
  2. <h1> Pagarigan ti ulo ti panid <small> Subteksto para iti ulo </small></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.

  • 300x200 nga

    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

  • 300x200 nga

    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

  • 300x200 nga

    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-grid agingga 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 ti panangmarka iti thumbnail—a nga uladdaan iti aniaman a numero tili elemento ti kasapulan laeng. Daytoy ket super flexible met, 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 ti .span2wenno.span3 —para iti panagtengngel kadagiti rukod ti thumbnail.

Panagmarka

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 = "span4" >
  3. <a href = "#" klase = "pabassit a ladawan" >
  4. <img datos-src = "agtagikua.js/300x200" 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 = "span4" >
  3. <div klase = "pabassit nga larawan" >
  4. <img datos-src = "agtagikua.js/300x200" alt = "" >
  5. <h3> Etiketa ti bassit a ladawan </h3>
  6. <p> Kapsion ti bassit a ladawan... </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.

Default nga alerto

Balkoten ti ania man a teksto ken ti opsional a buton ti panangilaksid .alertpara iti kangrunaan a mensahe ti alerto ti pakdaar.

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

Dismiss dagiti buton

Dagiti Mobile Safari ken Mobile Opera a browser, malaksid ti data-dismiss="alert"attribute, ket agkasapulan ti maysa href="#"para iti pannakaikkat dagiti alerto no agus-usar ti maysa nga <a>etiketa.

  1. <a href = "#" klase = "serraan" data-dismiss = "alerto" > × </a>

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.

  1. < tipo ti buton = "buton" klase = "serraan" data-dismiss = "alerto" > × </button> nga

Ilaksid dagiti alerto babaen ti JavaScript

Usaren ti alerts jQuery plugin para iti napardas ken nalaka a pannakaikkat dagiti alerto.


Dagiti Pagpilian

Para kadagiti at-atiddog ​​a mensahe, paaduem ti padding iti ngato ken baba ti alert wrapper babaen ti pananginayon iti .alert-block.

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. < tipo ti buton = "buton" klase = "serraan" data-dismiss = "alerto" > × </button> nga
  3. <h4> Pakdaar! </h4>
  4. Best check yo self, saan ka nga...
  5. </div>

Dagiti alternatibo iti konteksto

Manginayon kadagiti opsional a klase tapno agbaliw 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 klase = "bar" estilo = " kalawa : 60 %; " ></div>
  3. </div>

Garitgaritan

Usaren ti gradient tapno makaaramid ti garitgaritan nga epekto. Saan a magun-od iti IE7-8.

  1. <div class = "progreso nga progreso-striped" >
  2. <div klase = "bar" estilo = " kalawa : 20 %; " ></div>
  3. </div>

Animado nga

Add .activeto .progress-stripedtapno ma-animate dagiti garit iti kannawan agingga iti kannigid. Saan a magun-od kadagiti amin a bersion ti IE.

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

Naurnong

Ikabil ti adu a bara iti isu met laeng .progresstapno maitumpok dagitoy.

  1. <div klase = "panagrang-ay" >
  2. <div klase = "bar bar-balligi" estilo = " kalawa : 35 %; " ></div>
  3. <div klase = "bar-bar-pakdaar" estilo = " kalawa : 20 %; " ></div>
  4. <div klase = "bar bar-peggad" estilo = " kalawa : 10 %; " ></div>
  5. </div>

Dagiti Pagpilian

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.

  1. <div class = "impormasion ti panagrang-ay ti panagrang-ay" >
  2. <div klase = "bar" estilo = " kalawa : 20 % " ></div>
  3. </div>
  4. <div class = "progreso nga progreso-balligi" >
  5. <div klase = "bar" estilo = " kalawa : 40 % " ></div>
  6. </div>
  7. <div class = "pakdaar ti panagrang-ay ti panagrang-ay" >
  8. <div klase = "bar" estilo = " kalawa : 60 % " ></div>
  9. </div>
  10. <div class = "peggad ti panagrang-ay ti panagrang-ay" >
  11. <div klase = "bar" estilo = " kalawa : 80 % " ></div>
  12. </div>

Dagiti garitgaritan a bara

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

  1. <div class = "progreso nga progreso-info progreso-striped" >
  2. <div klase = "bar" estilo = " kalawa : 20 % " ></div>
  3. </div>
  4. <div class = "progreso nga progreso-balligi nga progreso-striped" >
  5. <div klase = "bar" estilo = " kalawa : 40 % " ></div>
  6. </div>
  7. <div class = "progreso nga progreso-pakdaar progreso-striped" >
  8. <div klase = "bar" estilo = " kalawa : 60 % " ></div>
  9. </div>
  10. <div class = "progreso nga progreso-peggad progreso-striped" >
  11. <div klase = "bar" estilo = " kalawa : 80 % " ></div>
  12. </div>

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.

Dagiti bersion a nasapsapa ngem ti Internet Explorer 10 ken Opera 12 ket saan a mangsuporta kadagiti animasion.

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

Ti default a media ket mangipalubos ti panagtaytayab ti maysa a banag ti media (dagiti ladawan, video, audio) iti kannigid wenno kannawan ti maysa a bloke ti linaon.

64x64 nga

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.
64x64 nga

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.
64x64 nga

Paulo ti media

Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko 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.
  1. <div klase = "media" >
  2. <a klase = "guyod-kannigid" href = "#" >
  3. <img klase = "media-a-banag" datos-src = "agtagikua.js/64x64" >
  4. </a>
  5. <div klase = "bagi-ti-media" >
  6. <h4 class = "paulo ti media" > Paulo ti media </h4>
  7. ...
  8.  
  9. <!-- Naisanglad a banag ti media -->
  10. <div klase = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

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

  • 64x64 nga

    Paulo ti media

    Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.

    64x64 nga

    Naisanglad a paulo ti media

    Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
    64x64 nga

    Naisanglad a paulo ti media

    Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
    64x64 nga

    Naisanglad a paulo ti media

    Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
  • 64x64 nga

    Paulo ti media

    Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
  1. <ul klase = "listaan-ti-media" >
  2. <li klase = "media" >
  3. <a klase = "guyod-kannigid" href = "#" >
  4. <img klase = "media-a-banag" datos-src = "agtagikua.js/64x64" >
  5. </a>
  6. <div klase = "bagi-ti-media" >
  7. <h4 class = "paulo ti media" > Paulo ti media </h4>
  8. ...
  9.  
  10. <!-- Naisanglad a banag ti media -->
  11. <div klase = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

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>

Opsional a klase

Kontrol ti padding ken nagtimbukel a suli nga addaan iti dua nga opsional a klase ti modifier.

Kitaem, addaak iti bubon!
  1. <div class = "nasayaat a nasayaat-dakkel" >
  2. ...
  3. </div>
Kitaem, addaak iti bubon!
  1. <div class = "nasayaat a nasayaat-bassit" >
  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 panag-click no kaykayatmo nga usaren ti angkla.

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

Dagiti klase ti katulongan

Simple, naipamaysa a klase para kadagiti babassit a display wenno behavior tweaks.

.guyod-kannigid

Float ti maysa nga elemento iti kannigid

  1. klase = "guyod-kannigid".
  1. . guyoden - kannigid { .
  2. float : kannigid ;
  3. } nga

.guyod-kannigid

Float ti maysa nga elemento iti kannawan

  1. klase = "guyoden-kannigid".
  1. . guyoden - kannawan { .
  2. float : kannawan ;
  3. } nga

.naulimek

Baliwan ti kolor ti maysa nga elemento iti#999

  1. klase = "naulimek".
  1. . naulimek { .
  2. kolor : # 999 nga;
  3. } nga

.nalawag nga ilinteg

I-clear ti floatiti aniaman nga elemento

  1. klase = "panangdalus" .
  1. . clearfix nga { .
  2. * panag-zoom : 1 ;
  3. &: sakbay ti , .
  4. &: kalpasan ti {
  5. display : lamisaan ;
  6. linaon : "" ;
  7. } nga
  8. &: kalpasan ti {
  9. nalawag : agpada ;
  10. } nga
  11. } nga