Base CSS

Eo an-tampon'ny scaffolding, ny singa HTML fototra dia novolavolaina sy hatsaraina miaraka amin'ny kilasy azo itarina mba hanomezana endrika vaovao sy tsy miovaova.

Lohateny & kopia vatana

Skala typografika

Ny grids typografika manontolo dia mifototra amin'ny variable Less roa ao amin'ny rakitra variables.less: @baseFontSizesy @baseLineHeight. Ny voalohany dia ny haben'ny endri-tsoratra ampiasaina manerana ary ny faharoa dia ny haavon'ny tsipika fototra.

Mampiasa ireo fari-pahalalana ireo izahay, ary ny matematika sasany, mba hamoronana ny sisiny, ny padding, ary ny haavon'ny tsipika amin'ny karazana rehetra misy anay sy ny maro hafa.

Text body ohatra

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

Dika mitovy amin'ny vatana

Manaova fehintsoratra miavaka amin'ny fanampiana .lead.

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

h1. Lohateny 1

h2. Lohateny 2

h3. Lohateny 3

h4. Lohateny 4

h5. Lohahevitra 5
h6. Lohateny 6

Fanamafisana, adiresy ary fanafohezana

singa Fampiasana tsy voatery
<strong> Mba hanamafisana sombin-tsoratra misy zava- dehibe tsy misy
<em> Mba hanamafisana sombin-tsoratra misy adin -tsaina tsy misy
<abbr> Manarona fanafohezana sy fanafohezan-teny hanehoana ny dikan-teny miitatra amin'ny hover

Ampidiro ny titletoetra tsy voatery ho an'ny lahatsoratra miitatra

Ampiasao .initialismny kilasy ho an'ny fanafohezana lehibe.
<address> Mba hahazoana fampahalalana momba ny fifandraisana amin'ny razambeny akaiky indrindra na ny vondron'asa manontolo Tehirizo ny format amin'ny famaranana ny andalana rehetra amin'ny<br>

Mampiasa fanamafisana

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.

Fanamarihana: Aza misalasala mampiasa <b>sy <i>amin'ny HTML5, fa niova kely ny fampiasana azy. <b>dia natao hanasongadinana teny na andian-teny nefa tsy mampita zava-dehibe fanampiny fa <i>indrindra amin'ny feo, teny teknika, sns.

Adiresy ohatra

Ireto misy ohatra roa amin'ny fampiasana ny <address>tag:

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

Ohatra fanafohezana

Ny fanafohezana miaraka amin'ny titletoetra dia manana sisiny ambany misy teboka maivana ary cursor fanampiana eo amin'ny hover. Manome famantarana fanampiny ho an'ny mpampiasa izany fa hisy zavatra haseho amin'ny hover.

Ampio ny initialismkilasy amin'ny fanafohezana mba hampitomboana ny firindran'ny typografika amin'ny fanomezana azy habe lahatsoratra kely kokoa.

HTML no zavatra tsara indrindra hatramin'ny mofo voatetika.

Ny fanafohezana ny teny hoe attribute dia attr .

Blockquotes

singa Fampiasana tsy voatery
<blockquote> Singa ambaratonga sakana amin'ny fitanisana votoaty avy amin'ny loharano hafa

Ampio citetoetra ho an'ny URL loharano

Fampiasana .pull-leftsy .pull-rightkilasy ho an'ny safidy mitsingevana
<small> Singa azo atao amin'ny fanampiana teny nalaina ho an'ny mpampiasa, mazàna mpanoratra manana lohatenin'ny asa Apetraho <cite>manodidina ny lohateny na anaran'ny loharano

Mba hampidirana blockquote dia aforeto <blockquote>ny HTML rehetra ho toy ny teny nindramina. Ho an'ny teny fohy dia manoro hevitra izahay <p>.

Ampidiro <small>singa iray azo ampiasaina mba hitanisana ny loharanonao ary hahazo tsipika em &mdash;alohan'ny hanaovana styling ianao.

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

Ohatra blockquotes

Default blockquotes dia natao toy izao:

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

Olona malaza ao amin'ny Body of work

Raha te-hitsinkafona ny blockquote anao miankavanana, ampio class="pull-right":

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

Olona malaza ao amin'ny Body of work

Lisitra

Tsy voalamina

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem sy massa
  • Facilisis in 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 sy massa
  • Facilisis in 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

baiko

<ol>

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

Description

<dl>

Lisitry ny famaritana
Ny lisitry ny famaritana dia tonga lafatra amin'ny famaritana ny teny.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida and eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Famaritana marindrano

<dl class="dl-horizontal">

Lisitry ny famaritana
Ny lisitry ny famaritana dia tonga lafatra amin'ny famaritana ny teny.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida and 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.

Fampitandremana! Ny lisitry ny famaritana marindrano dia hanapaka ny teny lava loatra ka tsy ho tafiditra ao amin'ny fanamboarana tsanganana havia text-overflow. Amin'ny toerana fijerena tery kokoa dia hiova ho amin'ny fisehon'ny stacked default izy ireo.

Milahatra

Fonosy sombin-kaody an-tsipika miaraka amin'ny <code>.

  1. Ohatra , <code> fizarana < / code > dia tokony hofonosina inline .

Boky fototra

Ampiasao <pre>amin'ny andalana maromaro maromaro. Aza hadino ny mandositra ny brackets amin'ny zoro amin'ny kaody mba handikana araka ny tokony ho izy.

<p>Santionany lahatsoratra eto...</p>
  1. <pre>
  2. <p>Santionany lahatsoratra eto...</p>
  3. </pre>

Fanamarihana: Tandremo tsara ny mitazona ny kaody ao anatin'ny <pre>marika manakaiky ny ankavia araka izay azo atao; izany dia hanome ny tabilao rehetra.

Azonao atao ihany koa ny manampy ny .pre-scrollablekilasy izay hametraka ny haavon'ny 350px ambony indrindra ary hanome scrollbar y-axis.

Google Prettify

Raiso ny <pre>singa iray ihany ary ampio kilasy roa tsy voatery ho an'ny fandikana nohatsaraina.

  1. <p> Santionany lahatsoratra eto... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Santionany lahatsoratra eto...</p>
  4. </pre>

Ampidino ny google-code-prettify ary jereo ny readme momba ny fampiasana azy.

Fanamafisana latabatra

tenifototra Description
<table> Singa famonosana hanehoana angona amin'ny endrika tabilao
<thead> Singa fitoeran'entana ho an'ny andalana lohatenin'ny latabatra ( <tr>) hanamarihana ny tsanganana latabatra
<tbody> Singa fitoeran'entana ho an'ny andalana latabatra ( <tr>) ao amin'ny vatan'ny latabatra
<tr> Singa fitoeran'entana ho an'ny selan'ny latabatra ( <td>na <th>) izay miseho amin'ny andalana tokana
<td> Default table cell
<th> Efitra latabatra manokana ho an'ny tsanganana (na andalana, miankina amin'ny sehatra sy ny fametrahana) etikety
Tsy maintsy ampiasaina ao anatin'ny a<thead>
<caption> Famaritana na famintinana ny zavatra tazonin'ny latabatra, indrindra ho an'ny mpamaky efijery
  1. <latabatra>
  2. <loha>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </head>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </ table>

Safidy latabatra

Anarana KILASY Description
toerana misy anao tsy misy Tsy misy fomba, tsanganana sy andalana fotsiny
fototra .table Tsipika marindrano ihany eo anelanelan'ny andalana
nanamorona .table-bordered Manodidina ny zorony ary manampy sisin-tany ivelany
Zebra-stripe .table-striped Manampy loko miloko mavo mavo amin'ny andalana hafahafa (1, 3, 5, sns)
Voafintina .table-condensed Manapaka padding mitsangana amin'ny antsasany, manomboka amin'ny 8px ka hatramin'ny 4px, ao anatin'ny singa rehetra tdsy ny thsinga

Tabilao ohatra

1. Fomba latabatra mahazatra

Ny latabatra dia natao ho azy miaraka amin'ny sisiny vitsivitsy mba hiantohana ny famakian-teny sy ny fikojakojana ny rafitra. Miaraka amin'ny 2.0, .tableilaina ny kilasy.

  1. < kilasy latabatra = "table" >
  2. </ table>
# Fanampin'anarana Anarana Anaran'ny mpampiasa
1 marika Otto @mdo
2 Jakoba Thornton @matavy
3 Larry ny Vorona @twitter

2. latabatra miolakolaka

Ataovy mahafinaritra kely ny latabatrao amin'ny fampidirana zebra-striping—ampio fotsiny ny .table-stripedkilasy.

Fanamarihana: Mampiasa ny :nth-childmpifidy CSS ny latabatra miolakolaka ary tsy hita ao amin'ny IE7-IE8.

  1. < table class = "table table-striped" >
  2. </ table>
# Fanampin'anarana Anarana Anaran'ny mpampiasa
1 marika Otto @mdo
2 Jakoba Thornton @matavy
3 Larry ny Vorona @twitter

3. latabatra misy sisin-tany

Ampio sisin-tany manodidina ny latabatra manontolo sy ny zorony boribory ho an'ny tanjona haingo.

  1. <table class = "table table-bordered" >
  2. </ table>
# Fanampin'anarana Anarana Anaran'ny mpampiasa
1 marika Otto @mdo
marika Otto @getbootstrap
2 Jakoba Thornton @matavy
3 Larry the Bird @twitter

4. latabatra mivohitra

Ataovy mirindra kokoa ny latabatrao amin'ny alalan'ny fampidirana ny .table-condensedkilasy hanapaka ny fonon'ny sela latabatra ho antsasany (avy amin'ny 8px ka hatramin'ny 4px).

  1. < table class = "table table-condensed" >
  2. </ table>
# Fanampin'anarana Anarana Anaran'ny mpampiasa
1 marika Otto @mdo
2 Jakoba Thornton @matavy
3 Larry the Bird @twitter

5. Atambatra izy rehetra!

Aza misalasala manambatra ny kilasy latabatra mba hahazoana endrika samihafa amin'ny fampiasana ny kilasy misy.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </ table>
Anarana feno
# Fanampin'anarana Anarana Anaran'ny mpampiasa
1 marika Otto @mdo
2 Jakoba Thornton @matavy
3 Larry the Bird @twitter

Flexible HTML sy CSS

Ny ampahany tsara indrindra amin'ny endrika ao amin'ny Bootstrap dia ny fampidiranao sy ny fanaraha-maso rehetra dia mijery tsara na manao ahoana na manao ahoana ny fananganana azy amin'ny marikao. Tsy ilaina ny HTML tafahoatra, fa manome ny lamina ho an'ireo izay mitaky izany izahay.

Ny fandrindrana sarotra kokoa dia tonga miaraka amin'ny kilasy fohy sy azo esorina ho an'ny fanaingoana mora sy famatorana hetsika, ka voarakotra isaky ny dingana ianao.

Fametrahana efatra no tafiditra

Ny Bootstrap dia tonga miaraka amin'ny fanohanana ireo karazana endrika efatra:

  • Mitsangana (default)
  • karohy
  • Milahatra
  • Marindrano

Ny karazana fandrafetana endrika isan-karazany dia mitaky fanovana sasany amin'ny marika, fa ny fanaraha-maso ny tenany dia mijanona ary tsy miova.

Fanjakana mifehy sy ny maro hafa

Ny endrik'i Bootstrap dia misy fomba ho an'ny fanaraha-maso endrika fototra rehetra toy ny fampidirana, textarea ary fifantenana andrasanao. Saingy miaraka amin'ny singa mahazatra maromaro toy ny fampidirana apetaka sy efa voaomana ary fanohanana ny lisitry ny boaty.

Ny fanjakana toy ny fahadisoana, fampitandremana ary fahombiazana dia ampidirina ho an'ny karazana fanaraha-maso isan-karazany. Misy ihany koa ny fomba fanaraha-maso ho an'ny kilemaina.

Karazana endrika efatra

Bootstrap dia manome marika sy fomba tsotra ho an'ny endrika efatra amin'ny endrika tranonkala mahazatra.

Anarana KILASY Description
Mitsangana (default) .form-vertical (tsy takiana) Etikety mivondrona miankavia eo amin'ny fanaraha-maso
Milahatra .form-inline Etikety mirindra ankavia sy fanaraha-maso sakana an-tsipika ho an'ny fomba compact
karohy .form-search Fampidirana lahatsoratra mihoatra ny boribory ho an'ny estetika fikarohana mahazatra
Marindrano .form-horizontal Atsipazo ny etikety miankavia miankavanana amin'ny tsipika mitovy amin'ny fanaraha-maso

Ohatra amin'ny alàlan'ny fifehezana endrika fotsiny, tsy misy marika fanampiny

Fomba fototra

Smart sy maivana default tsy misy marika fanampiny.

Ohatra lahatsoratra fanampiana ambaratonga sakana eto.

  1. <form class = "tsara" >
  2. <label> Anaran'ny marika </label>
  3. < type input = "text" class = "span3" placeholder = " Type something…" >
  4. <span class = "help-block" > Ohatra lahatsoratra fanampiana ambaratonga sakana eto. </span>
  5. <label class = "checkbox" >
  6. < karazana fampidirana = "boaty check" > Jereo aho
  7. </label>
  8. <button type = "submit" class = "btn" > Alefaso </bt>
  9. </form>

Taratasy fikarohana

Ampio .form-searchamin'ny endrika sy .search-queryamin'ny input.

  1. <form class = "well form-search" >
  2. < karazana fampidirana = "text" class = "fanontaniana amin'ny fikarohana antonony" >
  3. <button type = "submit" class = "btn" > Search </button>
  4. </form>

Endrika inline

Ampio .form-inlinehanatsara ny fampifanarahana mitsangana sy ny elanelan'ny fanaraha-maso endrika.

  1. <form class = "tsara endrika-inline" >
  2. < type input = "text" class = "input-small" placeholder = "Email" >
  3. < karazana fampidirana = "password" class = "fidirana-kely" placeholder = "Password" >
  4. <label class = "checkbox" >
  5. < karazana fampidirana = "boasary" > Tsarovy aho
  6. </label>
  7. <button type = "submit" class = "btn" > Midira </button>
  8. </form>

Endrika marindrano

Aseho eo ankavanana ny fanaraha-maso endrika default rehetra tohananay. Ity ny lisitry ny bala:

  • fampidirana lahatsoratra (soratra, tenimiafina, mailaka, sns)
  • checkbox
  • fampielezam-peo
  • mifidy
  • safidy maromaro
  • fampidirana rakitra
  • textarea

Ho fanampin'ny lahatsoratra maimaim-poana, ny fampidirana HTML5 mifototra amin'ny lahatsoratra dia miseho toy izany.

Ohatra marika

Raha jerena ny fandrafetana endrika ohatra etsy ambony, ity ny marika mifandraika amin'ny vondrona fampidirana sy fanaraha-maso voalohany. Ny .control-group, .control-label, ary ny .controlskilasy dia ilaina amin'ny famolavolana.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> lahatsoratra angano </legend>
  4. <div class = "vondrona fanaraha-maso" >
  5. <label class = "control-label" for = "input01" > Fampidirana lahatsoratra </label>
  6. <div class = "controls" >
  7. < karazana fampidirana = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > lahatsoratra fanampiana fanohanana </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Fanjakana mifehy ny endrika

Bootstrap dia manasongadina fomba ho an'ny navigateur-tohanan'ny mifantoka sy ny disabledfanjakana. Esorinay ny Webkit default outlineary ampiharo box-shadowamin'ny toerany ny :focus.


Fanamarinana endrika

Ao anatin'izany ihany koa ny fomba fanamarinana ny fahadisoana, ny fampitandremana ary ny fahombiazana. Raha hampiasaina dia ampio ny kilasy diso amin'ny manodidina .control-group.

  1. <fieldset
  2. class = "error groupe control" >
  3. </fieldset>
Misy lanja eto
Mety nisy zavatra tsy nety
Ahitsio azafady
Woohoo!
Woohoo!

Manitatra ny fifehezana endrika

Ampidiro & ampio ny fampidirana

Vondrona fampidirana—miaraka amin'ny lahatsoratra ampiana na apetraka mialoha—dia manome fomba mora hanomezana teny manodidina bebe kokoa ho an'ny fampidiranao. Ohatra tsara dia ahitana ny famantarana @ ho an'ny mpampiasa Twitter na $ ho an'ny vola.


Boxes sy radios

Hatramin'ny v1.4, ny Bootstrap dia nitaky marika fanampiny manodidina ny boaty fisavana sy radio mba hametahana azy ireo. Ankehitriny, resaka tsotra ny mamerina ilay <label class="checkbox">izay mandrakotra ny <input type="checkbox">.

Tohanana ihany koa ny boaty fisavana sy radio. Ampio fotsiny .inlineny iray .checkboxna .radiodia vita ianao.


Taratasy an-tsoratra ary ampiana/fanolorana

Raha hampiasa ny fampidirana mialoha na ampiana amin'ny endrika inline dia ataovy izay hametrahana ny .add-onsy inputeo amin'ny tsipika iray ihany, tsy misy elanelana.


Mamoaka lahatsoratra fanampiana

Raha te hampiditra lahatsoratra fanampiana ho an'ny fampidiran-ketrao dia ampidiro lahatsoratra fanampiana an-tserasera miaraka amin'ny sakan-tsoratra <span class="help-inline">fanampiana miaraka <p class="help-block">aorian'ny singa fampidirana.

Ampiasao ireo .span*kilasy mitovy amin'ny rafitra grid ho an'ny haben'ny fidirana.

Azonao atao ihany koa ny mampiasa kilasy static izay tsy manao sarintany amin'ny grid, mampifanaraka amin'ny fomba CSS mamaly, na mitantara karazana fanaraha-maso isan-karazany (oh: inputvs. select).

@

Ity misy lahatsoratra fanampiana

.00
Ity misy lahatsoratra fanampiana fanampiny
$ .00

Fanamarihana: Manodidina ny safidy rehetra ho an'ny faritra kitiho lehibe kokoa sy endrika azo ampiasaina kokoa ny etikety.

bokotra class="" Description
btn Bokotra volondavenona mahazatra misy gradient
btn btn-primary Manome lanja hita maso fanampiny ary mamaritra ny hetsika voalohany amin'ny bokotra iray
btn btn-info Ampiasaina ho solon'ny fomba mahazatra
btn btn-success Manondro hetsika mahomby na tsara
btn btn-warning Midika izany fa tokony hotandremana amin'ity hetsika ity
btn btn-danger Manondro hetsika mampidi-doza na mety ho ratsy
btn btn-inverse Bokotra maitso matroka mifandimby, tsy mifamatotra amin'ny hetsika semantika na fampiasana

Bokotra ho an'ny hetsika

Amin'ny maha-fifanarahana azy, ny bokotra dia tsy tokony hampiasaina afa-tsy amin'ny hetsika raha toa ka ny hyperlinks dia ampiasaina amin'ny zavatra. Ohatra, ny "Download" dia tokony ho bokotra raha ny "activité vao haingana" dia tokony ho rohy.

Ny fomba bokotra dia azo ampiharina amin'ny zavatra rehetra misy ny .btnkilasy ampiharina. Na izany aza, amin'ny ankapobeny dia tianao ny hampihatra ireo amin'ny singa <a>sy <button>singa ihany.

Mifanaraka amin'ny navigateur

IE9 dia tsy manapaka ny gradient ambadika amin'ny zoro boribory, ka esorinay izany. Mifandraika amin'izany, ny IE9 dia manafoana buttonireo singa kilemaina, manome loko maitso miaraka amin'ny alokaloka ratsy izay tsy azontsika amboarina.

Habe maromaro

Mitady bokotra lehibe kokoa na kely kokoa? Ampio .btn-large, .btn-small, na .btn-minihabe roa fanampiny.


Fanjakana kilemaina

Ho an'ny bokotra kilemaina, ampio ny .disabledkilasy amin'ny rohy sy ny disabledtoetran'ny <button>singa.

Rohy voalohany Rohy

Fampitandremana! Ampiasainay .disabledho toy ny kilasin'ny fitaovana eto, mitovy amin'ny .activekilasy mahazatra, ka tsy ilaina ny prefix.

Kilasy iray, marika maromaro

Ampiasao ny .btnkilasy amin'ny singa <a>, <button>, na <input>.

Rohy
  1. <a class = "btn" href = "" > Rohy </a>
  2. < btn class = "btn" type = "submit" >
  3. bokotra
  4. </bokotra>
  5. <input class = "btn" type = "button"
  6. value = "Input" >
  7. <input class = "btn" type = "submit"
  8. value = "Alefaso" >

Amin'ny fomba fanao tsara indrindra, andramo ny mifanandrify amin'ilay singa ho anao contexte mba hahazoana antoka fa mifanaraka amin'ny navigateur. Raha manana ianao dia inputampiasao <input type="submit">ny bokotra iray.

  • fitaratra kisary
  • icon-mozika
  • icon-search
  • valopy kisary
  • icon-fo
  • kintana kisary
  • icon-star-empty
  • mpampiasa icon
  • sarimihetsika-kisary
  • icon-th-lehibe
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-esory
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • kisary-fako
  • icon-trano
  • icon-file
  • icon-time
  • kisary-dalana
  • icon-download-alt
  • kisary-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-avereno
  • icon-refresh
  • icon-list-alt
  • kisary-hiddy
  • saina kisary
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • kisary-tag
  • icon-tags
  • kisary-boky
  • kisary-boky
  • kisary-print
  • kisary-fakan-tsary
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-haavo
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • kisary-lisitra
  • icon-indent-ankavia
  • icon-indent-right
  • icon-facetime-video
  • sary kisary
  • icon-pensil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • kisary-mizara
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • kisary-mihemotra
  • kisary-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • kisary-dingana-mandroso
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • famantarana-fanontaniana
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • kisary-ok-circle
  • icon-ban-circle
  • icon-arrow-ankavia
  • icon-arrow-right
  • icon-arrow-up
  • kisary-tsipìka-midina
  • icon-share-alt
  • icon-resize-feno
  • kisary-manova-kely
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-fanomezana
  • kisary-ravina
  • kisary-afo
  • icon-maso-open
  • kisary-maso-akaiky
  • famantarana-fampitandremana
  • icon-plane
  • kalandrie kisary
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • kisary-retweet
  • sarety-miantsena
  • icon-folder-akatona
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • kisary-bullhorn
  • lakolosy kisary
  • icon-certificat
  • kisary-ankihibe
  • kisary-ankihibe-midina
  • kisary-tanana-kavanana
  • kisary-tanana-havia
  • kisary-tanana
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-ankavia
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • globe icon
  • kisary-wrench
  • icon-asa
  • kisary-sivana
  • kisary-kitapo
  • kisary-ecran feno

Naorina ho sprite

Raha tokony hataonay ho fangatahana fanampiny ny kisary tsirairay, dia natambatray ho sprite izy ireo—sary maromaro ao anaty rakitra iray izay mampiasa CSS hametrahana ireo sary miaraka amin'ny background-position. Io ihany no fomba ampiasaintsika ao amin'ny Twitter.com ary nandaitra tsara ho antsika izany.

Ny kilasin'ny kisary rehetra dia voafantina miaraka .icon-amin'ny elanelan'ny anarana sy ny scoping, mitovy amin'ny singa hafa. Izany dia hanampy amin'ny fisorohana ny fifandonana amin'ny fitaovana hafa.

Ny Glyphicons dia nanome anay ny fampiasana ny Halflings napetraka ao amin'ny kitapom-pitaovana open-source raha mbola manome rohy sy crédit eto amin'ny doka izahay. Azafady, diniho ny hanao toy izany amin'ny tetikasanao.

Ny fomba fampiasana

Bootstrap dia mampiasa <i>tenifototra ho an'ny kisary rehetra, saingy tsy manana kilasy tranga izy ireo - prefix iombonana ihany. Raha hampiasaina dia apetraho na aiza na aiza ity kaody manaraka ity:

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

Misy ihany koa ny fomba azo alaina ho an'ny kisary mivadika (fotsy), namboarina miaraka amin'ny kilasy fanampiny:

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

Misy kilasy 140 azo isafidianana ho an'ny kisaryo. Manampia <i>marika fotsiny miaraka amin'ny kilasy mety dia vonona ianao. Azonao atao ny mahita ny lisitra feno amin'ny sprites.less na eto amin'ity rakitra ity.

Fampitandremana! Rehefa mampiasa anilan'ny tady lahatsoratra, toy ny amin'ny bokotra na rohy nav, dia aoka ho azo antoka ny hamela toerana iray aorian'ny <i>marika mba hahazoana elanelana mety.

Mampiasa tranga

Tsara ny kisary, fa aiza no hampiasana azy? Ireto misy hevitra vitsivitsy:

  • Ho sary ho an'ny fitetezana sidebar anao
  • Ho an'ny fitetezana kisary fotsiny
  • Ho an'ny bokotra manampy amin'ny fampitana ny dikan'ny hetsika iray
  • Miaraka amin'ny rohy hizarana contexte amin'ny toeran'ny mpampiasa

Amin'ny ankapobeny, na aiza na aiza ahafahanao mametraka <i>marika dia azonao atao ny mametraka kisary.

OHATRA

Ampiasao izy ireo amin'ny bokotra, vondrona bokotra ho an'ny fitaovana, fitetezana, na fampidirana endrika efa voaomana.