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 coirp 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 ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor dolor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

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 téacs roghnach san áireamh `title`le haghaidh téacs leathnaithe
`<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

Stílítear na giorrúcháin le téacs cás uachtair agus bun-imlíne poncaithe éadrom. Tá cúrsóir cabhrach acu ar ainlíon freisin ionas go mbeidh tásc breise ag úsáideoirí go dtaispeánfar rud éigin ar ainlíon.

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 `cite`tréith le haghaidh URL foinse Úsáid `.pull-left`agus `.pull-right`ranganna le haghaidh roghanna floated
`<small>`	Gné roghnach chun lua atá os comhair an úsáideora 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, tim <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 —roimh é chun críocha stílithe.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tá an slánuimhir roimh ré.</p>
  <small>Duine cáiliúil</small>
</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 bhlocchuóta a snámháil 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>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Slánuimhir molestie lorem ag massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla nó
Aenean sit amet erat nunc
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.

I líne

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

Mar shampla, ba cheart <code>rannóg</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>

<réamh>
  <p>téacs samplach anseo...</p>
</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.

<p>Téacs samplach anseo...</p>

<pre class="prettyprint
     línéadaigh">
  <p>téacs samplach anseo...</p>
</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>`nó `<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

<tábla>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
</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
Séabra-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 `td`agus `th`eilimintí

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.

<table class="table">
  …
</table>

#	Ainm	Sloinne	Teanga
1	Marcáil	Otto	CSS
2	Iacób	Thornton	Javascript
3	Stu	Fiacl	HTML

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.

<table class="table table-striped">
  …
</table>

#	Ainm	Sloinne	Teanga
1	Marcáil	Otto	CSS
2	Iacób	Thornton	Javascript
3	Stu	Fiacl	HTML

3. Tábla teorann

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

<table class="table-bordered">
  …
</table>

#	Ainm	Sloinne	Teanga
1	Marcas Otto		CSS
2	Iacób	Thornton	Javascript
3	Stu	Fiacl	Javascript
3	Brosef	Stalin	HTML

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

<table class="tábla comhdhlúite">
  …
</table>

#	Ainm	Sloinne	Teanga
1	Marcáil	Otto	CSS
2	Iacób	Thornton	Javascript
3	Stu	Fiacl	HTML

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.

<table class="table-striped table-bordered table-condensed">
  ...
</table>

#	Ainm	Sloinne	Teanga
1	Marcáil	Otto	CSS
2	Iacób	Thornton	Javascript
3	Stu	Fiacl	HTML
4	Brosef	Stalin	HTML

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

Le v2.0, tá mainneachtainí níos éadroime agus níos cliste againn maidir le stíleanna foirmeacha. Gan marcáil bhreise, ní gá ach rialuithe a fhoirmiú.

<form rang="well">
  <label>Ainm lipéid</label>
  <input type="text" class="span3" placeholder="Clóscríobh rud éigin…">
  <span class="help-inline">Téacs cabhrach gaolmhar!</span>
  <label class="ticbox">
    <input type="checkbox"> Seiceáil mé amach
  </label>
  <button type="submit" class="btn">Cuir isteach</button>
</form>

Foirm chuardaigh

Ag léiriú stíleanna réamhshocraithe WebKit, níl le déanamh ach cuir .form-searchle haghaidh réimsí cuardaigh níos cruinne.

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

Foirm inlíne

Tá ionchuir bloc-leibhéal le tosú. Le haghaidh .form-inlineagus .form-horizontal, úsáidimid bloc inlíne.

<form class="well form-inline">
  <input type="text" class="input-small" placeholder="Ríomhphost">
  <input type="password" class="input-small" placeholder="Pasfhocal">
  <button type="submit" class="btn">Téigh</button>
</form>

Foirmeacha cothrománacha

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.

<form class="form-horizontal">
  <fieldset>
    <legend>Téacs finscéal</legend>
    <div class="control-group">
      <label class="control-label" for="input01">Ionchur téacs</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">Tacaíocht le téacs cabhrach</p>
      </div>
    </div>
  </fieldset>
</form>

Cad atá san áireamh

Taispeántar ar thaobh na láimhe clé na rialuithe réamhshocraithe foirmeacha 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

Réamhshocruithe nua le v2.0

Go dtí v1.4, bhain stíleanna foirmeacha réamhshocraithe Bootstrap úsáid as an leagan amach cothrománach. Le Bootstrap 2, bhaineamar an srian sin chun mainneachtainí níos cliste agus níos inscálaithe a bheith againn d’aon fhoirm.

Staideanna brabhsálaí athdheartha

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

< tacar páirce
  class="earráid ghrúpa rialaithe">
  …
</fieldset>

Rialuithe foirmeacha a leathnú

Foirm méideanna greille

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

Méideanna malartacha

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

Téacs réamhshuite

Seo roinnt téacs cabhrach

Téacs ceangailte

.00

Seo tuilleadh téacs cabhrach

ticbhoscaí inlíne

1 2 3

Boscaí seiceála

Rogha a haon é seo agus sin - bí cinnte an fáth a bhfuil sé iontach a chur san áireamh Is féidir rogha a dó a sheiceáil freisin agus a áireamh i dtorthaí na bhfoirmeacha Is féidir rogha a trí—tá, rinne tú buille faoi thuairim é—a sheiceáil freisin agus a áireamh i dtorthaí na bhfoirmeacha

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.

Cnaipí raidió

Rogha a haon é seo agus sin - bí cinnte an fáth a bhfuil sé iontach a chur san áireamh Rud eile is ea rogha a dó agus má roghnaítear é díroghnófar rogha a haon

Prepend & ionchuir i gceangal

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

Cnaipe	Aicme	Cur síos
	`.btn`	Cnaipe caighdeánach liath le grádán
	`.btn-primary`	Soláthraíonn sé meáchan amhairc breise agus sainaithníonn sé an gníomh príomhúil i sraith cnaipí
	`.btn-info`	Úsáidtear é mar mhalairt ar na stíleanna réamhshocraithe
	`.btn-success`	Léiríonn gníomh rathúil nó dearfach
	`.btn-warning`	Léiríonn sé gur cheart a bheith cúramach leis an ngníomh seo
	`.btn-danger`	Léiríonn gníomh contúirteach nó a d’fhéadfadh a bheith diúltach
	`.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 bunscoile 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>

<a class="btn" href="">Nasc</a>
<button class="btn" type="submit">
  Cnaipe
</cnaipe>
<input class="btn" type="cnaipe"
         luach="Ionchur">
<input class="btn" type="submit"
         luach="Submit">

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

Cinnirí suas! Déantar macalla de ranganna deilbhíní trí CSS :after. Sna doiciméid, taispeántar dath cúlra dearg éadrom ar ainlíon chun aird a tharraingt ar mhéid an deilbhí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

Le v2.0.1, roghnaigh muid <i>clib a úsáid le haghaidh ár ndeilbhí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:

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

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

Tá 120 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.

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
Le haghaidh cnaipí a chuideoidh le brí gníomhaíochta 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.

Athnuaigh Seiceáil amach Scrios

Trácht Socruithe Tuilleadh eolais

Clóghrafaíocht Ceannteidil, míreanna, liostaí, agus gnéithe eile de chineál inlíne....