Ngaphezulu kwesikafula, izakhi ze-HTML eziyisisekelo zenziwe isitayela futhi zithuthukiswe ngamakilasi andayo ukuze kuhlinzekwe ukubukeka okusha, okungaguquki kanye nomuzwa.
Yonke igridi yokubhala isekelwe ezintweni ezimbili Eziguquguqukayo Ezincane efayeleni lethu eliguquguqukayo.elingaphansi: @baseFontSize
kanye @baseLineHeight
. Esokuqala siwusayizi wefonti eyisisekelo osetshenziswa kuyo yonke indawo kanti eyesibili ubude bomugqa oyisisekelo.
Sisebenzisa lezo ziguquguqukayo, kanye nezibalo ezithile, ukuze sakhe amamajini, ama-paddings, nobude bomugqa balo lonke uhlobo lwethu nokunye.
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 ut id elit.
I-Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. I-Donec sed odio dui.
Isici | Ukusetshenziswa | Ongakukhetha |
---|---|---|
<strong> |
Ukuze ugcizelele amazwibela ombhalo abalulekile | Lutho |
<em> |
Ukuze ugcizelele amazwibela ombhalo onengcindezi | Lutho |
<abbr> |
Igoqa izifinyezo nama-akhronimi ukuze ibonise inguqulo enwetshiwe kukuhambisa phezulu | Faka phakathi ongakukhetha title kumbhalo onwetshiwe |
<address> |
Ukuze uthole imininingwane yokuxhumana nedlozi layo eliseduze noma wonke umsebenzi | Londoloza ukufometha ngokuqeda yonke imigqa nge<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. I-Maecenas faucibus mollis interdum. I-Nulla vitae elit libero, i-pharetra augue.
Qaphela: Zizwe ukhululekile ukusebenzisa <b>
futhi <i>
ku-HTML5, kodwa ukusetshenziswa kwayo kushintshile kancane. <b>
ihloselwe ukugqamisa amagama noma imishwana ngaphandle kokudlulisa ukubaluleka okwengeziwe kuyilapho <i>
ngokuvamile kungokwezwi, amagama obuchwepheshe, njll.
Nazi izibonelo ezimbili zokuthi <address>
ithegi ingasetshenziswa:
Izifinyezo zenziwe isitayela ngombhalo omkhulu kanye nomngcele ongezansi onamachashazi akhanyayo. Futhi banekhesa yosizo ku-hover ukuze abasebenzisi babe nezinkomba ezengeziwe ukuthi okuthile kuzoboniswa ku-hover.
I- HTML iyinto engcono kakhulu kusukela kusinkwa esisikiwe.
Isifinyezo segama lesichasiso sithi attr .
Isici | Ukusetshenziswa | Ongakukhetha |
---|---|---|
<blockquote> |
Isici sezinga lokuvimba lokucaphuna okuqukethwe komunye umthombo | Engeza .pull-left namakilasi .pull-right ezinketho ezintantayo |
<small> |
Isici esikhethwayo sokwengeza ingcaphuno ebheke umsebenzisi, ngokuvamile umbhali onesihloko somsebenzi | Beka igama <cite> eduze kwesihloko noma igama lomthombo |
Ukuze ufake i-blockquote, vala <blockquote>
noma iyiphi i- HTML njengengcaphuno. Ukuze uthole izingcaphuno eziqondile sincoma a <p>
.
Faka <small>
into oyikhethayo ukuze ucaphune umthombo wakho futhi uzothola ideshi ye-em —
ngaphambi kwayo ngezinjongo zokwenza isitayela.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante venenatis. </p>
- <encane> Umuntu odumile </small>
- </blockquote>
Ama-blockquotes azenzakalelayo abhalwe kanje:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante venenatis.
Umuntu odumile eMzimbeni womsebenzi
Ukuze untante i-blockquote yakho kwesokudla, engeza class="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante venenatis.
Umuntu odumile eMzimbeni womsebenzi
<ul>
<ul class="unstyled">
<ol>
<dl>
Goqa amazwibela ekhodi nge- <code>
.
- Isibonelo , <ikhodi> isigaba < / code > kufanele isongwe njengokusemgqeni .
Sebenzisa <pre>
emigqeni eminingi yekhodi. Qiniseka ukuthi uguqula noma yimaphi ama-caret abe yizinhlamvu zawo ze-unicode ukuze anikezwe ngendlela efanele.
<p>Isampula yombhalo lapha...</p>
- <pre>
- <p>Isampula yombhalo lapha...</p>
- </pre>
Qaphela: Qiniseka ukuthi ugcina ikhodi phakathi <pre>
komaki eduze kwesokunxele ngangokunokwenzeka; izonikeza wonke amathebhu.
Thatha i- <pre>
elementi efanayo bese wengeza amakilasi amabili ongawakhetha ukuze uthole ukunikezwa okuthuthukisiwe.
- <p> Isampula yombhalo lapha... </p>
- <pre class = "prettyprint
- linenum" >
- <p>Isampula yombhalo lapha...</p>
- </pre>
Landa i-google-code-prettify futhi ubuke i-readme ukuze uyisebenzise.
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 ngobubanzi nokubekwa) amalebula Kufanele asetshenziswe ngaphakathi kwe- <thead> |
<caption> |
Incazelo noma isifinyezo salokho okuphethwe yithebula, ikakhulukazi ezifundeni zesikrini |
- <ithebula>
- <ikhanda>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </isihloko>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </ithebula>
Igama | Ikilasi | Incazelo |
---|---|---|
Okuzenzakalelayo | Lutho | Azikho izitayela, amakholomu nemigqa nje |
Okuyisisekelo | .table |
Imigqa evundlile kuphela phakathi kwemigqa |
Imingcele | .table-bordered |
Ifinyeza amakhona futhi yengeze umngcele ongaphandle |
Idube-umugqa | .table-striped |
Yengeza umbala ompunga okhanyayo emigqeni eyinqaba (1, 3, 5, njll) |
Kufingqiwe | .table-condensed |
Isika amaphedi aqondile phakathi, ukusuka ku-8px kuye ku-4px, phakathi kwakho konke td kanye th nezici |
Amathebula enziwa isitayela ngokuzenzakalela anemingcele embalwa kuphela ukuze kuqinisekiswe ukufundeka nokugcina ukwakheka. Ngo-2.0, .table
ikilasi liyadingeka.
- <table class = "table" >
- …
- </ithebula>
# | Igama | Isibongo | Ulimi |
---|---|---|---|
1 | Maka | Otto | CSS |
2 | uJakobe | Thornton | I-Javascript |
3 | Stu | I-Dent | I-HTML |
Thola okumnandi ngamatafula akho ngokungeza idube-striping—vele wengeze .table-striped
ikilasi.
Qaphela: Amathebula akhethiwe asebenzisa isikhethi se- :nth-child
CSS futhi awatholakali ku-IE7-IE8.
- <table class = "table-striped table" >
- …
- </ithebula>
# | Igama | Isibongo | Ulimi |
---|---|---|---|
1 | Maka | Otto | CSS |
2 | uJakobe | Thornton | I-Javascript |
3 | Stu | I-Dent | I-HTML |
Engeza imingcele ezungeze ithebula lonke namakhona ayindilinga ngezinjongo zobuhle.
- <table class = "table-bordered" >
- …
- </ithebula>
# | Igama | Isibongo | Ulimi |
---|---|---|---|
1 | UMark Otto | CSS | |
2 | uJakobe | Thornton | I-Javascript |
3 | Stu | I-Dent | |
3 | Brosef | Stalin | I-HTML |
Yenza amathebula akho ahlangane kakhudlwana ngokwengeza .table-condensed
ikilasi ukuze usike i-padding yeseli yetafula phakathi (kusuka ku-8px kuya ku-4px).
- <table class = "table-condensed table" >
- …
- </ithebula>
# | Igama | Isibongo | Ulimi |
---|---|---|---|
1 | Maka | Otto | CSS |
2 | uJakobe | Thornton | I-Javascript |
3 | Stu | I-Dent | I-HTML |
Zizwe ukhululekile ukuhlanganisa noma yimaphi amakilasi ethebula ukuze uzuze ukubukeka okuhlukile ngokusebenzisa noma yimaphi amakilasi atholakalayo.
- <table class = "table-striped table-striped table-condensed table-condensed" >
- ...
- </ithebula>
# | Igama | Isibongo | Ulimi |
---|---|---|---|
1 | Maka | Otto | CSS |
2 | uJakobe | Thornton | I-Javascript |
3 | Stu | I-Dent | I-HTML |
4 | Brosef | Stalin | I-HTML |
Ingxenye engcono kakhulu mayelana namafomu ku-Bootstrap ukuthi konke okokufaka kwakho nezilawuli zibukeka zizinhle noma ngabe uzakha kanjani kumakhaphu akho. Ayikho i-HTML engadingekile edingekayo, kodwa sinikeza amaphethini kulabo abayidingayo.
Izakhiwo eziyinkimbinkimbi kakhulu ziza namakilasi amafushane futhi anwebekayo ukuze kube lula ukwenza isitayela nokuhlanganisa imicimbi, ngakho uyasindwa kuzo zonke izinyathelo.
I-Bootstrap iza nokusekelwa kwezinhlobo ezine zezakhiwo zefomu:
Izinhlobo ezihlukene zezakhiwo zefomu zidinga izinguquko ezithile kumakhaphu, kodwa izilawuli ngokwazo zihlala futhi ziziphatha ngendlela efanayo.
Amafomu e-Bootstrap afaka izitayela zazo zonke izilawuli zefomu lesisekelo njengokufaka, indawo yombhalo, nokukhetha ongayilindela. Kodwa futhi iza nenani lezingxenye zangokwezifiso ezifana nokokufaka okunamathiselwe nokulungiselelwe kusengaphambili nokusekelwa kohlu lwamabhokisi okuhlola.
Amazwe afana nephutha, isexwayiso, kanye nempumelelo kufakiwe kuhlobo ngalunye lokulawula ifomu. Kufakwe nezitayela zezilawuli ezikhutshaziwe.
I-Bootstrap inikeza umaka nezitayela ezilula zezitayela ezine zamafomu ajwayelekile ewebhu.
Igama | Ikilasi | Incazelo |
---|---|---|
Okuqondile (okuzenzakalelayo) | .form-vertical (akudingekile) |
Amalebula astakiwe, aqondaniswe kwesokunxele phezu kwezilawuli |
Emugqeni | .form-inline |
Ilebula eqondaniswe kwesokunxele kanye nezilawuli zebhulokhi esemgqeni wesitayela esihlangene |
Sesha | .form-search |
Okokufaka kombhalo oyindingilizi eyengeziwe wobuhle bokusesha obujwayelekile |
Evundlile | .form-horizontal |
Ntanta kwesokunxele, amalebula aqondaniswe kwesokudla emugqeni ofanayo nezilawuli |
Nge-v2.0, sinokuzenzakalelayo okulula nokukhaliphile kwezitayela zefomu. Akukho makhaphu eyengeziwe, vele wenze izilawuli.
Ibonisa izitayela ze-WebKit ezizenzakalelayo, vele ungeze .form-search
izinkambu zokusesha eziyindingilizi ezengeziwe.
Okokufaka kuyileveli yebhulokhi okufanele iqalwe. Ukuze .form-inline
futhi .form-horizontal
, sisebenzisa i-inline-block.
Okuboniswa kwesokunxele yizo zonke izilawuli zefomu ezizenzakalelayo esizisekelayo. Nalu uhlu olunamachashazi:
Kuze kufike ku-v1.4, izitayela zefomu elizenzakalelayo le-Bootstrap zisebenzisa isakhiwo esivundlile. Nge-Bootstrap 2, sisuse leso sivimbelo ukuze sibe nokuzenzakalelayo okuhlakaniphile, okukala kakhudlwana kunoma yiluphi uhlobo.
I-Bootstrap ifaka izitayela zokugxila nezimo ezisekelwa isiphequluli disabled
. Sisusa i-Webkit ezenzakalelayo outline
bese sifaka u-a box-shadow
endaweni yayo :focus
.
Kuhlanganisa nezitayela zokuqinisekisa zamaphutha, izexwayiso, nempumelelo. Ukuze usebenzise, engeza isigaba sephutha kokuzungezile .control-group
.
- <i-fieldset
- class = "control-group error" >
- …
- </fieldset>
Amaqembu okokufaka—nombhalo onenezelwe noma olungiselelwe ngaphambili—anikeza indlela elula yokunikeza umongo owengeziwe wokufaka kwakho. Izibonelo ezinhle zifaka uphawu lwe-@ lwamagama abasebenzisi e-Twitter noma i-$ yezezimali.
Kuze kufike ku-v1.4, i-Bootstrap idinga umaka owengeziwe eduze kwamabhokisi okuhlola namarediyo ukuze uwabeke. Manje, kuyindaba elula ukuphinda <label class="checkbox">
lokho okugoqa ifayela le- <input type="checkbox">
.
Amabhokisi okuhlola asemgqeni namarediyo nawo ayasekelwa. Vele wengeze .inline
kunoma yikuphi .checkbox
noma .radio
usuqedile.
Ukuze usebenzise okokufaka kwangaphambilini noma kwenezele ngendlela esemgqeni, qiniseka ukuthi ubeka .add-on
futhi input
emgqeni ofanayo, ngaphandle kwezikhala.
Ukwengeza umbhalo wosizo wokufakwayo kwefomu lakho, faka umbhalo wosizo ongaphakathi komugqa <span class="help-inline">
noma umbhalo wosizo <p class="help-block">
ngemva kwento yokufaka.
:after
. Kumadokhumenti, sibonisa umbala wangemuva obomvu okhanyayo ku-hambisa phezulu ukuze sigqamise usayizi wesithonjana.
Esikhundleni sokwenza zonke izithonjana zibe isicelo esengeziwe, sizihlanganisele ku-sprite—inqwaba yezithombe efayeleni elilodwa elisebenzisa i-CSS ukubeka izithombe nge- background-position
. Lena yindlela efanayo esiyisebenzisa ku-Twitter.com futhi isisebenzele kahle.
Wonke amakilasi ezithonjana aqanjwe ngawo .icon-
ukuze uthole indawo efanele yamagama kanye nesikophu, njengezinye izinto zethu. Lokhu kuzosiza ukugwema izingxabano namanye amathuluzi.
I-Glyphicons isivumele ukuthi sisebenzise ama-Halflings asethwe kukhithi yethu yamathuluzi yomthombo ovulekile inqobo nje uma sinikeza isixhumanisi nekhredithi lapha kumadokhumenti. Sicela ucabange ukwenza okufanayo kumaphrojekthi akho.
Nge-v2.0.0, sikhethe ukusebenzisa <i>
ithegi kuzo zonke izithonjana zethu, kodwa azinacala—isiqalo esabiwe kuphela. Ukuze usebenzise, beka ikhodi elandelayo cishe noma yikuphi:
- <i class = "icon-search" ></i>
Kukhona nezitayela ezitholakalayo zezithonjana (ezimhlophe), ezenziwe zalungiswa ngesigaba esisodwa esengeziwe:
- <i class = "icon-search icon-white" ></i>
Kunamakilasi angu-120 ongakhetha kuwo ezithonjana zakho. Vele ungeze <i>
umaki onamakilasi alungile futhi usulungile. Ungathola uhlu olugcwele ku- sprites.less noma khona lapha kulo mbhalo.
Izithonjana zinhle, kepha umuntu angazisebenzisa kuphi? Nansi imibono embalwa:
Empeleni, noma yikuphi lapho ungabeka khona <i>
ithegi, ungabeka isithonjana.
Wasebenzise ezinkinobho, emaqenjini enkinobho yebha yamathuluzi, ukuzulazula, noma okokufaka kwefomu okulungiselelwe ngaphambilini.