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: @baseFontSize
ati @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 aṣayan title fun ọrọ ti o gbooro sii |
<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 ti wa ni aṣa pẹlu ọrọ oke ati ina ti o ni aami aala isalẹ. Wọn tun ni kọsọ iranlọwọ lori rababa ki awọn olumulo ni afikun itọkasi ohun kan yoo han lori rababa.
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-left ati .pull-right awọ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>
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 pe o sa fun eyikeyi awọn biraketi igun ninu koodu fun ṣiṣe deede.
<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; yoo mu gbogbo awọn taabu.
O le ṣe afikun .pre-scrollable
kilaasi 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 td ati th awọ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, .table
kilasi naa nilo.
- <tabili kilasi = "tabili" >
- …
- </tabili>
# | Orukọ akọkọ | Oruko idile | Ede |
---|---|---|---|
1 | Samisi | Otto | CSS |
2 | Jakobu | Thornton | Javascript |
3 | Stu | Denti | HTML |
Gba igbadun diẹ pẹlu awọn tabili rẹ nipa fifi abila-striping kun-kan ṣafikun .table-striped
kilasi naa.
Akiyesi: Awọn tabili ti a ṣi kuro lo :nth-child
oluyan CSS ko si si ni IE7-IE8.
- <tabili kilasi = "tabili-ṣiṣibo tabili" >
- …
- </tabili>
# | Orukọ akọkọ | Oruko idile | Ede |
---|---|---|---|
1 | Samisi | Otto | CSS |
2 | Jakobu | Thornton | Javascript |
3 | Stu | Denti | HTML |
Ṣ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 | Ede |
---|---|---|---|
1 | Samisi Otto | CSS | |
2 | Jakobu | Thornton | Javascript |
3 | Stu | Denti | |
3 | Brosef | Stalin | HTML |
Ṣe awọn tabili rẹ ni iwapọ diẹ sii nipa fifi .table-condensed
kilasi kun lati ge padding sẹẹli tabili ni idaji (lati 8px si 4px).
- <tabili kilasi = "tabili-condensed" >
- …
- </tabili>
# | Orukọ akọkọ | Oruko idile | Ede |
---|---|---|---|
1 | Samisi | Otto | CSS |
2 | Jakobu | Thornton | Javascript |
3 | Stu | Denti | HTML |
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>
# | Orukọ akọkọ | Oruko idile | Ede |
---|---|---|---|
1 | Samisi | Otto | CSS |
2 | Jakobu | Thornton | Javascript |
3 | Stu | Denti | HTML |
4 | Brosef | Stalin | HTML |
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 </label>
- < 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 aza WebKit aiyipada, kan ṣafikun .form-search
fun awọn aaye wiwa yika afikun.
- < kilaasi fọọmu = "iwawa fọọmu daradara" >
- <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-inline
ati .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" >
- <bọtini iru = "fi silẹ" kilasi = "btn" > Lọ </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 .controls
awọ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 disabled
awọn ipinlẹ. A yọ Webkit aiyipada kuro outline
ati lo kan box-shadow
ni 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 laini ati awọn redio tun ni atilẹyin. Kan ṣafikun .inline
si eyikeyi .checkbox
tabi .radio
ati pe o ti ṣetan.
Lati lo prepend tabi fi awọn igbewọle kun ni fọọmu inline, rii daju pe o gbe .add-on
ati input
sori 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.
:after
. Ninu awọn iwe aṣẹ, a ṣe afihan awọ isale pupa ina kan lori rababa lati ṣe afihan iwọn aami naa.
Dipo ti ṣiṣe gbogbo aami ni afikun ibeere, a ti ṣajọ wọn sinu sprite — opo awọn aworan ninu faili kan ti o nlo CSS lati gbe awọn aworan pẹlu background-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, pupọ 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ẹ.
Pẹlu v2.0.1, a ti yọ kuro lati lo <i>
aami kan fun gbogbo awọn aami wa, ṣugbọn wọn ko ni kilasi ọran — nikan ìpele pinpin. 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.
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.