Abubuwan da aka gyara

Yawancin abubuwan da aka sake amfani da su da aka gina don samar da kewayawa, faɗakarwa, popovers, da ƙari.

A kula! Waɗannan takaddun na v2.3.2 ne, waɗanda ba a tallafawa bisa hukuma. Duba sabuwar sigar Bootstrap!

Misalai

Zaɓuɓɓuka na asali guda biyu, tare da ƙarin takamaiman bambance-bambancen guda biyu.

Ƙungiyar maɓalli guda ɗaya

Kunna jerin maɓalli tare da .btnciki .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Hagu </button>
  3. < class class = "btn" > Tsakiya </button>
  4. <button class = "btn" > Dama </button>
  5. </div>

Ƙungiyoyin maɓalli da yawa

Haɗa saiti na <div class="btn-group">cikin wani <div class="btn-toolbar">don ƙarin hadaddun abubuwa.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Ƙungiyoyin maɓalli na tsaye

Yi saitin maɓalli ya bayyana a tsaye a tsaye maimakon a kwance.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

Akwatin ajiya da dandanon rediyo

Ƙungiyoyin maɓalli kuma za su iya aiki azaman rediyo, inda maɓalli ɗaya kawai zai iya aiki, ko akwatunan rajista, inda kowane adadin maɓalli zai iya aiki. Duba takardun JavaScript don haka.

Zazzagewa a cikin ƙungiyoyin maɓalli

A kula!.btn-groupMaɓallai masu zazzagewa dole ne a nannade su daban-daban a cikin nasu .btn-toolbardon daidaitawa.

Overview da misalai

Yi amfani da kowane maballin don kunna menu na zazzagewa ta hanyar sanya shi a cikin .btn-groupkuma samar da alamar menu mai dacewa.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "zazzagewar" href = "#" >
  3. Aiki
  4. <span class = "kulawa" > </span>
  5. </a>
  6. <ul class = "zazzage-menu" >
  7. <!-- menu na zazzage mahaɗan -->
  8. </ul>
  9. </div>

Yana aiki tare da duk girman maɓalli

Maɓallin maɓalli suna aiki a kowane girman: .btn-large, .btn-small, ko .btn-mini.

Yana buƙatar JavaScript

Maɓallin zazzagewa yana buƙatar kayan aikin saukarwa na Bootstrap don aiki.

A wasu lokuta-kamar wayar hannu-manufofin zaɓuka za su shimfiɗa a waje da wurin kallo. Kuna buƙatar warware jeri da hannu ko tare da JavaScript na al'ada.


Zazzage maballin Raba

Gina kan salon rukunin maɓallin maɓallin da alama, za mu iya ƙirƙirar maɓallin tsaga cikin sauƙi. Maɓallai masu tsaga suna fasalta daidaitaccen aiki a hagu da jujjuyawar saukewa a dama tare da mahallin mahallin.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Aiki </button>
  3. < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >
  4. <span class = "kulawa" > </span>
  5. </button>
  6. <ul class = "zazzage-menu" >
  7. <!-- menu na zazzage mahaɗan -->
  8. </ul>
  9. </div>

Girman girma

Yi amfani da ƙarin azuzuwan maɓalli .btn-mini, .btn-small, ko .btn-largedon ƙima.

  1. <div class = "btn-group" >
  2. < class class = "btn btn-mini" > Aiki </button>
  3. < class class = "btn btn-mini dropdown-toggle" data-toggle = "saukarwa" >
  4. <span class = "kulawa" > </span>
  5. </button>
  6. <ul class = "zazzage-menu" >
  7. <!-- menu na zazzage mahaɗan -->
  8. </ul>
  9. </div>

Zazzage menu

Hakanan za'a iya jujjuya menu na saukarwa daga ƙasa zuwa sama ta ƙara aji ɗaya ga iyayen .dropdown-menu. Zai jujjuya alkiblar .caretkuma ya sake sanya menu ɗin kansa don motsawa daga ƙasa zuwa sama maimakon sama zuwa ƙasa.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Sauke </button>
  3. < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >
  4. <span class = "kulawa" > </span>
  5. </button>
  6. <ul class = "zazzage-menu" >
  7. <!-- menu na zazzage mahaɗan -->
  8. </ul>
  9. </div>

Standard pagination

Sauƙaƙan rubutun da aka yi wahayi daga Rdio, mai girma don ƙa'idodi da sakamakon bincike. Babban toshe yana da wuya a rasa, sauƙin daidaitawa, kuma yana ba da manyan wuraren dannawa.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Prev </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Gaba </a></li>
  10. </ul>
  11. </div>

Zabuka

Jihohi naƙasassu da aiki

Ana iya daidaita hanyoyin haɗin gwiwa don yanayi daban-daban. Yi amfani .disabledda hanyoyin haɗin da ba za a danna ba kuma .activedon nuna shafin na yanzu.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Kuna iya da zaɓin musanya anka mai aiki ko naƙasasshe don tazara don cire ayyukan dannawa yayin riƙe da salon da aka yi niyya.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "an kashe" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Girman girma

Zaki fi girma ko ƙarami? Ƙara .pagination-large, .pagination-small, ko .pagination-minidon ƙarin girma.

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Daidaitawa

Ƙara ɗaya daga cikin azuzuwan zaɓi biyu don canza daidaita hanyoyin haɗin yanar gizo: .pagination-centeredda .pagination-right.

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

Pager

Hanyoyi masu sauri na baya da na gaba don aiwatar da fage mai sauƙi tare da alamar haske da salo. Yana da kyau ga shafuka masu sauƙi kamar blogs ko mujallu.

Misali na asali

Ta hanyar tsoho, shafukan yanar gizo suna haɗin haɗin kai.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Gaba </a> </li>
  3. <li><a href = "#" > Gaba </a></li>
  4. </ul>

Hanyoyin haɗin kai masu daidaitawa

A madadin, zaku iya daidaita kowace hanyar haɗin gwiwa zuwa ɓangarorin:

  1. <ul class = "pager" >
  2. <li class = "na baya" >
  3. <a href = "#" > Tsoho </a>
  4. </li>
  5. <li class = "na gaba" >
  6. <a href = "#" > Sabo → </a>
  7. </li>
  8. </ul>

Yanayin naƙasasshen zaɓi

Hanyoyin haɗin yanar gizon Pager kuma suna amfani da .disabledajin mai amfani na gaba ɗaya daga rubutun.

  1. <ul class = "pager" >
  2. <li class = "an kashe a baya" >
  3. <a href = "#" > Tsoho </a>
  4. </li>
  5. ...
  6. </ul>

Lakabi

Lakabi Alamar alama
Default <span class="label">Default</span>
Nasara <span class="label label-success">Success</span>
Gargadi <span class="label label-warning">Warning</span>
Muhimmanci <span class="label label-important">Important</span>
Bayani <span class="label label-info">Info</span>
Juyawa <span class="label label-inverse">Inverse</span>

Baji

Suna Misali Alamar alama
Default 1 <span class="badge">1</span>
Nasara 2 <span class="badge badge-success">2</span>
Gargadi 4 <span class="badge badge-warning">4</span>
Muhimmanci 6 <span class="badge badge-important">6</span>
Bayani 8 <span class="badge badge-info">8</span>
Juyawa 10 <span class="badge badge-inverse">10</span>

Sauƙi mai rugujewa

Don aiwatarwa cikin sauƙi, alamomi da baji za su ruguje kawai (ta hanyar :emptyzaɓin CSS) lokacin da babu abun ciki a ciki.

Jarumi naúrar

Abu mai sauƙi, sassauƙa don nuna mahimman abun ciki akan rukunin yanar gizonku. Yana aiki da kyau akan tallace-tallace da shafuka masu nauyi.

Sannu Duniya!

Wannan rukunin jarumai ne mai sauƙi, sassauƙan salon jumbotron don kiran ƙarin hankali ga fitaccen abun ciki ko bayanai.

Ƙara koyo

  1. <div class = "jarumin jarumta" >
  2. <h1> Jagora </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Ƙara koyo
  7. </a>
  8. </p>
  9. </div>

taken shafi

Sauƙaƙan harsashi don h1fitar da sarari yadda ya kamata da yanki sassan abun ciki a shafi. Yana iya amfani da h1tsohowar small, element da sauran sauran abubuwan haɗin gwiwa (tare da ƙarin salo).

  1. <div class = "shafi-header" >
  2. <h1> Misalin taken shafi <karamin> Rubutu don kai </small></h1>
  3. </div>

Tsoffin hotuna

Ta hanyar tsoho, an tsara thumbnails na Bootstrap don nuna hotunan da aka haɗe tare da ƙarancin alamar da ake buƙata.

Mai iya daidaitawa sosai

Tare da ɗan ƙarin alamar alama, yana yiwuwa a ƙara kowane nau'in abun ciki na HTML kamar kanun labarai, sakin layi, ko maɓalli a cikin ƙananan hotuna.

  • 300x200

    Alamar thumbnail

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id un mi porta gravida a eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Aiki Aiki

  • 300x200

    Alamar thumbnail

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id un mi porta gravida a eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Aiki Aiki

  • 300x200

    Alamar thumbnail

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id un mi porta gravida a eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Aiki Aiki

Me yasa ake amfani da thumbnails

Tambayoyi (a baya .media-gridhar zuwa v1.4) suna da kyau don grid na hotuna ko bidiyo, sakamakon binciken hoto, samfuran tallace-tallace, fayiloli, da ƙari mai yawa. Suna iya zama mahaɗi ko abun ciki na tsaye.

Sauƙaƙe, alama mai sassauƙa

Alamar thumbnail abu ne mai sauƙi - ultare da kowane adadin liabubuwa shine duk abin da ake buƙata. Hakanan yana da sauƙin sassauƙa, yana ba da damar kowane nau'in abun ciki tare da ɗan ƙara alama don naɗe abubuwan ku.

Yana amfani da girman ginshiƙi

A ƙarshe, ɓangaren thumbnails yana amfani da azuzuwan tsarin grid na yanzu-kamar .span2ko .span3—don sarrafa girman ɗan yatsa.

Alamar alama

Kamar yadda aka ambata a baya, alamar da ake buƙata don thumbnails yana da haske kuma mai sauƙi. Anan kalli saitunan tsoho don hotuna masu alaƙa :

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <a href = "#" class = "thumbnail" >
  4. <img data-src = "mai riƙe.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Don abun ciki na HTML na al'ada a cikin ƙananan hotuna, alamar tana canzawa kaɗan. Don ba da izinin toshe abun ciki a ko'ina, muna musanya shi <a>don <div>kamar haka:

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "mai riƙe.js/300x200" alt = "" >
  5. <h3> Alamar ɗan yatsa </h3>
  6. <p> Takardun yatsa... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Karin misalai

Bincika duk zaɓuɓɓukanku tare da nau'ikan grid iri-iri da ke akwai a gare ku. Hakanan zaka iya haɗawa da daidaita girma dabam dabam.

Tsohuwar faɗakarwa

Rufe kowane rubutu da maɓallin korar zaɓi .alertdon ainihin saƙon faɗakarwar faɗakarwa.

Gargadi! Mafi kyawun duba kanku, ba ku da kyau sosai.
  1. <div class = "jijjiga" >
  2. < nau'in maballin = "button" class = "rufe" data-dismiss = "jijjiga" > × </button>
  3. <strong> Gargadi! Mafi kyawun duba yo kai, ba ka da kyau sosai.
  4. </div>

Korar maɓallan

Mobile Safari da Mobile Opera browsers, ban da data-dismiss="alert"sifa, suna buƙatar href="#"korar faɗakarwa yayin amfani da <a>alamar.

  1. <a href = "#" class = "kusa" data-dismiss = "jijjiga" > × </a>

A madadin, zaku iya amfani da wani <button>abu mai sifa na bayanai, wanda muka zaɓi yi don takaddun mu. Lokacin amfani da <button>, dole ne ku haɗa type="button"ko fom ɗin ku bazai ƙaddamar ba.

  1. < nau'in maballin = "button" class = "rufe" data-dismiss = "jijjiga" > × </button>

Korar faɗakarwa ta JavaScript

Yi amfani da kayan aikin jQuery faɗakarwa don saurin korar faɗakarwa.


Zabuka

Don tsayin saƙonni, ƙara madaidaicin saman da kasan abin rufewar faɗakarwa ta ƙara .alert-block.

Gargadi!

Mafi kyawun duba kanku, ba ku da kyau sosai. Nulla vitae elit libero, a pharetra augue. Abubuwan da suka dace da cursus magna, velsselerisque nisl consectetur et.

  1. <div class = "jijjiga-block" >
  2. < nau'in maballin = "button" class = "rufe" data-dismiss = "jijjiga" > × </button>
  3. <h4> Gargadi! </h4> ku
  4. Mafi kyawun bincika kan ku, ba ku ...
  5. </div>

Madadin yanayi

Ƙara azuzuwan zaɓi don canza ma'anar faɗakarwa.

Kuskure ko haɗari

Oh karye! Canja wasu 'yan abubuwa sama kuma a sake gwada ƙaddamarwa.
  1. <div class = "kuskuren faɗakarwa" >
  2. ...
  3. </div>

Nasara

Sannu da aikatawa! Kun yi nasarar karanta wannan muhimmin saƙon faɗakarwa.
  1. <div class = "jijjiga faɗakarwa-nasara" >
  2. ...
  3. </div>

Bayani

A kula! Wannan faɗakarwar tana buƙatar kulawar ku, amma ba shi da mahimmanci sosai.
  1. <div class = "jijjiga-info" >
  2. ...
  3. </div>

Misalai da alama

Na asali

Tsohuwar mashaya ci gaba tare da gradient a tsaye.

  1. <div class = "ci gaba" >
  2. <div class = "bar" style = " nisa : 60 %; " ></ div>
  3. </div>

Tatsi

Yana amfani da gradient don ƙirƙirar tasirin tsiri. Babu a cikin IE7-8.

  1. <div class = "ci gaban ci gaba-raguwa" >
  2. <div class = "bar" style = " nisa : 20 %; " ></ div>
  3. </div>

Mai rairayi

Ƙara .activezuwa .progress-stripeddon raya ratsi dama zuwa hagu. Babu samuwa a cikin duk nau'ikan IE.

  1. <div class = "ci gaba-gaba mai aiki" >
  2. <div class = "bar" style = " nisa : 40 %; " ></ div>
  3. </div>

Tari

Sanya sanduna da yawa cikin guda ɗaya .progressdon tara su.

  1. <div class = "ci gaba" >
  2. <div class = "bar bar-success" style = " nisa : 35 %; " > </div>
  3. <div class = "bar-gargadi" style = " nisa : 20 %; " > </div>
  4. <div class = "bar-danger" style = " nisa : 10 %; " > </div>
  5. </div>

Zabuka

Ƙarin launuka

Sandunan ci gaba suna amfani da wasu maɓalli iri ɗaya da azuzuwan faɗakarwa don daidaitattun salo.

  1. <div class = "ci gaban-info" >
  2. <div class = "bar" style = " nisa : 20 % " ></ div>
  3. </div>
  4. <div class = "ci gaban ci gaba-nasara" >
  5. <div class = "bar" style = " nisa : 40 % " ></ div>
  6. </div>
  7. <div class = "gargadin ci gaba-gaba" >
  8. <div class = "bar" style = " nisa : 60 % " ></ div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " nisa : 80 % " ></ div>
  12. </div>

Sanduna masu tsiri

Kama da m launuka, muna da bambance bambancen sanduna ci gaba.

  1. <div class = "ci gaban cigaba-info progress-striped" >
  2. <div class = "bar" style = " nisa : 20 % " ></ div>
  3. </div>
  4. <div class = "ci gaba-ci gaba-nasara-ci gaba" >
  5. <div class = "bar" style = " nisa : 40 % " ></ div>
  6. </div>
  7. <div class = "ci gaba-gaba-gargadi-ci gaba-raguwa" >
  8. <div class = "bar" style = " nisa : 60 % " ></ div>
  9. </div>
  10. <div class = "ci gaban ci gaba-danger progress-striped" >
  11. <div class = "bar" style = " nisa : 80 % " ></ div>
  12. </div>

Tallafin mai lilo

Sandunan ci gaba suna amfani da gradients CSS3, canji, da rayarwa don cimma duk tasirin su. Ba a tallafawa waɗannan fasalulluka a cikin IE7-9 ko tsofaffin nau'ikan Firefox.

Siffofin da suka wuce Internet Explorer 10 da Opera 12 ba sa goyan bayan rayarwa.

Salon abubuwa masu ƙima don gina nau'ikan abubuwa daban-daban (kamar sharhin blog, Tweets, da sauransu) waɗanda ke nuna hoton hagu ko dama tare da abun ciki na rubutu.

Misali na asali

Tsoffin kafofin watsa labarai suna ba da damar yawo wani abu mai jarida (hotuna, bidiyo, sauti) zuwa hagu ko dama na toshewar abun ciki.

64x64

Jagoran watsa labarai

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Jagoran watsa labarai

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Jagoran watsa labarai

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div class = "media" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "mai riƙe.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "kadin-watsa labarai" > Taken mai jarida </h4>
  7. ...
  8.  
  9. <!-- Abun jarida mai gida -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Jerin watsa labarai

Tare da ɗan ƙarin alamar alama, zaku iya amfani da kafofin watsa labarai a cikin jeri (mai amfani ga zaren sharhi ko jerin labarai).

  • 64x64

    Jagoran watsa labarai

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Nested kafofin watsa labarai

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested kafofin watsa labarai

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested kafofin watsa labarai

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Jagoran watsa labarai

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "jerin watsa labarai" >
  2. <li class = "media" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "mai riƙe.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "kadin-watsa labarai" > Taken mai jarida </h4>
  8. ...
  9.  
  10. <!-- Abun jarida mai gida -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

Yi amfani da rijiyar azaman tasiri mai sauƙi akan wani abu don ba shi tasirin sa.

Duba, ina cikin rijiya!
  1. <div class = "lafiya" >
  2. ...
  3. </div>

Zabin azuzuwan

Sarrafa madaidaicin sasanninta da sasanninta tare da azuzuwan gyare-gyare na zaɓi biyu.

Duba, ina cikin rijiya!
  1. <div class = "lafiya mai kyau" >
  2. ...
  3. </div>
Duba, ina cikin rijiya!
  1. <div class = "da kyau-kanana" >
  2. ...
  3. </div>

Rufe gumaka

Yi amfani da madaidaicin gunkin kusa don korar abun ciki kamar tsari da faɗakarwa.

  1. < class class = "kusa" > × </button>

Na'urorin iOS suna buƙatar href="#"abubuwan da suka faru don danna idan kun fi son amfani da anga.

  1. <a class = "close" href = "#" > & lokuta; </a>

Azuzuwan masu taimako

Sauƙaƙe, azuzuwan mayar da hankali don ƙaramin nuni ko tweaks ɗabi'a.

.ja-hagu

Taso kan wani kashi hagu

  1. class = "ja-hagu"
  1. . ja - hagu {
  2. yawo : hagu ;
  3. }

.ja-dama

Taso kan wani abu dama

  1. class = "ja-dama"
  1. . ja - dama {
  2. yawo : dama ;
  3. }

.an yi shiru

Canja launin kashi zuwa#999

  1. class = "batattu"
  1. . shiru {
  2. launi : #999;
  3. }

.bayyanai

Share floatkan kowane kashi

  1. class = "clearfix"
  1. . share gyara {
  2. * zuƙowa : 1 ;
  3. &: kafin ,
  4. &: bayan {
  5. nuni : tebur ;
  6. abun ciki : "" ;
  7. }
  8. &: bayan {
  9. bayyananne : biyu ;
  10. }
  11. }