Shkalla tipografike

I gjithë rrjeti tipografik bazohet në dy ndryshore Less në skedarin tonë variablat.less: @baseFontSizedhe @baseLineHeight. E para është madhësia e fontit bazë të përdorur në të gjithë dhe e dyta është lartësia e linjës bazë.

Ne i përdorim ato variabla, dhe disa matematikë, për të krijuar kufijtë, mbushjet dhe lartësitë e rreshtave të të gjitha llojeve tona dhe më shumë.

Shembull teksti i trupit

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Kopje e trupit kryesor

Bëni një paragraf të dallohet duke shtuar .lead.

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

Duke përdorur theksin

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, një pharetra augue.

Shënim: Mos ngurroni të përdorni <b>dhe <i>në HTML5, por përdorimi i tyre ka ndryshuar pak. <b>ka për qëllim të nxjerrë në pah fjalë ose fraza pa përcjellë rëndësi shtesë, ndërsa <i>është kryesisht për zërin, termat teknike, etj.

Shembuj të adresave

Këtu janë dy shembuj se si <address>mund të përdoret etiketa:

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

Emri i plotë
[email protected]

Shembuj të shkurtesave

Shkurtesat me një titleatribut kanë një kufi të poshtëm me pika të lehta dhe një kursor ndihmës në lëvizje. Kjo u jep përdoruesve indikacione shtesë se diçka do të shfaqet në lëvizje.

Shtoni initialismklasën në një shkurtim për të rritur harmoninë tipografike duke i dhënë një madhësi teksti pak më të vogël.

HTML është gjëja më e mirë që nga buka e prerë.

Një shkurtim i fjalës atribut është attr .

Për të përfshirë një kuotë bllokimi, mbështilleni <blockquote>rreth çdo HTML si citat. Për kuotat e drejta ne rekomandojmë një <p>.

Përfshi një <small>element opsional për të cituar burimin tënd dhe do të marrësh një vizë em —para tij për qëllime stilimi.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante venenatis. </p>
  <small> Dikush i famshëm </small>
</blockquote>

Blloqet e paracaktuara janë stilizuar si të tilla:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante venenatis.

Dikush i famshëm në Body of work

Për të zhvendosur bllokun tuaj në të djathtë, shtoni class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante venenatis.

Dikush i famshëm në Body of work

E pa porositur

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Lehtësimi në 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
• Enean sit amet erat nunc
• Eget porttitor lorem

E pa stiluar

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Lehtësimi në 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
• Enean sit amet erat nunc
• Eget porttitor lorem

porositur

<ol>

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

Përshkrim

<dl>

Listat e përshkrimeve

Një listë përshkrimi është e përkryer për përcaktimin e termave.

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.

Përshkrimi horizontal

<dl class="dl-horizontal">

Listat e përshkrimeve

Një listë përshkrimi është e përkryer për përcaktimin e termave.

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.

---

Kokat lart! Listat e përshkrimeve horizontale do të shkurtojnë termat që janë shumë të gjatë për t'u përshtatur në rregullimin e kolonës së majtë text-overflow. Në pamjet më të ngushta, ato do të ndryshojnë në paraqitjen e paracaktuar të grumbulluar.

Në rradhë

Mbështillni pjesët e kodit në linjë me <code>.

Për shembull , seksioni < code> </ code > duhet të mbështillet si inline .  

Blloku bazë

Përdorni <pre>për linja të shumta kodi. Sigurohuni që të shmangni çdo kllapa këndore në kod për paraqitjen e duhur.

<p>Shembull teksti këtu...</p>

<para>
  <p>Shembull teksti këtu...</p>
</pre>

Shënim: Sigurohuni që ta mbani kodin brenda <pre>etiketave sa më afër të jetë e mundur në të majtë; do t'i japë të gjitha skedat.

Mund të shtoni në mënyrë opsionale .pre-scrollableklasën e cila do të vendosë një lartësi maksimale prej 350 px dhe do të sigurojë një shirit lëvizës me bosht y.

Google Prettify

Merrni të njëjtin <pre>element dhe shtoni dy klasa opsionale për interpretim të përmirësuar.

<p> Shembull teksti këtu... </p>

<pre class = "prettyprint 
     liri" >
  <p>Shembull teksti këtu...</p>
</pre>

Shkarkoni google-code-prettify dhe shikoni readme-në për mënyrën e përdorimit.

Etiketë	Përshkrim
<table>	Element mbështjellës për shfaqjen e të dhënave në një format tabelor
<thead>	Elementi i kontejnerit për rreshtat e kokës së tabelës ( <tr>) për të etiketuar kolonat e tabelës
<tbody>	Elementi i kontejnerit për rreshtat e tabelës ( <tr>) në trupin e tabelës
<tr>	Elementi i kontejnerit për një grup qelizash të tabelës ( <td>ose <th>) që shfaqet në një rresht të vetëm
<td>	Qeliza e parazgjedhur e tabelës
<th>	Qeliza e veçantë e tabelës për etiketat e kolonës (ose rreshtit, në varësi të fushës dhe vendosjes) Duhet të përdoret brenda një<thead>
<caption>	Përshkrimi ose përmbledhja e asaj që përmban tabela, veçanërisht e dobishme për lexuesit e ekranit

<tabela>
  <kokë>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <trupi>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</tabela>

Tabelat stilohen automatikisht me vetëm disa kufij për të siguruar lexueshmëri dhe për të ruajtur strukturën. Me 2.0, .tablekërkohet klasa.

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

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

Bëhuni pak elegant me tavolinat tuaja duke shtuar vija zebra—thjesht shtoni .table-stripedklasën.

Shënim: Tabelat me vija përdorin :nth-childpërzgjedhësin CSS dhe nuk disponohen në IE7-IE8.

<table class = "tavolinë me shirita" > 
  …
</tabela>

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

Shtoni kufijtë rreth të gjithë tryezës dhe qoshet e rrumbullakosura për qëllime estetike.

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

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
	shenjë	Oto	@getbootstrap
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

Bëjini tabelat tuaja më kompakte duke shtuar .table-condensedklasën për të prerë mbushjen e qelizave të tabelës në gjysmë (nga 8 pikselë në 4 px).

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

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

Mos ngurroni të kombinoni ndonjë nga klasat e tabelave për të arritur pamje të ndryshme duke përdorur ndonjë nga klasat e disponueshme.

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

	Emri i plotë
#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

HTML dhe CSS fleksibël

Pjesa më e mirë në lidhje me format në Bootstrap është se të gjitha hyrjet dhe kontrollet tuaja duken të shkëlqyera pavarësisht se si i ndërtoni ato në shënimin tuaj. Nuk kërkohet asnjë HTML i tepërt, por ne ofrojmë modelet për ata që e kërkojnë atë.

Paraqitjet më të ndërlikuara vijnë me klasa të përmbledhura dhe të shkallëzueshme për stilim të lehtë dhe lidhje të ngjarjeve, kështu që ju jeni të mbuluar në çdo hap.

Katër paraqitje të përfshira

Bootstrap vjen me mbështetje për katër lloje të paraqitjeve të formave:

• Vertikale (e parazgjedhur)
• Kërko
• Në rradhë
• Horizontale

Llojet e ndryshme të paraqitjeve të formularëve kërkojnë disa ndryshime për të shënuar, por vetë kontrollet mbeten dhe sillen njësoj.

Kontrolloni shtetet dhe më shumë

Formularët e Bootstrap përfshijnë stile për të gjitha kontrollet e formës bazë si futja, zona e tekstit dhe zgjedhja që prisni. Por ai gjithashtu vjen me një numër komponentësh të personalizuar si hyrjet e bashkangjitura dhe të paravendosura dhe mbështetje për listat e kutive të kontrollit.

Gjendjet si gabimi, paralajmërimi dhe suksesi përfshihen për çdo lloj kontrolli të formularit. Përfshihen gjithashtu stilet për kontrollet me aftësi të kufizuara.

Forma bazë

Parazgjedhje inteligjente dhe të lehta pa shënime shtesë.

Emri i etiketës

Shembull teksti ndihmës në nivel blloku këtu.

Më kontrolloni Paraqisni

<form class = "mirë" > 
  <label> Emri i etiketës </label>
  <input type = "text" class = "span3" placeholder = "Shkruaj diçka..." >   
  <span class = "help-block" > Shembull i tekstit të ndihmës në nivel blloku këtu. </span> 
  <label class = "checkbox" > 
    <input type = "checkbox" > Më kontrollo 
  </label>
  <button type = "submit" class = "btn" > Paraqit </button>  
</form>

Formulari i kërkimit

Shtoni .form-searchnë formular dhe .search-querynë input.

Kërko

<form class = "pus form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Kërko </button>  
</form>

Forma inline

Shtoni .form-inlinepër të përmirësuar shtrirjen vertikale dhe ndarjen e kontrolleve të formularit.

Më kujto mua Hyni

<form class = "pus form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Fjalëkalimi" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Më mbaj mend 
  </label>
  <button type = "submit" class = "btn" > Hyni </button>  
</form>

Në të djathtë shfaqen të gjitha kontrollet e paracaktuara të formularit që ne mbështesim. Këtu është lista me pika:

• futjet e tekstit (tekst, fjalëkalim, email, etj.)
• kutia e kontrollit
• radio
• zgjidhni
• përzgjedhje e shumëfishtë
• futja e skedarit
• zonë tekstuale

Futja e tekstit

Përveç tekstit në formë të lirë, çdo hyrje e bazuar në tekst HTML5 duket kështu.

Kutia e zgjedhjes

Opsioni i parë është kjo dhe ajo - sigurohuni që të përfshini pse është e mrekullueshme

Zgjidhni listën

diçka 2 3 4 5

Përzgjedhja me shumë konferenca

1 2 3 4 5

Hyrja e skedarit

Textarea

Ruaj ndryshimet Anulo

Shembull shënjimi

Duke pasur parasysh paraqitjen e formularit të shembullit të mësipërm, këtu është shënimi i lidhur me grupin e parë të hyrjes dhe kontrollit. Klasat .control-group, .control-label, dhe .controlskërkohen të gjitha për stilim.

<form class = "formë-horizontal" > 
  <set e fushave>
    <legend> Teksti i legjendës </legend>
    <div class = "kontrol-grup" > 
      <label class = "control-label" for = "input01" > Hyrja e tekstit </label>  
      <div class = "kontrollet" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Teksti mbështetës i ndihmës </p> 
      </div>
    </div>
  </fieldset>
</form>

Bootstrap përmban stile për të fokusuar dhe disabledgjendje të mbështetur nga shfletuesi. Ne heqim Webkit-in e paracaktuar outlinedhe aplikojmë një box-shadownë vend të tij për :focus.

---

Vleresimi i formularit

Ai gjithashtu përfshin stilet e vërtetimit për gabimet, paralajmërimet dhe suksesin. Për ta përdorur, shtoni klasën e gabimit në mjedisin përreth .control-group.

<set e fushave
  class = "gabim i grupit të kontrollit" >
  …
</fieldset>

Hyrja e fokusuar

Hyrje e paredaktueshme

Disa vlera këtu

Hyrja e çaktivizuar

Kutia e kontrollit të çaktivizuar

Kjo është një kuti e çaktivizuar

Hyrja me paralajmërim

Diçka mund të ketë shkuar keq

Hyrja me gabim

Ju lutemi korrigjoni gabimin

Input me sukses

Woohoo!

Zgjidhni me sukses

1 2 3 4 5 Woohoo!

Ruaj ndryshimet Anulo

Paraqisni dhe shtojini hyrjet

Grupet e hyrjes - me tekst të bashkëngjitur ose të parashtruar - ofrojnë një mënyrë të thjeshtë për të dhënë më shumë kontekst për hyrjet tuaja. Shembuj të mirë përfshijnë shenjën @ për emrat e përdoruesve në Twitter ose $ për financat.

---

Kutitë e kontrollit dhe radiot

Deri në v1.4, Bootstrap kërkonte shënim shtesë rreth kutive të kontrollit dhe radiove për t'i grumbulluar ato. Tani, është një çështje e thjeshtë për të përsëritur atë <label class="checkbox">që përfundon <input type="checkbox">.

Mbështeten gjithashtu kutitë e kontrollit në linjë dhe radiot. Thjesht shtoni .inlinenë ndonjë .checkboxose .radiodhe keni mbaruar.

---

Format inline dhe shtoj/parashtroj

Për të përdorur të dhëna të parashtruara ose të bashkangjitura në një formë inline, sigurohuni që të vendosni .add-ondhe inputnë të njëjtën linjë, pa hapësira.

---

Formoni tekstin e ndihmës

Për të shtuar tekstin e ndihmës për hyrjet e formularit tuaj, përfshini tekstin e ndihmës në linjë me <span class="help-inline">ose një bllok teksti ndihme me <p class="help-block">pas elementit të hyrjes.

Formoni madhësitë e rrjetit

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

Përdorni të njëjtat .span*klasa nga sistemi i rrjetit për madhësitë e hyrjes.

Madhësitë alternative

Ju gjithashtu mund të përdorni klasa statike që nuk përshtaten në rrjet, nuk përshtaten me stilet reaguese të CSS ose llogari për lloje të ndryshme kontrollesh (p.sh., inputkundrejt select).

Teksti i parapërgatitur

@

Këtu është një tekst ndihmës

Teksti i shtuar

.00

Këtu keni më shumë tekst ndihme

Shtoj dhe paraqes

$ .00

Shtoj me buton

Shkoni!

Shtojcë me dy butona

Kërko Opsione

Kutitë e kontrollit në linjë

1 2 3

Kutitë e kontrollit

Opsioni i parë është kjo dhe ajo - sigurohuni që të përfshini pse është e mrekullueshme Opsioni dy gjithashtu mund të kontrollohet dhe përfshihet në rezultatet e formularit Opsioni tre mund - po, e keni marrë me mend - gjithashtu mund të kontrollohet dhe përfshihet në rezultatet e formularit

Shënim: Etiketat rrethojnë të gjitha opsionet për zona shumë më të mëdha të klikimeve dhe një formë më të përdorshme.

Butonat e radios

Opsioni i parë është kjo dhe ajo - sigurohuni që të përfshini pse është e mrekullueshme Opsioni dy mund të jetë diçka tjetër dhe zgjedhja e tij do të çaktivizojë opsionin një

Ruaj ndryshimet Anulo

Butonat për veprime

Si rregull, butonat duhet të përdoren vetëm për veprime ndërsa hiperlidhjet duhet të përdoren për objektet. Për shembull, "Shkarko" duhet të jetë një buton ndërsa "aktiviteti i fundit" duhet të jetë një lidhje.

Stilet e butonave mund të aplikohen për çdo gjë me .btnklasën e aplikuar. Megjithatë, zakonisht ju do të dëshironi t'i zbatoni këto vetëm për elementët <a>dhe .<button>

Përputhshmëria e ndërthurjes së shfletuesit

IE9 nuk pret gradientet e sfondit në qoshet e rrumbullakosura, kështu që ne e heqim atë. Lidhur me këtë, IE9 jankifikon buttonelementët me aftësi të kufizuara, duke e kthyer tekstin gri me një hije të keqe teksti që ne nuk mund ta rregullojmë.

Madhësi të shumta

Dëshironi butona më të mëdhenj apo më të vegjël? Shtoni .btn-large, .btn-small, ose .btn-minipër dy madhësi shtesë.

Veprimi parësor Veprimi

Veprimi parësor Veprimi

Veprimi parësor Veprimi

Gjendja me aftësi të kufizuara

Për butonat e çaktivizuar, shtoni .disabledklasën në lidhje dhe disabledatributin për <button>elementët.

Lidhja kryesore Lidhje

Butoni kryesor Butoni

Kokat lart! Ne përdorim .disabledsi një klasë të shërbimeve këtu, të ngjashme me .activeklasën e zakonshme, kështu që nuk kërkohet prefiks.

Një klasë, etiketa të shumta

Përdorni .btnklasën në një element <a>, <button>, ose .<input>

Lidhje Butoni

<a class = "btn" href = "" > Lidhja </a>  
<button class = "btn" type = "dorëzo" >  
  Butoni
</button>
<input class = "btn" type = "button"  
         vlera = "Input" >
<input class = "btn" type = "dorëzo"  
         vlera = "Dorëzo" >

Si një praktikë më e mirë, përpiquni të përputhni elementin për kontekstin tuaj për të siguruar paraqitjen e përputhshme të ndërshfletuesit. Nëse keni një input, përdorni një <input type="submit">për butonin tuaj.

• ikonë-xham
• ikonë-muzikë
• kërkimi i ikonave
• ikonë-zarf
• ikonë-zemër
• ikonë-yll
• ikonë-yll-bosh
• ikonë-përdorues
• ikonë-film
• ikona e madhe
• ikona-të
• listën e ikonave
• ikona-ok
• hiq ikonën
• zmadhimi i ikonave
• zmadhimi i ikonave
• ikon-off
• ikonë-sinjal
• ikonë-kog
• ikonë-plehra
• ikonë-shtëpi
• skedar-ikonë
• kohë-ikonë
• ikonë-rrugë
• ikonë-shkarkim-alt
• shkarkimi i ikonave
• ngarkimi i ikonave
• ikonë-inbox
• ikonë-luaj-rreth
• ikonë-përsërit
• rifreskimi i ikonave
• icon-list-alt
• bllokimi i ikonave
• ikonë-flamur
• ikonë-kufje

• ikon-volumi-off
• ikona-volumi-poshtë
• ikona-volumi-rritje
• icon-qrcode
• ikonë-barkodi
• ikonë-etiketë
• etiketa-ikona
• ikonë-libër
• ikonë-shënues
• printim ikonë
• ikonë-kamerë
• ikonë-font
• ikonë-e guximshme
• ikonë-kursive
• ikonë-tekst-lartësi
• ikonë-tekst-gjerësi
• ikonë-rreshtoj-majtas
• icon-align-center
• ikonë-rreshtoj-djathtas
• ikonë-rreshtoj-justifikoj
• listë-ikona
• ikonë-indent-majtas
• ikonë-indent-djathtas
• ikonë-facetime-video
• ikonë-foto
• ikonë-laps
• ikonë-hartë-shënues
• ikona-rregulloj
• ikonë-ngjyrë
• redaktimi i ikonave
• ikona-share
• kontrolli i ikonave
• ikonë-lëvizje
• ikonë-hap-prapa
• icon-fast-backward

• ikona-prapa
• ikon-luaj
• ikonë-pauzë
• ikonë-ndal
• ikonë-përpara
• icon-fast-forward
• ikonë-hap-përpara
• nxjerrja e ikonave
• ikonë-chevron-majtas
• ikonë-chevron-djathtas
• ikonë-plus-shenjë
• ikona-minus-shenjë
• icon-remove-shenjë
• ikona-ok-shenjë
• ikonë-pyetje-shenjë
• ikonë-informacion-shenjë
• ikona-screenshot
• icon-remove-rreth
• ikona-ok-rreth
• ikonë-ban-rreth
• ikonë-shigjeta-majtas
• ikona-shigjeta-djathtas
• ikonë-shigjeta-lart
• ikona-shigjeta-poshtë
• icon-share-alt
• icon-ridimensioni-plotë
• icon-ridimensioni-i vogël
• ikonë-plus
• ikona-minus
• ikonë-yll
• ikonë-pasthirrmë-shenjë
• ikonë-dhuratë
• fletë-ikona
• ikonë-zjarr
• ikonë-sy-hapur

• ikona-sy-mbyll
• ikonë-shenjë paralajmëruese
• ikonë-aeroplan
• ikonë-kalendar
• ikonë e rastësishme
• ikonë-koment
• ikonë-magnet
• ikonë-chevron-up
• ikonë-chevron-poshtë
• ikona-retweet
• ikonë-karrocë
• ikonë-dosje-mbyll
• ikonë-dosje-hap
• icon-ridimensioni-vertikal
• icon-ridimension-horizontal
• ikonë-hdd
• ikonë-bullhorn
• ikonë-zile
• ikonë-certifikatë
• ikonë-bravo
• ikona-gishti i madh-poshtë
• ikonë-djathtas
• ikonë-dorë-majtas
• ikona-dora lart
• ikonë-dorë-poshtë
• ikonë-rreth-shigjeta-djathtas
• ikonë-rreth-shigjeta-majtas
• ikona-rreth-shigjeta-lart
• ikona-rreth-shigjeta-poshtë
• ikonë-glob
• pikëllim ikonë
• ikona-detyrat
• ikonë-filtër
• ikonë-çantë
• ikonë me ekran të plotë

E ndërtuar si sprite

Në vend që të bëjmë çdo ikonë një kërkesë shtesë, ne i kemi përpiluar ato në një sprite - një grup imazhesh në një skedar që përdor CSS për të pozicionuar imazhet me background-position. Kjo është e njëjta metodë që ne përdorim në Twitter.com dhe ka funksionuar mirë për ne.

Të gjitha klasat e ikonave kanë parashtesë .icon-për hapësirën dhe shtrirjen e duhur të emrave, ashtu si komponentët tanë të tjerë. Kjo do të ndihmojë në shmangien e konflikteve me mjete të tjera.

Glyphicons na ka dhënë përdorimin e grupit Halflings në paketën tonë të mjeteve me burim të hapur për sa kohë që ne ofrojmë një lidhje dhe kredit këtu në dokumente. Ju lutemi merrni parasysh të bëni të njëjtën gjë në projektet tuaja.

Si të përdorni

Bootstrap përdor një <i>etiketë për të gjitha ikonat, por ato nuk kanë klasë rasti - vetëm një parashtesë të përbashkët. Për ta përdorur, vendosni kodin e mëposhtëm pothuajse kudo:

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

Ekzistojnë gjithashtu stile të disponueshme për ikonat e përmbysura (të bardha), të përgatitura me një klasë shtesë:

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

Ka 140 klasa për të zgjedhur për ikonat tuaja. Thjesht shtoni një <i>etiketë me klasat e duhura dhe jeni gati. Ju mund ta gjeni listën e plotë në sprites.less ose pikërisht këtu në këtë dokument.

Kokat lart! Kur përdorni pranë vargjeve të tekstit, si në butonat ose lidhjet naviguese, sigurohuni që të lini një hapësirë ​​​​pas <i>etiketës për ndarjen e duhur.

Raste te perdorimit

Ikonat janë të shkëlqyera, por ku mund t'i përdorësh ato? Këtu janë disa ide:

• Si pamje vizuale për navigimin e shiritit tuaj anësor
• Për një navigim thjesht të drejtuar nga ikonat
• Për butonat që ndihmojnë në përcjelljen e kuptimit të një veprimi
• Me lidhje për të ndarë kontekstin në destinacionin e një përdoruesi

Në thelb, kudo që mund të vendosni një <i>etiketë, mund të vendosni një ikonë.

Rifresko Përfundimi Fshije

Komentoni Cilësimet Me shume informacion

Adresa e emailit