Bootstrap

CSS ipilẹ

Awọn eroja HTML pataki ti ṣe aṣa ati imudara pẹlu awọn kilasi extensible.

Iwe kikọ

Awọn akọle

Gbogbo awọn akọle HTML, <h1>nipasẹ <h6>wa.

h1. Akọle 1

h2. Akole 2

h3. Akole 3

h4. Akole 4

h5. Akole 5
h6. Akole 6

Ẹda ara

Aiyipada agbaye ti Bootstrap font-sizejẹ 14px , pẹlu kan line-heightti 20px . Eyi ni a lo si <body>ati gbogbo awọn paragira. Ni afikun, <p>(awọn paragira) gba ala isalẹ ti idaji ila-giga wọn (10px nipasẹ aiyipada).

Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla ti kii metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla ti kii metus auctor fringilla.

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

<p> ... </p>

Daakọ ara asiwaju

Ṣe paragira kan duro jade nipa fifi kun .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est ti kii commodo luctus.

<p kilasi = "asiwaju" > ... </p>

Ti a ṣe pẹlu Kere

Iwọn ikọwe da lori awọn oniyipada KERE meji ni awọn oniyipada.less : @baseFontSizeati @baseLineHeight. Ni igba akọkọ ti ni awọn mimọ-iwọn font lo jakejado ati awọn keji ni awọn mimọ ila-giga. A lo awọn oniyipada wọnyẹn ati awọn iṣiro ti o rọrun lati ṣẹda awọn ala, awọn paddings, ati awọn giga laini ti gbogbo iru wa ati diẹ sii. Ṣe akanṣe wọn ati awọn aṣamubadọgba Bootstrap.

Itẹnumọ

Ṣe lilo awọn afi tcnu aiyipada HTML pẹlu awọn aza iwuwo fẹẹrẹ.

<small>

Fun tẹnumọ opopo tabi awọn bulọọki ọrọ, lo aami kekere naa.

Laini ọrọ yii jẹ itumọ lati ṣe itọju bi titẹjade itanran.

<p> <kekere> Laini ọrọ yii jẹ itumọ lati ṣe itọju bi titẹ daradara. </small> </p>

Igboya

Fun tẹnumọ snippet ti ọrọ kan pẹlu iwuwo fonti ti o wuwo.

Apejuwe ọrọ ti o tẹle yii jẹ itumọ bi ọrọ igboya .

<strong> ti a ṣe bi ọrọ igboya </strong>

Italics

Fun tẹnumọ snippet ti ọrọ pẹlu awọn italics.

Abọ ọrọ ti o tẹle yii jẹ jijẹ bi ọrọ italicized .

<em> ṣe itumọ bi ọrọ italicized </em>

Efeti sile!Lero ọfẹ lati lo <b>ati <i>ni HTML5. <b>Itumọ lati ṣe afihan awọn ọrọ tabi awọn gbolohun ọrọ laisi sisọ pataki pataki lakoko <i>ti o jẹ pupọ julọ fun ohun, awọn ofin imọ-ẹrọ, ati bẹbẹ lọ.

Awọn kilasi tcnu

Ṣe afihan itumọ nipasẹ awọ pẹlu iwonba ti awọn kilasi IwUlO tcnu.

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla ti kii 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 kilasi = "dapibus" Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-ikilo" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla ti kii metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Awọn kukuru

Imuṣe aṣa aṣa ti <abbr>eroja HTML fun awọn kuru ati awọn adape lati ṣafihan ẹya ti o gbooro lori rababa. Awọn kuru pẹlu abuda kan titleni aala ti o ni aami ina ti isalẹ ati kọsọ iranlọwọ lori rababa, pese aaye afikun lori rababa.

<abbr>

Fun ọrọ ti o gbooro lori rababa gigun ti abbreviation kan, pẹlu titleabuda naa.

An abbreviation ti ọrọ ikalara ni attr .

<abbr akọle = "iwa" > attr </abbr>

<abbr class="initialism">

Ṣafikun .initialismsi abbreviation fun iwọn fonti kekere diẹ.

HTML jẹ ohun ti o dara julọ niwon akara ti a ge wẹwẹ.

<abbr akọle = "HyperText Siṣamisi Language" kilasi = "ibẹrẹ" > HTML </abbr>

Awọn adirẹsi

Pese alaye olubasọrọ fun baba ti o sunmọ tabi gbogbo ara iṣẹ.

<address>

Ṣetọju ọna kika nipa ipari gbogbo awọn ila pẹlu <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Orukọ kikun
[email protected] 
  1. <adirẹsi>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr akọle = "Foonu" > P: </abbr> (123) 456-7890 
  6. </adiresi>
  7.  
  8. <adirẹsi>
  9.   <strong> Ekunrere Oruko </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </adiresi>

Blockquotes

Fun sisọ awọn bulọọki akoonu lati orisun miiran laarin iwe rẹ.

Idinaduro aiyipada

Fi ipari si <blockquote>eyikeyi HTML bi agbasọ. Fun awọn agbasọ ọrọ taara a ṣeduro <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a ante. </p>
  3. </blockquote>

Awọn aṣayan Blockquote

Aṣa ati akoonu yipada fun awọn iyatọ ti o rọrun lori blockquote boṣewa.

Lorukọ orisun kan

Ṣafikun <small>tag fun idamo orisun naa. Fi orukọ iṣẹ orisun sinu <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a ante.

Ẹnikan olokiki ni Akọle Orisun 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a ante. </p>
  3.   <small> Ẹnikan olokiki <cite title = "Akọle Orisun" > Akọle Orisun </cite></small> 
  4. </blockquote>

Awọn ifihan miiran

Lo .pull-rightfun leefofo loju omi, titọ-ọtun blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a ante.

Ẹnikan olokiki ni Akọle Orisun 
  1. <blockquote kilasi = "pull-right" > 
  2.   ...
  3. </blockquote>

Awọn akojọ

Ti ko paṣẹ

Atokọ awọn ohun kan ninu eyiti aṣẹ ko ṣe pataki.

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

Ti paṣẹ

Atokọ awọn ohun kan ninu eyiti aṣẹ naa ṣe pataki.

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

Ti ko ni aṣa

Akojọ awọn ohun kan pẹlu ko si list-styletabi afikun padding osi.

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

Apejuwe

Atokọ awọn ofin pẹlu awọn apejuwe ti o somọ wọn.

Awọn akojọ apejuwe
Akojọ apejuwe jẹ pipe fun asọye awọn ofin.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit ti kii mi porta gravida ati eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Apejuwe petele

Ṣe awọn ofin ati awọn apejuwe ni <dl>ila ni ẹgbẹ-ẹgbẹ.

Awọn akojọ apejuwe
Akojọ apejuwe jẹ pipe fun asọye awọn ofin.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit ti kii mi porta gravida ati 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 kilasi = "dl-petele" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Efeti sile!Awọn atokọ apejuwe petele yoo ge awọn ọrọ ti o gun ju lati baamu ni atunṣe ọwọn osi text-overflow. Ni awọn ibudo wiwo ti o dín, wọn yoo yipada si ipilẹ tolera aiyipada.

Koodu

Ni tito

Pa awọn snippets inline ti koodu pẹlu <code>.

Fun apẹẹrẹ, <section>yẹ ki o wa ni ti a we bi inline. 
  1. Fun apẹẹrẹ , <code><apakan> </ code > yẹ ki o wa ni titan bi opopo .

Àkọsílẹ ipilẹ

Lo <pre>fun ọpọ ila ti koodu. Rii daju pe o sa fun eyikeyi awọn biraketi igun ninu koodu fun ṣiṣe deede.

<p>Apeere ọrọ nibi...</p>
  1. <tẹlẹ>
  2.   <p> Ayẹwo ọrọ nibi...</p>
  3. </pre>

Efeti sile!Rii daju pe o tọju koodu laarin <pre>awọn afi bi isunmọ si osi bi o ti ṣee; yoo mu gbogbo awọn taabu.

O le ṣe afikun .pre-scrollablekilaasi ni yiyan eyi ti yoo ṣeto giga-giga ti 350px ati pese ọpa lilọ-y-axis kan.

Awọn tabili

Awọn ara aiyipada

Fun iselona ipilẹ — fifẹ ina ati awọn ipin petele nikan — ṣafikun kilasi ipilẹ .tablesi eyikeyi <table>.

# Orukọ akọkọ Oruko idile Orukọ olumulo
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @twitter 
  1. <tabili kilasi = "tabili" > 
  2.   …
  3. </tabili>

Iyan kilasi

Ṣafikun eyikeyi awọn kilasi atẹle si kilasi .tablemimọ.

.table-striped

Ṣe afikun abila-fikun si ori tabili eyikeyi laarin <tbody>nipasẹ :nth-childyiyan CSS (ko si ni IE7-IE8).

# Orukọ akọkọ Oruko idile Orukọ olumulo
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @twitter 
  1. <tabili kilasi = "tabili-si kuro tabili" > 
  2.   …
  3. </tabili>

.table-bordered

Fi awọn aala ati awọn igun yika si tabili.

# Orukọ akọkọ Oruko idile Orukọ olumulo
1 Samisi Otto @mdo
Samisi Otto @getbootstrap
2 Jakobu Thornton @sanra
3 Larry Eye @twitter 
  1. <tabili kilasi = "tabili-aala" > 
  2.   …
  3. </tabili>

.table-hover

Mu ipo fifin ṣiṣẹ lori awọn ori ila tabili laarin <tbody>.

# Orukọ akọkọ Oruko idile Orukọ olumulo
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @twitter 
  1. <tabili kilasi = "tabili-hover" > 
  2.   …
  3. </tabili>

.table-condensed

Mu ki awọn tabili jẹ iwapọ diẹ sii nipa gige padding sẹẹli ni idaji.

# Orukọ akọkọ Oruko idile Orukọ olumulo
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @twitter 
  1. <tabili kilasi = "tabili-condensed" > 
  2.   …
  3. </tabili>

Iyan kana kilasi

Lo awọn kilasi ọrọ-ọrọ lati ṣe awọ awọn ori ila tabili.

Kilasi Apejuwe
.success Ṣe afihan iṣe aṣeyọri tabi rere.
.error Tọkasi iṣẹ ti o lewu tabi agbara odi.
.warning Tọkasi ikilọ ti o le nilo akiyesi.
.info Lo bi yiyan si awọn aza aiyipada.
# Ọja Owo sisan Ipo
1 TB - Oṣooṣu 01/04/2012 Ti fọwọsi
2 TB - Oṣooṣu 02/04/2012 Ti kọ
3 TB - Oṣooṣu 03/04/2012 Ni isunmọtosi
4 TB - Oṣooṣu 04/04/2012 Pe wọle lati jẹrisi 
  1. ...
  2.   < tr kilasi = "aṣeyọri" >
  3.     <td> 1 < /td>
  4.     <td>TB - Oṣooṣu</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Ti a fọwọsi</ td >
  7.   </ tr >
  8. ...

Atilẹyin tabili siṣamisi

Akojọ awọn eroja HTML tabili atilẹyin ati bii o ṣe yẹ ki wọn lo.

Tag Apejuwe
<table> Apo mimu fun fifi data han ni ọna kika tabular
<thead> Apoti eroja fun awọn ori ila akọsori tabili ( <tr>) lati ṣe aami awọn ọwọn tabili
<tbody> Eiyan ano fun tabili awọn ori ila ( <tr>) ninu awọn ara ti awọn tabili
<tr> Eiyan eroja fun a ṣeto ti tabili awọn sẹẹli ( <td>tabi <th>) ti o han lori kan nikan kana
<td> Seli tabili aiyipada
<th> Cell tabili pataki fun ọwọn (tabi kana, da lori iwọn ati ipo) Awọn aami
gbọdọ ṣee lo laarin a<thead>
<caption> Apejuwe tabi akopọ ohun ti tabili dimu, paapaa wulo fun awọn oluka iboju 
  1. <tabili>
  2.   <apilẹṣẹ> ... </ikọ ọrọ>
  3.   <ori>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </ thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </tabili>

Awọn fọọmu

Awọn ara aiyipada

Awọn iṣakoso fọọmu kọọkan gba iselona, ​​ṣugbọn laisi eyikeyi kilasi ipilẹ ti a beere lori <form>tabi awọn ayipada nla ni isamisi. Awọn abajade ni tolera, awọn aami ti o ni ibamu si osi lori awọn iṣakoso fọọmu.

Àlàyé Apẹẹrẹ ọrọ iranlọwọ ipele-idina nibi. 
  1. <fọọmu>
  2.   <fi aaye>
  3.     <arosọ> Àlàyé </ aroso>
  4.     <aami> Orukọ aami </aami>
  5.     <input type = "text" placeholder = "Tẹ nkankan..." >  
  6.     <span class = "help-block" > Apẹẹrẹ ọrọ iranlọwọ ipele idina nibi. </span> 
  7.     < kilasi aami = "apoti" > 
  8.       <input type = "boxbox" > Ṣayẹwo mi 
  9.     </aami>
  10.     <bọtini iru = "fi silẹ" kilasi = "btn" > Fi </button> silẹ  
  11.   </fieldset>
  12. </fọọmu>

Iyan ipalemo

To wa pẹlu Bootstrap jẹ awọn ipilẹ fọọmu iyan mẹta fun awọn ọran lilo wọpọ.

Fọọmu wa

Ṣafikun .form-searchsi fọọmu naa ati .search-querysi <input>fun titẹ ọrọ ti o ni iyipo ni afikun.

  1. < kilaasi fọọmu = "iwa-fọọmu" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "fi silẹ" kilasi = "btn" > Ṣawari </button>  
  4. </fọọmu>

Fọọmu inline

Ṣafikun .form-inlinefun awọn akole ti o ni ibamu si apa osi ati awọn idari-idina laini fun iṣeto iwapọ.

  1. < kilaasi fọọmu = "fọọmu-ila" > 
  2.   <input type = "text" class = "input-small" placeholder = "Imeeli" >   
  3.   <input type = "ọrọ igbaniwọle" kilasi = "input-small" ibi ipamọ = "Ọrọigbaniwọle" >   
  4.   < kilasi aami = "apoti" > 
  5.     <input type = "boxbox" > Ranti mi 
  6.   </aami>
  7.   <button type = "fi silẹ" kilasi = "btn" > Wọle </button>  
  8. </fọọmu>

Fọọmu petele

So awọn akole sọtun ki o leefofo loju omi si apa osi lati jẹ ki wọn han lori laini kanna bi awọn idari. Nilo awọn iyipada isamisi pupọ julọ lati fọọmu aiyipada:

  • Fi .form-horizontalsi fọọmu naa
  • Pa awọn aami ati awọn idari sinu.control-group
  • Fi kun .control-labelsi aami
  • Fi ipari si eyikeyi awọn idari ti o somọ .controlsfun titete to dara
  1. < kilaasi fọọmu = "fọọmu-petele" > 
  2.   <div class = "ẹgbẹ iṣakoso" > 
  3.     <label class = "control-label" fun = "inputEmail" > Imeeli </label>  
  4.     <div kilasi = "awọn idari" > 
  5.       <input type = "text" id = "inputEmail" ibi ipamọ = "Imeeli" >   
  6.     </div>
  7.   </div>
  8.   <div class = "ẹgbẹ iṣakoso" > 
  9.     <label class = "control-label" fun = "inputPassword" > Ọrọigbaniwọle </label>  
  10.     <div kilasi = "awọn idari" > 
  11.       <input type = "ọrọ igbaniwọle" id = "inputPassword" ibi ipamọ = "Ọrọigbaniwọle" >   
  12.     </div>
  13.   </div>
  14.   <div class = "ẹgbẹ iṣakoso" > 
  15.     <div kilasi = "awọn idari" > 
  16.       < kilasi aami = "apoti" > 
  17.         <input type = "boxbox" > Ranti mi 
  18.       </aami>
  19.       <button type = "fi silẹ" kilasi = "btn" > Wọle </button>  
  20.     </div>
  21.   </div>
  22. </fọọmu>

Awọn iṣakoso fọọmu atilẹyin

Awọn apẹẹrẹ ti awọn iṣakoso fọọmu boṣewa ni atilẹyin ni ipilẹ fọọmu apẹẹrẹ.

Awọn igbewọle

Iṣakoso fọọmu ti o wọpọ julọ, awọn aaye igbewọle orisun-ọrọ. Pẹlu atilẹyin fun gbogbo awọn iru HTML5: ọrọ, ọrọ igbaniwọle, akoko ọjọ, aago-agbegbe, ọjọ, oṣu, akoko, ọsẹ, nọmba, imeeli, url, wiwa, tel, ati awọ.

Nbeere lilo ti pàtó kan typeni gbogbo igba.

  1. <input type = "text" placeholder = "Igbewọle ọrọ" >

Agbegbe ọrọ

Iṣakoso fọọmu eyiti o ṣe atilẹyin awọn laini pupọ ti ọrọ. Yi rowseroja pada bi o ṣe pataki.

  1. <textarea awọn ori ila = "3" > </textarea>

Awọn apoti ayẹwo ati awọn redio

Awọn apoti ayẹwo jẹ fun yiyan ọkan tabi pupọ awọn aṣayan ninu atokọ lakoko ti awọn redio wa fun yiyan aṣayan kan lati ọpọlọpọ.

Aiyipada (tolera)


  1. < kilasi aami = "apoti" > 
  2.   < iru titẹ sii = "apoti apoti" iye = "" >  
  3.   Aṣayan ọkan ni eyi ati iyẹn — rii daju lati ṣafikun idi ti o fi dara
  4. </aami>
  5.  
  6. < kilasi aami = "redio" > 
  7.   < iru igbewọle = "redio" orukọ = "optionsRadios" id = "optionsRadios1" iye = "aṣayan1" ṣayẹwo >     
  8.   Aṣayan ọkan ni eyi ati iyẹn — rii daju lati ṣafikun idi ti o fi dara
  9. </aami>
  10. < kilasi aami = "redio" > 
  11.   < iru igbewọle = "redio" orukọ = "optionsRadios" id = "optionsRadios2" iye = "aṣayan2" >    
  12.   Aṣayan keji le jẹ nkan miiran ati yiyan yoo yan aṣayan ọkan
  13. </aami>

Awọn apoti ayẹwo inline

Ṣafikun .inlinekilasi naa si lẹsẹsẹ awọn apoti ayẹwo tabi awọn redio fun awọn idari yoo han lori laini kanna.

  1. < kilasi aami = "inline apoti" > 
  2.   < iru igbewọle = "apoti apoti" id = "inlineCheckbox1" iye = "aṣayan1" > 1   
  3. </aami>
  4. < kilasi aami = "inline apoti" > 
  5.   < Iru titẹ sii = "apoti apoti" id = "inlineCheckbox2" iye = "aṣayan2" > 2   
  6. </aami>
  7. < kilasi aami = "inline apoti" > 
  8.   < Iru titẹ sii = "apoti apoti" id = "inlineCheckbox3" iye = "aṣayan3" > 3   
  9. </aami>

Awọn yiyan

Lo aṣayan aiyipada tabi pato kan multiple="multiple"lati ṣafihan awọn aṣayan pupọ ni ẹẹkan.


  1. <yan>
  2.   <aṣayan> 1 </aṣayan>
  3.   <aṣayan> 2 </aṣayan>
  4.   <aṣayan> 3 </aṣayan>
  5.   <aṣayan> 4 </aṣayan>
  6.   <aṣayan> 5 </aṣayan>
  7. </yan>
  8.  
  9. <yan ọpọ = "ọpọlọpọ" > 
  10.   <aṣayan> 1 </aṣayan>
  11.   <aṣayan> 2 </aṣayan>
  12.   <aṣayan> 3 </aṣayan>
  13.   <aṣayan> 4 </aṣayan>
  14.   <aṣayan> 5 </aṣayan>
  15. </yan>

Itẹsiwaju fọọmu idari

Ṣafikun lori awọn iṣakoso aṣawakiri ti o wa tẹlẹ, Bootstrap pẹlu awọn paati fọọmu miiran ti o wulo.

Awọn igbewọle ti a ti ṣetan ati ti a fikun

Ṣafikun ọrọ tabi awọn bọtini ṣaaju tabi lẹhin igbewọle orisun-ọrọ eyikeyi. Ṣe akiyesi pe selectawọn eroja ko ni atilẹyin nibi.

Awọn aṣayan aiyipada

Fi ipari si .add-onati inputọkan pẹlu ọkan ninu awọn kilasi meji lati ṣaju tabi fi ọrọ kun kikọ sii.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "afikun-un" > @ </span> 
  3.   < class input = "span2" id = "prependedInput" type = "text" placeholder = "Orukọ olumulo" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   < class input = "span2" id = "appendedInput" iru = "ọrọ" >   
  7.   <span class = "afikun-un" > .00 </span> 
  8. </div>

Ni idapo

Lo awọn kilasi mejeeji ati awọn apẹẹrẹ meji .add-onlati ṣaju ati fi ohun kikọ sii sii.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "afikun-un" > $ </span> 
  3.   < class input = "span2" id = "appendedPrependedInput" type = "ọrọ" >   
  4.   <span class = "afikun-un" > .00 </span> 
  5. </div>

Awọn bọtini dipo ọrọ

Dipo ti a <span>pẹlu ọrọ, lo kan .btnlati so bọtini kan (tabi meji) si ohun kikọ sii.

  1. <div class = "input-append" > 
  2.   < class input = "span2" id = "appendedInputButton" iru = "ọrọ" >   
  3.   <bọtini kilasi = "btn" type = "bọtini" > Lọ! </bọtini>  
  4. </div>
  1. <div class = "input-append" > 
  2.   < class input = "span2" id = "appendedInputButtons" iru = "ọrọ" >   
  3.   <bọtini kilasi = "btn" type = "bọtini" > Wa </button>  
  4.   <bọtini kilasi = "btn" type = "bọtini" > Awọn aṣayan </button>  
  5. </div>

Bọtini silẹ

  1. <div class = "input-append" > 
  2.   < class input = "span2" id = "appendedDropdownButton" iru = "ọrọ" >   
  3.   <div class = "btn-ẹgbẹ" > 
  4.     <bọtini kilasi = "btn dropdown-toggle" data-toggle = "silẹ silẹ" >  
  5.       Iṣe
  6.       <span class = "abojuto" </span> 
  7.     </bọtini>
  8.     <ul kilasi = "akojọ-silẹ silẹ" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-ẹgbẹ" > 
  3.     <bọtini kilasi = "btn dropdown-toggle" data-toggle = "silẹ silẹ" >  
  4.       Iṣe
  5.       <span class = "abojuto" </span> 
  6.     </bọtini>
  7.     <ul kilasi = "akojọ-silẹ silẹ" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < class input = "span2" id = "prependedDropdownButton" iru = "ọrọ" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-ẹgbẹ" > 
  3.     <bọtini kilasi = "btn dropdown-toggle" data-toggle = "silẹ silẹ" >  
  4.       Iṣe
  5.       <span class = "abojuto" </span> 
  6.     </bọtini>
  7.     <ul kilasi = "akojọ-silẹ silẹ" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < class input = "span2" id = "appendedPrependedDropdownButton" iru = "ọrọ" >   
  12.   <div class = "btn-ẹgbẹ" > 
  13.     <bọtini kilasi = "btn dropdown-toggle" data-toggle = "silẹ silẹ" >  
  14.       Iṣe
  15.       <span class = "abojuto" </span> 
  16.     </bọtini>
  17.     <ul kilasi = "akojọ-silẹ silẹ" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Fọọmu wa

  1. < kilaasi fọọmu = "iwa-fọọmu" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "fi silẹ" kilasi = "btn" > Ṣawari </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "fi silẹ" kilasi = "btn" > Ṣawari </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </fọọmu>

Iwọn iṣakoso

Lo awọn kilasi iwọn ojulumo bii .input-largetabi baramu awọn igbewọle rẹ si awọn iwọn ọwọn akoj nipa lilo .span*awọn kilasi.

Àkọsílẹ ipele igbewọle

Jẹ ki eyikeyi <input>tabi <textarea>ano huwa bi a Àkọsílẹ ipele ano.

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

Iwọn ibatan

  1. < class input = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "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 input = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Efeti sile!Ni awọn ẹya iwaju, a yoo paarọ lilo awọn kilaasi igbewọle ibatan lati ba awọn iwọn bọtini wa mu. Fun apẹẹrẹ, .input-largeyoo mu fifẹ ati iwọn fonti ti titẹ sii.

Iwọn akoj

Lo .span1lati .span12fun awọn igbewọle ti o baamu awọn iwọn kanna ti awọn ọwọn akoj.

  1. < kilasi igbewọle = "span1" type = "ọrọ" ibi ipamọ = ".span1" >   
  2. < kilasi igbewọle = "span2" type = "ọrọ" ibi ipamọ = ".span2" >   
  3. < kilasi igbewọle = "span3" type = "ọrọ" ibi ipamọ = ".span3" >   
  4. < kilasi yan = "span1" > 
  5.   ...
  6. </yan>
  7. < kilasi yan = "span2" > 
  8.   ...
  9. </yan>
  10. < kilasi yan = "span3" > 
  11.   ...
  12. </yan>

Fun awọn igbewọle akoj pupọ fun laini, lo .controls-rowkilasi modifier fun aye to dara . O leefofo awọn igbewọle lati ṣubu-aaye funfun, ṣeto awọn ala ti o yẹ, ati pe yoo sọ omi leefofo kuro.

  1. <div kilasi = "awọn idari" > 
  2.   < kilasi igbewọle = "span5" type = "ọrọ" ibi ipamọ = ".span5" >   
  3. </div>
  4. <div class = "awọn idari-kana" > 
  5.   < kilasi igbewọle = "span4" type = "ọrọ" ibi ipamọ = ".span4" >   
  6.   < kilasi igbewọle = "span1" type = "ọrọ" ibi ipamọ = ".span1" >   
  7. </div>
  8. ...

Uneditable awọn igbewọle

Ṣe afihan data ni fọọmu ti kii ṣe atunṣe laisi lilo isamisi fọọmu gangan.

Diẹ ninu awọn iye nibi 
  1. <span class = "input-xlarge uneditable-input" > Iye diẹ nibi </span>

Awọn iṣe fọọmu

Pari fọọmu kan pẹlu ẹgbẹ awọn iṣe (awọn bọtini). Nigbati a ba fi sii laarin faili kan .form-horizontal, awọn bọtini yoo fi sii laifọwọyi lati laini pẹlu awọn iṣakoso fọọmu.

  1. <div class = "awọn iṣe fọọmu" > 
  2.   <button type = "fi silẹ" kilasi = "btn btn-primary" > Fipamọ awọn ayipada </button>  
  3.   <bọtini iru = "bọtini" kilasi = "btn" > Fagilee </button>  
  4. </div>

Ọrọ iranlọwọ

Opopo ati atilẹyin ipele idinamọ fun ọrọ iranlọwọ ti o han ni ayika awọn iṣakoso fọọmu.

Iranlọwọ inu

Ọrọ iranlọwọ inu ila 
  1. <input type = "text" ><span class = "help-inline" > Ọrọ iranlọwọ inu ila </span>

Dina iranlọwọ

Ọrọ iranlọwọ ti o gun gun ti o ya si laini tuntun ati pe o le fa kọja laini kan. 
  1. <input type = "text" ><span class = "help-block" > Idina ọrọ iranlọwọ to gun ti o ya si laini tuntun ati pe o le fa kọja laini kan. </span>

Awọn ipinlẹ iṣakoso fọọmu

Pese esi si awọn olumulo tabi awọn alejo pẹlu awọn ipinlẹ esi ipilẹ lori awọn iṣakoso fọọmu ati awọn akole.

Idojukọ igbewọle

A yọ awọn outlineaṣa aiyipada kuro lori diẹ ninu awọn iṣakoso fọọmu ati lo kan box-shadowni aaye rẹ fun :focus.

  1. < class input = "input-xlarge" id = "focusedInput" type = "text" iye = "Eyi ni idojukọ..." >

Awọn igbewọle alaabo

Ṣafikun abuda naa disabledlori titẹ sii lati ṣe idiwọ titẹ olumulo ati ṣe okunfa iwo ti o yatọ die-die.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Igbewọle alaabo nibi..." alaabo >

Awọn ipinlẹ afọwọsi

Bootstrap pẹlu awọn ara afọwọsi fun aṣiṣe, ikilọ, alaye, ati awọn ifiranṣẹ aṣeyọri. Lati lo, ṣafikun kilasi ti o yẹ si agbegbe .control-group.

Nkankan le ti jẹ aṣiṣe
Jọwọ ṣe atunṣe aṣiṣe naa
O gba orukọ olumulo
Woohoo! 
  1. <div class = "ikilọ iṣakoso-ẹgbẹ" > 
  2.   <label class = "control-label" fun = "inputWarning" > Iṣawọle pẹlu ikilọ </label>  
  3.   <div kilasi = "awọn idari" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Nkankan le ti jẹ aṣiṣe </span> 
  6.   </div>
  7. </div>
  8. <div class = "aṣiṣe iṣakoso-ẹgbẹ" > 
  9.   <label class = "control-label" fun = "inputError" > Iṣwọle pẹlu aṣiṣe </label>  
  10.   <div kilasi = "awọn idari" > 
  11.     <input type = "text" id = "inputError" >  
  12.     <span class = "help-inline" > Jọwọ ṣe atunṣe aṣiṣe </span> 
  13.   </div>
  14. </div>
  15. <div class = "aṣeyọri iṣakoso-ẹgbẹ" > 
  16.   <label class = "control-label" fun = "inputSuccess" > Iṣawọle pẹlu aṣeyọri </label>  
  17.   <div kilasi = "awọn idari" > 
  18.     <input type = "ọrọ" id = "inputSuccess" >  
  19.     <span class = "help-inline" > Woohoo! </span> 
  20.   </div>
  21. </div>

Awọn bọtini

Awọn bọtini aiyipada

Awọn aza bọtini le ṣee lo si ohunkohun pẹlu .btnkilasi ti a lo. Sibẹsibẹ, ni igbagbogbo iwọ yoo fẹ lati lo iwọnyi si nikan <a>ati <button>awọn eroja fun ṣiṣe ti o dara julọ.

Bọtini kilasi = "" Apejuwe
btn Bọtini grẹy boṣewa pẹlu gradient
btn btn-primary Pese afikun iwuwo wiwo ati ṣe idanimọ iṣẹ akọkọ ni ṣeto awọn bọtini
btn btn-info Lo bi yiyan si awọn aza aiyipada
btn btn-success Ṣe afihan iṣe aṣeyọri tabi rere
btn btn-warning Tọkasi pe o yẹ ki o ṣọra pẹlu iṣe yii
btn btn-danger Tọkasi iṣẹ ti o lewu tabi agbara odi
btn btn-inverse Bọtini grẹy dudu miiran, ko so mọ iṣe atunmọ tabi lilo
btn btn-link Ṣe akiyesi bọtini kan nipa ṣiṣe ki o dabi ọna asopọ kan lakoko mimu ihuwasi bọtini mu

Cross browser ibamu

IE9 ko ni irugbin isale gradients lori awọn igun yika, nitorinaa a yọ kuro. Jẹmọ, IE9 jankifies alaabo buttoneroja, Rendering ọrọ grẹy pẹlu kan ẹgbin ọrọ-ojiji ti a ko le ṣatunṣe.

Awọn iwọn bọtini

Fancy tobi tabi kere bọtini? Ṣafikun .btn-large, .btn-small, tabi .btn-minifun awọn iwọn afikun.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "bọtini" > Bọtini nla </button>  
  3.   <bọtini kilasi = "btn btn-large" type = "bọtini" > Bọtini nla </button>  
  4. </p>
  5. <p>
  6.   <bọtini kilasi = "btn btn-primary" type = "bọtini" > Bọtini aiyipada </button>  
  7.   <bọtini kilasi = "btn" type = "bọtini" > Bọtini aiyipada </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "bọtini" > Bọtini kekere </button>  
  11.   <button class = "btn btn-small" type = "bọtini" > Bọtini kekere </button>  
  12. </p>
  13. <p>
  14.   <bọtini kilasi = "btn btn-mini btn-primary" type = "bọtini" > Bọtini kekere </button>  
  15.   <bọtini kilasi = "btn btn-mini" type = "bọtini" > Bọtini kekere </button>  
  16. </p>

Ṣẹda awọn bọtini ipele dina—awọn ti o ni iwọn kikun ti obi kan — nipa fifi .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "bọtini" > Bọtini ipele dina </button>  
  2. <button class = "btn btn-large btn-block" type = "bọtini" > Bọtini ipele dina </button>

Ipo alaabo

Ṣe awọn bọtini wo unclickable nipa ipare wọn pada 50%.

Anchor ano

Fi .disabledkilasi kun si <a>awọn bọtini.

Ọna asopọ akọkọ Ọna asopọ 

  1. <a href = "#" kilasi = "btn btn-large btn-primary disabled" > Ọna asopọ akọkọ </a>  
  2. <a href = "#" kilasi = "btn btn-large alaabo" > Ọna asopọ </a>

Efeti sile!A lo .disabledbi kilasi IwUlO nibi, iru si .activekilasi ti o wọpọ, nitorinaa ko nilo asọtẹlẹ kan. Pẹlupẹlu, kilasi yii jẹ fun ẹwa nikan; o gbọdọ lo JavaScript aṣa lati mu awọn ọna asopọ kuro nibi.

Bọtini eroja

Fi disabledami si <button>awọn bọtini.

  1. <button type = "bọtini" kilasi = "btn btn-large btn-primary disabled" disabled = "alaabo" > Bọtini akọkọ </button>   
  2. <button type = "bọtini" kilasi = "btn btn-large" alaabo > Bọtini </button>

Ọkan kilasi, ọpọ afi

Lo .btnkilasi naa lori <a>, <button>, tabi <input>eroja.

Ọna asopọ 
  1. <a class = "btn" href = "" > Ọna asopọ </a>  
  2. <bọtini kilasi = "btn" type = "fi silẹ" > Bọtini </bọtini>  
  3. < class input = "btn" type = "bọtini" iye = "Igbewọle" >   
  4. < class input = "btn" type = "fi silẹ" iye = "Fi silẹ" >

Gẹgẹbi iṣe ti o dara julọ, gbiyanju lati baramu eroja fun ọrọ-ọrọ rẹ lati rii daju pe o ni ibamu pẹlu aṣawakiri aṣawakiri. Ti o ba ni input, lo ohun kan <input type="submit">fun bọtini rẹ.

Awọn aworan

Ṣafikun awọn kilasi si ipin <img>kan si awọn aworan ara ni irọrun ni eyikeyi iṣẹ akanṣe.

  1. <img src = "..." kilasi = "img-yika" >  
  2. <img src = "..." kilasi = "img-circle" >  
  3. <img src = "..." kilasi = "img-polaroid" >

Efeti sile! .img-roundedati .img-circlepe ko ṣiṣẹ ni IE7-8 nitori aini border-radiusatilẹyin.

Awọn aami nipasẹ Glyphicons

Awọn aami glyphs

Awọn aami 140 ni fọọmu sprite, wa ni grẹy dudu (aiyipada) ati funfun, ti a pese nipasẹ Glyphicons .

  • aami-gilasi
  • aami-orin
  • aami-wa
  • aami-apopu
  • aami-okan
  • aami-irawọ
  • icon-Star-sofo
  • aami-olumulo
  • aami-fiimu
  • aami-th-tobi
  • aami-th
  • icon-th-akojọ
  • aami-ok
  • aami-yiyọ
  • aami-sun-in
  • aami-sun-jade
  • aami-pipa
  • aami-ifihan agbara
  • aami-cog
  • aami-idọti
  • aami-ile
  • icon-faili
  • icon-akoko
  • aami-opopona
  • icon-download-alt
  • aami-download
  • icon-po si
  • aami-apo-iwọle
  • icon-play-Circle
  • aami-tun
  • icon-sọtun
  • icon-akojọ-alt
  • aami-titiipa
  • aami-flag
  • aami-agbekọri
  • aami-iwọn-pipa
  • aami-iwọn didun-isalẹ
  • aami-iwọn-soke
  • aami-qrcode
  • aami-barcode
  • aami-tag
  • aami-afi
  • aami-iwe
  • aami-bukumaaki
  • aami-tẹ
  • aami-kamẹra
  • aami-font
  • aami-gboya
  • aami-italic
  • aami-ọrọ-giga
  • aami-ọrọ-iwọn
  • icon-mö-osi
  • icon-mö-aarin
  • icon-mö-ọtun
  • icon-mö-lare
  • aami-akojọ
  • aami-indent-osi
  • aami-indent-ọtun
  • icon-facetime-video
  • aami-aworan
  • aami-ikọwe
  • aami-maapu-ami
  • aami-ṣatunṣe
  • aami-tint
  • aami-edit
  • aami-pin
  • aami-ṣayẹwo
  • aami-gbe
  • icon-igbese-pada
  • aami-sare-pada
  • aami-pada
  • aami-play
  • aami-idaduro
  • aami-duro
  • aami-siwaju
  • icon-sare-siwaju
  • icon-igbese-siwaju
  • aami-jade
  • aami-chevron-osi
  • icon-chevron-ọtun
  • aami-plus-ami
  • aami-iyokuro-ami
  • aami-yiyọ-ami
  • aami-ok-ami
  • aami-ibeere-ami
  • aami-info-ami
  • icon-screenshot
  • aami-yọ-Circle
  • icon-ok-Circle
  • aami-ban-yika
  • icon-ọfà-osi
  • icon-ọfà-ọtun
  • aami-ọfà-soke
  • aami-ọfa-isalẹ
  • aami-pin-alt
  • aami-iwọn-kikun
  • aami-iwọn-kekere
  • aami-plus
  • aami-iyokuro
  • aami-aami akiyesi
  • icon-exclamation-ami
  • aami-ebun
  • aami-bunkun
  • aami-iná
  • aami-oju-ìmọ
  • aami-oju-sunmọ
  • aami-ikilo-ami
  • aami-ofurufu
  • icon-kalẹnda
  • aami-ID
  • icon-comment
  • aami-oofa
  • aami-chevron-soke
  • aami-chevron-isalẹ
  • aami-retweet
  • icon-tio-kẹkẹ
  • aami-folda-sunmọ
  • aami-folda-ìmọ
  • aami-iwọn-inaro
  • aami-iwọn-petele
  • aami-hdd
  • aami-bullhorn
  • aami-agogo
  • aami-ẹri
  • aami-atampako-soke
  • aami-atampako-isalẹ
  • aami-ọwọ-ọtun
  • aami-ọwọ-osi
  • aami-ọwọ-soke
  • aami-ọwọ-isalẹ
  • aami-yika-ọfa-ọtun
  • icon-Circle-ọfà-osi
  • aami-yika-ọfà-soke
  • aami-yika-ọfa-isalẹ
  • aami-agbaye
  • icon-wrench
  • aami-awọn iṣẹ-ṣiṣe
  • aami-àlẹmọ
  • aami-kikuru
  • icon-ni kikun iboju

Glyphicons ikalara

Glyphicons Halflings ni deede ko wa fun ọfẹ, ṣugbọn eto laarin Bootstrap ati awọn olupilẹṣẹ Glyphicons ti jẹ ki eyi ṣee ṣe laisi idiyele fun ọ bi awọn olupilẹṣẹ. Gẹgẹbi o ṣeun, a beere lọwọ rẹ lati ṣafikun ọna asopọ aṣayan pada si Glyphicons nigbakugba ti o wulo.

Bawo ni lati lo

Gbogbo awọn aami nilo aami <i>kan pẹlu kilasi alailẹgbẹ, ti a fi sii tẹlẹ pẹlu icon-. Lati lo, gbe koodu atẹle yii si ibikibi:

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

Awọn aza tun wa fun awọn aami inverted (funfun), ti a ti ṣetan pẹlu kilasi afikun kan. A yoo ṣe pataki kilaasi yii lori gbigbe ati awọn ipinlẹ ti nṣiṣe lọwọ fun nav ati awọn ọna asopọ silẹ.

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

Efeti sile!Nigbati o ba nlo ni ẹgbẹ awọn gbolohun ọrọ, bi ninu awọn bọtini tabi awọn ọna asopọ nav, rii daju pe o fi aaye silẹ lẹhin <i>tag fun aye to dara.

Awọn apẹẹrẹ aami

Lo wọn ni awọn bọtini, awọn ẹgbẹ bọtini fun ọpa irinṣẹ, lilọ kiri, tabi awọn igbewọle fọọmu ti a ti ṣetan.

Awọn bọtini

Ẹgbẹ bọtini ni bọtini irinṣẹ bọtini kan
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-ẹgbẹ" > 
  3.  
  4.     <a class = "btn" href = "#" ><i class = "icon-align-left" </i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-center" </i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  7.     <a class = "btn" href = "#" ><i class = "icon-align-justify" </i></a>   
  8.   </div>
  9. </div>
Sisọ silẹ ni ẹgbẹ bọtini kan
Olumulo 
  1. <div class = "btn-ẹgbẹ" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Olumulo </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "abojuto" ></span></a>    
  4.   <ul kilasi = "akojọ-silẹ silẹ" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Ṣatunkọ </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Paarẹ </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Gbese </a></li>  
  8.     <li kilasi = "olupin" </li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Ṣe abojuto </a></li>  
  10.   </ul>
  11. </div>
Bọtini kekere
  1. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></a>

Lilọ kiri

  1. <ul kilasi = "nav nav-akojọ" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Ile </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" >> Ile-ikawe </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Awọn ohun elo </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Oriṣiriṣi </a> </li>  
  6. </ul>

Awọn aaye fọọmu

  1. <div class = "ẹgbẹ iṣakoso" > 
  2.   <label class = "control-label" fun = "inputIcon" > Adirẹsi imeeli </label>  
  3.   <div kilasi = "awọn idari" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = " add-on" ><i class = "icon-envelope" </i></span>  
  6.       < class input = "span2" id = "inputIcon" iru = "ọrọ" >   
  7.     </div>
  8.   </div>
  9. </div>