Bootstrap

Saldhigga CSS

Qodobbada HTML ee aasaasiga ah ayaa lagu qaabeeyey laguna xoojiyay fasallo la fidin karo.

Madaxa kor u qaad! Dukumeentiyadan waxaa loogu talagalay v2.3.2, oo aan hadda si rasmi ah loo taageerin. Fiiri nooca ugu dambeeyay ee Bootstrap!

Qoraalka qoraalka

Ciwaanka

Dhammaan cinwaannada HTML, <h1>iyada oo loo marayo <h6>waa la heli karaa.

h1. Ciwaanka 1

h2. Ciwaanka 2

h3. Ciwaanka 3

h4. Ciwaanka 4

h5. Ciwaanka 5
h6. Ciwaanka 6

nuqul jirka ah

Bootstrap's default default font-sizewaa 14px , oo line-heightleh 20px . Tani waxay khusaysaa <body>dhammaan cutubyada. Intaa waxaa dheer, <p>(paragraphs) waxay helayaan meel hoose oo kala bar ah dhererkooda xariiqda (10px sida caadiga ah).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus iyo magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies baabuurta.

Cum sociis natoque penatibus iyo magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id un mi porta gravida iyo eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Nuqulka jirka ledhka

Ka dhig cutubka mid taagan adiga oo ku daraya .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor actor. Duis mollis, est non commodo luctus.

<p class = "lead" > ... </p>

Lagu dhisay wax ka yar

Miisaanka qoraalku wuxuu ku salaysan yahay laba doorsoome oo YAR oo doorsoomayaal ah . yar : @baseFontSizeiyo @baseLineHeight. Midka koowaad waa cabbirka font-saldhigga ee la isticmaalo oo dhan kan labaadna waa dhererka xarriiqda saldhigga. Waxaan isticmaalnaa doorsoomayaashaas iyo xisaab fudud si aan u abuurno xad-dhaafka, suufka, iyo dhererka xariiqyada nooceena oo dhan iyo in ka badan. Habee iyaga oo Bootstrap la qabsiga

Xooga saar

Isticmaal calaamadaha xoogga saara ee HTML oo leh qaabab khafiif ah.

<small>

Si aad u joojiso xoojinta laynka ama baloogyada qoraalka, isticmaal summada yar.

Sadar qoraalkan waxaa loola jeedaa in loola dhaqmo sidii far wanaagsan.

<p> <small> Sadar qoraalkan waxa loola jeedaa in loola dhaqmo sidii far wanaagsan. </small> </p>

Dhiirran

Si aad xoogga u saarto qayb qoraal ah oo miisaankeedu ka culus yahay.

Qaybtan soo socota ee qoraalka waxa loo tarjumay qoraal geesinimo leh .

<strong> oo loo turjumay qoraal geesinimo leh </strong>

Farta farcan

Si aad xoogga u saarto qayb yar oo qoraal ah oo leh fartaag.

Qaybtan soo socota ee qoraalka waxa loo turjumay sidii qoraal farta lagu fiiqay .

<em> oo loo turjumay sida qoraal farta lagu fiiqay </em>

Madaxa kor u qaad!Dareen xor u ah isticmaalka <b>iyo <i>HTML5. <b>waxaa loola jeedaa in lagu muujiyo ereyada ama odhaahyada iyada oo aan la gudbin muhiimad dheeraad ah halka <i>ay u badan tahay cod, ereyo farsamo, iwm.

Fasalada toosinta

Si fudud qoraalka ugu toosi qaybaha leh fasalada toosinta qoraalka.

Qoraalka bidix ku toosan.

Qoraalka dhexda toosan.

Qoraal toosan.

  1. <p class = "text-left" > Qoraalka bidix ku toosan. </p> 
  2. <p class = "text-center" > Qoraalka dhexda toosan. </p> 
  3. <p class = "text-right" > Qoraal toosan. </p>

Fasallada xoogga la saaray

U gudbi macnaha midab leh oo muggeed oo xooga saaraya fasalada utility.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "la aamusay" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "digniin qoraal ah" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-guul" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Soo gaabinta

Hirgelinta habaysan ee curiyaha HTML ee <abbr>soo gaabinta iyo gaabinnada si loo muujiyo nooca la fidiyay ee dul heehaabaya. Soo gaabinta sifada leh titleayaa leh xudduud hoose oo dhibco khafiif ah iyo calaamad caawimo dul heehaabaysa, taasoo bixisa macnaha dheeraadka ah ee dul heehaabaya.

<abbr>

Qoraalka la balaariyay ee duleel dheer ee soo gaabinta, ku dar titlesifada.

Soo gaabinta ereyga sifo waa attr .

<abbr title = "sifo" > attr </abbr>

<abbr class="initialism">

Ku dar .initialismsoo gaabinta cabbirka farta wax yar ka yar.

HTML waa waxa ugu wanaagsan tan iyo rootiga la jarjaray.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Cinwaanada

U soo bandhig macluumaadka xiriirka awoowaha kuugu dhow ama dhammaan shaqada oo dhan.

<address>

Ku ilaali qaabaynta adiga oo ku dhameeya dhammaan sadarrada <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Magaca buuxa
[email protected] 
  1. <cinwaan>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telefoon" > P: </abbr> (123) 456-7890 
  6. </ address>
  7.  
  8. <cinwaan>
  9.   <strong> Magaca buuxa </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </ address>

Xigashooyinka

Si aad u soo xiganayso blocks of content ka il kale oo ka mid ah dukumeentigaaga.

blockquote ee caadiga ah

Ku duub HTML<blockquote> kasta sida xigashada. Xigashooyinka tooska ah waxaan kugula talineynaa a .<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si toos ah u eegaya.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si xun u saameeya. </p>
  3. </blockquote>

Ikhtiyaarada Blockquote

Qaabka iyo nuxurka ayaa isbeddela ee kala duwanaanshiyaha fudud ee blockquote caadiga ah.

Magacaabida isha

Ku dar <small>sumad si aad u aqoonsato isha. Ku duub magaca isha shaqada <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si toos ah u eegaya.

Qof caan ku ah Ciwaanka Isha 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si xun u saameeya. </p>
  3.   <small> Qof caan ah <cite title = "Cwaanka Isha" > Ciwaanka isha </cite></small> 
  4. </blockquote>

Bandhigyo kale

U isticmaal .pull-rightsabbaynaysa, oo toosan blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si toos ah u eegaya.

Qof caan ku ah Ciwaanka Isha 
  1. <blockquote class = "jiid-right" > 
  2.   ...
  3. </blockquote>

Liisaska

Aan la dalban

Liiska walxaha aanu amarku si cad u khusayn.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Dalbaday

Liiska alaabta uu dalabku si cad u khuseeya.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Aan habayn

Ka saar suufka caadiga ah list-styleiyo bidix ee shayada liiska (carruurta degdega ah kaliya).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "aan qaab lahayn" > 
  2.   <li> ... </li>
  3. </ul>

Inline

Geli dhammaan shayada liiska hal xariiq oo leh inline-blocksuuf khafiif ah.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "line" > 
  2.   <li> ... </li>
  3. </ul>

Sharaxaada

Liiska ereyada leh sharraxaaddooda la xidhiidha.

Liiska sharraxaadda
Liiska sharraxaadda ayaa ku habboon qeexida ereyada.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id un mi porta gravida iyo eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Sharaxaad toosan

U samee shuruudaha iyo sharraxaadaha <dl>safka dhinac-dhinac ah.

Liiska sharraxaadda
Liiska sharraxaadda ayaa ku habboon qeexida ereyada.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id un mi porta gravida iyo eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Madaxa kor u qaad!Liisaska sharraxaadda tooska ah waxay gooyn doonaan ereyada aad u dheer inay ku habboon yihiin hagaajinta tiirka bidix text-overflow. Goobaha daawashada ee dhuuban, waxay u bedeli doonaan qaabka la isku dhejiyay ee caadiga ah.

Koodhka

Inline

Ku duub godadka koodka dhexda ah ee <code>.

Tusaale ahaan, <section>waa in lagu duuduubaa sida khadadka. 
  1. Tusaale ahaan , <code> & lt ; qaybta & gt ;</ code > waa in lagu duuduubaa sida khad .

block aasaasiga ah

U isticmaal <pre>khadadka koodka badan. Hubi inaad ka baxsato xagal kasta oo ku jira koodka si sax ah loo sameeyo.

<p> Tusaalaha qoraalka halkan...</p>
  1. <pre>
  2.   <p> Tusaalaha qoraalka halkan...</p>
  3. </pre>

Madaxa kor u qaad!Hubi inaad ku hayso koodka <pre>summada sida ugu dhow bidixda intii suurtogal ah; waxay soo saari doontaa dhammaan tabsyada.

Waxaad si ikhtiyaari ah ugu dari kartaa .pre-scrollablefasalka dejin doona dhererka ugu badan ee 350px oo bixin doona y-axis-gaaban.

Miisaska

Qaababka asalka ah

Habaynta aasaasiga ah — suufka iftiinka iyo kala qaybinta tooska ah - ku dar fasalka saldhiga .tablemid kasta <table>.

# Magaca koowaad Magaca Dambe Magaca isticmaale
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @twitter 
  1. < class class = "miiska" > 
  2.   …
  3. </miiska>

fasallada ikhtiyaariga ah

Ku dar mid kasta oo ka mid ah fasallada soo socda fasalka .tableaasaasiga ah.

.table-striped

Wuxuu ku daraa xariijimo zebra saf kasta oo miiska dhexdiisa ah <tbody>iyadoo la sii marinayo :nth-childxulashada CSS (kuma jiraan IE7-8).

# Magaca koowaad Magaca Dambe Magaca isticmaale
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @twitter 
  1. < class class = " miis-xariif ah" > 
  2.   …
  3. </miiska>

.table-bordered

Ku dar soohdin iyo geeso wareegsan miiska.

# Magaca koowaad Magaca Dambe Magaca isticmaale
1 Calaamadee Otto @mdo
Calaamadee Otto @getbootstrap
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter 
  1. < class class = "miis xuduudeed" > 
  2.   …
  3. </miiska>

.table-hover

U ogolow gobolka dul heehaabaya safafka miiska gudaha a <tbody>.

# Magaca koowaad Magaca Dambe Magaca isticmaale
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter 
  1. < class class = "miiska-kormeereedka" > 
  2.   …
  3. </miiska>

.table-condensed

Wuxuu ka dhigayaa miisaska kuwo is haysta isagoo kala badh u jaraya suufka unugga.

# Magaca koowaad Magaca Dambe Magaca isticmaale
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter 
  1. < class class = "miiska-koondensed" > 
  2.   …
  3. </miiska>

Fasalada safka ikhtiyaariga ah

Isticmaal fasallada macnaha guud si aad u midabayso safafka miiska.

Fasalka Sharaxaada
.success Waxay tuseysaa fal guul ah ama mid togan.
.error Waxay muujinaysaa fal xun ama khatar ah.
.warning Waxay muujinaysaa digniin u baahan in laga fiirsado.
.info Loo isticmaalo beddelka qaababka caadiga ah.
# Alaabta Lacag bixinta Xaalada
1 Qaaxada - bishiiba 01/04/2012 La ansixiyay
2 Qaaxada - bishiiba 02/04/2012 diiday
3 Qaaxada - bishiiba 03/04/2012 La sugayo
4 Qaaxada - bishiiba 04/04/2012 Soo wac si aad u xaqiijiso 
  1. ...
  2.   < tr class = "guul" >
  3.     <td> 1 < /td>
  4.     <td>TB - Bishii</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>la ogolaaday</ td >
  7.   </ tr >
  8. ...

Calaamadaynta miiska la taageeray

Liiska HTML miiska miiska la taageeray iyo sida ay tahay in loo isticmaalo.

Tag Sharaxaada
<table> Cutubka duubista ee muujinta xogta qaab tabo ah
<thead> Cunsurka weelka ee safafka madaxa miiska ( <tr>) si loo calaamadiyo tiirarka miiska
<tbody> Cunsurka weelka ee safafka miiska ( <tr>) ee jidhka miiska
<tr> Cunsurka weelka ee unugyada miiska ( <td>ama <th>) ee ka muuqda hal saf
<td> Unugga miiska caadiga ah
<th> Unugga miiska gaarka ah ee tiirka (ama safka, iyadoo ku xidhan baaxadda iyo meelaynta) sumadaha
<caption> Sharaxaadda ama soo koobidda waxa miiska u yaal, gaar ahaan faa'iido u leh akhristayaasha shaashadda 
  1. <miiska>
  2.   <caption> ... </caption>
  3.   <madaxa>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </text>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </miiska>

Foomamka

Qaababka asalka ah

Koontaroolada foomka shakhsi ahaaneed waxay helayaan habayn, laakiin iyada oo aan loo baahnayn fasalka aasaasiga ah ee <form>isbeddelada waaweyn ee calaamadaynta. Natiijooyinka ku xardhan, sumadaha bidix ku toosan ee dusha sare ee kontaroolada foomka.

Halyeyga Tusaalaha qoraalka caawinta heerka xannibaadda halkan. 
  1. <form>
  2.   <fieldset>
  3.     Halyeey </ legend >
  4.     <label> Magaca summada </label>
  5.     <input type = "text" placeholder = "wax ku qor..." >  
  6.     <span class = "help-block" > Tusaalaha qoraalka caawinta heerka block. </span> 
  7.     < class calaamad = "checkbox" > 
  8.       <input type = "checkbox" > I hubi 
  9.     </label>
  10.     <button type = "gudbi" class = "btn" > Gudbi </button>  
  11.   </fieldset>
  12. </form>

Qaabab ikhtiyaari ah

Waxaa ku jira Bootstrap saddex qaab oo ikhtiyaari ah oo loogu talagalay kiisaska isticmaalka caadiga ah.

Foomka raadinta

Ku dar .form-searchfoomka iyo .search-queryka si aad <input>u hesho qoraal dheeri ah oo wareegsan.

  1. < class form = "form-search" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Raadi </button>  
  4. </form>

Foomka khadka

Ku dar .form-inlinesummadaha bidix ku toosan iyo kontaroolada-inline-block ee qaabeynta is haysta.

  1. < class form = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Email" >   
  3.   <input type = "password" class = "input-small" meeleeyaha = "Password" >   
  4.   < class calaamad = "checkbox" > 
  5.     <input type = "checkbox" > I xasuuso 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Soo gal </button>  
  8. </form>

Qaab toosan

Calaamadaha midig toosi oo u sabbayso bidixda si aad uga dhigto inay ka soo muuqdaan isla xariiqda kontaroolada. Waxay u baahan tahay isbeddelada calaamadaynta ugu badan ee qaabka caadiga ah:

  • Ku dar .form-horizontalfoomka
  • Ku duub calaamadaha iyo xakamaynta gudaha.control-group
  • Ku dar .control-labelsummada
  • Ku duub kontaroolada la xidhiidha .controlstoosinta saxda ah
  1. < class form = "form-horizontal" > 
  2.   <div class = "koontarool-koox" > 
  3.     <label class = "control-label" ee = "inputEmail" > iimaylka </label>  
  4.     <div class = "koontaroolada" > 
  5.       <input type = "text" id = "inputEmail" placeholder = " Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "koontarool-koox" > 
  9.     <label class = "control-label" ee = "inputPassword" > Password </label>  
  10.     <div class = "koontaroolada" > 
  11.       <input type = "password" id = "inputPassword" meeleeyaha = " Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "koontarool-koox" > 
  15.     <div class = "koontaroolada" > 
  16.       < class calaamad = "checkbox" > 
  17.         <input type = "checkbox" > I xasuuso 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Soo gal </button>  
  20.     </div>
  21.   </div>
  22. </form>

Kontaroolada foomka la taageeray

Tusaalooyinka kontaroolada qaabka caadiga ah ee lagu taageeray qaabaynta qaabka tusaalaha.

Gelida

Kantaroolka foomka ugu caansan, meelaha wax gelinta ku salaysan. Waxa ku jira taageerada dhammaan noocyada HTML5: qoraalka, erayga sirta ah, wakhtiga taariikhda, taariikhda-maxali ah, taariikhda, bisha, wakhtiga, toddobaadka, lambarka, iimaylka, url, raadinta, tel, iyo midabka.

Wuxuu u baahan yahay isticmaalka cayiman typemar kasta.

  1. < nooca wax-galka = "text" placeholder = "Text input" >

Meesha qoraalka

Kontoroolka foomka kaas oo taageera sadar badan oo qoraal ah. Beddel rowssifada marka loo baahdo.

  1. <textarea rows = " 3" > </textarea>

Sanduuqyada hubinta iyo raadiyaha

Sanduuqyada hubinta waxaa loogu talagalay in lagu xusho hal ama dhowr ikhtiyaar oo liiska ku jira halka raadiyayaashu ay door ka yihiin hal doorasho oo badan.

Default (la dulsaaray)


  1. < class calaamad = "checkbox" > 
  2.   < nooca galitaanka = "checkbox" qiimaha = "" >  
  3.   Ikhtiyaarka koowaad waa kan iyo taas-hubi inaad ku darto sababta ay u weyn tahay
  4. </label>
  5.  
  6. < class calaamad = "raadiyaha" > 
  7.   < nooc wax gelin ah = "raadiyaha" magaca = "optionsRadios" id = "optionsRadios1" qiimaha = "ikhtiyaarka1" la hubiyay >     
  8.   Ikhtiyaarka koowaad waa kan iyo taas-hubi inaad ku darto sababta ay u weyn tahay
  9. </label>
  10. < class calaamad = "raadiyaha" > 
  11.   < nooc wax gelin ah = "raadiyaha" magaca = "optionsRadios" id = "optionsRadios2" qiimaha = "opption2" >    
  12.   Doorashada labaad waxay noqon kartaa shay kale oo doorashadu waxay dooranaysaa ikhtiyaarka koowaad
  13. </label>

Sanduuqyada jeeg-garaynta

Ku dar .inlinefasalka taxane sanduuqyo ama raadiyowyo kontaroolo waxay ku muuqdaan isla xariiqda.

  1. < class calamada = "checkbox inline" > 
  2.   < nooc wax gelin ah = "checkbox" id = "inlineCheckbox1" qiimaha = "option1" > 1   
  3. </label>
  4. < class calamada = "checkbox inline" > 
  5.   < nooc wax gelin ah = "checkbox" id = "inlineCheckbox2" qiimaha = "option2" > 2   
  6. </label>
  7. < class calamada = "checkbox inline" > 
  8.   < nooc wax gelin ah = "checkbox" id = "inlineCheckbox3" qiimaha = "option3" > 3   
  9. </label>

Dooro

Isticmaal ikhtiyaarka caadiga ah ama cadee a multiple="multiple"si aad u muujiso doorashooyin badan hal mar.


  1. <dooro>
  2.   <ikhtiyaar> 1 </ikhtiyaarka>
  3.   <ikhtiyaar> 2 </ikhtiyaarka>
  4.   <ikhtiyaar> 3 </ikhtiyaarka>
  5.   <ikhtiyaar> 4 </ikhtiyaarka>
  6.   <ikhtiyaar> 5 </ikhtiyaarka>
  7. </select>
  8.  
  9. <dooro badan = "badan" > 
  10.   <ikhtiyaar> 1 </ikhtiyaarka>
  11.   <ikhtiyaar> 2 </ikhtiyaarka>
  12.   <ikhtiyaar> 3 </ikhtiyaarka>
  13.   <ikhtiyaar> 4 </ikhtiyaarka>
  14.   <ikhtiyaar> 5 </ikhtiyaarka>
  15. </select>

Kordhinta xakamaynta foomka

Ku darista kontaroolada browserka ee jira, Bootstrap waxaa ku jira qaybo kale oo faa'iido leh.

Wax gelinta la sii diyaariyay iyo ku lifaaqan

Ku dar qoraal ama badhamada ka hor ama ka dib gelinta qoraalka ku salaysan. Ogow in selectcanaasiirta aan halkan laga taageerin.

Doorashooyinka caadiga ah

Ku duub mid .add-onka inputmid ah laba fasal si aad u diyaarisid ama ugu dhejiso qoraalka gelinta.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "ad-on" > @ </span> 
  3.   < class input = "span2" id = "prependedInput" nooca = "text" meeleeyaha = "Magaca isticmaalaha" >    
  4. </div>
  5. <div class = "Input-append" > 
  6.   < class input = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "ad-on" > .00 </span> 
  8. </div>

Isku darka

Isticmaal labada fasal iyo laba tusaale oo ah .add-onsi aad u diyaarisid oo ugu dhejiso wax gelinta.

$ .00 
  1. <div class = "Input-prepend input-append" > 
  2.   <span class = "ad-on" > $ </span> 
  3.   < class input = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "ad-on" > .00 </span> 
  5. </div>

Badhamada halkii qoraal

Halkii aad ka qori <span>lahayd qoraal, isticmaal a .btnsi aad badhan (ama laba) ugu dhejiso gelinta.

  1. <div class = "Input-append" > 
  2.   < class input = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Tag! </button>  
  4. </div>
  1. <div class = "Input-append" > 
  2.   < class input = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Raadi </button>  
  4.   <button class = "btn" type = "button" > Xulasho </button>  
  5. </div>

Hoos u dhaca badhanka

  1. <div class = "Input-append" > 
  2.   < class input = "span2" id = "appendedDropdownButton " nooca = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "hoos u dhac" >  
  5.       Ficil
  6.       <span class = "daryeel" </span> 
  7.     </button>
  8.     <ul class = "Dropdown-menu" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "hoos u dhac" >  
  4.       Ficil
  5.       <span class = "daryeel" </span> 
  6.     </button>
  7.     <ul class = "Dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < class input = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "Input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "hoos u dhac" >  
  4.       Ficil
  5.       <span class = "daryeel" </span> 
  6.     </button>
  7.     <ul class = "Dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < class input = "span2" id = "appendedPrependedDropdownButton " nooca = "qoraalka" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "hoos u dhac" >  
  14.       Ficil
  15.       <span class = "daryeel" </span> 
  16.     </button>
  17.     <ul class = "Dropdown-menu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Kooxaha hoos u dhaca oo kala qaybsan

  1. <form>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     < nooca galitaanka = "qoraalka" > 
  5.   </div>
  6.   <div class = "Input-append" > 
  7.     < nooca galitaanka = "qoraalka" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Foomka raadinta

  1. < class form = "form-search" > 
  2.   <div class = "Input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Raadi </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Raadi </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Xakamaynta cabbirka

Isticmaal fasalo qiyaaseed qaraabo ah sida .input-largeama ku dhig gelintaada cabbirada tiirarka xajmiyeedka adoo isticmaalaya .span*fasalo.

Xirmooyinka heerka xannibaadda

Ka dhig mid kasta <input>ama <textarea>curiye u dhaqmo sida curiyaha heerka block.

  1. < class -input = "input-block-level" type = "text" placeholder = ".input-block-level" >

Cabbirka qaraabada

  1. < class -input = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. < class -input = "input-small" type = "text" placeholder = ".input-small" >   
  3. < class -input = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. < class -input = "input-large" type = "text" placeholder = ".input-large" >   
  5. < class -input = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. < class class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Madaxa kor u qaad!Noocyada mustaqbalka, waxaanu wax ka beddeli doonaa isticmaalka fasalladan soo-gelinta qaraabada ah si aan u dhigno cabbirrada badhanka. Tusaale ahaan, .input-largewaxay kordhin doontaa suufka iyo cabbirka farta wax gelinta.

Cabbirka grid

U adeegso .span1wax .span12-soo-gelinta kuwaas oo ku habboon cabbirka tiirarka xajmiyeedka.

  1. < class input = "span1" type = "text" placeholder = ".span1" >   
  2. < class input = "span2" type = "text" placeholder = ".span2" >   
  3. < class input = "span3" type = "text" placeholder = ".span3" >   
  4. < class = "span1" > 
  5.   ...
  6. </select>
  7. < class = "span2" > 
  8.   ...
  9. </select>
  10. < class = "span3" > 
  11.   ...
  12. </select>

Waxyaabo badan oo la geli karo xariiq kasta, isticmaal .controls-rowfasalka wax ka beddelka fogeynta habboon . Waxay sabbaynaysaa agabka si ay u burburto meel-cad, waxay dejisaa soohdimaha saxda ah, oo ay nadiifiso sabaynta.

  1. <div class = "koontaroolada" > 
  2.   < class input = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "koontaroolada-saafka" > 
  5.   < class input = "span4" type = "text" placeholder = ".span4" >   
  6.   < class input = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Waxyaalaha aan la daabicin karin

U soo bandhig xogta qaab aan la tafatirin karin adiga oo aan isticmaalin foomka calaamadaynta dhabta ah.

Qaar ayaa halkan ku qiimeeya 
  1. <span class = "input-xlarge uneditable-input" > Qiimaha qaar halkan </span>

Foomka falalka

Ku dhammee foom leh koox ficillo ah (buttons). Marka la geliyo gudaha a .form-actions, badhamada si toos ah ayay u geli doonaan si ay ula socdaan kontaroolada foomka.

  1. <div class = "form-factions" > 
  2.   <button type = "gudbi" class = "btn btn-primary" > Keydi isbeddelada </button>  
  3.   <button type = "button" class = "btn" > Jooji </button>  
  4. </div>

Qoraalka caawinta

Inline iyo xannibaad heerka taageerada qoraalka caawinta ee ka muuqda agagaarka kontaroolada foomka.

Caawinta khadka

Qoraal caawimo khadka ah 
  1. <input type = "text" ><span class = "help-inline" > Qoraalka caawinta khadka </span>

Caawinta xannibi

Qoraal dheer oo caawimo ah oo ku jaba khad cusub oo laga yaabo inuu dhaafo hal sadar. 
  1. <input type = "text" ><span class = "help-block" > Qoraal dheer oo caawinaad ah oo ku jaba xariiq cusub oo laga yaabo inuu dhaafo hal sadar. </span>

Xakamaynta foomka

Sii jawaab celin isticmaalayaasha ama booqdayaasha leh gobolada jawaab celinta aasaasiga ah ee ku saabsan kontaroolada foomamka iyo sumadaha.

Diirada galitaanka

Waxaan meesha ka saarna outlinehababka caadiga ah ee kontaroolada foomamka oo aan box-shadowku dabaqno booskeeda :focus.

  1. < class input = "input-xlarge" id = "focusedInput" nooca = "text" qiimaha = "Tani waxay diiradda saaraysaa..." >

Gelin aan sax ahayn

Qaabka wax soo gelinta iyadoo la adeegsanayo browserka caadiga ah ee :invalid. Sheeg a type, ku dar requiredsifada haddii goobta aysan ahayn mid ikhtiyaari ah, iyo (haddii ay khuseyso) sheeg a pattern.

Tani lagama heli karo noocyada Internet Explorer 7-9 sababtoo ah taageero la'aanta xulashada CSS ee been abuurka ah.

  1. < class input = "span3" type = "email" loo baahan yahay >

Gelida naafada

Ku dar disabledsifada wax gelinta si aad uga hortagto gelinta isticmaalaha oo aad kiciso muuqaal ka duwan.

  1. < class input = "input-xlarge" id = "disabledInput" nooca = "text" placeholder = "halkan wax ku gelinta naafo..." naafo >

Gobolada ansaxinta

Bootstrap waxaa ku jira qaababka ansaxinta qaladka, digniinta, macluumaadka, iyo fariimaha guusha. Si aad u isticmaasho, ku dar fasalka ku habboon agagaarka .control-group.

Waxaa laga yaabaa inay wax khaldameen
Fadlan sax qaladka
Magaca isticmaalaha waa la qaatay
Woohoo! 
  1. <div class = "digniin koox-koontarool" > 
  2.   <label class = "control-label" ee = "inputWarning" > Gelin digniin ah </label>  
  3.   <div class = "koontaroolada" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Waxaa laga yaabaa inay wax khaldameen </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "xakamaynta-koox khalad ah" > 
  10.   <label class = "control-label" ee = "inputError" > Gelin qalad leh </label>  
  11.   <div class = "koontaroolada" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Fadlan sax qaladka </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "xakamaynta-kooxda macluumaadka" > 
  18.   <label class = "control-label" ee = "inputInfo" > Gelin xog leh </label>  
  19.   <div class = "koontaroolada" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Magaca isticmaalaha waa la qaatay </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "guusha kooxda xakamaynta" > 
  26.   <label class = "control-label" ee = "inputSuccess" > Gelin guul leh </label>  
  27.   <div class = "koontaroolada" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Badhamada

Badhamada asalka ah

Hababka badhanka waxaa lagu dabaqi karaa wax kasta iyadoo .btnfasalka lagu dabaqay. Si kastaba ha ahaatee, sida caadiga ah waxaad u baahan doontaa inaad kuwan ku dabaqdo oo keliya <a>iyo <button>walxaha sida ugu wanaagsan ee loo soo bandhigo.

Badhanka class="" Sharaxaada
btn Badhanka cawlan ee caadiga ah oo leh gradient
btn btn-primary Waxay bixisaa miisaan muuqaal oo dheeri ah oo tilmaamaya ficilka aasaasiga ah ee badhamada
btn btn-info Loo isticmaalo beddelka qaababka caadiga ah
btn btn-success Waxay tuseysaa fal guul ah ama mid togan
btn btn-warning Waxay tilmaamaysaa in taxaddar laga yeesho tallaabadan
btn btn-danger Waxay muujinaysaa fal xun ama khatar ah
btn btn-inverse Badhanka cawlan ee kale, oo aan ku xidhnayn fal macne ah ama isticmaal
btn btn-link Xooga saar badhan adiga oo ka dhigaya mid u eg iskuxir adigoo ilaalinaya habdhaqanka badhanka

Iswaafajinta browserka

IE9 kuma gooyo jaangooyooyinka asalka ah ee geesaha wareegsan, markaa waan ka saarnaa. La xidhiidha, IE9 waxay jank ka dhigtaa curiyeyaasha naafada buttonah, iyagoo ka dhigaya qoraal cawlan leh hadh-qoraal xun oo aynaan hagaajin karin.

Cabbirrada badhanka

Ma jeceshahay badhamada waaweyn ama ka yar? Ku dar .btn-large, .btn-small, ama .btn-minicabbirro dheeraad ah.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > badhan weyn </button>  
  3.   <button class = "btn btn-large" type = "button" > Badhan weyn </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Badhanka asalka ah </button>  
  7.   <button class = "btn" type = "button" > Badhanka asalka ah </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Badhan yar </button>  
  11.   <button class = "btn btn-small" type = "button" > Badhan yar </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Badhan yar </button>  
  15.   <button class = "btn btn-mini" type = "button" > Badhan yar </button>  
  16. </p>

Abuur badhamada heerka xannibaadda—kuwa ballaca buuxa ee waalidka—adigoo ku daraya .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > batoonka heerka xanniba </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Badhanka heerka xanniba </button>

Gobolka naafada

Ka dhig badhamada kuwo aan la gujin karin adiga oo dib u soo celinaya 50%.

Curiyaha barroosinka

Ku dar .disabledfasalka <a>badhamada.

Xiriirinta aasaasiga ah Xiriirinta 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Xiriirinta aasaasiga ah </a>  
  2. <a href = "#" class = "btn btn-large disabled"> Link </a>

Madaxa kor u qaad!Waxaan u isticmaalnaa .disabledsida fasalka utility halkan, oo la mid ah .activefasalka caadiga ah, sidaas darteed horgale looma baahna. Sidoo kale, fasalkani waxa kaliya ee loogu talagalay bilicda; waa inaad isticmaashaa JavaScript-ka caadiga ah si aad u joojiso isku xirka halkan.

Qaybta badhanka

Ku dar disabledsifada <button>badhamada

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Badhanka koowaad </button>   
  2. <button type = "button" class = "btn btn-large" naafo > Button </button>

Hal fasal, tagsyo badan

Isticmaal .btnfasalka <a>, <button>, ama <input>element.

Xiriirinta 
  1. <a class = "btn" href = "" > Linkiga </a>  
  2. <button class = "btn" type = "gudbi" > badhanka </button>  
  3. < class class = "btn" type = "button" value = "Input" >   
  4. < class input = "btn" nooca = "gubi " qiimaha = " Gudbi " >

Sida dhaqanka ugu fiican, isku day inaad ku wajahdo cunsurka macnaha guud si aad u hubiso isu dhigma samaynta browser-ka. Haddii aad leedahay input, isticmaal <input type="submit">badhanka.

Sawirada

Ku dar xiisado <img>curiye si aad si fudud ugu qaabisid sawirada mashruuc kasta.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." fasalka = "img-polaroid" >

Madaxa kor u qaad! .img-roundedoo .img-circleha ka shaqayn IE7-8 border-radiustaageero la'aan awgeed.

Astaamaha Glyphicons _

Icon glyphs

140 astaamood oo qaab sprite ah, oo lagu heli karo cawl madow (default) iyo caddaan, oo ay bixiso Glyphicons .

  • icon-glaas
  • icon-music
  • icon-raadinta
  • icon-baqshad
  • icon-wadnaha
  • icon-xiddig
  • icon-xiddig-madhan
  • icon-user
  • icon-filim
  • icon-th-weyn
  • icon-th
  • icon-th-liiska
  • icon-ok
  • icon-saar
  • icon-soo-jiid-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-qashin
  • icon-guriga
  • icon-faylka
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-soo dejiso
  • icon-upload
  • icon-inbox
  • icon-ciyaar-goobo
  • icon-ku celi
  • icon-cusbooneysi
  • icon-liiska-alt
  • icon-quful
  • icon-calan
  • icon-madax-madaxeed
  • icon-mugga-off
  • icon-mugga-hoos
  • icon-mugga-sare
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-buug
  • icon-bookmark
  • icon-daabacan
  • icon-camera
  • icon-font
  • icon-dhirran
  • icon-italic
  • icon-qoraalka-dhererka
  • icon-qoraalka-ballaadhka
  • icon-align-bidix
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-liiska
  • icon-jid-bidix
  • icon-indent-midig
  • icon-facetime-video
  • icon-sawir
  • icon-qalin
  • icon-map-calaamadeeyaha
  • icon-hagaajin
  • icon-midab
  • icon-wax ka beddel
  • icon-wadaag
  • icon-jeeg
  • icon-dhaqdhaqaaq
  • icon-tallaabo-dib u dhac
  • icon-dhakhso-dib u dhac
  • icon-dib u dhac
  • icon-ciyaar
  • icon-hakin
  • icon-joojin
  • icon-hore
  • icon-dhakhso-hor-u-socod
  • icon-tallaabo-hore
  • icon-saar
  • icon-chevron-bidix
  • icon-chevron-midig
  • icon-plus-calaamad
  • icon-jaro-calaamad
  • calaamad-saar-calaamad
  • icon-ok-calaamad
  • icon-su'aal-calaamad
  • icon-info-calaamadaha
  • icon-screenshot
  • icon-saar-goobo
  • icon-ok-goobo
  • icon-ban-goobo
  • icon-falaar-bidix
  • icon-falaar-midig
  • icon-falaar-kor
  • icon-falaar-hoos
  • icon-share-alt
  • icon-cabbir-buuxa
  • icon-cabbir-yar
  • icon-plus
  • icon-laga jaray
  • icon-asterisk
  • icon-exclamation-calaamad
  • icon-hadiyad
  • icon-caleen
  • icon-dabka
  • icon-il-furan
  • icon-indho-dhow
  • icon-digniin-calaamad
  • icon-diyaarad
  • icon-kalandarka
  • icon- random
  • icon-faallo
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-kaartooyo
  • icon-folder-ku dhow
  • icon-folder-furan
  • icon-cabbir-toos ah
  • icon-cabbir-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-gambaleelka
  • icon-shahaadad
  • icon-suulka- kor
  • icon-suul-hoos
  • icon-gacan-midig
  • icon-gacan-bidix
  • icon-gacan-up
  • icon-gacan-hoos
  • icon-goobo- falaar-midig
  • icon-goobo- fallaadho-bidix
  • icon-goobo- falaarta-sare
  • icon-goobo- falaar-hoos
  • icon-globe
  • fur-fure
  • icon-hawlaha
  • icon-shaandhaynta
  • icon-koob yar
  • icon-shaashadda

Tilmaamaha Glyphicons

Glyphicons Halflings caadiyan bilaash laguma heli karo, laakiin qabanqaabada u dhaxaysa Bootstrap iyo hal-abuurayaasha Glyphicons ayaa tan ka dhigay wax kharash ah adiga horumariye ahaan. Mahadsanid ahaan, waxaan ku weydiineynaa inaad ku darto xiriiriyaha ikhtiyaariga ah ee dib loogu celinayo Glyphicons mar kasta oo la taaban karo.

Sida loo isticmaalo

Dhammaan calaamadaha waxay u baahan yihiin <i>sumad leh fasal gaar ah, oo lagu horgaibay icon-. Si aad u isticmaasho, dhig koodka soo socda meel kasta:

  1. <i class = "icon-search" ></i>

Waxa kale oo jira habab diyaar u ah calaamadaha rogan (caddaan), oo lagu diyaariyey hal fasal oo dheeraad ah. Waxaan si gaar ah u dhaqan galin doonaa fasalkan heehaabaynta iyo gobolada firfircoon ee isku xirka nav iyo dropdown.

  1. <i class = "icon-search icon-white" ></i>

Madaxa kor u qaad!Markaad isticmaalayso xadhkaha qoraalka, sida badhamada ama isku xidhka nav, hubi inaad ka tagto meel banaan ka dib <i>sumadda si aad u kala fogaato.

Tusaalooyinka astaanta

U isticmaal badhamada, kooxaha badhanka si aad u heshid bar, navigation, ama foomka la sii diyaariyay.

Badhamada

Kooxda badhanka ee badhanka aaladaha
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" </i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" </i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" </i></a>   
  7.   </div>
  8. </div>
Hoos u dhigida kooxda badhanka
Isticmaale 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Isticmaale </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "daryeel" ></span></a>    
  4.   <ul class = "Dropdown-menu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Wax ka beddel </a> </li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Tirtir </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> mamnuuc </a> </li>  
  8.     <li class = "qaybiye" </li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Samee maamulka </a></li>  
  10.   </ul>
  11. </div>
Cabbirrada badhanka
Xiddig Xiddig Xiddig 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Xiddigta </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Xiddigta </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Xiddigta </a>

Navigation

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Guriga </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Library </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Codsiyada </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Kala duwan </a></li>  
  6. </ul>

Goobaha foomka

  1. <div class = "koontarool-koox" > 
  2.   <label class = "control-label" ee = "inputIcon" > Ciwaanka iimaylka </label>  
  3.   <div class = "koontaroolada" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-bashqada" </i></span>  
  6.       < class input = "span2" id = "inputIcon" nooca = "qoraalka" >   
  7.     </div>
  8.   </div>
  9. </div>