CSS ea motheo

Ka holim'a scaffolding, likarolo tsa mantlha tsa HTML li entsoe le ho ntlafatsoa ka litlelase tse atolositsoeng ho fana ka chebahalo le maikutlo a macha, a ts'oanang.

Lihlooho le kopi ea 'mele

Sekala sa mongolo

Keriti eohle ea typographic e thehiloe holim'a mefuta e 'meli e Nyane ho mefuta ea rona.faele e se nang letho: @baseFontSizele @baseLineHeight. Ea pele ke boholo ba fonte e sebelisoang hohle 'me ea bobeli ke bophahamo ba mohala.

Re sebelisa mefuta-futa eo, le lipalo tse ling, ho theha marang-rang, li-padding, le bophahamo ba mela ea mefuta eohle ea rona le tse ling.

Mohlala oa mongolo oa 'mele

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.

Kopi ea 'mele oa moetapele

Etsa hore serapa se hlahelle ka ho eketsa .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Ke mollis, e seng commodo luctus.

h1. Sehlooho sa 1

h2. Sehlooho sa 2

h3. Sehlooho sa 3

h4. Sehlooho sa 4

h5. Sehlooho sa 5
h6. Sehlooho sa 6

Khatiso, aterese, le khutsufatso

Element Tšebeliso Taba ea boikhethelo
<strong> Bakeng sa ho totobatsa sekhechana sa mongolo ka bohlokoa Ha ho letho
<em> Bakeng sa ho totobatsa sekhechana sa mongolo ka khatello Ha ho letho
<abbr> E phuthela likhutsufatso le li-akhronimi ho bontša mofuta o atolositsoeng ho hover

Kenyelletsa titletšobotsi ea boikhethelo bakeng sa mongolo o atolositsoeng

Sebelisa .initialismsehlopha bakeng sa khutsufatso ea litlhaku tse kholo.
<address> Bakeng sa lintlha tsa ho ikopanya le moholo-holo oa eona ea haufi kapa sehlopha sohle sa mosebetsi Boloka mokhoa oa ho fometa ka ho qetella mela eohle ka<br>

Ho sebelisa khatiso

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

Tlhokomeliso: Ikutloe u lokolohile ho sebelisa <b>le <i>ho HTML5, empa ts'ebeliso ea bona e fetohile hanyane. <b>e reretsoe ho totobatsa mantsoe kapa lipoleloana ntle le ho fana ka bohlokoa bo eketsehileng ha <i>boholo e le ea lentsoe, mantsoe a theknoloji, joalo-joalo.

Liaterese tsa mohlala

Mehlala e 'meli ke ena ea hore na <address>tag e ka sebelisoa joang:

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

Likgutsufatso tsa mohlala

Likgutsufatso tse nang le titletšobotsi li na le moeli o ka tlase oa matheba a bobebe le sekhesa sa thuso ho hover. Sena se fa basebelisi pontšo e eketsehileng ea hore na ho na le ntho e tla bontšoa hover.

Eketsa initialismsehlopha ho khutsufatso ho eketsa kutloano ea mongolo ka ho e fa sengoloa se senyane hanyane.

HTML ke ntho e ntle ka ho fetisisa ho tloha ha bohobe bo sehiloeng.

Kgutsufatso ya lentsoe tšobotsi ke attr .

Mantsoe a thibelang

Element Tšebeliso Taba ea boikhethelo
<blockquote> Karolo ea block-level bakeng sa ho qotsa litaba tse tsoang mohloling o mong

Kenya citetšobotsi bakeng sa mohloli oa URL

Sebelisa .pull-leftle .pull-rightlitlelase bakeng sa dikgetho phaphametseng
<small> Ntho ea boikhethelo ea ho kenyelletsa qotso e shebaneng le basebelisi, hangata sengoli se nang le sehlooho sa mosebetsi Beha sebaka ho <cite>potoloha sehlooho kapa lebitso la mohloli

Ho kenyelletsa blockquote, koahela HTML<blockquote> efe kapa efe joalo ka quote. Bakeng sa mantsoe a qotsitsoeng ka kotloloho re khothaletsa a .<p>

Kenyelletsa <small>karolo eo u ka e khethang ho qotsa mohloli oa hau, 'me u tla fumana letšoao la em &mdash;pele ho eona molemong oa ho etsa setaele.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </p>
  3. <e nyane> Motho ya tsebahalang </small>
  4. </blockquote>

Li-blockquotes tsa mohlala

Li-blockquotes tsa kamehla li ngotsoe ka tsela e kang:

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

Motho ya tummeng ka Mmele wa mosebetsi

Ho phaphamisa blockquote ea hau ka ho le letona, eketsa class="pull-right":

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

Motho ya tummeng ka Mmele wa mosebetsi

Manane

Ha ea laeloa

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem le massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Likokoana-hloko tsa Purus sodales
    • Vestibulum laoreet porttitor 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
  • Integer molestie lorem le massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Likokoana-hloko tsa Purus sodales
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

E laetsoe

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem le massa
  4. Facilisis 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

Tlhaloso

<dl>

Manane a tlhaloso
Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Tlhaloso e tshekaletseng

<dl class="dl-horizontal">

Manane a tlhaloso
Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Hlokomela! Manane a litlhaloso a tšekaletseng a tla fokotsa mantsoe a malelele haholo hore a kenelle karolong e ka ho le letšehali text-overflow. Libopong tsa pono tse tšesaane, li tla fetohela ho sebopeho sa tlhophiso ea kamehla.

E mocheng

Qetella likotoana tse nyane tsa khoutu ka <code>.

  1. Ka mohlala , <code> karolo </ code > e lokela ho phutheloa joalo ka inline .

Thibelo ea motheo

Sebelisa <pre>bakeng sa mela e mengata ea khoutu. Etsa bonnete ba hore u balehile masakaneng afe kapa afe a khouto bakeng sa phetolelo e nepahetseng.

<p>Mohlala oa mongolo mona...</p>
  1. <pele>
  2. <p>Mohlala oa mongolo mona...</p>
  3. </ pre>

Tlhokomeliso: Etsa bonnete ba hore u boloka khoutu ka har'a <pre>li-tag haufi le ho le letšehali kamoo ho ka khonehang; e tla fana ka li-tab tsohle.

O ka eketsa ka boikhethelo .pre-scrollablesehlopha se tla beha bophahamo bo boholo ba 350px mme se fane ka y-axis scrollbar.

Google Pretify

Nka <pre>ntho e tšoanang 'me u kenye lihlopha tse peli tseo u ka li khethang bakeng sa phetolelo e ntlafalitsoeng.

  1. <p> Mohlala oa mongolo mona... </p>
  1. <pre class = "prettyprint
  2. linenum" >
  3. <p>Mohlala oa mongolo mona...</p>
  4. </ pre>

Khoasolla google-code-prettify 'me u shebe buka eo u ka e sebelisang ho e sebelisa.

Lethathamo la tafole

Tag Tlhaloso
<table> Karolo ea ho phuthela bakeng sa ho hlahisa data ka mokhoa oa tabular
<thead> Karolo ea setshelo bakeng sa mela ea lihlooho tsa tafole ( <tr>) ho tšoaea litšiea tsa tafole
<tbody> Karolo ea setshelo bakeng sa mela ea tafole ( <tr>) 'meleng oa tafole
<tr> Karolo ea nkho bakeng sa sete ea lisele tsa tafole ( <td>kapa <th>) tse hlahang moleng o le mong
<td> Tafole ea kamehla
<th> Li-tafole tse khethehileng bakeng sa kholomo (kapa mola, ho ipapisitsoe le sebaka le sebaka) li
lokela ho sebelisoa ka har'a<thead>
<caption> Tlhaloso kapa kakaretso ea seo tafole e se tšoereng, haholo-holo ho babali ba skrineng
  1. <tafole>
  2. <hlooho>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </ hlooho>
  8. <botho>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </tafole>

Likhetho tsa tafole

Lebitso Sehlopha Tlhaloso
Ea kamehla Ha ho letho Ha ho na mekhoa, likholomo le mela feela
Motheo .table Ke mela e tšekaletseng feela lipakeng tsa mela
E moeling .table-bordered E potoloha likhutlong ebe e eketsa moeli o ka ntle
Qoaha-thapo .table-striped E eketsa bokamorao ba 'mala o moputsoa ho mela e sa tloaelehang (1, 3, 5, joalo-joalo)
Condensed .table-condensed E fokotsa padding e otlolohileng ka halofo, ho tloha ho 8px ho isa ho 4px, ka har'a tsohle tdle thlikarolo

Litafole tsa mohlala

1. Litaele tsa tafole tsa kamehla

Litafole li entsoe ka mokhoa o ikemetseng ka meeli e fokolang feela ho netefatsa hore li balehe le ho boloka sebopeho. Ka 2.0, .tablesehlopha sea hlokahala.

  1. < sehlopha sa tafole = "tafole" >
  2. </tafole>
# Lebitso la pele Fane Username
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter

2. Tafole e methalo

Fumana monate ka litafole tsa hau ka ho eketsa liqoaha-tsenya .table-stripedsehlopha.

Tlhokomeliso: Litafole tse metsero li sebelisa sekhetho sa :nth-childCSS 'me ha se fumanehe ho IE7-IE8.

  1. < sehlopha sa tafole = "table-striped table" >
  2. </tafole>
# Lebitso la pele Fane Username
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter

3. Tafole e moeling

Kenya meeli ho potoloha tafole eohle le likhutlo tse chitja bakeng sa merero ea botle.

  1. < sehlopha sa tafole = "tafole e moeling oa tafole" >
  2. </tafole>
# Lebitso la pele Fane Username
1 Tšoaea Otto @mdo
Tšoaea Otto @getbootstrap
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter

4. Tafole e khutsitseng

Etsa hore litafole tsa hau li kopane ho feta ka ho eketsa .table-condensedsehlopha ho khaola lisele tsa tafole ka halofo (ho tloha ho 8px ho isa ho 4px).

  1. < sehlopha sa tafole = "table table-condensed" >
  2. </tafole>
# Lebitso la pele Fane Username
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter

5. Li kopanye kaofela!

Ikutloe u lokolohile ho kopanya lihlopha life kapa life tsa litafole ho fihlela chebahalo e fapaneng ka ho sebelisa litlelase life kapa life tse fumanehang.

  1. < sehlopha sa tafole = "tafole e nang le methalo e nang le moeli oa tafole e khutsufalitsoeng" >
  2. ...
  3. </tafole>
Mabitso a felletseng
# Lebitso la pele Fane Username
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter

Flexible HTML le CSS

Karolo e ntle ka ho fetisisa mabapi le liforomo ho Bootstrap ke hore lintho tsohle tse kentsoeng le litaolo tsa hau li shebahala li le ntle ho sa tsotelehe hore na u li haha ​​joang ka har'a letšoao la hau. Ha ho hlokahale HTML e sa hlokahaleng, empa re fana ka lipaterone bakeng sa ba e hlokang.

Meaho e rarahaneng haholoanyane e tla le litlelase tse hlakileng le tse ka senyehang bakeng sa ho etsa setaele habonolo le ho tlama liketsahalo, kahoo o tla u thusa mohatong o mong le o mong.

Mehaho e mene e kenyelelitsoe

Bootstrap e tla le tšehetso bakeng sa mefuta e mene ea meralo ea liforomo:

  • E otlolohileng (ea kamehla)
  • Batla
  • E mocheng
  • E tshekaletseng

Mefuta e fapaneng ea meralo ea liforomo e hloka liphetoho tse itseng ho markup, empa litsamaiso ka botsona li sala li sebetsa ka mokhoa o ts'oanang.

Laola linaha le tse ling

Liforomo tsa Bootstrap li kenyelletsa setaele bakeng sa taolo eohle ea liforomo tse kang ho kenya, mongolo, le khetho eo u ka e lebellang. Empa e boetse e tla le likarolo tse 'maloa tsa tloaelo joalo ka likenyelletso tse kentsoeng le tse reriloeng esale pele le tšehetso bakeng sa manane a li-checkbox.

Linaha tse kang phoso, temoso, le katleho li kenyelelitsoe bakeng sa mofuta o mong le o mong oa taolo ea foromo. Hape ho kenyelelitsoe mekhoa ea li-control tse holofetseng.

Mefuta e mene ea liforomo

Bootstrap e fana ka li-markup le mekhoa e bonolo bakeng sa mefuta e mene ea mefuta e tloaelehileng ea webo.

Lebitso Sehlopha Tlhaloso
E otlolohileng (ea kamehla) .form-vertical (ha e hlokehe) Litaolo tse behiloeng, tse ka ho le letšehali
E mocheng .form-inline Leibole e tsepameng ka ho le letšehali le li-control tsa li-inline-block bakeng sa setaele se kopaneng
Batla .form-search Mongolo o pota-potiloeng bakeng sa mokhoa o tloaelehileng oa ho batla
E tshekaletseng .form-horizontal Lileibole tse phaphametseng ka ho le letšehali, tse tsepameng ka ho le letona moleng o tšoanang le oa litaolo

Liforomo tsa mohlala tse sebelisang li-control tsa liforomo feela, ha ho na matšoao a eketsehileng

Foromo ea motheo

Lisebelisoa tse bohlale le tse bobebe ntle le matšoao a eketsehileng.

Mohlala oa mongolo oa thuso oa boemo ba block mona.

  1. < sehlopha sa foromo = "hantle" >
  2. <label> Lebitso la label </label>
  3. <input type = "text" class = "span3" placeholder = " Ngola ntho e itseng..." >
  4. <span class = "help-block" > Mohlala oa mongolo oa thuso oa boemo ba block mona. </span>
  5. <label class = "checkbox" >
  6. < mofuta oa ho kenya = "checkbox" > Nchebe
  7. </ label>
  8. < mofuta oa konopo = "submit" class = "btn" > Kenya </button>
  9. </ form>

Batla foromo

Eketsa .form-searchho foromo le .search-queryho input.

  1. < sehlopha sa mofuta = "batlisisa hantle" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Batla </button>
  4. </ form>

Foromo ea moleng

Eketsa .form-inlineho finesse tekamano e otlolohileng le sebaka sa taolo ea liforomo.

  1. <form class = "hantle foromo-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Imeile" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Nkgopole
  6. </ label>
  7. < mofuta oa konopo = "submit" class = "btn" > Kena </button>
  8. </ form>

Mefuta e otlolohileng

Ka ho le letona ho bonts'itsoe li-control tsa kamehla tseo re li tšehetsang. Lenane le nang le marumo ke lena:

  • mongolo (mongolo, phasewete, imeile, joalo-joalo)
  • lebokose la ho hlahloba
  • seea-le-moea
  • khetha
  • khethang ho tsona tse ngata
  • ho kenya faele
  • textarea

Ntle le mongolo oa freeform, tlhahiso efe kapa efe e thehiloeng ho mongolo oa HTML5 e hlaha joalo.

Mehlala ea mohlala

Ha ho nahanoa ka sebopeho sa sebopeho sa mohlala se kaholimo, mona ke letšoao le amanang le sehlopha sa pele sa ho kenya le ho laola. The .control-group, .control-label, le .controlslitlelase kaofela lia hlokahala bakeng sa setaele.

  1. <form class = "form-horizontal" >
  2. <setsi sa masimo>
  3. < sengolwa> Sengolwa </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Kenyo ya mongolo </label>
  6. <div class = "taolo" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Mongolo wa thuso o tshehetsang </p>
  9. </ div>
  10. </ div>
  11. </ fieldset>
  12. </ form>

Foromo ea taolo e bolela

disabledBootstrap e na le mekhoa ea ho tsepamisa maikutlo le linaha tse tšehelitsoeng ke sebatli . Re tlosa Webkit ea kamehla outlineebe re kenya a box-shadowsebakeng sa eona bakeng sa :focus.


Netefatso ea foromo

E boetse e kenyelletsa mekhoa ea ho netefatsa liphoso, litemoso, le katleho. Ho e sebelisa, eketsa sehlopha sa liphoso sebakeng se potolohileng .control-group.

  1. <fieldset
  2. class = "phoso ea sehlopha sa taolo" >
  3. </ fieldset>
Boleng bo bong mona
Ho ka etsahala hore ebe ho na le phoso
Ka kopo, lokisa phoso
Woohoo!
Woohoo!

Ho eketsa taolo ea liforomo

Etsa esale pele 'me u kenye letsoho

Lihlopha tsa ho kenya—tse nang le mongolo o kentsoeng kapa o reriloeng—li fana ka tsela e bonolo ea ho fana ka moelelo o eketsehileng oa seo u se ngotseng. Mehlala e metle e kenyelletsa letšoao la @ bakeng sa mabitso a basebelisi ba Twitter kapa $ bakeng sa lichelete.


Li-checkbox le liea-le-moea

Ho fihla ho v1.4, Bootstrap e ne e hloka letšoao le eketsehileng ho potoloha mabokose a tlhahlobo le liea-le-moea ho li beha. Joale, ke taba e bonolo ea ho pheta <label class="checkbox">se phuthelang <input type="checkbox">.

Mabokose a marang-rang le liea-le-moea le tsona lia tšehetsoa. Eketsa feela .inlineho efe .checkboxkapa efe kapa .radioo qetile.


Liforomo tse ka har'a marang-rang 'me u li kenye / u li ekise pele

Ho sebelisa lintho tse kentsoeng esale pele kapa tse hlomathisang ka mokhoa o inline, etsa bonnete ba hore u beha .add-onle inputmoleng o le mong, ntle le libaka.


Mongolo oa thuso oa foromo

Ho kenya mongolo oa thuso bakeng sa lintho tseo u li ngotseng ka foromo, kenyelletsa mongolo oa thuso oa inline <span class="help-inline">kapa mongolo oa thuso ka <p class="help-block">mor'a ntho e kentsoeng.

Sebelisa .span*litlelase tse tšoanang ho tsoa ho grid system bakeng sa boholo ba ho kenya.

U kanna ua sebelisa litlelase tse sa fetoheng tse sa bontsheng marang-rang, tse ikamahanyang le mekhoa e arabelang ea CSS, kapa akhaonto ea mefuta e fapaneng ea taolo (mohlala, inputkhahlano le select).

@

Mona ke molaetsa oa thuso

.00
Mantsoe a mang a thuso ke ana
$ .00

Tlhokomeliso: Li-labels li pota-potile likhetho tsohle bakeng sa libaka tse kholoanyane tsa ho tobetsa le foromo e sebetsang haholoanyane.

Konopo sehlopha="" Tlhaloso
btn Konopo e tloaelehileng ea bohlooho e nang le gradient
btn btn-primary E fana ka boima bo eketsehileng ba pono mme e supa ketso ea mantlha ka har'a sete ea likonopo
btn btn-info E sebelisoa e le mokhoa o mong oa mefuta e sa tšoaneng
btn btn-success E bontsha ketso e atlehileng kapa e ntle
btn btn-warning E supa tlhokomeliso e lokelang ho nkuoa ka ketso ena
btn btn-danger E supa ketso e kotsi kapa e ka bang mpe
btn btn-inverse Konopo e 'ngoe e bohlooho bo lefifi, e sa tlamelletsoeng ketsong ea semantic kapa tšebeliso

Likonopo tsa liketso

E le kopano, likonopo li lokela ho sebelisoa feela bakeng sa liketso ha li-hyperlink li lokela ho sebelisoa bakeng sa lintho. Mohlala, "Download" e lokela ho ba konopo ha "ts'ebetso ea morao-rao" e lokela ho ba sehokelo.

Mefuta ea likonopo e ka sebelisoa ho eng kapa eng e nang le .btnsehlopha se sebelisitsoeng. Leha ho le joalo, ka tloaelo u tla batla ho sebelisa tsena feela <a>le <button>likarolo.

Sebapali se lumellanang

IE9 ha e jale li-gradients tsa bokamorao likhutlong tse chitja, kahoo rea li tlosa. E amanang, IE9 e jankifies buttonlikarolo tse holofetseng, e fetolela mongolo o moputsoa ka moriti o mobe oa mongolo oo re ke keng ra o lokisa.

Mefuta e mengata

U batla likonopo tse kholoanyane kapa tse nyane? Eketsa .btn-large, .btn-small, kapa .btn-minibakeng sa mefuta e 'meli e eketsehileng.


Boemo ba bokooa

Bakeng sa likonopo tse holofetseng, eketsa .disabledsehlopha ho lihokelo le disabledtšobotsi ea <button>likarolo.

Sehokelo sa mantlha Sehokelo

Hlokomela! Re sebelisa .disablede le sehlopha sa lisebelisoa mona, se ts'oanang le .activesehlopha se tloaelehileng, kahoo ha ho hlokahale prefix.

Sehlopha se le seng, li-tag tse ngata

Sebelisa .btntlelase ho <a>, <button>, kapa <input>element.

Sehokelo
  1. <a class = "btn" href = ""> Sehokelo </a> _
  2. <button class = "btn" type = "submit" >
  3. Konopo
  4. </ konopo>
  5. <input class = "btn" type = "button"
  6. value = "Kenyo" >
  7. <input class = "btn" type = "submit"
  8. value = "Romela" >

E le mokhoa o motle ka ho fetisisa, leka ho tsamaisana le moelelo oa taba ho etsa bonnete ba hore o tsamaisana le phetolelo ea sebatli. Haeba u na le input, sebelisa <input type="submit">konopo ea hau.

  • khalase ea setšoantšo
  • letšoao-mmino
  • ho batla litšoantšo
  • letšoao-enfelopo
  • icon-pelo
  • letšoao-naleli
  • aekhone-naledi e se nang letho
  • mosebelisi oa setšoantšo
  • setšoantšo-filimi
  • icon-th-kholo
  • letšoao-th
  • letšoao-th-lethathamo
  • icon-ok
  • aekhone-tlosa
  • aekhone-atometsa
  • aekhone-tsoom-out
  • letšoao la ho tima
  • letšoao-lets'oao
  • icon-cog
  • letšoao-litšila
  • letšoao-lehae
  • icon-file
  • nako ea letšoao
  • setšoantšo-tsela
  • icon-download-alt
  • icon-jarolla
  • aekhone-upload
  • letšoao-inbox
  • sedikadikwe sa diaekhone
  • letšoao-pheta
  • aekhone-ntlafaletsa
  • letšoao-lethathamo-alt
  • letšoao-lock
  • letšoao-folakha
  • li-icon-headphones
  • aekhone-bolumo-theoha
  • letšoao-bolumo-theoha
  • ho phahamisa molumo oa setšoantšo
  • icon-qrcode
  • letšoao-barcode
  • letšoao-tag
  • li-icon-tag
  • buka ea litšoantšo
  • letšoao-bookmark
  • letšoao-khatiso
  • khamera ea setšoantšo
  • letšoao-fonte
  • letšoao-botenya
  • letšoao-italic
  • bophahamo ba setšoantšo
  • aekhone-sengoloa-bophara
  • aekhone-lekanya-ka ho le letshehadi
  • letšoao-align-bohareng
  • aekhone-lekanya-ka ho le letona
  • icon-align-justify
  • lethathamo la litšoantšo
  • letšoao-indent-le letšehali
  • letšoao-indent-le letona
  • icon-facetime-video
  • setšoantšo-setšoantšo
  • letšoao-pentšele
  • letšoao-mapa-lesupa
  • aekhone-fetola
  • letšoao-tint
  • icon-edit
  • letšoao-karolelano
  • lekola-aekhone
  • letšoao-tsamaiso
  • letšoao-mohato-morao
  • letšoao-kapele-morao
  • letšoao-morao
  • papali ea litšoantšo
  • aekhone-khefutso
  • letšoao-emisa
  • letšoao-pele
  • letšoao-pele-pele
  • letšoao-ho ea pele
  • aekhone-eject
  • letšoao-chevron-le letšehali
  • icon-chevron-ka ho le letona
  • letšoao-plus-letšoao
  • letšoao-tlosa-letshwao
  • letšoao-tlosa-letshwao
  • letšoao-ok-sign
  • letšoao-potso-letšoao
  • letšoao-info-letšoao
  • icon-screenshot
  • lesakana-tlosa-letshwao
  • sedikadikwe sa icon-ok
  • sedikadikwe-thibelo ya letshwao
  • letšoao-motsu-le letšehali
  • letšoao-motsu-le letona
  • letšoao-motsu-up
  • letšoao-motsu-tlase
  • letšoao-share-alt
  • aekhone-resize-tlale
  • icon-resize-e nyane
  • icon-plus
  • aekhone-tlosa
  • letšoao la linaleli
  • letshwao-mokgotso-letshwao
  • letšoao-mpho
  • letšoao-lekhasi
  • letšoao-mollo
  • lets'oao-le-hlo-le-hlare
  • icon-ehlo-close
  • letšoao-temoso-ts'oao
  • letšoao-sefofane
  • letšoao-khalendara
  • letšoao-random
  • letšoao-maikutlo
  • letšoao-magnet
  • letšoao-chevron-up
  • letšoao-chevron-down
  • letšoao-retweet
  • kariki-kariki ya ho reka
  • icon-folder-koala
  • foldareng-e butsoe
  • aekhone-resize-thetical
  • aekhone-resize-ka-rapama
  • aekhone-hdd
  • letšoao-bullhorn
  • letšoao-bell
  • letšoao-setifikeiti
  • letshwao-thumb-up
  • letšoao-thomb-down
  • letšoao-letsoho-le letona
  • letšoao-letsoho-le letšehali
  • letšoao-letsoho
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-le letšehali
  • lets'oao-sakana-le-motsu-holimo
  • letšoao-sedikadikwe-motsu-tlase
  • icon-globe
  • sekoahelo sa setšoantšo
  • icon-mesebetsi
  • setlhoa-tshwantsho
  • letšoao-briefcase
  • icon-sekrineng se felletseng

E hahiloe joalo ka sprite

Ho e-na le ho etsa hore setšoantšo se seng le se seng e be kopo e eketsehileng, re li hlophisitse hore e be sprite-sehlopha sa litšoantšo faeleng e le 'ngoe e sebelisang CSS ho beha litšoantšo ka background-position. Ona ke ona mokhoa oo re o sebelisang ho Twitter.com mme o re sebelitse hantle.

Lihlopha tsohle tsa litšoantšo li hlophisitsoe pele .icon-bakeng sa sebaka se nepahetseng sa mabitso le scoping, joalo ka likarolo tse ling tsa rona. Sena se tla thusa ho qoba likhohlano le lisebelisoa tse ling.

Li-Glyphicons li re file monyetla oa ho sebelisa Halflings tse behiloeng ka har'a sesebelisoa sa rona sa mohloli o bulehileng ha feela re fana ka sehokelo le mokitlane mona ho litokomane. Ka kopo nahana ho etsa se tšoanang mererong ea hau.

Mokhoa oa ho sebelisa

Bootstrap e sebelisa <i>letšoao bakeng sa litšoantšo tsohle, empa ha li na sehlopha sa linyeoe-ke sehlomathiso se arolelanoang feela. Ho e sebelisa, beha khoutu e latelang hoo e ka bang kae kapa kae:

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

Ho boetse ho na le mefuta e fumanehang bakeng sa litšoantšo tse inverted (tse tšoeu), tse lokiselitsoeng ka sehlopha se le seng:

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

Ho na le lihlopha tse 140 tseo u ka khethang ho tsona bakeng sa litšoantšo tsa hau. Kenya feela <i>tag e nang le litlelase tse nepahetseng 'me u se u behiloe. U ka fumana lenane le felletseng ho sprites.less kapa hona mona tokomaneng ena.

Hlokomela! Ha u sebelisa ka thoko ho likhoele tsa mongolo, joalo ka likonopo kapa lihokelo tsa nav, etsa bonnete ba hore u siea sebaka ka mor'a <i>tag bakeng sa sebaka se nepahetseng.

Sebelisa linyeoe

Litšoantšo li ntle, empa motho o ne a ka li sebelisa hokae? Mehopolo e 'maloa ke ena:

  • E le lipono bakeng sa navigation ea bara ba hau
  • Bakeng sa navigation e tsamaisoang ke li-icon
  • Bakeng sa likonopo ho thusa ho fetisa moelelo oa ketso
  • E na le likhokahano tsa ho arolelana litaba sebakeng sa mosebelisi

Ha e le hantle, kae kapa kae moo u ka behang <i>tag, u ka beha letšoao.

Mehlala

Li sebelise ka likonopo, lihlopha tsa likonopo bakeng sa toolbar, navigation, kapa ho kenya liforomo tse reriloeng esale pele.