CSS sylfaenol

Ar ben y sgaffaldiau, mae elfennau HTML sylfaenol yn cael eu steilio a'u gwella gyda dosbarthiadau estynadwy i ddarparu golwg a theimlad ffres, cyson.

Penawdau a chopi corff

Graddfa deipograffig

Mae'r grid teipograffeg cyfan yn seiliedig ar ddau newidyn Llai yn ein ffeil newidynnau.less: @baseFontSizea @baseLineHeight. Y cyntaf yw maint y ffont sylfaen a ddefnyddir drwyddo draw a'r ail yw uchder y llinell sylfaen.

Rydyn ni'n defnyddio'r newidynnau hynny, a rhywfaint o fathemateg, i greu'r ymylon, padinau, ac uchder llinell o'n holl fath a mwy.

Testun corff enghreifftiol

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

Copi corff arweiniol

Gwnewch i baragraff sefyll allan trwy ychwanegu .lead.

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

h1. Pennawd 1

h2. Pennawd 2

h3. Pennawd 3

h4. Pennawd 4

h5. Pennawd 5
h6. Pennawd 6

Pwyslais, cyfeiriad, a byrfodd

Elfen Defnydd Dewisol
<strong> Am bwysleisio pyt o destun gyda phwysig Dim
<em> Am bwysleisio pyt o destun gyda straen Dim
<abbr> Yn lapio byrfoddau ac acronymau i ddangos y fersiwn estynedig ar hofran

Cynnwys priodoledd dewisol titlear gyfer testun estynedig

Defnyddio .initialismdosbarth ar gyfer talfyriadau priflythrennau.
<address> Am wybodaeth gyswllt ar gyfer ei hynafiad agosaf neu'r corff cyfan o waith Cadw fformatio trwy orffen pob llinell gyda<br>

Gan ddefnyddio pwyslais

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.

Nodyn: Mae croeso i chi ddefnyddio <b>ac <i>yn HTML5, ond mae eu defnydd wedi newid ychydig. <b>i fod i amlygu geiriau neu ymadroddion heb gyfleu pwysigrwydd ychwanegol tra ei fod <i>yn bennaf ar gyfer llais, termau technegol, ac ati.

Cyfeiriadau enghreifftiol

Dyma ddwy enghraifft o sut y <address>gellir defnyddio'r tag:

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

Byrfoddau enghreifftiol

Mae gan dalfyriadau â titlephriodoledd ymyl gwaelod doredig golau a chyrchwr cymorth ar hofran. Mae hyn yn rhoi arwydd ychwanegol i ddefnyddwyr y bydd rhywbeth yn cael ei ddangos ar hofran.

Ychwanegwch y initialismdosbarth at dalfyriad i gynyddu harmoni teipograffeg trwy roi maint testun ychydig yn llai iddo.

HTML yw'r peth gorau ers bara wedi'i sleisio.

Talfyriad o'r gair priodoledd yw attr .

Blockquotes

Elfen Defnydd Dewisol
<blockquote> Elfen lefel bloc ar gyfer dyfynnu cynnwys o ffynhonnell arall

Ychwanegu citepriodoledd ar gyfer URL ffynhonnell

Defnydd .pull-lefta .pull-rightdosbarthiadau ar gyfer opsiynau arnofio
<small> Elfen ddewisol ar gyfer ychwanegu dyfyniad sy'n wynebu'r defnyddiwr, fel arfer awdur gyda theitl y gwaith Rhowch y <cite>o gwmpas y teitl neu enw'r ffynhonnell

I gynnwys blockquote, amlapiwch <blockquote>unrhyw HTML fel y dyfyniad. Ar gyfer dyfynbrisiau syth rydym yn argymell a <p>.

Cynhwyswch elfen ddewisol <small>i ddyfynnu'ch ffynhonnell a byddwch yn cael 'em dash' &mdash;o'i blaen at ddibenion steilio.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat a ante venenatis. </p>
  3. <small> Rhywun enwog </small>
  4. </blockquote>

Dyfyniadau bloc enghreifftiol

Mae dyfynbrisiau bloc diofyn wedi'u steilio fel a ganlyn:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat a ante venenatis.

Rhywun enwog yn Corff o waith

I arnofio eich blockquote i'r dde, ychwanegwch class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat a ante venenatis.

Rhywun enwog yn Corff o waith

Rhestrau

Heb drefn

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Cyfanrif molestie lorem yn massa
  • Facilitis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttititor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unstyled

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Cyfanrif molestie lorem yn massa
  • Facilitis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttititor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Archebwyd

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Cyfanrif molestie lorem yn massa
  4. Facilitis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Disgrifiad

<dl>

Rhestri disgrifiadau
Mae rhestr ddisgrifiad yn berffaith ar gyfer diffinio termau.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus.
Porthladd Malesuada
Etiam porta sem malesuada magna mollis euismod.

Disgrifiad llorweddol

<dl class="dl-horizontal">

Rhestri disgrifiadau
Mae rhestr ddisgrifiad yn berffaith ar gyfer diffinio termau.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus.
Porthladd 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.

Pennau i fyny! Bydd rhestrau disgrifiadau llorweddol yn cwtogi termau sy'n rhy hir i ffitio yn y gosodiad colofn chwith text-overflow. Mewn mannau gwylio culach, byddant yn newid i'r cynllun pentyrru diofyn.

Mewn llinell

Lapiwch bytiau mewnol o god gyda <code>.

  1. Er enghraifft , dylai adran < code> </ code > gael ei lapio mewn llinell .

Bloc sylfaenol

Defnyddiwch <pre>ar gyfer llinellau cod lluosog. Gwnewch yn siŵr eich bod yn dianc rhag unrhyw fracedi ongl yn y cod ar gyfer rendro priodol.

<p>Testun enghreifftiol yma...</p>
  1. <pre>
  2. <p>Testun enghreifftiol yma...</p>
  3. </pre>

Nodyn: Gwnewch yn siŵr eich bod chi'n cadw'r cod o fewn <pre>tagiau mor agos i'r chwith â phosib; bydd yn rendro pob tab.

Gallwch ychwanegu'r .pre-scrollabledosbarth yn ddewisol a fydd yn gosod uchder mwyaf o 350px ac yn darparu bar sgrolio echel-y.

Google Prettify

Cymerwch yr un <pre>elfen ac ychwanegwch ddau ddosbarth dewisol ar gyfer rendro uwch.

  1. <p> Testun enghreifftiol yma... </p>
  1. < pre class = " prettyprint
  2. llieiniau" >
  3. <p>Testun enghreifftiol yma...</p>
  4. </pre>

Dadlwythwch google-code-prettify a gweld y readme ar gyfer sut i ddefnyddio.

Marcio tabl

Tag Disgrifiad
<table> Elfen lapio ar gyfer arddangos data mewn fformat tabl
<thead> Elfen cynhwysydd ar gyfer rhesi pennyn tabl ( <tr>) i labelu colofnau tabl
<tbody> Elfen gynhwysydd ar gyfer rhesi bwrdd ( <tr>) yng nghorff y bwrdd
<tr> Elfen cynhwysydd ar gyfer set o gelloedd bwrdd ( <td>neu <th>) sy'n ymddangos ar un rhes
<td> Cell tabl rhagosodedig
<th> Cell bwrdd arbennig ar gyfer labeli colofn (neu res, yn dibynnu ar gwmpas a lleoliad)
Rhaid ei defnyddio o fewn a<thead>
<caption> Disgrifiad neu grynodeb o'r hyn sydd yn y tabl, sy'n arbennig o ddefnyddiol i ddarllenwyr sgrin
  1. <bwrdd>
  2. <pen>
  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>

Opsiynau tabl

Enw Dosbarth Disgrifiad
Diofyn Dim Dim arddulliau, dim ond colofnau a rhesi
Syml .table Dim ond llinellau llorweddol rhwng rhesi
Ffiniog .table-bordered Yn talgrynnu corneli ac yn ychwanegu ffin allanol
Sebra-streipen .table-striped Yn ychwanegu lliw cefndir llwyd golau at resi od (1, 3, 5, ac ati)
Cyddwyso .table-condensed Yn torri padin fertigol yn ei hanner, o 8px i 4px, o fewn tdpob thelfen

Tablau enghreifftiol

1. Arddulliau tabl rhagosodedig

Mae tablau'n cael eu steilio'n awtomatig gyda dim ond ychydig o ffiniau i sicrhau darllenadwyedd a chynnal strwythur. Gyda 2.0, .tablemae angen y dosbarth.

  1. < table class = " bwrdd " >
  2. </table>
# Enw cyntaf Enw olaf Enw defnyddiwr
1 Marc Otto @mdo
2 Jacob Thornton @braster
3 Larry yr Aderyn @twitter

2. Bwrdd streipiog

Mynnwch ychydig o ffansi gyda'ch byrddau trwy ychwanegu stribedi sebra - ychwanegwch y .table-stripeddosbarth.

Nodyn: Mae tablau streipiog yn defnyddio'r :nth-childdewisydd CSS ac nid yw ar gael yn IE7-IE8.

  1. <table class = "table-striped" >
  2. </table>
# Enw cyntaf Enw olaf Enw defnyddiwr
1 Marc Otto @mdo
2 Jacob Thornton @braster
3 Larry yr Aderyn @twitter

3. Bwrdd ymylol

Ychwanegu borderi o amgylch y bwrdd cyfan a chorneli crwn at ddibenion esthetig.

  1. <table class = "table-bordered" >
  2. </table>
# Enw cyntaf Enw olaf Enw defnyddiwr
1 Marc Otto @mdo
Marc Otto @getbootstrap
2 Jacob Thornton @braster
3 Larry yr Aderyn @twitter

4. Bwrdd cyddwyso

Gwnewch eich byrddau'n fwy cryno trwy ychwanegu'r .table-condenseddosbarth i dorri padin cell bwrdd yn ei hanner (o 8px i 4px).

  1. <table class = "table-condensed" >
  2. </table>
# Enw cyntaf Enw olaf Enw defnyddiwr
1 Marc Otto @mdo
2 Jacob Thornton @braster
3 Larry yr Aderyn @twitter

5. Cyfunwch nhw i gyd!

Mae croeso i chi gyfuno unrhyw un o'r dosbarthiadau bwrdd i gael golwg wahanol trwy ddefnyddio unrhyw un o'r dosbarthiadau sydd ar gael.

  1. <table class = "table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Enw llawn
# Enw cyntaf Enw olaf Enw defnyddiwr
1 Marc Otto @mdo
2 Jacob Thornton @braster
3 Larry yr Aderyn @twitter

HTML a CSS hyblyg

Y rhan orau am ffurflenni yn Bootstrap yw bod eich holl fewnbynnau a rheolyddion yn edrych yn wych ni waeth sut rydych chi'n eu hadeiladu yn eich marcio. Nid oes angen HTML diangen, ond rydym yn darparu'r patrymau ar gyfer y rhai sydd ei angen.

Daw cynlluniau mwy cymhleth gyda dosbarthiadau cryno a graddadwy ar gyfer steilio hawdd a rhwymo digwyddiadau, felly rydych chi'n cael eich gorchuddio ar bob cam.

Pedwar cynllun wedi'u cynnwys

Daw Bootstrap gyda chefnogaeth ar gyfer pedwar math o gynlluniau ffurflen:

  • Fertigol (diofyn)
  • Chwiliwch
  • Mewn llinell
  • Llorweddol

Mae gwahanol fathau o gynlluniau ffurflenni yn gofyn am rai newidiadau i'r marcio, ond mae'r rheolaethau eu hunain yn aros ac yn ymddwyn yr un fath.

Cyflyrau rheoli a mwy

Mae ffurflenni Bootstrap yn cynnwys arddulliau ar gyfer yr holl reolaethau ffurf sylfaenol fel mewnbwn, ardal testun, a dewis y byddech chi'n ei ddisgwyl. Ond mae hefyd yn dod â nifer o gydrannau arfer fel mewnbynnau wedi'u hatodi ac wedi'u rhagpendodi a chefnogaeth ar gyfer rhestrau o flychau ticio.

Mae gwladwriaethau fel gwall, rhybudd a llwyddiant wedi'u cynnwys ar gyfer pob math o reolaeth ffurflen. Cynhwysir hefyd arddulliau ar gyfer rheolyddion anabl.

Pedwar math o ffurf

Mae Bootstrap yn darparu marcio ac arddulliau syml ar gyfer pedair arddull o ffurfiau gwe cyffredin.

Enw Dosbarth Disgrifiad
Fertigol (diofyn) .form-vertical (ddim ei angen) Labeli wedi'u pentyrru, wedi'u halinio i'r chwith dros reolaethau
Mewn llinell .form-inline Label wedi'i alinio i'r chwith a rheolyddion bloc mewnol ar gyfer arddull gryno
Chwiliwch .form-search Mewnbwn testun allgrwn ar gyfer esthetig chwilio nodweddiadol
Llorweddol .form-horizontal Arnofio i'r chwith, labeli wedi'u halinio i'r dde ar yr un llinell â rheolyddion

Ffurflenni enghreifftiol gan ddefnyddio rheolyddion ffurflen yn unig, dim marcio ychwanegol

Ffurf sylfaenol

Rhagosodiadau craff ac ysgafn heb farcio ychwanegol.

Enghraifft o destun cymorth lefel bloc yma.

  1. <form class = "wel" >
  2. <label> Enw label </label>
  3. <input type = "text" class = "span3" placeholder = " Teipiwch rywbeth…" >
  4. <span class = "help-block" > Testun cymorth lefel bloc enghreifftiol yma. </span>
  5. <label class = "blwch ticio" >
  6. <input type = "ticbox" > Gwiriwch fi allan
  7. </label>
  8. <button type = "submit" class = "btn" > Cyflwyno </button>
  9. </form>

Ffurflen chwilio

Ychwanegu .form-searchat y ffurflen ac .search-queryat y input.

  1. <form class = "wel form-search" >
  2. <input type = "text" class = "ymholiad-cyfrwng mewnbwn" >
  3. <button type = "submit" class = "btn" > Chwilio </button>
  4. </form>

Ffurf inline

Ychwanegu .form-inlineat aliniad fertigol a bylchiad y rheolyddion ffurf at fân.

  1. <form class = "wel form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "E-bost" >
  3. <input type = "cyfrinair" class = "input-small" placeholder = "Cyfrinair" >
  4. <label class = "blwch ticio" >
  5. <input type = " checkbox " > Cofiwch fi
  6. </label>
  7. <button type = "submit" class = "btn" > Mewngofnodi </button>
  8. </form>

Ffurfiau llorweddol

Ar y dde mae'r holl reolaethau ffurflen rhagosodedig rydyn ni'n eu cefnogi. Dyma'r rhestr fwledi:

  • mewnbynnau testun (testun, cyfrinair, e-bost, ac ati)
  • blwch ticio
  • radio
  • dewis
  • dewis lluosog
  • mewnbwn ffeil
  • ardal testun

Yn ogystal â thestun rhydd, mae unrhyw fewnbwn testun HTML5 yn ymddangos felly.

Marcio enghreifftiol

O ystyried y gosodiad ffurf enghreifftiol uchod, dyma'r marcio sy'n gysylltiedig â'r grŵp mewnbwn a rheoli cyntaf. Mae angen y .control-group, .control-label, a .controlsdosbarthiadau i gyd ar gyfer steilio.

  1. <form class = "form-horizontal" >
  2. <set maes>
  3. <legend> Testun chwedl </legend>
  4. <div class = "control-group" >
  5. <label class = " control-label " for = " mewnbwn01 " > Mewnbwn testun </label>
  6. <div class = "rheolaethau" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Testun cymorth ategol </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Cyflyrau rheoli ffurf

disabledMae Bootstrap yn cynnwys arddulliau ar gyfer ffocws a gwladwriaethau a gefnogir gan borwr . Rydym yn dileu'r Webkit rhagosodedig outlineac yn cymhwyso box-shadowyn ei le ar gyfer :focus.


Dilysu ffurflen

Mae hefyd yn cynnwys arddulliau dilysu ar gyfer gwallau, rhybuddion a llwyddiant. I'w ddefnyddio, ychwanegwch y dosbarth gwall i'r .control-group.

  1. < set maes
  2. class = "gwall grŵp rheoli" >
  3. </fieldset>
Rhywfaint o werth yma
Efallai bod rhywbeth wedi mynd o'i le
Cywirwch y gwall
Woohoo!
Woohoo!

Ymestyn rheolaethau ffurflen

Rhagflaenu ac atodi mewnbynnau

Mae grwpiau mewnbwn - gyda thestun wedi'i atodi neu wedi'i ragpendicynnu - yn darparu ffordd hawdd o roi mwy o gyd-destun i'ch mewnbynnau. Mae enghreifftiau gwych yn cynnwys yr arwydd @ ar gyfer enwau defnyddwyr Twitter neu $ ar gyfer cyllid.


Blychau siec a radios

Hyd at v1.4, roedd angen marcio ychwanegol ar Bootstrap o amgylch blychau ticio a radios i'w pentyrru. Nawr, mae'n fater syml o ailadrodd yr <label class="checkbox">hyn sy'n lapio'r <input type="checkbox">.

Cefnogir blychau ticio mewnol a radios hefyd. Dim ond ychwanegu .inlineat unrhyw .checkboxneu .radioac rydych chi wedi gorffen.


Ffurflenni mewnol ac atodi/prepend

I ddefnyddio rhagpend neu atodi mewnbynnau ar ffurf mewnlin, gofalwch eich bod yn gosod y .add-onac inputar yr un llinell, heb fylchau.


Ffurfio testun cymorth

I ychwanegu testun cymorth ar gyfer eich mewnbynnau ffurflen, cynhwyswch destun cymorth mewnol gyda <span class="help-inline">neu floc testun cymorth gydag <p class="help-block">ar ôl yr elfen fewnbwn.

Defnyddiwch yr un .span*dosbarthiadau o'r system grid ar gyfer meintiau mewnbwn.

Gallwch hefyd ddefnyddio dosbarthiadau statig nad ydynt yn mapio i'r grid, addasu i'r arddulliau CSS ymatebol, neu roi cyfrif am wahanol fathau o reolaethau (ee, inputvs. select).

@

Dyma ychydig o destun cymorth

.00
Dyma ragor o destun cymorth
$ .00

Nodyn: Mae labeli'n amgylchynu'r holl opsiynau ar gyfer ardaloedd clicio llawer mwy a ffurf fwy defnyddiadwy.

Botwm dosbarth ="" Disgrifiad
btn Botwm llwyd safonol gyda graddiant
btn btn-primary Yn darparu pwysau gweledol ychwanegol ac yn nodi'r prif weithred mewn set o fotymau
btn btn-info Fe'i defnyddir fel dewis arall i'r arddulliau rhagosodedig
btn btn-success Yn dynodi gweithred lwyddiannus neu gadarnhaol
btn btn-warning Yn nodi y dylid bod yn ofalus gyda'r cam hwn
btn btn-danger Yn dynodi gweithred beryglus neu a allai fod yn negyddol
btn btn-inverse Botwm llwyd tywyll bob yn ail, heb ei glymu i weithred neu ddefnydd semantig

Botymau ar gyfer gweithredoedd

Fel confensiwn, dim ond ar gyfer gweithredoedd y dylid defnyddio botymau tra bod hypergysylltiadau i'w defnyddio ar gyfer gwrthrychau. Er enghraifft, dylai "Lawrlwytho" fod yn fotwm tra dylai "gweithgaredd diweddar" fod yn ddolen.

Gellir cymhwyso arddulliau botwm i unrhyw beth gyda'r .btndosbarth wedi'i gymhwyso. Fodd bynnag, fel arfer byddwch am gymhwyso'r rhain i elfennau <a>ac <button>elfennau yn unig.

Cydweddoldeb traws-borwr

Nid yw IE9 yn cnydio graddiannau cefndir ar gorneli crwn, felly rydyn ni'n ei ddileu. Yn gysylltiedig, mae IE9 yn jancio buttonelfennau anabl, gan wneud y testun yn llwyd gyda chysgod testun cas na allwn ei drwsio.

Meintiau lluosog

Awydd botymau mwy neu lai? Ychwanegu .btn-large, .btn-small, neu .btn-miniar gyfer dau faint ychwanegol.


Cyflwr anabl

Ar gyfer botymau anabl, ychwanegwch y .disableddosbarth at ddolenni a'r disabledpriodoledd ar gyfer <button>elfennau.

Cyswllt cynradd Cyswllt

Pennau i fyny! Rydym yn defnyddio .disabledfel dosbarth cyfleustodau yma, yn debyg i'r .activedosbarth cyffredin, felly nid oes angen rhagddodiad.

Un dosbarth, tagiau lluosog

Defnyddiwch y .btndosbarth ar <a>, <button>, neu <input>elfen.

Cyswllt
  1. <a class="btn" href=""> Cyswllt </a> _ _ _ _ _
  2. <button class = "btn" type = "submit" >
  3. Botwm
  4. </button>
  5. < input class = "btn" type = "botwm"
  6. gwerth = "Mewnbwn" >
  7. < input class = "btn" type = "submit"
  8. value = "Cyflwyno" >

Fel arfer gorau, ceisiwch gydweddu'r elfen i'ch cyd-destun i sicrhau rendrad traws-borwr cyfatebol. Os oes gennych chi input, defnyddiwch <input type="submit">fotwm ar gyfer eich.

  • eicon-gwydr
  • eicon-cerddoriaeth
  • eicon-chwilio
  • eicon-amlen
  • eicon-galon
  • eicon-seren
  • eicon-seren-gwag
  • eicon-ddefnyddiwr
  • eicon-ffilm
  • eicon-th-mawr
  • eicon-th
  • eicon-th-rhestr
  • eicon-iawn
  • eicon-tynnu
  • eicon-chwyddo i mewn
  • eicon-chwyddo-allan
  • eicon-off
  • eicon-signal
  • eicon-cog
  • eicon-sbwriel
  • eicon-cartref
  • eicon-ffeil
  • eicon-amser
  • eicon-ffordd
  • eicon-lawrlwytho-alt
  • eicon-lawrlwytho
  • eicon-llwytho i fyny
  • eicon-mewnflwch
  • eicon-chwarae-cylch
  • eicon-ailadrodd
  • eicon-adnewyddu
  • eicon-rhestr-alt
  • eicon-clo
  • eicon-faner
  • eicon-chlustffonau
  • icon-volume-off
  • eicon-cyfrol-lawr
  • eicon-cyfrol-i fyny
  • eicon-qrcode
  • eicon-cod bar
  • eicon-tag
  • eicon-tagiau
  • eicon-lyfr
  • eicon-nod tudalen
  • eicon-print
  • eicon-camera
  • eicon-ffont
  • eicon-beiddgar
  • eicon-italig
  • eicon-testun-uchder
  • eicon-testun-lled
  • eicon-alinio-chwith
  • eicon-alinio-canolfan
  • eicon-alinio-dde
  • eicon-alinio-cyfiawnhau
  • eicon-rhestr
  • eicon-mewndent-chwith
  • eicon-mewndent-dde
  • eicon-facetime-fideo
  • eicon-llun
  • eicon-pensil
  • eicon-map-marcwr
  • eicon-addasu
  • eicon-arlliw
  • eicon-olygu
  • rhannu eicon
  • eicon-wirio
  • eicon-symud
  • eicon-cam yn ôl
  • eicon-cyflym-yn-ôl
  • eicon-yn ôl
  • chwarae eicon
  • eicon-saib
  • eicon-stop
  • eicon-ymlaen
  • eicon-cyflym-ymlaen
  • eicon-cam ymlaen
  • eicon-dafliad
  • icon-chevron-chwith
  • eicon-chevron-dde
  • icon-plus-sign
  • eicon-minws-arwydd
  • eicon-tynnu-arwydd
  • eicon-iawn-arwydd
  • eicon-cwestiwn-arwydd
  • eicon-info-sign
  • eicon-sgrinlun
  • eicon-tynnu-cylch
  • eicon-iawn-cylch
  • eicon-gwaharddiad-cylch
  • eicon-saeth-chwith
  • eicon-saeth-dde
  • eicon-saeth i fyny
  • eicon-saeth-lawr
  • eicon-rhannu-alt
  • eicon-newid maint-llawn
  • eicon-newid maint-bach
  • eicon-plws
  • eicon-minws
  • eicon-seren
  • eicon-ebychnod-arwydd
  • eicon-rhodd
  • eicon-dail
  • eicon-tân
  • eicon-llygad-agored
  • eicon-llygad-agos
  • eicon-rhybudd-arwydd
  • eicon-awyren
  • eicon-calendr
  • eicon-hap
  • eicon-sylw
  • eicon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • eicon-aildrydar
  • eicon-siopa-cart
  • icon-folder-close
  • eicon-ffolder-agored
  • eicon-newid maint-fertigol
  • eicon-newid maint-llorweddol
  • eicon-hdd
  • icon-bullhorn
  • eicon-cloch
  • tystysgrif eicon
  • eicon-bawd-up
  • eicon-bawd-lawr
  • eicon-llaw-dde
  • eicon-llaw-chwith
  • eicon-llaw i fyny
  • eicon-llaw-lawr
  • icon-circle-arrow-dde
  • icon-circle-arrow-chwith
  • icon-circle-arrow-up
  • icon-cylch-saeth-lawr
  • eicon-globe
  • eicon-wrench
  • eicon-tasgau
  • eicon-hidlydd
  • eicon-brîff
  • eicon-sgrin lawn

Adeiladwyd fel corlun

Yn lle gwneud pob eicon yn gais ychwanegol, rydym wedi eu crynhoi yn sprite - criw o ddelweddau mewn un ffeil sy'n defnyddio CSS i osod y delweddau gyda background-position. Dyma'r un dull rydyn ni'n ei ddefnyddio ar Twitter.com ac mae wedi gweithio'n dda i ni.

Mae'r holl ddosbarthiadau eiconau wedi'u rhagddodi â .icon-bylchau enwau a chwmpasu priodol, yn debyg iawn i'n cydrannau eraill. Bydd hyn yn helpu i osgoi gwrthdaro ag offer eraill.

Mae Glyphicons wedi caniatáu i ni ddefnyddio set Halflings yn ein pecyn cymorth ffynhonnell agored cyn belled â'n bod yn darparu dolen a chlod yma yn y dogfennau. Ystyriwch wneud yr un peth yn eich prosiectau.

Sut i ddefnyddio

Mae Bootstrap yn defnyddio <i>tag ar gyfer pob eicon, ond nid oes ganddyn nhw ddosbarth achos - dim ond rhagddodiad a rennir. I'w ddefnyddio, rhowch y cod canlynol bron yn unrhyw le:

  1. <i class = "chwiliad eicon" ></i>

Mae yna hefyd arddulliau ar gael ar gyfer eiconau gwrthdro (gwyn), wedi'u paratoi gydag un dosbarth ychwanegol:

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

Mae yna 140 o ddosbarthiadau i ddewis ohonynt ar gyfer eich eiconau. Ychwanegwch <i>dag gyda'r dosbarthiadau cywir ac rydych chi'n barod. Gallwch ddod o hyd i'r rhestr lawn yn sprites.less neu yma yn y ddogfen hon.

Pennau i fyny! Wrth ddefnyddio llinynnau wrth ymyl testun, fel mewn botymau neu ddolenni nav, gwnewch yn siŵr eich bod yn gadael bwlch ar ôl y <i>tag ar gyfer y bylchau cywir.

Defnyddio achosion

Mae eiconau'n wych, ond ble byddai rhywun yn eu defnyddio? Dyma ychydig o syniadau:

  • Fel delweddau ar gyfer llywio eich bar ochr
  • Ar gyfer llywio sy'n cael ei yrru gan eicon yn unig
  • Ar gyfer botymau i helpu i gyfleu ystyr gweithred
  • Gyda dolenni i rannu cyd-destun ar gyrchfan defnyddiwr

Yn y bôn, unrhyw le y gallwch chi roi <i>tag, gallwch chi roi eicon.

Enghreifftiau

Defnyddiwch nhw mewn botymau, grwpiau botwm ar gyfer bar offer, llywio, neu fewnbynnau ffurf wedi'u rhagpendodi.