Izinto ezisisiseko zeHTML zenziwe zaza zaphuculwa ngeeklasi ezandisiweyo.
<h1>
Zonke izihloko ze - HTML, <h6>
ziyafumaneka.
Ukungagqibekanga kweBootstrap yehlabathi yifont-size
14px , ene line-height
20px . Oku kusetyenziselwa kuyo yonke imihlathi. Ukongeza, (imihlathi) ifumana umda ongezantsi wesiqingatha sobude bomgca wabo (10px ngokungagqibekanga).<body>
<p>
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. Kwenziwe ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Kwenziwe 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>
Yenza umhlathi ugqame ngokongeza .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p iklasi = "inkokeli" > ... </p>
Isikali sokuchwetheza sisekelwe kwizinto ezimbini eziguquguqukayo EZINGAPHANTSI kwizinto eziguquguqukayo.Ngaphantsi : @baseFontSize
kwaye @baseLineHeight
. Eyokuqala sisiseko sobukhulu befonti esetyenziswa kuyo yonke indawo kwaye eyesibini bubude bomgca wesiseko. Sisebenzisa ezo ziguquguqukayo kunye nezibalo ezilula ukwenza imida, iipadi, kunye nokuphakama kwemigca yalo lonke uhlobo lwethu nokunye. Yenza ngokwezifiso kunye ne-Bootstrap iqhelanisa.
Sebenzisa iithegi ze-HTML zogxininiso olungagqibekanga ezinezimbo ezikhaphukhaphu.
<small>
Ukungagxininisi kumgca okanye iibhloko zombhalo, sebenzisa ithegi encinci.
Lo mgca wokubhaliweyo wenzelwe ukuphathwa njengoshicilelo olucolekileyo.
<p> <encinci> Lo mgca wokubhaliweyo wenzelwe ukuphathwa njengoshicilelo oluhle. </ encinci> </p>
Ukugxininisa i-snippet yesicatshulwa esinobunzima befonti enzima.
Isiqwengana esilandelayo sokubhaliweyo sinikezelwa njengombhalo ongqindilili .
<strong> inikezelwe njengombhalo ongqindilili </strong>
Ukugxininisa isiqwengana sokubhaliweyo okukekeleyo.
Isiqwengana esilandelayo sokubhaliweyo sinikezelwa njengombhalo okekeleyo .
<em> inikezelwe njengombhalo okekeleyo </em>
Iintloko phezulu!Zive ukhululekile ukusebenzisa <b>
nakwi <i>
-HTML5. <b>
yenzelwe ukuqaqambisa amagama okanye amabinzana ngaphandle kokudlulisela ukubaluleka okongeziweyo ngelixa <i>
ubukhulu becala iselizwi, amagama obugcisa, njl.
Ukulungelelanisa isicatshulwa ngokulula kumacandelo aneeklasi zolungelelwaniso lokubhaliweyo.
Umbhalo olungelelaniswe ekhohlo.
Isiqendu esilungelelaniswe embindini.
Isiqendu esilungelelaniswe ekunene.
- <p class = "text-left" > Umbhalo olungelelaniswe ekhohlo. </p>
- <p class = "text-center" > Isicatshulwa esilungelelaniswe embindini. </p>
- <p class = "text-right" > umbhalo olungelelaniswe ekunene. </p>
Ukuhambisa intsingiselo ngombala ngeqela leeklasi eziluncedo zogxininiso.
Fusce dapibus, tellus ac cursus commodo, tor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Kwenziwe 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.
- <p iklasi = "ithulisiwe" > Fusce dapibus, tellus ac cursus commodo, tor mauris nibh. </p>
- <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p>
- <p iklasi = "impazamo yombhalo" > Donec ullamcorper nulla non metus auctor fringilla. </p>
- <p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p>
- <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>
Uzalisekiso olucwangcisiweyo lwesiqalelo se-HTML <abbr>
kwizifinyezo kunye nee-akhronimi ukubonisa inguqulelo eyandisiweyo kwi-hover. Ushunqulelo olunophawu title
loyelelwano lunomda osezantsi onamachaphaza akhanyayo kunye nekhesa yoncedo kwi-hover, ebonelela ngomongo owongezelelweyo kwi-hover.
<abbr>
Kumbhalo owandisiweyo kwihove ende yesifinyezo, quka title
uphawu loyelelwano.
Isishunqulelo segama loyelelwano sithi attr .
<abbr isihloko = "uphawu" > attr </abbr>
<abbr class="initialism">
Yongeza .initialism
kwisifinyezo sefonti encinci kancinane.
I- HTML yeyona nto ilungileyo ukusukela kwisonka esisikiweyo.
<abbr title = "ULwimi lweMarkup HyperText" class = "initialism" > HTML </abbr>
Bonisa iinkcukacha zoqhagamshelwano zoyena khokho ukufutshane okanye wonke umsebenzi.
<address>
Gcina ukufomatha ngokuphelisa yonke imigca nge <br>
.
- <idilesi>
- <strong> Twitter, Inc. </strong><br>
- 795 Folsom Ave, Suite 600 <br>
- San Francisco, CA 94107 <br>
- <abbr isihloko = "Ifowuni" > P: </abbr> (123) 456-7890
- </ idilesi>
- <idilesi>
- <strong> Igama elipheleleyo </strong><br>
- <a href = "mailto:#" > [email protected] </a>
- </ idilesi>
Ukucaphula iibhloko zomxholo komnye umthombo ngaphakathi koxwebhu lwakho.
Gquba <blockquote>
malunga nayo nayiphi na i- HTML njengesicatshulwa. Kwiingcaphuno ezithe ngqo sicebisa ukuba a <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante. </p>
- </blockquote>
Isitayela kunye noshintsho lomxholo kwiinguqu ezilula kwi-blockquote eqhelekileyo.
Yongeza <small>
ithegi yokuchonga umthombo. Gquba igama lomthombo womsebenzi kwi <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante.
Umntu odumileyo kwiSihloko soMthombo
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante. </p>
- <encinci> Umntu odumileyo <cite isihloko = "Isihloko somthombo" > Isihloko soMthombo </cite></small>
- </blockquote>
Sebenzisa .pull-right
ibhloko edadayo, elungelelaniswe ekunene.
- <blockquote class = "tsala-ekunene" >
- ...
- </blockquote>
Uluhlu lwezinto apho umyalelo awubalulekanga ngokucacileyo .
- <ul>
- <li> ... </ li>
- </ul>
Uluhlu lwezinto apho ulandelelwano lubaluleke kakhulu.
- <ol>
- <li> ... </ li>
- </ ol>
Susa i- list-style
padding engagqibekanga kunye nesekhohlo kwizinto zoluhlu (abantwana abasondeleyo kuphela).
- <ul class = "unstyled" >
- <li> ... </ li>
- </ul>
Beka zonke izinto zoluhlu kumgca omnye kunye inline-block
ne-padding ekhanyayo.
- <ul iklasi = "inline" >
- <li> ... </ li>
- </ul>
Uluhlu lwamagama aneenkcazo ezinxulumene nawo.
- <dl>
- <dt> ... </ dt>
- <dd> ... </ dd>
- </dl>
Yenza imigaqo kunye neenkcazo <dl>
ngokulandelelana kwicala elinye.
- <dl iklasi = "dl-horizontal" >
- <dt> ... </ dt>
- <dd> ... </ dd>
- </dl>
Iintloko phezulu!Uluhlu lwenkcazo ethe tye luya kucutha amagama amade kakhulu ukuba angangena kuluhlu lwasekhohlo text-overflow
. Kwiindawo zokujonga ezimxinwa, ziya kutshintshela kuyilo olupakishweyo olungagqibekanga.
Songa iziqwengana zekhowudi nge <code>
.
<section>
kufuneka isongwe njengomgca.
- Umzekelo , < ikhowudi> & lt ; icandelo & gt ;</ ikhowudi > kufuneka isongwe njengongaphakathi .
Sebenzisa <pre>
kwimigca emininzi yekhowudi. Qiniseka ukuba ubaleka naziphi na izibiyeli ze-engile kwikhowudi yonikezelo olufanelekileyo.
<p>Isampuli yombhalo apha...</p>
- <pre>
- <p>Umzekelo wokubhaliweyo apha...</p>
- </pre>
Iintloko phezulu!Qinisekisa ukugcina ikhowudi ngaphakathi <pre>
kweethegi ngokusondeleyo ekhohlo kangangoko; iyakwenza zonke iithebhu.
Unokukhetha ukongeza .pre-scrollable
iklasi eya kuseka ubude bobude obuyi-350px kwaye ibonelele nge-y-axis scrollbar.
Kwi-styling esisiseko-i-padding ekhanyayo kunye ne-horizontal dividers kuphela-yongeza iklasi yesiseko .table
kuyo nayiphi na <table>
.
# | Igama lokuqala | Ifani | Igama lomsebenzisi |
---|---|---|---|
1 | Phawula | Otto | @mdo |
2 | uYakobi | Thornton | @fat |
3 | Larry | intaka |
- < iklasi yetafile = "itafile" >
- …
- </ table>
Yongeza nayiphi na kwezi klasi zilandelayo kwiklasi .table
yesiseko.
.table-striped
Yongeza i-zebra-striping nakuwuphi na umqolo wetafile ngaphakathi <tbody>
ngokudlula :nth-child
umkhethi we-CSS (awufumaneki kwi-IE7-8).
# | Igama lokuqala | Ifani | Igama lomsebenzisi |
---|---|---|---|
1 | Phawula | Otto | @mdo |
2 | uYakobi | Thornton | @fat |
3 | Larry | intaka |
- < iklasi yetafile = "itafile-imigca yetafile" >
- …
- </ table>
.table-bordered
Yongeza imida kunye neekona ezijikelezileyo kwitafile.
# | Igama lokuqala | Ifani | Igama lomsebenzisi |
---|---|---|---|
1 | Phawula | Otto | @mdo |
Phawula | Otto | @getbootstrap | |
2 | uYakobi | Thornton | @fat |
3 | Larry intaka |
- < iklasi yetafile = "itafile yetafile-umda" >
- …
- </ table>
.table-hover
Yenza imo yokushukuma kwimiqolo yetafile ngaphakathi kwe <tbody>
.
# | Igama lokuqala | Ifani | Igama lomsebenzisi |
---|---|---|---|
1 | Phawula | Otto | @mdo |
2 | uYakobi | Thornton | @fat |
3 | Larry intaka |
- < iklasi yetafile = "itafile yetafile-hover" >
- …
- </ table>
.table-condensed
Yenza iitafile zihlangane ngakumbi ngokusika i-cell padding kwisiqingatha.
# | Igama lokuqala | Ifani | Igama lomsebenzisi |
---|---|---|---|
1 | Phawula | Otto | @mdo |
2 | uYakobi | Thornton | @fat |
3 | Larry intaka |
- < iklasi yetafile = "itafile yetafile-icondensed" >
- …
- </ table>
Sebenzisa iiklasi zomxholo ukufaka imibala kwimigca yetafile.
Iklasi | Inkcazo |
---|---|
.success |
Ibonisa isenzo esiyimpumelelo okanye esilungileyo. |
.error |
Ibonisa isenzo esinobungozi okanye esinokuthi sibe sibi. |
.warning |
Ibonisa isilumkiso esinokufuna ukuhoywa. |
.info |
Isetyenziswa njengenye indlela kwizimbo ezingagqibekanga. |
# | Imveliso | Intlawulo ethathiweyo | Ubume |
---|---|---|---|
1 | I-TB - Ngenyanga | 01/04/2012 | Ivunyiwe |
2 | I-TB - Ngenyanga | 02/04/2012 | Yaliwe |
3 | I-TB - Ngenyanga | 03/04/2012 | Ilindile |
4 | I-TB - Ngenyanga | 04/04/2012 | Fowuna ukuze uqinisekise |
- ...
- < tr class = "impumelelo" >
- <td> 1 < /td>
- <td>TB - Ngenyanga</ td >
- <td> 01 / 04 / 2012 < /td>
- <td>Ivunyiwe</ td >
- </ tr >
- ...
Uluhlu lwezinto ezixhaswayo zetafile yeHTML kunye nendlela ekufuneka zisetyenziswe ngayo.
Ithegi | Inkcazo |
---|---|
<table> |
Isiqalelo sokusonga sokubonisa idatha kwifomathi yetheyibhuli |
<thead> |
Isiqulatho sesiqalelo semigca yeheader yetheyibhile ( <tr> ) ukuleyibhelisha kwimiqolo yetafile |
<tbody> |
Isiqulatho sesiqalelo semiqolo yetafile ( <tr> ) kumzimba wetheyibhile |
<tr> |
Isiqulatho sesiqalelo seseti yeeseli zetafile ( <td> okanye <th> ) evela kumqolo omnye |
<td> |
Iseli yetafile ehlala ikho |
<th> |
Iseli yetheyibhile ekhethekileyo yoluhlu (okanye umqolo, ngokuxhomekeke kububanzi kunye nokubekwa) iilebhile |
<caption> |
Inkcazo okanye isishwankathelo sezinto ezigcinwe yitafile, ngakumbi luncedo kubafundi besikrini |
- <itheyibhile>
- <caption> ... </caption>
- <intloko>
- <tr>
- <th> ... </th>
- <th> ... </th>
- </tr>
- </ intloko>
- <iqela>
- <tr>
- <td> ... </td>
- <td> ... </td>
- </tr>
- </ umzimba>
- </ table>
Ulawulo lwefomu yomntu ngamnye lufumana isimbo, kodwa ngaphandle koluhlu olusisiseko olufunekayo <form>
okanye utshintsho olukhulu kuphawulo. Iziphumo zipakishwe, iilebhile ezilungelelaniswe ekhohlo phezu kolawulo lweefom.
- <ifomu>
- <iseti yendawo>
- <legend> ilivo < /legend>
- <ileyibhile> Igama leleyibhile </ ileyibheli>
- <input type = "text" isibambi- ndawo = "Chwetheza into..." >
- <span class = "help-block" > Umzekelo wokubhaliweyo koncedo lwebhloko apha. </ span>
- < iklasi yeleyibhile = "ibhokisi yokukhangela" >
- <input type = "checkbox" > Ndijonge
- </ ileyibheli>
- < uhlobo lweqhosha = "submit " class = "btn" > Ngenisa </ iqhosha>
- </ iseti yendawo>
- </ ifom>
Ibandakanywe neBootstrap zintathu iifom ozikhethelayo zoyilo kwiimeko zokusetyenziswa okuqhelekileyo.
Yongeza .form-search
kwifom nakwi .search-query
- <input>
ukwenzela igalelo lombhalo olongezelelweyo.
- < iklasi yefom = "ifomu-ukukhangela" >
- <input type = "text" class = "input-medium search-query" >
- < uhlobo lweqhosha = "submit " class = "btn" > Khangela </ iqhosha>
- </ ifom>
Yongeza .form-inline
kwiilebhile ezilungelelaniswe ekhohlo kunye nolawulo lwebhloko engaphakathi kuyilo olubambeneyo.
- <ifom yeklasi = "ifom-inline" >
- <input type = "text" class = "input-small" placeholder = "I-imeyile" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- < iklasi yeleyibhile = "ibhokisi yokukhangela" >
- <input type = "checkbox" > Ndikhumbule
- </ ileyibheli>
- < uhlobo lweqhosha = "submit " class = "btn" > Sayina </ iqhosha>
- </ ifom>
Lungelelanisa ekunene iilebhile kwaye uzidadalise ekhohlo ukuze uzenze zivele kumgca omnye njengolawulo. Ifuna olona tshintsho lophawulo lusuka kwifomu emiyo:
.form-horizontal
kwifom.control-group
.control-label
kwileyibhile.controls
ukulungiselela ulungelelwaniso olululo
- < iklasi yefom = "ifom-horizontal" >
- <div class = "control-group" >
- <label class = "control-label" for = "inputEmail" > I- imeyile </label>
- <div class = "controls" >
- <input type = "text" id = "inputEmail" isibambi- ndawo = "I-imeyile" >
- </ div>
- </ div>
- <div class = "control-group" >
- < iklasi yeleyibhile = "control-label" for = "inputPassword" > Igama lokugqitha </label>
- <div class = "controls" >
- <input type = "password" id = "inputPassword" placeholder = " Password" >
- </ div>
- </ div>
- <div class = "control-group" >
- <div class = "controls" >
- < iklasi yeleyibhile = "ibhokisi yokukhangela" >
- <input type = "checkbox" > Ndikhumbule
- </ ileyibheli>
- < uhlobo lweqhosha = "submit " class = "btn" > Sayina </ iqhosha>
- </ div>
- </ div>
- </ ifom>
Imizekelo yolawulo lweefom eziqhelekileyo ezixhaswa kuyilo lwefom yomzekelo.
Uninzi lwefomu yolawulo oluxhaphakileyo, imimandla yokufaka esekwe ngokubhaliweyo. Ibandakanya inkxaso yazo zonke iintlobo ze-HTML5: umbhalo, igama lokugqitha, ixesha, ixesha lendawo, umhla, inyanga, ixesha, iveki, inombolo, i-imeyile, url, ukukhangela, umnxeba, kunye nombala.
Ifuna ukusetyenziswa okuxeliweyo type
ngamaxesha onke.
- <input type = "text" isibambi-ndawo = "Igalelo lombhalo" >
Ulawulo lwefom oluxhasa imigca emininzi yokubhaliweyo. Guqula rows
uphawu xa kuyimfuneko.
- <textarea rows = "3" ></textarea>
Iibhokisi zokukhangela zezokukhetha enye okanye iinketho ezininzi kuluhlu ngelixa oonomathotholo bezokukhetha ukhetho olunye kwabaninzi.
- < iklasi yeleyibhile = "ibhokisi yokukhangela" >
- <input type = "checkbox" value = "" >
- Ukhetho lokuqala yile kwaye leya-qiniseka ukuba ubandakanya ukuba kutheni ilungile
- </ ileyibheli>
- < iklasi yelebhile = "irediyo" >
- <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" ikhangelwe >
- Ukhetho lokuqala yile kwaye leya-qiniseka ukuba ubandakanya ukuba kutheni ilungile
- </ ileyibheli>
- < iklasi yelebhile = "irediyo" >
- <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >
- Ukhetho lwesibini lunokuba yenye into kwaye ukuyikhetha kuya kuyeka ukukhetha enye
- </ ileyibheli>
Yongeza .inline
iklasi kuluhlu lweebhokisi zokukhangela okanye iirediyo zolawulo zivela kumgca omnye.
- < iklasi yeleyibhile = "ibhokisi yokukhangela emgceni" >
- <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1
- </ ileyibheli>
- < iklasi yeleyibhile = "ibhokisi yokukhangela emgceni" >
- <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2
- </ ileyibheli>
- < iklasi yeleyibhile = "ibhokisi yokukhangela emgceni" >
- <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3
- </ ileyibheli>
Sebenzisa inketho emiselweyo okanye uchaze u- multiple="multiple"
a ukubonisa iinketho ezininzi ngaxeshanye.
- <khetha>
- <ukhetho> 1 </ ukhetho>
- <ukhetho> 2 </option>
- <ukhetho> 3 </ ukhetho>
- <ukhetho> 4 </ ukhetho>
- <ukhetho> 5 </ ukhetho>
- </ khetha>
- <khetha ezininzi = "ezininzi" >
- <ukhetho> 1 </ ukhetho>
- <ukhetho> 2 </option>
- <ukhetho> 3 </ ukhetho>
- <ukhetho> 4 </ ukhetho>
- <ukhetho> 5 </ ukhetho>
- </ khetha>
Ukongeza phezulu kulawulo lwebrawuza esele ikhona, iBootstrap ibandakanya ezinye iinxalenye zefom eluncedo.
Yongeza umbhalo okanye amaqhosha phambi okanye emva kwalo naliphi na igalelo elisekwe kwiteksti. Qaphela ukuba select
izinto azixhaswanga apha.
Songa i- .add-on
i input
kunye nenye yeeklasi ezimbini ukulungiselela okanye ukongeza isicatshulwa kwigalelo.
- <div class = "input-prepend" >
- <span class = "i-add-on" > @ </span>
- <input class = "span2" id = "prependedInput" type = "text" isibambi- ndawo = "Igama lomsebenzisi" >
- </ div>
- <div class = "input-append" >
- < iklasi yegalelo = "span2" id = "appendedInput" type = "text" >
- <span class = "add-on" > .00 </span>
- </ div>
Sebenzisa zombini iiklasi kunye nemizekelo emibini .add-on
yokulungiselela kunye nokongeza igalelo.
- <div class = "input-prepend input-append" >
- <span class = "add-on" > $ </span>
- < iklasi yegalelo = "span2" id = "appendedPrependedInput" type = "text" >
- <span class = "add-on" > .00 </span>
- </ div>
Endaweni ye-a <span>
enesicatshulwa, sebenzisa u- .btn
a ukuncamathelisa iqhosha (okanye amabini) kwigalelo.
- <div class = "input-append" >
- < iklasi yegalelo = "span2" id = "appendedInputButton" type = "text" >
- < iklasi yeqhosha = "btn" type = "iqhosha" > Yiya! </ iqhosha>
- </ div>
- <div class = "input-append" >
- < iklasi yegalelo = "span2" id = "appendedInputButtons" type = "text" >
- < iklasi yeqhosha = "btn" type = "iqhosha" > Khangela </ iqhosha>
- < iklasi yeqhosha = "btn" uhlobo = "iqhosha" > Iinketho </ iqhosha>
- </ div>
- <div class = "input-append" >
- < iklasi yegalelo = "span2" id = "appendedDropdownButton" type = "text" >
- <div iklasi = "iqela le-btn" >
- < iklasi yeqhosha = "btn dropdown-toggle" data-toggle = "dropdown" >
- Isenzo
- <span class = "caret" > </ span>
- </ iqhosha>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </ div>
- </ div>
- <div class = "input-prepend" >
- <div iklasi = "iqela le-btn" >
- < iklasi yeqhosha = "btn dropdown-toggle" data-toggle = "dropdown" >
- Isenzo
- <span class = "caret" > </ span>
- </ iqhosha>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </ div>
- < iklasi yegalelo = "span2" id = "prependedDropdownButton" type = "text" >
- </ div>
- <div class = "input-prepend input-append" >
- <div iklasi = "iqela le-btn" >
- < iklasi yeqhosha = "btn dropdown-toggle" data-toggle = "dropdown" >
- Isenzo
- <span class = "caret" > </ span>
- </ iqhosha>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </ div>
- < iklasi yegalelo = "span2" id = "appendedPrependedDropdownButton" type = "text" >
- <div iklasi = "iqela le-btn" >
- < iklasi yeqhosha = "btn dropdown-toggle" data-toggle = "dropdown" >
- Isenzo
- <span class = "caret" > </ span>
- </ iqhosha>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </ div>
- </ div>
- <ifomu>
- <div class = "input-prepend" >
- <div class = "btn-iqela" > ... </div>
- <input type = "text" >
- </ div>
- <div class = "input-append" >
- <input type = "text" >
- <div class = "btn-iqela" > ... </div>
- </ div>
- </ ifom>
- < iklasi yefom = "ifomu-ukukhangela" >
- <div class = "input-append" >
- <input type = "text" class = "span2 search-query" >
- < uhlobo lweqhosha = "submit " class = "btn" > Khangela </ iqhosha>
- </ div>
- <div class = "input-prepend" >
- < uhlobo lweqhosha = "submit " class = "btn" > Khangela </ iqhosha>
- <input type = "text" class = "span2 search-query" >
- </ div>
- </ ifom>
Sebenzisa iiklasi zokulinganisa ubungakanani obufana .input-large
okanye utshatise amagalelo akho kwigridi yobukhulu bekholamu usebenzisa .span*
iiklasi.
Yenza nayiphi na <input>
okanye <textarea>
into iziphathe njengomgangatho webhloko.
- < iklasi yegalelo = "input-block-level" type = "text" placeholder = ".input-block-level" >
- < iklasi yegalelo = "input-mini" type = "text" isibambi- ndawo = ".input-mini" >
- < iklasi yegalelo = "input-small" type = "text" placeholder = ".input-small" >
- < iklasi yegalelo = "input-medium" type = "text" isibambi- ndawo = ".input-medium" >
- < iklasi yegalelo = "input-large" type = "text" placeholder = ".input-large" >
- < iklasi yegalelo = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
- < iklasi yegalelo = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >
Iintloko phezulu!Kwiinguqulelo ezizayo, siza kube sitshintsha ukusetyenziswa kwezi klasi zongeniso zihambelana nobukhulu bethu bamaqhosha. Umzekelo, .input-large
iyakwandisa i-padding kunye nobukhulu befonti yegalelo.
Sebenzisa .span1
ukuya .span12
kumagalelo ahambelana nobukhulu obufanayo bekholamu zegridi.
- < iklasi yegalelo = "span1" type = "text" placeholder = ".span1" >
- < iklasi yegalelo = "span2" type = "text" placeholder = ".span2" >
- < iklasi yegalelo = "span3" type = "text" placeholder = ".span3" >
- <khetha iklasi = "span1" >
- ...
- </ khetha>
- <khetha iklasi = "span2" >
- ...
- </ khetha>
- <khetha iklasi = "span3" >
- ...
- </ khetha>
Kumagalelo egridi ngomgca ngamnye, sebenzisa udidi .controls-row
lwesilungisi kwisithuba esifanelekileyo . Idada amagalelo ukudiliza indawo emhlophe, ibeka imida eyiyo, kwaye icoca into edadayo.
- <div class = "controls" >
- < iklasi yegalelo = "span5" type = "text" isibambi- ndawo = ".span5" >
- </ div>
- <div class = "uluhlu lolawulo lolawulo" >
- <input class = "span4" type = "text" placeholder = ".span4" >
- < iklasi yegalelo = "span1" type = "text" placeholder = ".span1" >
- </ div>
- ...
Nikeza idatha kwifomu engenakuhleleka ngaphandle kokusebenzisa uphawu lokwenene.
- <span class = "input-xlarge-input-input" > Ixabiso elithile apha </span>
Phelisa ifom ngeqela lezenzo (amaqhosha). Xa ibekwe ngaphakathi kwe .form-actions
, amaqhosha aya kuzibophelela ngokuzenzekela ukuhambelana nolawulo lwefom.
- <div class = "ifomu-izenzo" >
- < uhlobo lweqhosha = "submit " class = "btn btn-primary" > Gcina utshintsho </ iqhosha>
- < uhlobo lweqhosha = "iqhosha" iklasi = "btn" > Rhoxisa </ iqhosha>
- </ div>
Inkxaso yenqanaba le-inline kunye nebhloko yesicatshulwa soncedo esivela malunga nolawulo lwefom.
- <input type = "text" ><span class = "help-inline" > umbhalo woncedo lwangaphakathi </span>
- <input type = "text" ><span class = "help-block" > Ibhloko ende yesicatshulwa soncedo esiqhekeza kumgca omtsha kwaye sinokudlulela ngaphaya komgca omnye. </ span>
Nika ingxelo kubasebenzisi okanye abatyeleli ngeengxelo ezisisiseko malunga nolawulo lweefomu kunye neelebhile.
Sisusa izimbo ezingagqibekanga outline
kulawulo oluthile kwaye sisebenzise u a box-shadow
endaweni yalo :focus
.
- <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Oku kugxilwe..." >
Ungeniso lwesimbo ngokusebenza komkhangeli zincwadi ongagqibekanga nge :invalid
. Cacisa i type
, yongeza required
uphawu ukuba intsimi ayikhethi, kwaye (ukuba ikhona) khankanya i pattern
.
Oku akufumaneki kwiinguqulelo ze-Internet Explorer 7-9 ngenxa yokunqongophala kwenkxaso yeCSS yabakhethi bobuxoki.
- <input class = "span3" type = "imeyile" efunekayo >
Yongeza disabled
uphawu kwigalelo ukukhusela igalelo lomsebenzisi kwaye uqalise inkangeleko eyahlukileyo kancinane.
- <input class = "input-xlarge" id = "disabledInput" type = "text" isibambi- ndawo = "Igalelo elingasebenziyo apha..." luvaliwe >
I-Bootstrap ibandakanya izimbo zokuqinisekisa impazamo, isilumkiso, ulwazi, kunye nemiyalezo yempumelelo. Ukusebenzisa, yongeza iklasi efanelekileyo kwindawo engqongileyo .control-group
.
- <div class = "isilumkiso-iqela lolawulo" >
- <label class = "control-label" for = "inputWarning" > Igalelo elinesilumkiso </label>
- <div class = "controls" >
- <input type = "text" id = "inputWarning" >
- <span class = "help-inline" > Kukho into enokuba ayihambanga kakuhle </span>
- </ div>
- </ div>
- <div class = "impazamo yeqela lokulawula" >
- <label class = "control-label" for = "inputError" > Igalelo ngempazamo </ label>
- <div class = "controls" >
- <input type = "text" id = "inputError" >
- <span class = "help-inline" > Nceda ulungise impazamo </span>
- </ div>
- </ div>
- <div class = "ulwazi lweqela lokulawula" >
- < iklasi yeleyibhile = "control-label" for = "inputInfo" > Igalelo ngolwazi </label>
- <div class = "controls" >
- <input type = "text" id = "inputInfo" >
- <span class = "help-inline" > Igama lomsebenzisi sele lithathiwe </span>
- </ div>
- </ div>
- <div class = "ulawulo-impumelelo yeqela" >
- <label class = "control-label" for = "inputSuccess" > Igalelo elinempumelelo </label>
- <div class = "controls" >
- <input type = "text" id = "inputSuccess" >
- <span class = "help-inline" > Woohoo! </ span>
- </ div>
- </ div>
Yongeza iiklasi <img>
kwinto ukwenza ngokulula isitayile imifanekiso kuyo nayiphi na iprojekthi.
- <img src = "..." iklasi = "i-img-rounded" >
- <img src = "..." iklasi = "img-circle" >
- <img src = "..." iklasi = "img-polaroid" >
Iintloko phezulu! .img-rounded
kwaye .img-circle
ungasebenzi kwi-IE7-8 ngenxa yokungabikho border-radius
kwenkxaso.
Iimpawu ze-140 kwifom ye-sprite, ekhoyo kwi-grey emnyama (engagqibekanga) kunye nemhlophe, enikezwe yi- Glyphicons .
IiGlyphicons Halflings azifumaneki simahla, kodwa ilungiselelo phakathi kweBootstrap kunye nabadali beGlyphicons benze oku kwenzeke ngaphandle kweendleko kuwe njengabaphuhlisi. Njengombulelo, siyakucela ukuba ubandakanye ikhonkco lokubuyela kwiiGlyphicons nanini na xa kunokwenzeka.
Zonke ii-icon zifuna <i>
ithegi eneklasi eyodwa, enesimaphambili nge icon-
. Ukusebenzisa, beka le khowudi ilandelayo naphi na:
- <i class = "icon-search" > </i>
Kukwakho nezimbo ezifumanekayo zee-icon eziguqulweyo (ezimhlophe), ezenziwe zalungiswa ngeklasi enye eyongezelelweyo. Siza kunyanzelisa ngokukodwa le klasi kwi-hover kunye neendawo ezisebenzayo ze-nav kunye nekhonkco lokuhla.
- <i class = "icon-search icon-white" > </i>
Iintloko phezulu!Xa usebenzisa ecaleni kwemitya yokubhaliweyo, njengakumaqhosha okanye amakhonkco e-nav, qiniseka ukuba ushiya isithuba emva <i>
kwethegi yesithuba esifanelekileyo.
Zisebenzise kumaqhosha, amaqela amaqhosha ebar yesixhobo, ukukhangela, okanye amagalelo efomu esele ibekiwe.
- <div class = "btn-toolbar" >
- <div iklasi = "iqela le-btn" >
- <a iklasi = "btn" href = "#" ><i class = "icon-align-left" ></i></a>
- <a iklasi = "btn" href = "#" ><i class = "icon-align-center" ></i></a>
- <a iklasi = "btn" href = "#" ><i class = "icon-align-right" ></i></a>
- <a iklasi = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>
- </ div>
- </ div>
- <div iklasi = "iqela le-btn" >
- <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Umsebenzisi </a>
- <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>
- <ul class = "dropdown-menu" >
- <li><a href = "#" ><i class = "icon-pensile" ></i> Hlela </a></li>
- <li><a href = "#" ><i class = "icon-trash" ></i> Cima </a></li>
- <li><a href = "#" ><i class = "icon-ban-isangqa" ></i> Vala </a> </li>
- <li iklasi = "umahluli" > </ li>
- <li><a href = "#" ><i class = "i" ></i> Yenza umlawuli </a></li>
- </ul>
- </ div>
- <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Star </a>
- <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Star </a>
- <a iklasi = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Star </a>
- <ul class = "nav nav-list" >
- <li iklasi = "esebenzayo" ><a href = "#" ><i class = "i-icon-yekhaya icon-emhlophe" ></i> Ekhaya </a></li>
- <li><a href = "#" ><i class = "icon-book" ></i> Library </a></li>
- <li><a href = "#" ><i class = "icon-pensile" ></i> Usetyenziso </a></li>
- <li><a href = "#" ><i class = "i" ></i> Misc </a></li>
- </ul>
- <div class = "control-group" >
- <label class = "control-label" for = "inputIcon" > Idilesi ye -imeyile </label>
- <div class = "controls" >
- <div class = "input-prepend" >
- <span class = "yongeza-on" ><i class = "icon-mvulophu" ></i></span>
- <input class = "span2" id = "inputIcon" type = "text" >
- </ div>
- </ div>
- </ div>