Msingi wa CSS

Juu ya kiunzi, vipengele vya msingi vya HTML vimeundwa na kuimarishwa kwa madarasa ya kupanuliwa ili kutoa mwonekano na hisia mpya, thabiti.

Vichwa na nakala ya mwili

Kiwango cha uchapaji

Gridi nzima ya uchapaji inategemea vigezo viwili vya Chini katika faili zetu za vigezo.less: @baseFontSizena @baseLineHeight. Ya kwanza ni saizi ya msingi ya fonti inayotumika kote na ya pili ni urefu wa mstari wa msingi.

Tunatumia vigezo hivyo, na baadhi ya hesabu, ili kuunda kando, paddings, na urefu wa mstari wa aina zetu zote na zaidi.

Mfano maandishi ya mwili

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.

Nakala ya mwili inayoongoza

Fanya aya isimame kwa kuongeza .lead.

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

h1. Kichwa 1

h2. Kichwa cha 2

h3. Kichwa cha 3

h4. Kichwa cha 4

h5. Kichwa cha 5
h6. Kichwa cha 6

Mkazo, anwani, na ufupisho

Kipengele Matumizi Hiari
<strong> Kwa kusisitiza kijisehemu cha maandishi na muhimu Hakuna
<em> Kwa kusisitiza kijisehemu cha maandishi na mkazo Hakuna
<abbr> Hufunga vifupisho na vifupisho ili kuonyesha toleo lililopanuliwa kwenye kielelezo

Jumuisha titlesifa ya hiari ya maandishi yaliyopanuliwa

Tumia .initialismdarasa kwa vifupisho vya herufi kubwa.
<address> Kwa habari ya mawasiliano kwa babu yake wa karibu au sehemu nzima ya kazi Hifadhi umbizo kwa kumalizia mistari yote kwa<br>

Kwa kutumia msisitizo

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.

Kumbuka: Jisikie huru kutumia <b>na <i>katika HTML5, lakini matumizi yao yamebadilika kidogo. <b>inakusudiwa kuangazia maneno au vifungu vya maneno bila kuwasilisha umuhimu wa ziada ilhali <i>mara nyingi ni kwa sauti, maneno ya kiufundi, n.k.

Mfano wa anwani

Hapa kuna mifano miwili ya jinsi <address>lebo inaweza kutumika:

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

Vifupisho vya mfano

Vifupisho vyenye titlesifa vina mpaka wa chini wenye vitone vyepesi na kishale cha usaidizi kinachoelea. Hii huwapa watumiaji dalili ya ziada ya kitu kitakachoonyeshwa kwenye kielelezo.

Ongeza initialismdarasa kwa ufupisho ili kuongeza uwiano wa uandishi kwa kuipa ukubwa mdogo wa maandishi.

HTML ndio kitu bora zaidi tangu mkate uliokatwa.

Kifupi cha neno sifa ni attr .

Nukuu za kuzuia

Kipengele Matumizi Hiari
<blockquote> Kipengele cha kiwango cha kuzuia kwa ajili ya kunukuu maudhui kutoka chanzo kingine

Ongeza citesifa ya URL chanzo

Tumia .pull-leftna .pull-rightmadarasa kwa chaguzi zilizoelea
<small> Kipengele cha hiari cha kuongeza dondoo linalomlenga mtumiaji, kwa kawaida mwandishi aliye na jina la kazi Weka <cite>kuzunguka kichwa au jina la chanzo

Ili kujumuisha nukuu ya kuzuia, funika HTML<blockquote> yoyote kama nukuu. Kwa nukuu moja kwa moja tunapendekeza a .<p>

Jumuisha <small>kipengele cha hiari ili kutaja chanzo chako na utapata kielelezo cha em &mdash;kabla yake kwa madhumuni ya uwekaji mitindo.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imefikia kiwango cha awali. </ p>
  3. <small> Mtu maarufu </small>
  4. </blockquote>

Nukuu za mfano

Vizuizi chaguo-msingi vimeundwa kama vile:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imefikia kiwango cha awali.

Mtu maarufu katika Mwili wa kazi

Ili kuelea blockquote yako kulia, ongeza class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imefikia kiwango cha awali.

Mtu maarufu katika Mwili wa kazi

Orodha

Haijaagizwa

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Uwezeshaji katika 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

Isiyo na mtindo

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Uwezeshaji katika 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

Imeagizwa

<ol>

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

Maelezo

<dl>

Orodha za maelezo
Orodha ya maelezo ni kamili kwa kufafanua maneno.
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.

Maelezo ya mlalo

<dl class="dl-horizontal">

Orodha za maelezo
Orodha ya maelezo ni kamili kwa kufafanua maneno.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Vichwa juu! Orodha za maelezo mlalo zitapunguza maneno ambayo ni marefu sana kutoshea katika kurekebisha safu wima ya kushoto text-overflow. Katika maeneo finyu ya kutazama, yatabadilika kuwa mpangilio chaguomsingi wa kura.

Katika mstari

Funga vijisehemu vya ndani vya msimbo kwa <code>.

  1. Kwa mfano , <code> sehemu </ code > inapaswa kufungwa kama inline .

Kizuizi cha msingi

Tumia <pre>kwa mistari mingi ya msimbo. Hakikisha umeepuka mabano yoyote katika msimbo ili utoe sahihi.

<p>Mfano wa maandishi hapa...</p>
  1. <kabla>
  2. <p>Mfano wa maandishi hapa...</p>
  3. </ pre>

Kumbuka: Hakikisha umeweka msimbo ndani ya <pre>vitambulisho karibu na kushoto iwezekanavyo; itatoa tabo zote.

Unaweza kuongeza kwa hiari .pre-scrollabledarasa ambalo litaweka urefu wa juu wa 350px na kutoa upau wa kusogeza wa y-axis.

Google Pretify

Chukua <pre>kipengele sawa na uongeze madarasa mawili ya hiari kwa uwasilishaji ulioboreshwa.

  1. <p> Mfano wa maandishi hapa... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Mfano wa maandishi hapa...</p>
  4. </ pre>

Pakua google-code-prettify na utazame usomaji wa jinsi ya kutumia.

Alama ya jedwali

Lebo Maelezo
<table> Kipengele cha kufunga kwa ajili ya kuonyesha data katika umbizo la jedwali
<thead> Kipengele cha chombo cha safu mlalo za vichwa vya jedwali ( <tr>) kuweka lebo kwenye safu wima za jedwali
<tbody> Kipengele cha chombo cha safu za jedwali ( <tr>) kwenye mwili wa jedwali
<tr> Kipengele cha chombo cha seti ya seli za jedwali ( <td>au <th>) zinazoonekana kwenye safu mlalo moja
<td> Seli chaguomsingi ya jedwali
<th> Seli maalum za jedwali kwa safu wima (au safu mlalo, kulingana na upeo na uwekaji) lebo
Lazima zitumike ndani ya<thead>
<caption> Maelezo au muhtasari wa kile ambacho jedwali inashikilia, muhimu sana kwa visoma skrini
  1. <meza>
  2. <kichwa>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </ tr>
  7. </ kichwa>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </ tr>
  13. </tbody>
  14. </ meza>

Chaguzi za meza

Jina Darasa Maelezo
Chaguomsingi Hakuna Hakuna mitindo, safu wima na safu
Msingi .table Mistari ya mlalo pekee kati ya safu
Imepakana .table-bordered Huzungusha pembe na kuongeza mpaka wa nje
Zebra-stripe .table-striped Huongeza mandharinyuma ya kijivu hafifu kwa safu mlalo zisizo za kawaida (1, 3, 5, nk)
Imefupishwa .table-condensed Hukata pedi za wima katikati, kutoka 8px hadi 4px, ndani ya yote tdna thvipengele

Majedwali ya mfano

1. Mitindo ya meza chaguo-msingi

Jedwali hupangwa kiotomatiki na mipaka michache tu ili kuhakikisha usomaji na kudumisha muundo. Na 2.0, .tabledarasa linahitajika.

  1. <table class = "meza" >
  2. </ meza>
# Jina la kwanza Jina la familia Jina la mtumiaji
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @twitter

2. Jedwali la mistari

Pata kupendeza kidogo na meza zako kwa kuongeza zebra-striping-ongeza tu .table-stripeddarasa.

Kumbuka: Majedwali yenye milia hutumia kiteuzi cha :nth-childCSS na haipatikani katika IE7-IE8.

  1. <table class = "table table-striped" >
  2. </ meza>
# Jina la kwanza Jina la familia Jina la mtumiaji
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @twitter

3. Jedwali la mipaka

Ongeza mipaka kuzunguka jedwali zima na pembe za mviringo kwa madhumuni ya urembo.

  1. <table class = "table-bordered" >
  2. </ meza>
# Jina la kwanza Jina la familia Jina la mtumiaji
1 Weka alama Otto @mdo
Weka alama Otto @getbootstrap
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter

4. Jedwali lililofupishwa

Fanya majedwali yako yashikamane zaidi kwa kuongeza .table-condenseddarasa ili kukata pedi za seli za jedwali kwa nusu (kutoka 8px hadi 4px).

  1. <table class = "table-condensed table" >
  2. </ meza>
# Jina la kwanza Jina la familia Jina la mtumiaji
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter

5. Unganisha zote!

Jisikie huru kuchanganya darasa zozote za jedwali ili kufikia mwonekano tofauti kwa kutumia aina zozote zinazopatikana.

  1. <table class = "table-striped table-linebordered table-condensed" >
  2. ...
  3. </ meza>
Jina kamili
# Jina la kwanza Jina la familia Jina la mtumiaji
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter

Flexible HTML na CSS

Sehemu bora zaidi kuhusu fomu katika Bootstrap ni kwamba pembejeo na vidhibiti vyako vyote vinaonekana vyema bila kujali jinsi unavyoviunda kwenye lebo yako. Hakuna HTML ya ziada inayohitajika, lakini tunatoa muundo kwa wale wanaohitaji.

Mipangilio changamano zaidi huja na madarasa mafupi na yanayoweza kupanuka kwa urahisi wa kuweka mitindo na kufunga matukio, kwa hivyo unahudumiwa katika kila hatua.

Layouts nne pamoja

Bootstrap inakuja na usaidizi wa aina nne za muundo wa fomu:

  • Wima (chaguo-msingi)
  • Tafuta
  • Katika mstari
  • Mlalo

Aina tofauti za mipangilio ya fomu zinahitaji mabadiliko fulani ili kuweka alama, lakini vidhibiti vyenyewe hubaki na hufanya kazi sawa.

Majimbo ya udhibiti na zaidi

Fomu za Bootstrap ni pamoja na mitindo ya vidhibiti vyote vya fomu msingi kama vile ingizo, eneo la maandishi, na uchague ungetarajia. Lakini pia inakuja na idadi ya vipengee maalum kama pembejeo zilizoambatishwa na zilizotanguliwa na usaidizi wa orodha za visanduku vya kuteua.

Mataifa kama makosa, onyo na mafanikio yanajumuishwa kwa kila aina ya udhibiti wa fomu. Pia imejumuishwa ni mitindo ya vidhibiti vilivyozimwa.

Aina nne za fomu

Bootstrap hutoa ghafi rahisi na mitindo kwa mitindo minne ya fomu za kawaida za wavuti.

Jina Darasa Maelezo
Wima (chaguo-msingi) .form-vertical (haihitajiki) Lebo zilizopangwa kwa rafu, zilizopangiliwa kushoto juu ya vidhibiti
Katika mstari .form-inline Lebo zilizopangiliwa kushoto na vidhibiti vya kuzuia ndani ya mstari kwa mtindo wa kushikana
Tafuta .form-search Ingizo la maandishi yenye mduara wa ziada kwa urembo wa kawaida wa utafutaji
Mlalo .form-horizontal Elekea kushoto, lebo zilizopangiliwa kulia kwenye mstari sawa na vidhibiti

Fomu za mfano zinazotumia vidhibiti vya fomu tu, hakuna alama za ziada

Fomu ya msingi

Chaguomsingi mahiri na nyepesi bila alama za ziada.

Mfano wa maandishi ya usaidizi wa kiwango cha kuzuia hapa.

  1. <form class = "well" >
  2. <label> Jina la lebo </label>
  3. <input type = "text" class = "span3" kishika nafasi = "Andika kitu..." >
  4. <span class = "help-block" > Mfano wa maandishi ya usaidizi wa kiwango cha kuzuia hapa. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Niangalie
  7. </lebo>
  8. <button type = "submit" class = "btn" > Wasilisha </button>
  9. </ fomu>

Tafuta fomu

Ongeza .form-searchkwa fomu na .search-querykwa input.

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

Fomu ya ndani

Ongeza .form-inlineili kurekebisha mpangilio wima na nafasi za vidhibiti vya fomu.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Nenosiri" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Nikumbuke
  6. </lebo>
  7. <button type = "submit" class = "btn" > Ingia </button>
  8. </ fomu>

Fomu za usawa

Zinazoonyeshwa upande wa kulia ni vidhibiti vyote chaguomsingi vya fomu tunazotumia. Hii ndio orodha iliyo na vitone:

  • maandishi (maandishi, nenosiri, barua pepe, nk)
  • kisanduku cha kuteua
  • redio
  • chagua
  • kuchagua nyingi
  • ingizo la faili
  • eneo la maandishi

Kando na maandishi ya fomu huria, ingizo lolote la maandishi ya HTML5 linaonekana hivyo.

Alama ya mfano

Kwa kuzingatia mpangilio wa fomu ya mfano hapo juu, hapa kuna alama inayohusishwa na kikundi cha kwanza cha kuingiza na kudhibiti. The .control-group, .control-label, na .controlsmadarasa yote yanahitajika kwa ajili ya kupiga maridadi.

  1. <form class = "form-horizontal" >
  2. <seti ya uwanja>
  3. <legend> Nakala ya hadithi </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" kwa = "input01" > Ingizo la maandishi </label>
  6. <div class = "vidhibiti" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Maandishi ya usaidizi yanayotumika </p>
  9. </ div>
  10. </ div>
  11. </fieldset>
  12. </ fomu>

Majimbo ya udhibiti wa fomu

Bootstrap huangazia mitindo kwa umakini na hali zinazotumika na kivinjari disabled. Tunaondoa Webkit chaguo-msingi outlinena kuweka a box-shadowmahali pake kwa :focus.


Uthibitishaji wa fomu

Pia inajumuisha mitindo ya uthibitishaji kwa makosa, maonyo na mafanikio. Ili kutumia, ongeza darasa la makosa kwenye .control-group.

  1. <seti ya uwanja
  2. class = "control-group error" >
  3. </fieldset>
Thamani fulani hapa
Huenda kuna kitu kimeenda vibaya
Tafadhali sahihisha hitilafu
Woohoo!
Woohoo!

Kupanua vidhibiti vya fomu

Tengeneza na uongeze pembejeo

Vikundi vya ingizo—pamoja na maandishi yaliyoongezwa au yaliyotanguliwa—hutoa njia rahisi ya kutoa muktadha zaidi wa ingizo lako. Mifano mizuri ni pamoja na ishara ya @ kwa majina ya watumiaji ya Twitter au $ kwa ajili ya fedha.


Visanduku vya kuteua na redio

Hadi v1.4, Bootstrap ilihitaji alama ya ziada karibu na visanduku vya kuteua na redio ili kuvipanga. Sasa, ni jambo rahisi kurudia <label class="checkbox">ile inayofunika <input type="checkbox">.

Visanduku vya kuteua vya ndani na redio pia vinatumika. Ongeza tu .inlinekwa yoyote .checkboxau .radiona umemaliza.


Fomu za ndani na uambatanishe/utayarishe

Ili kutumia viingizi vya awali au vya kuambatanisha katika fomu ya ndani, hakikisha kuwa umeweka .add-onna inputkwenye mstari sawa, bila nafasi.


Nakala ya usaidizi wa fomu

Ili kuongeza maandishi ya usaidizi kwa ingizo lako la fomu, jumuisha maandishi ya usaidizi ya ndani <span class="help-inline">au maandishi ya usaidizi <p class="help-block">baada ya kipengee cha kuingiza.

Tumia .span*madarasa sawa kutoka kwa mfumo wa gridi ya taifa kwa saizi za ingizo.

Unaweza pia kutumia madarasa tuli ambayo hayana ramani kwa gridi ya taifa, kukabiliana na mitindo sikivu ya CSS, au akaunti kwa aina tofauti za vidhibiti (km, inputdhidi ya select. ).

@

Hapa kuna maandishi ya usaidizi

.00
Hapa kuna maandishi zaidi ya usaidizi
$ .00

Kumbuka: Lebo huzunguka chaguo zote kwa maeneo makubwa zaidi ya kubofya na fomu inayoweza kutumika zaidi.

Kitufe darasa="" Maelezo
btn Kitufe cha kawaida cha kijivu chenye gradient
btn btn-primary Hutoa uzito wa ziada wa kuona na kubainisha kitendo cha msingi katika seti ya vitufe
btn btn-info Inatumika kama mbadala kwa mitindo chaguo-msingi
btn btn-success Inaonyesha hatua iliyofanikiwa au chanya
btn btn-warning Inaonyesha tahadhari inapaswa kuchukuliwa na hatua hii
btn btn-danger Huonyesha kitendo hatari au kinachoweza kuwa hasi
btn btn-inverse Kitufe mbadala cha kijivu giza, kisichofungwa kwa kitendo cha kisemantiki au matumizi

Vifungo kwa vitendo

Kama kawaida, vitufe vinapaswa kutumika kwa vitendo pekee wakati viungo vitatumika kwa vitu. Kwa mfano, "Pakua" inapaswa kuwa kitufe wakati "shughuli za hivi majuzi" zinapaswa kuwa kiungo.

Mitindo ya vifungo inaweza kutumika kwa kitu chochote na .btndarasa kutumika. Walakini, kwa kawaida utataka kutumia haya kwa <a>na <button>vipengele pekee.

Utangamano wa kivinjari

IE9 haipunguzi viwango vya chinichini kwenye pembe za mviringo, kwa hivyo tunaiondoa. Kuhusiana, IE9 inaharibu buttonvipengee vilivyozimwa, ikitoa maandishi ya kijivu na kivuli cha maandishi kibaya ambacho hatuwezi kurekebisha.

Saizi nyingi

Ungependa vitufe vikubwa au vidogo? Ongeza .btn-large, .btn-small, au .btn-minikwa saizi mbili za ziada.


Jimbo la walemavu

Kwa vitufe vilivyozimwa, ongeza .disableddarasa kwenye viungo na disabledsifa ya <button>vipengele.

Kiungo cha msingi Kiungo

Vichwa juu! Tunatumia .disabledkama darasa la matumizi hapa, sawa na .activedarasa la kawaida, kwa hivyo hakuna kiambishi awali kinachohitajika.

Darasa moja, vitambulisho vingi

Tumia .btndarasa kwenye <a>, <button>, au <input>kipengele.

Kiungo
  1. <a class = "btn" href = ""> Kiungo </a> _
  2. <button class = "btn" type = "submit" >
  3. Kitufe
  4. </kifungo>
  5. <input class = "btn" type = "kifungo"
  6. value = "Ingizo" >
  7. <input class = "btn" type = "submit"
  8. value = "Wasilisha" >

Kama mazoezi bora, jaribu kulinganisha kipengele kwa ajili yako ili kuhakikisha uwasilishaji wa kivinjari tofauti. Ikiwa unayo input, tumia <input type="submit">kwa kitufe chako.

  • icon-kioo
  • icon-muziki
  • icon-tafuta
  • icon-bahasha
  • icon-moyo
  • ikoni-nyota
  • ikoni-nyota-tupu
  • icon-mtumiaji
  • icon-filamu
  • icon-th-kubwa
  • ikoni-th
  • icon-th-orodha
  • ikoni-sawa
  • icon-ondoa
  • ikoni-kuza-ndani
  • ikoni-kuza-nje
  • icon-off
  • ishara-ikoni
  • icon-cog
  • ikoni-takataka
  • ikoni-nyumbani
  • icon-faili
  • icon-wakati
  • icon-barabara
  • ikoni-kupakua-alt
  • ikoni-kupakua
  • icon-upload
  • ikoni-kikasha
  • icon-play-mduara
  • ikoni-rudia
  • icon-onyesha upya
  • ikoni-orodha-alt
  • icon-lock
  • icon-bendera
  • icon-headphones
  • ikoni-kiasi-kuzimwa
  • ikoni-kiasi-chini
  • icon-kiasi-up
  • ikoni-qrcode
  • icon-barcode
  • icon-tag
  • icon-tagi
  • icon-kitabu
  • ikoni-alamisho
  • icon-print
  • ikoni-kamera
  • ikoni-fonti
  • icon-bold
  • ikoni-italiki
  • icon-text-urefu
  • icon-text-upana
  • ikoni-panganisha-kushoto
  • ikoni-panganisha-katikati
  • ikoni-panganisha-kulia
  • icon-align-justify
  • icon-orodha
  • ikoni-indent-kushoto
  • ikoni-indent-kulia
  • icon-facetime-video
  • icon-picha
  • icon-penseli
  • icon-ramani-alama
  • ikoni-rekebisha
  • icon-tint
  • ikoni-hariri
  • icon-shiriki
  • icon-angalia
  • ikoni-sogeza
  • icon-hatua-nyuma
  • ikoni-haraka-nyuma
  • ikoni-nyuma
  • icon-play
  • icon-pause
  • icon-stop
  • ikoni-mbele
  • icon-haraka-mbele
  • icon-hatua-mbele
  • icon-toa
  • ikoni-chevron-kushoto
  • ikoni-chevron-kulia
  • icon-plus-saini
  • icon-minus-saini
  • ishara-ondoa-saini
  • ikoni-sawa-saini
  • icon-swali-ishara
  • ishara-maelezo-ishara
  • icon-screenshot
  • ikoni-ondoa-mduara
  • ikoni-sawa-mduara
  • ikoni-marufuku-duara
  • ikoni-mshale-kushoto
  • ikoni-mshale-kulia
  • ikoni-mshale-juu
  • icon-arrow-down
  • icon-share-alt
  • ikoni-resize-imejaa
  • ikoni-resize-ndogo
  • icon-plus
  • icon-minus
  • ikoni ya nyota
  • icon-mshangao-ishara
  • icon-zawadi
  • icon-jani
  • icon-moto
  • ikoni-jicho-wazi
  • icon-jicho-funga
  • icon-onyo-ishara
  • icon-ndege
  • icon-kalenda
  • icon-nasibu
  • icon-maoni
  • ikoni-sumaku
  • icon-chevron-up
  • ikoni-chevron-chini
  • icon-retweet
  • icon-shopping-cart
  • ikoni-folda-funga
  • icon-folda-wazi
  • ikoni-resize-wima
  • ikoni-resize-usawa
  • ikoni-hdd
  • icon-bullhorn
  • ikoni-kengele
  • icon-cheti
  • icon-gumba-up
  • icon-domba-chini
  • ikoni-mkono-kulia
  • ikoni-mkono-kushoto
  • icon-mkono-up
  • ikoni-chini
  • ikoni-mduara-mshale-kulia
  • ikoni-duara-mshale-kushoto
  • ikoni-mduara-mshale-juu
  • ikoni-mduara-mshale-chini
  • icon-globe
  • icon-wrench
  • icon-kazi
  • kichujio cha ikoni
  • icon-briefcase
  • ikoni ya skrini nzima

Imejengwa kama sprite

Badala ya kufanya kila aikoni kuwa ombi la ziada, tumezikusanya katika sprite—mlundo wa picha katika faili moja inayotumia CSS kuweka picha kwenye background-position. Hii ndiyo njia ile ile tunayotumia kwenye Twitter.com na imetufanyia kazi vizuri.

Madarasa yote ya aikoni yamewekwa awali .icon-kwa nafasi sahihi ya majina na upeo, kama vile vipengele vyetu vingine. Hii itasaidia kuzuia migogoro na zana zingine.

Glyphicons imeturuhusu kutumia Halflings iliyowekwa katika zana huria ya zana mradi tu tutoe kiungo na mkopo hapa katika hati. Tafadhali zingatia kufanya vivyo hivyo katika miradi yako.

Jinsi ya kutumia

Bootstrap hutumia <i>lebo kwa aikoni zote, lakini hazina aina ya kesi—kiambishi awali tu kilichoshirikiwa. Ili kutumia, weka nambari ifuatayo karibu popote:

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

Pia kuna mitindo inayopatikana kwa ikoni zilizogeuzwa (nyeupe), zilizotayarishwa na darasa moja la ziada:

  1. <i class = "ikoni-ya utafutaji ikoni-nyeupe" ></i>

Kuna madarasa 140 ya kuchagua kutoka kwa ikoni zako. Ongeza tu <i>lebo iliyo na madarasa sahihi na uko tayari. Unaweza kupata orodha kamili katika sprites.less au papa hapa katika hati hii.

Vichwa juu! Unapotumia kando ya mifuatano ya maandishi, kama vile vitufe au viungo vya nav, hakikisha kuwa umeacha nafasi baada ya <i>lebo kwa nafasi ifaayo.

Tumia kesi

Icons ni nzuri, lakini mtu angezitumia wapi? Hapa kuna mawazo machache:

  • Kama picha za usogezaji wa utepe wako
  • Kwa urambazaji unaoendeshwa na ikoni pekee
  • Ili vitufe visaidie kuwasilisha maana ya kitendo
  • Na viungo vya kushiriki muktadha kwenye lengwa la mtumiaji

Kimsingi, mahali popote unaweza kuweka <i>lebo, unaweza kuweka ikoni.

Mifano

Zitumie katika vitufe, vikundi vya vitufe kwa upau wa vidhibiti, usogezaji, au ingizo za fomu zilizotangulizwa.