CSS bazë

Në krye të skelave, elementët bazë HTML janë stiluar dhe përmirësuar me klasa të zgjeruara për të ofruar një pamje dhe ndjesi të freskët, të qëndrueshme.

Titujt dhe kopjet e trupit

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.

h1. Kreu 1

h2. Kreu 2

h3. Kreu 3

h4. Kreu 4

h5. Kreu 5
h6. Kreu 6

Theksimi, adresa dhe shkurtesa

Elementi Përdorimi Fakultative
<strong> Për theksimin e një fragmenti teksti me të rëndësishme Asnje
<em> Për theksimin e një fragmenti teksti me stres Asnje
<abbr> Mbështjell shkurtesat dhe akronimet për të shfaqur versionin e zgjeruar në lëvizje

Përfshi titleatributin opsional për tekstin e zgjeruar

Përdorni .initialismklasën për shkurtesat e mëdha.
<address> Për informacionin e kontaktit për paraardhësin e tij më të afërt ose të gjithë trupin e punës Ruani formatimin duke i mbyllur të gjitha rreshtat me<br>

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 .

Blloqe kuotash

Elementi Përdorimi Fakultative
<blockquote> Element i nivelit të bllokut për të cituar përmbajtje nga një burim tjetër

Shto citeatribut për URL-në e burimit

Përdorimi .pull-leftdhe .pull-rightklasa për opsionet e lundruara
<small> Element opsional për shtimin e një citimi të drejtuar nga përdoruesi, zakonisht një autor me titullin e punës Vendosni <cite>rreth titullit ose emrit të burimit

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 &mdash;para tij për qëllime stilimi.

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

Shembuj të kuotave të bllokut

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

Listat

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

  1. 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>
  1. <para>
  2. <p>Shembull teksti këtu...</p>
  3. </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.

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

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

Shënimi i tabelës

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
  1. <tabela>
  2. <kokë>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <trupi>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </tabela>

Opsionet e tabelës

Emri Klasa Përshkrim
E paracaktuar Asnje Nuk ka stile, vetëm kolona dhe rreshta
bazë .table Vetëm vija horizontale midis rreshtave
I kufizuar .table-bordered Rrumbullakon qoshet dhe shton kufirin e jashtëm
Zebra-shirit .table-striped Shton ngjyrën gri të hapur të sfondit në rreshtat tek (1, 3, 5, etj.)
I kondensuar .table-condensed Prit mbushjen vertikale në gjysmë, nga 8px në 4px, brenda të gjitha tddhe thelementeve

Shembuj tabelash

1. Stilet e parazgjedhura të tabelës

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.

  1. <table class = "tabela" >
  2. </tabela>
# Emri Mbiemri Emri i përdoruesit
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj

2. Tavolinë me vija

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.

  1. <table class = "tavolinë me shirita" >
  2. </tabela>
# Emri Mbiemri Emri i përdoruesit
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj

3. Tabela me kufi

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

  1. <table class = "tabela-bordered" >
  2. </tabela>
# Emri Mbiemri Emri i përdoruesit
1 shenjë Oto @mdo
shenjë Oto @getbootstrap
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj

4. Tabela e kondensuar

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

  1. <table class = "table table-condensed" >
  2. </tabela>
# Emri Mbiemri Emri i përdoruesit
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj

5. Kombinojini të gjitha!

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

  1. <table class = "tavolinë-tabela-striped table-bordered table-condensed" >
  2. ...
  3. </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.

Katër lloje formash

Bootstrap ofron shënime dhe stile të thjeshta për katër stile të formave të zakonshme të uebit.

Emri Klasa Përshkrim
Vertikale (e parazgjedhur) .form-vertical (nuk kërkohet) Etiketa të grumbulluara, të rreshtuara majtas mbi kontrollet
Në rradhë .form-inline Etiketa e rreshtuar majtas dhe kontrollet e blloqeve të brendshme për stil kompakt
Kërko .form-search Hyrja e tekstit e rrumbullakosur për një estetikë tipike kërkimi
Horizontale .form-horizontal Lëshoni etiketat majtas, të rreshtuara djathtas në të njëjtën linjë si kontrollet

Shembuj të formularëve duke përdorur vetëm kontrolle të formularit, pa shënime shtesë

Forma bazë

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

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

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

Formulari i kërkimit

Shtoni .form-searchnë formular dhe .search-queryinput.

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

Forma inline

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

  1. <form class = "pus form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Fjalëkalimi" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Më mbaj mend
  6. </label>
  7. <button type = "submit" class = "btn" > Hyni </button>
  8. </form>

Format horizontale

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

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

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.

  1. <form class = "formë-horizontal" >
  2. <set e fushave>
  3. <legend> Teksti i legjendës </legend>
  4. <div class = "kontrol-grup" >
  5. <label class = "control-label" for = "input01" > Hyrja e tekstit </label>
  6. <div class = "kontrollet" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Teksti mbështetës i ndihmës </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Gjendjet e kontrollit të formës

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.

  1. <set e fushave
  2. class = "gabim i grupit të kontrollit" >
  3. </fieldset>
Disa vlera këtu
Diçka mund të ketë shkuar keq
Ju lutemi korrigjoni gabimin
Woohoo!
Woohoo!

Zgjerimi i kontrolleve të formularit

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.

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

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

@

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

.00
Këtu keni më shumë tekst ndihme
$ .00

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

Butoni class = "" Përshkrim
btn Buton standard gri me gradient
btn btn-primary Ofron peshë shtesë vizuale dhe identifikon veprimin parësor në një grup butonash
btn btn-info Përdoret si një alternativë ndaj stileve të paracaktuara
btn btn-success Tregon një veprim të suksesshëm ose pozitiv
btn btn-warning Tregon se duhet pasur kujdes me këtë veprim
btn btn-danger Tregon një veprim të rrezikshëm ose potencialisht negativ
btn btn-inverse Butoni alternativ gri i errët, jo i lidhur me një veprim ose përdorim semantik

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


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

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
  1. <a class = "btn" href = "" > Lidhja </a>
  2. <button class = "btn" type = "dorëzo" >
  3. Butoni
  4. </button>
  5. <input class = "btn" type = "button"
  6. vlera = "Input" >
  7. <input class = "btn" type = "dorëzo"
  8. 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:

  1. <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ë:

  1. <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ë.

Shembuj

Përdorini ato në butona, grupe butonash për një shirit veglash, navigim ose hyrje të formularit të paracaktuar.