Eileamaidean HTML bunaiteach air an stoidhleachadh agus air an neartachadh le clasaichean a ghabhas leudachadh.
Gheibhear a h-uile ceann HTML, <h1>
troimhe <h6>
.
font-size
Is e bunait cruinne Bootstrap 14px , line-height
le 20px . Tha seo air a chur an sàs anns <body>
na paragrafan agus a h-uile paragraf. A bharrachd air an sin, <p>
gheibh (paragrafan) iomall gu h-ìosal de leth an àirde loidhne aca (10px gu bunaiteach).
Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida agus eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p> ... </p>
Dèan paragraf a’ seasamh a-mach le bhith a’ cur .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class = "luaidhe" > ... </p>
Tha an sgèile clò-sgrìobhaidh stèidhichte air dà chaochladair LESS ann an caochladairean.less : @baseFontSize
agus @baseLineHeight
. Is e a’ chiad fhear am meud cruth-clò bunaiteach a thathar a’ cleachdadh air feadh agus is e an dàrna fear an àirde bun-loidhne. Bidh sinn a’ cleachdadh na caochladairean sin agus beagan matamataigs sìmplidh gus oirean, pleadhagan, agus àirdean loidhne de gach seòrsa againn agus barrachd a chruthachadh. Gnàthaich iad agus atharraich Bootstrap.
Cleachd tagaichean cuideam bunaiteach HTML le stoidhlichean aotrom.
<small>
Airson dì-chuideamachadh inline no blocaichean teacsa, cleachd an taga beag.
Tha còir aig an loidhne teacsa seo a bhith air a làimhseachadh mar chlò-bhualadh grinn.
<p> <small> Tha còir an loidhne teacsa seo a làimhseachadh mar chlò-bhualadh grinn. </small> </p>
Airson cuideam a chuir air criomag de theacsa le cuideam cruth-clò nas truime.
Tha a’ phìos teacsa a leanas air a thoirt seachad mar theacsa trom .
<strong> air a thoirt seachad mar theacsa trom </strong>
Airson cuideam a chur air criomag de theacsa le clò eadailteach.
Tha a’ phìos teacsa a leanas air a thoirt seachad mar theacsa clò eadailteach .
<em> air a thoirt seachad mar theacsa clò eadailteach </em>
Cinn suas!Faodaidh tu a chleachdadh <b>
agus <i>
ann an HTML5. <b>
thathar an dùil faclan no abairtean a shoilleireachadh gun a bhith a’ toirt cuideam a bharrachd fhad ‘s <i>
a tha e gu ìre mhòr airson guth, teirmean teignigeach, msaa.
Atharraich teacsa gu co-phàirtean gu furasta le clasaichean co-thaobhadh teacsa.
Teacs co-thaobhadh clì.
Teacs co-thaobhadh sa mheadhan.
Teacs co-thaobhadh ceart.
- <p class = "text-clì" > Teacs co-thaobhadh clì. </p>
- <p class = "text-center" > Teacsa co-thaobhadh sa mheadhan. </p>
- <p class = "text-right" > Teacs co-thaobhadh ceart. </p>
Cuir an cèill brìgh tro dhath le dòrlach de chlasaichean goireasachd cuideam.
Fusce dapibus, tellus ac cursus comodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec 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 class = "muted" > Fusce dapibus, tellus ac cursus comodo, tortor mauris nibh. </p>
- <p class = "text-rabhadh" > Etiam porta sem malesuada magna mollis euismod. </p>
- <p class = "text-error" > 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>
Gnìomhachadh stoidhle de eileamaid HTML <abbr>
airson giorrachaidhean agus geàrr-chunntasan gus an dreach leudaichte air hover a shealltainn. Tha giorrachadh le title
feart aig a’ chrìoch ìosal le dotagach aotrom agus cursair cuideachaidh air hover, a’ toirt seachad co-theacs a bharrachd air hover.
<abbr>
Airson teacsa leudaichte air gluasad fada de ghiorrachadh, cuir a-steach am title
feart.
Is e giorrachadh den fhacal buadhan attr .
<abbr title = "buaidh" > attr </abbr>
<abbr class="initialism">
Cuir .initialism
ri giorrachadh airson cruth-clò beagan nas lugha.
Is e HTML an rud as fheàrr bho aran sliseag.
<abbr title = "HyperText Markup Language" class = "toiseachachas" > HTML </abbr>
Thoir seachad fiosrachadh conaltraidh don sinnsear as fhaisge no don bhuidheann obrach gu lèir.
<address>
Glèidh an cruth le bhith a’ cur crìoch air a h-uile loidhne le <br>
.
- <seòladh>
- <strong> Twitter, Inc .</strong><br>
- 795 Folsom Ave, Suite 600 <br>
- San Francisco, CA 94107 <br>
- <abbr title = "Fòn" > P: </abbr> (123) 456-7890
- </seòladh>
- <seòladh>
- <strong> Ainm slàn </strong><br>
- <a href = "mailto:#"> [email protected] </a> _
- </seòladh>
Airson blocaichean de shusbaint a thogail bho thùs eile san sgrìobhainn agad.
Còmhdaich <blockquote>
timcheall HTML sam bith mar an cuòt. Airson luachan dìreach tha sinn a’ moladh a <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante. </p>
- </blockquote>
Bidh stoidhle agus susbaint ag atharrachadh airson atharrachaidhean sìmplidh air blockquote àbhaisteach.
Cuir <small>
taga ris airson an tùs aithneachadh. Còmhdaich ainm an tùs obrach ann am <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.
Cuideigin ainmeil ann an Source Title
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante. </p>
- <small> Cuideigin ainmeil <cite title = "Tùs an Tùs" > Tiotal an Stòr </cite></small>
- </blockquote>
Cleachd .pull-right
airson blockquote fleòdraidh, co-thaobhadh deas.
- <blockquote class = "tarraing-deas" >
- ...
- </blockquote>
Liosta de nithean anns nach eil an òrdugh gu sònraichte cudromach.
- <ul>
- <li> ... </li>
- </ul>
Liosta de nithean anns a bheil an òrdugh gu sònraichte cudromach.
- <ol>
- <li> ... </li>
- </ol>
Thoir air falbh am pleadhag àbhaisteach list-style
agus clì air nithean liosta (clann sa bhad a-mhàin).
- <ul class = "unstyled" >
- <li> ... </li>
- </ul>
Cuir a h-uile nì liosta air aon loidhne le inline-block
beagan pleadhag aotrom.
- <ul class = "inline" >
- <li> ... </li>
- </ul>
Liosta de theirmean leis na tuairisgeulan co-cheangailte riutha.
- <dl>
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
Dèan teirmean agus tuairisgeulan ann an <dl>
loidhne suas taobh ri taobh.
- <dl class = "dl-chòmhnard" >
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
Cinn suas!Gearraidh liostaichean tuairisgeul còmhnard teirmean a tha ro fhada airson a bhith a’ freagairt air suidheachadh a’ cholbh chlì text-overflow
. Ann am puirt-seallaidh nas cumhainge, atharraichidh iad chun chruth àbhaisteach air a chruachadh.
Paisg criomagan còd in-loidhne le <code>
.
<section>
bu chòir a bhith air a phasgadh mar inline.
- Mar eisimpleir , <code> & lt ; bu chòir earrann & gt ;</ code > a phasgadh mar inline .
Cleachd <pre>
airson iomadh loidhne de chòd. Dèan cinnteach gun teich thu bho camagan ceàrn sam bith sa chòd airson a bhith a’ toirt seachad ceart.
<p>Sampall teacsa an seo...</p>
- <ro>
- <p>Sampall teacsa an seo...</p>
- </pre>
Cinn suas!Dèan cinnteach gun cùm thu còd taobh a-staigh <pre>
tagaichean cho faisg air an taobh chlì sa ghabhas; bheir e seachad a h-uile taba.
Faodaidh tu an .pre-scrollable
clas a chuir ris gu roghnach a shuidhicheas àirde as àirde de 350px agus a bheir seachad bàr-scrollaidh y-axis.
Airson stoidhle bunaiteach - pleadhag aotrom agus dìreach luchd-sgaraidh còmhnard - cuir a 'chlas bunaiteach .table
ri <table>
.
# | A’ chiad ainm | An t-ainm mu dheireadh | Ainm-cleachdaidh |
---|---|---|---|
1 | Marc | Otto | @meadh |
2 | Iacob | Thornton | @saill |
3 | Larry | an Eòin |
- <table class = "clàr" >
- …
- </clàr>
Cuir gin de na clasaichean a leanas ris a’ .table
chlas bhunaiteach.
.table-striped
A’ cur stiallan zebra ri sreath bùird sam bith taobh a-staigh an <tbody>
roghnaiche :nth-child
CSS (chan eil e ri fhaighinn ann an IE7-8).
# | A’ chiad ainm | An t-ainm mu dheireadh | Ainm-cleachdaidh |
---|---|---|---|
1 | Marc | Otto | @meadh |
2 | Iacob | Thornton | @saill |
3 | Larry | an Eòin |
- <table class = ""table-striped" >
- …
- </clàr>
.table-bordered
Cuir crìochan agus oiseanan cruinn ris a 'bhòrd.
# | A’ chiad ainm | An t-ainm mu dheireadh | Ainm-cleachdaidh |
---|---|---|---|
1 | Marc | Otto | @meadh |
Marc | Otto | @getbootstrap | |
2 | Iacob | Thornton | @saill |
3 | Larry the Bird |
- <table class = ""table-bordered" >
- …
- </clàr>
.table-hover
Dèan comas air staid hover air sreathan bùird taobh a-staigh faidhle <tbody>
.
# | A’ chiad ainm | An t-ainm mu dheireadh | Ainm-cleachdaidh |
---|---|---|---|
1 | Marc | Otto | @meadh |
2 | Iacob | Thornton | @saill |
3 | Larry the Bird |
- <table class = "table-hover" >
- …
- </clàr>
.table-condensed
A’ dèanamh bùird nas toinnte le bhith a’ gearradh pleadhag cealla ann an leth.
# | A’ chiad ainm | An t-ainm mu dheireadh | Ainm-cleachdaidh |
---|---|---|---|
1 | Marc | Otto | @meadh |
2 | Iacob | Thornton | @saill |
3 | Larry the Bird |
- <table class = ""table-condensed" >
- …
- </clàr>
Cleachd clasaichean co-theacsail gus sreathan bùird a dhath.
Clas | Tuairisgeul |
---|---|
.success |
A’ comharrachadh gnìomh soirbheachail no adhartach. |
.error |
A’ comharrachadh gnìomh cunnartach no a dh’ fhaodadh a bhith àicheil. |
.warning |
A’ nochdadh rabhadh a dh’ fhaodadh a bhith feumach air aire. |
.info |
Air a chleachdadh mar dhòigh eile air na stoidhlichean bunaiteach. |
# | Bathar | Pàigheadh air a ghabhail | Inbhe |
---|---|---|---|
1 | TB - Mìosail | 01/04/2012 | Aontaichte |
2 | TB - Mìosail | 02/04/2012 | Dhiùlt |
3 | TB - Mìosail | 03/04/2012 | A' feitheamh |
4 | TB - Mìosail | 04/04/2012 | Call a-steach gus dearbhadh |
- ...
- < tr class = "soirbheachas" >
- <td> 1 < /td>
- <td>TB - Mìosail</ td >
- < td > 01/04/2012 < / td >
- <td>Air aontachadh</ td >
- </ t >
- ...
Liosta de na h-eileamaidean HTML clàr le taic agus mar a bu chòir an cleachdadh.
Tag | Tuairisgeul |
---|---|
<table> |
Eileamaid fillte airson dàta a thaisbeanadh ann an cruth clàr |
<thead> |
Eileamaid gleidhidh airson sreathan cinn bùird ( <tr> ) gus colbhan bùird a chomharrachadh |
<tbody> |
Eileamaid gleidhidh airson sreathan bùird ( <tr> ) ann am bodhaig a’ bhùird |
<tr> |
Eileamaid gleidhidh airson seata de cheallan bùird ( <td> no <th> ) a nochdas air aon sreath |
<td> |
Cell clàr bunaiteach |
<th> |
Cell bùird sònraichte airson bileagan colbh (no sreath, a rèir farsaingeachd agus suidheachadh). |
<caption> |
Tuairisgeul no geàrr-chunntas air na tha sa chlàr, gu h-àraid feumail do luchd-leughaidh sgrion |
- <clàr>
- <caption> ... </caption>
- <ceann>
- <tr>
- <th> ... </th>
- <th> ... </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> ... </td>
- <td> ... </td>
- </tr>
- </tbody>
- </clàr>
Bidh smachdan foirm fa leth a’ faighinn stoidhle, ach às aonais clas bunaiteach sam bith a tha riatanach air na <form>
h-atharrachaidhean mòra ann an comharrachadh. Toradh ann am bileagan air an càrnadh, air an taobh chlì a bharrachd air smachdan foirm.
- <foirm>
- <fieldset>
- <legend> Uirsgeul </legend>
- <label> Ainm leubail </label>
- <input type = "text" placeholder = "Cuir a-steach rudeigin…" >
- <span class = "help-block" > Eisimpleir de theacsa cuideachaidh ìre bloca an-seo. </span>
- <label class = "bogsa-seic" >
- <input type = "bogsa-seic" > Thoir sùil orm
- </label>
- <button type = "submit" class = "btn" > Cuir a-steach </button>
- </fieldset>
- </form>
Am measg Bootstrap tha trì dreachan cruth roghainneil airson cùisean cleachdaidh cumanta.
Cuir .form-search
ris an fhoirm agus .search-query
ris an <input>
airson cuir a-steach teacsa a bharrachd.
- <form class = "form-search" >
- <input type = "text" class = "ceist rannsachaidh-inntrigidh-meadhanach" >
- <button type = "submit" class = "btn" > Rannsaich </button>
- </form>
Cuir ris .form-inline
airson bileagan le co-thaobhadh clì agus smachdan bloc in-loidhne airson cruth teann.
- <form class = "form-inline" >
- <input type = "text" class = "input-small" placeholder = "Post-d" >
- <input type = "facal-faire" class = "input-small" placeholder = "Facal-faire" >
- <label class = "bogsa-seic" >
- <input type = "bogsa-seic" > Cuimhnich orm
- </label>
- <button type = "submit" class = "btn" > Clàraich a-steach </button>
- </form>
Co-thaobhadh ceart le bileagan agus cuir air bhog iad air an taobh chlì gus toirt orra nochdadh air an aon loidhne ri smachdan. Tha feum air na h-atharrachaidhean comharrachaidh as motha bho fhoirm bhunaiteach:
.form-horizontal
ris an fhoirm.control-group
.control-label
ris an leubail.controls
airson co-thaobhadh ceart
- <form class = "form-horizontal" >
- <div class = "buidheann-smachd" >
- <label class = "control-label" for = "inputEmail" > Post -d </label>
- <div class = "smachd" >
- <input type = "text" id = "inputEmail" placeholder = " Post-d" >
- </div>
- </div>
- <div class = "buidheann-smachd" >
- <label class = "control-label" for = "inputPassword" > Facal -faire </label>
- <div class = "smachd" >
- <input type = "facal-faire" id = "inputPassword" placeholder = " Facal-faire" >
- </div>
- </div>
- <div class = "buidheann-smachd" >
- <div class = "smachd" >
- <label class = "bogsa-seic" >
- <input type = "bogsa-seic" > Cuimhnich orm
- </label>
- <button type = "submit" class = "btn" > Clàraich a-steach </button>
- </div>
- </div>
- </form>
Eisimpleirean de smachdan foirm àbhaisteach le taic ann an cruth foirm eisimpleir.
Smachd foirm as cumanta, raointean inntrigidh stèidhichte air teacsa. A’ toirt a-steach taic airson a h-uile seòrsa HTML5: teacsa, facal-faire, ceann-latha, ceann-latha-ionadail, ceann-latha, mìos, uair, seachdain, àireamh, post-d, url, sgrùdadh, fòn, agus dath.
Feumaidh cleachdadh ainmichte type
an-còmhnaidh.
- <input type = "text" placeholder = "Cuir a-steach teacsa" >
Smachd foirm a bheir taic do ghrunn loidhnichean teacsa. Atharraich rows
feart mar a dh’ fheumar.
- <textarea rows = " 3" ></textarea>
Tha bogsaichean-seic airson aon no grunn roghainnean a thaghadh ann an liosta fhad ‘s a tha rèidiothan airson aon roghainn a thaghadh bho mhòran.
- <label class = "bogsa-seic" >
- <input type = "bogsa-seic" luach = "" >
- Is e roghainn a h-aon seo agus sin - bi cinnteach gun cuir thu a-steach carson a tha e math
- </label>
- <label class = "rèidio" >
- <input type = "radio" name = "optionsRadios" id = "optionsRadios1" luach = "roghainn 1" air a sgrùdadh >
- Is e roghainn a h-aon seo agus sin - bi cinnteach gun cuir thu a-steach carson a tha e math
- </label>
- <label class = "rèidio" >
- <input type = "radio" name = "OptionsRadios" id = "OptionsRadios2" value = "roghainn2" >
- Faodaidh roghainn a dhà a bhith na rudeigin eile agus le bhith ga thaghadh taghaidh e roghainn a h-aon
- </label>
Cuir an .inline
clas ri sreath de bhogsaichean-seic no rèidiothan airson smachdan nochdadh air an aon loidhne.
- <label class = "bogsa-seic inline" >
- <input type = "checkbox" id = "inlineCheckbox1" luach = "roghainn 1" > 1
- </label>
- <label class = "bogsa-seic inline" >
- <input type = "checkbox" id = "inlineCheckbox2" luach = "roghainn2" > 2
- </label>
- <label class = "bogsa-seic inline" >
- <input type = "checkbox" id = "inlineCheckbox3" luach = "roghainn 3" > 3
- </label>
Cleachd an roghainn bunaiteach no sònraich a multiple="multiple"
gus grunn roghainnean a shealltainn aig an aon àm.
- <tagh>
- <roghainn> 1 </option>
- <roghainn> 2 </option>
- <roghainn> 3 </option>
- <roghainn> 4 </option>
- <roghainn> 5 </option>
- </select>
- <select multiple = "multiple" >
- <roghainn> 1 </option>
- <roghainn> 2 </option>
- <roghainn> 3 </option>
- <roghainn> 4 </option>
- <roghainn> 5 </option>
- </select>
A’ cur ris na smachdan brabhsair a th’ ann mar-thà, tha Bootstrap a’ toirt a-steach co-phàirtean foirm feumail eile.
Cuir teacsa no putanan ris ro no às deidh cuir a-steach teacsa sam bith. Thoir an aire nach select
eil taic ri eileamaidean an seo.
Còmhdaich an .add-on
agus an input
le aon de dhà chlas gus teacsa a chuir a-steach no a cheangal ri cuir a-steach.
- <div class = "input-prepend" >
- <span class = "add-on" > @ </span>
- <input class = "span2" id = "prependedInput" type = "text" placeholder = "Ainm-cleachdaiche" >
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedInput" type = "text" >
- <span class = "add-on" > .00 </span>
- </div>
Cleachd an dà chlas agus dà eisimpleir .add-on
airson cuir a-steach agus cuir a-steach.
- <div class = "input-prepend input-append" >
- <span class = "add-on" > $ </span>
- <input class = "span2" id = "appendedPrependedInput" type = "text" >
- <span class = "add-on" > .00 </span>
- </div>
An àite <span>
le teacsa, cleachd a .btn
gus putan (no dhà) a cheangal ri cuir a-steach.
- <div class = "input-append" >
- <input class = "span2" id = "appendedInputButton" type = "text" >
- <button class = "btn" type = "button" > Rach! </putan>
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedInputButtons" type = "text" >
- <button class = "btn" type = "button" > Rannsaich </button>
- <button class = "btn" type = "button" > Roghainnean </button>
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedDropdownButton" type = "text" >
- <div class = "btn-group" >
- <button class = "btn dropdown-toggle" data-toggle = "tuiteam-sìos" >
- Gnìomh
- <span class = "caret" ></span>
- </putan>
- <ul class = ""dropdown-menu" >
- ...
- </ul>
- </div>
- </div>
- <div class = "input-prepend" >
- <div class = "btn-group" >
- <button class = "btn dropdown-toggle" data-toggle = "tuiteam-sìos" >
- Gnìomh
- <span class = "caret" ></span>
- </putan>
- <ul class = ""dropdown-menu" >
- ...
- </ul>
- </div>
- <input class = "span2" id = "prependedDropdownButton" type = "text" >
- </div>
- <div class = "input-prepend input-append" >
- <div class = "btn-group" >
- <button class = "btn dropdown-toggle" data-toggle = "tuiteam-sìos" >
- Gnìomh
- <span class = "caret" ></span>
- </putan>
- <ul class = ""dropdown-menu" >
- ...
- </ul>
- </div>
- <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >
- <div class = "btn-group" >
- <button class = "btn dropdown-toggle" data-toggle = "tuiteam-sìos" >
- Gnìomh
- <span class = "caret" ></span>
- </putan>
- <ul class = ""dropdown-menu" >
- ...
- </ul>
- </div>
- </div>
- <foirm>
- <div class = "input-prepend" >
- <div class = "btn-group" > ... </div>
- <input type = "text" >
- </div>
- <div class = "input-append" >
- <input type = "text" >
- <div class = "btn-group" > ... </div>
- </div>
- </form>
- <form class = "form-search" >
- <div class = "input-append" >
- <input type = "text" class = "span2 search-query" >
- <button type = "submit" class = "btn" > Rannsaich </button>
- </div>
- <div class = "input-prepend" >
- <button type = "submit" class = "btn" > Rannsaich </button>
- <input type = "text" class = "span2 search-query" >
- </div>
- </form>
Cleachd clasaichean meudachaidh coimeasach mar .input-large
no maids do chuir a-steach ri meudan colbh a’ ghriod a’ cleachdadh .span*
chlasaichean.
Thoir air rud sam bith <input>
no <textarea>
eileamaid a bhith gad ghiùlan fhèin mar eileamaid ìre bloc.
- <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >
- <input class = "input-mini" type = "text" placeholder = ".input-mini" >
- <input class = "input-small" type = "text" placeholder = ".input-small" >
- <input class = "input-medium" type = "text" placeholder = ".input-medium" >
- <input class = "input-large" type = "text" placeholder = ".input-large" >
- <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
- <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >
Cinn suas!Ann an dreachan san àm ri teachd, bidh sinn ag atharrachadh cleachdadh nan clasaichean cur-a-steach càirdeach sin gus a bhith co-ionnan ri meud nam putanan againn. Mar eisimpleir, .input-large
àrdaichidh e am pleadhag agus meud cruth-clò cuir a-steach.
Cleachd .span1
airson cuir a .span12
-steach a tha a rèir na h-aon mheudan de cholbhan a’ ghriod.
- <input class = "span1" type = "text" placeholder = ".span1" >
- <input class = "span2" type = "text" placeholder = ".span2" >
- <input class = "span3" type = "text" placeholder = ".span3" >
- <tagh class = "span1" >
- ...
- </select>
- <tagh class = "span2" >
- ...
- </select>
- <tagh class = "span3" >
- ...
- </select>
Airson iomadh cuir a-steach clèithe gach loidhne, cleachd an .controls-row
clas mion-atharrachaidh airson farsaingeachd cheart . Bidh e a’ fleòdradh na cuir a-steach gus àite geal a leagail, a’ suidheachadh na h-oirean ceart, agus a’ glanadh a’ bhothan.
- <div class = "smachd" >
- <input class = "span5" type = "text" placeholder = ".span5" >
- </div>
- <div class = "a' cumail smachd air sreath-smachd" >
- <input class = "span4" type = "text" placeholder = ".span4" >
- <input class = "span1" type = "text" placeholder = ".span1" >
- </div>
- ...
Thoir seachad dàta ann an cruth nach gabh a dheasachadh gun a bhith a' cleachdadh comharradh foirme fhèin.
- <span class = "input-xlarge uneditable-input" > Luach an seo </span>
Crìochnaich foirm le buidheann de ghnìomhan (putanan). Nuair a thèid a chuir taobh a-staigh a .form-actions
, cuiridh na putanan a-steach gu fèin-ghluasadach gus a bhith a rèir smachdan an fhoirm.
- <div class = "form-actions" >
- <button type = "submit" class = "btn btn-primary" > Sàbhail na h-atharraichean </button>
- <button type = "button" class = "btn" > Sguir dheth </button>
- </div>
Taic ìre inline agus bloc airson teacsa cuideachaidh a nochdas timcheall air smachdan foirm.
- <input type = "text" <span class = "help-inline" > Teacsa cuideachaidh in-loidhne </span>
- <input type = "text" <span class = "help-block" > Bloc teacsa cuideachaidh nas fhaide a bhriseas air loidhne ùr is a dh’ fhaodadh leudachadh nas fhaide na aon loidhne. </span>
Thoir fios air ais do luchd-cleachdaidh no luchd-tadhail le stàitean fios-air-ais bunaiteach air smachdan foirm agus bileagan.
Bidh sinn a’ toirt air falbh na stoidhlichean bunaiteach outline
air cuid de smachdan foirm agus a’ cur a-steach box-shadow
na àite airson :focus
.
- <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Tha fòcas air seo..." >
Cuir a-steach stoidhle tro ghnìomhachd brabhsair bunaiteach le :invalid
. Sònraich type
, cuir a-steach am required
feart mura h-eil an raon roghainneil, agus (ma tha sin iomchaidh) sònraich faidhle pattern
.
Chan eil seo ri fhaighinn ann an dreachan de Internet Explorer 7-9 air sgàth dìth taic do luchd-taghaidh meallta CSS.
- <input class = "span3" type = "post-d" a dhìth >
Cuir am disabled
feart air cuir a-steach gus casg a chuir air cuir a-steach luchd-cleachdaidh agus gus sealladh beagan eadar-dhealaichte a bhrosnachadh.
- <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Cuir a-steach à comas an-seo..." >
Tha Bootstrap a’ toirt a-steach stoidhlichean dearbhaidh airson mearachd, rabhadh, fiosrachadh, agus teachdaireachdan soirbheachais. Gus a chleachdadh, cuir an clas iomchaidh ris an .control-group
.
- <div class = "rabhadh buidheann-smachd" >
- <label class = "control-label" for = "inputWarning" > Cuir a-steach le rabhadh </label>
- <div class = "smachd" >
- <input type = "text" id = "inputWarning" >
- <span class = "help-inline" > S dòcha gun deach rudeigin ceàrr </span>
- </div>
- </div>
- <div class = "mearachd buidheann-smachd" >
- <label class = "control-label" for = "inputError" > Cuir a-steach leis a’ mhearachd </label>
- <div class = "smachd" >
- <input type = "text" id = "inputError" >
- <span class = "help-inline" > Ceartaich a’ mhearachd </span>
- </div>
- </div>
- <div class = "fiosrachadh buidheann-smachd" >
- <label class = "control-label" for = "inputInfo" > Cuir a-steach le fiosrachadh </label>
- <div class = "smachd" >
- <input type = "text" id = "inputInfo" >
- <span class = "help-inline" > Chaidh an t-ainm-cleachdaiche a ghabhail </span> mu thràth
- </div>
- </div>
- <div class = "soirbheachas buidheann-smachd" >
- <label class = "control-label" for = "inputSuccess" > Cuir a-steach soirbheachail </label>
- <div class = "smachd" >
- <input type = "text" id = "inputSuccess" >
- <span class = "help-inline" > Woohoo! </span>
- </div>
- </div>
Cuir clasaichean ri <img>
eileamaid gus ìomhaighean a dhealbhadh gu furasta ann am pròiseact sam bith.
- <img src = "..." class = "img-rounded" >
- <img src = "..." class = "img-circle" >
- <img src = "..." class = "img-polaroid" >
Cinn suas! .img-rounded
agus .img-circle
nach eil ag obair ann an IE7-8 air sgàth dìth border-radius
taic.
140 ìomhaigh ann an cruth sprite, rim faighinn ann an liath dorcha (àbhaisteach) agus geal, air an toirt seachad le Glyphicons .
Mar as trice chan eil Glyphicons Halflings rim faighinn an-asgaidh, ach tha rèiteachadh eadar Bootstrap agus luchd-cruthachaidh Glyphicons air seo a dhèanamh comasach gun chosgais sam bith dhut mar luchd-leasachaidh. Mar thaing, bidh sinn ag iarraidh ort ceangal roghainneil a thoirt air ais gu Glyphicons nuair a bhios sin practaigeach.
Feumaidh a h-uile ìomhaigh <i>
tag le clas sònraichte, le ro-leasachan icon-
. Gus a chleachdadh, cuir an còd a leanas faisg air àite sam bith:
- <i class = "icon-search" ></i>
Tha stoidhlichean ann cuideachd airson ìomhaighean inverted (geal), air an dèanamh deiseil le aon chlas a bharrachd. Cuiridh sinn an clas seo an gnìomh gu sònraichte air hover agus stàitean gnìomhach airson nav agus ceanglaichean tuiteam-sìos.
- <i class = "icon-search icon-white" ></i>
Cinn suas!Nuair a bhios tu a’ cleachdadh ri taobh sreathan teacsa, mar ann am putanan no ceanglaichean nav, bi cinnteach gum fàg thu àite às deidh an <i>
taga airson farsaingeachd cheart.
Cleachd iad ann am putanan, buidhnean putan airson bàr-inneal, seòladh, no cuir a-steach foirm ro-shuidhichte.
- <div class = "btn-toolbar" >
- <div class = "btn-group" >
- <a class="btn" href="#" > < i class = " icon - align-left" ></i></a>
- <a class="btn" href="#" > < i class = " icon - align-center" ></i></a>
- <a class="btn" href="#" > < i class = " icon - align-right" ></i></a>
- <a class="btn" href="#" > <i class = " icon-align-justify" > < /i></a>
- </div>
- </div>
- <div class = "btn-group" >
- <a class="btn btn-primary" href = "#" ><i class = " icon-user icon-white" ></i> Cleachdaiche </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-pencil" ></i> Deasaich </a></li>
- <li><a href = "#" ><i class = "icon-sgudal" ></i> Sguab às </a></li>
- <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>
- <li class = "divider" ></li>
- <li><a href = "#" ><i class = "i" ></i> Dèan admin </a></li>
- </ul>
- </div>
- <a class="btn btn-large" href = "#" ><i class = " icon-star" ></i> Rionnag </a>
- <a class="btn btn-small" href = "#" ><i class = " icon-star" ></i> Rionnag </a>
- <a class="btn btn-mini" href = "#" ><i class = " icon-star" ></i> Rionnag </a>
- <ul class = "nav nav-list" >
- <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Dachaigh </a></li>
- <li><a href = "#" ><i class = "leabhar-ìomhaigh" ></i> Leabharlann </a></li>
- <li><a href = "#" ><i class = "icon-pencil" ></i> Tagraidhean </a></li>
- <li><a href = "#" ><i class = "i" ></i> Measgachadh </a> </li>
- </ul>
- <div class = "buidheann-smachd" >
- <label class = "control-label" for = "inputIcon" > Seòladh post-d </label>
- <div class = "smachd" >
- <div class = "input-prepend" >
- <span class = "add-on" ><i class = "icon-envelope" ></i></span>
- <input class = "span2" id = "inputIcon" type = "text" >
- </div>
- </div>
- </div>