Bonn CSS

Anuas ar an scafall, déantar buneilimintí HTML a stíliú agus a fheabhsú le ranganna sínte chun cuma agus mothú úr comhsheasmhach a sholáthar.

Ceannteidil & cóip coirp

Scála clóghrafach

Tá an eangach clóghrafaíoch ar fad bunaithe ar dhá athróg Lúide inár gcomhad athróg.less: @baseFontSizeagus @baseLineHeight. Is é an chéad cheann an clómhéid a úsáidtear tríd síos agus is é an dara ceann an bonnlíne airde.

Bainimid úsáid as na hathróga sin, agus roinnt matamaitice, chun na himill, na stuáil, agus na hairde líne de gach cineál againn agus níos mó a chruthú.

Téacs comhlacht samplach

Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cóip comhlacht luaidhe

Déan alt seasamh amach trí chur leis .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor dolor. Duis mollis, est non commodo luctus.

h1. Ceannteideal 1

h2. Ceannteideal 2

h3. Ceannteideal 3

h4. Ceannteideal 4

h5. Ceannteideal 5
h6. Ceannteideal 6

Béim, seoladh, agus giorrúchán

Eilimint Úsáid Roghnach
<strong> Chun béim a chur ar phíosa téacs le tábhachtach Dada
<em> Chun béim a chur ar phíosa téacs le strus Dada
<abbr> Fillteann giorrúcháin agus acrainmneacha chun an leagan méadaithe ar ainlíon a thaispeáint

Cuir tréith roghnach san áireamh titlele haghaidh téacs méadaithe

Úsáid .initialisman rang le haghaidh giorrúcháin i gcás uachtair.
<address> Chun eolas teagmhála a fháil dá sinsear is gaire nó don chorpas iomlán oibre Formáidiú a chaomhnú trí gach líne a chríochnú le<br>

Ag baint úsáide as béim

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, pharetra augue.

Nóta: Thig leat a úsáid <b>agus <i>i HTML5, ach tá a n-úsáid athraithe beagán. <b>Tá sé i gceist focail nó frásaí a aibhsiú gan tábhacht bhreise a chur in iúl agus <i>é don chuid is mó do ghuthú, téarmaí teicniúla, etc.

Seoltaí samplaí

Seo dhá shampla de conas is féidir an <address>chlib a úsáid:

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

Giorrúcháin shampla

Tá teorainn íochtair poncaithe éadrom agus cúrsóir cabhrach ar ainlíon ag giorrúcháin a bhfuil titletréith acu. Tugann sé seo le fios d’úsáideoirí go dtaispeánfar rud éigin ar ainlíon.

Cuir an initialismrang le giorrúchán chun comhchuibheas clóghrafach a mhéadú trí mhéid téacs beagán níos lú a thabhairt dó.

Is é HTML an rud is fearr ó arán slisnithe.

Giorrúchán den tréith focal is ea attr .

Blockquotes

Eilimint Úsáid Roghnach
<blockquote> Eilimint blocleibhéil chun ábhar a lua ó fhoinse eile

Cuir citetréith le haghaidh URL foinse

Úsáid .pull-leftagus .pull-rightranganna le haghaidh roghanna floated
<small> Gné roghnach chun lua atá dírithe ar an úsáideoir a chur leis, go hiondúil údar le teideal an tsaothair Cuir an <cite>timpeall teideal nó ainm na foinse

Chun blockquote a chur san áireamh, cuir <blockquote>thart ar aon HTML mar an luachan. Le haghaidh Sleachta díreach molaimid a <p>.

Cuir eilimint roghnach san áireamh <small>chun do fhoinse a lua agus gheobhaidh tú em dash &mdash;roimh é chun críocha stílithe.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tá slánuimhir posuere agus ante venenatis. </p>
  3. <small> Duine cáiliúil </small>
  4. </blockquote>

Sampla de bhloc-sleachta

Is mar seo a leanas a dhéantar na bloc-quota réamhshocraithe:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tá slánuimhir posuere agus ante venenatis.

Duine a bhfuil cáil air in Body of work

Chun do bhlocquote a shnámhadh ar dheis, cuir class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tá slánuimhir posuere agus ante venenatis.

Duine a bhfuil cáil air in Body of work

Liostaí

Neamhordúil

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Slánuimhir molestie lorem ag massa
  • Facilisis i pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttititor sem
    • Ac tristique libero volutpat ag
  • Faucibus porta lacus fringilla nó
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Gan stíl

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Slánuimhir molestie lorem ag massa
  • Facilisis i pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttititor sem
    • Ac tristique libero volutpat ag
  • Faucibus porta lacus fringilla nó
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

D'ordaigh

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Slánuimhir molestie lorem ag massa
  4. Facilisis i pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla nó
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Cur síos

<dl>

Liostaí cur síos
Tá liosta tuairisce foirfe chun téarmaí a shainiú.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida agus eget metus.
Porta Malesuada
Etiam porta sem malesuada magna mollis euismod.

Cur síos cothrománach

<dl class="dl-horizontal">

Liostaí cur síos
Tá liosta tuairisce foirfe chun téarmaí a shainiú.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida agus eget metus.
Porta 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.

Cinnirí suas! Teascóidh liostaí tuairisce cothrománacha téarmaí atá ró-fhada le feistiú sa cholún ar chlé text-overflow. I bpoirt amhairc níos cúinge, athróidh siad go dtí an leagan amach réamhshocraithe cruachta.

I líne

Wrap sleachta inlíne den chód le <code>.

  1. Mar shampla , ba cheart alt <code > </ code > a fhilleadh mar inlíne .

Bloc bunúsach

Úsáid <pre>le haghaidh línte iolracha de chód. Bí cinnte éalú ó aon lúibíní uillinne sa chód le haghaidh rindreála cuí.

<p>Téacs samplach anseo...</p>
  1. <réamh>
  2. <p>téacs samplach anseo...</p>
  3. </pre>

Nóta: Bí cinnte cód a choinneáil laistigh de <pre>chlibeanna chomh gar don taobh clé agus is féidir; déanfaidh sé gach tabs.

Is féidir leat an rang a chur leis go roghnach .pre-scrollablea shocróidh uasairde 350px agus a sholáthróidh scrollbharra y-ais.

Google Prettify

Glac an <pre>eilimint chéanna agus cuir dhá rang roghnacha le haghaidh rindreála feabhsaithe.

  1. <p> Téacs samplach anseo... </p>
  1. < pre class = " prettyprint
  2. línéadaigh" >
  3. <p>téacs samplach anseo...</p>
  4. </pre>

Íoslódáil google-code-prettify agus féach ar an readme le haghaidh conas é a úsáid.

Marcáil tábla

Chlib Cur síos
<table> Eilimint fillte chun sonraí a thaispeáint i bhformáid tábla
<thead> Eilimint coimeádán le haghaidh sraitheanna ceanntásca tábla ( <tr>) chun colúin tábla a lipéadú
<tbody> Eilimint coimeádán le haghaidh sraitheanna boird ( <tr>) i gcorp an tábla
<tr> Eilimint coimeádán le haghaidh sraith de chealla tábla ( <td><th>) atá le feiceáil ar ró amháin
<td> Cill tábla réamhshocraithe
<th> Cill tábla speisialta do lipéid cholúin (nó ró, ag brath ar raon feidhme agus socrúcháin)
Ní mór é a úsáid laistigh de a<thead>
<caption> Cur síos nó achoimre ar a bhfuil sa tábla, atá úsáideach go háirithe do léitheoirí scáileáin
  1. <tábla>
  2. <thead>
  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. </table>

Roghanna tábla

Ainm Aicme Cur síos
Réamhshocrú Dada Uimh stíleanna, ach colúin agus sraitheanna
Bunúsach .table Níl ach línte cothrománacha idir na sraitheanna
Teorann .table-bordered Babhtaí coirnéil agus cuireann sé teorainn sheachtrach leis
Riabhach-stiall .table-striped Cuireann sé dath cúlra liath éadrom le sraitheanna corr (1, 3, 5, srl)
Comhdhlúite .table-condensed Gearrtar stuáil ingearach ina dhá leath, ó 8px go 4px, laistigh de gach tdagus theilimintí

Táblaí samplacha

1. Stíleanna tábla réamhshocraithe

Stílítear táblaí go huathoibríoch agus gan ach roinnt teorainneacha acu chun inléiteacht a chinntiú agus struchtúr a chothabháil. Le 2.0, tá an .tablerang ag teastáil.

  1. < tábla rang = "tábla" >
  2. </table>
# Ainm Sloinne Ainm úsáideora
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @twitter

2. Tábla striped

Faigh beagán mhaisiúil le do tháblaí trí stiallacha séabra a chur leis - níl le déanamh ach an .table-stripedrang a chur leis.

Nóta: Úsáideann táblaí stiallacha an :nth-childroghnóir CSS agus níl sé ar fáil in IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# Ainm Sloinne Ainm úsáideora
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @twitter

3. Tábla teorann

Cuir teorainneacha timpeall an tábla ar fad agus coirnéil chothromú chun críocha aeistéitiúla.

  1. <table class = "table-bordered" >
  2. </table>
# Ainm Sloinne Ainm úsáideora
1 Marcáil Otto @mdo
Marcáil Otto @getbootstrap
2 Iacób Thornton @saille
3 Larry an t-éan @twitter

4. Tábla comhdhlúite

Déan do tháblaí níos dlúithe tríd an .table-condensedrang a chur leis an stuáil cille boird a ghearradh ina dhá leath (ó 8px go 4px).

  1. < tábla rang = "tábla comhdhlúite" >
  2. </table>
# Ainm Sloinne Ainm úsáideora
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @twitter

5. Comhcheangail iad go léir!

Ná bíodh drogall ort aon cheann de na ranganna boird a chur le chéile chun cuma éagsúla a bhaint amach trí úsáid a bhaint as aon cheann de na ranganna atá ar fáil.

  1. <table class = ""table-striped table-bordered table-comdensed" >
  2. ...
  3. </table>
Ainm iomlán
# Ainm Sloinne Ainm úsáideora
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @twitter

HTML agus CSS solúbtha

Is é an chuid is fearr maidir le foirmeacha i Bootstrap ná go bhfuil cuma iontach ar d’ionchuir agus ar na rialuithe go léir is cuma cén chaoi a gcuireann tú le do mharcáil iad. Níl aon HTML iomarcach ag teastáil, ach soláthraímid na patrúin dóibh siúd a dteastaíonn sé uathu.

Tagann leagan amach níos casta le ranganna gonta agus inscálaithe le haghaidh stílithe éasca agus ceangailteach imeachtaí, mar sin tá tú clúdaithe ag gach céim.

Ceithre leagan amach san áireamh

Tagann Bootstrap le tacaíocht do cheithre chineál leagan amach foirmeacha:

  • Ingearach (réamhshocraithe)
  • Cuardach
  • I líne
  • Cothrománach

Éilíonn cineálacha éagsúla leagan amach foirmeacha roinnt athruithe ar mharcáil, ach fanann na rialuithe féin agus iad féin a iompar mar an gcéanna.

Stáit rialaithe agus níos mó

Áirítear le foirmeacha Bootstrap stíleanna do na rialuithe bonnfhoirme go léir ar nós ionchur, textarea, agus roghnaigh a mbeifeá ag súil leis. Ach tagann sé freisin le roinnt comhpháirteanna saincheaptha ar nós ionchuir i gceangal agus prepended agus tacaíocht do liostaí de ticbhoscaí.

Áirítear le stáit cosúil le hearráid, rabhadh, agus rath le haghaidh gach cineál rialaithe foirme. Áirítear freisin stíleanna do rialuithe faoi mhíchumas.

Ceithre chineál foirmeacha

Soláthraíonn Bootstrap marcáil shimplí agus stíleanna do cheithre stíleanna foirmeacha gréasáin coitianta.

Ainm Aicme Cur síos
Ingearach (réamhshocraithe) .form-vertical (ní gá) Lipéid cruachta, ailínithe ar chlé thar rialuithe
I líne .form-inline Lipéad ar chlé-ailíniú agus rialtáin bloc inlíne le haghaidh stíl dhlúth
Cuardach .form-search Ionchur téacs seach-chothromaithe le haghaidh aeistéitiúil cuardaigh tipiciúil
Cothrománach .form-horizontal Snámh ar chlé, lipéid dheis-ailínithe ar an líne chéanna leis na rialuithe

Foirmeacha samplacha ag baint úsáide as rialuithe foirme amháin, gan aon mharcáil bhreise

Foirm bhunúsach

Mainneachtainí cliste agus éadroma gan marcáil bhreise.

Sampla de théacs cabhrach blocleibhéil anseo.

  1. <form rang = "go maith" >
  2. <label> Ainm an lipéid </label>
  3. <input type = "text" class = "span3" placeholder = "Clóscríobh rud éigin…" >
  4. <span class = "help-block" > Sampla de théacs cabhrach blocleibhéil anseo. </span>
  5. <label class = "ticbhosca" >
  6. <input type = "ticbox" > Seiceáil mé amach
  7. </label>
  8. <button type = "submit" class = "btn" > Cuir isteach </button>
  9. </form>

Foirm chuardaigh

Cuir .form-searchleis an bhfoirm agus .search-queryleis an input.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "cheist chuardaigh-mheán-ionchuir" >
  3. <button type = "submit" class = "btn" > Cuardaigh </button>
  4. </form>

Foirm inlíne

Cuir .form-inlineleis an ailíniú ingearach agus spásáil na rialuithe foirme le míne.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "R-phost" >
  3. <input type = "password" class = "input-small" placeholder = "Pasfhocal" >
  4. <label class = "ticbhosca" >
  5. <input type = "ticbhosca" > Cuimhnigh orm
  6. </label>
  7. <button type = "submit" class = "btn" > Sínigh isteach </button>
  8. </form>

Foirmeacha cothrománacha

Taispeántar ar dheis na rialuithe foirmeacha réamhshocraithe a dtacaímid leo. Seo é an liosta le hurchair:

  • ionchuir téacs (téacs, pasfhocal, ríomhphost, srl)
  • ticbhosca
  • raidió
  • roghnaigh
  • roghnú iolrach
  • ionchur comhaid
  • téacsarea

Chomh maith le téacs saorfhoirme, tá an chuma ar aon ionchur HTML5 téacs-bhunaithe mar sin.

Marcáil shampla

I bhfianaise leagan amach na foirme samplach thuas, seo é an marcáil a bhaineann leis an gcéad ghrúpa ionchuir agus rialaithe. Tá an .control-group, .control-label, agus .controlsna ranganna ag teastáil le haghaidh stílithe.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Litir téacs </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Ionchur téacs </label>
  6. <div class = "rialuithe" >
  7. <input type = "text" class = "input-xlarge" id = "ionchur01" >
  8. <p class = "help-block" > Téacs cabhrach tacaíochta </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Foirm stáit rialaithe

Tá stíleanna ag Bootstrap le haghaidh fócasaithe agus disabledstáit atá tacaithe ag brabhsálaí. Bainimid an Webkit réamhshocraithe outlineagus cuirimid box-shadowi bhfeidhm ina áit le haghaidh :focus.


Fíorú foirme

Áiríonn sé freisin stíleanna bailíochtaithe le haghaidh earráidí, rabhaidh agus rath. Chun é a úsáid, cuir an rang earráide leis an .control-group.

  1. < tacar páirce
  2. class = "earráid ghrúpa rialaithe" >
  3. </fieldset>
Roinnt luach anseo
Seans go ndeachaigh rud éigin mícheart
Ceartaigh an earráid le do thoil
Woohoo!
Woohoo!

Rialuithe foirmeacha a leathnú

Prepend & cuir ionchuir leis

Soláthraíonn grúpaí ionchuir - le téacs i gceangal nó prepended - bealach éasca chun tuilleadh comhthéacs a thabhairt do d'ionchuir. I measc na samplaí iontacha tá an comhartha @ le haghaidh ainmneacha úsáideoirí Twitter nó $ le haghaidh airgeadas.


Seiceálacha agus raidiónna

Go dtí v1.4, bhí marcáil bhreise ag teastáil ó Bootstrap timpeall ar bhoscaí seiceála agus raidiónna chun iad a chruachadh. Anois, tá sé ina ábhar simplí athrá ar an <label class="checkbox">rud a wraps an <input type="checkbox">.

Tacaítear freisin le ticbhoscaí agus raidiónna inlíne. Just a chur .inlinele haon .checkbox.radioagus tá tú ag déanamh.


Foirmeacha inlíne agus aguisín/prepend

Chun prepend nó ionchuir i gceangal i bhfoirm inlíne a úsáid, a bheith cinnte a chur ar an .add-onagus inputar an líne chéanna, gan spásanna.


Téacs cabhrach foirm

Chun téacs cabhrach a chur le d’ionchur foirme, cuir téacs cabhrach inlíne leis <span class="help-inline">nó bloc téacs cabhrach leis <p class="help-block">i ndiaidh na heiliminte ionchuir.

Bain úsáid as na .span*haicmí céanna ón gcóras greille le haghaidh méideanna ionchuir.

Is féidir leat ranganna statacha a úsáid freisin nach mapálann don ghreille, a chuireann in oiriúint do stíleanna freagrúla CSS, nó nach dtugann cuntas ar chineálacha éagsúla rialuithe (m.sh., inputvs. select).

@

Seo roinnt téacs cabhrach

.00
Seo tuilleadh téacs cabhrach
$ .00

Nóta: Tá lipéid timpeall ar na roghanna go léir le haghaidh limistéir cliceáil i bhfad níos mó agus foirm níos inúsáidte.

Cnaipe class="" Cur síos
btn Cnaipe caighdeánach liath le grádán
btn btn-primary Soláthraíonn sé meáchan breise amhairc agus sainaithníonn sé an gníomh príomhúil i sraith cnaipí
btn btn-info Úsáidtear é mar mhalairt ar na stíleanna réamhshocraithe
btn btn-success Léiríonn gníomh rathúil nó dearfach
btn btn-warning Léiríonn sé gur cheart a bheith cúramach leis an ngníomh seo
btn btn-danger Léiríonn gníomh contúirteach nó a d’fhéadfadh a bheith diúltach
btn btn-inverse Cnaipe liath dorcha malartach, gan a bheith ceangailte le gníomh nó úsáid shéimeantach

Cnaipí le haghaidh gníomhartha

Mar ghnás, níor cheart cnaipí a úsáid ach amháin le haghaidh gníomhartha agus hipearnaisc le húsáid le haghaidh rudaí. Mar shampla, ba chóir go mbeadh "Íoslódáil" ina chnaipe agus ba cheart go mbeadh "gníomhaíocht le déanaí" ina nasc.

Is féidir stíleanna cnaipí a chur i bhfeidhm ar aon rud leis an .btnrang a chuirtear i bhfeidhm. Mar sin féin, de ghnáth beidh tú ag iarraidh iad seo a chur i bhfeidhm ar <a>eilimintí <button>amháin.

Comhoiriúnacht tras-bhrabhsálaí

Ní ghearrann IE9 grádáin chúlra ar choirnéil chruinne, mar sin bainimid amach é. Gaolmhar, cuireann IE9 buttongnéithe míchumais i bhfeidhm, rud a fhágann go bhfuil an téacs liath le scáth téacs olc nach féidir linn a shocrú.

Méideanna iolracha

An bhfuil fonn ort cnaipí níos mó nó níos lú? Cuir .btn-large, .btn-small, nó .btn-miniar feadh dhá mhéid breise.


Stát faoi mhíchumas

I gcás cnaipí díchumasaithe, cuir an .disabledrang le naisc agus an disabledaitreabúid le haghaidh <button>eilimintí.

Nasc príomhúil Nasc

Cinnirí suas! Úsáidimid .disabledmar rang fóntais anseo, cosúil leis an .activerang coitianta, mar sin níl aon réimír ag teastáil.

Rang a haon, clibeanna iolracha

Úsáid an .btnrang ar eilimint <a>, <button>, nó .<input>

Nasc
  1. <a class="btn" href=""> Nasc </a> _ _ _ _ _
  2. <button class = "btn" type = "submit" >
  3. Cnaipe
  4. </cnaipe>
  5. <input class = "btn" type = "cnaipe"
  6. luach = "Ionchur" > >
  7. <input class = "btn" type = "submit"
  8. luach = "Cuir isteach" >

Mar dhea-chleachtas, déan iarracht an eilimint a mheaitseáil duit féin chun rindreáil trasbhrabhsálaí a chinntiú. Má tá input, úsáid le <input type="submit">haghaidh do chnaipe.

  • íocón-gloine
  • icon-ceol
  • icon-cuardach
  • icon-clúdach
  • deilbhín-chroí
  • icon-réalta
  • icon-réalta-folamh
  • deilbhín-úsáideoir
  • icon-scannán
  • icon-ú-mór
  • íocón-ú
  • deilbhín-ú-liosta
  • íocón-ceart go leor
  • icon-bain
  • icon-zoom-in
  • icon-zoom-out
  • íocón
  • deilbhín-comhartha
  • íocón-cog
  • deilbhín-bruscar
  • icon-bhaile
  • icon-comhad
  • icon-time
  • deilbhín-bhóthar
  • icon-íoslódáil-alt
  • icon-íoslódáil
  • deilbhín-uaslódáil
  • deilbhín-bosca isteach
  • icon-imirt-chiorcal
  • deilbhín-athuair
  • icon-refresh
  • icon-list-alt
  • icon-glas
  • deilbhín-bratach
  • icon-cluasáin
  • icon-volume-off
  • icon-imleabhar-síos
  • icon-imleabhar-suas
  • deilbhín-qrcode
  • icon-barcode
  • deilbhín-chlib
  • icon-clibeanna
  • deilbhín-leabhar
  • deilbhín-leabharmharc
  • icon-print
  • deilbhín-ceamara
  • icon-font
  • deilbhín-trom
  • íocón-iodálach
  • icon-text-airde
  • deilbhín-téacs-leithead
  • icon-ailíniú-clé
  • icon-ailíniú-lár
  • deilbhín-ailíniú-ar dheis
  • icon-align-justify
  • deilbhín-liosta
  • icon-fleasc-chlé
  • deilbhín-fleasc-ar dheis
  • icon-facetime-físeán
  • deilbhín-pictiúr
  • íocón-pheann luaidhe
  • icon-mapa-marcóir
  • icon-choigeartú
  • deilbhín-tint
  • icon-eagar
  • icon-share
  • icon-seiceáil
  • icon-bogadh
  • icon-céim ar gcúl
  • icon-tapa-ar gcúl
  • íocón ar gcúl
  • íocón-imirt
  • íocón-sos
  • íocón-stad
  • icon-ar aghaidh
  • icon-tapa-ar aghaidh
  • icon-céim ar aghaidh
  • icon-eject
  • icon-chevron-chlé
  • icon-chevron-ar dheis
  • icon-plus-comhartha
  • deilbhín-lúide-comhartha
  • icon-bain-comhartha
  • deilbhín-ok-comhartha
  • deilbhín-ceist-comhartha
  • icon-info-sign
  • icon-scáileán
  • icon-bain-ciorcal
  • icon-ok-ciorcal
  • icon-ban-ciorcal
  • icon-arrow-clé
  • icon-arrow-deas
  • icon-arrow-up
  • icon-arrow-síos
  • icon-share-alt
  • icon-athraigh méid-iomlán
  • icon-athraigh méid-beag
  • íocón-móide
  • deilbhín-lúide
  • icon-réiltín
  • deilbhín-exclamation-sign
  • íocón-bronntanas
  • íocón-duilleog
  • íocón-tine
  • icon-eye-open
  • íocón-eye-gar
  • deilbhín-rabhaidh-comhartha
  • íocón-eitleán
  • icon-féilire
  • icon-randamach
  • íocón-trácht
  • deilbhín-mhaighnéad
  • icon-chevron-suas
  • icon-chevron-síos
  • deilbhín-retweet
  • íocón-siopadóireacht-cart
  • deilbhín-fillteán-gar
  • icon-fillteán-oscailte
  • icon-athraigh méid-ingearach
  • icon-athraigh méid-cothrománach
  • deilbhín-hdd
  • deilbhín-bullhorn
  • íocón-cloig
  • deilbhín-teastas
  • icon-ordóga-suas
  • icon-ordóga-síos
  • deilbhín-lámh-dheis
  • deilbhín-lámh-chlé
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-deas
  • icon-ciorcal-saighead-chlé
  • icon-ciorcal-arrow-up
  • icon-ciorcal-arrow-síos
  • icon-globe
  • icon-stíl
  • icon-tascanna
  • icon-scagaire
  • icon-gearrtha
  • icon-lánscáileán

Tógtha mar sprite

In ionad iarratas breise a dhéanamh ar gach íocón, tá sprite curtha le chéile againn - sraith íomhánna i gcomhad amháin a úsáideann CSS chun na híomhánna a shuíomh le background-position. Is é seo an modh céanna a úsáidimid ar Twitter.com agus d'oibrigh sé go maith dúinn.

Déantar na ranganna deilbhíní go léir a réamhshocrú le spásáil .icon-ainmneacha agus scóip chuí, cosúil lenár gcomhpháirteanna eile. Cabhróidh sé seo le coinbhleachtaí le huirlisí eile a sheachaint.

Thug Glyphicons deis dúinn úsáid a bhaint as an tacar Halflings inár bhfoireann uirlisí foinse oscailte chomh fada agus a chuirimid nasc agus creidiúint ar fáil anseo sna doiciméid. Déan machnamh le do thoil ar an rud céanna a dhéanamh i do thionscadail.

Conas a úsáid

Úsáideann Bootstrap <i>clib do na deilbhíní go léir, ach níl aon chás-aicme acu - gan ach réimír roinnte. Chun é a úsáid, cuir an cód seo a leanas beagnach áit ar bith:

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

Tá stíleanna ar fáil freisin le haghaidh deilbhíní inbhéartaithe (bán), atá réidh le haicme amháin breise:

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

Tá 140 rang le roghnú as do dheilbhíní. Cuir <i>clib leis na ranganna cearta leis agus tá tú socraithe. Is féidir leat teacht ar an liosta iomlán i sprites.less nó ar dheis anseo sa doiciméad seo.

Cinnirí suas! Nuair a bheidh tú ag úsáid teaghráin in aice le téacs, mar atá i gcnaipí nó naisc nascleanúna, bí cinnte go bhfágfá spás i ndiaidh na <i>clibe le spásáil cheart a dhéanamh.

Cásanna úsáide

Tá deilbhíní iontach, ach cá n-úsáidfeadh duine iad? Seo cúpla smaoineamh:

  • Mar amhairc do do nascleanúint barra taoibh
  • Le haghaidh nascleanúint amháin atá faoi thiomáint ag íocón
  • Chun cnaipí a chabhróidh le brí gníomha a chur in iúl
  • Le naisc chun comhthéacs a roinnt ar cheann scríbe úsáideora

Go bunúsach, áit ar bith is féidir leat <i>clib a chur, is féidir leat deilbhín a chur.

Samplaí

Úsáid iad i gcnaipí, i ngrúpaí cnaipí le haghaidh barra uirlisí, nascleanúint, nó ionchuir fhoirm réamhullmhaithe.