Base CSS

Pamwamba pa scaffolding, zoyambira za HTML zimasinthidwa ndikuwonjezeredwa ndi makalasi owonjezera kuti apereke mawonekedwe atsopano, osasinthika.

Mitu & body copy

typographic sikelo

Gulu lonse la typographic grid limachokera pamitundu iwiri Yocheperako mufayilo yathu yosinthika.less: @baseFontSizendi @baseLineHeight. Choyamba ndi kukula kwa font komwe kumagwiritsidwa ntchito ponsepo ndipo chachiwiri ndi kutalika kwa mzere woyambira.

Timagwiritsa ntchito masinthidwe amenewo, ndi masamu ena, kupanga m'mphepete, ma padding, ndi kutalika kwa mzere wamitundu yathu yonse ndi zina zambiri.

Chitsanzo thupi lemba

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.

kope lotsogolera thupi

Pangani ndime kukhala yodziwika bwino powonjezera .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Chifukwa chake, si commodo luctus.

h1 ndi. Mutu 1

h2 ndi. Mutu 2

h3 ndi. Mutu 3

h4 ndi. Mutu 4

h5 ndi. Mutu 5
h6 ndi. Mutu 6

Kutsindika, adilesi, ndi chidule

Chinthu Kugwiritsa ntchito Zosankha
<strong> Potsindika kachidutswa kakang'ono ka mawu ndi kofunikira Palibe
<em> Potsindika kagawo kakang'ono ka mawu ndi kupsinjika Palibe
<abbr> Amakulunga mawu achidule ndi ma acronyms kuti awonetse mtundu wowonjezedwa pa hover

Phatikizani zomwe mungasankhe titlepazowonjezera

Gwiritsani .initialismntchito zilembo zazikuluzikulu za kalasi.
<address> Kuti mudziwe zambiri za makolo ake apafupi kapena gulu lonse lantchito Sungani masanjidwe pomaliza mizere yonse ndi<br>

Kugwiritsa ntchito kutsindika

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.

Zindikirani: Khalani omasuka kugwiritsa ntchito <b>komanso <i>mu HTML5, koma kugwiritsa ntchito kwawo kwasintha pang'ono. <b>cholinga chake ndi kuwunikira mawu kapena ziganizo popanda kuwonetsa kufunikira kowonjezera pomwe <i>nthawi zambiri zimakhala za mawu, mawu aukadaulo, ndi zina.

Zitsanzo maadiresi

Nazi zitsanzo ziwiri za momwe <address>tag ingagwiritsire ntchito:

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

Zitsanzo zazidule

Mawu achidule okhala ndi tanthauzo titleali ndi malire a madontho owala pansi ndi cholozera chothandizira pa hover. Izi zimapatsa ogwiritsa ntchito chidziwitso chowonjezera china chake chomwe chidzawonetsedwa pa hover.

Onjezani initialismkalasi ku chidule cha mawu kuti muonjezere mgwirizano wa kalembedwe powapatsa kukula kwa mawu ocheperako.

HTML ndiye chinthu chabwino kwambiri kuyambira mkate wodulidwa.

Chidule cha mawu akuti attr .

Mawu a blockquotes

Chinthu Kugwiritsa ntchito Zosankha
<blockquote> Chofunikira pa block-level potengera zomwe zili kugwero lina

Onjezani citemawonekedwe a URL yoyambira

Gwiritsani ntchito .pull-leftndi .pull-rightmakalasi pazosankha zoyandama
<small> Chosankha chowonjezera mawu omwe amayang'ana ogwiritsa ntchito, makamaka wolemba wokhala ndi mutu wantchito Ikani <cite>mozungulira mutu kapena dzina la gwero

Kuti muphatikizepo blockquote, sungani HTML<blockquote> iliyonse ngati mawuwo. Pamawu olunjika timalimbikitsa a .<p>

Phatikizani chinthu chomwe mukufuna <small>kuti mutchule gwero lanu ndipo mupeza dash ya em &mdash;patsogolo pake pazolinga zamakongoletsedwe.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante venenatis. </p>
  3. <wamng'ono> Wina wotchuka </ wamng'ono>
  4. </blockquote>

Zitsanzo za blockquotes

Ma blockquotes osasinthika amalembedwa motere:

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

Wina wotchuka mu Thupi la ntchito

Kuti muyandamitse blockquote yanu kumanja, onjezani class="pull-right":

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

Wina wotchuka mu Thupi la ntchito

Mndandanda

Osalamulidwa

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ndi massa
  • Facilisis mu pretium nisl aliquet
  • Chotsatira cha 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

Osatchulidwa

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ndi massa
  • Facilisis mu pretium nisl aliquet
  • Chotsatira cha 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

Adalamulidwa

<ol>

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

Kufotokozera

<dl>

Mndandanda wamafotokozedwe
Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id ili si mi porta gravida ndi eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Kufotokozera kopingasa

<dl class="dl-horizontal">

Mndandanda wamafotokozedwe
Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id ili si mi porta gravida ndi 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.

Mungodziwiratu! Mafotokozedwe opingasa adzafupikitsa mawu omwe ndi aatali kwambiri kuti agwirizane ndi kukonza ndime yakumanzere text-overflow. Pamalo ocheperako, asintha kukhala mawonekedwe osakhazikika.

Motsatana

Manga zilembo zam'munsi zamakhodi ndi <code>.

  1. Mwachitsanzo , <code> gawo < / code > iyenera kukulungidwa ngati inline .

Choyambirira block

Gwiritsani <pre>ntchito mizere ingapo yamakhodi. Onetsetsani kuti mwathawa m'mabokosi aliwonse mu code kuti mumasulire bwino.

<p>Zitsanzo zalemba apa...</p>
  1. <pre>
  2. <p>Zitsanzo za mawu apa...</p>
  3. </ pre>

Zindikirani: Onetsetsani kuti mwasunga ma code mkati mwa <pre>ma tag pafupi ndi kumanzere momwe mungathere; idzapereka ma tabo onse.

Mutha kuwonjezera .pre-scrollablekalasi yomwe ingakhazikitse kutalika kwa 350px ndikupereka y-axis scrollbar.

Google Pretify

Tengani <pre>chinthu chomwecho ndikuwonjezera makalasi awiri omwe mungafune kuti mumasulire bwino.

  1. <p> Chitsanzo cha mawu apa... </p>
  1. <pre class = "prettyprint
  2. mzere" >
  3. <p>Zitsanzo za mawu apa...</p>
  4. </ pre>

Tsitsani google-code-prettify ndikuwona zowerengera momwe mungagwiritsire ntchito.

Zolemba patebulo

Tagi Kufotokozera
<table> Kukulunga chinthu chowonetsera deta mumtundu wa tabular
<thead> Chotengera chamizere yapamutu patebulo ( <tr>) kuti mulembe mizati yatebulo
<tbody> Chotengera cha mizere ya tebulo ( <tr>) mu thupi la tebulo
<tr> Chotengera chamagulu amagulu a tebulo ( <td>kapena <th>) omwe amawonekera pamzere umodzi
<td> Selo ya tebulo lofikira
<th> Selo lapadera la tebulo lazambiri (kapena mzere, kutengera kukula ndi kuyika) zilembo
Ayenera kugwiritsidwa ntchito mkati mwa<thead>
<caption> Kufotokozera kapena chidule cha zomwe tebulo ili, makamaka zothandiza kwa owerenga zenera
  1. <tebulo>
  2. <mutu>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </ mutu>
  8. <chinthu>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </ thupi>
  14. </table>

Zosankha patebulo

Dzina Kalasi Kufotokozera
Zosasintha Palibe Palibe masitayilo, mizati ndi mizere yokha
Basic .table Mizere yopingasa yokha pakati pa mizere
Wamalire .table-bordered Amazungulira ngodya ndikuwonjezera malire akunja
Mzere wa Zebra .table-striped Imawonjezera mtundu wotuwa wopepuka ku mizere yosamvetseka (1, 3, 5, ndi zina)
Kufupikitsidwa .table-condensed Imadula zotchingira zoyimirira pakati, kuchokera pa 8px mpaka 4px, mkati mwa zonse tdndi thzinthu

Matebulo achitsanzo

1. Masitayilo a tebulo

Matebulo amangosanjidwa ndi malire ochepa kuti awonetsetse kuti awerengeka komanso kuti asamangidwe bwino. Ndi 2.0, .tablekalasi ndiyofunika.

  1. <table class = "table" >
  2. </table>
# Dzina loyamba Dzina lomaliza Dzina lolowera
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter

2. Gome lamizeremizere

Pezani zokometsera pang'ono ndi matebulo anu powonjezera mbidzi - ingowonjezerani .table-stripedkalasi.

Zindikirani: Matebulo amizere amagwiritsa ntchito :nth-childchosankha cha CSS ndipo sapezeka mu IE7-IE8.

  1. <table class = "table table-mizere" >
  2. </table>
# Dzina loyamba Dzina lomaliza Dzina lolowera
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter

3. Gome la malire

Onjezani malire kuzungulira tebulo lonse ndi ngodya zozungulira pazokongoletsa.

  1. <table class = "table-bordered" >
  2. </table>
# Dzina loyamba Dzina lomaliza Dzina lolowera
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter

4. Gome lofupikitsidwa

Pangani matebulo anu kukhala ophatikizika powonjezera .table-condensedkalasi kuti mudule ma cell a tebulo pakati (kuchokera 8px mpaka 4px).

  1. <table class = "table table-condensed" >
  2. </table>
# Dzina loyamba Dzina lomaliza Dzina lolowera
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter

5. Aphatikize onse!

Khalani omasuka kuphatikiza magulu aliwonse a tebulo kuti mukwaniritse mawonekedwe osiyanasiyana pogwiritsa ntchito makalasi aliwonse omwe alipo.

  1. <tebulo kalasi = "tebulo-mizeremizeremizere tebulo-m'malire tebulo-condensed" >
  2. ...
  3. </table>
Dzina lonse
# Dzina loyamba Dzina lomaliza Dzina lolowera
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter

Flexible HTML ndi CSS

Gawo labwino kwambiri la mafomu mu Bootstrap ndikuti zolowa zanu zonse ndi zowongolera zimawoneka zabwino ngakhale mungazipangire bwanji muzolemba zanu. Palibe HTML yofunikira kwambiri yomwe imafunikira, koma timapereka mawonekedwe kwa omwe akufuna.

Masanjidwe ovuta kwambiri amabwera ndi makalasi achidule komanso osinthika kuti mukhale ndi masitayelo osavuta komanso omangirira zochitika, kotero mumaphunzitsidwa pamlingo uliwonse.

Masanjidwe anayi adaphatikizidwa

Bootstrap imabwera ndi chithandizo chamitundu inayi yamapangidwe:

  • Oyima (chofikira)
  • Sakani
  • Motsatana
  • Chopingasa

Mitundu yosiyanasiyana ya masanjidwe amitundu imafuna kusintha kwina, koma zowongolera zokha zimakhalabe chimodzimodzi.

Control limati ndi zina

Mafomu a Bootstrap amaphatikiza masitayilo azowongolera zonse zoyambira monga zolowetsa, zolemba, ndi kusankha zomwe mungayembekezere. Koma imabweranso ndi zida zingapo monga zolowetsa ndi zokonzedweratu ndikuthandizira mndandanda wamabokosi.

Maiko monga zolakwika, chenjezo, ndi kupambana akuphatikizidwa pamtundu uliwonse wa kuwongolera mawonekedwe. Zinanso ndi masitayelo a zowongolera zolephereka.

Mitundu inayi ya mawonekedwe

Bootstrap imapereka mawonekedwe osavuta komanso masitayelo amitundu inayi yamitundu wamba.

Dzina Kalasi Kufotokozera
Oyima (chofikira) .form-vertical (osafunikira) Malebulo otungidwa, okhala kumanzere pa zowongolera
Motsatana .form-inline Zoyang'ana kumanzere ndi zowongolera zolowera kumanzere kwa kalembedwe kophatikizana
Sakani .form-search Mawu ozungulira mowonjezera pazokometsera zakusaka
Chopingasa .form-horizontal Zolondera kumanzere, zolowera kumanja pamzere womwewo ngati zowongolera

Mafomu achitsanzo pogwiritsa ntchito zowongolera mafomu, palibe zolembera zowonjezera

Fomu yoyambira

Zosasintha zanzeru komanso zopepuka popanda chizindikiro chowonjezera.

Chitsanzo chothandizira pamlingo wa block apa.

  1. <form class = "chabwino" >
  2. <label> Dzina lalemba </ label>
  3. <input type = "text" class = "span3" placeholder = " Type something..." >
  4. <span class = "help-block" > Maupangiri othandizira apa. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Ndifufuzeni
  7. </ label>
  8. <button type = "submit" class = "btn" > Tumizani </ batani>
  9. </ fomu>

Fufuzani mawonekedwe

Onjezani .form-searchku fomu ndi .search-queryku input.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Sakani </ batani>
  4. </ fomu>

Fomu yapaintaneti

Onjezani .form-inlinekuwongolera koyima ndi masitayilo a mawonekedwe.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Imelo" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Ndikumbukireni
  6. </ label>
  7. <button type = "submit" class = "btn" > Lowani </ batani>
  8. </ fomu>

Mafomu opingasa

Zowonetsedwa kumanja ndi maulamuliro onse amafomu omwe timathandizira. Nawu mndandanda wa zipolopolo:

  • zolemba (mawu, mawu achinsinsi, imelo, ndi zina)
  • bokosi
  • wailesi
  • sankhani
  • angapo kusankha
  • kulowetsa fayilo
  • textarea

Kuphatikiza pa zolemba zaulere, zolemba zilizonse za HTML5 zimawoneka choncho.

Chizindikiro cha chitsanzo

Potengera mawonekedwe achitsanzo omwe ali pamwambapa, nayi chizindikiro cholumikizidwa ndi gulu loyamba lolowetsa ndi lowongolera. The .control-group, .control-label, ndi .controlsmakalasi onse amafunikira pamakongoletsedwe.

  1. <form class = "form-horizontal" >
  2. <munda>
  3. <legend> Zolemba za nthano </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Kulowetsa mawu </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Mawu othandizira </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </ fomu>

Kuwongolera mawonekedwe

Bootstrap imakhala ndi masitayelo azomwe amathandizidwa ndi osatsegula komanso disabledmadera. Timachotsa Webkit yokhazikika outlinendikuyika box-shadowa m'malo mwake :focus.


Kutsimikizika kwa fomu

Zimaphatikizanso masitayelo otsimikizira zolakwa, machenjezo, ndi kupambana. Kuti mugwiritse ntchito, onjezani kalasi yolakwika pazozungulira .control-group.

  1. <magawo
  2. class = "control-group error" >
  3. </fieldset>
Mtengo wina apa
Mwina china chake chalakwika
Chonde konzani cholakwikacho
Uwu!
Uwu!

Kuwonjezera mawonekedwe a mawonekedwe

Konzani & onjezerani zolowa

Magulu olowetsa—okhala ndi mawu ongowonjezeredwa kapena okonzedweratu—amapereka njira yosavuta yofotokozera zambiri za zomwe mwalemba. Zitsanzo zabwino zikuphatikiza @ sign ya ma usernames a Twitter kapena $ pazachuma.


Mabokosi ndi mawailesi

Kufikira v1.4, Bootstrap inkafunika zolembera zoonjezera mozungulira mabokosi ndi mawayilesi kuti muyike. Tsopano, ndi nkhani yosavuta kubwereza <label class="checkbox">zomwe zimakutira <input type="checkbox">.

Mabokosi apaintaneti ndi mawayilesi amathandizidwanso. Ingowonjezerani .inlinechilichonse .checkboxkapena .radiomwatha.


Mafomu apaintaneti ndikuwonjezera / kukonzekera

Kuti mugwiritse ntchito zolembera zokonzeratu kapena kuwonjezera pamizere, onetsetsani kuti mwayika .add-onndi inputpamzere womwewo, popanda mipata.


Fomu yothandizira mawu

Kuti muwonjezere mawu okuthandizani pazolowetsa mafomu anu, phatikizani mawu okuthandizani okhala ndi <span class="help-inline">kapena mawu othandizira <p class="help-block">pambuyo pa zomwe mwalowetsa.

Gwiritsani ntchito .span*makalasi omwewo kuchokera ku gridi yamakina olowera.

Mukhozanso kugwiritsa ntchito makalasi osasunthika omwe sakugwirizana ndi gululi, kusintha masitayelo a CSS omvera, kapena akaunti yamitundu yosiyanasiyana yowongolera (monga, inputmotsutsana ndi select. ).

@

Nawa mawu othandizira

.00
Nawa mau ena othandizira
$ .00

Zindikirani: Malebulo amazungulira zonse zomwe mungasankhe pazigawo zazikuluzikulu zodina komanso mawonekedwe osavuta kugwiritsa ntchito.

Batani kalasi="" Kufotokozera
btn Batani la imvi lokhazikika lokhala ndi gradient
btn btn-primary Amapereka kulemera kowonjezera kowonekera ndikuzindikiritsa zochita zoyambira mumagulu a mabatani
btn btn-info Amagwiritsidwa ntchito ngati njira yosinthira masitayelo osakhazikika
btn btn-success Imawonetsa kuchita bwino kapena koyenera
btn btn-warning Zikuwonetsa kusamala ziyenera kuchitidwa ndi izi
btn btn-danger Imawonetsa zochitika zowopsa kapena zoyipa
btn btn-inverse Batani lina la imvi lakuda, losamangirizidwa ku zochitika kapena kugwiritsa ntchito

Mabatani a zochita

Monga msonkhano, mabatani ayenera kugwiritsidwa ntchito pochita zinthu pomwe ma hyperlink ayenera kugwiritsidwa ntchito pazinthu. Mwachitsanzo, "Kutsitsa" kuyenera kukhala batani pomwe "zochitika zaposachedwa" ziyenera kukhala ulalo.

Mabatani a mabatani amatha kugwiritsidwa ntchito pa chilichonse chomwe .btnkalasi ikugwiritsidwa ntchito. Komabe, nthawi zambiri mudzafuna kugwiritsa ntchito izi pazokha <a>komanso <button>zinthu.

Kugwirizana kwa msakatuli

IE9 simabzala ma gradients akumbuyo pamakona ozungulira, chifukwa chake timachotsa. Zogwirizana, IE9 imasokoneza buttonzinthu zolephereka, kupangitsa mawu kukhala imvi ndi chithunzi choyipa chomwe sitingathe kukonza.

Ma size angapo

Mukufuna mabatani akulu kapena ang'onoang'ono? Onjezani .btn-large, .btn-small, kapena .btn-minima size awiri owonjezera.


Dziko olumala

Kwa mabatani olumala, onjezani .disabledkalasi ku maulalo ndi mawonekedwe disabledazinthu <button>.

Chiyanjano choyambirira Lumikizani

Mungodziwiratu! Timagwiritsa ntchito .disabledngati gulu lothandizira pano, lofanana ndi gulu wamba .active, kotero palibe mawu oyamba omwe amafunikira.

Kalasi imodzi, ma tag angapo

Gwiritsani ntchito .btnkalasi pa <a>, <button>, kapena <input>element.

Lumikizani
  1. <a class = "btn" href = ""> Link </a> _
  2. <button class = "btn" type = "submit" >
  3. Batani
  4. </ batani>
  5. <input class = "btn" type = "batani"
  6. value = "Zolowetsa" >
  7. <input class = "btn" type = "submit"
  8. value = "Submit" >

Monga njira yabwino, yesani kufananiza zomwe zili m'nkhani yanu kuti muwonetsetse kuti zikugwirizana ndi msakatuli. Ngati muli ndi input, gwiritsani ntchito <input type="submit">batani lanu.

  • chithunzi-galasi
  • chizindikiro - nyimbo
  • kusaka-zithunzi
  • chizindikiro-envelopu
  • icon-mtima
  • chizindikiro-nyenyezi
  • chizindikiro-nyenyezi-chopanda
  • wogwiritsa ntchito chizindikiro
  • chithunzi-filimu
  • chithunzi-th-chachikulu
  • chizindikiro-th
  • icon-th-list
  • chithunzi-chabwino
  • chizindikiro-chotsani
  • chithunzi-kulitsa-mu
  • chithunzi-kulitsa-kunja
  • icon-off
  • chizindikiro - chizindikiro
  • icon-cog
  • icon-zinyalala
  • icon-nyumba
  • icon-fayilo
  • chizindikiro-nthawi
  • icon-njira
  • icon-kutsitsa-alt
  • icon-kutsitsa
  • icon-kukweza
  • icon-mabokosi
  • chithunzi-sewero-bwalo
  • chithunzi-kubwereza
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • chizindikiro - mbendera
  • ma icon - mahedifoni
  • icon-volume-off
  • icon-volume-pansi
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • chizindikiro-tag
  • chizindikiro-ma tag
  • chizindikiro-buku
  • chizindikiro-bookmark
  • chizindikiro-kusindikiza
  • chithunzi-kamera
  • chizindikiro-fonti
  • chithunzi-bold
  • chithunzi-italic
  • chizindikiro-mawu-utali
  • chizindikiro-mawu-m'lifupi
  • icon-align-kumanzere
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • chizindikiro-mndandanda
  • chizindikiro-kumanzere
  • chizindikiro-kumanja-kumanja
  • icon-facetime-kanema
  • chithunzi-chithunzi
  • icon-pensulo
  • chizindikiro-mapu-chizindikiro
  • icon-sintha
  • chizindikiro-tint
  • icon-edit
  • chithunzi-gawo
  • chizindikiro-fufuzani
  • icon-kusuntha
  • chithunzi - sitepe-kumbuyo
  • chithunzi-chachangu-chambuyo
  • icon-kumbuyo
  • sewero la zithunzi
  • chithunzi-kuyimitsa
  • icon-stop
  • chizindikiro-patsogolo
  • chithunzi-mwachangu-patsogolo
  • icon-patsogolo-patsogolo
  • icon-eject
  • chithunzi-chevron-kumanzere
  • icon-chevron-right
  • chizindikiro-plus-sign
  • chizindikiro-chotsa-chizindikiro
  • chizindikiro-chotsani-chizindikiro
  • chizindikiro-chabwino
  • chizindikiro-funso-chizindikiro
  • chizindikiro-chidziwitso-chizindikiro
  • chithunzi-skrini
  • chizindikiro-chotsani-bwalo
  • chizindikiro-ok-mzere
  • chizindikiro-kuletsa-bwalo
  • chizindikiro-muvi-kumanzere
  • chizindikiro-muvi-kumanja
  • chizindikiro-muvi-mmwamba
  • chizindikiro-muvi-pansi
  • icon-share-alt
  • icon-resize-zadzaza
  • chithunzi-kusintha-kung'ono-zing'ono
  • icon-plus
  • icon-kuchotsa
  • chizindikiro cha nyenyezi
  • chizindikiro-chidziwitso-chizindikiro
  • chizindikiro-mphatso
  • chizindikiro-tsamba
  • chizindikiro-moto
  • icon-diso-otseguka
  • chizindikiro-diso-tseka
  • chizindikiro-chenjezo
  • chizindikiro-ndege
  • chizindikiro-kalendala
  • chithunzi - mwachisawawa
  • chithunzi - ndemanga
  • chizindikiro-maginito
  • icon-chevron-up
  • icon-chevron-pansi
  • chithunzi-retweet
  • ngolo yogulira zithunzi
  • chithunzi-foda-tseka
  • chikwatu-chotseguka
  • chizindikiro-kusintha kukula-kuima
  • icon-resize-horizontal
  • chithunzi-hdd
  • chizindikiro-bullhorn
  • chizindikiro-belu
  • chizindikiro-satifiketi
  • icon-thumb-mmwamba
  • chithunzi-chala-pansi
  • chizindikiro-dzanja-lamanja
  • chizindikiro-dzanja-kumanzere
  • chizindikiro-mmwamba
  • chizindikiro-pansi
  • chithunzi-zozungulira-muvi-kumanja
  • chithunzi-zozungulira-muvi-kumanzere
  • chizindikiro-chizungulire-muvi-mmwamba
  • chizindikiro-chizungulire-muvi-pansi
  • icon-globe
  • icon-wrench
  • icon-ntchito
  • chithunzi-sefa
  • chithunzi -chikwama
  • chithunzi - fullscreen

Kumangidwa ngati sprite

M'malo mopanga chithunzi chilichonse kukhala chowonjezera, tachipanga kukhala sprite-mulu wa zithunzi mufayilo imodzi yomwe imagwiritsa ntchito CSS kuyika zithunzizo ndi background-position. Iyi ndi njira yomweyi yomwe timagwiritsa ntchito pa Twitter.com ndipo yatithandiza bwino.

Makasitomala onse azithunzi amapangidwa .icon-kuti akhale ndi malo oyenera a mayina ndi ma scoping, monga zida zathu zina. Izi zidzathandiza kupewa mikangano ndi zida zina.

Ma Glyphicons atipatsa mwayi wogwiritsa ntchito ma Halflings omwe ali mu zida zathu zotseguka malinga ngati tikupereka ulalo ndi ngongole pano muzolemba. Chonde lingalirani kuchita zomwezo pamapulojekiti anu.

Momwe mungagwiritsire ntchito

Bootstrap imagwiritsa ntchito <i>chizindikiro pazithunzi zonse, koma alibe kalasi yamilandu-chimake choyambirira chogawana. Kuti mugwiritse ntchito, ikani khodi ili pafupi kulikonse:

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

Palinso masitaelo omwe amapezeka pazithunzi zopindika (zoyera), zokonzedwa ndi gulu limodzi lowonjezera:

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

Pali makalasi 140 oti musankhe pazithunzi zanu. Ingowonjezerani <i>tag yokhala ndi makalasi oyenera ndipo mwakonzeka. Mutha kupeza mndandanda wathunthu mu sprites.less kapena pomwe pano m'chikalatachi.

Mungodziwiratu! Mukamagwiritsa ntchito m'mbali mwa zingwe zamalemba, monga mabatani kapena maulalo a nav, onetsetsani kuti mwasiya malo pambuyo pa <i>tagi kuti mutalikirane bwino.

Gwiritsani ntchito milandu

Zithunzi ndizabwino, koma munthu angazigwiritsa ntchito kuti? Nawa malingaliro angapo:

  • Monga zowonera pamayendedwe anu am'mbali
  • Kwa navigation yoyendetsedwa ndi zithunzi
  • Kuti mabatani athandizire kufotokozera tanthauzo la chochitika
  • Ndi maulalo oti mugawane zomwe munthu akupita

Kwenikweni, kulikonse komwe mungaike <i>tag, mutha kuyika chizindikiro.

Zitsanzo

Agwiritseni ntchito m'mabatani, m'magulu a batani lazida, kusakatula, kapena zolowetsa mafomu omwe mwakonzedweratu.