CSS bunaiteach

Eileamaidean HTML bunaiteach air an stoidhleachadh agus air an neartachadh le clasaichean a ghabhas leudachadh.

Cinn suas! Tha na docaichean sin airson v2.3.2, nach eil a’ faighinn taic oifigeil tuilleadh. Thoir sùil air an tionndadh as ùire de Bootstrap!

Cinn

Gheibhear a h-uile ceann HTML, <h1>troimhe <h6>.

h1. Ceann-uidhe 1

h2. Ceann-uidhe 2

h3. Ceann-uidhe 3

h4. Ceann-uidhe 4

h5. Ceann-uidhe 5
h6. Ceann 6

Leth-bhreac corp

font-sizeIs e bunait cruinne Bootstrap 14px , line-heightle 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>

Leth-bhreac corp luaidhe

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> 

Air a thogail le nas lugha

Tha an sgèile clò-sgrìobhaidh stèidhichte air dà chaochladair LESS ann an caochladairean.less : @baseFontSizeagus @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.


Cuideam

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>
  

Trom

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>

clò eadailteach

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.

Clasaichean co-thaobhadh

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.

  1. <p class = "text-clì" > Teacs co-thaobhadh clì. </p>
  2. <p class = "text-center" > Teacsa co-thaobhadh sa mheadhan. </p>
  3. <p class = "text-right" > Teacs co-thaobhadh ceart. </p>

Clasaichean cuideam

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.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus comodo, tortor mauris nibh. </p>
  2. <p class = "text-rabhadh" > Etiam porta sem malesuada magna mollis euismod. </p>
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p>
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p>
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Giorrachaidhean

Gnìomhachadh stoidhle de eileamaid HTML <abbr>airson giorrachaidhean agus geàrr-chunntasan gus an dreach leudaichte air hover a shealltainn. Tha giorrachadh le titlefeart 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 titlefeart.

Is e giorrachadh den fhacal buadhan attr .

<abbr title = "buaidh" > attr </abbr> 

<abbr class="initialism">

Cuir .initialismri 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>  

Seòlaidhean

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>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Ainm slàn
[email protected]
  1. <seòladh>
  2. <strong> Twitter, Inc .</strong><br>
  3. 795 Folsom Ave, Suite 600 <br>
  4. San Francisco, CA 94107 <br>
  5. <abbr title = "Fòn" > P: </abbr> (123) 456-7890
  6. </seòladh>
  7.  
  8. <seòladh>
  9. <strong> Ainm slàn </strong><br>
  10. <a href = "mailto:#"> [email protected] </a> _
  11. </seòladh>

Blockquotes

Airson blocaichean de shusbaint a thogail bho thùs eile san sgrìobhainn agad.

Blockquote bunaiteach

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.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante. </p>
  3. </blockquote>

Roghainnean Blockquote

Bidh stoidhle agus susbaint ag atharrachadh airson atharrachaidhean sìmplidh air blockquote àbhaisteach.

Ag ainmeachadh stòr

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
  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante. </p>
  3. <small> Cuideigin ainmeil <cite title = "Tùs an Tùs" > Tiotal an Stòr </cite></small>
  4. </blockquote>

Taisbeanaidhean eile

Cleachd .pull-rightairson blockquote fleòdraidh, co-thaobhadh deas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.

Cuideigin ainmeil ann an Source Title
  1. <blockquote class = "tarraing-deas" >
  2. ...
  3. </blockquote>

Liostaichean

Gun òrdugh

Liosta de nithean anns nach eil an òrdugh gu sònraichte cudromach.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem aig massa
  • Facilisis ann am pretium nisl aliquet
  • Gun a bhith a 'dol a-mach à bith
    • Phasellus iaculis saor an asgaidh
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat aig
  • Faucibus porta lacus fringilla no
  • Aenean sit amet erat nunc
  • Luchdaich a-nuas porttitor lorem
  1. <ul>
  2. <li> ... </li>
  3. </ul>

Dh'òrdaich

Liosta de nithean anns a bheil an òrdugh gu sònraichte cudromach.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem aig massa
  4. Facilisis ann am pretium nisl aliquet
  5. Gun a bhith a 'dol a-mach à bith
  6. Faucibus porta lacus fringilla no
  7. Aenean sit amet erat nunc
  8. Luchdaich a-nuas porttitor lorem
  1. <ol>
  2. <li> ... </li>
  3. </ol>

Gun stoidhle

Thoir air falbh am pleadhag àbhaisteach list-styleagus clì air nithean liosta (clann sa bhad a-mhàin).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem aig massa
  • Facilisis ann am pretium nisl aliquet
  • Gun a bhith a 'dol a-mach à bith
    • Phasellus iaculis saor an asgaidh
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat aig
  • Faucibus porta lacus fringilla no
  • Aenean sit amet erat nunc
  • Luchdaich a-nuas porttitor lorem
  1. <ul class = "unstyled" >
  2. <li> ... </li>
  3. </ul>

In-loidhne

Cuir a h-uile nì liosta air aon loidhne le inline-blockbeagan pleadhag aotrom.

  • Ipsum
  • Phasellus iaculis
  • Gu h-obann
  1. <ul class = "inline" >
  2. <li> ... </li>
  3. </ul>

Tuairisgeul

Liosta de theirmean leis na tuairisgeulan co-cheangailte riutha.

Liostaichean tuairisgeul
Tha liosta tuairisgeul foirfe airson teirmean a mhìneachadh.
Eusmod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida agus eget metus.
Port-adhair Malesuada
Etiam porta sem malesuada magna mollis euismod.
  1. <dl>
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </dl>

Tuairisgeul còmhnard

Dèan teirmean agus tuairisgeulan ann an <dl>loidhne suas taobh ri taobh.

Liostaichean tuairisgeul
Tha liosta tuairisgeul foirfe airson teirmean a mhìneachadh.
Eusmod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida agus eget metus.
Port-adhair Malesuada
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus comodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  1. <dl class = "dl-chòmhnard" >
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.

In-loidhne

Paisg criomagan còd in-loidhne le <code>.

Mar eisimpleir, <section>bu chòir a bhith air a phasgadh mar inline.
  1. Mar eisimpleir , <code> & lt ; bu chòir earrann & gt ;</ code > a phasgadh mar inline .

Bloc bunaiteach

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>
  1. <ro>
  2. <p>Sampall teacsa an seo...</p>
  3. </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-scrollableclas a chuir ris gu roghnach a shuidhicheas àirde as àirde de 350px agus a bheir seachad bàr-scrollaidh y-axis.

Stoidhlichean bunaiteach

Airson stoidhle bunaiteach - pleadhag aotrom agus dìreach luchd-sgaraidh còmhnard - cuir a 'chlas bunaiteach .tableri <table>.

# A’ chiad ainm An t-ainm mu dheireadh Ainm-cleachdaidh
1 Marc Otto @meadh
2 Iacob Thornton @saill
3 Larry an Eòin @twitter
  1. <table class = "clàr" >
  2. </clàr>

Clasaichean roghainneil

Cuir gin de na clasaichean a leanas ris a’ .tablechlas bhunaiteach.

.table-striped

A’ cur stiallan zebra ri sreath bùird sam bith taobh a-staigh an <tbody>roghnaiche :nth-childCSS (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 @twitter
  1. <table class = ""table-striped" >
  2. </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 @twitter
  1. <table class = ""table-bordered" >
  2. </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 @twitter
  1. <table class = "table-hover" >
  2. </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 @twitter
  1. <table class = ""table-condensed" >
  2. </clàr>

Clasaichean sreath roghainneil

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
  1. ...
  2. < tr class = "soirbheachas" >
  3. <td> 1 < /td>
  4. <td>TB - Mìosail</ td >
  5. < td > 01/04/2012 < / td >
  6. <td>Air aontachadh</ td >
  7. </ t >
  8. ...

Comharrachadh clàr le taic

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
  1. <clàr>
  2. <caption> ... </caption>
  3. <ceann>
  4. <tr>
  5. <th> ... </th>
  6. <th> ... </th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td> ... </td>
  12. <td> ... </td>
  13. </tr>
  14. </tbody>
  15. </clàr>

Stoidhlichean bunaiteach

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.

Uirsgeul Eisimpleir teacsa cuideachaidh ìre bloc an seo.
  1. <foirm>
  2. <fieldset>
  3. <legend> Uirsgeul </legend>
  4. <label> Ainm leubail </label>
  5. <input type = "text" placeholder = "Cuir a-steach rudeigin…" >
  6. <span class = "help-block" > Eisimpleir de theacsa cuideachaidh ìre bloca an-seo. </span>
  7. <label class = "bogsa-seic" >
  8. <input type = "bogsa-seic" > Thoir sùil orm
  9. </label>
  10. <button type = "submit" class = "btn" > Cuir a-steach </button>
  11. </fieldset>
  12. </form>

Cruthan roghainneil

Am measg Bootstrap tha trì dreachan cruth roghainneil airson cùisean cleachdaidh cumanta.

Foirm lorg

Cuir .form-searchris an fhoirm agus .search-queryris an <input>airson cuir a-steach teacsa a bharrachd.

  1. <form class = "form-search" >
  2. <input type = "text" class = "ceist rannsachaidh-inntrigidh-meadhanach" >
  3. <button type = "submit" class = "btn" > Rannsaich </button>
  4. </form>

Foirm in-loidhne

Cuir ris .form-inlineairson bileagan le co-thaobhadh clì agus smachdan bloc in-loidhne airson cruth teann.

  1. <form class = "form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Post-d" >
  3. <input type = "facal-faire" class = "input-small" placeholder = "Facal-faire" >
  4. <label class = "bogsa-seic" >
  5. <input type = "bogsa-seic" > Cuimhnich orm
  6. </label>
  7. <button type = "submit" class = "btn" > Clàraich a-steach </button>
  8. </form>

Foirm chòmhnard

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:

  • Cuir .form-horizontalris an fhoirm
  • Paisg na bileagan agus na smachdan a-steach.control-group
  • Cuir .control-labelris an leubail
  • Paisg smachdan co-cheangailte sam bith a-steach .controlsairson co-thaobhadh ceart
  1. <form class = "form-horizontal" >
  2. <div class = "buidheann-smachd" >
  3. <label class = "control-label" for = "inputEmail" > Post -d </label>
  4. <div class = "smachd" >
  5. <input type = "text" id = "inputEmail" placeholder = " Post-d" >
  6. </div>
  7. </div>
  8. <div class = "buidheann-smachd" >
  9. <label class = "control-label" for = "inputPassword" > Facal -faire </label>
  10. <div class = "smachd" >
  11. <input type = "facal-faire" id = "inputPassword" placeholder = " Facal-faire" >
  12. </div>
  13. </div>
  14. <div class = "buidheann-smachd" >
  15. <div class = "smachd" >
  16. <label class = "bogsa-seic" >
  17. <input type = "bogsa-seic" > Cuimhnich orm
  18. </label>
  19. <button type = "submit" class = "btn" > Clàraich a-steach </button>
  20. </div>
  21. </div>
  22. </form>

Smachdan foirm le taic

Eisimpleirean de smachdan foirm àbhaisteach le taic ann an cruth foirm eisimpleir.

Cur a-steach

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 typean-còmhnaidh.

  1. <input type = "text" placeholder = "Cuir a-steach teacsa" >

Raon-teacsa

Smachd foirm a bheir taic do ghrunn loidhnichean teacsa. Atharraich rowsfeart mar a dh’ fheumar.

  1. <textarea rows = " 3" ></textarea>

Bogsaichean sgrùdaidh agus rèidiothan

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.

Default (cruachadh)


  1. <label class = "bogsa-seic" >
  2. <input type = "bogsa-seic" luach = "" >
  3. Is e roghainn a h-aon seo agus sin - bi cinnteach gun cuir thu a-steach carson a tha e math
  4. </label>
  5.  
  6. <label class = "rèidio" >
  7. <input type = "radio" name = "optionsRadios" id = "optionsRadios1" luach = "roghainn 1" air a sgrùdadh >
  8. Is e roghainn a h-aon seo agus sin - bi cinnteach gun cuir thu a-steach carson a tha e math
  9. </label>
  10. <label class = "rèidio" >
  11. <input type = "radio" name = "OptionsRadios" id = "OptionsRadios2" value = "roghainn2" >
  12. Faodaidh roghainn a dhà a bhith na rudeigin eile agus le bhith ga thaghadh taghaidh e roghainn a h-aon
  13. </label>

Bogsaichean sgrùdaidh taobh a-staigh

Cuir an .inlineclas ri sreath de bhogsaichean-seic no rèidiothan airson smachdan nochdadh air an aon loidhne.

  1. <label class = "bogsa-seic inline" >
  2. <input type = "checkbox" id = "inlineCheckbox1" luach = "roghainn 1" > 1
  3. </label>
  4. <label class = "bogsa-seic inline" >
  5. <input type = "checkbox" id = "inlineCheckbox2" luach = "roghainn2" > 2
  6. </label>
  7. <label class = "bogsa-seic inline" >
  8. <input type = "checkbox" id = "inlineCheckbox3" luach = "roghainn 3" > 3
  9. </label>

Taghadh

Cleachd an roghainn bunaiteach no sònraich a multiple="multiple"gus grunn roghainnean a shealltainn aig an aon àm.


  1. <tagh>
  2. <roghainn> 1 </option>
  3. <roghainn> 2 </option>
  4. <roghainn> 3 </option>
  5. <roghainn> 4 </option>
  6. <roghainn> 5 </option>
  7. </select>
  8.  
  9. <select multiple = "multiple" >
  10. <roghainn> 1 </option>
  11. <roghainn> 2 </option>
  12. <roghainn> 3 </option>
  13. <roghainn> 4 </option>
  14. <roghainn> 5 </option>
  15. </select>

Leudachadh air smachd foirm

A’ cur ris na smachdan brabhsair a th’ ann mar-thà, tha Bootstrap a’ toirt a-steach co-phàirtean foirm feumail eile.

Cuir a-steach ro-làimh agus ceangailte

Cuir teacsa no putanan ris ro no às deidh cuir a-steach teacsa sam bith. Thoir an aire nach selecteil taic ri eileamaidean an seo.

Roghainnean bunaiteach

Còmhdaich an .add-onagus an inputle aon de dhà chlas gus teacsa a chuir a-steach no a cheangal ri cuir a-steach.

@

.00
  1. <div class = "input-prepend" >
  2. <span class = "add-on" > @ </span>
  3. <input class = "span2" id = "prependedInput" type = "text" placeholder = "Ainm-cleachdaiche" >
  4. </div>
  5. <div class = "input-append" >
  6. <input class = "span2" id = "appendedInput" type = "text" >
  7. <span class = "add-on" > .00 </span>
  8. </div>

Co-cheangailte

Cleachd an dà chlas agus dà eisimpleir .add-onairson cuir a-steach agus cuir a-steach.

$ .00
  1. <div class = "input-prepend input-append" >
  2. <span class = "add-on" > $ </span>
  3. <input class = "span2" id = "appendedPrependedInput" type = "text" >
  4. <span class = "add-on" > .00 </span>
  5. </div>

Putanan an àite teacsa

An àite <span>le teacsa, cleachd a .btngus putan (no dhà) a cheangal ri cuir a-steach.

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButton" type = "text" >
  3. <button class = "btn" type = "button" > Rach! </putan>
  4. </div>
  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButtons" type = "text" >
  3. <button class = "btn" type = "button" > Rannsaich </button>
  4. <button class = "btn" type = "button" > Roghainnean </button>
  5. </div>

Clò-bhuail putan

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedDropdownButton" type = "text" >
  3. <div class = "btn-group" >
  4. <button class = "btn dropdown-toggle" data-toggle = "tuiteam-sìos" >
  5. Gnìomh
  6. <span class = "caret" ></span>
  7. </putan>
  8. <ul class = ""dropdown-menu" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "input-prepend" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "tuiteam-sìos" >
  4. Gnìomh
  5. <span class = "caret" ></span>
  6. </putan>
  7. <ul class = ""dropdown-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "prependedDropdownButton" type = "text" >
  12. </div>
  1. <div class = "input-prepend input-append" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "tuiteam-sìos" >
  4. Gnìomh
  5. <span class = "caret" ></span>
  6. </putan>
  7. <ul class = ""dropdown-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >
  12. <div class = "btn-group" >
  13. <button class = "btn dropdown-toggle" data-toggle = "tuiteam-sìos" >
  14. Gnìomh
  15. <span class = "caret" ></span>
  16. </putan>
  17. <ul class = ""dropdown-menu" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

Buidhnean tuiteam-sìos sgaraichte

  1. <foirm>
  2. <div class = "input-prepend" >
  3. <div class = "btn-group" > ... </div>
  4. <input type = "text" >
  5. </div>
  6. <div class = "input-append" >
  7. <input type = "text" >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </form>

Foirm lorg

  1. <form class = "form-search" >
  2. <div class = "input-append" >
  3. <input type = "text" class = "span2 search-query" >
  4. <button type = "submit" class = "btn" > Rannsaich </button>
  5. </div>
  6. <div class = "input-prepend" >
  7. <button type = "submit" class = "btn" > Rannsaich </button>
  8. <input type = "text" class = "span2 search-query" >
  9. </div>
  10. </form>

Smachd air meud

Cleachd clasaichean meudachaidh coimeasach mar .input-largeno maids do chuir a-steach ri meudan colbh a’ ghriod a’ cleachdadh .span*chlasaichean.

Cuir a-steach ìre bloc

Thoir air rud sam bith <input>no <textarea>eileamaid a bhith gad ghiùlan fhèin mar eileamaid ìre bloc.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Meud coimeasach

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
  6. <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.

Meud clèithe

Cleachd .span1airson cuir a .span12-steach a tha a rèir na h-aon mheudan de cholbhan a’ ghriod.

  1. <input class = "span1" type = "text" placeholder = ".span1" >
  2. <input class = "span2" type = "text" placeholder = ".span2" >
  3. <input class = "span3" type = "text" placeholder = ".span3" >
  4. <tagh class = "span1" >
  5. ...
  6. </select>
  7. <tagh class = "span2" >
  8. ...
  9. </select>
  10. <tagh class = "span3" >
  11. ...
  12. </select>

Airson iomadh cuir a-steach clèithe gach loidhne, cleachd an .controls-rowclas 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.

  1. <div class = "smachd" >
  2. <input class = "span5" type = "text" placeholder = ".span5" >
  3. </div>
  4. <div class = "a' cumail smachd air sreath-smachd" >
  5. <input class = "span4" type = "text" placeholder = ".span4" >
  6. <input class = "span1" type = "text" placeholder = ".span1" >
  7. </div>
  8. ...

Cuir a-steach nach gabh atharrachadh

Thoir seachad dàta ann an cruth nach gabh a dheasachadh gun a bhith a' cleachdadh comharradh foirme fhèin.

Tha cuid de luach an seo
  1. <span class = "input-xlarge uneditable-input" > Luach an seo </span>

Foirm gnìomhan

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.

  1. <div class = "form-actions" >
  2. <button type = "submit" class = "btn btn-primary" > Sàbhail na h-atharraichean </button>
  3. <button type = "button" class = "btn" > Sguir dheth </button>
  4. </div>

Teacs cuideachaidh

Taic ìre inline agus bloc airson teacsa cuideachaidh a nochdas timcheall air smachdan foirm.

Taic in-loidhne

Teacs taic in-loidhne
  1. <input type = "text" <span class = "help-inline" > Teacsa cuideachaidh in-loidhne </span>

Cuir casg air cuideachadh

Bloc nas fhaide de theacsa cuideachaidh a bhriseas air loidhne ùr agus a dh’ fhaodadh leudachadh nas fhaide na aon loidhne.
  1. <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>

Foirm airson stàitean smachd a

Thoir fios air ais do luchd-cleachdaidh no luchd-tadhail le stàitean fios-air-ais bunaiteach air smachdan foirm agus bileagan.

Fòcas air cuir a-steach

Bidh sinn a’ toirt air falbh na stoidhlichean bunaiteach outlineair cuid de smachdan foirm agus a’ cur a-steach box-shadowna àite airson :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Tha fòcas air seo..." >

Cuir a-steach mì-dhligheach

Cuir a-steach stoidhle tro ghnìomhachd brabhsair bunaiteach le :invalid. Sònraich type, cuir a-steach am requiredfeart 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.

  1. <input class = "span3" type = "post-d" a dhìth >

Cuir a-steach ciorramach

Cuir am disabledfeart air cuir a-steach gus casg a chuir air cuir a-steach luchd-cleachdaidh agus gus sealladh beagan eadar-dhealaichte a bhrosnachadh.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Cuir a-steach à comas an-seo..." >

Stàitean dearbhaidh

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.

Is dòcha gu bheil rudeigin air a dhol ceàrr
Feuch an ceartaich thu am mearachd
Ainm-cleachdaidh air a ghabhail
Woohoo!
  1. <div class = "rabhadh buidheann-smachd" >
  2. <label class = "control-label" for = "inputWarning" > Cuir a-steach le rabhadh </label>
  3. <div class = "smachd" >
  4. <input type = "text" id = "inputWarning" >
  5. <span class = "help-inline" > S dòcha gun deach rudeigin ceàrr </span>
  6. </div>
  7. </div>
  8.  
  9. <div class = "mearachd buidheann-smachd" >
  10. <label class = "control-label" for = "inputError" > Cuir a-steach leis a’ mhearachd </label>
  11. <div class = "smachd" >
  12. <input type = "text" id = "inputError" >
  13. <span class = "help-inline" > Ceartaich a’ mhearachd </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "fiosrachadh buidheann-smachd" >
  18. <label class = "control-label" for = "inputInfo" > Cuir a-steach le fiosrachadh </label>
  19. <div class = "smachd" >
  20. <input type = "text" id = "inputInfo" >
  21. <span class = "help-inline" > Chaidh an t-ainm-cleachdaiche a ghabhail </span> mu thràth
  22. </div>
  23. </div>
  24.  
  25. <div class = "soirbheachas buidheann-smachd" >
  26. <label class = "control-label" for = "inputSuccess" > Cuir a-steach soirbheachail </label>
  27. <div class = "smachd" >
  28. <input type = "text" id = "inputSuccess" >
  29. <span class = "help-inline" > Woohoo! </span>
  30. </div>
  31. </div>

Putanan bunaiteach

Faodar stoidhlichean putan a chuir an sàs ann an rud sam bith leis a’ .btnchlas air a chuir an sàs. Ach, mar as trice bidh thu airson iad sin a chuir an sàs a-mhàin <a>agus <button>eileamaidean airson an tairgse as fheàrr.

Putan clas ="" Tuairisgeul
btn Putan liath àbhaisteach le caisead
btn btn-primary A 'toirt seachad cuideam lèirsinneach a bharrachd agus a' comharrachadh a 'phrìomh ghnìomh ann an seata de phutanan
btn btn-info Air a chleachdadh mar dhòigh eile air na stoidhlichean bunaiteach
btn btn-success A’ comharrachadh gnìomh soirbheachail no adhartach
btn btn-warning A’ nochdadh gum bu chòir a bhith faiceallach leis a’ ghnìomh seo
btn btn-danger A’ comharrachadh gnìomh cunnartach no a dh’ fhaodadh a bhith àicheil
btn btn-inverse Putan dorcha glas eile, gun a bhith ceangailte ri gnìomh no cleachdadh semantach
btn btn-link Thoir cuideam air putan le bhith ga dhèanamh coltach ri ceangal fhad ‘s a chumas tu giùlan putan

Co-fhreagarrachd tar-brobhsair

Cha bhith IE9 a’ bàrr caiseadan cùil air oiseanan cruinn, agus mar sin bheir sinn air falbh e. Co-cheangailte, tha IE9 a’ maoidheadh button​​eileamaidean ciorramach, a’ toirt an teacsa liath le sgàil-theacsa cas nach urrainn dhuinn a chàradh.

Meudan putan

A bheil thu ag iarraidh putanan nas motha no nas lugha? Cuir ris .btn-large, .btn-small, no .btn-miniairson meudan a bharrachd.

  1. <p>
  2. <button class = "btn btn-large btn-primary" type = "putan" > Putan mòr </putan>
  3. <button class = "btn btn-large" type = "putan" > Putan mòr </button>
  4. </p>
  5. <p>
  6. <button class = "btn btn-primary" type = "button" > Putan bunaiteach </putan>
  7. <button class = "btn" type = "button" > Putan bunaiteach </button>
  8. </p>
  9. <p>
  10. <button class = "btn btn-small btn-primary" type = "putan" > Putan beag </putton>
  11. <button class = "btn btn-small" type = "button" > Putan beag </putan>
  12. </p>
  13. <p>
  14. <button class = "btn btn-mini btn-primary" type = "putan" > Putan beag </putan>
  15. <button class = "btn btn-mini" type = "putan" > Putan beag </button>
  16. </p>

Cruthaich putanan ìre bloc - an fheadhainn a tha a 'dol thairis air leud iomlan pàrant - le bhith a' cur .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "putan" > Putan ìre bacaidh </put>
  2. <button class = "btn btn-large btn-block" type = "putan" > Putan ìre bacaidh </put>

Stàite ciorramach

Thoir air putanan a bhith a’ coimhead neo-bhriog le bhith gan seargadh air ais 50%.

Eileamaid anchor

Cuir an .disabledclas ri <a>putanan.

Ceangal bun-sgoile Ceangal

  1. <a href="#" class="btn btn-large btn-primary à comas" > Prìomh cheangal </a>
  2. <a href="#" class="btn btn-large disabled"> Ceangal </a> _ _ _

Cinn suas!Bidh sinn a’ cleachdadh .disabledmar chlas goireis an seo, coltach ris a’ .activechlas chumanta, agus mar sin chan eil feum air ro-leasachan. Cuideachd, chan eil an clas seo ach airson bòidhchead; feumaidh tu JavaScript gnàthaichte a chleachdadh gus ceanglaichean a chur à comas an seo.

Eileamaid putan

Cuir am disabledfeart ri <button>putanan.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "a chur à comas" > Putan bun-sgoile </button>
  2. <button type = "button" class = "btn btn-large" à comas > Putan </button>

Aon chlas, ioma tagaichean

Cleachd an .btnclas air <a>, <button>, no <input>eileamaid.

Ceangal
  1. <a class="btn" href=""> Ceangal </a> _ _ _ _ _
  2. <button class = "btn" type = "submit" > Putan </button>
  3. <input class = "btn" type = "button" value = "Cuir a-steach" >
  4. <input class = "btn" type = "submit" value = "Cuir a-steach" >

Mar chleachdadh as fheàrr, feuch ris an eileamaid airson do cho-theacs a mhaidseadh gus dèanamh cinnteach gu bheilear a’ toirt seachad tar-bhrabhsair. Ma tha faidhle agad input, cleachd <input type="submit">putan airson a’ phutan agad.

Cuir clasaichean ri <img>eileamaid gus ìomhaighean a dhealbhadh gu furasta ann am pròiseact sam bith.

Dealbh meud 140x140 Dealbh meud 140x140 Dealbh meud 140x140
  1. <img src = "..." class = "img-rounded" >
  2. <img src = "..." class = "img-circle" >
  3. <img src = "..." class = "img-polaroid" >

Cinn suas! .img-roundedagus .img-circlenach eil ag obair ann an IE7-8 air sgàth dìth border-radiustaic.

Glyphs ìomhaigh

140 ìomhaigh ann an cruth sprite, rim faighinn ann an liath dorcha (àbhaisteach) agus geal, air an toirt seachad le Glyphicons .

  • ìomhaigh-ghlainne
  • ìomhaigh-chiùil
  • ìomhaigh-lorg
  • ìomhaigh-cèis
  • ìomhaigh-chridhe
  • ìomhaigh-rionnag
  • ìomhaigh-rionnag-falamh
  • neach-cleachdaidh ìomhaigh
  • ìomhaigh-film
  • ìomhaigh-th-mòr
  • ìomhaigh-th
  • ìomhaigh-th-liosta
  • ìomhaigh-ceart
  • ìomhaigh - thoir air falbh
  • ìomhaigh-zoom-in
  • ìomhaigh-zoom-out
  • ìomhaigh-dheth
  • ìomhaigh-chomharran
  • ìomhaigh-cog
  • ìomhaigh-sgudal
  • ìomhaigh-dhachaigh
  • ìomhaigh-faidhle
  • ìomhaigh-ùine
  • ìomhaigh-rathaid
  • icon-download-alt
  • ìomhaigh-luchdachadh sìos
  • ìomhaigh-luchdachadh suas
  • ìomhaigh-bogsa a-steach
  • ìomhaigh-cluiche-cearcall
  • ìomhaigh-ath-aithris
  • ìomhaigh-ùrachadh
  • ìomhaigh-liosta-alt
  • glas ìomhaigh
  • ìomhaigh-bhratach
  • ìomhaigh-fònaichean
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • ìomhaigh-qrcode
  • còd-barra ìomhaigh
  • ìomhaigh-tag
  • tagaichean ìomhaigh
  • leabhar-ìomhaigh
  • comharra-leabhair ìomhaigh
  • ìomhaigh-clò
  • ìomhaigh-camara
  • ìomhaigh-chruth
  • ìomhaigh-trom
  • ìomhaigheach
  • ìomhaigh-teacsa-àirde
  • ìomhaigh-teacsa-leud
  • icon-align-clì
  • ìomhaigh-align-ionad
  • ìomhaigh-co-thaobhadh-deas
  • icon-align-justify
  • ìomhaigh-liosta
  • icon-indent-clì
  • ìomhaigh-indent-deas
  • ìomhaigh-facetime-video
  • ìomhaigh-dhealbh
  • ìomhaigh-peansail
  • ìomhaigh-mapa-marcadair
  • ìomhaigh-atharraich
  • ìomhaigh-tint
  • deasaich ìomhaigh
  • roinn ìomhaigh
  • sgrùdadh ìomhaigh
  • ìomhaigh-gluasad
  • ìomhaigh-ceum air ais
  • ìomhaigh-luath-air ais
  • ìomhaigh - air ais
  • ìomhaigh-chluich
  • ìomhaigh-stad
  • ìomhaigh-stad
  • ìomhaigh-air adhart
  • icon-luath-air adhart
  • ìomhaigh-ceum air adhart
  • ìomhaigh-cuir a-mach
  • icon-chevron-chlì
  • ìomhaigh-chevron-deas
  • ìomhaigh-plus-soidhne
  • ìomhaigh-minus-soidhne
  • ìomhaigh-soidhne toirt air falbh
  • ìomhaigh-ok-soidhne
  • ìomhaigh-ceist-soidhne
  • ìomhaigh-fios-soidhne
  • ìomhaigh-sgrìn
  • icon-remove-circle
  • ìomhaigh-ok-cearcall
  • ìomhaigh-ban-cearcall
  • ìomhaigh-saighead-chlì
  • ìomhaigh-saighead-deas
  • ìomhaigh-saighead-suas
  • ìomhaigh-saighead-sìos
  • ìomhaigh-share-alt
  • ìomhaigh-ath-mheudachadh-làn
  • ìomhaigh-ath-mheudachadh-beag
  • ìomhaigh-plus
  • ìomhaigh-minus
  • ìomhaigh-rionnag
  • ìomhaigh-exclamation-sign
  • ìomhaigh-tiodhlac
  • ìomhaigh-leaf
  • ìomhaigh-teine
  • ìomhaigh-sùil-fosgailte
  • ìomhaigh-sùil-dùin
  • ìomhaigh-rabhaidh
  • ìomhaigh-itealan
  • ìomhaigh-mìosachan
  • ìomhaigh-air thuaiream
  • ìomhaigh-bheachd
  • ìomhaigh-magnet
  • ìomhaigh-chevron-suas
  • ìomhaigh-chevron-sìos
  • ìomhaigh-retweet
  • icon-shopping-cart
  • ìomhaigh-phasgan-dlùth
  • icon-folder-fosgailte
  • ìomhaigh-ath-mheudachadh-inghearach
  • ìomhaigh-ath-mheudachadh-còmhnard
  • ìomhaigh-hdd
  • ìomhaigh-tarbh
  • clag-ìomhaigh
  • teisteanas-ìomhaigh
  • ìomhaigh-thumbs-up
  • ìomhaigh-thumbs-sìos
  • ìomhaigh-làimh dheis
  • ìomhaigh-làimh chlì
  • ìomhaigh-làimhe
  • ìomhaigh-làimhe sìos
  • icon-circle-arrow-deas
  • icon-circle-arrow-clì
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • ìomhaigh-chruinne
  • ìomhaigh-wrench
  • ìomhaigh-ghnìomhan
  • ìomhaigh-criathrag
  • ìomhaigh-geàrr-chunntas
  • ìomhaigh-làn-sgrìn

Sònrachadh 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.


Ciamar a chleachdadh

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:

  1. <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.

  1. <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.


Eisimpleirean ìomhaigh

Cleachd iad ann am putanan, buidhnean putan airson bàr-inneal, seòladh, no cuir a-steach foirm ro-shuidhichte.

Putanan

Buidheann putan ann am bàr inneal putan
  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. <a class="btn" href="#" > < i class = " icon - align-left" ></i></a>
  4. <a class="btn" href="#" > < i class = " icon - align-center" ></i></a>
  5. <a class="btn" href="#" > < i class = " icon - align-right" ></i></a>
  6. <a class="btn" href="#" > <i class = " icon-align-justify" > < /i></a>
  7. </div>
  8. </div>
Clàr-taice sìos ann am buidheann putanan
  1. <div class = "btn-group" >
  2. <a class="btn btn-primary" href = "#" ><i class = " icon-user icon-white" ></i> Cleachdaiche </a>
  3. <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#" > < span class = " caret " > < /span></a>
  4. <ul class = ""dropdown-menu" >
  5. <li><a href = "#" ><i class = "icon-pencil" ></i> Deasaich </a></li>
  6. <li><a href = "#" ><i class = "icon-sgudal" ></i> Sguab às </a></li>
  7. <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>
  8. <li class = "divider" ></li>
  9. <li><a href = "#" ><i class = "i" ></i> Dèan admin </a></li>
  10. </ul>
  11. </div>
Meudan putan
  1. <a class="btn btn-large" href = "#" ><i class = " icon-star" ></i> Rionnag </a>
  2. <a class="btn btn-small" href = "#" ><i class = " icon-star" ></i> Rionnag </a>
  3. <a class="btn btn-mini" href = "#" ><i class = " icon-star" ></i> Rionnag </a>

Seòladh

  1. <ul class = "nav nav-list" >
  2. <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Dachaigh </a></li>
  3. <li><a href = "#" ><i class = "leabhar-ìomhaigh" ></i> Leabharlann </a></li>
  4. <li><a href = "#" ><i class = "icon-pencil" ></i> Tagraidhean </a></li>
  5. <li><a href = "#" ><i class = "i" ></i> Measgachadh </a> </li>
  6. </ul>

Foirm raointean

  1. <div class = "buidheann-smachd" >
  2. <label class = "control-label" for = "inputIcon" > Seòladh post-d </label>
  3. <div class = "smachd" >
  4. <div class = "input-prepend" >
  5. <span class = "add-on" ><i class = "icon-envelope" ></i></span>
  6. <input class = "span2" id = "inputIcon" type = "text" >
  7. </div>
  8. </div>
  9. </div>