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 `title`pazowonjezera Gwiritsani `.initialism`ntchito 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 `cite`mawonekedwe a URL yoyambira Gwiritsani ntchito `.pull-left`ndi `.pull-right`makalasi 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 —patsogolo pake pazolinga zamakongoletsedwe.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante venenatis. </p>
  <wamng'ono> Wina wotchuka </ wamng'ono>
</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>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ndi massa
Facilisis mu pretium nisl aliquet
Chotsatira cha volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
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>.

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>

<pre>
  <p>Zitsanzo za mawu apa...</p>
</ 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.

<p> Chitsanzo cha mawu apa... </p>

<pre class = "prettyprint 
     mzere" >
  <p>Zitsanzo za mawu apa...</p>
</ 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

<tebulo>
  <mutu>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </ mutu>
  <chinthu>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </ thupi>
</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 `td`ndi `th`zinthu

Matebulo achitsanzo

1. Masitayilo a tebulo

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

<table class = "table" > 
  …
</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.

<table class = "table table-mizere" > 
  …
</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.

<table class = "table-bordered" > 
  …
</table>

#	Dzina loyamba	Dzina lomaliza	Dzina lolowera
1	Mark	Otto	@mdo
1	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).

<table class = "table table-condensed" > 
  …
</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.

<tebulo kalasi = "tebulo-mizeremizeremizere tebulo-m'malire tebulo-condensed" > 
  ...
</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.

<form class = "chabwino" > 
  <label> Dzina lalemba </ label>
  <input type = "text" class = "span3" placeholder = " Type something..." >   
  <span class = "help-block" > Maupangiri othandizira apa. </span> 
  <label class = "checkbox" > 
    <input type = "checkbox" > Ndifufuzeni 
  </ label>
  <button type = "submit" class = "btn" > Tumizani </ batani>  
</ fomu>

Fufuzani mawonekedwe

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

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

Fomu yapaintaneti

Onjezani .form-inlinekuwongolera koyima ndi masitayilo a mawonekedwe.

<form class = "well form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Imelo" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Ndikumbukireni 
  </ label>
  <button type = "submit" class = "btn" > Lowani </ batani>  
</ 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

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.

<form class = "form-horizontal" > 
  <munda>
    <legend> Zolemba za nthano </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > Kulowetsa mawu </label>  
      <div class = "controls" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Mawu othandizira </p> 
      </div>
    </div>
  </fieldset>
</ 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.

<magawo
  class = "control-group error" >
  …
</fieldset>

Kuyika kokhazikika

Zolemba zosasinthika

Mtengo wina apa

Kulowetsa koyimitsidwa

Cholembera choyimitsidwa

Ili ndi bokosi lozimitsa

Lowetsani ndi chenjezo

Mwina china chake chalakwika

Lowetsani ndi zolakwika

Chonde konzani cholakwikacho

Kulowetsa mwachipambano

Uwu!

Sankhani bwino

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.

Pangani ma grid size

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

Kukula kosinthika

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

Mawu okonzedweratu

Nawa mawu othandizira

Mawu owonjezera

.00

Nawa mau ena othandizira

Onjezerani ndi kukonzekera

$ .00

Onjezerani ndi batani

onjezerani mabatani awiri

Mabokosi apaintaneti

1 2 3

Mabokosi

Njira yoyamba ndi iyi ndi iyo-onetsetsani kuti mukuphatikiza chifukwa chake zili bwino Njira yachiwiri ingathenso kufufuzidwa ndikuphatikizidwa muzotsatira za fomu Njira yachitatu ingathe-inde, munangoganiza - iwunikiridwanso ndikuphatikizidwa muzotsatira zamafomu

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

Makatani a wailesi

Njira yoyamba ndi iyi ndi iyo-onetsetsani kuti mukuphatikiza chifukwa chake zili bwino Njira yachiwiri ikhoza kukhala china chake ndipo kuyisankha idzachotsa kusankha imodzi

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.

<a class = "btn" href = ""> Link </a> _  
<button class = "btn" type = "submit" >  
  Batani
</ batani>
<input class = "btn" type = "batani"  
         value = "Zolowetsa" >
<input class = "btn" type = "submit"  
         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:

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

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

<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.

Tsitsaninso Onani Chotsani

Ndemanga Zokonda Zambiri

Mitu ya kalembedwe, ndime, mindandanda, ndi zinthu zina zamtundu wapaintaneti