Graddfa deipograffig

Mae'r grid teipograffeg cyfan yn seiliedig ar ddau newidyn Llai yn ein ffeil variables.less: @baseFontSizea @baseLineHeight. Y cyntaf yw maint y ffont sylfaen a ddefnyddir drwyddi 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 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.

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 .

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' —o'i blaen at ddibenion steilio.

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

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

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.

Mewn llinell

Lapiwch bytiau mewnol o god gyda <code>.

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>

<pre>
  <p>Testun enghreifftiol yma...</p>
</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.

<p> Testun enghreifftiol yma... </p>

< pre class = " prettyprint 
     llieiniau" >
  <p>Testun enghreifftiol yma...</p>
</pre>

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

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

<bwrdd>
  <pen>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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.

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

#	Enw cyntaf	Enw olaf	Enw defnyddiwr
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry	yr Aderyn	@twitter

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.

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

#	Enw cyntaf	Enw olaf	Enw defnyddiwr
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry	yr Aderyn	@twitter

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

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

#	Enw cyntaf	Enw olaf	Enw defnyddiwr
1	Marc	Otto	@mdo
	Marc	Otto	@getbootstrap
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

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

#	Enw cyntaf	Enw olaf	Enw defnyddiwr
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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.

<table class = "table-striped table-bordered table-condensed" > 
  ...
</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.

Ffurf sylfaenol

Gyda v2.0, mae gennym ni ragosodiadau ysgafnach a doethach ar gyfer arddulliau ffurf. Dim marcio ychwanegol, dim ond ffurf rheolaethau.

Enw label Testun cymorth cysylltiedig!

Enghraifft o destun cymorth lefel bloc yma.

Gwiriwch fi allan Cyflwyno

<form class = "wel" > 
  <label> Enw label </label>
  <input type = "text" class = "span3" placeholder = " Teipiwch rywbeth…" >   
  <span class = "help-inline" > Testun cymorth cysylltiedig! </span> 
  <label class = "blwch ticio" > 
    <input type = "ticbox" > Gwiriwch fi allan 
  </label>
  <button type = "submit" class = "btn" > Cyflwyno </button>  
</form>

Ffurflen chwilio

Gan adlewyrchu arddulliau WebKit rhagosodedig, ychwanegwch .form-searchar gyfer meysydd chwilio crwn ychwanegol.

Chwiliwch

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

Ffurf inline

Mae mewnbynnau ar lefel bloc i ddechrau. Ar gyfer .form-inlinea .form-horizontal, rydym yn defnyddio bloc mewnol.

Cofiwch fi Mewngofnodi

<form class = "wel form-inline" > 
  <input type = "text" class = "input-small" placeholder = "E-bost" >   
  <input type = "cyfrinair" class = "input-small" placeholder = "Cyfrinair" >   
  <label class = "blwch ticio" > 
    <input type = " checkbox " > Cofiwch fi 
  </label>
  <button type = "submit" class = "btn" > Mewngofnodi </button>  
</form>

Rheolaethau y mae Bootstrap yn eu cefnogi

Mewnbwn testun

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

Blwch ticio

Opsiwn un yw hwn a'r llall - gwnewch yn siŵr eich bod yn cynnwys pam ei fod yn wych

Dewiswch restr

rhywbeth 2 3 4 5

Aml-ddethol

1 2 3 4 5

Mewnbwn ffeil

Ardal destun

Cadw newidiadau Canslo

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.

<form class = "form-horizontal" > 
  <set maes>
    <legend> Testun chwedl </legend>
    <div class = "control-group" > 
      <label class = " control-label " for = " mewnbwn01 " > Mewnbwn testun </label>  
      <div class = "rheolaethau" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Testun cymorth ategol </p> 
      </div>
    </div>
  </fieldset>
</form>

Beth sydd wedi'i gynnwys

Ar y chwith 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

---

Rhagosodiadau newydd gyda v2.0

Hyd at v1.4, roedd arddulliau ffurf rhagosodedig Bootstrap yn defnyddio'r gosodiad llorweddol. Gyda Bootstrap 2, gwnaethom ddileu'r cyfyngiad hwnnw i gael rhagosodiadau callach, mwy graddadwy ar gyfer unrhyw ffurf.

Cyflyrau rheoli ffurf

Mewnbwn â ffocws

Mewnbwn anaddas

Rhywfaint o werth yma

Mewnbwn anabl

Blwch ticio anabl

Mae hwn yn flwch ticio anabl

Mewnbwn gyda rhybudd

Efallai bod rhywbeth wedi mynd o'i le

Mewnbwn gyda gwall

Cywirwch y gwall

Mewnbwn gyda llwyddiant

Woohoo!

Dewiswch gyda llwyddiant

1 2 3 4 5 Woohoo!

Cadw newidiadau Canslo

Cyflyrau porwr wedi'u hailgynllunio

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.

< set maes
  class = "gwall grŵp rheoli" >
  …
</fieldset>

Ymestyn rheolaethau ffurflen

Ffurfio meintiau grid

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

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

Meintiau eraill

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

Testun parod

@

Dyma ychydig o destun cymorth

Testun atodol

.00

Dyma ragor o destun cymorth

Atodi a rhagdalu

$ .00

Atodi gyda botwm

Ewch!

Blychau ticio mewnol

1 2 3

Blychau ticio

Opsiwn un yw hwn a'r llall - gwnewch yn siŵr eich bod yn cynnwys pam ei fod yn wych Gellir gwirio opsiwn dau hefyd a'i gynnwys yng nghanlyniadau'r ffurflen Gellir gwirio opsiwn tri - ie, fe wnaethoch chi ddyfalu - hefyd gael ei wirio a'i gynnwys yng nghanlyniadau'r ffurflen

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

Botymau radio

Opsiwn un yw hwn a'r llall - gwnewch yn siŵr eich bod yn cynnwys pam ei fod yn wych Mae can opsiwn dau yn rhywbeth arall a bydd ei ddewis yn dad-ddewis opsiwn un

Cadw newidiadau Canslo

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.

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

Gweithredu cynradd Gweithred

Gweithredu cynradd Gweithred

Gweithredu cynradd Gweithred

Cyflwr anabl

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

Cyswllt cynradd Cyswllt

Botwm cynradd Botwm

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 Botwm

<a class="btn" href=""> Cyswllt </a> _ _ _ _ _  
<button class = "btn" type = "submit" >  
  Botwm
</button>
< input class = "btn" type = "botwm"  
         gwerth = "Mewnbwn" >
< input class = "btn" type = "submit"  
         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

Adeiladwyd fel corlun

Yn hytrach na 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:

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

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

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

Mae yna 120 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.

Adnewyddu Desg dalu Dileu

Sylw Gosodiadau Mwy o wybodaeth

Cyfeiriad ebost