Lori oke ti scaffolding, awọn eroja HTML ipilẹ ti wa ni aṣa ati imudara pẹlu awọn kilasi extensible lati pese tuntun, iwo deede ati rilara.
Gbogbo akoj afọwọṣe da lori awọn oniyipada Kere meji ninu awọn oniyipada wa.faili ti ko ni: @baseFontSizeati @baseLineHeight. Ni igba akọkọ ti ni awọn mimọ-iwọn font lo jakejado ati awọn keji ni awọn mimọ ila-giga.
A nlo awọn oniyipada wọnyẹn, ati awọn iṣiro diẹ, lati ṣẹda awọn ala, awọn paddings, ati awọn giga laini ti gbogbo iru wa ati diẹ sii.
Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
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. Donec sed odio dui.
| Eroja | Lilo | iyan |
|---|---|---|
<strong> |
Fun tẹnumọ snippet ti ọrọ pẹlu pataki | Ko si |
<em> |
Fun tẹnumọ snippet ti ọrọ pẹlu wahala | Ko si |
<abbr> |
Mu awọn abbreviations ati awọn acronyms lati fi ẹya ti o gbooro han lori rababa | Fi ẹya iyan .initialismkilasi fun awọn kuru awọn lẹta nla. |
<address> |
Fun alaye olubasọrọ fun baba ti o sunmọ tabi gbogbo ara iṣẹ | Ṣetọju ọna kika nipa ipari gbogbo awọn ila pẹlu<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Akiyesi: Lero ọfẹ lati lo <b>ati <i>ni HTML5, ṣugbọn lilo wọn ti yipada diẹ. <b>Itumọ lati ṣe afihan awọn ọrọ tabi awọn gbolohun ọrọ laisi sisọ pataki pataki lakoko <i>ti o jẹ pupọ julọ fun ohun, awọn ofin imọ-ẹrọ, ati bẹbẹ lọ.
Eyi ni awọn apẹẹrẹ meji ti bi <address>a ṣe le lo tag naa:
Awọn kuru pẹlu abuda kan titleni aala isale ti sami ina ati kọsọ iranlọwọ lori rababa. Eyi n fun awọn olumulo ni afikun itọkasi ohun kan yoo han lori rababa.
Ṣafikun initialismkilaasi naa si abbreviation lati mu isọdọkan kikọ sii nipa fifun ni iwọn ọrọ ti o kere diẹ.
HTML jẹ ohun ti o dara julọ niwon akara ti a ge wẹwẹ.
An abbreviation ti ọrọ ikalara ni attr .
| Eroja | Lilo | iyan |
|---|---|---|
<blockquote> |
Idina-ipele eroja fun sisọ akoonu lati orisun miiran | Ṣafikun .pull-leftati .pull-rightawọn kilasi fun awọn aṣayan lilefoofo |
<small> |
Ohun elo iyan fun fifi itọkasi ti nkọju si olumulo, ni igbagbogbo onkọwe pẹlu akọle iṣẹ | Gbe ni <cite>ayika akọle tabi orukọ orisun |
Lati ni blockquote kan, <blockquote>yika ni ayika HTML eyikeyi bi agbasọ ọrọ. Fun awọn agbasọ taara a ṣeduro <p>.
Fi nkan iyan <small>kan kun lati tọka si orisun rẹ ati pe iwọ yoo gba dash em —ṣaaju rẹ fun awọn idi aṣa.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a ante venenatis. </p>
- <kekere> Ẹnikan olokiki </small>
- </blockquote>
Awọn ọrọ idinaduro aiyipada jẹ aṣa bi iru:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a ante venenatis.
Ẹnikan olokiki ninu Ara iṣẹ
Lati leefofo blockquote rẹ si apa ọtun, ṣafikun class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a ante venenatis.
Ẹnikan olokiki ninu Ara iṣẹ
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Pa awọn snippets inline ti koodu pẹlu <code>.
- Fun apẹẹrẹ , <code> apakan </ code > yẹ ki o wa ni wiwun bi inline .
Lo <pre>fun ọpọ ila ti koodu. Rii daju lati sa fun awọn biraketi igun eyikeyi ninu koodu fun ṣiṣe to dara.
<p>Apeere ọrọ nibi...</p>
- <tẹlẹ>
- <p> Ayẹwo ọrọ nibi...</p>
- </pre>
Akiyesi: Rii daju pe o tọju koodu laarin <pre>awọn afi ni isunmọ si apa osi bi o ti ṣee; o yoo mu gbogbo awọn taabu.
O le ṣe afikun .pre-scrollablekilaasi ni yiyan eyi ti yoo ṣeto giga-giga ti 350px ati pese ọpa lilọ-y-axis kan.
Mu nkan kanna <pre>ki o ṣafikun awọn kilasi iyan meji fun imudara imudara.
- <p> Ọrọ apẹẹrẹ nibi... </p>
- <pre class = "prettyprint
- linenums" >
- <p> Ayẹwo ọrọ nibi...</p>
- </pre>
Ṣe igbasilẹ google-code-prettify ati wo readme fun bi o ṣe le lo.
| Tag | Apejuwe |
|---|---|
<table> |
Apo mimu fun fifi data han ni ọna kika tabular |
<thead> |
Apoti eroja fun awọn ori ila akọsori tabili ( <tr>) lati ṣe aami awọn ọwọn tabili |
<tbody> |
Eiyan ano fun tabili awọn ori ila ( <tr>) ninu awọn ara ti awọn tabili |
<tr> |
Eiyan eroja fun a ṣeto ti tabili awọn sẹẹli ( <td>tabi <th>) ti o han lori kan nikan kana |
<td> |
Seli tabili aiyipada |
<th> |
Cell tabili pataki fun ọwọn (tabi kana, da lori iwọn ati ipo) Awọn aami gbọdọ ṣee lo laarin a <thead> |
<caption> |
Apejuwe tabi akopọ ohun ti tabili dimu, paapaa wulo fun awọn oluka iboju |
- <tabili>
- <ori>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </ thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </tabili>
| Oruko | Kilasi | Apejuwe |
|---|---|---|
| Aiyipada | Ko si | Ko si awọn aza, o kan awọn ọwọn ati awọn ori ila |
| Ipilẹṣẹ | .table |
Awọn ila petele nikan laarin awọn ori ila |
| Aala | .table-bordered |
Yika igun ati afikun lode aala |
| Abila-okun | .table-striped |
Ṣafikun awọ abẹlẹ grẹy ina si awọn ori ila ti ko dara (1, 3, 5, ati bẹbẹ lọ) |
| Ti di | .table-condensed |
Ge padding inaro ni idaji, lati 8px si 4px, laarin gbogbo tdati thawọn eroja |
Awọn tabili ti wa ni aṣa laifọwọyi pẹlu awọn aala diẹ lati rii daju kika ati ṣetọju eto. Pẹlu 2.0, .tablekilasi naa nilo.
- <tabili kilasi = "tabili" >
- …
- </tabili>
| # | Orukọ akọkọ | Oruko idile | Orukọ olumulo |
|---|---|---|---|
| 1 | Samisi | Otto | @mdo |
| 2 | Jakobu | Thornton | @sanra |
| 3 | Larry | Eye |
Gba igbadun diẹ pẹlu awọn tabili rẹ nipa fifi abila-striping kun-kan ṣafikun .table-stripedkilasi naa.
Akiyesi: Awọn tabili ti a ṣi kuro lo :nth-childoluyan CSS ko si si ni IE7-IE8.
- <tabili kilasi = "tabili-si kuro tabili" >
- …
- </tabili>
| # | Orukọ akọkọ | Oruko idile | Orukọ olumulo |
|---|---|---|---|
| 1 | Samisi | Otto | @mdo |
| 2 | Jakobu | Thornton | @sanra |
| 3 | Larry | Eye |
Ṣafikun awọn aala ni ayika gbogbo tabili ati awọn igun yika fun awọn idi ẹwa.
- <tabili kilasi = "tabili-aala" >
- …
- </tabili>
| # | Orukọ akọkọ | Oruko idile | Orukọ olumulo |
|---|---|---|---|
| 1 | Samisi | Otto | @mdo |
| Samisi | Otto | @getbootstrap | |
| 2 | Jakobu | Thornton | @sanra |
| 3 | Larry Eye | ||
Ṣe awọn tabili rẹ ni iwapọ diẹ sii nipa fifi .table-condensedkilasi kun lati ge padding sẹẹli tabili ni idaji (lati 8px si 4px).
- <tabili kilasi = "tabili-condensed" >
- …
- </tabili>
| # | Orukọ akọkọ | Oruko idile | Orukọ olumulo |
|---|---|---|---|
| 1 | Samisi | Otto | @mdo |
| 2 | Jakobu | Thornton | @sanra |
| 3 | Larry Eye | ||
Lero ọfẹ lati darapọ eyikeyi awọn kilasi tabili lati ṣaṣeyọri awọn iwo oriṣiriṣi nipa lilo eyikeyi awọn kilasi ti o wa.
- <tabili kilasi = "tabili ti o ṣina tabili ti o ni aala tabili ti o ni didùn" >
- ...
- </tabili>
| Akokun Oruko | |||
|---|---|---|---|
| # | Orukọ akọkọ | Oruko idile | Orukọ olumulo |
| 1 | Samisi | Otto | @mdo |
| 2 | Jakobu | Thornton | @sanra |
| 3 | Larry Eye | ||
Apakan ti o dara julọ nipa awọn fọọmu ni Bootstrap ni pe gbogbo awọn igbewọle rẹ ati awọn idari wo nla laibikita bii o ṣe kọ wọn sinu isamisi rẹ. Ko si HTML superfluous ti a beere, ṣugbọn a pese awọn ilana fun awọn ti o nilo rẹ.
Awọn ipilẹ idiju diẹ sii wa pẹlu awọn kilasi kukuru ati iwọn fun iselona irọrun ati abuda iṣẹlẹ, nitorinaa o ti bo ni gbogbo igbesẹ.
Bootstrap wa pẹlu atilẹyin fun awọn oriṣi mẹrin ti awọn ipilẹ fọọmu:
Awọn oriṣi awọn ipilẹ fọọmu nilo diẹ ninu awọn ayipada si isamisi, ṣugbọn awọn iṣakoso funrararẹ wa ati huwa kanna.
Awọn fọọmu Bootstrap pẹlu awọn aṣa fun gbogbo awọn iṣakoso fọọmu ipilẹ bi titẹ sii, textarea, ati yan ti o nireti. Ṣugbọn o tun wa pẹlu nọmba awọn paati aṣa bii awọn ifikun ati awọn igbewọle ti a ti ṣetan ati atilẹyin fun awọn atokọ ti awọn apoti ayẹwo.
Awọn ipinlẹ bii aṣiṣe, ikilọ, ati aṣeyọri wa pẹlu iru iṣakoso fọọmu kọọkan. Bakannaa pẹlu awọn aza fun awọn iṣakoso alaabo.
Bootstrap n pese isamisi ti o rọrun ati awọn aza fun awọn aza mẹrin ti awọn fọọmu wẹẹbu ti o wọpọ.
| Oruko | Kilasi | Apejuwe |
|---|---|---|
| Inaro (aiyipada) | .form-vertical (ko nilo) |
Tolera, awọn akole ti o ni ibamu si osi lori awọn idari |
| Ni tito | .form-inline |
Aami ti o ni ibamu si apa osi ati awọn iṣakoso inline-block fun ara iwapọ |
| Wa | .form-search |
Iṣagbewọle ọrọ ti o ni iyipo-fikun fun ẹwa aṣawakiri kan |
| Petele | .form-horizontal |
Leefofo osi, awọn akole ti o ni ibamu si ọtun lori laini kanna bi awọn idari |
Pẹlu v2.0, a ni awọn aṣiṣe fẹẹrẹfẹ ati ijafafa fun awọn aza fọọmu. Ko si afikun isamisi, o kan fọọmu idari.
- < kilasi fọọmu = "daradara" >
- <aami> Orukọ aami </aami>
- < iru igbewọle = "ọrọ" kilasi = "span3" ibi ipamọ = "Tẹ nkan kan..." >
- <span class = "help-inline" > Ọrọ iranlọwọ ti o somọ! </span>
- < kilasi aami = "apoti" >
- <input type = "boxbox" > Ṣayẹwo mi
- </aami>
- <bọtini iru = "fi silẹ" kilasi = "btn" > Fi </button> silẹ
- </fọọmu>
Ti n ṣe afihan awọn aṣa WebKit aiyipada, kan ṣafikun .form-searchfun awọn aaye wiwa yika afikun.
- < kilasi fọọmu = "daradara fọọmu-wawa" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "fi silẹ" kilasi = "btn" > Ṣawari </button>
- </fọọmu>
Awọn igbewọle jẹ ipele dina lati bẹrẹ. Fun .form-inlineati .form-horizontal, a lo inline-block.
- < kilasi fọọmu = "daradara fọọmu-inline" >
- <input type = "text" class = "input-small" placeholder = "Imeeli" >
- <input type = "ọrọ igbaniwọle" kilasi = "input-small" ibi ipamọ = "Ọrọigbaniwọle" >
- < kilasi aami = "apoti" >
- <input type = "boxbox" > Ranti mi
- </aami>
- <button type = "fi silẹ" kilasi = "btn" > Wọle </button>
- </fọọmu>
Fi fun apẹrẹ fọọmu apẹrẹ loke, eyi ni isamisi ti o ni nkan ṣe pẹlu iṣagbewọle akọkọ ati ẹgbẹ iṣakoso. Awọn .control-group, .control-label, ati .controlsawọn kilasi ni gbogbo wọn nilo fun iselona.
- < kilaasi fọọmu = "fọọmu-petele" >
- <fi aaye>
- <arosọ> Ọrọ arosọ </legend>
- <div class = "ẹgbẹ iṣakoso" >
- <label class = "control-label" fun = "input01" > Iṣawọle ọrọ </label>
- <div kilasi = "awọn idari" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Ọrọ iranlọwọ atilẹyin </p>
- </div>
- </div>
- </fieldset>
- </fọọmu>
Ti o han ni apa osi ni gbogbo awọn iṣakoso fọọmu aiyipada ti a ṣe atilẹyin. Eyi ni atokọ bulleted:
Titi di v1.4, awọn aza fọọmu aiyipada Bootstrap lo ifilelẹ petele. Pẹlu Bootstrap 2, a yọkuro idiwọ yẹn lati ni ijafafa, awọn aseku iwọn diẹ sii fun eyikeyi fọọmu.
Bootstrap ṣe awọn ara fun idojukọ-ni atilẹyin aṣawakiri ati disabledawọn ipinlẹ. A yọ Webkit aiyipada kuro outlineati lo kan box-shadowni aaye rẹ fun :focus.
O tun pẹlu awọn aza afọwọsi fun awọn aṣiṣe, ikilo, ati aṣeyọri. Lati lo, ṣafikun kilasi aṣiṣe si agbegbe .control-group.
- <eto aaye
- kilasi = "aṣiṣe iṣakoso-ẹgbẹ" >
- …
- </fieldset>
Awọn ẹgbẹ igbewọle—pẹlu ifisi tabi ọrọ ti a ti ṣatunsilẹ—pese ọna ti o rọrun lati funni ni aaye diẹ sii fun awọn igbewọle rẹ. Awọn apẹẹrẹ nla pẹlu ami ami @ fun awọn orukọ olumulo Twitter tabi $ fun awọn inawo.
Titi di v1.4, Bootstrap nilo afikun isamisi ni ayika awọn apoti ayẹwo ati awọn redio lati to wọn pọ. Bayi, o jẹ ọrọ ti o rọrun lati tun ṣe <label class="checkbox">eyi ti o fi ipari si <input type="checkbox">.
Awọn apoti ayẹwo ila ati awọn redio tun ni atilẹyin. Kan ṣafikun .inlinesi eyikeyi .checkboxtabi .radioati pe o ti ṣetan.
Lati lo prepend tabi fi awọn igbewọle kun ni fọọmu inline, rii daju pe o gbe .add-onati inputsori laini kanna, laisi awọn alafo.
Lati ṣafikun ọrọ iranlọwọ fun awọn igbewọle fọọmu rẹ, ṣafikun ọrọ iranlọwọ laini pẹlu <span class="help-inline">tabi dina ọrọ iranlọwọ pẹlu <p class="help-block">lẹhin ano igbewọle.
Dipo ti ṣiṣe gbogbo aami ni ibeere afikun, a ti ṣajọ wọn sinu sprite — opo awọn aworan ni faili kan ti o nlo CSS lati gbe awọn aworan pẹlubackground-position . Eyi jẹ ọna kanna ti a lo lori Twitter.com ati pe o ti ṣiṣẹ daradara fun wa.
Gbogbo awọn kilasi aami ti wa ni iṣaju pẹlu .icon-fun piparẹ awọn orukọ to dara ati iwọn, bii awọn paati miiran wa. Eyi yoo ṣe iranlọwọ lati yago fun awọn ija pẹlu awọn irinṣẹ miiran.
Glyphicons ti fun wa ni lilo awọn Halflings ti a ṣeto sinu ohun elo irinṣẹ orisun-ìmọ niwọn igba ti a ba pese ọna asopọ ati kirẹditi nibi ninu awọn iwe aṣẹ. Jọwọ ronu ṣiṣe kanna ni awọn iṣẹ akanṣe rẹ.
Bootstrap nlo <i>aami kan fun gbogbo awọn aami, ṣugbọn wọn ko ni kilasi ọran-nikan ìpele ti o pin. Lati lo, gbe koodu atẹle yii si ibikibi:
- <i class = "icon-search" ></i>
Awọn ara tun wa fun awọn aami inverted (funfun), ti a ṣetan pẹlu kilasi afikun kan:
- <i class = "icon-search icon-white" </i>
Awọn kilasi 120 wa lati yan lati fun awọn aami rẹ. Kan ṣafikun <i>tag pẹlu awọn kilasi to tọ ati pe o ti ṣeto. O le wa atokọ ni kikun ni sprites.less tabi ọtun nibi ninu iwe yii.
Efeti sile! Nigbati o ba nlo ni ẹgbẹ awọn gbolohun ọrọ, bi ninu awọn bọtini tabi awọn ọna asopọ nav, rii daju pe o fi aaye silẹ lẹhin <i>tag fun aye to dara.
Awọn aami jẹ nla, ṣugbọn nibo ni ẹnikan yoo lo wọn? Eyi ni awọn imọran diẹ:
Ni pataki, nibikibi ti o le fi <i>aami sii, o le fi aami kan si.
Lo wọn ni awọn bọtini, awọn ẹgbẹ bọtini fun ọpa irinṣẹ, lilọ kiri, tabi awọn igbewọle fọọmu ti a ti ṣetan.