Bootstrap

Base CSS

Pamusoro pechikafu, zvinhu zveHTML zvekutanga zvakashongedzwa uye zvinokwidziridzwa nemakirasi akawedzera kupa kutsva, kuenderana kutaridzika uye kunzwa.

Typography Misoro, ndima, zvinyorwa, uye zvimwe inline mhando zvinhu

Misoro & body copy

Typographic scale

Iyo yese typographic grid yakavakirwa pane maviri Madiki akasiyana mune yedu variables.less faira: @baseFontSizeuye @baseLineHeight. Yekutanga ndiyo base font-saizi inoshandiswa mukati mese uye yechipiri ndiyo base mutsetse-urefu.

Isu tinoshandisa izvo zvinosiyanisa, uye mamwe masvomhu, kugadzira miganho, padding, uye mutsara-urefu hwemhando yedu yese nezvimwe.

Muenzaniso body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id id nibh 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.

h1. Musoro 1

h2. Musoro 2

h3. Musoro 3

h4. Musoro wechi4

h5. Musoro 5
h6. Musoro 6

Kusimbisa, kero, uye chidimbu

Element Usage Optional
<strong> Zvekusimbisa chidimbu chezvinyorwa zvine zvakakosha Hapana
<em> Zvekusimbisa chidimbu chemavara nekunetsekana Hapana
<abbr> Inopeta zvipfupiso uye acronyms kuratidza shanduro yakawedzerwa pane hover

Sanganisira titlehunhu hwaungasarudza pamavara akawedzerwa

Shandisa .initialismkirasi kune zvipfupiso zvemavara makuru.
<address> Kuti uwane ruzivo rwekufonera tateguru wayo ari pedyo kana boka rose rebasa Chengetedza fomati nekugumisa mitsetse yese ne<br>

Kushandisa kusimbisa

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, pharetra augue.

Cherechedza: Inzwa wakasununguka kushandisa <b>uye <i>muHTML5, asi kushandiswa kwavo kwachinja zvishoma. <b>inoitirwa kuratidza mazwi kana mitsara pasina kuendesa kukosha kwekuwedzera asi <i>kazhinji iri yezwi, tekinoroji mazwi, nezvimwe.

Enzaniso kero

Heino mienzaniso miviri yekuti <address>tag ingashandiswa sei:

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

Mienzaniso zvipfupiso

Zvidimburiso zvine titlehunhu zvine mwenje wepasi pebhodha uye chekubatsira pane hover. Izvi zvinopa vashandisi chiratidzo chekuwedzera chimwe chinhu chicharatidzwa pane hover.

Wedzera initialismkirasi kuchidimbu kuti uwedzere typographic kuwirirana nekupa iyo diki diki saizi yemavara.

HTML ndicho chinhu chakanakisa kubva pachingwa chakachekwa.

Muchidimbu chezwi rokuti attr .

Blockquotes

Element Usage Optional
<blockquote> Block-level element yekutora zvemukati kubva kune imwe sosi

Wedzera citehunhu hwekwakabva URL

Shandisa .pull-leftuye .pull-rightmakirasi ezvisarudzo zvakayangarara
<small> Optional element yekuwedzera inotarisana nemushandisi, kazhinji munyori ane zita rebasa Isa iyo <cite>yakatenderedza zita kana zita rekwakabva

Kusanganisira blockquote, peta <blockquote>chero HTML se quote. Kuti uwane mazwi akatwasuka tinokurudzira a <p>.

Sanganisira chinhu chinosarudzika <small>kuti utaure kwaunobva uye iwe uchawana em dash &mdash;pamberi payo nekuda kwemaitiro.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </ p>
  3.   <mudiki> Mumwe munhu ane mukurumbira </ mudiki>
  4. </blockquote>

Muenzaniso blockquotes

Default blockquotes akanyorwa seizvi:

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

Mumwe ane mukurumbira muBody yebasa

Kuyangarara yako blockquote kurudyi, wedzera class="pull-right":

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

Mumwe ane mukurumbira muBody yebasa

Lists

Zvisina kurairwa

<ul>

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

Ordered

<ol>

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

Tsanangudzo

<dl>

Tsanangudzo mazita
Rondedzero yerondedzero yakakwana pakutsanangura mazwi.
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.

Tsanangudzo yakachinjika

<dl class="dl-horizontal">

Tsanangudzo mazita
Rondedzero yerondedzero yakakwana pakutsanangura mazwi.
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, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Musoro! Tsanangudzo dzakachinjika dzinozodimburira mazwi akareba zvekusakwana muchikamu chekuruboshwe gadzirisa text-overflow. Munzvimbo dzakatetepa dzekutarisa, ivo vanozochinja kune default stacked marongero.

Code Inline uye block kodhi snippets

Inline

Putira zvidimbu zvemukati zvekodhi ne <code>.

  1. Semuyenzaniso , < code> chikamu </ code > inofanira kuputirwa se inline .

Basic block

Shandisa <pre>kune akawanda mitsara yekodhi. Ita shuwa kutiza mabhuraketi chero emakona ari mukodhi kuti ukwanise kuburitsa.

<p>Eyemuenzaniso mavara pano...</p>

  1. <pre>
  2.   <p>Eyemuenzaniso mavara pano...</p>
  3. </pre>

Cherechedza: Iva nechokwadi chekuchengeta kodhi mukati <pre>memategi pedyo nekuruboshwe sezvinobvira; ichapa ma tabo ese.

Iwe unogona kusarudza kuwedzera .pre-scrollablekirasi iyo inoisa max-urefu hwe350px uye inopa y-axis scrollbar.

Google Pretify

Tora <pre>chinhu chimwe uye wedzera makirasi maviri esarudzo ekuwedzera shanduro.

  1. <p> Muenzaniso mavara pano... </p>
  1. <pre class = "prettyprint 
  2.      linenum" >
  3.   <p>Eyemuenzaniso mavara pano...</p>
  4. </pre>

Dhawunirodha google-code-prettify uye woona iyo readme yekushandisa sei.

Matafura Kune, iwe wakazvifungidzira, tabular data

Tafura markup

Tag Tsanangudzo
<table> Kupeta chinhu chekuratidza data mune tabular fomati
<thead> Chinhu chemudziyo wemitsara yemusoro wetafura ( <tr>) kuisa mitsara yetafura
<tbody> Container element yetafura mitsetse ( <tr>) mumutumbi wetafura
<tr> Container element yeseti yematafura maseru ( <td>kana <th>) anooneka pamutsara mumwe
<td> Default table cell
<th> Yakakosha tafura sero yekoramu (kana mutsara, zvichienderana nehukuru uye kuiswa) mavara
Anofanirwa kushandiswa mukati me<thead>
<caption> Tsananguro kana pfupiso yezvakabatwa netafura, kunyanya inobatsira kuvaverengi vescreen 
  1. <tafura>
  2.   <musoro>
  3.     <tr>
  4.       <th> … </th>
  5.       <th> … </th>
  6.     </ tr>
  7.   </ musoro>
  8.   <tbody>
  9.     <tr>
  10.       <td> … </td>
  11.       <td> … </td>
  12.     </ tr>
  13.   </ tbody>
  14. </ table>

Tafura sarudzo

Zita Kirasi Tsanangudzo
Default Hapana Hapana masitaera, angori makoramu nemitsara
Basic .table Mitsetse yakachinjika chete pakati pemitsara
Bordered .table-bordered Inotenderera makona uye inowedzera muganhu wekunze
Zebra-stripe .table-striped Inowedzera grey kumashure kwemavara kune zvisingaite (1, 3, 5, nezvimwewo)
Condensed .table-condensed Inocheka yakatwasuka padding nepakati, kubva pa8px kusvika 4px, mukati mezvese tduye thzvinhu

Matafura emuenzaniso

1. Default table styles

Matafura anongogadzirwa otomatiki aine mabhodha mashoma kuti ave nechokwadi chekuverengeka uye kuchengetedza chimiro. Ne 2.0, .tablekirasi inodiwa.

  1. <tafura yekirasi = "tafura" > 
  2.   …
  3. </ table>
# Zita rokutanga Zita rokupedzisa Username
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @twitter

2. Tafura ine mitsetse

Wana shoo shoma nematafura ako nekuwedzera mbizi-striping-ingowedzera .table-stripedkirasi.

Cherechedza: Matafura ane mitsetse anoshandisa :nth-childCSS selector uye haisi kuwanikwa muIE7-IE8.

  1. <tafura yekirasi = "tafura tafura-mitsetse" > 
  2.   …
  3. </ table>
# Zita rokutanga Zita rokupedzisa Username
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @twitter

3. Tafura yemuganhu

Wedzera miganho yakatenderedza tafura yese uye makona akatenderedzwa nekuda kwekunakisa.

  1. <tafura yekirasi = "tafura tafura-yakaganhurwa" > 
  2.   …
  3. </ table>
# Zita rokutanga Zita rokupedzisa Username
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter

4. Tafura yakanyungudutswa

Ita kuti matafura ako awedzere compact nekuwedzera .table-condensedkirasi kutema tafura cell padding nehafu (kubva pa8px kusvika 4px).

  1. <tafura yekirasi = "tafura yetafura-yakaderedzwa" > 
  2.   …
  3. </ table>
# Zita rokutanga Zita rokupedzisa Username
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter

5. Vasanganise vose!

Inzwa wakasununguka kusanganisa chero emakirasi etafura kuti uwane kutaridzika kwakasiyana nekushandisa chero anowanikwa makirasi.

  1. <tafura kirasi = "tafura tafura-mitsetse tafura-yakaganhurwa tafura-yakapfupikiswa" > 
  2.   ...
  3. </ table>
Zita rizere
# Zita rokutanga Zita rokupedzisa Username
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter

Mafomu

Flexible HTML uye CSS

Chikamu chakanakisa nezvemafomu muBootstrap ndechekuti zvese zvaunopinza uye zvinodzora zvinotaridzika zvakanaka zvisinei kuti unozvivaka sei mumarkup yako. Hapana yakanyanyisa HTML inodiwa, asi isu tinopa mapatani kune avo vanoida.

Mamwe magadzirirwo akaomesesa anouya nemakirasi akapfupika uye anogona scalable e nyore kutaera uye kusungirirwa kwechiitiko, saka unofukidzwa padanho rega rega.

Zvirongwa zvina zvakabatanidzwa

Bootstrap inouya nerutsigiro rwemhando ina dzemafomu marongerwo:

  • Yakamira (default)
  • Search
  • Inline
  • Horizontal

Mhando dzakasiyana dzemagadzirirwo emafomu dzinoda shanduko kune markup, asi zvinodzora pachazvo zvinoramba uye zviite zvakafanana.

Kudzora nyika uye nezvimwe

Mafomu eBootstrap anosanganisira masitayipi eese mabhesi fomu ekudzora senge kupinza, textarea, uye sarudza iwe yaungatarisira. Asi zvakare inouya nenhamba yezvimiro zvetsika senge zvakaiswa uye zvakafanorongedzerwa mapindiro uye tsigiro yemazita emabhokisi ekutarisa.

Nyika dzakaita senge kukanganisa, yambiro, uye kubudirira zvinosanganisirwa kune yega yega yemhando yekudzora fomu. Zvinosanganisirwawo masitayera ezvidzori zvakaremara.

Mhando ina dzemafomu

Bootstrap inopa yakapusa markup uye masitaera mana masitaera eakajairwa mafomu ewebhu.

Zita Kirasi Tsanangudzo
Yakamira (default) .form-vertical (hazvidiwi) Mapepa akaturikidzana, akaiswa kuruboshwe pamusoro pezvinodzora
Inline .form-inline Label yakatarisana nekuruboshwe uye inline-block zvidhiraivho zve compact style
Search .form-search Yakawedzerwa-yakatenderedzwa mavara ekuisa kune yakajairika kutsvaga aesthetic
Horizontal .form-horizontal Yangarara kuruboshwe, kurudyi-kurudyi mavara pamutsetse wakafanana sezvidzori

Mafomu emuenzaniso anoshandisa zvidzoreso zvemafomu chete, hapana imwe markup

Basic form

Smart uye lightweight defaults pasina imwe markup.

Muenzaniso we block-level mavara ekubatsira pano.

  1. <form kirasi = "zvakanaka" > 
  2.   <label> Zita rezita </ ​​label>
  3.   <input type = "text" class = "span3" placeholder = " Taipa chimwe chinhu..." >   
  4.   <span class = "help-block" > Muenzaniso block-level rubatsiro runyorwa pano. </ span> 
  5.   <label class = "checkbox" > 
  6.     <input type = "checkbox" > Nditarise 
  7.   </ label>
  8.   <button type = "submit" class = "btn" > Tumira </button>  
  9. </ fomu>

Tsvaga fomu

Wedzera .form-searchkune fomu uye .search-querykune input.

  1. <form kirasi = "zvakanaka fomu-kutsvaga" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Tsvaga </button>  
  4. </ fomu>

Inline fomu

Wedzera .form-inlineku faini kurongeka kwakatwasuka uye nzvimbo yezvidzoro zvefomu.

  1. <form kirasi = "zvakanaka fomu-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Email" >   
  3.   <input type = "password" class = "input-small" placeholder = "Password" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Ndirangarirewo 
  6.   </ label>
  7.   <button type = "submit" class = "btn" > Pinda </button>  
  8. </ fomu>

Horizontal mafomu

Kunoratidzwa kurudyi ndiwo ese akajairika fomu anodzora atinotsigira. Heino rondedzero ine mabulleted:

  • zvinyorwa zvinyorwa (zvinyorwa, password, email, nezvimwewo)
  • checkbox
  • redhiyo
  • sarudza
  • akawanda sarudza
  • file input
  • textarea

Pamusoro pezvinyorwa zvemahara, chero HTML5 mavara-yakavakirwa mameseji anoita sekudaro.

Muenzaniso markup

Tichipihwa muenzaniso wepamusoro dhizaini yefomu, heino markup yakabatana neyekutanga yekupinza uye kutonga boka. Iyo .control-group,, .control-labeluye .controlsmakirasi ese anodiwa pakuita styling.

  1. <form class = "form-horizontal" > 
  2.   <fieldset>
  3.     <legend> Chinyorwa chengano </legend>
  4.     <div class = "control-group" > 
  5.       <label class = "control-label" ye = "input01" > Kuisa mavara </label>  
  6.       <div class = "controls" > 
  7.         <input type = "text" class = "input-xlarge" id = "input01" >   
  8.         <p class = "help-block" > Mameseji erubatsiro anotsigira </p> 
  9.       </ div>
  10.     </ div>
  11.   </fieldset>
  12. </ fomu>

Form control inoti

Bootstrap inoratidzira masitaera ebrowser-inotsigirwa yakatarisana uye disablednyika. Isu tinobvisa iyo default Webkit outlineuye toisa a box-shadowpanzvimbo yayo ye :focus.

Kusimbisa fomu

Inosanganisirawo zvitaera zvekusimbisa zvekukanganisa, yambiro, uye kubudirira. Kuti ushandise, wedzera kirasi yekukanganisa kune yakatenderedza .control-group.

  1. <fieldset
  2.   class = "control-group error" >
  3.   …
  4. </fieldset>
Zvimwe zvakakosha pano
Pane chinhu chinogona kunge chisina kumira zvakanaka
Ndokumbira ugadzirise kukanganisa
Woohoo!
Woohoo!

Kuwedzera kudzora fomu

Gadzirira & wedzera zvinopinda

Mapoka ekuisa — ane mavara akaiswa kana akafanorongwa — anopa nzira iri nyore yekupa mamwe mamiriro ezvaunoisa. Mienzaniso mikuru inosanganisira iyo @ sign ye Twitter usernames kana $ yemari.

Checkboxes nemaredhiyo

Kusvika kuv1.4, Bootstrap yaida yakawedzera markup yakatenderedza mabhokisi ekutarisa nemaredhiyo kuti azviise. Zvino, inyaya yakapusa yekudzokorora <label class="checkbox">iyo inoputira iyo <input type="checkbox">.

Inline cheki mabhokisi uye redhiyo zvinotsigirwa zvakare. Ingo wedzera .inlinekune chero .checkboxkana .radiouye wapedza.

Inline mafomu uye wedzera / gadzirira

Kuti ushandise prepend kana kuwedzera mapimendi mune inline fomu, iva nechokwadi chekuisa .add-onuye inputpamutsetse mumwechete, pasina nzvimbo.

Mameseji ekubatsira fomu

Kuti uwedzere mameseji erubatsiro ezvaunopinda mufomu, sanganisira mavara erubatsiro emukati ane <span class="help-inline">kana mameseji erubatsiro ane <p class="help-block">mushure mechinhu chekuisa.

Shandisa .span*makirasi mamwe chete kubva kugridi system kune masaizi ekuisa.

Iwe unogona zvakare kushandisa makirasi akamira asina mepu kune grid, chinja kune inoteerera CSS masitayipi, kana account yemhando dzakasiyana dzekutonga (semuenzaniso, inputvs. select).

@

Heano mamwe mavara ekubatsira

.00
Heano mamwe mavara erubatsiro
$ .00

Cherechedza: Mabhii anotenderedza sarudzo dzese dzenzvimbo dzakakura dzekudzvanya uye fomu rinoshandiswa.

Mabhatani

Bhatani kirasi="" Tsanangudzo
btn Bhatani regrey rakajairwa rine gradient
btn btn-primary Inopa humwe huremu hwekuona uye inoratidza chiitiko chekutanga museti yemabhatani
btn btn-info Inoshandiswa seimwe nzira kune yakasarudzika masitaera
btn btn-success Zvinoratidza chiito chakabudirira kana chakanaka
btn btn-warning Inoratidza kuchenjerera kunofanira kutorwa nechiito ichi
btn btn-danger Zvinoratidza chiitiko chine njodzi kana chingangove chakaipa
btn btn-inverse Rimwe bhatani rakasviba grey, risina kusungirirwa kune semantic chiito kana kushandiswa

Mabhatani ezviito

Semusangano, mabhatani anofanirwa kungoshandiswa kuita zviito nepo hyperlink ichizoshandiswa pazvinhu. Semuenzaniso, "Kudhawunirodha" kunofanirwa kunge kuri bhatani nepo "zvichangobva kuitika" zvichifanira kunge zviri chinongedzo.

Mabhatani masitayera anogona kuiswa kune chero chinhu chine .btnkirasi yakashandiswa. Nekudaro, kazhinji iwe unozoda kushandisa izvi kune chete <a>uye <button>zvinhu.

Cross browser kuenderana

IE9 haichekere magradients pamakona akatenderedzwa, saka tinoibvisa. Zvinechekuita, IE9 inokanganisa buttonzvinhu zvakavharwa, ichipa mavara egrey ane akashata mavara-mumvuri watisingakwanise kugadzirisa.

Saizi dzakawanda

Unoda mabhatani makuru kana madiki? Wedzera .btn-large, .btn-small, kana .btn-minikune mamwe maviri saizi.


Disabled state

Zvemabhatani akaremara, wedzera .disabledkirasi kune zvinongedzo uye disabledhunhu <button>hwezvinhu.

Primary link Link

Musoro! Isu tinoshandisa .disabledsekirasi yekushandisa pano, yakafanana .activenekirasi yakajairika, saka hapana prefix inodiwa.

Kirasi imwe, ma tag akawanda

Shandisa .btnkirasi pane <a>, <button>, kana <input>chinhu.

Link 
  1. <a class = "btn" href = ""> Link </a> _  
  2. <button class = "btn" type = "submit" >  
  3.   Bhatani
  4. </ button>
  5. <input class = "btn" type = "bhatani"  
  6.          value = "Input" >
  7. <input class = "btn" type = "submit"  
  8.          value = "Tumira" >

Sekuita kwakanakisa, edza kuenzanisa chinhu chako mamiriro kuti uve nechokwadi chekufananidza muchinjiko-browser rendering. Kana uine input, shandisa <input type="submit">bhatani rako.

Icons Nenyasha inopihwa neGlyphicons

  • icon-girazi
  • icon-music
  • icon-search
  • icon-envelope
  • icon-moyo
  • icon-star
  • icon-nyeredzi-isina
  • icon-mushandisi
  • icon-firimu
  • icon-th-guru
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-bvisa
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-marara
  • icon-kumba
  • icon-file
  • icon-nguva
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-denderedzwa
  • icon-kudzokorora
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-mureza
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-bhuku
  • icon-bookmark
  • icon-print
  • icon-kamera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-urefu
  • icon-text-width
  • icon-align-kuruboshwe
  • icon-align-center
  • icon-align-kurudyi
  • icon-align-justify
  • icon-list
  • icon-indent-kuruboshwe
  • icon-indent-kurudyi
  • icon-facetime-vhidhiyo
  • icon-picture
  • icon-penzura
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-nhanho-kumashure
  • icon-fast-backward
  • icon-kumashure
  • icon-play
  • icon-pause
  • icon-stop
  • icon-mberi
  • icon-nekukurumidza-mberi
  • icon-nhanho-mberi
  • icon-eject
  • icon-chevron-kuruboshwe
  • icon-chevron-kurudyi
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-mubvunzo-chiratidzo
  • icon-info-sign
  • icon-screenshot
  • icon-bvisa-denderedzwa
  • icon-ok-denderedzwa
  • icon-ban-denderedzwa
  • icon-museve-kuruboshwe
  • icon-museve-kurudyi
  • icon-museve-up
  • icon-museve-pasi
  • icon-share-alt
  • icon-resize-full
  • icon-resize-diki
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-chipo
  • icon-leaf
  • icon-moto
  • icon-ziso-yakavhurika
  • icon-ziso-kuvhara
  • icon-yambiro-chiratidzo
  • icon-ndege
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magineti
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-ngoro
  • icon-folder-close
  • icon-folder-yakazaruka
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-chigunwe-kumusoro
  • icon-zvigunwe-pasi
  • icon-ruoko-kurudyi
  • icon-ruoko-kuruboshwe
  • icon-ruoko-kumusoro
  • icon-ruoko-pasi
  • icon-denderedzwa-museve-kurudyi
  • icon-denderedzwa-museve-kuruboshwe
  • icon-denderedzwa-museve-kumusoro
  • icon-denderedzwa-museve-pasi
  • icon-globe
  • icon-wrench
  • icon-mabasa
  • icon-sefa
  • icon-briefcase
  • icon-yakazara skrini

Yakavakwa se sprite

Panzvimbo pekuita kuti chiratidzo chega chega chive chikumbiro chekuwedzera, takazvibatanidza kuita sprite - boka remifananidzo mufaira rimwe rinoshandisa CSS kuisa mifananidzo ne background-position. Iyi ndiyo nzira imwe chete yatinoshandisa pa Twitter.com uye yatiitira zvakanaka.

Ese makirasi ezvidhori .icon-anotangwa neakakodzera mazita enzvimbo uye scoping, senge zvimwe zvinhu zvedu. Izvi zvichabatsira kudzivirira kusawirirana nemamwe maturusi.

Glyphicons yakatipa kushandisa maHalflings akaiswa mune yedu yakavhurika-sosi toolkit chero isu tichipa chinongedzo uye kiredhiti pano mune zvinyorwa. Ndapota funga kuita zvakafanana mumapurojekiti ako.

Kushandisa sei

Bootstrap inoshandisa <i>tag yezvidhori zvese, asi ivo havana kesi kirasi-chete yakagovaniswa prefix. Kuti ushandise, isa kodhi inotevera chero kupi zvako:

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

Kune zvakare masitaera anowanikwa kune inverted (chena) icons, akagadzirirwa nekirasi imwe yekuwedzera:

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

Kune 120 makirasi ekusarudza kubva kune ako icons. Ingo wedzera <i>tag ine makirasi akakodzera uye wagadzirira. Unogona kuwana runyoro rwakazara mu sprites.less kana ipo pano mugwaro rino.

Musoro! Paunenge uchishandisa parutivi tambo dzemavara, semabhatani kana nav zvinongedzo, ita shuwa yekusiya nzvimbo mushure me <i>tag yepakati yakakodzera.

Shandisa makesi

Icons yakanaka, asi munhu angaishandisa kupi? Heano mamwe mazano:

  • Sezvinoonekwa zvepasidebar navigation yako
  • Zvekungofamba-famba kunofambiswa nemifananidzo
  • Kuti mabhatani abatsire kuburitsa zvinoreva chiito
  • Nemanongedzo ekugovera mamiriro emushandisi kwekwaanosvika

Chaizvoizvo, chero kwaunogona kuisa <i>tag, unogona kuisa icon.

Mienzaniso

Ashandise mumabhatani, mapoka emabhatani eturubhu, kufamba, kana mamepu akafanorongwa.

Mushandisi

Refresh Buda Delete

Comment Settings More Info