Qaybaha

Daraasiin ka kooban qaybo dib loo isticmaali karo oo loo dhisay si ay u bixiyaan hagidda, digniinaha, popovers, iyo in ka badan.

Tusaalooyinka

Laba ikhtiyaar oo aasaasi ah, oo ay weheliyaan laba kala duwanaansho gaar ah oo dheeraad ah.

Kooxda hal badhan

Ku duub badhamada taxane ah .btngudaha .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Bidix </button>
  3. <button class = "btn" > Dhexe </button>
  4. <button class = "btn" > Midig </button>
  5. </div>

Kooxo badhan oo badan

Isku-dubbarid isku-dar ah <div class="btn-group">qaybo <div class="btn-toolbar">aad u adag.

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

Kooxaha badhanka toosan

Samee badhamada u muuqda kuwo toosan oo is dulsaaran halkii ay ahaan lahaayeen kuwo toosan.

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

Sanduuqa hubinta iyo dhadhanka raadiyaha

Kooxaha badhanka waxay sidoo kale u shaqayn karaan raadiyayaal, halkaas oo hal badhan oo keliya uu shaqayn karo, ama sanduuqyada hubinta, halkaasoo tiro kasta oo badhammo ahi ay shaqayn karaan. U eeg dokumentiyada JavaScript taas.

Hoos u dhigista kooxaha badhanka

Madaxa kor u qaad!Badhamada hoos-u-dhaca leh waa in si gaar ah loogu duuduubo iyaga oo u gaar .btn-groupah .btn-toolbarsi loo sameeyo.

Dulmar iyo tusaaleyaal

Isticmaal badhan kasta si aad u kiciso liiska hoos u dhaca adiga oo gelinaya gudaha a .btn-groupoo bixisa calaamadaynta liiska saxda ah.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Ficil
  4. <span class = "daryeel" </span>
  5. </a>
  6. <ul class = "Dropdown-menu" >
  7. <!-- liiska hoos-u-dhaca links-->
  8. </ul>
  9. </div>

Wuxuu la shaqeeyaa dhammaan cabbirrada badhanka

Hoos-u-dhacyada badhanka waxay shaqeeyaan cabbir kasta: .btn-large, .btn-small, ama .btn-mini.

Wuxuu u baahan yahay JavaScript

Hoos-u-dhaca badhanka wuxuu u baahan yahay Bootstrap dropdown plugin si uu u shaqeeyo.

Xaaladaha qaarkood-sida mobilada- menu-yada hoos u dhaca ayaa ku fidi doona meel ka baxsan goobta daawashada. Waxaad u baahan tahay inaad ku xalliso toosinta gacanta ama JavaScript-ka caadiga ah.


Hoos udhaca badhanka

Ku dhisidda qaababka kooxda badhanka iyo calaamadaynta, waxaan si fudud u abuuri karnaa badhanka kala qaybsan. Badhamada kala qaybsan waxay ka kooban yihiin fal caadi ah oo bidixda ah iyo hoos u rogid dhanka midig ah oo leh xidhiidhin guud.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Ficil </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "hoos u dhac" >
  4. <span class = "daryeel" </span>
  5. </button>
  6. <ul class = "Dropdown-menu" >
  7. <!-- liiska hoos-u-dhaca links-->
  8. </ul>
  9. </div>

Cabbirrada

Ka faa'iidayso casharrada badhanka dheeraadka ah .btn-mini, .btn-small, ama .btn-largecabbiridda.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Ficil </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "hoos u dhac" >
  4. <span class = "daryeel" </span>
  5. </button>
  6. <ul class = "Dropdown-menu" >
  7. <!-- liiska hoos-u-dhaca links-->
  8. </ul>
  9. </div>

menus tuur

Liiska hoos-u-dhaca sidoo kale waxaa laga rogi karaa hoosta kor iyadoo lagu darayo hal fasal waalidka dhow ee .dropdown-menu. Waxay rogi doontaa jihada .caretoo dib u dejin doonta menu laftiisa si ay uga dhaqaaqdo xagga hoose kor halkii ay ka ahayd sare hoos.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Tuur < /button>
  3. <button class = "btn dropdown-toggle" data-toggle = "hoos u dhac" >
  4. <span class = "daryeel" </span>
  5. </button>
  6. <ul class = "Dropdown-menu" >
  7. <!-- liiska hoos-u-dhaca links-->
  8. </ul>
  9. </div>

Bogga caadiga ah

Pagination fudud oo ay dhiirigelisay Rdio, ku fiican abka iyo natiijooyinka raadinta. Baloogga weyni way adag tahay in la waayo, si fudud ayaa loo miisaami karaa, wuxuuna bixiyaa meelo badan oo gujis ah.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Horay </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 = "#" > Xiga </a></li>
  10. </ul>
  11. </div>

Ikhtiyaarada

Naafada iyo gobolada firfircoon

Xiriirinta waa kuwo lagu habeyn karo duruufo kala duwan. U isticmaal .disabledxiriiriyeyaasha aan la gujin karin iyo .activesi aad u muujiso bogga hadda jira.

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

Waxaad si ikhtiyaari ah u beddeli kartaa barroosinnada firfircoon ama naafada ah ee taako si aad meesha uga saarto shaqeynta guji inta aad haysatid qaababka loogu talagalay.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "naafo" ><span> & laquo; </span></li>
  4. <li class = "firfircoon" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Cabbirrada

Ma jeceshahay bogag ka weyn ama ka yar? Ku dar .pagination-large, .pagination-small, ama .pagination-minicabbirro dheeraad ah.

  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>

Toosin

Ku dar mid ka mid ah laba fasal oo ikhtiyaari ah si aad u bedesho isku xidhka boggaga: .pagination-centerediyo .pagination-right.

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

Pager

Xidhiidhada degdega ah ee hore iyo kan xiga ee hirgelinta pagination fudud oo leh calaamad iftiin iyo qaabab. Waxay u fiican tahay bogagga fudud sida blogyada ama majaladaha.

Tusaale ahaan

Sida caadiga ah, pager-ku wuxuu isku xiraa.

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

Xiriirinta toosan

Haddii kale, waxaad isku toosin kartaa xiriiriye kasta dhinacyada:

  1. <ul class = "pager" >
  2. <li class = "kii hore" >
  3. <a href = "#" > Ka weyn </a>
  4. </li>
  5. <li class = "ku xiga" >
  6. <a href = "#" > Ka cusub → </a>
  7. </li>
  8. </ul>

Xaalad naafada ah

Xiriirinta Pager sidoo kale waxay isticmaalaan .disabledfasalka utility guud ee bogga.

  1. <ul class = "pager" >
  2. <li class = "hore naafo ah" >
  3. <a href = "#" > Ka weyn </a>
  4. </li>
  5. ...
  6. </ul>

Calaamadaha

Calaamadaha Calaamadayn
Asal ahaan <span class="label">Default</span>
Guul <span class="label label-success">Success</span>
Digniin <span class="label label-warning">Warning</span>
Muhiim <span class="label label-important">Important</span>
Xog <span class="label label-info">Info</span>
rogan <span class="label label-inverse">Inverse</span>

Calaamadaha

Magaca Tusaale Calaamadayn
Asal ahaan 1 <span class="badge">1</span>
Guul 2 <span class="badge badge-success">2</span>
Digniin 4 <span class="badge badge-warning">4</span>
Muhiim 6 <span class="badge badge-important">6</span>
Xog 8 <span class="badge badge-info">8</span>
rogan 10 <span class="badge badge-inverse">10</span>

Si fudud u burburi kara

Si loo fududeeyo hirgelinta, sumadaha iyo calaamaduhu si fudud ayay u burburi doonaan (iyada oo loo sii marayo :emptyxulashada CSS) marka aanay wax nuxur ahi ku jirin.

Halyeeyga

Qayb fufud, dabacsanaan leh si loogu soo bandhigo nuxurka muhiimka ah ee goobtaada. Waxay si fiican uga shaqeysaa suuq-geynta iyo boggaga culculus.

Hello, adduunyo!

Tani waa unug fudud oo halyey ah, qayb fudud oo qaabka jumbotron ah oo loogu yeedhayo feejignaan dheeri ah nuxurka ama macluumaadka.

Wax dheeri ah baro

  1. <div class = "hero-unit" >
  2. <h1> Ciwaanka </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Wax dheeri ah baro
  7. </a>
  8. </p>
  9. </div>

Madaxa bogga

Qolf fudud oo loogu talagalay in h1si habboon loo baneeyo oo u qaybiyo qaybaha nuxurka bogga. Waxay ka faa'iidaysan kartaa h1' default' small, element iyo sidoo kale inta badan qaybaha kale (oo leh qaabab dheeraad ah).

  1. <div class = "page-header" >
  2. <h1> Tusaale bogga madaxa <small> Qoraal-hoosaadka madaxa </small></h1>
  3. </div>

Sawir gacmeedyada asalka ah

Sida caadiga ah, Bootstrap's thumbnails waxaa loogu talagalay inay soo bandhigaan sawirro ku xiran oo leh calaamado loo baahan yahay ugu yar.

Aad loo habeyn karo

Waxoogaa calaamad ah oo dheeri ah, waxaa suurtogal ah in lagu daro nooc kasta oo ka mid ah waxyaabaha HTML sida cinwaannada, cutubyada, ama badhamada thumbnails.

  • 300x200

    Calaamadda thumbnail

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

    Ficil Ficil

  • 300x200

    Calaamadda thumbnail

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

    Ficil Ficil

  • 300x200

    Calaamadda thumbnail

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

    Ficil Ficil

Waa maxay sababta loo isticmaalo thumbnails

thumbnails (horay.media-grid u ahaa ilaa v1.4) waxay ku fiican yihiin xadhkaha sawirada ama fiidyaha, natiijooyinka raadinta sawirka, alaabta tafaariiqda, faylalka, iyo wax ka badan. Waxay noqon karaan xiriirin ama nuxur taagan.

Calaamad fudud, dabacsan

Calaamadaynta thumbnail waa mid fudud - oo ulleh tiro kastali walxood ayaa ah waxa loo baahan yahay oo dhan. Waxa kale oo aad u dabacsan, oo u oggolaanaysa nooc kasta oo ka mid ah nuxurka leh wax yar oo dheeraad ah si loo duubo waxa ku jira.

Waxay isticmaashaa cabbirrada tiirarka grid

Ugu dambeyntii, qaybta thumbnails-ka waxay isticmaashaa fasallada nidaamka grid-ka-sida .span2ama.span3 - si loo xakameeyo cabbirrada thumbnail-ka.

Calaamadayn

Sidii hore loo sheegay, calaamadaynta loo baahan yahay ee thumbnails waa mid fudud oo toosan. Waa kan eega habaynta caadiga ah ee sawirada ku xidhan :

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

Wixii HTML ka kooban ee thumbnails, calaamadeyntu wax yar ayey isu beddeshaa. Si loo oggolaado nuxurka heerka xannibaadda meel kasta, waxaanu ku beddelannaa sidan <a>oo kale:<div>

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Calaamadda thumbnail </h3>
  6. <p> Qoraalka sawirka thumbnail... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Tusaalayaal badan

Ku sahamin dhammaan xulashooyinkaaga fasallada kala duwan ee kala duwan ee aad diyaar u tahay. Waxa kale oo aad isku dari kartaa oo aad isku dari kartaa cabbirro kala duwan.

Digniinaha caadiga ah

Ku duub qoraal kasta iyo badhanka cayrinta ikhtiyaarka ah ee .alertfariinta digniinta aasaasiga ah.

Digniin! Hubinta ugu fiican ee naftaada, uma eka mid aad u wanaagsan.
  1. <div class = " feejignaan " >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. Digniin ! </strong> Hubinta ugu fiican ee naftaada, uma eka mid aad u wanaagsan.
  4. </div>

Daar badhamada

Mobile Safari iyo Mobile Opera browsers, marka lagu daro data-dismiss="alert"sifada, waxay u baahan yihiin href="#"ka saarida digniinaha marka la isticmaalayo <a>sumadda.

  1. <a href = "#" class = "close" data-dismiss = "alert" > × </a>

Haddii kale, waxa aad isticmaali kartaa shay <button>leh sifada xogta, kaas oo aanu u dooranay in aanu u samayno docsyadayada. Markaad isticmaalayso <button>, waa inaad ku dartaa type="button"ama foomamkaagu ma soo gudbin karaan.

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </button>

Ku rid ogeysiisyada JavaScript

U isticmaal digniinaha jQuery plugin si deg deg ah oo sahlan u ceyrinta ogeysiisyada.


Ikhtiyaarada

Fariimaha dhaadheer, kordhi suufka sare iyo hoose ee duubabka digniinta adiga oo ku daraya .alert-block.

Digniin!

Hubinta ugu fiican ee naftaada, uma eka mid aad u wanaagsan. Nulla vitae elit libero, a pharetra augue. Preesent commodo cursus magna, vel selerisque nisl consectetur et.

  1. <div class = "digniinta digniin-block" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <h4> Digniin! </h4>
  4. Is hubinta ugu fiican, ma tihid...
  5. </div>

Beddelka macnaha guud

Ku dar xiisado ikhtiyaari ah si aad u bedesho macnaha digniinta.

Khalad ama khatar

Alla degdeg! Waxoogaa beddel oo isku day inaad mar kale soo gudbiso.
  1. <div class = "wargelinta digniinta- khalad" >
  2. ...
  3. </div>

Guul

Si fiican ayaa loo sameeyay! Waxaad si guul leh u akhriday fariintan digniinta ah ee muhiimka ah.
  1. <div class = " feejignaan-guul" >
  2. ...
  3. </div>

Xog

Madaxa kor u qaad! Digniintan ayaa u baahan dareenkaaga, laakiin aad muhiim uma aha.
  1. <div class = "wargelinta digniin-info" >
  2. ...
  3. </div>

Tusaalooyinka iyo calaamadaynta

Aasaaska

Bar horumarka caadiga ah oo leh jaangooyo toosan.

  1. <div class = "horumar" >
  2. <div class = "bar" style = " ballaaran : 60 %; " ></ div>
  3. </div>

Xariifnimo

Wuxuu isticmaalaa gradient si uu u abuuro saamayn xariijimo ah. Lagama heli karo IE7-8

  1. <div class = "horumar-horumar-ku-soo-bax" >
  2. <div class = "bar" style = " ballac : 20 %; " ></ div>
  3. </div>

Animation

Ku dar .activesi .progress-stripedaad u dhaqaajiso xariijimaha midig ilaa bidix. Lama heli karo dhammaan noocyada IE.

  1. <div class = "horumar horu-socod-xariif firfircoon" >
  2. <div class = "bar" style = " ballac : 40 %; " ></ div>
  3. </div>

Is dulsaaran

Dhig baararka badan oo isku mid .progressah si aad isugu dhejiso.

  1. <div class = "horumar" >
  2. <div class = "bar bar-guul" style = " ballaaran : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " ballaaran : 20 %; " </div>
  4. <div class = "bar-bar-danger" style = " ballaaran : 10 %; " </div>
  5. </div>

Ikhtiyaarada

Midabada dheeriga ah

Baararka horusocodku waxay isticmaalaan qaar ka mid ah badhanka isku midka ah iyo xiisadaha digniinta ee qaababka joogtada ah.

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " ballaaran : 20 % " ></ div>
  3. </div>
  4. <div class = "horumar horumar-guul" >
  5. <div class = "bar" style = " ballaaran : 40 % " ></ div>
  6. </div>
  7. <div class = "horumarka-horumarka digniinta" >
  8. <div class = "bar" style = " ballaaran : 60 % " ></ div>
  9. </div>
  10. <div class = "horumarka horumarka-khatar" >
  11. <div class = "bar" style = " ballaaran : 80 % " ></ div>
  12. </div>

baararka xadhkaha goostay

Si la mid ah midabada adag, waxaan leenahay baararka horumarka xariijimaha kala duwan.

  1. <div class = "horumarka horumarka-info horu-socod-xariif" >
  2. <div class = "bar" style = " ballaaran : 20 % " ></ div>
  3. </div>
  4. <div class = "horumar horu-soco-guul-ku-socod-hor-u-socod" >
  5. <div class = "bar" style = " ballaaran : 40 % " ></ div>
  6. </div>
  7. <div class = "horumar horu-u-socod-digniin horu-u-socod-ku-duuban" >
  8. <div class = "bar" style = " ballaaran : 60 % " ></ div>
  9. </div>
  10. <div class = "horumar horu-u-socod-khatar-horumar-ku-dhac" >
  11. <div class = "bar" style = " ballaaran : 80 % " ></ div>
  12. </div>

Taageerada browserka

Baararka horusocodku waxay isticmaalaan gradients CSS3, kala-guurka, iyo animations si ay u gaaraan dhammaan saameyntooda. Tilmaamahan laguma taageero IE7-9 ama noocyadii hore ee Firefox.

Noocyadii hore ee Internet Explorer 10 iyo Opera 12 ma taageeraan animations.

Qaababka shayga la taaban karo ee lagu dhisayo noocyo kala duwan oo ka kooban (sida faallooyinka blogka, Tweets, iwm) kuwaas oo leh muuqaal bidix ama midig ku toosan oo ay weheliso nuxur qoraal ah.

Tusaale ahaan

Warbaahinta caadiga ah waxay ogolaataa inay sabbayso shay warbaahineed (sawir, muuqaal, maqal) bidix ama midig ee block content.

64x64

Ciwaanka warbaahinta

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

Ciwaanka warbaahinta

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

Ciwaanka warbaahinta

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 = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "madax-madaxeed" > Ciwaanka warbaahinta </h4>
  7. ...
  8.  
  9. <!-- Shay warbaahin buul leh -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Liiska warbaahinta

Iyada oo waxoogaa calaamadayn dheeraad ah, waxaad isticmaali kartaa warbaahinta liiska gudaha (waxtar u leh mawduucyada faallooyinka ama liisaska maqaallada).

  • 64x64

    Ciwaanka warbaahinta

    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

    Ciwaanka warbaahineed ee Nsted

    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

    Ciwaanka warbaahineed ee Nsted

    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

    Ciwaanka warbaahineed ee Nsted

    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

    Ciwaanka warbaahinta

    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 = "liiska warbaahinta" >
  2. <li class = "media" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "madax-madaxeed" > Ciwaanka warbaahinta </h4>
  8. ...
  9.  
  10. <!-- Shay warbaahin buul leh -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Ceelasha

Isticmaal ceelka si sahlan oo saameyn ku leh curiyaha si aad u siiso saameyn gelinta.

Bal eeg, ceel baan ku jiraa!
  1. <div class = "wanaagsan" >
  2. ...
  3. </div>

fasallada ikhtiyaariga ah

Xakamaynta suufka iyo geesaha wareegsan oo leh laba fasal wax-beddeleyaal ikhtiyaari ah.

Bal eeg, ceel baan ku jiraa!
  1. <div class = "si fiican u weyn" >
  2. ...
  3. </div>
Bal eeg, ceel baan ku jiraa!
  1. <div class = "si fiican u-yar" >
  2. ...
  3. </div>

Xir astaanta

U isticmaal astaanta guud ee u dhow si aad meesha uga saarto waxyaabaha sida moodalka iyo digniinaha.

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

Aaladaha iOS waxay u baahan yihiin href="#"dhacdooyinka gujinta haddii aad doorbidi lahayd inaad isticmaasho barroosin.

  1. <a class = "close" href = "#" > × </a>

Fasalada caawiyaha

Fasalo fudud, diirada saaraya bandhig yar ama habdhaqan.

.bidix jiid

Sabbeyn qayb bidix

  1. fasalka = "jiid-bidix"
  1. . bidix u jiid {
  2. sabayn : bidix ;
  3. }

.jiid-midig

Saxeex xubinta midig

  1. fasalka = "jiid-midig"
  1. . jiid - midig {
  2. sabayn : xaq ;
  3. }

.la aamusay

U beddel midabka curiyaha#999

  1. fasalka = "la aamusay"
  1. . la aamusay {
  2. midabka : # 999;
  3. }

. caddeeyo

Nadiifi floatshay kasta

  1. class = "clearfix"
  1. . nadiifin {
  2. * zoom : 1 ;
  3. &: ka hor ,
  4. &: kadib {
  5. bandhig : miiska ;
  6. nuxurka : "" ;
  7. }
  8. &: kadib {
  9. cad : labadaba ;
  10. }
  11. }