Bootstrap

Baz CSS

Sou tèt echafodaj la, eleman HTML debaz yo style ak amelyore ak klas extensible pou bay yon aparans fre, ki konsistan.

Tipografi Tit, paragraf, lis, ak lòt eleman inline

Tit ak kopi kò

Echèl tipografik

Tout kadriyaj tipografik la baze sou de Less variables nan fichye variables.less nou an: @baseFontSizeak @baseLineHeight. Premye a se gwosè font de baz yo itilize nan tout e dezyèm lan se wotè liy debaz la.

Nou itilize varyab sa yo, ak kèk matematik, pou kreye maj yo, paddings, ak liy-wotè nan tout kalite nou yo ak plis ankò.

Egzanp tèks kò

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ak 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 auctor. Men, li pa gen okenn komodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. Tit 1

h2. Tit 2

h3. Tit 3

h4. Tit 4

h5. Tit 5
h6. Tit 6

Anfaz, adrès, ak abrevyasyon

Eleman Itilizasyon Si ou vle
<strong> Pou mete aksan sou yon ti bout tèks ak enpòtan Okenn
<em> Pou mete aksan sou yon ti bout tèks ak estrès Okenn
<abbr> Anvlope abrevyasyon ak akwonim yo montre vèsyon an elaji sou hover

Mete atribi opsyonèl titlepou tèks elaji

Sèvi ak .initialismklas pou abrevyasyon majiskil.
<address> Pou enfòmasyon kontak pou zansèt ki pi pre li oswa tout kò travay la Prezève fòma lè w fini tout liy ak<br>

Sèvi ak anfaz

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Remak: Ou lib pou itilize <b>ak <i>nan HTML5, men itilizasyon yo chanje yon ti jan. <b>se vle di yo mete aksan sou mo oswa fraz san yo pa transmèt plis enpòtans pandan y ap <i>se sitou pou vwa, tèm teknik, elatriye.

Egzanp adrès

Men de egzanp sou fason yo <address>ka itilize tag la:

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

Egzanp abrevyasyon

Abreviyasyon ak yon titleatribi gen yon fwontyè anba limyè pwentiye ak yon kurseur èd sou hover. Sa a bay itilizatè yo endikasyon siplemantè yo pral montre yon bagay sou hover.

Ajoute initialismklas la nan yon abrevyasyon pou ogmante amoni tipografik lè w ba li yon gwosè tèks yon ti kras pi piti.

HTML se pi bon bagay depi tranche pen.

Yon abrevyasyon mo atribi se attr .

Blockquotes

Eleman Itilizasyon Si ou vle
<blockquote> Eleman nan nivo blòk pou site kontni ki soti nan yon lòt sous

Ajoute citeatribi pou URL sous

Itilize .pull-leftak .pull-rightklas pou opsyon flote
<small> Eleman opsyonèl pou ajoute yon sitasyon itilizatè a, anjeneral, yon otè ki gen tit travay Mete la <cite>alantou tit la oswa non sous la

Pou enkli yon blockquote, vlope <blockquote>nenpòt HTML kòm quote la. Pou quotes dwat nou rekòmande yon <p>.

Mete yon <small>eleman si ou vle site sous ou a epi w ap jwenn yon priz &mdash;devan li pou rezon manier.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer poses erat a ante venenatis. </p>
  3.   <small> Yon moun ki pi popilè </small>
  4. </blockquote>

Egzanp blockquotes

Default blockquotes yo style jan sa a:

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

Yon moun ki pi popilè nan Body of work

Pou flote blockquote ou a sou bò dwat la, ajoute class="pull-right":

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

Yon moun ki pi popilè nan Body of work

Lis

San lòd

<ul>

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

Unstyled

<ul class="unstyled">

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

Kòmande

<ol>

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

Deskripsyon

<dl>

Lis deskripsyon yo
Yon lis deskripsyon pafè pou defini tèm.
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.

Orizontal deskripsyon

<dl class="dl-horizontal">

Lis deskripsyon yo
Yon lis deskripsyon pafè pou defini tèm.
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 ak cursus commodo, torttor mauris condimentum nibh, ut fermentum massa jis pou chita amet risus.

Tèt leve! Lis deskripsyon orizontal yo pral tronpe tèm ki twò long pou antre nan ranje kolòn gòch la text-overflow. Nan vi ki pi etwat yo, yo pral chanje nan Layout default anpile.

Kòd Inline ak blòk fragments kòd

Nan liy

Vlope fragman nan kòd ak <code>.

  1. Pa egzanp , <code> seksyon </ code > ta dwe vlope kòm aliye .

Blòk debaz

Itilize <pre>pou plizyè liy kòd. Asire ou ke ou chape anba nenpòt parantèz ang nan kòd la pou rann apwopriye.

<p>Egzanp tèks isit la...</p>

  1. <pre>
  2.   <p>Egzanp tèks isit la...</p>
  3. </pre>

Remak: Asire w ke w kenbe kòd nan <pre>tags pi pre gòch la ke posib; li pral rann tout onglet.

Opsyonèlman, ou ka ajoute .pre-scrollableklas la ki pral mete yon wotè maksimòm de 350px epi bay yon defile aks y.

Google Prettify

Pran menm <pre>eleman an epi ajoute de klas si ou vle pou rann amelyore.

  1. <p> Egzanp tèks isit la... </p>
  1. <pre klas = "prettyprint 
  2.      linenums" >
  3.   <p>Egzanp tèks isit la...</p>
  4. </pre>

Telechaje google-code-prettify epi gade readme a pou kijan pou itilize.

Tablo Pou, ou devine li, done tabul

Tablo maketing

Tag Deskripsyon
<table> Eleman anbalaj pou montre done nan yon fòma tabular
<thead> Eleman veso pou ranje header tab ( <tr>) pou make kolòn tab yo
<tbody> Eleman veso pou ranje tab ( <tr>) nan kò tab la
<tr> Eleman veso pou yon seri selil tab ( <td>oswa <th>) ki parèt sou yon sèl ranje
<td> Selil tab default
<th> Selil tab espesyal pou etikèt kolòn (oswa ranje, depann sou dimansyon ak plasman)
Dwe itilize nan yon<thead>
<caption> Deskripsyon oswa rezime sa ki tab la kenbe, espesyalman itil pou lektè ekran yo 
  1. <tab>
  2.   <tèt>
  3.     <tr>
  4.       <th> … </th>
  5.       <th> … </th>
  6.     </tr>
  7.   </thead>
  8.   <tbody>
  9.     <tr>
  10.       <td> … </td>
  11.       <td> … </td>
  12.     </tr>
  13.   </tbody>
  14. </tab>

Opsyon tab la

Non Klas Deskripsyon
Default Okenn Pa gen estil, jis kolòn ak ranje
Debaz .table Se sèlman liy orizontal ant ranje
Borde .table-bordered Arrondi kwen epi ajoute fwontyè deyò
Zèb-bande .table-striped Ajoute koulè background gri limyè nan ranje enpè (1, 3, 5, elatriye)
Kondanse .table-condensed Koupe vètikal padding an mwatye, soti nan 8px a 4px, nan tout tdak theleman

Egzanp tab

1. Default estil tab

Tablo yo otomatikman estile ak sèlman kèk fwontyè asire lizibilite epi kenbe estrikti. Avèk 2.0, .tableklas la obligatwa.

  1. <table class = "tab" > 
  2.   …
  3. </tab>
# Premye Non Siyati Non itilizatè
1 Mak Otto @mdo
2 Jakòb Thornton @grès
3 Larry Zwazo a @twitter

2. Tablo par

Jwenn yon ti kras anpenpan ak tab ou lè w ajoute zebra-striping-jis ajoute .table-stripedklas la.

Remak: Tablo trase itilize :nth-childseleksyon CSS la epi yo pa disponib nan IE7-IE8.

  1. <table class = "tab tab-striped" > 
  2.   …
  3. </tab>
# Premye Non Siyati Non itilizatè
1 Mak Otto @mdo
2 Jakòb Thornton @grès
3 Larry Zwazo a @twitter

3. Borded tab

Ajoute fwontyè alantou tab la tout antye ak kwen awondi pou rezon ayestetik.

  1. <tab class = "tab tab-borde" > 
  2.   …
  3. </tab>
# Premye Non Siyati Non itilizatè
1 Mak Otto @mdo
Mak Otto @getbootstrap
2 Jakòb Thornton @grès
3 Larry zwazo a @twitter

4. Tablo kondanse

Fè tab ou yo plis konpak lè w ajoute .table-condensedklas la pou koupe padding selil tab la an mwatye (soti nan 8px a 4px).

  1. <table class = "table table-condensed" > 
  2.   …
  3. </tab>
# Premye Non Siyati Non itilizatè
1 Mak Otto @mdo
2 Jakòb Thornton @grès
3 Larry zwazo a @twitter

5. Konbine yo tout!

Ou lib pou konbine nenpòt nan klas tab yo pou reyalize diferan aparans lè w itilize nenpòt nan klas ki disponib yo.

  1. <table class = "tab tab-ray tab-borded table-condensed" > 
  2.   ...
  3. </tab>
Non konplè
# Premye Non Siyati Non itilizatè
1 Mak Otto @mdo
2 Jakòb Thornton @grès
3 Larry zwazo a @twitter

Fòm

HTML fleksib ak CSS

Pi bon pati sou fòm nan Bootstrap se ke tout antre ak kontwòl ou yo gade bèl kèlkeswa jan ou bati yo nan maketing ou a. Pa gen okenn HTML nesesè, men nou bay modèl yo pou moun ki bezwen li.

Layout ki pi konplike vini ak klas suks ak évolutive pou fason fasil ak evènman obligatwa, kidonk ou ap kouvri nan chak etap.

Kat kouman enkli

Bootstrap vini ak sipò pou kat kalite fòm fòm:

  • Vètikal (default)
  • Rechèch
  • Nan liy
  • Orizontal

Diferan kalite fòm fòm mande kèk chanjman nan maketing, men kontwòl yo tèt yo rete ak konpòte menm jan an.

Kontwòl eta yo ak plis ankò

Fòm Bootstrap yo gen ladan estil pou tout kontwòl fòm baz yo tankou D ', Textarea, ak chwazi ou ta atann. Men, li tou vini ak yon kantite konpozan koutim tankou antre ak ajoute ak sipò pou lis kaz.

Eta tankou erè, avètisman, ak siksè yo enkli pou chak kalite kontwòl fòm. Epitou enkli estil pou kontwòl ki andikape.

Kat kalite fòm

Bootstrap bay mak senp ak estil pou kat estil fòm entènèt komen.

Non Klas Deskripsyon
Vètikal (default) .form-vertical (pa obligatwa) Anpile, etikèt ki aliye sou bò gòch sou kontwòl yo
Nan liy .form-inline Etikèt ki aliye agoch ​​ak kontwòl inline-blòk pou style kontra enfòmèl ant
Rechèch .form-search Antre tèks siplemantè awondi pou yon ayestetik rechèch tipik
Orizontal .form-horizontal Flote sou bò gòch, etikèt ki aliye adwat sou menm liy ak kontwòl yo

Egzanp fòm lè l sèvi avèk jis kontwòl fòm, pa gen okenn mak siplemantè

Fòm de baz

Defo entelijan ak lejè san yo pa make siplemantè.

Egzanp tèks èd nan nivo blòk isit la.

  1. <form class = "byen" > 
  2.   <label> Non etikèt </label>
  3.   <input type = "text" class = "span3" placeholder = "Tape yon bagay..." >   
  4.   <span class = "help-block" > Egzanp tèks èd nan nivo blòk isit la. </span> 
  5.   <label class = "kazye" > 
  6.     <input type = "checkbox" > Tcheke mwen 
  7.   </label>
  8.   <button type = "submit" class = "btn" > Soumèt </button>  
  9. </form>

Fòm rechèch

Ajoute .form-searchnan fòm lan ak .search-querynan input.

  1. <form class = "byen fòm-rechèch" > 
  2.   <input type = "text" class = "antre-mwayen rechèch-rekèt" >  
  3.   <button type = "submit" class = "btn" > Rechèch </button>  
  4. </form>

Fòm Inline

Add .form-inlineto finesse aliyman vètikal la ak espas kontwòl fòm yo.

  1. <form class = "byen fòm-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Imel" >   
  3.   < type input = "modpas" class = "input-small" placeholder = "Modpas" >   
  4.   <label class = "kazye" > 
  5.     <input type = "checkbox" > Sonje m 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Konekte </button>  
  8. </form>

Fòm orizontal

Yo montre sou bò dwat la tout kontwòl fòm default nou sipòte. Men lis bal la:

  • Antre tèks (tèks, modpas, imèl, elatriye)
  • kaz
  • radyo
  • chwazi
  • seleksyon miltip
  • antre dosye
  • zòn tèks

Anplis tèks freeform, nenpòt opinyon HTML5 ki baze sou tèks parèt konsa.

Egzanp maketing

Bay egzanp fòm ki anwo a, isit la se maketing ki asosye ak premye gwoup la antre ak kontwòl. , .control-group, .control-labelak .controlsklas yo tout obligatwa pou manier.

  1. <form class = "form-orizontal" > 
  2.   <fieldset>
  3.     <legend> Tèks lejand </legend>
  4.     <div class = "gwoup kontwòl" > 
  5.       <label class = "control-label" for = "input01" > Antre tèks </label>  
  6.       <div class = "kontwòl" > 
  7.         < type input = "tèks" klas = "input-xlarge" id = "input01" >   
  8.         <p class = "help-block" > Sipòte tèks èd </p> 
  9.       </div>
  10.     </div>
  11.   </fieldset>
  12. </form>

Eta kontwòl fòm

Bootstrap prezante estil pou navigatè ki sipòte konsantre ak disabledeta yo. Nou retire Webkit default la outlineepi aplike yon box-shadownan plas li pou :focus.

Validasyon fòm

Li gen ladan tou estil validation pou erè, avètisman, ak siksè. Pou itilize, ajoute klas erè a nan vwazinaj la .control-group.

  1. <fieldset
  2.   klas = "Erè gwoup kontwòl" >
  3.   …
  4. </fieldset>
Gen kèk valè isit la
Gen yon bagay ki ka pase mal
Tanpri korije erè a
Woooo!
Woooo!

Pwolonje kontwòl fòm yo

Antre ak ajoute entrées

Gwoup Antre—ak tèks ki ann ajoute oswa devan—bay yon fason fasil bay plis kontèks pou antre ou yo. Gwo egzanp genyen siy @ pou non itilizatè Twitter oswa $ pou finans.

Case ak radyo

Jiska v1.4, Bootstrap te mande yon mak siplemantè alantou kaz ak radyo pou anpile yo. Koulye a, se yon senp kesyon de repete a <label class="checkbox">ki vlope a <input type="checkbox">.

Yo sipòte kaz ak radyo yo tou. Jis ajoute .inlinenan nenpòt .checkboxoswa .radioepi w ap fini.

Fòm Inline ak ajoute/andan

Pou itilize antre oswa ajoute antre nan yon fòm aliye, asire w ke ou mete .add-onak inputsou menm liy lan, san espas.

Fòme tèks èd

Pou ajoute tèks èd pou antre fòm ou a, enkli tèks èd aliy ak <span class="help-inline">oswa yon blòk tèks èd ak <p class="help-block">apre eleman opinyon an.

Sèvi ak menm .span*klas yo nan sistèm kadriyaj la pou gwosè opinyon.

Ou ka itilize tou klas estatik ki pa kat jeyografik nan kadriyaj la, ki pa adapte ak estil CSS ki reponn yo, oswa ki konte pou diferan kalite kontwòl (egzanp, inputvs. select).

@

Men kèk tèks èd

.00
Men plis tèks èd
$ .00

Remak: Etikèt antoure tout opsyon yo pou zòn klike pi gwo ak yon fòm ki pi itil.

Bouton

Bouton klas="" Deskripsyon
btn Bouton gri estanda ak gradyan
btn btn-primary Bay plis pwa vizyèl epi idantifye aksyon prensipal la nan yon seri bouton
btn btn-info Itilize kòm yon altènativ a estil yo default
btn btn-success Endike yon aksyon siksè oswa pozitif
btn btn-warning Endike yo ta dwe pran prekosyon ak aksyon sa a
btn btn-danger Endike yon aksyon danjere oswa potansyèlman negatif
btn btn-inverse Altène bouton gri fonse, pa mare nan yon aksyon semantik oswa itilize

Bouton pou aksyon

Kòm yon konvansyon, bouton yo ta dwe itilize sèlman pou aksyon pandan y ap lyen ipèr yo dwe itilize pou objè yo. Pou egzanp, "Download" ta dwe yon bouton pandan ke "aktivite ki sot pase" ta dwe yon lyen.

Styles bouton yo ka aplike nan nenpòt bagay ak .btnklas la aplike. Sepandan, tipikman ou pral vle aplike sa yo sèlman <a>ak <button>eleman.

Cross navigatè konpatibilite

IE9 pa koupe gradyan background sou kwen awondi, kidonk nou retire li. Ki gen rapò, IE9 jankifies buttoneleman ki andikape, rann tèks gri ak yon lonbraj tèks anbarasan ke nou pa ka ranje.

Plizyè gwosè

Anpenpan bouton ki pi gwo oswa pi piti? Ajoute .btn-large, .btn-small, oswa .btn-minipou de gwosè adisyonèl.


Eta andikape

Pou bouton ki andikape, ajoute .disabledklas la nan lyen ak disabledatribi pou <button>eleman yo.

Prensipal lyen Link

Tèt leve! Nou itilize .disabledkòm yon klas sèvis piblik isit la, menm jan ak klas la komen .active, kidonk pa gen okenn prefiks obligatwa.

Yon klas, plizyè tags

Sèvi ak .btnklas la sou yon <a>, <button>, oswa <input>eleman.

Link 
  1. <a class = "btn" href = "" > Lyen </a>  
  2. <button class = "btn" tip = "soumèt" >  
  3.   Bouton
  4. </boutton>
  5. <antre klas = "btn" kalite = "bouton"  
  6.          valè = "Entre" >
  7. <antre klas = "btn" tip = "soumèt"  
  8.          valè = "Soumèt" >

Kòm yon pi bon pratik, eseye matche ak eleman an pou ou kontèks asire matche kwa-navigatè rann. Si ou gen yon input, sèvi ak yon <input type="submit">pou bouton ou a.

Ikon Glyphicons te bay avèk pitye

  • icon-vè
  • icon-mizik
  • icon-rechèch
  • icon-anvlòp
  • icon-kè
  • icon-zetwal
  • icon-star-vid
  • icon-itilizatè
  • icon-fim
  • icon-th-gwo
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-retire
  • icon-zoom-an
  • icon-zoom-out
  • icon-off
  • icon-siyal
  • icon-cog
  • icon-fatra
  • icon-kay
  • ikon-fichye
  • icon-tan
  • icon-wout
  • icon-download-alt
  • ikon-telechaje
  • icon-upload
  • icon-inbox
  • icon-jwe-sèk
  • icon-repete
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-drapo
  • icon-kas ekoutè
  • icon-volim-off
  • icon-volim-desann
  • icon-volim-up
  • icon-qrcode
  • icon-kod bar
  • icon-tag
  • icon-tag
  • icon-liv
  • icon-markèt
  • icon-print
  • icon-kamera
  • icon-font
  • icon-gras
  • icon-italik
  • icon-tèks-wotè
  • icon-tèks-lajè
  • icon-align-left
  • icon-align-center
  • icon-align-dwat
  • icon-align-justify
  • icon-lis
  • icon-indent-gòch
  • icon-indent-dwa
  • icon-facetime-videyo
  • icon-foto
  • icon-kreyon
  • icon-map-marker
  • icon-ajiste
  • icon-tint
  • icon-edit
  • icon-pataje
  • icon-tcheke
  • icon-deplase
  • icon-step-backward
  • icon-vit-bak
  • icon-an bak
  • icon-jwe
  • icon-poz
  • icon-sispann
  • icon-pi devan
  • icon-vit-pi devan
  • icon-etap-pi devan
  • icon-ejecter
  • icon-chevron-gòch
  • icon-chevron-dwat
  • icon-plis-siy
  • icon-mwens-siy
  • icon-retire-siy
  • icon-ok-siy
  • icon-kesyon-siy
  • icon-info-siy
  • icon-ekran
  • icon-retire-sèk
  • icon-ok-sèk
  • icon-entèdiksyon-sèk
  • icon-flèch-gòch
  • icon-flèch-dwat
  • icon-flech-up
  • icon-flèch-desann
  • icon-share-alt
  • icon-resize-plen
  • icon-resize-ti
  • icon-plis
  • icon-mwens
  • icon-asterisk
  • icon-siy-eksklamasyon
  • icon-kado
  • icon-fèy
  • icon-dife
  • icon-je-louvri
  • icon-je-fèmen
  • icon-siy-avètisman
  • icon-avyon
  • icon-kalandriye
  • icon-o aza
  • icon-kòmantè
  • icon-eman
  • icon-chevron-up
  • icon-chevron-desann
  • icon-retweet
  • icon-shopping-cart
  • icon-dosye-fèmen
  • icon-dosye-louvri
  • icon-resize-vètikal
  • icon-resize-orizontal
  • icon-hdd
  • icon-bullhorn
  • icon-kloch
  • icon-sètifika
  • icon-pous-up
  • icon-pous-desann
  • icon-men-dwat
  • icon-men-gòch
  • icon-men-up
  • icon-men-desann
  • icon-sèk-flèch-dwa
  • icon-sèk-flèch-gòch
  • icon-sèk-flèch-up
  • icon-sèk-flèch-desann
  • icon-globe
  • icon-kle
  • icon-travay
  • icon-filtre
  • icon-sèk
  • icon-fulscreen

Bati kòm yon luten

Olye pou nou fè chak ikòn yon demann siplemantè, nou te konpile yo nan yon luten—yon pakèt imaj nan yon sèl dosye ki sèvi ak CSS pou pozisyon imaj yo ak background-position. Sa a se menm metòd nou itilize sou Twitter.com epi li te travay byen pou nou.

Tout klas ikon yo gen prefiks .icon-pou bon espas non ak kad, menm jan ak lòt konpozan nou yo. Sa ap ede evite konfli ak lòt zouti.

Glyphicons te akòde nou sèvi ak Halflings yo mete nan bwat zouti sous ouvè nou an toutotan nou bay yon lyen ak kredi isit la nan dokiman yo. Tanpri konsidere fè menm bagay la nan pwojè ou yo.

Kouman pou itilize

Bootstrap sèvi ak yon <i>tag pou tout ikon, men yo pa gen okenn klas ka-sèlman yon prefiks pataje. Pou itilize, mete kòd sa a jis sou nenpòt kote:

  1. <i klas = "ikon-rechèch" ></i>

Genyen tou estil ki disponib pou ikon envèse (blan), ki prepare ak yon klas siplemantè:

  1. <i klas = "icon-rechèch icon-blan" ></i>

Gen 120 klas pou chwazi pou ikon ou yo. Jis ajoute yon <i>tag ak bon klas yo epi w ap fikse. Ou ka jwenn lis konplè a nan sprites.less oswa isit la nan dokiman sa a.

Tèt leve! Lè w ap itilize akote kòd tèks, tankou nan bouton oswa lyen navigasyon, asire w ke ou kite yon espas apre <i>tag la pou espas apwopriye.

Sèvi ak ka yo

Ikon yo se gwo, men ki kote yon moun ta sèvi ak yo? Men kèk ide:

  • Kòm vizyèl pou navigasyon bò kote w la
  • Pou yon navigasyon piman icon-kondwi
  • Pou bouton ede transmèt siyifikasyon an nan yon aksyon
  • Avèk lyen pou pataje kontèks sou destinasyon yon itilizatè

Esansyèlman, nenpòt kote ou ka mete yon <i>tag, ou ka mete yon icon.

Egzanp yo

Sèvi ak yo nan bouton, gwoup bouton pou yon ba ikòn, navigasyon, oswa antre fòm avan.

Itilizatè

Rafrechi Kesye Efase

Kòmantè Anviwònman Plis Enfòmasyon