CSS bunaiteach

A bharrachd air an sgafallachd, tha eileamaidean HTML bunaiteach air an stoidhleachadh agus air an neartachadh le clasaichean leudachail gus sealladh agus faireachdainn ùr, cunbhalach a thoirt seachad.

Cinn agus leth-bhreac bodhaig

Sgèile clò-sgrìobhaidh

Tha a’ ghriod clò-sgrìobhaidh gu lèir stèidhichte air dà Nas lugha caochladair anns an fhaidhle caochlaideach againn.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 cuid de matamataigs, gus na h-iomaill, pleadhagan, agus àirdean loidhne de gach seòrsa againn agus barrachd a chruthachadh.

Eisimpleir corp teacsa

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

h1. Ceann-uidhe 1

h2. Ceann-uidhe 2

h3. Ceann-uidhe 3

h4. Ceann-uidhe 4

h5. Ceann-uidhe 5
h6. Ceann 6

Cudrom, seòladh, agus giorrachadh

Eileamaid Cleachdadh Roghainneil
<strong> Airson cuideam a chur air criomag de theacsa le cudromach Chan eil gin
<em> Airson cuideam a chur air criomag de theacsa le cuideam Chan eil gin
<abbr> Wrap giorrachaidhean agus acronaim gus an dreach leudaichte air hover a shealltainn

Cuir a-steach feart roghainneil titleairson teacsa leudaichte

Cleachd .initialismclas airson giorrachaidhean mòra.
<address> Airson fiosrachadh conaltraidh airson an sinnsear as fhaisge no an obair gu lèir Glèidh cruth le bhith a 'crìochnachadh a h-uile loidhne le<br>

A 'cleachdadh cuideam

Fusce dapibus , tellus ac cursus comodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Nota: Faodaidh tu a chleachdadh <b>agus <i>ann an HTML5, ach tha an cleachdadh air atharrachadh beagan. <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 teicnigeach, msaa.

Seòlaidhean eisimpleirean

Seo dà eisimpleir air mar a ghabhas an <address>taga a chleachdadh:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Ainm slàn
[email protected]

Eisimpleir giorrachadh

Tha giorrachadh le titlefeart aig a’ chrìoch ìosal le dotagach aotrom agus cursair cuideachaidh air hover. Bheir seo comharra a bharrachd do luchd-cleachdaidh gun tèid rudeigin a shealltainn air hover.

Cuir an initialismclas ri giorrachadh gus co-sheirm clò-sgrìobhaidh àrdachadh le bhith a’ toirt meud teacsa beagan nas lugha dha.

Is e HTML an rud as fheàrr bho aran sliseag.

Is e giorrachadh den fhacal buadhan attr .

Blockquotes

Eileamaid Cleachdadh Roghainneil
<blockquote> Eileamaid ìre bloc airson susbaint a thogail à stòr eile

Cuir citefeart ris airson URL an tùs

Cleachdadh .pull-leftagus .pull-rightclasaichean airson roghainnean fleòdraidh
<small> Eileamaid roghnach airson luaidh mu choinneamh neach-cleachdaidh a chur ris, gu h-àbhaisteach ùghdar le tiotal na h-obrach Cuir <cite>timcheall air an tiotal no ainm an tobair

Gus blockquote a ghabhail a-steach, cuir <blockquote>timcheall HTML sam bith mar an cuòt. Airson luachan dìreach tha sinn a’ moladh a <p>.

Cuir a-steach <small>eileamaid roghainneil airson do thùs a ghairm agus gheibh thu em dash &mdash;air thoiseach air airson adhbharan stoidhle.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-sreath iomlan ro thoiseach. </p>
  3. <small> Cuideigin ainmeil </small>
  4. </blockquote>

Eisimpleirean de blockquotes

Tha na h-àireamhan bacaidh bunaiteach air an ainmeachadh mar a leanas:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-sreath iomlan ro thoiseach.

Cuideigin a tha ainmeil ann an Body of work

Gus do blockquote a chuir air an taobh cheart, cuir ris class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-sreath iomlan ro thoiseach.

Cuideigin a tha ainmeil ann an Body of work

Liostaichean

Gun òrdugh

<ul>

  • 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

Gun stoidhle

<ul class="unstyled">

  • 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

Dh'òrdaich

<ol>

  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

Tuairisgeul

<dl>

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.

Tuairisgeul còmhnard

<dl class="dl-horizontal">

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.

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

  1. Mar eisimpleir , bu chòir earrann < code> </ 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>

Nota: 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 scrolla y-axis.

Google Prettify

Gabh an aon <pre>eileamaid agus cuir dà chlas roghainneil airson tairgse nas fheàrr.

  1. <p> Sampall teacsa an seo... </p>
  1. <pre class = "prettyprint
  2. sreathan" >
  3. <p>Sampall teacsa an seo...</p>
  4. </pre>

Luchdaich sìos google-code-prettify agus faic an readme airson mar a chleachdas tu.

Comharrachadh clàr

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)
Feumar a chleachdadh taobh a-staigh a<thead>
<caption> Tuairisgeul no geàrr-chunntas air na tha sa chlàr, gu sònraichte feumail do luchd-leughaidh sgrion
  1. <clàr>
  2. <ceann>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </clàr>

Roghainnean clàr

Ainm Clas Tuairisgeul
Deònach Chan eil gin Gun stoidhlichean, dìreach colbhan is sreathan
Bunaiteach .table Dìreach loidhnichean còmhnard eadar sreathan
Crìochan .table-bordered A’ cuairteachadh oiseanan agus a’ cur crìoch a-muigh ris
Zebra-stiall .table-striped A’ cur dath cùl-raon liath aotrom ri sreathan neònach (1, 3, 5, msaa)
Co-dhlùthaichte .table-condensed A’ gearradh pleadhag dìreach ann an leth, bho 8px gu 4px, taobh a-staigh a h-uile càil tdagus theileamaidean

Clàr eisimpleirean

1. Stoidhlichean clàr bunaiteach

Bidh bùird air an stialladh gu fèin-ghluasadach le dìreach beagan chrìochan gus dèanamh cinnteach gum bi iad furasta an leughadh agus an structar a chumail suas. Le 2.0, .tabletha feum air a’ chlas.

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

2. Clàr stiallach

Faigh beagan tlachd leis na bùird agad le bhith a’ cur stiallan zebra ris - dìreach cuir ris a’ .table-stripedchlas.

Nota: Bidh bùird stiallach a’ cleachdadh an :nth-childroghnaichear CSS agus chan eil e ri fhaighinn ann an IE7-IE8.

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

3. Clàr crìche

Cuir crìochan timcheall a’ bhùird gu lèir agus oiseanan cruinn airson adhbharan bòidhchead.

  1. <table class = ""table-bordered" >
  2. </clàr>
# 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

4. Clàr dùmhail

Dèan na bùird agad nas toinnte le bhith a’ cur a’ .table-condensedchlas ri pleadhag cealla-bùird a ghearradh ann an leth (bho 8px gu 4px).

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

5. Cuir còmhla iad uile!

Faodaidh tu gin de na clasaichean bùird a chur còmhla gus coltas eadar-dhealaichte fhaighinn le bhith a’ cleachdadh gin de na clasaichean a tha rim faighinn.

  1. <table class = ""table-striped-table-bordered table-condled" >
  2. ...
  3. </clàr>
Làn ainm
# A’ chiad ainm An t-ainm mu dheireadh Ainm-cleachdaidh
1 Marc Otto @meadh
2 Iacob Thornton @saill
3 Larry the Bird @twitter

HTML agus CSS sùbailte

Is e am pàirt as fheàrr mu fhoirmean ann am Bootstrap gu bheil na cuir a-steach agus na smachdan agad uile a’ coimhead glè mhath ge bith ciamar a thogas tu iad nad chomharradh. Chan eil feum air HTML iomarcach, ach bheir sinn seachad na pàtranan dhaibhsan a tha ga iarraidh.

Bidh dealbhadh nas toinnte a’ tighinn le clasaichean goirid is scalable airson stoidhle furasta agus ceangal tachartais, gus am bi thu air do chòmhdach aig a h-uile ceum.

Ceithir dreachan air an toirt a-steach

Tha Bootstrap a’ tighinn le taic airson ceithir seòrsaichean cruth cruth:

  • Inghearach (àbhaisteach)
  • Rannsaich
  • In-loidhne
  • Cothromach

Feumaidh diofar sheòrsaichean de chruthan cruth beagan atharrachaidhean air comharrachadh, ach tha na smachdan fhèin fhathast agus gan giùlan fhèin mar an ceudna.

Stàitean smachd agus barrachd

Tha foirmean Bootstrap a’ toirt a-steach stoidhlichean airson a h-uile smachd cruth bunaiteach leithid cuir a-steach, textarea, agus tagh ris am biodh dùil agad. Ach tha e cuideachd a’ tighinn le grunn phàirtean àbhaisteach leithid cuir a-steach ceangailte agus ro-làimh agus taic airson liostaichean de bhogsaichean-seic.

Tha stàitean leithid mearachd, rabhadh, agus soirbheachas air an toirt a-steach airson gach seòrsa smachd foirm. Cuideachd tha stoidhlichean airson smachdan ciorramach.

Ceithir seòrsaichean de fhoirmean

Bidh Bootstrap a’ toirt seachad comharran sìmplidh agus stoidhlichean airson ceithir stoidhlichean de chruthan lìn cumanta.

Ainm Clas Tuairisgeul
Inghearach (àbhaisteach) .form-vertical (chan eil feum air) Leubail air an cruachadh, air an taobh chlì thairis air smachdan
In-loidhne .form-inline Bileag co-thaobhadh clì agus smachdan bloc in-loidhne airson stoidhle teann
Rannsaich .form-search Cuir a-steach teacsa leth-chruinn airson bòidhchead sgrùdaidh àbhaisteach
Cothromach .form-horizontal Cuir air bhog bileagan clì, co-thaobhadh deas air an aon loidhne ri smachdan

Foirmean eisimpleirean a’ cleachdadh dìreach smachdan foirm, gun chomharradh a bharrachd

Foirm bunaiteach

Ro-shealladh glic agus aotrom gun chomharradh a bharrachd.

Eisimpleir teacsa cuideachaidh ìre bloc an seo.

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

Foirm lorg

Cuir .form-searchris an fhoirm agus .search-queryris an input.

  1. <form class = "math 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 .form-inlineri finesse co-thaobhadh dìreach agus farsaingeachd smachdan foirm.

  1. <form class = "tobar foirm-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>

Foirmean còmhnard

Air an taobh dheas tha na smachdan foirm bunaiteach a tha sinn a’ toirt taic. Seo an liosta bulleted:

  • cuir a-steach teacsa (teacsa, facal-faire, post-d, msaa)
  • bogsa-seic
  • rèidio
  • tagh
  • ioma-thaghadh
  • cuir a-steach faidhle
  • raon teacsa

A bharrachd air teacsa an-asgaidh, tha cuir a-steach teacsa HTML5 sam bith a’ nochdadh mar sin.

Comharrachadh eisimpleir

Leis an eisimpleir gu h-àrd cruth foirm, seo an comharradh co-cheangailte ris a’ chiad bhuidheann cuir a-steach is smachd. Tha feum air na .control-group, .control-label, agus .controlsna clasaichean airson stoidhle.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Teacs uirsgeul </legend>
  4. <div class = "buidheann-smachd" >
  5. <label class = "control-label" for = "input01" > Cuir a-steach teacsa </label>
  6. <div class = "smachd" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > A' cur taic ri teacsa cuideachaidh </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Foirm airson stàitean smachd a

Tha Bootstrap a’ nochdadh stoidhlichean airson fòcas agus disabledstàitean le taic brabhsair. Bheir sinn air falbh an Webkit bunaiteach outlineagus cuiridh sinn a-steach box-shadowna àite airson :focus.


Dearbhadh foirm

Tha e cuideachd a’ toirt a-steach stoidhlichean dearbhaidh airson mearachdan, rabhaidhean, agus soirbheachas. Gus a chleachdadh, cuir an clas mearachd ris an .control-group.

  1. < raon-raoin
  2. class = "mearachd buidheann-smachd" >
  3. </fieldset>
Tha cuid de luach an seo
Is dòcha gu bheil rudeigin air a dhol ceàrr
Feuch an ceartaich thu am mearachd
Woohoo!
Woohoo!

Leudachadh air smachd foirm

Prepend & cuir a-steach cuir a-steach

Bidh buidhnean cuir a-steach - le teacsa ceangailte no ro-phàighte - a’ toirt seachad dòigh fhurasta gus barrachd co-theacsa a thoirt seachad airson do chuir a-steach. Tha eisimpleirean math a’ toirt a-steach an soidhne @ airson ainmean-cleachdaidh Twitter no $ airson ionmhas.


Bogsaichean sgrùdaidh agus rèidiothan

Suas gu v1.4, bha feum aig Bootstrap air comharrachadh a bharrachd timcheall air bogsaichean-seic agus rèidiothan gus an cruachadh. A-nis, tha e na chùis shìmplidh a bhith ag ath-aithris na <label class="checkbox">tha a’ cuairteachadh an fhaidhle <input type="checkbox">.

Tha bogsaichean sgrùdaidh in-loidhne agus rèidiothan cuideachd a’ faighinn taic. Dìreach cuir .inlineri gin .checkboxno .radioagus tha thu deiseil.


Foirmean in-loidhne agus cuir ris/prepend

Gus prepend no cuir a-steach a chuir a-steach ann an cruth in-loidhne, bi cinnteach gun cuir thu an .add-onagus inputair an aon loidhne, gun àitean.


Foirm teacsa cuideachaidh

Gus teacsa cuideachaidh a chur ris airson cuir a-steach an fhoirm agad, cuir a-steach teacsa cuideachaidh in-loidhne leis <span class="help-inline">no bloc teacsa cuideachaidh leis <p class="help-block">às deidh an eileamaid cuir a-steach.

Cleachd na h-aon .span*chlasaichean bhon t-siostam clèithe airson meudan cuir a-steach.

Faodaidh tu cuideachd clasaichean statach a chleachdadh nach bi a’ mapadh air a’ ghriod, a’ freagairt air stoidhlichean freagairteach CSS, no a’ toirt cunntas air diofar sheòrsaichean smachd (me, inputvs. select).

@

Seo beagan teacsa cuideachaidh

.00
Seo barrachd teacsa cuideachaidh
$ .00

Nota: Bidh bileagan a’ cuairteachadh a h-uile roghainn airson raointean cliog tòrr nas motha agus foirm a ghabhas cleachdadh.

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

Putanan airson gnìomhan

Mar ghnàthachas, cha bu chòir putanan a chleachdadh ach airson gnìomhan fhad ‘s a tha hyperlinks gu bhith air an cleachdadh airson nithean. Mar eisimpleir, bu chòir "Luchdaich a-nuas" a bhith na phutan agus bu chòir "gnìomhachd o chionn ghoirid" a bhith na cheangal.

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 ann an eileamaidean a <a>- mhàin.<button>

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.

Ioma mheudan

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


Stàite ciorramach

Airson putanan ciorramach, cuir an .disabledclas ri ceanglaichean agus am disabledfeart airson <button>eileamaidean.

Ceangal bun-sgoile Ceangal

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.

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" >
  3. Putan
  4. </putan>
  5. <input class = "btn" type = "putan"
  6. luach = "Cuir a-steach" >
  7. <input class = "btn" type = "cuir a-steach"
  8. luach = "Cuir a-steach" >

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

  • ì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

Air a thogail mar sprite

An àite a bhith a’ dèanamh a h-uile ìomhaigh mar iarrtas a bharrachd, tha sinn air an cur ri chèile ann an sprite - dòrlach de dhealbhan ann an aon fhaidhle a chleachdas CSS gus na h-ìomhaighean a shuidheachadh le background-position. Is e seo an aon dòigh a bhios sinn a’ cleachdadh air Twitter.com agus tha e air obrachadh gu math dhuinn.

Tha a h-uile clas ìomhaighean air an ro-leasachan .icon-airson farsaingeachd ainmean ceart agus farsaingeachd, coltach ri na pàirtean eile againn. Cuidichidh seo gus còmhstrithean le innealan eile a sheachnadh.

Tha Glyphicons air an seata Halflings a chleachdadh anns a’ ghoireas stòr fosgailte againn fhad ‘s a bheir sinn seachad ceangal agus creideas an seo anns na docaichean. Feuch an smaoinich thu air an aon rud a dhèanamh anns na pròiseactan agad.

Ciamar a chleachdadh

Bidh Bootstrap a’ cleachdadh <i>taga airson a h-uile ìomhaigh, ach chan eil clas cùise aca - dìreach ro-leasachan co-roinnte. 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:

  1. <i class = "icon-search icon-white" ></i>

Tha 120 clas ann airson taghadh airson na h-ìomhaighean agad. Dìreach cuir <i>taga leis na clasaichean ceart agus tha thu deiseil. Gheibh thu an liosta slàn ann an sprites.less no dìreach an seo san sgrìobhainn seo.

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 cùisean

Tha ìomhaighean sgoinneil, ach càite am biodh duine gan cleachdadh? Seo beagan bheachdan:

  • Mar dhealbhan airson do sheòladh bàr-taoibh
  • Airson seòladh dìreach air a stiùireadh le ìomhaigh
  • Airson putanan a chuidicheas le bhith ag innse brìgh gnìomh
  • Le ceanglaichean gus co-theacsa a cho-roinn air ceann-uidhe neach-cleachdaidh

Gu bunaiteach, ge bith càite an cuir thu <i>taga, faodaidh tu ìomhaigh a chuir.

Eisimpleirean

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