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: @baseFontSizekanye @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 isibaluli ozikhethela .initialismikilasi ngezifinyezo zofeleba abakhulu. |
<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 ezinesibaluli titlezinomngcele ongezansi onamachashazi akhanyayo kanye nekhesa yosizo ekuhambiseni phezulu. Lokhu kunikeza abasebenzisi inkomba eyengeziwe yokuthi kukhona okuzoboniswa phezulu.
Engeza initialismikilasi kusifinyezo ukuze ukwandise ukuvumelana kwe-typographic ngokusinika usayizi wombhalo omncane kancane.
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-leftnamakilasi .pull-rightezinketho 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 phakathi <small>into oyikhethayo ukuze ucaphune umthombo wakho futhi uzothola ideshi ye-em —ngaphambi kwayo ngezinjongo zesitayela.
- <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>
<dl class="dl-horizontal">
Amakhanda phezulu! Uhlu lwezincazelo ezivundlile luzonciphisa amagama amade kakhulu ukuthi angangena ekulungisweni kwekholomu kwesokunxele text-overflow. Ezingobeni zokubuka ezinciphile, zizoshintshela kusakhiwo esistakiwe esizenzakalelayo.
Goqa amazwibela ekhodi nge- <code>.
- Isibonelo , <ikhodi> isigaba < / code > kufanele isongwe njengengaphakathi .
Sebenzisa <pre>imigqa eminingi yekhodi. Qiniseka ukuthi ubalekela noma yibaphi abakaki be-engeli kukhodi ukuze unikezwe 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.
Ungakhetha ngokukhetha .pre-scrollableiklasi elizosetha ubude bobude obungu-350px futhi linikeze ibha yokuskrola ye-y-axis.
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 bese yengeza umngcele wangaphandle |
| 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 tdkanye thnezici |
Amathebula enziwa isitayela ngokuzenzakalela anemingcele embalwa kuphela ukuze kuqinisekiswe ukufundeka nokugcina ukwakheka. Ngo-2.0, .tableikilasi liyadingeka.
- <table class = "table" >
- …
- </ithebula>
| # | Igama | Isibongo | Igama lomsebenzisi |
|---|---|---|---|
| 1 | Maka | Otto | @mdo |
| 2 | uJakobe | Thornton | @amafutha |
| 3 | Larry | inyoni |
Thola okumnandi ngamatafula akho ngokungeza idube-striping—vele wengeze .table-stripedikilasi.
Qaphela: Amathebula anemigqa asebenzisa isikhethi se- :nth-childCSS futhi awatholakali ku-IE7-IE8.
- <table class = "table-striped table" >
- …
- </ithebula>
| # | Igama | Isibongo | Igama lomsebenzisi |
|---|---|---|---|
| 1 | Maka | Otto | @mdo |
| 2 | uJakobe | Thornton | @amafutha |
| 3 | Larry | inyoni |
Engeza imingcele ezungeze ithebula lonke namakhona ayindilinga ngezinjongo zobuhle.
- <table class = "table-bordered" >
- …
- </ithebula>
| # | Igama | Isibongo | Igama lomsebenzisi |
|---|---|---|---|
| 1 | Maka | Otto | @mdo |
| Maka | Otto | @getbootstrap | |
| 2 | uJakobe | Thornton | @amafutha |
| 3 | Larry Inyoni | ||
Yenza amathebula akho ahlangane kakhudlwana ngokwengeza .table-condensedikilasi ukuze usike i-padding yeseli yetafula phakathi (kusuka ku-8px kuya ku-4px).
- <table class = "table-condensed table" >
- …
- </ithebula>
| # | Igama | Isibongo | Igama lomsebenzisi |
|---|---|---|---|
| 1 | Maka | Otto | @mdo |
| 2 | uJakobe | Thornton | @amafutha |
| 3 | Larry Inyoni | ||
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 eligcwele | |||
|---|---|---|---|
| # | Igama | Isibongo | Igama lomsebenzisi |
| 1 | Maka | Otto | @mdo |
| 2 | uJakobe | Thornton | @amafutha |
| 3 | Larry Inyoni | ||
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 |
| Okuvundlile | .form-horizontal |
Ntanta kwesokunxele, amalebula aqondaniswe kwesokudla emugqeni ofanayo nezilawuli |
Okuzenzakalelayo okuhlakaniphile nokungasindi ngaphandle kwemakhaphu eyengeziwe.
- <form class = "kahle" >
- <ilebula> Igama lelebula </label>
- <input type = "text" class = "span3" isimeli = "Thayipha okuthile..." >
- <span class = "help-block" > Umbhalo wosizo weleveli yesibonelo yebhulokhi lapha. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Ngihlole
- </ilebula>
- <button type = "submit" class = "btn" > Thumela </inkinobho>
- </ifomu>
Engeza .form-searchefomini .search-querynaku- input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Sesha </inkinobho>
- </ifomu>
Engeza .form-inlineukuze ugcizelele ukuqondanisa okume mpo kanye nesikhala sezilawuli zefomu.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" isimeli = "I-imeyili" >
- <input type = "password" class = "input-small" isimeli = "Iphasiwedi" >
- <label class = "checkbox" >
- <input type = "checkbox" > Ngikhumbule
- </ilebula>
- <button type = "submit" class = "btn" > Ngena ngemvume </inkinobho>
- </ifomu>
Kuboniswe ngakwesokudla zonke izilawuli zefomu ezizenzakalelayo esizisekelayo. Nalu uhlu olunamachashazi:
Uma kunikezwe isibonelo esingenhla sesakhiwo sefomu, nansi umaki ohlotshaniswa neqembu lokuqala lokokufaka nokulawula. I- .control-group, .control-label, kanye .controlsnamakilasi konke kuyadingeka ekwenzeni isitayela.
- <form class = "form-horizontal" >
- <i-fieldset>
- <legend> Umbhalo wenganekwane </legend>
- <div class = "control-group" >
- <label class = "control-label" ye = "input01" > Okokufaka umbhalo </label>
- <div class = "controls" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Umbhalo wosizo osekelayo </p>
- </div>
- </div>
- </fieldset>
- </ifomu>
I-Bootstrap ifaka izitayela zokugxila nezimo ezisekelwa isiphequluli disabled. Sisusa i-Webkit ezenzakalelayo outlinebese sifaka u-a box-shadowendaweni yayo ukuze :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 ezungeze amabhokisi 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 .inlinekunoma yikuphi .checkboxnoma .radiousuqedile.
Ukuze usebenzise okokufaka kwangaphambilini noma kwenezele ngendlela esemgqeni, qiniseka ukuthi ubeka .add-onfuthi inputemgqeni 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.
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 ukungqubuzana 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.
I-Bootstrap isebenzisa <i>ithegi yazo zonke izithonjana, kodwa ayinaso isigaba se-case—kuphela isiqalo esabiwe. 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.
Amakhanda phezulu! Uma usebenzisa eceleni kweyunithi yezinhlamvu zombhalo, njengezinkinobho noma izixhumanisi ze-nav, qiniseka ukuthi ushiya isikhala ngemva <i>komaka ukuze uthole izikhala ezifanele.
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.