Skala tipografika

Il-grilja tipografika kollha hija bbażata fuq żewġ varjabbli Inqas fil-fajl variables.less tagħna: @baseFontSizeu @baseLineHeight. L-ewwel hija d-daqs tat-tipa bażi użata matul u t-tieni hija l-għoli tal-linja bażi.

Aħna nużaw dawk il-varjabbli, u xi matematika, biex noħolqu l-marġini, paddings, u line-heights tat-tip kollu tagħna u aktar.

Eżempju tat-test tal-korp

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.

Kopja tal-korp taċ-ċomb

Agħmel paragrafu jispikkaw billi żżid .lead.

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

Bl-użu ta 'enfasi

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

Nota: Ħossok liberu li tuża <b>u <i>fl-HTML5, iżda l-użu tagħhom inbidel xi ftit. <b>huwa maħsub biex jenfasizza kliem jew frażijiet mingħajr ma jwassal importanza addizzjonali filwaqt li <i>huwa l-aktar għal vuċi, termini tekniċi, eċċ.

Eżempji ta' indirizzi

Hawn żewġ eżempji ta’ kif <address>tista’ tintuża t-tikketta:

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

Isem sħiħ
[email protected]

Abbrevjazzjonijiet ta' eżempju

L-abbrevjazzjonijiet titleb'attribut għandhom bordura ta' isfel ħafifa bit-tikek u cursor ta' għajnuna fuq id-daqq. Dan jagħti lill-utenti indikazzjoni żejda xi ħaġa se tintwera fuq il-passaġġ.

Żid il- initialismklassi ma' abbrevjazzjoni biex iżżid l-armonija tipografika billi tagħtiha daqs tat-test kemmxejn iżgħar.

HTML huwa l-aħjar ħaġa peress ħobż imqatta '.

Abbrevjazzjoni tal-kelma attribut hija attr .

Biex tinkludi blockquote, wrap <blockquote>madwar kwalunkwe HTML bħala l-kwotazzjoni. Għal kwotazzjonijiet dritti nirrakkomandaw <p>.

Inkludi element fakultattiv <small>biex tikkwota s-sors tiegħek u int ikollok sing em —qabel għal skopijiet ta 'grafika.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> Xi ħadd famuż </small>
</blockquote>

Il-kwoti ta' blokk default huma msejsa hekk:

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

Xi ħadd famuż fil Body of work

Biex tpoġġi l-blockquote tiegħek lejn il-lemin, żid class="pull-right":

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

Xi ħadd famuż fil Body of work

Mhux ordnat

<ul>

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

Ordnat

<ol>

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

Deskrizzjoni

<dl>

Listi ta' deskrizzjoni

Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.

Euismod

Vestibulum id ligula porta felis euismod sempre 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.

Deskrizzjoni orizzontali

<dl class="dl-horizontal">

Listi ta' deskrizzjoni

Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.

Euismod

Vestibulum id ligula porta felis euismod sempre 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 sempre eget lacinia

Fusce dapibus, tellus ac cursus commodo, torttor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

---

Irjus up! Il-listi ta' deskrizzjoni orizzontali se jaqtgħu termini li huma twal wisq biex jidħlu fil-kolonna tax-xellug text-overflow. F'viewports idjaq, se jinbidlu għat-tqassim default stacked.

F'konformità

Kebbeb snippets inline tal-kodiċi b' <code>.

Pereżempju , <code> taqsima </ code > għandha tkun imgeżwer bħala inline .  

Blokk bażiku

Uża <pre>għal linji multipli ta 'kodiċi. Kun żgur li taħrab kwalunkwe parentesi angolari fil-kodiċi għal rendering xieraq.

<p>Kampjun ta' test hawn...</p>

<pre>
  <p>Test tal-kampjun hawn...</p>
</pre>

Nota: Kun żgur li żżomm il-kodiċi fi ħdan <pre>it-tikketti kemm jista 'jkun qrib ix-xellug; se tirrendi t-tabs kollha.

Tista' b'għażla żżid il- .pre-scrollableklassi li se tistabbilixxi għoli massimu ta' 350px u tipprovdi scrollbar tal-assi y.

Google Prettify

Ħu l-istess <pre>element u żid żewġ klassijiet fakultattivi għal rendering imtejjeb.

<p> Test ta' kampjun hawn... </p>

<pre class = "prettyprint 
     linenums" >
  <p>Test tal-kampjun hawn...</p>
</pre>

Niżżel google-code-prettify u ara l-readme għal kif tuża.

Tag	Deskrizzjoni
<table>	Element ta' tgeżwir għall-wiri ta' data f'format tabulari
<thead>	Element tal-kontenitur għar-ringieli tal-header tat-tabella ( <tr>) biex jittikkettaw il-kolonni tat-tabella
<tbody>	Element tal-kontenitur għar-ringieli tal-mejda ( <tr>) fil-korp tat-tabella
<tr>	Element tal-kontenitur għal sett ta' ċelluli tat-tabella ( <td>jew <th>) li jidher fuq ringiela waħda
<td>	Ċellula tat-tabella default
<th>	Ċellula speċjali tat-tabella għal tikketti tal-kolonna (jew ringiela, skont l-ambitu u t-tqegħid) Għandhom jintużaw fi ħdan<thead>
<caption>	Deskrizzjoni jew sommarju ta' dak li żżomm it-tabella, speċjalment utli għall-qarrejja tal-iskrin

<tabella>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</mejda>

It-tabelli huma awtomatikament stilati bi ftit fruntieri biss biex jiżguraw li jinqara u tinżamm l-istruttura. Bil 2.0, il- .tableklassi hija meħtieġa.

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

#	Isem	Kunjom	Isem tal-utent
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry	l-ghasfur	@twitter

Ikseb ftit fancy mat-tabelli tiegħek billi żżid zebra-striping—sempliċement żid il- .table-stripedklassi.

Nota: Tabelli strixxati jużaw is- :nth-childselettur CSS u mhumiex disponibbli f'IE7-IE8.

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

#	Isem	Kunjom	Isem tal-utent
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry	l-ghasfur	@twitter

Żid fruntieri madwar il-mejda kollha u kantunieri fit-tond għal skopijiet estetiċi.

<table class = "tabella bil-bordijiet tal-mejda" > 
  …
</mejda>

#	Isem	Kunjom	Isem tal-utent
1	Mark	Otto	@mdo
	Mark	Otto	@getbootstrap
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

Agħmel it-tabelli tiegħek aktar kompatti billi żżid il- .table-condensedklassi biex tnaqqas l-ikkuttunar taċ-ċelluli tal-mejda bin-nofs (minn 8px għal 4px).

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

#	Isem	Kunjom	Isem tal-utent
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

Ħossok liberu li tgħaqqad kwalunkwe waħda mill-klassijiet tal-mejda biex tikseb dehra differenti billi tuża kwalunkwe waħda mill-klassijiet disponibbli.

<table class = "mejda strixxata tal-mejda bordata tal-mejda kondensata" > 
  ...
</mejda>

	Isem sħiħ
#	Isem	Kunjom	Isem tal-utent
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

HTML u CSS flessibbli

L-aħjar parti dwar il-formoli f'Bootstrap hija li l-inputs u l-kontrolli kollha tiegħek jidhru tajbin irrispettivament minn kif tibnihom fil-markup tiegħek. L-ebda HTML superfluwu mhu meħtieġ, iżda nipprovdu l-mudelli għal dawk li jeħtieġuh.

Taqsim aktar ikkumplikat jiġu bi klassijiet konċiżi u li jistgħu jegħlbuhom għal stil faċli u rbit ta 'avvenimenti, sabiex tkun kopert f'kull pass.

Erba 'taqsim inklużi

Bootstrap jiġi b'appoġġ għal erba 'tipi ta' layouts tal-formoli:

• Vertikali (default)
• Fittex
• F'konformità
• Orizzontali

Tipi differenti ta' tqassim tal-formoli jeħtieġu xi bidliet fil-markup, iżda l-kontrolli nfushom jibqgħu u jġibu ruħhom l-istess.

Kontroll stati u aktar

Il-formoli ta 'Bootstrap jinkludu stili għall-kontrolli tal-forma bażi bħall-input, textarea, u agħżel li tistenna. Iżda tiġi wkoll b'numru ta 'komponenti tad-dwana bħal inputs mehmuża u prepended u appoġġ għal listi ta' kaxxi ta 'kontroll.

Stati bħal żball, twissija, u suċċess huma inklużi għal kull tip ta 'kontroll tal-formola. Inklużi wkoll stili għal kontrolli b'diżabilità.

Forma bażika

Defaults intelliġenti u ħfief mingħajr marka żejda.

Isem it-tikketta

Eżempju ta' test ta' għajnuna fil-livell ta' blokk hawn.

Iċċekkjani Issottometti

<form class = "tajjeb" > 
  <label> Isem it-tikketta </label>
  <input type = "test" class = "span3" placeholder = "Ittajpja xi ħaġa..." >   
  <span class = "help-block" > Eżempju ta' test ta' għajnuna fil-livell ta' blokk hawn. </span> 
  <label class = "checkbox" > 
    <input type = "checkbox" > Iċċekkjani 
  </label>
  <button type = "submit" class = "btn" > Ibgħat </button>  
</form>

Formola ta' tfittxija

Żid .form-searchmal-formola u .search-querymal- input.

Fittex

<form class = "fit-tfittxija tal-forma sew" > 
  <input type = "test" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Fittex </button>  
</form>

Formola inline

Żid .form-inlinegħall-finezza l-allinjament vertikali u l-ispazjar tal-kontrolli tal-formola.

Tiftakarni Idħol

<form class = "well form-inline" > 
  <input type = "test" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Ftakarni 
  </label>
  <button type = "submit" class = "btn" > Idħol </button>  
</form>

Muri fuq il-lemin hemm il-kontrolli tal-formoli default kollha li nappoġġjaw. Hawn il-lista bulleted:

• inputs tat-test (test, password, email, eċċ)
• checkbox
• radju
• agħżel
• għażla multipla
• input tal-fajl
• textarea

Input tat-test

Minbarra test freeform, kwalunkwe input ibbażat fuq test HTML5 jidher bħal dan.

Checkbox

L-ewwel għażla hija din u dik—kun żgur li tinkludi għaliex hija kbira

Agħżel il-lista

xi ħaġa 2 3 4 5

Multicon-select

1 2 3 4 5

Input tal-fajl

Textarea

Issejvja l-bidliet Ikkanċella

Eżempju ta 'markup

Minħabba t-tqassim tal-formola eżempju ta 'hawn fuq, hawn il-markup assoċjat mal-ewwel grupp ta' input u kontroll. Il- .control-group, .control-label, u .controlsklassijiet huma kollha meħtieġa għall-grafika.

<form class = "forma-orizzontali" > 
  <fieldset>
    <leġġenda> Test tal-leġġenda </leġġenda>
    <div class = "grupp ta' kontroll" > 
      <label class = "control-label" for = "input01" > Input tat-test </label>  
      <div class = "kontrolli" > 
        <input type = "test" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Test ta' għajnuna ta' appoġġ </p> 
      </div>
    </div>
  </fieldset>
</form>

Bootstrap karatteristiċi stili għall-browser appoġġjati ffukati u disabledstati. Aħna nneħħu l-Webkit default outlineu napplikaw a box-shadowminfloku għal :focus.

---

Validazzjoni tal-formola

Jinkludi wkoll stili ta' validazzjoni għal żbalji, twissijiet, u suċċess. Biex tuża, żid il-klassi ta 'żball mal-madwar .control-group.

<fieldset
  class = "żball tal-grupp ta' kontroll" >
  …
</fieldset>

Input iffukat

Input mhux editjat

Xi valur hawn

Input b'diżabilità

Checkbox b'diżabilità

Din hija checkbox diżattivata

Input bi twissija

Xi ħaġa setgħet marret ħażin

Input bi żball

Jekk jogħġbok ikkoreġi l-iżball

Input b'suċċess

Woohoo!

Agħżel b'suċċess

1 2 3 4 5 Woohoo!

Issejvja l-bidliet Ikkanċella

Prepend & ehmeż inputs

Gruppi ta' input—b'test mehmuż jew imqabbel—jipprovdu mod faċli biex tagħti aktar kuntest għall-inputs tiegħek. Eżempji kbar jinkludu s-sinjal @ għall-ismijiet tal-utent ta’ Twitter jew $ għall-finanzi.

---

Checkboxes u radjijiet

Sa v1.4, Bootstrap kien jeħtieġ markup żejjed madwar kaxxi ta' kontroll u radjijiet biex jiġbduhom. Issa, hija sempliċi kwistjoni li tirrepeti l- <label class="checkbox">li jdawwal il- <input type="checkbox">.

Inline checkboxes u radjijiet huma wkoll appoġġjati. Żid biss .inlinema 'kwalunkwe .checkboxjew .radiou lest.

---

Formoli inline u tehmeż/prepend

Biex tuża prepend jew tehmeż inputs f'forma inline, kun żgur li tpoġġi l- .add-onu inputfuq l-istess linja, mingħajr spazji.

---

Formola test ta' għajnuna

Biex iżżid test ta' għajnuna għall-inputs tal-formola tiegħek, inkludi test ta' għajnuna inline ma <span class="help-inline">' jew blokk ta' test ta' għajnuna <p class="help-block">wara l-element ta' input.

Fforma daqsijiet tal-grilja

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

Uża l-istess .span*klassijiet mis-sistema tal-grilja għad-daqsijiet tal-input.

Daqsijiet alternattivi

Tista 'wkoll tuża klassijiet statiċi li ma jimpenjawx mal-grid, jadattaw għall-istili CSS li jirrispondu, jew jagħtu kont għal tipi differenti ta' kontrolli (eż. inputvs. select).

Test ippreċedenti

@

Hawn xi test ta' għajnuna

Test mehmuż

.00

Hawn aktar test ta' għajnuna

Appendi u qabel

$ .00

Ehmeż bil-buttuna

Mur!

Append b'żewġ buttuna

Fittex Għażliet

Kaxxi ta' kontroll inline

1 2 3

Kaxxi ta' kontroll

L-ewwel għażla hija din u dik—kun żgur li tinkludi għaliex hija kbira It-tieni għażla tista' wkoll tiġi kkontrollata u inkluża fir-riżultati tal-formola It-tielet għażla tista'—iva, qtajtha—ukoll tiġi kkontrollata u inkluża fir-riżultati tal-formola

Nota: It-tikketti jdawru l-għażliet kollha għal żoni ta 'klikk ħafna akbar u forma aktar użabbli.

Buttuni tar-radju

L-ewwel għażla hija din u dik—kun żgur li tinkludi għaliex hija kbira Għażla tnejn tista 'tkun xi ħaġa oħra u l-għażla tagħha se deselect għażla waħda

Issejvja l-bidliet Ikkanċella

Buttuni għal azzjonijiet

Bħala konvenzjoni, il-buttuni għandhom jintużaw biss għal azzjonijiet filwaqt li l-hyperlinks għandhom jintużaw għall-oġġetti. Pereżempju, "Niżżel" għandha tkun buttuna filwaqt li "attività riċenti" għandha tkun link.

L-istili tal-buttuni jistgħu jiġu applikati għal kull ħaġa bil- .btnklassi applikata. Madankollu, tipikament tkun trid tapplika dawn biss għal <a>u <button>elementi.

Kompatibilità cross browser

IE9 ma uċuħ gradjenti fl-isfond fuq kantunieri fit-tond, hekk aħna neħħiha. Relatati, IE9 jankifies buttonelementi b'diżabilità, tirrendi t-test griż b'test diżgustanti-dell li ma nistgħux nirranġaw.

Daqsijiet multipli

Fancy buttuni akbar jew iżgħar? Żid .btn-large, .btn-small, jew .btn-minigħal żewġ daqsijiet addizzjonali.

Azzjoni primarja Azzjoni

Azzjoni primarja Azzjoni

Azzjoni primarja Azzjoni

Stat b'diżabilità

Għal buttuni b'diżabilità, żid il- .disabledklassi mal-links u l- disabledattribut għall - <button>elementi.

Link primarju Link

Buttuna primarja Buttuna

Irjus up! Aħna nużaw .disabledbħala klassi ta 'utilità hawn, simili għall- .activeklassi komuni, għalhekk l-ebda prefiss mhu meħtieġ.

Klassi waħda, tikketti multipli

Uża l- .btnklassi fuq element <a>, <button>, jew <input>.

Link Buttuna

<a class = "btn" href = "" > Link </a>  
<button class = "btn" type = "issottometti" >  
  Buttuna
</button>
<input class = "btn" tip = "buttuna"  
         valur = "Input" >
<input class = "btn" type = "issottometti"  
         valur = "Ibgħat" >

Bħala l-aħjar prattika, ipprova tqabbel l-element għalik il-kuntest biex tiżgura t-tqabbil ta' rendering bejn il-browser. Jekk għandek input, uża <input type="submit">għall-buttuna tiegħek.

• ikona-ħġieġ
• ikona-mużika
• ikona-tfittxija
• ikona-pakkett
• ikona-qalb
• ikona-istilla
• icon-star-vojta
• ikona-utent
• ikona-film
• ikona-th-kbar
• ikona-th
• ikona-th-lista
• ikona-ok
• ikona-tneħħija
• ikona-zoom-in
• icon-zoom-out
• ikona mitfija
• ikona-sinjal
• ikona-cog
• ikona-żibel
• ikona-dar
• ikona-fajl
• ikona-ħin
• ikona-triq
• icon-download-alt
• ikona-download
• ikona-upload
• icon-inbox
• ikona-play-ċirku
• ikona-repeti
• ikona-aġġornament
• ikona-lista-alt
• icon-lock
• ikona-bandiera
• ikona-headphones

• icon-volum-off
• ikona-volum-isfel
• ikona-volum up
• ikona-qrcode
• icon-barcode
• icon-tag
• icon-tags
• ikona-ktieb
• ikona-bookmark
• ikona-istampar
• ikona-kamera
• ikona-font
• ikona-tipa grassa
• ikona-korsiv
• ikona-test-għoli
• icon-test-wisa'
• icon-align-left
• icon-align-center
• icon-align-lemin
• icon-align-justify
• lista-ikona
• ikona-inċiż-xellug
• ikona-inċiż-lemin
• icon-facetime-video
• ikona-stampa
• ikona-lapes
• ikona-mappa-markatur
• ikona-aġġustament
• ikona-lewn
• icon-edit
• icon-share
• ikona-kontroll
• ikona-ċaqliq
• ikona-pass-lura
• ikona-veloċi-lura

• ikona-lura
• ikona-play
• ikona-pawsa
• ikona-waqfien
• ikona-quddiem
• icon-fast-forward
• ikona-pass-quddiem
• icon-eject
• ikona-chevron-xellug
• ikona-chevron-lemin
• ikona-plus-sinjal
• ikona-minus-sinjal
• icon-neħħi-sinjal
• ikona-ok-sinjal
• ikona-mistoqsija-sinjal
• ikona-informazzjoni-sinjal
• ikona-screenshot
• ikona-tneħħija-ċirku
• ikona-ok-ċirku
• ikona-projbizzjoni-ċirku
• ikona-vleġġa-xellug
• ikona-vleġġa-lemin
• icon-arrow-up
• icon-arrow-down
• icon-share-alt
• icon-resize-full
• icon-resize-żgħir
• icon-plus
• ikona-minus
• ikona-asterisk
• icon-exclamation-sign
• ikona-rigal
• ikona-werqa
• ikona-nar
• ikona-għajn-miftuħa

• icon-eye-close
• ikona-sinjal-twissija
• ikona-pjan
• ikona-kalendarju
• ikona-każwali
• ikona-kumment
• ikona-kalamita
• icon-chevron-up
• icon-chevron-down
• icon-retweet
• icon-shopping-cart
• icon-folder-close
• ikona-folder-miftuħ
• icon-resize-vertikali
• icon-resize-orizzontali
• ikona-hdd
• ikona-bullhorn
• ikona-qanpiena
• ikona-ċertifikat
• icon-thumbs-up
• icon-thumbs-down
• ikona-idejn-lemin
• ikona-idejn-xellug
• icon-hand-up
• icon-hand-down
• ikona-ċirku-vleġġa-lemin
• ikona-ċirku-vleġġa-xellug
• ikona-ċirku-vleġġa-up
• ikona-ċirku-vleġġa-isfel
• ikona-globu
• icon-wrench
• icon-kompiti
• ikona-filtru
• ikona-bagalja
• ikona-fullscreen

Mibnija bħala sprite

Minflok ma nagħmlu kull ikona talba żejda, aħna kkumpilajnahom fi sprite—mazz ta 'immaġini f'fajl wieħed li juża CSS biex ipoġġi l-immaġini b' background-position. Dan huwa l-istess metodu li nużaw fuq Twitter.com u ħadem tajjeb għalina.

Il-klassijiet tal-ikoni kollha huma prefissati bi .icon-għal spazjar tal-ismijiet u skoping xieraq, bħall-komponenti l-oħra tagħna. Dan se jgħin biex jiġu evitati kunflitti ma 'għodod oħra.

Glyphicons tatna l-użu tas-sett Halflings fis-sett ta' għodda open-source tagħna sakemm nipprovdu link u kreditu hawn fid-doks. Jekk jogħġbok ikkunsidra li tagħmel l-istess fil-proġetti tiegħek.

Kif tuża

Bootstrap juża <i>tikketta għall-ikoni kollha, iżda m'għandhom l-ebda klassi tal-każ—prefiss komuni biss. Biex tuża, poġġi l-kodiċi li ġej kważi kullimkien:

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

Hemm ukoll stili disponibbli għal ikoni maqlubin (abjad), lesti bi klassi waħda żejda:

<i klassi = "ikona-tfittxija ikona-abjad" ></i> 

Hemm 140 klassi minn fejn tagħżel għall-ikoni tiegħek. Żid biss <i>tikketta bil-klassijiet it-tajba u int issettjat. Tista' ssib il-lista sħiħa fi sprites.less jew eżatt hawn f'dan id-dokument.

Irjus up! Meta tuża ħdejn strings ta 'test, bħal fil-buttuni jew nav links, kun żgur li tħalli spazju wara t- <i>tikketta għal spazjar xieraq.

Każijiet ta' użu

Ikoni huma kbar, imma fejn wieħed jużahom? Hawn huma ftit ideat:

• Bħala viżwali għan-navigazzjoni tal-sidebar tiegħek
• Għal navigazzjoni mmexxija minn ikoni purament
• Għal buttuni biex jgħinu biex iwasslu t-tifsira ta 'azzjoni
• B'links biex jaqsmu l-kuntest fuq id-destinazzjoni ta 'utent

Essenzjalment, kullimkien tista 'tpoġġi <i>tikketta, tista' tpoġġi ikona.

Aġġorna Iċċekkja Ħassar

Ikkummenta Settings Iktar informazzjoni

Indirizz elettroniku