I-Bootstrap

Isisekelo se-CSS

Izakhi ze-HTML eziyisisekelo zenziwe isitayela futhi zathuthukiswa ngamakilasi andayo.

Amakhanda phezulu! Lawa madokhumenti awe-v2.3.2, engasasekelwa ngokusemthethweni. Hlola inguqulo yakamuva ye-Bootstrap!

Ukuthayipha

Izihloko

Zonke izihloko ze-HTML, <h1>ngokusebenzisa <h6>ziyatholakala.

h1. Isihloko 1

h2. Isihloko 2

h3. Isihloko 3

h4. Isihloko 4

h5. Isihloko 5
h6. Isihloko 6

Ikhophi yomzimba

Okuzenzakalelayo komhlaba wonke kwe-Bootstrap font-sizekungu- 14px , nokungu line-height- 20px . Lokhu kusetshenziswe kuzo <body>zonke izigaba. Ngaphezu kwalokho, <p>(izigaba) zithola umkhawulo ophansi wesigamu sobude bomugqa wazo (10px ngokuzenzakalelayo).

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

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

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

<p>...</p>... </p>

Ikhophi yomzimba oholayo

Yenza isigaba sigqame ngokungeza .lead.

I-Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. I-Duis mollis, ayiyona i-commodo luctus.

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

Yakhiwe Ngokuncane

Isilinganiso se-typographic sisekelwe ezintweni ezimbili eziguquguqukayo ezincane eziguquguqukayo.kancane : @baseFontSizekanye @baseLineHeight. Esokuqala siwusayizi wefonti eyisisekelo osetshenziswa kuyo yonke indawo kanti eyesibili ubude bomugqa oyisisekelo. Sisebenzisa lezo ziguquguqukayo kanye nezibalo ezithile ezilula ukuze sakhe amamajini, ama-paddings, nobude bomugqa balo lonke uhlobo lwethu nokunye. Enze ngendlela oyifisayo kanye nezimo ze-Bootstrap.

Ukugcizelela

Sebenzisa omaka bokugcizelela be-HTML abazenzakalelayo abanezitayela ezingasindi.

<small>

Ukuze ungagcizeleli emgqeni noma emabhuloki wombhalo, sebenzisa umaka omncane.

Lo mugqa wombhalo uhloselwe ukuthathwa njengokuphrinta kahle.

<p>
  <small>Lo mugqa wombhalo uhloselwe ukuthi uthathwe njengokuphrinta kahle.</small><encane> Lo mugqa wombhalo uhloselwe ukuthathwa njengokuphrinta kahle. </encane>
</p></p>

Okugqamile

Ukuze ugcizelele amazwibela ombhalo onesisindo sefonti esindayo.

Amazwibela alandelayo ombhalo ahunyushwa njengombhalo ogqamile .

<strong>ihunyushwe njengombhalo ogqamile</strong>ihunyushwe njengombhalo ogqamile </strong>

Omalukeke

Ukuze ugcizelele amazwibela ombhalo omalukeke.

Amazwibela alandelayo ombhalo ahunyushwa njengombhalo omalukeke .

<em>hunyushwe njengombhalo omalukeke</em>ihunyushwe njengombhalo omalukeke </em>

Amakhanda phezulu!Zizwe ukhululekile ukusebenzisa <b>futhi <i>ku-HTML5. <b>ihloselwe ukugqamisa amagama noma imishwana ngaphandle kokudlulisa ukubaluleka okwengeziwe kuyilapho <i>ngokuvamile kungokwezwi, amagama obuchwepheshe, njll.

Amakilasi okuqondanisa

Hlela kabusha umbhalo kalula ube izingxenye ezinamakilasi okuqondanisa umbhalo.

Umbhalo oqondaniswe kwesokunxele.

Umbhalo oqondaniswe namaphakathi.

Umbhalo oqondaniswe kwesokudla.

  1. <p class="text-left">Umbhalo oqondaniswe kwesokunxele.</p> class = "text-left" > Umbhalo oqondaniswe kwesokunxele. </p>
  2. <p class = "text-center" > Umbhalo oqondaniswe namaphakathi. </p> 
  3. <p class = "text-right" > Umbhalo oqondaniswe kwesokudla. </p>

Amakilasi okugcizelela

Dlulisa incazelo ngombala ngedlanzana lezinsiza zokugcizelela.

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

I-Etiam porta sem malesuada magna mollis euismod.

I-Donec ullamcorper nulla non metus auctor fringilla.

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

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

  1. <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> class = "thulisiwe" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
  2. <p class = "text-warning" > I- 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. I-Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Izifinyezo

Ukuqaliswa okunesitayela kwe- <abbr>elementi ye-HTML yezifinyezo nama-akhronimi ukuze kuboniswe inguqulo enwetshiwe kukuhambisa phezulu. Izifinyezo ezinesibaluli titlezinomngcele ongezansi onamachashazi akhanyayo kanye nekhesa yosizo ekuhambeni, ehlinzeka ngomongo ongeziwe kokuthi hambisa phezulu.

<abbr>

Ngombhalo onwetshiwe kokuhambisa phezulu okude kwesifinyezo, faka titleisibaluli.

Isifinyezo segama lesichasiso sithi attr .

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

<abbr class="initialism">

Engeza .initialismkusifinyezo sosayizi wefonti omncane kancane.

I- HTML iyinto engcono kakhulu kusukela kusinkwa esisikiwe.

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

Amakheli

Yethula imininingwane yokuxhumana yedlozi eliseduze noma wonke umsebenzi.

<address>

Londoloza ukufometha ngokuqeda yonke imigqa nge- <br>.

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

Izingcaphuno zokuvimba

Ngokucaphuna amabhlogo wokuqukethwe komunye umthombo ngaphakathi kwedokhumenti yakho.

I-blockquote ezenzakalelayo

Goqa <blockquote>noma iyiphi i- HTML njengengcaphuno. Ukuze uthole izingcaphuno eziqondile sincoma a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-ante. </p>
  3. </blockquote>

Izinketho ze-blockquote

Isitayela nokuqukethwe kuyashintsha ukuze kube lula ukuhluka ku-blockquote evamile.

Ukuqamba umthombo

Engeza <small>umaki wokukhomba umthombo. Gcoba igama lomsebenzi womthombo ngesi- <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-ante.

Umuntu odumile ku- Source Title 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-ante. </p>
  3.   <small> Umuntu othile odumile <cite title = "Isihloko Somthombo" > Isihloko Somthombo </cite></small> 
  4. </blockquote>

Ezinye izibonisi

Sebenzisa .pull-righti-blockquote entantayo, eqondaniswe kwesokudla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-ante.

Umuntu odumile ku- Source Title 
  1. <blockquote class="pull-right"> class = "donsa-kwesokudla" >
  2.   ...
  3. </blockquote>

Uhlu

Aku-odwe

Uhlu lwezinto lapho i-oda lingenandaba khona ngokusobala.

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

I-oda

Uhlu lwezinto lapho i-oda libaluleke ngokusobala.

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

Okungabhalwanga isitayela

Susa i- list-stylepadding ezenzakalelayo nengakwesokunxele ezintweni zohlu (izingane eziseduze kuphela).

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

Emugqeni

Beka zonke izinto zohlu emugqeni owodwa inline-blockonamaphedi alula.

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

Incazelo

Uhlu lwamagama anezincazelo ezihambisana nawo.

Uhlu lwezincazelo
Uhlu lwezincazelo luphelele ekuchazeni amagama.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
I-Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Incazelo evundlile

Yenza imigomo nezincazelo <dl>zilandelane.

Uhlu lwezincazelo
Uhlu lwezincazelo luphelele ekuchazeni amagama.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
I-Etiam porta sem malesuada magna mollis euismod.
U-Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class="dl-horizontal"> class = "dl-horizontal" >
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Amakhanda phezulu!Uhlu lwezincazelo ezivundlile luzonciphisa amagama amade kakhulu ukuthi angangena ekulungisweni kwekholomu yesobunxele text-overflow. Ezingobeni zokubuka ezinciphile, zizoshintshela kusakhiwo esistakiwe esizenzakalelayo.

Ikhodi

Emugqeni

Goqa amazwibela ekhodi nge- <code>.

Isibonelo, <section>kufanele isongwe njenge-inline. 
  1. Isibonelo , <code > & lt ; isigaba & gt ;</ code > kufanele isongwe njengokusemgqeni .

Ibhulokhi eyisisekelo

Sebenzisa <pre>emigqeni eminingi yekhodi. Qiniseka ukuthi ubalekela noma yibaphi abakaki be-engeli kukhodi ukuze unikezwe ngendlela efanele.

<p>Isampula yombhalo lapha...</p>
  1. <pre>
  2.   <p>Isampula yombhalo lapha...</p>
  3. </pre>

Amakhanda phezulu!Qiniseka ukuthi ugcina ikhodi ngaphakathi <pre>komaki eduze kwesokunxele ngangokunokwenzeka; izonikeza wonke amathebhu.

Ungakhetha ngokukhetha .pre-scrollableiklasi elizosetha ubude bobude obungu-350px futhi linikeze ibha yokuskrola ye-y-axis.

Amathebula

Izitayela ezizenzakalelayo

Ukuze uthole isitayela esiyisisekelo—i-padding ekhanyayo nezihlukanisi ezivundlile kuphela—engeza isigaba sesisekelo .tablekunoma iyiphi <table>.

# Igama Isibongo Igama lomsebenzisi
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry uNyoni @twitter 
  1. <table class = "table" > 
  2.   …
  3. </ithebula>

Amakilasi okuzikhethela

Engeza noma yimaphi amakilasi alandelayo ekilasini .tablelesisekelo.

.table-striped

Yengeza i-zebra-striping kunoma yimuphi umugqa wethebula ngaphakathi kwesikhethi <tbody>se- :nth-childCSS (ayitholakali ku-IE7-8).

# Igama Isibongo Igama lomsebenzisi
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry uNyoni @twitter 
  1. <table class = "table-striped table" > 
  2.   …
  3. </ithebula>

.table-bordered

Engeza imingcele namakhona ayindilinga etafuleni.

# Igama Isibongo Igama lomsebenzisi
1 Maka Otto @mdo
Maka Otto @getbootstrap
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter 
  1. <table class = "table-bordered" > 
  2.   …
  3. </ithebula>

.table-hover

Nika amandla isimo sokuhambisa phezulu emigqeni yethebula ngaphakathi kwe- <tbody>.

# Igama Isibongo Igama lomsebenzisi
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter 
  1. <table class = "table-hover yetafula" > 
  2.   …
  3. </ithebula>

.table-condensed

Yenza amathebula ahlangane kakhudlwana ngokusika ama-cell padding phakathi.

# Igama Isibongo Igama lomsebenzisi
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter 
  1. <table class = "table-condensed table" > 
  2.   …
  3. </ithebula>

Amakilasi omugqa ongawakhetha

Sebenzisa amakilasi anomongo ukuze ufake imibala yemigqa yethebula.

Ikilasi Incazelo
.success Ibonisa isenzo esiyimpumelelo noma esihle.
.error Ibonisa isenzo esiyingozi noma okungenzeka sibe sibi.
.warning Ibonisa isexwayiso esingase sidinge ukunakwa.
.info Isetshenziswa njengenye indlela yezitayela ezizenzakalelayo.
# Umkhiqizo Inkokhelo Ithathiwe Isimo
1 I-TB - Nyanga zonke 01/04/2012 Kuvunyelwe
2 I-TB - Nyanga zonke 02/04/2012 Kwenqatshiwe
3 I-TB - Nyanga zonke 03/04/2012 Kusalindile
4 I-TB - Nyanga zonke 04/04/2012 Shayela ukuze uqinisekise 
  1. ...
  2.   < tr class = "success" >
  3.     <td> 1 < /td>
  4.     <td>TB - Nyanga zonke</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Kuvunyiwe</ td >
  7.   </ tr >
  8. ...

Imakhaphu yethebula esekelwe

Uhlu lwezinto ezisekelwayo zethebula le-HTML nokuthi kufanele zisetshenziswe kanjani.

Maka Incazelo
<table> Isici sokugoqa sokubonisa idatha ngefomethi yethebula
<thead> Isici sesiqukathi semigqa yesihloko sethebula ( <tr>) ukuze ilebula amakholomu ethebula
<tbody> Isici sesiqukathi semigqa yethebula ( <tr>) emzimbeni wetafula
<tr> Isici sesiqukathi sesethi yamaseli ethebula ( <td>noma <th>) avela kumugqa owodwa
<td> Iseli lethebula elizenzakalelayo
<th> Iseli lethebula elikhethekile lekholomu (noma umugqa, kuye ngobukhulu nokubeka) amalebula
<caption> Incazelo noma isifinyezo salokho okuphethwe yithebula, ikakhulukazi ezifundeni zesikrini 
  1. <ithebula>
  2.   <caption> ... </caption>
  3.   <ikhanda>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </isihloko>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </ithebula>

Amafomu

Izitayela ezizenzakalelayo

Izilawuli zefomu ngazinye zithola isitayela, kodwa ngaphandle kwanoma yisiphi isigaba sesisekelo esidingekayo <form>noma izinguquko ezinkulu kumakhaphu. Imiphumela ngamalebula astakiwe, aqondaniswe kwesokunxele phezu kwezilawuli zefomu.

Inganekwane Isibonelo sombhalo wosizo wezinga lebhulokhi lapha. 
  1. <ifomu>
  2.   <i-fieldset>
  3.     <legend> Inganekwane </legend>
  4.     <ilebula> Igama lelebula </label>
  5.     <input type = "text" isimeli = "Thayipha okuthile..." >  
  6.     <span class = "help-block" > Umbhalo wosizo weleveli yesibonelo yebhulokhi lapha. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Ngihlole 
  9.     </ilebula>
  10.     <button type = "submit" class = "btn" > Thumela </inkinobho>  
  11.   </fieldset>
  12. </ifomu>

Izakhiwo ozikhethela

Kufakwe ne-Bootstrap kunezakhiwo ezintathu zamafomu ongakhetha kuzo ezimweni ezivamile zokusetshenziswa.

Sesha ifomu

Engeza .form-searchefomini naku- .search-queryukuze <input>uthole okokufaka kombhalo okuyindilinga eyengeziwe.

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

Ifomu elisemgqeni

Engeza .form-inlineamalebula aqondaniswe kwesokunxele kanye nezilawuli zebhulokhi esemgqeni ukuze uthole isakhiwo esihlangene.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" isimeli = "I-imeyili" >   
  3.   <input type = "password" class = "input-small" isimeli = "Iphasiwedi" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Ngikhumbule 
  6.   </ilebula>
  7.   <button type = "submit" class = "btn" > Ngena ngemvume </inkinobho>  
  8. </ifomu>

Ifomu elivundlile

Qondanisa amalebula kwesokudla futhi uwantante kwesokunxele ukuze uwenze avele emugqeni ofanayo nezilawuli. Idinga izinguquko eziningi zemakhaphu efomini elizenzakalelayo:

  • Engeza .form-horizontalefomini
  • Goqa amalebula nezilawuli.control-group
  • Engeza .control-labelkulebula
  • Songa noma yiziphi izilawuli ezihambisanayo .controlsukuze uqondanise kahle
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" ye = "inputEmail" > I- imeyili </label>  
  4.     <div class = "controls" > 
  5.       <input type = "text" id = "inputEmail" isimeli = "I-imeyili" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" ye = "inputPassword" > Iphasiwedi </label>  
  10.     <div class = "controls" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Iphasiwedi" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "controls" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Ngikhumbule 
  18.       </ilebula>
  19.       <button type = "submit" class = "btn" > Ngena ngemvume </inkinobho>  
  20.     </div>
  21.   </div>
  22. </ifomu>

Izilawuli zefomu ezisekelwayo

Izibonelo zezilawuli zefomu ezijwayelekile ezisekelwa kusakhiwo sefomu lesibonelo.

Okokufaka

Ukulawulwa kwefomu okuvame kakhulu, izinkambu zokufaka ezisuselwe embhalweni. Ifaka usekelo lwazo zonke izinhlobo ze-HTML5: umbhalo, iphasiwedi, isikhathi sosuku, isikhathi sosuku, idethi, inyanga, isikhathi, iviki, inombolo, i-imeyili, i-url, usesho, ucingo, nombala.

Idinga ukusetshenziswa okucacisiwe typengaso sonke isikhathi.

  1. <input type = "text" isimeli = "Okokufaka umbhalo" >

Indawo yombhalo

Ukulawula kwefomu okusekela imigqa eminingi yombhalo. Shintsha rowsisibaluli njengoba kudingeka.

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

Amabhokisi okuhlola namarediyo

Amabhokisi okuhlola awokukhetha inketho eyodwa noma ezimbalwa ohlwini kuyilapho imisakazo ingeyokukhetha inketho eyodwa kweziningi.

Okuzenzakalelayo (kustakiwe)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Inketho yokuqala yile nalokhuya—qiniseka ukuthi uyafaka phakathi ukuthi kungani kukuhle
  4. </ilebula>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" ithikhiwe >     
  8.   Inketho yokuqala yile nalokhuya—qiniseka ukuthi uyafaka phakathi ukuthi kungani kukuhle
  9. </ilebula>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Inketho yesibili ingaba enye into futhi ukuyikhetha kuzosusa ukukhetha okukodwa
  13. </ilebula>

Amabhokisi okuhlola asemgqeni

Engeza .inlineikilasi ochungechungeni lwamabhokisi okuhlola noma imisakazo yezilawuli ezivela emugqeni ofanayo.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </ilebula>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </ilebula>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </ilebula>

Ikhetha

Sebenzisa inketho ezenzakalelayo noma ucacise u-a multiple="multiple"ukuze ubonise izinketho eziningi ngesikhathi esisodwa.


  1. <khetha>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </khetha>
  8.  
  9. <khetha multiple = "multiple" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </khetha>

Ukunweba izilawuli zefomu

Ingeza phezu kwezilawuli ezikhona zesiphequluli, i-Bootstrap ihlanganisa nezinye izingxenye zefomu eziwusizo.

Okokufaka okusekelwe ngaphambilini nakwengezwe

Engeza umbhalo noma izinkinobho ngaphambi noma ngemva kwanoma yikuphi okokufaka okusekelwe embhalweni. Qaphela ukuthi selectama-elementi awasekelwe lapha.

Izinketho ezizenzakalelayo

Goqa u-an .add-onkanye inputnelinye lamakilasi amabili ukuze ulungiselele noma wengeze umbhalo kokokufakayo.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" isimeli = "Igama lomsebenzisi" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput" type = "text" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Kuhlanganiswe

Sebenzisa womabili amakilasi kanye nezimo ezimbili .add-onzokulungisa futhi wengeze okokufaka.

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

Izinkinobho esikhundleni sombhalo

Esikhundleni sika-a <span>onombhalo, sebenzisa u-a .btnukuze unamathisele inkinobho (noma ezimbili) kokokufakayo.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" type = "text" >   
  3.   <button class = "btn" type = "button" > Hamba! </inkinobho>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "text" >   
  3.   <button class = "btn" type = "button" > Sesha </inkinobho>  
  4.   <button class = "btn" type = "inkinobho" > Izinketho </inkinobho>  
  5. </div>

Ukwehliswa kwezinkinobho

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton" type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Isenzo
  6.       <span class = "caret" ></span> 
  7.     </inkinobho>
  8.     <ul class = "imenyu eyehlayo" > 
  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 = "dropdown" >  
  4.       Isenzo
  5.       <span class = "caret" ></span> 
  6.     </inkinobho>
  7.     <ul class = "imenyu eyehlayo" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Isenzo
  5.       <span class = "caret" ></span> 
  6.     </inkinobho>
  7.     <ul class = "imenyu eyehlayo" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Isenzo
  15.       <span class = "caret" ></span> 
  16.     </inkinobho>
  17.     <ul class = "imenyu eyehlayo" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Amaqembu okwehliswayo ahlukaniswe ngezigaba

  1. <ifomu>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <input type = "text" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <input type = "text" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </ifomu>

Sesha ifomu

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

Lawula ubukhulu

Sebenzisa amakilasi okulinganisa okuhlobene afana .input-largenoma ufanise okokufaka kwakho nosayizi bekholomu yegridi usebenzisa .span*amakilasi.

Vimba okokufaka kwezinga

Yenza noma iyiphi <input>noma i <textarea>-elementi iziphathe njenge-elementi yeleveli yebhulokhi.

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

Usayizi ohlobene

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

Amakhanda phezulu!Ezinguqulweni ezizayo, sizobe sishintsha ukusetshenziswa kwalezi zigaba zokufaka okuhlobene ukuze kufane nosayizi wezinkinobho zethu. Isibonelo, .input-largeizokhuphula ukupheda kanye nosayizi wefonti okokufaka.

Ukulinganisa igridi

Sebenzisa .span1okuthi ukuze .span12uthole okokufaka okufanayo nosayizi abafanayo bamakholomu egridi.

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

Okokufaka kwamagridi amaningi emugqeni ngamunye, sebenzisa .controls-rowisigaba sokuguqula ukuze uthole izikhala ezifanele . Intanta okokufaka ukuze igoqe indawo emhlophe, isethe amamajini afanele, futhi isuse ukuntanta.

  1. <div class = "controls" > 
  2.   <input class = "span5" type = "text" isimeli = ".span5" >   
  3. </div>
  4. <div class = "controls-controls-row" > 
  5.   <input class = "span4" type = "text" isimeli = ".span4" >   
  6.   <input class = "span1" type = "text" isimeli = ".span1" >   
  7. </div>
  8. ...

Okokufaka okungahleleki

Yethula idatha ngefomu elingeke lihleleke ngaphandle kokusebenzisa umaka wefomu langempela.

Inani elithile lapha 
  1. <span class = "input-xlarge-input-input" > Inani elithile lapha </span>

Izenzo zefomu

Qeda ifomu ngeqembu lezenzo (izinkinobho). Uma ibekwe ngaphakathi .form-actionskwe-, izinkinobho zizohlehlisa ngokuzenzakalelayo ukuze zihambisane nezilawuli zefomu.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Londoloza izinguquko </button>  
  3.   <button type = "button" class = "btn" > Khansela </inkinobho>  
  4. </div>

Usizo lombhalo

Ukusekelwa kwezinga le-inline ne-block block lombhalo wosizo ovela eduze nezilawuli zefomu.

Usizo olusemgqeni

Umbhalo wosizo olusemgqeni 
  1. <input type = "text" ><span class = "help-inline" > Umbhalo wosizo ongaphakathi komugqa </span>

Vimba usizo

Umbhalo wosizo webhulokhi omude oweqa emugqeni omusha futhi ungase udlulele ngale komugqa owodwa. 
  1. <input type = "text" ><span class = "help-block" > Ibhulokhi elide lombhalo wosizo oweqa emugqeni omusha futhi ungase udlulele ngale komugqa owodwa. </span>

Izifunda zokulawula amafomu

Nikeza impendulo kubasebenzisi noma izivakashi ngezimo zempendulo eziyisisekelo kuzilawuli zefomu namalebula.

Okokufaka ukugxila

Sisusa izitayela ezizenzakalelayo outlinekwezinye izilawuli zefomu futhi sisebenzise u-a box-shadowendaweni yazo :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Lokhu kugxilile..." >

Okokufaka okungavumelekile

Okokufaka kwesitayela ngokusebenza kwesiphequluli esizenzakalelayo nge- :invalid. Cacisa i- type, engeza requiredisibaluli uma inkambu ingeyona inketho, futhi (uma ikhona) ucacise i- pattern.

Lokhu akutholakali kuzinguqulo ze-Internet Explorer 7-9 ngenxa yokuntuleka kosekelo lwezikhethi mbumbulu ze-CSS.

  1. <input class = "span3" type = "i-imeyili" edingekayo >

Okokufaka okukhutshaziwe

Engeza disabledisibaluli kokokufaka ukuze uvimbele okokufaka komsebenzisi futhi ucuphe ukubukeka okuhluke kancane.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" isimeli = "Okufaka okukhutshaziwe lapha..." kukhutshaziwe >

Izifunda zokuqinisekisa

I-Bootstrap ihlanganisa izitayela zokuqinisekisa zephutha, isexwayiso, ulwazi, nemilayezo yempumelelo. Ukuze usebenzise, ​​engeza ikilasi elifanele kokuzungezile .control-group.

Kungenzeka ukuthi kukhona okungahambanga kahle
Sicela ulungise iphutha
Igama lomsebenzisi lithathiwe
Woohoo! 
  1. <div class = "control-group warning" > 
  2.   <label class = "control-label" ye = "inputWarning" > Okokufaka okunesixwayiso </label>  
  3.   <div class = "controls" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Kungenzeka ukuthi kukhona okungahambanga kahle </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "control-group error" > 
  10.   <label class = "control-label" ye = "inputError" > Okokufaka okunephutha </label>  
  11.   <div class = "controls" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Sicela ulungise iphutha </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "control-group info" > 
  18.   <label class = "control-label" ye = "inputInfo" > Okokufaka ngolwazi </label>  
  19.   <div class = "controls" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Igama lomsebenzisi selithathiwe </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "control-group success" > 
  26.   <label class = "control-label" for = "inputSuccess" > Okokufaka ngempumelelo </label>  
  27.   <div class = "controls" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Izinkinobho

Izinkinobho ezizenzakalelayo

Izitayela zezinkinobho zingasetshenziswa kunoma yini efakwe .btnekilasini. Kodwa-ke, ngokuvamile uzofuna ukusebenzisa lezi kuma <a>- <button>elementi kuphela ukuze uthole ukunikezwa okungcono kakhulu.

Inkinobho class="" Incazelo
btn Inkinobho evamile empunga ene-gradient
btn btn-primary Ihlinzeka ngesisindo sokubukwa esengeziwe futhi ihlonze isenzo esiyinhloko kusethi yezinkinobho
btn btn-info Isetshenziswa njengenye indlela yezitayela ezizenzakalelayo
btn btn-success Ibonisa isenzo esiyimpumelelo noma esihle
btn btn-warning Ikhombisa ukuthi kufanele kuqashelwe ngalesi senzo
btn btn-danger Ibonisa isenzo esiyingozi noma okungenzeka sibe sibi
btn btn-inverse Enye inkinobho empunga emnyama, engaboshiwe esenzweni se-semantic noma ukusetshenziswa
btn btn-link Gcizelela inkinobho ngokuyenza ibukeke njengesixhumanisi kuyilapho ugcina ukuziphatha kwenkinobho

Ukuhambisana kwesiphequluli esiphambanayo

I-IE9 ayinqamuli ama-gradient angemuva emakhoneni ayindilinga, ngakho siyawasusa. Okuhlobene, i-IE9 yenza ama- buttonelementi akhutshaziwe, ihumusha umbhalo ompunga ngesithunzi sombhalo esibi esingeke sikwazi ukusilungisa.

Osayizi bezinkinobho

Uyathanda izinkinobho ezinkulu noma ezincane? Engeza .btn-large, .btn-small, noma .btn-miniosayizi abengeziwe.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "inkinobho" > Inkinobho enkulu </inkinobho>  
  3.   <button class = "btn btn-large" type = "button" > Inkinobho enkulu </inkinobho>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "inkinobho" > Inkinobho yokuzenzakalelayo </inkinobho>  
  7.   <button class = "btn" type = "inkinobho" > Inkinobho yokuzenzakalelayo </inkinobho>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Inkinobho encane </inkinobho>  
  11.   <button class = "btn btn-small" type = "inkinobho" > Inkinobho encane </inkinobho>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "inkinobho" > Inkinobho encane </inkinobho>  
  15.   <button class = "btn btn-mini" type = "inkinobho" > Inkinobho encane </inkinobho>  
  16. </p>

Dala izinkinobho zeleveli yebhulokhi—lezo ezinobubanzi obugcwele bomzali— ngokungeza .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "inkinobho" > Inkinobho yezinga lokuvimba </inkinobho>  
  2. <button class = "btn btn-large btn-block" type = "inkinobho" > Inkinobho yezinga lokuvimba </inkinobho>

Isimo sokukhubazeka

Yenza izinkinobho zibukeke zingachofozeki ngokuzifiphalisa emuva ngo-50%.

Isici sehange

Engeza .disabledikilasi <a>ezinkinobho.

Isixhumanisi esiyinhloko Isixhumanisi 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Isixhumanisi esiyinhloko </a>  
  2. <a href = "#" class = "btn btn-large disabled"> Isixhumanisi </a>

Amakhanda phezulu!Sisebenzisa .disablednjengesigaba sokusetshenziswa lapha, esifana nesigaba esivamile .active, ngakho-ke asikho isiqalo esidingekayo. Futhi, leli klasi elobuhle kuphela; kufanele usebenzise i-JavaScript yangokwezifiso ukuze ukhubaze izixhumanisi lapha.

Isici senkinobho

Engeza disabledisibaluli <button>ezinkinobho.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Inkinobho eyinhloko </inkinobho>   
  2. <button type = "button" class = "btn btn-large" kukhutshaziwe > Inkinobho </inkinobho>

Ikilasi elilodwa, omaka abaningi

Sebenzisa .btnikilasi ku- <a>, <button>, noma i- <input>elementi.

Isixhumanisi 
  1. <a class = "btn" href = ""> Isixhumanisi </a> _  
  2. <button class = "btn" type = "submit" > Inkinobho </inkinobho>  
  3. <input class = "btn" type = "button" value = "Okokufaka" >   
  4. <input class = "btn" type = "submit" value = "Hambisa" >

Njengomkhuba ongcono kakhulu, zama ukufanisa isici somongo wakho ukuze uqinisekise ukunikezwa okufanayo kwesiphequluli. Uma une- input, sebenzisa <input type="submit">inkinobho yakho.

Izithombe

Engeza amakilasi <img>entweni ukuze wenze isitayela kalula izithombe kunoma iyiphi iphrojekthi.

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

Amakhanda phezulu! .img-roundedfuthi .img-circleungasebenzi ku-IE7-8 ngenxa yokushoda border-radiuskokusekelwa.

Izimpawu ze- Glyphicons

Amaglyph esithonjana

Izithonjana eziyi-140 zefomu le-sprite, ezitholakala ngokumpunga okumnyama (okuzenzakalelayo) nokumhlophe, ezihlinzekwa ama- Glyphicons .

  • icon-glass
  • isithonjana-umculo
  • isithonjana-search
  • icon-envelope
  • icon-inhliziyo
  • inkanyezi yesithonjana
  • isithonjana-inkanyezi-engenalutho
  • isithonjana-umsebenzisi
  • isithonjana-ifilimu
  • icon-th-enkulu
  • isithonjana-th
  • icon-th-list
  • isithonjana-kulungile
  • isithonjana-susa
  • isithonjana-zoom-in
  • isithonjana-zoom-out
  • icon-off
  • isignali yesithonjana
  • icon-cog
  • udoti wesithonjana
  • icon-ekhaya
  • icon-file
  • isikhathi sesithonjana
  • icon-road
  • icon-download-alt
  • icon-download
  • isithonjana-layisha
  • icon-ibhokisi lokungenayo
  • icon-play- circle
  • isithonjana-phinda
  • isithonjana-ukuvuselela
  • icon-list-alt
  • icon-lock
  • ifulegi lesithonjana
  • icon-headphones
  • isithonjana-ivolumu-ivaliwe
  • isithonjana-ivolumu-phansi
  • isithonjana-ivolumu-phezulu
  • isithonjana-qrcode
  • ibhakhodi yesithonjana
  • icon-tag
  • icon-tags
  • icon-book
  • isithonjana-bookmark
  • icon-print
  • ikhamera yesithonjana
  • ifonti yesithonjana
  • isithonjana esigqamile
  • isithonjana-ithalikhi
  • isithonjana-ubude-kombhalo
  • isithonjana-ububanzi-kombhalo
  • isithonjana-qondanisa-kwesokunxele
  • isithonjana-qondanisa-maphakathi
  • isithonjana-qondanisa-kwesokudla
  • isithonjana-qondanisa-lungisa
  • icon-uhlu
  • isithonjana-i-indenti-kwesokunxele
  • isithonjana-i-indenti-kwesokudla
  • icon-facetime-video
  • isithonjana-isithombe
  • icon-ipensela
  • uphawu-imephu-umaka
  • icon-lungisa
  • isithonjana-tint
  • isithonjana-hlela
  • icon-share
  • isithonjana-hlola
  • isithonjana-hambisa
  • isithonjana-isinyathelo-emuva
  • isithonjana-shesha-emuva
  • isithonjana-emuva
  • isithonjana sokudlala
  • isithonjana-ikhefu
  • icon-stop
  • isithonjana-phambili
  • isithonjana-shesha-phambili
  • isithonjana-isinyathelo-phambili
  • khipha isithonjana
  • icon-chevron-kwesokunxele
  • icon-chevron-kwesokudla
  • uphawu-plus-sign
  • uphawu-susa-uphawu
  • uphawu-susa-uphawu
  • uphawu-ok-sign
  • uphawu-umbuzo-uphawu
  • uphawu-ulwazi-uphawu
  • isithonjana-skrini
  • isithonjana-susa-umbuthano
  • isithonjana-ok-umbuthano
  • icon-ban-indilinga
  • isithonjana-umcibisholo-kwesokunxele
  • isithonjana-umcibisholo-kwesokudla
  • isithonjana-umcibisholo-phezulu
  • isithonjana-umcibisholo-phansi
  • icon-share-alt
  • isithonjana-shintsha usayizi-sigcwele
  • isithonjana-resize-small
  • icon-plus
  • isithonjana-susa
  • isithonjana-asterisk
  • uphawu-isibabazo-uphawu
  • isithonjana-isipho
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-vala
  • uphawu-isexwayiso-uphawu
  • icon-plane
  • isithonjana-ikhalenda
  • icon-okungahleliwe
  • icon-amazwana
  • icon-umazibuthe
  • icon-chevron-up
  • icon-chevron-down
  • isithonjana-retweet
  • icon-shopping-cart
  • ifolda-isithonjana-vala
  • ifolda-isithonjana-ivuliwe
  • isithonjana-shintsha usayizi-okuqondile
  • isithonjana-shintsha usayizi-ovundlile
  • isithonjana-hdd
  • icon-bullhorn
  • icon-bell
  • isitifiketi-isithonjana
  • isithonjana-izithupha
  • isithonjana-izithupha-phansi
  • isithonjana-sesandleni-kwesokudla
  • isithonjana-isandla-kwesokunxele
  • isithonjana-isandla phezulu
  • icon-hand-down
  • isithonjana-indilinga-umcibisholo-kwesokudla
  • isithonjana-indilinga-umcibisholo-kwesokunxele
  • uphawu-umcibisholo-umcibisholo-up
  • isithonjana-umcibisholo-umcibisholo-phansi
  • icon-globe
  • icon-wrench
  • icon-imisebenzi
  • isihlungi sesithonjana
  • icon-briefcase
  • isithonjana-isikrini esigcwele

Isibaluli se-Glyphicons

Ama-Glyphicons Halflings awavamile ukutholakala mahhala, kodwa ilungiselelo phakathi kwe-Bootstrap nabadali be-Glyphicons lenze lokhu kwenzeka ngaphandle kwenkokhiso kuwena njengabathuthukisi. Njengokubonga, sikucela ukuthi ufake isixhumanisi ozikhethela sona esibuyela kuma- Glyphicons noma nini lapho kusebenza.

Isetshenziswa kanjani

Zonke izithonjana zidinga <i>umaki onesigaba esiyingqayizivele, esiqalwe ngokuthi icon-. Ukuze usebenzise, ​​beka ikhodi elandelayo cishe noma yikuphi:

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

Kukhona nezitayela ezitholakalayo zezithonjana ezihlanekezelwe (ezimhlophe), ezenziwe zalungiswa ngesigaba esisodwa esengeziwe. Sizophoqelela ngokukhethekile leli klasi ku-hover nezimo ezisebenzayo kuzixhumanisi ze-nav nezokwehla.

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

Amakhanda phezulu!Uma usebenzisa eceleni kweyunithi yezinhlamvu zombhalo, njengezinkinobho noma izixhumanisi ze-nav, qiniseka ukuthi ushiya isikhala ngemva <i>komaka ukuze uthole izikhala ezifanele.

Izibonelo zesithonjana

Wasebenzise ezinkinobho, emaqenjini enkinobho yebha yamathuluzi, ukuzulazula, noma okokufaka kwefomu okulungiselelwe ngaphambilini.

Izinkinobho

Iqembu lenkinobho kubha yamathuluzi yenkinobho
  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>
Okwehlayo eqenjini lezinkinobho
Umsebenzisi 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Umsebenzisi </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "imenyu eyehlayo" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Hlela </a></li>  
  6.     <li><a href = "#" ><i class = "icon-doti" ></i> Susa </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Vimbela </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Yenza umlawuli </a></li>  
  10.   </ul>
  11. </div>
Osayizi bezinkinobho
Inkanyezi Inkanyezi Inkanyezi 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Inkanyezi </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Inkanyezi </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Inkanyezi </a>

Ukuzulazula

  1. <ul class = "nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "isithonjana-sasekhaya icon-white" ></i> Ikhaya </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Library </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Izicelo </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Okuningi </a></li>  
  6. </ul>

Izinkambu zefomu

  1. <div class = "control-group" > 
  2.   <label class = "control-label" ye = "inputIcon" > Ikheli le- imeyili </label>  
  3.   <div class = "controls" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>