Typographic scale

Tag nrho daim phiaj typographic yog raws li ob qhov sib txawv tsawg hauv peb cov ntaub ntawv variables.less: @baseFontSizethiab@baseLineHeight . Qhov thib ib yog lub hauv paus font-loj siv thoob plaws thiab qhov thib ob yog lub hauv paus kab-qhov siab.

Peb siv cov kev hloov pauv no, thiab qee qhov lej, los tsim cov npoo, paddings, thiab kab-qhov siab ntawm txhua hom thiab ntau dua.

Piv txwv lub cev ntawv

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.

Lead lub cev luam

Ua ib kab lus sawv tawm los ntawm kev ntxiv .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, nws tsis yog commodo luctus.

Siv qhov tseem ceeb

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

Nco tseg: Xav tias dawb siv <b>thiab <i>hauv HTML5, tab sis lawv cov kev siv tau hloov me ntsis. <b>yog txhais tau hais tias tseem ceeb cov lus lossis kab lus yam tsis muaj qhov tseem ceeb ntxiv thaum <i>feem ntau yog rau lub suab, cov lus qhia, thiab lwm yam.

Piv txwv chaw nyob

Nov yog ob qho piv txwv ntawm yuav ua li cas <address>siv tag:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Lub Npe Lub Npe
[email protected]

Piv txwv abbreviations

Cov ntawv luv luv nrog tus titlecwj pwm muaj lub teeb dotted hauv qab ciam teb thiab tus cursor pab ntawm hover. Qhov no ua rau cov neeg siv ntxiv qhia tias ib yam dab tsi yuav tshwm sim ntawm hover.

Ntxiv cov initialismchav kawm rau cov ntawv luv kom nce typographic sib haum xeeb los ntawm muab nws me me me me ntawv nyeem.

HTML yog qhov zoo tshaj plaws txij li lub khob cij hlais.

Lub ntsiab lus ntawm lo lus attribute yog attr .

Txhawm rau suav nrog blockquote, qhwv <blockquote>ib ncig ntawm txhua HTML raws li qhov tsocai. Rau cov quotes ncaj peb pom zoo a <p>.

suav nrog ib qho kev xaiv <small>los hais txog koj qhov chaw thiab koj yuav tau txais em khiav —ua ntej nws rau lub hom phiaj styling.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> Ib tug neeg nto moo </small>
</blockquote>

Default blockquotes yog styled xws li:

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

Ib tug neeg nto moo hauv Lub Cev Ua Haujlwm

Txhawm rau ntab koj blockquote mus rau sab xis, ntxiv class="pull-right":

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

Ib tug neeg nto moo hauv Lub Cev Ua Haujlwm

Unordered

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem thiab massa
• Facilisis nyob rau hauv pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat ntawm
• Faucibus porta lacus fringilla vel
• Aenean zaum amet erat nunc
• Eget porttitor lorem

Tsis zoo li

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem thiab massa
• Facilisis nyob rau hauv pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat ntawm
• Faucibus porta lacus fringilla vel
• Aenean zaum amet erat nunc
• Eget porttitor lorem

Txiav txim

<ol>

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

Kev piav qhia

<dl>

Cov npe piav qhia

Daim ntawv teev lus piav qhia zoo meej rau kev txhais cov ntsiab lus.

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.

Kab rov tav piav qhia

<dl class="dl-horizontal">

Cov npe piav qhia

Daim ntawv teev lus piav qhia zoo meej rau kev txhais cov ntsiab lus.

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, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

---

Tau taub hau! Kab rov tav cov npe piav qhia yuav txiav cov ntsiab lus uas ntev dhau los ua kom haum rau sab laug kho text-overflow. Nyob rau hauv nqaim viewports, lawv yuav hloov mus rau lub default stacked layout.

Hauv kab

Qhwv inline snippet ntawm code nrog <code>.

Piv txwv li , <code> seem </ code > yuav tsum tau qhwv li inline .  

Basic thaiv

Siv <pre>rau ntau kab ntawm cov cai. Nco ntsoov khiav txhua lub kaum sab xis hauv cov cai rau kev ua kom raug.

<p>Simple text here...</p>

<pre>
  <p>Sample text here...</p>
</pre>

Nco tseg: Nco ntsoov khaws cov lej hauv<pre> cov cim npe ze rau sab laug li sai tau; nws yuav muab tag nrho cov tabs.

Koj tuaj yeem xaiv ntxiv cov .pre-scrollablechav kawm uas yuav teeb tsa max-qhov siab ntawm 350px thiab muab y-axis scrollbar.

Google Prettify

Siv tib lub <pre>ntsiab lus thiab ntxiv ob chav kawm xaiv rau kev ua kom zoo dua qub.

<p> Sample text here... </p>

<pre class = "prettyprint 
     cov ntaub ntawv" >
  <p>Sample text here...</p>
</pre>

Rub tawm google-code-prettify thiab saib readme rau kev siv.

Tag	Kev piav qhia
<table>	Wrapping keeb los tso saib cov ntaub ntawv hauv hom ntawv tabular
<thead>	Cov khoom ntim rau lub rooj header kab ( <tr>) rau cov ntawv sau cov kab lus
<tbody>	Thawv khoom rau kab kab ( <tr>) nyob rau hauv lub cev ntawm lub rooj
<tr>	Thawv khoom rau ib pawg ntawm cov kab lus ( <td>lossis <th>) uas tshwm ntawm ib kab
<td>	Default rooj cell
<th>	Cov lus tshwj xeeb ntawm tes rau kab (los yog kab, nyob ntawm seb thiab qhov chaw) cov ntawv yuav tsum tau siv nyob rau hauv a<thead>
<caption>	Cov lus piav qhia lossis cov ntsiab lus ntawm lub rooj tuav, tshwj xeeb tshaj yog muaj txiaj ntsig zoo rau cov neeg nyeem ntawv

<tab>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Cov ntxhuav tau cia li styled nrog tsuas yog ob peb ciam teb kom paub meej nyeem tau thiab tswj cov qauv. Nrog 2.0, .tablechav kawm yuav tsum.

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

#	Lub Npe	Lub Npe	Tus neeg siv lub npe
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry	noog	@twitter

Tau txais me ntsis zoo nkauj nrog koj cov ntxhuav los ntawm kev ntxiv zebra-striping - tsuas yog ntxiv cov .table-stripedchav kawm.

Lus Cim: Cov kab kab kab siv :nth-childCSS xaiv thiab tsis muaj nyob hauv IE7-IE8.

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

#	Lub Npe	Lub Npe	Tus neeg siv lub npe
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry	noog	@twitter

Ntxiv ciam teb nyob ib ncig ntawm tag nrho cov rooj thiab cov ces kaum sib npaug rau lub hom phiaj zoo nkauj.

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

#	Lub Npe	Lub Npe	Tus neeg siv lub npe
1	Mark	Otto	@mdo
	Mark	Otto	@getbootstrap
2	Yakhauj	Thornton	@fat
3	Larry noog		@twitter

Ua kom koj cov ntxhuav ntau dua los ntawm kev ntxiv cov .table-condensedchav kawm los txiav cov lus cell padding hauv ib nrab (los ntawm 8px txog 4px).

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

#	Lub Npe	Lub Npe	Tus neeg siv lub npe
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry noog		@twitter

Xav tias dawb los ua ke ib qho ntawm cov chav kawm ntawv kom ua tiav qhov sib txawv los ntawm kev siv ib qho ntawm cov chav kawm muaj.

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

	Lub npe
#	Lub Npe	Lub Npe	Tus neeg siv lub npe
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry noog		@twitter

Yooj yim HTML thiab CSS

Qhov zoo tshaj plaws txog cov ntawv hauv Bootstrap yog tias tag nrho koj cov tswv yim thiab kev tswj hwm zoo li zoo txawm tias koj tsim lawv li cas hauv koj cov cim. Tsis xav tau HTML superfluous, tab sis peb muab cov qauv rau cov neeg xav tau.

Cov txheej txheem nyuaj dua tuaj nrog cov chav kawm succinct thiab scalable rau kev yooj yim styling thiab kev tshwm sim losis tswvyim dabtsi, yog li koj nyob nraum them ntawm txhua kauj ruam.

Plaub layouts suav nrog

Bootstrap los nrog kev txhawb nqa rau plaub hom ntawv layouts:

• Vertical (default)
• Nrhiav
• Hauv kab
• Kab rov tav

Ntau hom kev layouts xav tau qee qhov kev hloov pauv rau kev kos npe, tab sis cov tswj lawv tus kheej nyob twj ywm thiab coj tus cwj pwm zoo ib yam.

Tswj xeev thiab lwm yam

Bootstrap cov ntaub ntawv suav nrog cov qauv rau txhua lub hauv paus daim ntawv tswj hwm xws li cov tswv yim, textarea, thiab xaiv koj xav tau. Tab sis nws kuj los nrog ib tug xov tooj ntawm kev cai Cheebtsam xws li appended thiab prepended inputs thiab txhawb rau cov npe ntawm checkboxes.

Cov xeev xws li kev ua yuam kev, ceeb toom, thiab kev ua tiav yog suav nrog rau txhua hom kev tswj xyuas daim ntawv. Kuj suav nrog yog cov qauv rau kev tswj tsis tau.

Basic daim ntawv

Ntse thiab lub teeb yuag defaults yam tsis muaj ntxiv markup.

Sau npe

Piv txwv block-level pab ntawv nyeem ntawm no.

Xyuas kuv tawm Xa

<form class = "zoo" > 
  <label> Label name </label>
  <input type = "text" class = "span3" placeholder = "Type something..." >   
  <span class = "help-block" > Piv txwv block-level help text here. </span> 
  <label class = "checkbox" > 
    <input type = "checkbox" > Kos kuv tawm 
  </label>
  <button type = "submit" class = "btn" > Xa </button>  
</form>

Nrhiav daim ntawv

Ntxiv .form-searchrau daim ntawv thiab .search-querymus rau input.

Nrhiav

<form class = "zoo form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Nrhiav </button>  
</form>

Inline daim ntawv

Ntxiv .form-inlinerau finesse txoj kab ntsug ntsug thiab sib nrug ntawm daim ntawv tswj.

Nco ntsoov kuv Kos npe rau hauv

<form class = "zoo form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Nco kuv 
  </label>
  <button type = "submit" class = "btn" > Kos npe rau hauv </button>  
</form>

Pom ntawm sab xis yog tag nrho cov qauv kev tswj hwm peb txhawb nqa. Ntawm no yog daim ntawv teev npe:

• cov ntaub ntawv nkag (ntawv nyeem, password, email, thiab lwm yam)
• checkbox
• xov tooj cua
• xaiv
• ntau xaiv
• cov ntaub ntawv nkag
• textarea

Cov ntawv sau

Ntxiv nrog rau cov ntawv nyeem dawb, ib qho HTML5 cov ntawv sau raws li cov lus pom zoo li ntawd.

Checkbox

Kev xaiv ib qho yog qhov no thiab qhov ntawd - nco ntsoov suav nrog vim li cas nws zoo heev

Xaiv cov npe

ib yam dab tsi 2 3 4 5

Multicon-xaiv

1 2 3 4 5

Cov ntaub ntawv nkag

Textarea

Txuag kev hloov Tso tseg

Piv txwv markup

Muab qhov piv txwv saum toj no daim ntawv layout, ntawm no yog cov cim txuam nrog thawj cov tswv yim thiab tswj pawg. Cov .control-group, .control-label, thiab .controlscov chav kawm yog txhua yam xav tau rau styling.

<form class = "form-horizontal" > 
  <fieldset>
    <Legend> Lus dab neeg lus dab neeg </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > Cov ntawv nkag teb chaws </label>  
      <div class = "controls" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Txhawb kev pab ntawv </p> 
      </div>
    </div>
  </fieldset>
</form>

Bootstrap nta style rau browser-txhawb tsom thiab disabledhais. Peb tshem tawm lub neej ntawd Webkit outlinethiab siv ib qho box-shadowhauv nws qhov chaw rau :focus.

---

Daim ntawv validation

Nws kuj suav nrog cov qauv kev lees paub rau qhov yuam kev, ceeb toom, thiab ua tiav. Txhawm rau siv, ntxiv cov chav kawm yuam kev rau ib puag ncig .control-group.

<fieldset
  class = "control-group yuam kev" >
  …
</fieldset>

Tsom xam tawm tswv yim

Uneditable tswv yim

Qee tus nqi ntawm no

Tsis siv neeg input

Disabled checkbox

Qhov no yog ib lub checkbox uas tsis siv

Input nrog ceeb toom

Tej zaum yuav muaj qee yam tsis raug

Input nrog yuam kev

Thov kho qhov yuam kev

Input nrog kev vam meej

Woohoo!

Xaiv nrog kev vam meej

1 2 3 4 5 Woohoo!

Txuag kev hloov Tso tseg

Prepend & append inputs

Cov pab pawg tawm tswv yim-nrog cov ntawv txuas ntxiv lossis cov ntawv sau ua ntej-muab txoj hauv kev yooj yim los muab cov ntsiab lus ntxiv rau koj cov tswv yim. Cov piv txwv zoo suav nrog @ kos npe rau Twitter usernames lossis $ rau nyiaj txiag.

---

Checkboxes thiab xov tooj cua

Txog rau v1.4, Bootstrap yuav tsum tau kos npe ntxiv nyob ib ncig ntawm lub checkboxes thiab xov tooj cua los tso lawv. Tam sim no, nws yog ib qho teeb meem yooj yim ntawm kev rov ua dua qhov <label class="checkbox">uas qhwv lub <input type="checkbox">.

Inline checkboxes thiab xov tooj cua kuj tau txais kev txhawb nqa. Tsuas yog ntxiv .inlinerau ib qho .checkboxlossis .radiothiab koj ua tiav.

---

Inline forms thiab append/prepend

Txhawm rau siv prepend lossis append inputs nyob rau hauv ib daim ntawv inline, nco ntsoov muab tso .add-onrau inputhauv tib kab, tsis muaj qhov chaw.

---

Daim ntawv qhia kev pab

Txhawm rau ntxiv cov ntawv pab rau koj cov ntaub ntawv nkag, suav nrog cov ntawv pab hauv kab nrog <span class="help-inline">lossis cov ntawv pab cuam thaiv nrog <p class="help-block">tom qab lub ntsiab lus nkag.

Daim phiaj qhov ntau thiab tsawg

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

Siv tib .span*cov chav kawm los ntawm cov kab sib chaws rau kev nkag siab ntau thiab tsawg.

Hloov qhov ntau thiab tsawg

Koj kuj tuaj yeem siv cov chav kawm zoo li qub uas tsis qhia rau hauv kab sib chaws, hloov mus rau CSS cov qauv, lossis tus account rau ntau hom kev tswj hwm (xws li, inputvs. select).

Cov ntawv nyeem ua ntej

@

Nov yog qee cov ntawv nyeem

Cov ntawv txuas ntxiv

.00

Nov yog phau ntawv pab ntxiv

Append thiab prepend

$ .00

Ntxiv nrog khawm

Mus!

Ob-khawm append

Nrhiav Kev xaiv

Inline checkboxes

1 2 3

Checkboxes

Kev xaiv ib qho yog qhov no thiab qhov ntawd - nco ntsoov suav nrog vim li cas nws zoo heev Kev xaiv thib ob kuj tuaj yeem kuaj xyuas thiab suav nrog hauv daim ntawv tau txais Kev xaiv peb tuaj yeem-yog, koj twv nws-tseem raug kuaj xyuas thiab suav nrog hauv daim ntawv tau txais

Nco tseg: Cov ntawv sau nyob ib puag ncig txhua qhov kev xaiv rau ntau qhov kev nyem loj dua thiab daim ntawv siv tau ntau dua.

Xov tooj cua khawm

Kev xaiv ib qho yog qhov no thiab qhov ntawd - nco ntsoov suav nrog vim li cas nws zoo heev Kev xaiv ob tuaj yeem yog lwm yam thiab xaiv nws yuav tsis xaiv qhov kev xaiv ib qho

Txuag kev hloov Tso tseg

Khawm rau kev ua

Raws li lub rooj sib tham, cov nyees khawm yuav tsum tsuas yog siv rau kev ua thaum hyperlinks yuav tsum tau siv rau cov khoom. Piv txwv li, "Download" yuav tsum yog lub pob thaum "kev ua haujlwm tsis ntev los no" yuav tsum yog qhov txuas.

Khawm style tuaj yeem siv rau txhua yam nrog rau .btnchav kawm. Txawm li cas los xij, feem ntau koj yuav xav siv cov no rau nkaus xwb <a>thiab <button>cov ntsiab lus.

Hla browser compatibility

IE9 tsis qoob loo tom qab gradients ntawm cov ces kaum sib npaug, yog li peb tshem nws. Muaj feem xyuam, IE9 jankifies buttoncov ntsiab lus tsis taus, ua cov ntawv grey nrog cov ntawv tsis zoo-duab ntxoov ntxoo uas peb kho tsis tau.

Ntau qhov ntau thiab tsawg

Xav tau cov nyees khawm loj lossis me dua? Ntxiv .btn-large, .btn-small, lossis .btn-minirau ob qhov loj ntxiv.

Thawj qhov ua Kev ua

Thawj qhov ua Kev ua

Thawj qhov ua Kev ua

Lub xeev tsis taus

Rau cov nyees khawm xiam oob qhab, ntxiv cov .disabledchav kawm rau kev sib txuas thiab tus disabledcwj pwm rau <button>cov ntsiab lus.

Thawj qhov txuas Txuas

Thawj khawm Khawm

Tau taub hau! Peb siv .disabledraws li chav kawm siv hluav taws xob ntawm no, zoo ib yam li cov .activechav kawm sib xws, yog li tsis tas yuav tsum tau ua ntej.

Ib chav kawm, ntau lub cim

Siv cov .btnchav kawm ntawm ib qho <a>, <button>, lossis <input>cov khoom.

Txuas Khawm

<a class="btn" href=""> Link </a> _ _ _ _ _  
<button class = "btn" type = "submit" >  
  Khawm
</button>
<input class = "btn" type = "button"  
         value = "Input" >
<input class = "btn" type = "xa"  
         value = "Submit" >

Raws li qhov kev coj ua zoo tshaj plaws, sim ua kom phim lub ntsiab lus rau koj cov ntsiab lus kom ntseeg tau tias kev sib piv ntawm qhov browser rendering. Yog tias koj muaj ib qho input, siv ib qho <input type="submit">rau koj lub pob.

• icon-iav
• icon-music
• icon-search
• icon-lub hnab ntawv
• icon-lub siab
• icon-hnub qub
• icon-hnub qub-kho
• icon-neeg siv
• icon-film
• icon-th-loj
• icon-th
• icon-th-list
• icon-ok
• icon-tshem tawm
• icon-zoom-in
• icon-zoom-out
• icon-tawm
• icon-xov xwm
• icon- cog
• icon-tso tseg
• icon-tsev
• icon-file
• icon-lub sij hawm
• icon-kev
• icon-download-alt
• icon-download tau
• icon-upload
• icon-inbox
• icon-play-lub voj voog
• icon-rov ua dua
• icon-refresh
• icon-list-alt
• icon-lock
• icon- chij
• icon-headphones

• icon-volume-tawm
• icon-volume-down
• icon-volume-up
• icon-qrcode
• icon-barcode
• icon-tag
• icon-tags
• icon-book
• icon-bookmark
• icon-print
• icon-lub koob yees duab
• icon-font
• icon-bold
• icon-italic
• icon-text-siab
• icon-text-dav
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• icon-list
• icon-indent-sab laug
• icon-indent-txoj cai
• icon-facetime-video
• icon-daim duab
• icon-xiav
• icon-map-marker
• icon-kho
• icon-tint
• icon-edit
• icon-share
• icon-check
• icon-tsav
• icon-step-rov qab
• icon-ceev-rov qab

• icon-rov qab
• icon-ua si
• icon-pause
• icon-nres
• icon-forward
• icon-fast-forward
• icon-step-forward
• icon-eject
• icon-chevron-sab laug
• icon-chevron-txoj cai
• icon-plus-sign
• icon-muab-kos npe
• icon-remove-kos npe
• icon-ok-sign
• icon-cov lus nug-kos npe
• icon-info-kos npe
• icon-screenshot
• icon-remove-lub voj voog
• icon-ok-lub voj voog
• icon-ban-lub voj voog
• icon- xub-sab laug
• icon- xub-txoj cai
• icon- xub-up
• icon- xub-down
• icon-share-alt
• icon-resize-tag nrho
• icon-resize-me me
• icon-plus
• icon- rho tawm
• icon-asterisk
• icon-exclamation-kos npe
• icon- khoom plig
• icon- nplooj
• icon-hluav taws
• icon-qhov muag-qhib

• icon-qhov muag-kaw
• icon-warning-kos npe
• icon-plane
• icon-calendar
• icon-random
• icon-comment
• icon-magnet
• icon-chevron-up
• icon-chevron-down
• icon-retweet
• icon-shopping-lub tawb nqa khoom
• icon-folder-kaw
• icon-folder-qhib
• icon-resize-ntev
• icon-resize-horizontal
• icon-hdd
• icon-bullhorn
• icon- tswb
• icon-daim ntawv pov thawj
• icon-thumbs-up
• icon-thumbs-down
• icon-tes-txoj cai
• icon-tes-sab laug
• icon-hand-up
• icon-hand-down
• icon-lub voj voog- xub-txoj cai
• icon-lub voj voog- xub-sab laug
• icon-circle- xub-up
• icon-lub voj voog- xub-down
• icon-globe
• icon-wrench
• icon-ua haujlwm
• icon-filter
• icon-briefcase
• icon-fullscreen

Ua li sprite

Es tsis txhob ua txhua lub cim thov ntxiv, peb tau muab tso ua ke rau hauv sprite - ib pawg ntawm cov duab hauv ib cov ntaub ntawv uas siv CSS los tso cov duab nrog background-position. Qhov no yog tib txoj kev uas peb siv hauv Twitter.com thiab nws tau ua haujlwm zoo rau peb.

Tag nrho cov chav kawm icons yog prefixed nrog .icon-rau lub npe sib raug zoo thiab scope, zoo li peb lwm yam. Qhov no yuav pab kom tsis txhob muaj teeb meem nrog lwm cov cuab yeej.

Glyphicons tau tso cai rau peb siv Halflings teeb tsa hauv peb cov khoom siv qhib qhov chaw yog li peb muab qhov txuas thiab credit ntawm no hauv cov ntaub ntawv. Thov xav ua ib yam hauv koj qhov project.

Yuav siv li cas

Bootstrap siv lub <i>cim rau tag nrho cov cim, tab sis lawv tsis muaj chav kawm ntawv-tsuas yog ib qho kev sib koom ua ntej. Txhawm rau siv, tso cov cai hauv qab no tsuas yog nyob txhua qhov chaw:

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

Kuj tseem muaj cov qauv muaj rau inverted (dawb) icons, npaj txhij nrog ib chav kawm ntxiv:

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

Muaj 140 chav kawm xaiv los ntawm koj lub cim. Tsuas yog ntxiv ib <i>daim ntawv nrog cov chav kawm zoo thiab koj tau teeb tsa. Koj tuaj yeem pom cov npe tag nrho hauv sprites.less lossis nyob ntawm no hauv daim ntawv no.

Tau taub hau! Thaum siv ib sab ntawm cov hlua ntawm cov ntawv nyeem, xws li hauv cov nyees khawm lossis cov kev sib txuas nav, nco ntsoov tawm qhov chaw tom qab lub <i>cim rau qhov sib nrug.

Siv cov ntaub ntawv

Icons zoo heev, tab sis qhov twg yuav siv lawv? Nov yog ob peb lub tswv yim:

• Raws li kev pom rau koj lub sidebar navigation
• Rau ib tug ntshiab icon-tsav navigation
• Rau cov nyees khawm los pab qhia lub ntsiab lus ntawm kev ua
• Nrog kev sib txuas los qhia cov ntsiab lus ntawm tus neeg siv lub hom phiaj

Qhov tseem ceeb, txhua qhov chaw koj tuaj yeem tso <i>tag, koj tuaj yeem tso lub cim.

Hloov tshiab Txheeb xyuas Rho tawm

Saib Chaw Xav paub ntxiv

Email chaw nyob