CSS ipilẹ

Lori oke ti scaffolding, awọn eroja HTML ipilẹ ti wa ni aṣa ati imudara pẹlu awọn kilasi extensible lati pese tuntun, iwo deede ati rilara.

Awọn akọle & ẹda ara

asekale Typographic

Gbogbo akoj afọwọṣe da lori awọn oniyipada Kere meji ninu awọn oniyipada wa.faili ti ko ni: @baseFontSizeati @baseLineHeight. Ni igba akọkọ ti ni awọn mimọ-iwọn font lo jakejado ati awọn keji ni awọn mimọ ila-giga.

A nlo awọn oniyipada wọnyẹn, ati awọn iṣiro diẹ, lati ṣẹda awọn ala, awọn paddings, ati awọn giga laini ti gbogbo iru wa ati diẹ sii.

Ọrọ ara apẹẹrẹ

Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Daakọ ara asiwaju

Ṣe paragira kan duro jade nipa fifi kun .lead.

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

h1. Akọle 1

h2. Akole 2

h3. Akole 3

h4. Akole 4

h5. Akole 5
h6. Akole 6

Itẹnumọ, adirẹsi, ati abbreviation

Eroja Lilo iyan
<strong> Fun tẹnumọ snippet ti ọrọ pẹlu pataki Ko si
<em> Fun tẹnumọ snippet ti ọrọ pẹlu wahala Ko si
<abbr> Mu awọn abbreviations ati awọn acronyms lati fi ẹya ti o gbooro han lori rababa

Fi ẹya iyan titlekun fun ọrọ ti o gbooro sii

Lo .initialismkilasi fun awọn kuru awọn lẹta nla.
<address> Fun alaye olubasọrọ fun baba ti o sunmọ tabi gbogbo ara iṣẹ Ṣetọju ọna kika nipa ipari gbogbo awọn ila pẹlu<br>

Lilo tcnu

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

Akiyesi: Lero ọfẹ lati lo <b>ati <i>ni HTML5, ṣugbọn lilo wọn ti yipada diẹ. <b>Itumọ lati ṣe afihan awọn ọrọ tabi awọn gbolohun ọrọ laisi sisọ pataki pataki lakoko <i>ti o jẹ pupọ julọ fun ohun, awọn ofin imọ-ẹrọ, ati bẹbẹ lọ.

Awọn adirẹsi apẹẹrẹ

Eyi ni awọn apẹẹrẹ meji ti bi <address>a ṣe le lo tag naa:

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

Awọn kuru apẹẹrẹ

Awọn kuru pẹlu abuda kan titleni aala isale ti sami ina ati kọsọ iranlọwọ lori rababa. Eyi n fun awọn olumulo ni afikun itọkasi ohun kan yoo han lori rababa.

Ṣafikun initialismkilaasi naa si abbreviation lati mu isọdọkan kikọ sii nipa fifun ni iwọn ọrọ ti o kere diẹ.

HTML jẹ ohun ti o dara julọ niwon akara ti a ge wẹwẹ.

An abbreviation ti ọrọ ikalara ni attr .

Blockquotes

Eroja Lilo iyan
<blockquote> Idina-ipele eroja fun sisọ akoonu lati orisun miiran

Ṣafikun citeabuda fun URL orisun

Lo .pull-leftati .pull-rightawọn kilasi fun awọn aṣayan lilefoofo
<small> Ohun elo iyan fun fifi itọkasi ti nkọju si olumulo, ni igbagbogbo onkọwe pẹlu akọle iṣẹ Gbe ni <cite>ayika akọle tabi orukọ orisun

Lati ni blockquote kan, <blockquote>yika ni ayika HTML eyikeyi bi agbasọ ọrọ. Fun awọn agbasọ taara a ṣeduro <p>.

Fi nkan iyan <small>kan kun lati tọka si orisun rẹ ati pe iwọ yoo gba dash em &mdash;ṣaaju rẹ fun awọn idi aṣa.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a ante venenatis. </p>
  3. <kekere> Ẹnikan olokiki </small>
  4. </blockquote>

Apeere blockquotes

Awọn ọrọ idinaduro aiyipada jẹ aṣa bi iru:

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

Ẹnikan olokiki ninu Ara iṣẹ

Lati leefofo blockquote rẹ si apa ọtun, ṣafikun class="pull-right":

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

Ẹnikan olokiki ninu Ara iṣẹ

Awọn akojọ

Ti ko paṣẹ

<ul>

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

Ti ko ni aṣa

<ul class="unstyled">

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

Ti paṣẹ

<ol>

  1. Lorem ipsum dolor joko amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis ni pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean joko amet erat nunc
  8. Eget porttitor lorem

Apejuwe

<dl>

Awọn akojọ apejuwe
Akojọ apejuwe jẹ pipe fun asọye awọn ofin.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit ti kii mi porta gravida ati eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Apejuwe petele

<dl class="dl-horizontal">

Awọn akojọ apejuwe
Akojọ apejuwe jẹ pipe fun asọye awọn ofin.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit ti kii mi porta gravida ati eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Efeti sile! Awọn atokọ apejuwe petele yoo ge awọn ọrọ ti o gun ju lati baamu ni atunṣe ọwọn osi text-overflow. Ni awọn ibudo wiwo ti o dín, wọn yoo yipada si ipilẹ tolera aiyipada.

Ni tito

Pa awọn snippets inline ti koodu pẹlu <code>.

  1. Fun apẹẹrẹ , <code> apakan </ code > yẹ ki o wa ni wiwun bi inline .

Àkọsílẹ ipilẹ

Lo <pre>fun ọpọ ila ti koodu. Rii daju lati sa fun awọn biraketi igun eyikeyi ninu koodu fun ṣiṣe to dara.

<p>Apeere ọrọ nibi...</p>
  1. <tẹlẹ>
  2. <p> Ayẹwo ọrọ nibi...</p>
  3. </pre>

Akiyesi: Rii daju pe o tọju koodu laarin <pre>awọn afi ni isunmọ si apa osi bi o ti ṣee; yoo mu gbogbo awọn taabu.

O le ṣe afikun .pre-scrollablekilaasi ni yiyan eyi ti yoo ṣeto giga-giga ti 350px ati pese ọpa lilọ-y-axis kan.

Google Prettify

Mu nkan kanna <pre>ki o ṣafikun awọn kilasi iyan meji fun imudara imudara.

  1. <p> Ọrọ apẹẹrẹ nibi... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p> Ayẹwo ọrọ nibi...</p>
  4. </pre>

Ṣe igbasilẹ google-code-prettify ati wo readme fun bi o ṣe le lo.

Siṣamisi tabili

Tag Apejuwe
<table> Apo mimu fun fifi data han ni ọna kika tabular
<thead> Apoti eroja fun awọn ori ila akọsori tabili ( <tr>) lati ṣe aami awọn ọwọn tabili
<tbody> Eiyan ano fun tabili awọn ori ila ( <tr>) ninu awọn ara ti awọn tabili
<tr> Eiyan eroja fun a ṣeto ti tabili awọn sẹẹli ( <td>tabi <th>) ti o han lori kan nikan kana
<td> Seli tabili aiyipada
<th> Cell tabili pataki fun ọwọn (tabi kana, da lori iwọn ati ipo) Awọn aami
gbọdọ ṣee lo laarin a<thead>
<caption> Apejuwe tabi akopọ ohun ti tabili dimu, paapaa wulo fun awọn oluka iboju
  1. <tabili>
  2. <ori>
  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. </tabili>

Awọn aṣayan tabili

Oruko Kilasi Apejuwe
Aiyipada Ko si Ko si awọn aza, o kan awọn ọwọn ati awọn ori ila
Ipilẹṣẹ .table Awọn ila petele nikan laarin awọn ori ila
Aala .table-bordered Yika igun ati afikun lode aala
Abila-okun .table-striped Ṣafikun awọ abẹlẹ grẹy ina si awọn ori ila ti ko dara (1, 3, 5, ati bẹbẹ lọ)
Ti di .table-condensed Ge padding inaro ni idaji, lati 8px si 4px, laarin gbogbo tdati thawọn eroja

Awọn tabili apẹẹrẹ

1. Aiyipada tabili aza

Awọn tabili ti wa ni aṣa laifọwọyi pẹlu awọn aala diẹ lati rii daju kika ati ṣetọju eto. Pẹlu 2.0, .tablekilasi naa nilo.

  1. <tabili kilasi = "tabili" >
  2. </tabili>
# Orukọ akọkọ Oruko idile Orukọ olumulo
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @twitter

2. ṣi kuro tabili

Gba igbadun diẹ pẹlu awọn tabili rẹ nipa fifi abila-striping kun-kan ṣafikun .table-stripedkilasi naa.

Akiyesi: Awọn tabili ti a ṣi kuro lo :nth-childoluyan CSS ko si si ni IE7-IE8.

  1. <tabili kilasi = "tabili-si kuro tabili" >
  2. </tabili>
# Orukọ akọkọ Oruko idile Orukọ olumulo
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @twitter

3. Bordered tabili

Ṣafikun awọn aala ni ayika gbogbo tabili ati awọn igun yika fun awọn idi ẹwa.

  1. <tabili kilasi = "tabili-aala" >
  2. </tabili>
# Orukọ akọkọ Oruko idile Orukọ olumulo
1 Samisi Otto @mdo
Samisi Otto @getbootstrap
2 Jakobu Thornton @sanra
3 Larry Eye @twitter

4. Ti di tabili

Ṣe awọn tabili rẹ ni iwapọ diẹ sii nipa fifi .table-condensedkilasi kun lati ge padding sẹẹli tabili ni idaji (lati 8px si 4px).

  1. <tabili kilasi = "tabili-condensed" >
  2. </tabili>
# Orukọ akọkọ Oruko idile Orukọ olumulo
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @twitter

5. Darapọ gbogbo wọn!

Lero ọfẹ lati darapọ eyikeyi awọn kilasi tabili lati ṣaṣeyọri awọn iwo oriṣiriṣi nipa lilo eyikeyi awọn kilasi ti o wa.

  1. <tabili kilasi = "tabili ti o ṣina tabili ti o ni aala tabili ti o ni didùn" >
  2. ...
  3. </tabili>
Akokun Oruko
# Orukọ akọkọ Oruko idile Orukọ olumulo
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @twitter

HTML to rọ ati CSS

Apakan ti o dara julọ nipa awọn fọọmu ni Bootstrap ni pe gbogbo awọn igbewọle rẹ ati awọn idari wo nla laibikita bii o ṣe kọ wọn sinu isamisi rẹ. Ko si HTML superfluous ti a beere, ṣugbọn a pese awọn ilana fun awọn ti o nilo rẹ.

Awọn ipilẹ idiju diẹ sii wa pẹlu awọn kilasi kukuru ati iwọn fun iselona irọrun ati abuda iṣẹlẹ, nitorinaa o ti bo ni gbogbo igbesẹ.

Mẹrin ipalemo to wa

Bootstrap wa pẹlu atilẹyin fun awọn oriṣi mẹrin ti awọn ipilẹ fọọmu:

  • Inaro (aiyipada)
  • Wa
  • Ni tito
  • Petele

Awọn oriṣi awọn ipilẹ fọọmu nilo diẹ ninu awọn ayipada si isamisi, ṣugbọn awọn iṣakoso funrararẹ wa ati huwa kanna.

Iṣakoso ipinle ati siwaju sii

Awọn fọọmu Bootstrap pẹlu awọn aṣa fun gbogbo awọn iṣakoso fọọmu ipilẹ bi titẹ sii, textarea, ati yan ti o nireti. Ṣugbọn o tun wa pẹlu nọmba awọn paati aṣa bii awọn ifikun ati awọn igbewọle ti a ti ṣetan ati atilẹyin fun awọn atokọ ti awọn apoti ayẹwo.

Awọn ipinlẹ bii aṣiṣe, ikilọ, ati aṣeyọri wa pẹlu iru iṣakoso fọọmu kọọkan. Bakannaa pẹlu awọn aza fun awọn iṣakoso alaabo.

Awọn oriṣi mẹrin ti awọn fọọmu

Bootstrap n pese isamisi ti o rọrun ati awọn aza fun awọn aza mẹrin ti awọn fọọmu wẹẹbu ti o wọpọ.

Oruko Kilasi Apejuwe
Inaro (aiyipada) .form-vertical (ko nilo) Tolera, awọn akole ti o ni ibamu si osi lori awọn idari
Ni tito .form-inline Aami ti o ni ibamu si apa osi ati awọn iṣakoso inline-block fun ara iwapọ
Wa .form-search Iṣagbewọle ọrọ ti o ni iyipo-fikun fun ẹwa aṣawakiri kan
Petele .form-horizontal Leefofo osi, awọn akole ti o ni ibamu si ọtun lori laini kanna bi awọn idari

Awọn fọọmu apẹẹrẹ ni lilo awọn idari fọọmu nikan, ko si isamisi afikun

Fọọmu ipilẹ

Smart ati awọn aiyipada iwuwo fẹẹrẹ laisi isamisi afikun.

Apẹẹrẹ ọrọ iranlọwọ ipele-idina nibi.

  1. < kilasi fọọmu = "daradara" >
  2. <aami> Orukọ aami </label>
  3. < iru igbewọle = "ọrọ" kilasi = "span3" ibi ipamọ = "Tẹ nkan kan..." >
  4. <span class = "help-block" > Apẹẹrẹ ọrọ iranlọwọ ipele idina nibi. </span>
  5. < kilasi aami = "apoti" >
  6. <input type = "boxbox" > Ṣayẹwo mi
  7. </aami>
  8. <bọtini iru = "fi silẹ" kilasi = "btn" > Fi </button> silẹ
  9. </fọọmu>

Fọọmu wa

Fi .form-searchsi fọọmu naa ati .search-querysi input.

  1. < kilasi fọọmu = "daradara fọọmu-wawa" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "fi silẹ" kilasi = "btn" > Ṣawari </button>
  4. </fọọmu>

Fọọmu inline

Ṣafikun .form-inlinesi itanran titete inaro ati aye ti awọn idari fọọmu.

  1. < kilasi fọọmu = "daradara fọọmu-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Imeeli" >
  3. <input type = "ọrọ igbaniwọle" kilasi = "input-small" ibi ipamọ = "Ọrọigbaniwọle" >
  4. < kilasi aami = "apoti" >
  5. <input type = "boxbox" > Ranti mi
  6. </aami>
  7. <button type = "fi silẹ" kilasi = "btn" > Wọle </button>
  8. </fọọmu>

Awọn fọọmu petele

Ti o han ni apa ọtun ni gbogbo awọn iṣakoso fọọmu aiyipada ti a ṣe atilẹyin. Eyi ni atokọ bulleted:

  • awọn igbewọle ọrọ (ọrọ, ọrọ igbaniwọle, imeeli, ati bẹbẹ lọ)
  • apoti
  • redio
  • yan
  • ọpọ yan
  • kikọ sii faili
  • textarea

Ni afikun si ọrọ ọfẹ, eyikeyi igbewọle orisun ọrọ HTML5 yoo han bi bẹ.

Apeere isamisi

Fi fun apẹrẹ fọọmu apẹrẹ loke, eyi ni isamisi ti o ni nkan ṣe pẹlu iṣagbewọle akọkọ ati ẹgbẹ iṣakoso. Awọn .control-group, .control-label, ati .controlsawọn kilasi ni gbogbo wọn nilo fun iselona.

  1. < kilaasi fọọmu = "fọọmu-petele" >
  2. <fi aaye>
  3. <arosọ> Ọrọ arosọ </legend>
  4. <div class = "ẹgbẹ iṣakoso" >
  5. <label class = "control-label" fun = "input01" > Iṣawọle ọrọ </label>
  6. <div kilasi = "awọn idari" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Ọrọ iranlọwọ atilẹyin </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </fọọmu>

Awọn ipinlẹ iṣakoso fọọmu

Bootstrap ṣe awọn ara fun idojukọ-ni atilẹyin aṣawakiri ati disabledawọn ipinlẹ. A yọ Webkit aiyipada kuro outlineati lo kan box-shadowni aaye rẹ fun :focus.


Fọọmu afọwọsi

O tun pẹlu awọn aza afọwọsi fun awọn aṣiṣe, ikilo, ati aṣeyọri. Lati lo, ṣafikun kilasi aṣiṣe si agbegbe .control-group.

  1. <eto aaye
  2. kilasi = "aṣiṣe iṣakoso-ẹgbẹ" >
  3. </fieldset>
Diẹ ninu awọn iye nibi
Nkankan le ti jẹ aṣiṣe
Jọwọ ṣe atunṣe aṣiṣe naa
Woohoo!
Woohoo!

Itẹsiwaju fọọmu idari

Mura & fi awọn igbewọle kun

Awọn ẹgbẹ igbewọle—pẹlu ifisi tabi ọrọ ti a ti ṣatunsilẹ—pese ọna ti o rọrun lati funni ni aaye diẹ sii fun awọn igbewọle rẹ. Awọn apẹẹrẹ nla pẹlu ami ami @ fun awọn orukọ olumulo Twitter tabi $ fun awọn inawo.


Awọn apoti ayẹwo ati awọn redio

Titi di v1.4, Bootstrap nilo afikun isamisi ni ayika awọn apoti ayẹwo ati awọn redio lati to wọn pọ. Bayi, o jẹ ọrọ ti o rọrun lati tun ṣe <label class="checkbox">eyi ti o fi ipari si <input type="checkbox">.

Awọn apoti ayẹwo ila ati awọn redio tun ni atilẹyin. Kan ṣafikun .inlinesi eyikeyi .checkboxtabi .radioati pe o ti ṣetan.


Awọn fọọmu inline ati append/prepend

Lati lo prepend tabi fi awọn igbewọle kun ni fọọmu inline, rii daju pe o gbe .add-onati inputsori laini kanna, laisi awọn alafo.


Fọọmu iranlọwọ ọrọ

Lati ṣafikun ọrọ iranlọwọ fun awọn igbewọle fọọmu rẹ, ṣafikun ọrọ iranlọwọ laini pẹlu <span class="help-inline">tabi dina ọrọ iranlọwọ pẹlu <p class="help-block">lẹhin ano igbewọle.

Lo awọn .span*kilasi kanna lati eto akoj fun awọn iwọn titẹ sii.

O tun le lo awọn kilasi aimi ti ko ṣe maapu si akoj, ni ibamu si awọn aṣa CSS ti o ṣe idahun, tabi akọọlẹ fun awọn oriṣiriṣi awọn idari (fun apẹẹrẹ, inputla. select).

@

Eyi ni diẹ ninu ọrọ iranlọwọ

.00
Eyi ni ọrọ iranlọwọ diẹ sii
$ .00

Akiyesi: Awọn aami yika gbogbo awọn aṣayan fun awọn agbegbe tẹ ti o tobi pupọ ati fọọmu lilo diẹ sii.

Bọtini kilasi = "" Apejuwe
btn Bọtini grẹy boṣewa pẹlu gradient
btn btn-primary Pese afikun iwuwo wiwo ati ṣe idanimọ iṣẹ akọkọ ni ṣeto awọn bọtini
btn btn-info Lo bi yiyan si awọn aza aiyipada
btn btn-success Ṣe afihan iṣe aṣeyọri tabi rere
btn btn-warning Tọkasi pe o yẹ ki o ṣọra pẹlu iṣe yii
btn btn-danger Tọkasi iṣẹ ti o lewu tabi agbara odi
btn btn-inverse Bọtini grẹy dudu miiran, ko so mọ iṣe atunmọ tabi lilo

Awọn bọtini fun awọn iṣe

Gẹgẹbi apejọ kan, awọn bọtini yẹ ki o lo fun awọn iṣe nikan lakoko awọn ọna asopọ hyperlink lati ṣee lo fun awọn nkan. Fun apẹẹrẹ, “Download” yẹ ki o jẹ bọtini kan nigba ti “iṣẹ ṣiṣe aipẹ” yẹ ki o jẹ ọna asopọ kan.

Awọn aza bọtini le ṣee lo si ohunkohun pẹlu .btnkilasi ti a lo. Sibẹsibẹ, ni igbagbogbo iwọ yoo fẹ lati lo awọn wọnyi si awọn <a>eroja <button>nikan.

Cross browser ibamu

IE9 ko ni irugbin isale gradients lori awọn igun yika, nitorinaa a yọ kuro. Jẹmọ, IE9 jankifies alaabo buttoneroja, Rendering ọrọ grẹy pẹlu kan ẹgbin ọrọ-ojiji ti a ko le ṣatunṣe.

Awọn titobi pupọ

Fancy tobi tabi kere bọtini? Ṣafikun .btn-large, .btn-small, tabi .btn-minifun awọn titobi afikun meji.


Ipo alaabo

Fun awọn bọtini alaabo, ṣafikun .disabledkilasi si awọn ọna asopọ ati abuda disabledfun <button>awọn eroja.

Ọna asopọ akọkọ Ọna asopọ

Efeti sile! A lo .disabledbi kilasi IwUlO kan nibi, iru si .activekilasi ti o wọpọ, nitorinaa ko nilo asọtẹlẹ kan.

Ọkan kilasi, ọpọ afi

Lo .btnkilasi naa lori <a>, <button>, tabi <input>eroja.

Ọna asopọ
  1. <a class = "btn" href = "" > Ọna asopọ </a>
  2. < kilaasi bọtini = "btn" type = "fi silẹ" >
  3. Bọtini
  4. </bọtini>
  5. < class input = "btn" type = "bọtini"
  6. iye = "Igbewọle" >
  7. < class input = "btn" type = "fi silẹ"
  8. iye = "Firanṣẹ" >

Gẹgẹbi iṣe ti o dara julọ, gbiyanju lati baramu ipin fun ọ ni ayika lati rii daju pe o ni ibamu pẹlu aṣawakiri aṣawakiri. Ti o ba ni input, lo ohun kan <input type="submit">fun bọtini rẹ.

  • aami-gilasi
  • aami-orin
  • aami-wa
  • aami-apopu
  • aami-okan
  • aami-irawọ
  • icon-Star-sofo
  • aami-olumulo
  • aami-fiimu
  • aami-th-tobi
  • aami-th
  • icon-th-akojọ
  • aami-ok
  • aami-yiyọ
  • aami-sun-in
  • aami-sun-jade
  • aami-pipa
  • aami-ifihan agbara
  • aami-cog
  • aami-idọti
  • aami-ile
  • icon-faili
  • icon-akoko
  • aami-opopona
  • icon-download-alt
  • aami-download
  • icon-po si
  • aami-apo-iwọle
  • icon-play-Circle
  • aami-tun
  • icon-sọtun
  • icon-akojọ-alt
  • aami-titiipa
  • aami-flag
  • aami-agbekọri
  • aami-iwọn-pipa
  • aami-iwọn didun-isalẹ
  • aami-iwọn-soke
  • aami-qrcode
  • aami-barcode
  • aami-tag
  • aami-afi
  • aami-iwe
  • aami-bukumaaki
  • aami-tẹ
  • aami-kamẹra
  • aami-font
  • aami-gboya
  • aami-italic
  • aami-ọrọ-giga
  • aami-ọrọ-iwọn
  • icon-mö-osi
  • icon-mö-aarin
  • icon-mö-ọtun
  • icon-mö-lare
  • aami-akojọ
  • aami-indent-osi
  • aami-indent-ọtun
  • icon-facetime-video
  • aami-aworan
  • aami-ikọwe
  • aami-maapu-ami
  • aami-ṣatunṣe
  • aami-tint
  • aami-edit
  • aami-pin
  • aami-ṣayẹwo
  • aami-gbe
  • icon-igbese-pada
  • aami-sare-pada
  • aami-pada
  • aami-play
  • aami-idaduro
  • aami-duro
  • aami-siwaju
  • icon-sare-siwaju
  • icon-igbese-siwaju
  • aami-jade
  • aami-chevron-osi
  • icon-chevron-ọtun
  • aami-plus-ami
  • aami-iyokuro-ami
  • aami-yiyọ-ami
  • aami-ok-ami
  • aami-ibeere-ami
  • aami-info-ami
  • icon-screenshot
  • aami-yọ-Circle
  • icon-ok-Circle
  • aami-ban-yika
  • icon-ọfà-osi
  • icon-ọfà-ọtun
  • aami-ọfà-soke
  • aami-ọfa-isalẹ
  • aami-pin-alt
  • aami-iwọn-kikun
  • aami-iwọn-kekere
  • aami-plus
  • aami-iyokuro
  • aami-aami akiyesi
  • icon-exclamation-ami
  • aami-ebun
  • aami-bunkun
  • aami-iná
  • aami-oju-ìmọ
  • aami-oju-sunmọ
  • aami-ikilo-ami
  • aami-ofurufu
  • icon-kalẹnda
  • aami-ID
  • icon-comment
  • aami-oofa
  • aami-chevron-soke
  • aami-chevron-isalẹ
  • aami-retweet
  • icon-tio-kẹkẹ
  • aami-folda-sunmọ
  • aami-folda-ìmọ
  • aami-iwọn-inaro
  • aami-iwọn-petele
  • aami-hdd
  • aami-bullhorn
  • aami-agogo
  • aami-ẹri
  • aami-atampako-soke
  • aami-atampako-isalẹ
  • aami-ọwọ-ọtun
  • aami-ọwọ-osi
  • aami-ọwọ-soke
  • aami-ọwọ-isalẹ
  • aami-yika-ọfa-ọtun
  • icon-Circle-ọfà-osi
  • aami-yika-ọfà-soke
  • aami-yika-ọfa-isalẹ
  • aami-agbaye
  • icon-wrench
  • aami-awọn iṣẹ-ṣiṣe
  • aami-àlẹmọ
  • aami-kikuru
  • icon-ni kikun iboju

Ti a ṣe bi sprite

Dipo ti ṣiṣe gbogbo aami ni afikun ibeere, a ti ṣajọ wọn sinu sprite — opo awọn aworan ninu faili kan ti o nlo CSS lati gbe awọn aworan pẹlu background-position. Eyi jẹ ọna kanna ti a lo lori Twitter.com ati pe o ti ṣiṣẹ daradara fun wa.

Gbogbo awọn kilasi aami ti wa ni iṣaju pẹlu .icon-fun piparẹ awọn orukọ to dara ati iwọn, pupọ bii awọn paati miiran wa. Eyi yoo ṣe iranlọwọ lati yago fun awọn ija pẹlu awọn irinṣẹ miiran.

Glyphicons ti fun wa ni lilo awọn Halflings ti a ṣeto sinu ohun elo irinṣẹ orisun-ìmọ niwọn igba ti a ba pese ọna asopọ ati kirẹditi nibi ninu awọn iwe aṣẹ. Jọwọ ronu ṣiṣe kanna ni awọn iṣẹ akanṣe rẹ.

Bawo ni lati lo

Bootstrap nlo <i>aami kan fun gbogbo awọn aami, ṣugbọn wọn ko ni kilasi ọran-nikan ìpele ti o pin. Lati lo, gbe koodu atẹle yii si ibikibi:

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

Awọn ara tun wa fun awọn aami inverted (funfun), ti a ṣetan pẹlu kilasi afikun kan:

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

Awọn kilasi 140 wa lati yan lati fun awọn aami rẹ. Kan ṣafikun <i>tag pẹlu awọn kilasi to tọ ati pe o ti ṣeto. O le wa atokọ ni kikun ni sprites.less tabi ọtun nibi ninu iwe yii.

Efeti sile! Nigbati o ba nlo ni ẹgbẹ awọn gbolohun ọrọ, bi ninu awọn bọtini tabi awọn ọna asopọ nav, rii daju pe o fi aaye silẹ lẹhin <i>tag fun aye to dara.

Lo awọn igba

Awọn aami jẹ nla, ṣugbọn nibo ni ẹnikan yoo lo wọn? Eyi ni awọn imọran diẹ:

  • Bi awọn wiwo fun lilọ kiri ẹgbẹ ẹgbẹ rẹ
  • Fun aami-iwa kiri nikan
  • Fun awọn bọtini lati ṣe iranlọwọ lati sọ itumọ ti iṣe kan
  • Pẹlu awọn ọna asopọ lati pin ọrọ-ọrọ lori opin irin ajo olumulo kan

Ni pataki, nibikibi ti o le fi <i>aami sii, o le fi aami kan si.

Awọn apẹẹrẹ

Lo wọn ni awọn bọtini, awọn ẹgbẹ bọtini fun ọpa irinṣẹ, lilọ kiri, tabi awọn igbewọle fọọmu ti a ti ṣetan.