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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor dalali. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

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 `title`sifa ya hiari ya maandishi yaliyopanuliwa Tumia `.initialism`darasa 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 `cite`sifa ya URL chanzo Tumia `.pull-left`na `.pull-right`madarasa 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 —kabla yake kwa madhumuni ya uwekaji mitindo.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imefikia kiwango cha awali. </ p>
  <small> Mtu maarufu </small>
</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>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Uwezeshaji katika pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
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>.

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>

<kabla>
  <p>Mfano wa maandishi hapa...</p>
</ 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.

<p> Mfano wa maandishi hapa... </p>

<pre class = "prettyprint 
     linenums" >
  <p>Mfano wa maandishi hapa...</p>
</ 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

<meza>
  <kichwa>
    <tr>
      <th> … </th>
      <th> … </th>
    </ tr>
  </ kichwa>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </ tr>
  </tbody>
</ 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 `td`na `th`vipengele

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.

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

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

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

#	Jina la kwanza	Jina la familia	Jina la mtumiaji
1	Weka alama	Otto	@mdo
1	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).

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

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

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

Tafuta fomu

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

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

Fomu ya ndani

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

<form class = "well form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Nenosiri" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Nikumbuke 
  </lebo>
  <button type = "submit" class = "btn" > Ingia </button>  
</ 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

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.

<form class = "form-horizontal" > 
  <seti ya uwanja>
    <legend> Nakala ya hadithi </legend>
    <div class = "control-group" > 
      <label class = "control-label" kwa = "input01" > Ingizo la maandishi </label>  
      <div class = "vidhibiti" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Maandishi ya usaidizi yanayotumika </p> 
      </ div>
    </ div>
  </fieldset>
</ 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.

<seti ya uwanja
  class = "control-group error" >
  …
</fieldset>

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.

Ukubwa wa gridi ya fomu

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

Ukubwa mbadala

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

Maandishi yaliyotangulizwa

Hapa kuna maandishi ya usaidizi

Maandishi yaliyoongezwa

.00

Hapa kuna maandishi zaidi ya usaidizi

Kuongeza na kutayarisha

$ .00

Ongeza na kitufe

Nyongeza ya vifungo viwili

Visanduku vya kuteua vya ndani

1 2 3

Visanduku vya kuteua

Chaguo la kwanza ni hili na lile—hakikisha umejumuisha kwa nini ni nzuri Chaguo la pili pia linaweza kuangaliwa na kujumuishwa katika matokeo ya fomu Chaguo la tatu linaweza—ndiyo, ulikisia—pia kuangaliwa na kujumuishwa katika matokeo ya fomu

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

Vifungo vya redio

Chaguo la kwanza ni hili na lile—hakikisha umejumuisha kwa nini ni nzuri Chaguo mbili ni kitu kingine na kuichagua kutaondoa chaguo la kwanza

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.

<a class = "btn" href = ""> Kiungo </a> _  
<button class = "btn" type = "submit" >  
  Kitufe
</kifungo>
<input class = "btn" type = "kifungo"  
         value = "Ingizo" >
<input class = "btn" type = "submit"  
         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:

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

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

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

Kuna madarasa 120 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.

Onyesha upya Angalia Futa

Maoni Mipangilio Maelezo Zaidi

Vichwa vya uchapaji , aya, orodha, na vipengele vingine vya aina ya ndani