Esasy CSS

Gämi üstünde, esasy HTML elementleri täze, yzygiderli görünmek we duýmak üçin giňeldilen synplar bilen bezelýär we ösdürilýär.

Sözbaşylar we göçürme

Tipografiki masştab

Tiphli tipografiki gözenek, üýtgeýänlerimiz.less faýlyndaky iki sany az üýtgeýjä esaslanýar: @baseFontSizewe @baseLineHeight. Birinjisi, şriftiň ululygynda ulanylýar, ikinjisi esasy çyzyk beýikligi.

Şol üýtgeýjileri we käbir matematikany, ähli görnüşlerimiziň çäklerini, paddinglerini we çyzyk beýikliklerini döretmek üçin ulanýarys.

Mysal üçin beden teksti

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus. Nullam id dolor id nibh ultricies ulag serişdesi.

Gurluşyň göçürmesi

Goşmak bilen abzasy tapawutlandyryň .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auktor. Duis mollis, haryt däl luctus.

h1. 1-nji sözbaşy

h2. 2-nji sözbaşy

h3. 3-nji sözbaşy

h4. 4-nji sözbaşy

h5. 5-nji sözbaşy
h6. 6-njy sözbaşy

Üns bermek, salgy bermek we gysgaltmak

Element Ulanylyşy Meýletin
<strong> Möhüm tekstiň bir bölegini bellemek üçin Hiç
<em> Stres bilen tekstiň bir bölegini bellemek üçin Hiç
<abbr> Giňeldilen görnüşini görkezmek üçin gysgaltmalary we gysgaltmalary ýazyň

Giňeldilen tekst üçin goşmaça titleatribut goşuň

.initialismBaş harp gysgaltmalary üçin synp ulanyň .
<address> Iň ýakyn atasy ýa-da tutuş iş topary üçin habarlaşmak üçin Linehli setirleri gutaryp formatirlemäni saklaň<br>

Üns bermek

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

Bellik:<b> HTML5- de ulanmaga arkaýyn <i>boluň, ýöne ulanylyşy birneme üýtgedi. esasan ses, tehniki adalgalar we ş.m. üçin <b>goşmaça ähmiýet bermezden sözleri ýa-da sözlemleri tapawutlandyrmak üçin niýetlenendir .<i>

Mysal salgylary

<address>Belligiň ulanylyşynyň iki mysaly :

Twitter, Inc.
795 Folsom şaýoly, Suite 600
San-Fransisko, CA 94107
P: (123) 456-7890
Doly ady
[email protected]

Mysal gysgaltmalary

Aýratynlykly gysgaltmalar titleaçyk nokatly aşaky araçäk we aýlawda kömek kursory bar. Bu ulanyjylara aýlawda bir zadyň görkeziljekdigini goşmaça görkezýär.

initialismBirneme kiçi tekst ululygyny berip, tipografiki sazlaşygy ýokarlandyrmak üçin synpy gysgaltma goşuň .

Dilimlenen çörekden bäri HTML iň gowy zat.

Sypat sözüniň gysgaldylyşy attr .

Bloknotlar

Element Ulanylyşy Meýletin
<blockquote> Başga çeşmeden mazmuny sitata etmek üçin blok derejeli element

citeÇeşme URL üçin atribut goşuň

.pull-leftFloüzýän görnüşler üçin .pull-rightsapaklary ulanyň
<small> Ulanyjynyň ýüzüne sitata goşmak üçin goşmaça element, adatça iş ady bolan awtor <cite>Çeşmäniň adynyň ýa-da adynyň töweregine ýerleşdiriň

Blokkot goşmak üçin , sitata hökmünde <blockquote>islendik HTML -i gurşap alyň. Göni sitatalar üçin a <p>.

<small>Çeşmäňizi görkezmek üçin goşmaça elementi goşuň we &mdash;stilleşdirmek maksady bilen öňünden çyzgy alarsyňyz.

  1. <blockquote>
  2. <p> Lorem ipsum dolor amet, konsektetur adipiscing elit. Integer posuere ante venenatis-i ýok edýär. </p>
  3. <small> Meşhur biri </small>
  4. </blockquote>

Mysal üçin bloknotlar

Bellenen bloknotlar şeýle görnüşde düzülendir:

“Lorem ipsum dolor” oturýar. Integer posuere ante venenatis-i ýok edýär.

Iş bedeninde meşhur biri

Blokotyňyzy sag tarapda ýüzmek üçin goşuň class="pull-right":

“Lorem ipsum dolor” oturýar. Integer posuere ante venenatis-i ýok edýär.

Iş bedeninde meşhur biri

Sanawlar

Tertibi

<ul>

  • Lorem ipsum dolor amet otur
  • Consectetur adipiscing elit
  • Massa-da bitewi molestie lorem
  • Pretium nisl aliketinde ýeňilleşdirme
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat
  • Faucibus porta lacus fringilla vel
  • Ene oturylyşygy
  • Porttitor loremini alyň

Düzedilmedik

<ul class="unstyled">

  • Lorem ipsum dolor amet otur
  • Consectetur adipiscing elit
  • Massa-da bitewi molestie lorem
  • Pretium nisl aliketinde ýeňilleşdirme
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat
  • Faucibus porta lacus fringilla vel
  • Ene oturylyşygy
  • Porttitor loremini alyň

Sargyt edildi

<ol>

  1. Lorem ipsum dolor amet otur
  2. Consectetur adipiscing elit
  3. Massa-da bitewi molestie lorem
  4. Pretium nisl aliketinde ýeňilleşdirme
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Ene oturylyşygy
  8. Porttitor loremini alyň

Düşündiriş

<dl>

Düşündiriş sanawlary
Düşündiriş sanawy adalgalary kesgitlemek üçin ajaýyp.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit metus-da mi porta gravida.
Malesuada porta
Etiam porta sem maleuada magna mollis euismod.

Gorizontal düşündiriş

<dl class="dl-horizontal">

Düşündiriş sanawlary
Düşündiriş sanawy adalgalary kesgitlemek üçin ajaýyp.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit metus-da mi porta gravida.
Malesuada porta
Etiam porta sem maleuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, fermentum massa justo sit amet risus.

Başlar! Gorizontal düşündiriş sanawlary, çep sütüniň düzedişine gabat gelmeýän adalgalary keser text-overflow. Dar görnüşlerde, deslapky tertipleşdirilen tertibe geçerler.

Inline

Koduň içerki böleklerini örtüň <code>.

  1. Mysal üçin , <code> bölümi </ code > setir görnüşinde örtülmelidir .

Esasy blok

<pre>Birnäçe setir kod üçin ulanyň . Dogry görkezmek üçin koddaky islendik burç ýaýdan gaçmagy unutmaň.

<p> Bu ýerde nusga nusgasy ... </p>
  1. <pre>
  2. & lt; p & gt; Bu ýerde nusga tekst ... & lt; / p & gt;
  3. </pre>

Bellik:<pre> Kodlary bellikleriň içinde mümkin boldugyça çepe ýakyn saklaň ; ähli bellikleri görkezer.

Islege görä .pre-scrollable, iň ýokary beýikligi 350px boljak we y ok aýlaw paneli bilen üpjün etjek synpy goşup bilersiňiz.

Google Prettify

Şol bir <pre>elementi alyň we güýçlendirilen görkeziş üçin iki sany goşmaça sapak goşuň.

  1. <p> Bu ýerde nusga nusgasy ... </p>
  1. <pre class = "prettyprint
  2. ýorgan-düşek " >
  3. & lt; p & gt; Bu ýerde nusga tekst ... & lt; / p & gt;
  4. </pre>

Google-code-prettify-i göçürip alyň we nädip ulanmalydygyny okaň.

Stol belligi

Bellik Düşündiriş
<table> Maglumatlary tablisa görnüşinde görkezmek üçin element
<thead> <tr>Stol sütünlerine bellik etmek üçin tablisanyň sözbaşy hatarlary () üçin konteýner elementi
<tbody> <tr>Stoluň göwresindäki stol hatarlary () üçin konteýner elementi
<tr> Bir hatarda peýda bolan stol öýjükleriniň ( <td>ýa-da ) toplumy üçin konteýner elementi<th>
<td> Bellenen tablisanyň öýjügi
<th> Sütün (ýa-da hatara, ýerleşişine we ýerleşişine baglylykda) ýörite tablisa öýjügi
a<thead>
<caption> Tablisanyň saklaýan zatlarynyň beýany ýa-da gysgaça mazmuny, esasanam ekran okyjylary üçin peýdaly
  1. <tablisa>
  2. <thead>
  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. </table>

Tablisa görnüşleri

Ady Synp Düşündiriş
Bellenen Hiç Hiç hili stil ýok, diňe sütünler we hatarlar
Esasy .table Diňe hatarlaryň arasynda keseligine çyzyklar
Serhet .table-bordered Burçlary tegelekleýär we daşarky araçägi goşýar
Zebra zolagy .table-striped Täsin hatarlara açyk çal reňkli reňk goşýar (1, 3, 5 we ş.m.)
Kondensirlenen .table-condensed Hemme elementleriň içinde 8px-den 4px-e çenli dikligine padding tdkesýärth

Mysal tablisalary

1. Bellenen tablisanyň görnüşleri

Tablisa okalmagyny üpjün etmek we gurluşy saklamak üçin awtomatiki usulda diňe birnäçe serhet bilen düzülýär. 2.0 bilen .tablesynp talap edilýär.

  1. <table class = "table" >
  2. </table>
# Ady Familiýasy Ulanyjy ady
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry guş @twitter

2. Zolakly tablisa

Zebra zolaklaryny goşup, stollaryňyz bilen azajyk gyzyklanyň - .table-stripedsynpy goşuň.

Bellik: Zolakly tablisalarda :nth-childCSS saýlaýjysy ulanylýar we IE7-IE8-de ýok.

  1. <table class = "table table-zolakly" >
  2. </table>
# Ady Familiýasy Ulanyjy ady
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry guş @twitter

3. Serhet stoly

Estetiki maksatlar üçin tutuş stoluň we tegelek burçlaryň araçäklerini goşuň.

  1. <table class = "stol tablisasy bilen araçäk" >
  2. </table>
# Ady Familiýasy Ulanyjy ady
1 Bellik Otto @mdo
Bellik Otto @getbootstrap
2 Jacobakup Thornton @fat
3 Larry the guş @twitter

4. Kondensirlenen stol

.table-condensedStol öýjükleriniň örtügini ýarym (8px-den 4px-e çenli) kesmek üçin synp goşup, stollaryňyzy has ykjam ediň .

  1. <table class = "stol stoly kondensirlenen" >
  2. </table>
# Ady Familiýasy Ulanyjy ady
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter

5. Olaryň hemmesini birleşdiriň!

Bar bolan sapaklaryň islendik birini ulanyp, dürli görnüşlere ýetmek üçin stol synplarynyň islendigini birleşdirip bilersiňiz.

  1. <table class = "stol stoly zolakly stol bilen araçäk stol "
  2. ...
  3. </table>
Doly ady
# Ady Familiýasy Ulanyjy ady
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter

Çeýe HTML we CSS

“Bootstrap” -daky formalaryň iň gowy tarapy, bellikleriňizde nädip gursaňyzam, ähli girişleriňiz we dolandyryşlaryňyz ajaýyp görünýär. Artykmaç HTML talap edilmeýär, ýöne muny talap edýänler üçin nusgalary hödürleýäris.

Has çylşyrymly düzülişler aňsat düzmek we hadysany baglanyşdyrmak üçin anyk we ulaldylan sapaklar bilen gelýär, şonuň üçin her ädimde özüňizi gurşap alýarsyňyz.

Dört tertip düzüldi

“Bootstrap” forma görnüşleriniň dört görnüşini goldaýar:

  • Dik (asyl)
  • Gözlemek
  • Inline
  • Gorizontal

Dürli görnüş düzülişleri bellemek üçin käbir üýtgeşmeleri talap edýär, ýöne dolandyryşlaryň özleri şol bir hereket edýärler.

Dolandyryş ýagdaýlary we ş.m.

“Bootstrap” -yň görnüşleri, giriş, tekstariýa we garaşýanlaryňyzy saýlamak ýaly esasy forma dolandyryşlarynyň stillerini öz içine alýar. Alsoöne goşmaça we öňünden taýýarlanan girişler we bellik gutularynyň sanawlaryny goldamak ýaly birnäçe aýratyn komponentler bilen bilelikde gelýär.

Erroralňyşlyk, duýduryş we üstünlik ýaly döwletler forma gözegçiliginiň her görnüşi üçin girizilýär. Maýyp dolandyryşlar üçin stiller hem bar.

Dört görnüş

“Bootstrap” umumy web görnüşleriniň dört görnüşi üçin ýönekeý bellikleri we stilleri üpjün edýär.

Ady Synp Düşündiriş
Dik (asyl) .form-vertical (hökmany däl) Dolandyryşlaryň üstünde goýlan, çep tarapdaky ýazgylar
Inline .form-inline Ykjam stil üçin çep hatar belligi we içerki blok dolandyryşlary
Gözlemek .form-search Adaty gözleg estetiki üçin goşmaça tegelek tekst giriş
Gorizontal .form-horizontal Dolandyryşlar bilen bir setirde çep, saga düzülen ýazgylar

Diňe forma dolandyryşlaryny ulanyp, mysal görnüşleri , goşmaça bellik ýok

Esasy görnüş

Goşmaça belliksiz akylly we ýeňil defoltlar.

Mysal üçin, blok derejeli kömek teksti.

  1. <form class = "gowy" >
  2. <label> Etiketkanyň ady </label>
  3. <giriş görnüşi = "text" class = "span3" ýer eýesi = "Bir zat ýazyň ..." >
  4. <span class = "help-block" > Mysal üçin blok derejeli kömek teksti. </span>
  5. <label class = "bellik gutusy" >
  6. <giriş görnüşi = "bellik gutusy" > Barlaň
  7. </label>
  8. <düwme görnüşi = " tabşyr " synp = "btn" > Ibermek </button>
  9. </form>

Gözleg formasy

Forma .form-searchwe . .search-query_input

  1. <form class = "gowy form-gözleg" >
  2. <giriş görnüşi = "text" class = "giriş-orta gözleg-talap" >
  3. <düwme görnüşi = "tabşyr" synp = "btn" > Gözleg </button>
  4. </form>

Çyzgy görnüşi

.form-inlineWertikal tekizlemäni we forma dolandyryşlarynyň aralygyny inçe goşuň .

  1. <form class = "gowy form-inline" >
  2. <giriş görnüşi = "text" class = "input-small" ýer eýesi = "E-poçta" >
  3. <giriş görnüşi = "parol" synp = "giriş-kiçi" ýer eýesi = "Parol" >
  4. <label class = "bellik gutusy" >
  5. <input type = "checkbox" > Rememberadyňyzda saklaň
  6. </label>
  7. <düwme görnüşi = "tabşyr" class = "btn" > Giriş </button>
  8. </form>

Gorizontal görnüşler

Sag tarapda görkezilýär, biziň goldaýan deslapky görnüş dolandyryşlarymyz. Ine, oklaryň sanawy:

  • tekst girişleri (tekst, parol, e-poçta we ş.m.)
  • bellik gutusy
  • radio
  • saýlaň
  • köp saýlaň
  • faýl giriş
  • tekst

Freeform tekstinden başga-da, HTML5 tekste esaslanýan islendik giriş şeýle görünýär.

Mysal belligi

Aboveokardaky mysal görnüşiniň ýerleşişini göz öňünde tutup, ine, ilkinji giriş we gözegçilik topary bilen baglanyşykly bellik. The .control-group, .control-labelwe .controlssapaklaryň hemmesi stil üçin zerur.

  1. <form class = "form-gorizontal" >
  2. <fieldset>
  3. <legend> Rowaýat teksti </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Tekst girizmek </label>
  6. <div class = "dolandyryşlar" >
  7. <giriş görnüşi = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Kömek tekstini goldaýan </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Forma gözegçilik ýagdaýy

“Bootstrap” brauzer tarapyndan goldanýan we disabledştatlar üçin stilleri görkezýär. Adaty Webkit-i aýyrýarys outlinewe box-shadowonuň ýerine bir ýer goýýarys :focus.


Forma tassyklamasy

Şeýle hem ýalňyşlyklar, duýduryşlar we üstünlik üçin tassyklama stillerini öz içine alýar. Ulanmak üçin daş-töweregiňize säwlik synpyny goşuň .control-group.

  1. <meýdan meýdançasy
  2. class = "dolandyryş-topar ýalňyşlygy" >
  3. </fieldset>
Bu ýerde käbir gymmatlyklar
Bir zat nädogry bolup biler
Erroralňyşlygy düzediň
Woohoo!
Woohoo!

Forma dolandyryşlaryny giňeltmek

Girişleri goşuň we goşuň

Giriş toparlary, goşulan ýa-da öňünden ýazylan tekst bilen, girişleriňiz üçin has köp mazmun bermegiň aňsat usulyny üpjün edýär. Ajaýyp mysallara Twitter ulanyjy atlary üçin @ belgisi ýa-da maliýe üçin $ girýär.


Bellikler we radiolar

V1.4-e çenli “Bootstrap” bellik gutularynyň we radiolaryň töwereginde goşmaça bellik talap edýär. <label class="checkbox">Indi, örtülen zady gaýtalamak ýönekeý bir mesele <input type="checkbox">.

Içerki bellikler we radiolar hem goldanýar. Diňe .inlinehaýsydyr birine goşuň .checkboxýa-da .radiogutardyňyz.


Formalary düzüň we goşuň / goşuň

Giriş görnüşlerini öňünden taýýarlamak ýa-da goşmak üçin , boş ýerleri goýman .add-on, inputşol bir setirde goýuň.


Kömek teksti

Forma girişleriňiz üçin kömek tekstini goşmak üçin giriş elementinden soň <span class="help-inline">kömek tekstini ýa-da kömek tekst blokyny goşuň.<p class="help-block">

.span*Giriş ululyklary üçin gözenek ulgamyndan şol bir synplary ulanyň .

Şeýle hem, gözenegiň kartasyna girmeýän, täsirli CSS stillerine uýgunlaşmaýan ýa-da dürli görnüşli gözegçilikleri hasaba almaýan statiki synplary ulanyp bilersiňiz (meselem, inputvs. select).

@

Ine käbir kömek teksti

.00
Ine has köp kömek teksti
$ .00

Bellik: Etiketkalar has uly basmak ýerleri we has peýdaly görnüş üçin ähli wariantlary gurşap alýar.

Düwme class = "" Düşündiriş
btn Gradient bilen adaty çal düwme
btn btn-primary Goşmaça wizual agram berýär we düwmeler toplumynda esasy hereketi kesgitleýär
btn btn-info Adaty stillere alternatiwa hökmünde ulanylýar
btn btn-success Üstünlikli ýa-da oňyn hereketi görkezýär
btn btn-warning Bu hereket bilen seresap bolmalydygyny görkezýär
btn btn-danger Howply ýa-da potensial negatiw hereketi görkezýär
btn btn-inverse Semantiki hereket ýa-da ulanmak bilen baglanyşykly bolmadyk çal çal düwmesi

Hereketler üçin düwmeler

Duşuşyk hökmünde düwmeler diňe hereketler üçin ulanylmaly, giperlinkler bolsa obýektler üçin ulanylmaly. Mysal üçin, "Downloadüklemek" düwmesi bolmaly, "soňky işjeňlik" baglanyşyk bolmaly.

.btnDüwmeleriň stilleri ulanylýan synp bilen islendik zada ulanylyp bilner. <a>Şeýle-de bolsa, adatça bulary diňe we <button>elementlere ulanmak islärsiňiz .

Brauzeriň gabat gelmegi

IE9 tegelek burçlarda fon gradiýentlerini kesmeýär, şonuň üçin aýyrýarys. Degişli, IE9 button, düzedip bilmeýän nejis tekst kölegesi bilen çal reňkli teksti maýyp elementleri görkezýär.

Birnäçe ululyk

Uly ýa-da kiçi düwmeler barmy? Goşuň ýa-da .btn-largeiki goşmaça ululyk üçin..btn-small.btn-mini


Maýyp ýagdaý

Öçürilen düwmeler üçin .disabledsynpy baglanyşyklara we elementleriň disabledatributyna goşuň.<button>

Esasy baglanyşyk Baglanyşyk

Başlar! .disabledBu ýerde umumy synpa meňzeş peýdaly synp hökmünde ulanýarys .active, şonuň üçin prefiks talap edilmeýär.

Bir synp, birnäçe bellik

.btnSynpy an <a>, <button>ýa-da <input>elementde ulanyň .

Baglanyşyk
  1. <a class = "btn" href = ""> Baglanyşyk </a> _
  2. <button class = "btn" type = "tabşyr" >
  3. Düwme
  4. </button>
  5. <giriş synpy = "btn" tip = "düwme"
  6. value = "Giriş" >
  7. <giriş synpy = "btn" görnüşi = "tabşyr"
  8. value = "Iber" >

Iň oňat tejribe hökmünde, brauzeriň görkezilişine laýyk gelmegini üpjün etmek üçin elementi kontekstiňize laýyklaşdyrmaga synanyşyň. Eger bar bolsa , düwmäňiz üçin inputan ulanyň .<input type="submit">

  • nyşan-aýna
  • nyşan-saz
  • nyşan gözlemek
  • nyşan-konwert
  • nyşan-ýürek
  • nyşan-ýyldyz
  • nyşan-ýyldyz boş
  • nyşan-ulanyjy
  • nyşan-film
  • nyşan-uly
  • nyşan
  • nyşan-sanaw
  • nyşan-ok
  • nyşany aýyrmak
  • nyşan-ulaltmak
  • nyşany ulaltmak
  • nyşanjygy
  • nyşan-signal
  • icon-cog
  • nyşan-zibil
  • nyşan-öý
  • nyşan-faýl
  • nyşan wagty
  • nyşan-ýol
  • icon-download-alt
  • nyşanjygy
  • nyşan ýüklemek
  • nyşan gutusy
  • icon-play-tegelek
  • nyşan-gaýtalamak
  • nyşan-täzeleme
  • icon-list-alt
  • nyşan-gulp
  • nyşan-baýdak
  • nyşan-nauşnikler
  • nyşan-ses
  • nyşan-ses-aşak
  • nyşan-ses
  • icon-qrcode
  • nyşan-ştrih-kod
  • nyşan belligi
  • nyşan belgileri
  • nyşan-kitap
  • nyşan belgisi
  • nyşan-çap
  • nyşan-kamera
  • nyşan-şrift
  • nyşan
  • nyşan-çyzyk
  • nyşan-tekst-beýiklik
  • nyşan-tekst-ini
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • nyşanlaryň sanawy
  • icon-indent-left
  • icon-indent-sag
  • icon-facime-wideo
  • nyşan-surat
  • nyşan-galam
  • nyşan-karta-marker
  • nyşan-saz
  • nyşan
  • nyşan-redaktirleme
  • nyşan paýlaşmak
  • nyşanjygy barlamak
  • nyşanjygy
  • nyşan-ädim yza
  • nyşan-çalt-yza
  • nyşan-yza
  • nyşan-oýnamak
  • nyşan-pauza
  • nyşan-duralga
  • nyşanjygy
  • nyşan-çalt öňe
  • nyşan-ädim öňe
  • nyşan-çykarmak
  • icon-chevron-çep
  • icon-chevron-sag
  • nyşan belgisi
  • nyşan-minus-belgi
  • nyşan-aýyrmak-belgi
  • nyşan-ok-belgi
  • nyşan-sorag-belgi
  • nyşan-maglumat-belgi
  • nyşan-skrinshot
  • nyşan-aýyrmak-tegelek
  • nyşan-ok-tegelek
  • icon-ban-tegelek
  • nyşan-ok-çep
  • nyşan-ok-sag
  • nyşan-ok
  • nyşan-ok-aşak
  • icon-share-alt
  • nyşan-ölçegi-doly
  • icon-resize-small
  • nyşan-plýus
  • nyşan-minus
  • nyşan belgisi
  • nyşan-bellik belgisi
  • nyşan-sowgat
  • nyşan-ýaprak
  • nyşan-ot
  • nyşan-göz
  • nyşan-göz
  • nyşan-duýduryş belgisi
  • nyşan-tekizlik
  • nyşan-senenama
  • nyşan-tötänleýin
  • nyşan-teswir
  • nyşan-magnit
  • icon-chevron-up
  • nyşan-şewron-aşak
  • nyşan-retweet
  • nyşan-söwda arabasy
  • nyşan-bukja-ýap
  • nyşan bukjasy-açyk
  • nyşan-ölçegi-dik
  • nyşan-ölçeg-keseligine
  • icon-hdd
  • icon-bullhorn
  • nyşan-jaň
  • nyşan-şahadatnama
  • nyşan-baş barmak
  • nyşan-barmak-aşak
  • nyşan-sag-sag
  • nyşan-çep
  • nyşan
  • nyşanjygy
  • nyşan-tegelek-ok-sag
  • nyşan-tegelek-ok-çep
  • nyşan-tegelek-ok
  • nyşan-tegelek-ok-aşak
  • nyşan-globus
  • nyşan
  • nyşan-meseleler
  • nyşan-süzgüç
  • nyşan portfeli
  • nyşan-doly ekran

Sprite hökmünde gurlupdyr

Her nyşany goşmaça haýyş etmegiň ýerine, olary sprite - şekilleri ýerleşdirmek üçin CSS ulanýan bir faýlda bir topar şekil düzdük background-position. Bu, Twitter.com-da ulanýan usulymyz we bu biziň üçin gowy işledi.

Ichli nyşanlaryň synplary, .icon-beýleki komponentlerimiz ýaly, dogry at goýmak we gözlemek üçin prefiks edilýär. Bu beýleki gurallar bilen gapma-garşylyklaryň öňüni almaga kömek eder.

Glifikonlar , bu ýerde resminamalarda baglanyşyk we karz berýänçäk, açyk çeşmeli gurallar toplumymyzda goýlan “Halflings” -i ulanmaga rugsat berdi. Taslamalaryňyzda hem şeýle etmegi göz öňünde tutmagyňyzy haýyş edýäris.

Nähili ulanmak

“Bootstrap <i>” ähli nyşanlaryň belligini ulanýar, ýöne olaryň synpy ýok - diňe umumy prefiks. Ulanmak üçin aşakdaky kody islendik ýere ýerleşdiriň:

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

Bir goşmaça synp bilen taýýarlanan ters (ak) nyşanlaryň görnüşleri hem bar:

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

Nyşanlaryňyz üçin saýlamak üçin 140 synp bar. Diňe <i>dogry synplar bilen bellik goşuň we düzüldiňiz. Doly sanawy sprites.less ýa-da şu resminamada tapyp bilersiňiz.

Başlar! Düwmelerde ýa-da deňiz baglanyşyklarynda bolşy ýaly, tekst setirleriniň gapdalynda ulanylanda, <i>dogry aralyk üçin bellikden soň boş ýer goýuň.

Kazyýetleri ulanyň

Nyşanlar ajaýyp, ýöne olary nirede ulanar? Ine birnäçe pikir:

  • Gapdal nawigasiýa üçin wizual hökmünde
  • Diňe nyşan bilen dolandyrylýan nawigasiýa üçin
  • Hereketiň manysyny bermek üçin düwmeler üçin
  • Ulanyjynyň barjak ýerinde kontekst paýlaşmak üçin baglanyşyklar bilen

Aslynda, <i>bellik goýup boljak islendik ýerde nyşan goýup bilersiňiz.

Mysallar

Gurallar paneli, nawigasiýa ýa-da deslapky görnüş girişleri üçin düwmelerde, düwme toparlarynda ulanyň.