Bingeha CSS

Li ser îskeleyê, hêmanên bingehîn ên HTML-ê bi dersên berfereh hatine şêwazkirin û zêdekirin da ku dîmen û hestek nû, hevgirtî peyda bikin.

Sernav û kopiya laş

Pîvana tîpografiyê

Tevahiya tora tîpografî li ser du guhêrbarên Kêmtir di pelê meya guhêrbar.less de ye: @baseFontSizeû @baseLineHeight. Ya yekem mezinahiya tîpên bingehîn e ku li seranserê tê bikar anîn û ya duyemîn jî rêzika bingehîn e.

Em wan guherbaran, û hin matematîkê bikar tînin, da ku marjînal, peldank, û bilindahiyên rêzê yên hemî celeb û hêj bêtir biafirînin.

Mînak teksta laş

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.

Kopê laşê rêber

Bi lêzêdekirina paragrafekê rawestin .lead.

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

h1. Sernav 1

h2. Sernav 2

h3. Sernav 3

h4. Sernav 4

h5. Sernav 5
h6. Sernav 6

Girîng, navnîşan û kurtkirin

Pêve Bikaranîna Bixwe
<strong> Ji bo balkişandina parçeyek nivîsê ya bi girîng Netû
<em> Ji bo balkişandina perçeyek nivîsê ya bi stres Netû
<abbr> Kurtenivîs û kurtenivîsan dipêçe da ku guhertoya berfireh li ser hoverê nîşan bide

Taybetmendiya vebijarkî titleya ji bo nivîsa berbelavkirî tê de

Ji .initialismbo kurtenivîsên mezin çîn bikar bînin.
<address> Ji bo agahdariya pêwendiyê ji bo bav û kalê wê yê herî nêzîk an tevahiya laşê xebatê Bi qedandina hemû rêzan re formatkirinê biparêzin<br>

Bikaranîna giraniyê

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

Nîşe: Hûn dikarin <b>di <i>HTML5-ê de bikar bînin, lê karanîna wan hinekî guherî. <b>tê vê wateyê ku peyvan an hevokan ronî bike bêyî ku girîngiyek zêde ragihîne dema ku <i>bi piranî ji bo deng, peyvên teknîkî, hwd.

Navnîşanên nimûne

Li vir du nimûne hene ku çawa <address>tag dikare were bikar anîn:

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

Mînak kurtkirin

Kurteyên bi titletaybetmendiyê xwedan tixûbek binî ya sivik û xalîçeyek arîkariyê li ser hêlînê heye. Ev nîşanek zêde dide bikarhêneran ku dê tiştek li ser hoverê were xuyang kirin.

Dersê initialismli kurtenivîsekê zêde bikin da ku ahenga tîpografiyê zêde bikin bi dayîna wê ya piçûkek nivîsê ya piçûktir.

HTML ji nanê perçekirî de tiştê çêtirîn e.

Kurteya peyva taybetmendiyê attr e .

Blockquotes

Pêve Bikaranîna Bixwe
<blockquote> Hêmana astê blokê ji bo veguheztina naverokê ji çavkaniyek din

Ji citebo URL-ya çavkaniyê taybetmendiyê zêde bikin

Ji bo vebijarkên pêvekirî bikar bînin .pull-leftû ders.pull-right
<small> Hêmanek vebijarkî ji bo lêzêdekirina navgînek rûbirû ya bikarhêner, bi gelemperî nivîskarek bi sernavê xebatê <cite>Li dora sernav an navê çavkaniyê bi cîh bikin

Ji bo tevlêkirina blokê, li <blockquote>dora her HTML-ê wekî quote bipêçin. Ji bo quotes rasterast em pêşniyar dikin a <p>.

Hêmanek vebijarkî <small>têxin ku çavkaniya xwe binav bikin û hûn ê ji &mdash;bo mebestên şêwazê pêvekek berî wê bistînin.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hejmara bêkêmasî ya herî zêde tê xuyang kirin. </p>
  3. <small> Kesê navdar </small>
  4. </blockquote>

Mînakên blokan

Blokên xwerû bi vî rengî têne şêwaz kirin:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hejmara bêkêmasî ya herî zêde tê xuyang kirin.

Kesek navdar di Body of xebatê de

Ji bo ku bloka xwe ber bi rastê ve bikişîne, lê zêde bike class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hejmara bêkêmasî ya herî zêde tê xuyang kirin.

Kesek navdar di Body of xebatê de

Lists

Unordered

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Hêsankirin di aliquet pretium nisl
  • 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
  • Hêsankirin di aliquet pretium nisl
  • 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

Ferman kirin

<ol>

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

Terîf

<dl>

Navnîşan lîsteyên
Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.
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.

Danasîna Horizontal

<dl class="dl-horizontal">

Navnîşan lîsteyên
Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.
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.

Serê xwe! Lîsteyên danasînên asoyî dê şertên ku pir dirêj in ku di rastkirina stûna çepê de cih bigirin qut bikin text-overflow. Di dîmenderên teng de, ew ê biguhezînin sêwirana stêrkek xwerû.

Inline

Parçeyên kodê yên hundurîn bi <code>.

  1. Mînakî , beşa < code> </ code > divê wekî navçê were pêçandin .

Bloka bingehîn

Ji <pre>bo gelek rêzikên kodê bikar bînin. Ji bo veguheztina rast pê ewle bin ku hûn di kodê de ji berbendên goşeyê birevin.

<p>Nimûneya nivîsê li vir...</p>
  1. <pre>
  2. <p>Nimûneya nivîsê li vir...</p>
  3. </pre>

Nîşe: Pê bawer bin ku kodê di nav <pre>etîketan de bi qasî ku pêkan nêzîkê çepê bin; ew ê hemî tabloyan bide.

Hûn dikarin vebijarkî .pre-scrollableçîna ku dê bilindahiyek herî zêde 350 px destnîşan bike û pêvekek y-axis peyda bike lê zêde bike.

Google Prettify

Heman <pre>hêmanê hildin û ji bo pêşdebirina pêşkeftî du çînên vebijarkî lê zêde bikin.

  1. <p> Nimûneya nivîsê li vir... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Nimûneya nivîsê li vir...</p>
  4. </pre>

Google-code-prettify dakêşin û readme-ê ji bo meriv çawa bikar bîne bibînin.

Nîşankirina sifrê

Tag Terîf
<table> Hêmana pêçanê ji bo nîşandana daneyan di forma tabloyê de
<thead> Hêmana konteynerê ji bo rêzên sernavê tabloyê ( <tr>) ji bo etîketkirina stûnên tabloyê
<tbody> Hêmana konteyner a ji bo rêzên tabloyê ( <tr>) di laşê tabloyê de
<tr> Hêmana konteyner ji bo komek şaneyên tabloyê ( <td>an <th>) ku li ser rêzek yekane xuya dike
<td> Hucreya sifrê ya standard
<th> Ji bo etîketên stûnê (an rêz, li gorî çarçove û cîhê) hucreya tabloya taybetî
Divê di hundurê de were bikar anîn<thead>
<caption> Danasîn an kurteya tiştê ku tablo digire, bi taybetî ji bo xwendevanên ekranê kêrhatî ye
  1. <table>
  2. <serî>
  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>

Vebijarkên sifrê

Nav Sinif Terîf
Destçûnî Netû Bê şêwaz, tenê stûn û rêz
Bingehîn .table Tenê xetên horizontal di navbera rêzan de
Sînor kirin .table-bordered Kuçikan dorpêç dike û sînorê derve lê zêde dike
Zebra-stripe .table-striped Rengê paşîn ê gewr ê sivik li rêzên cihê (1, 3, 5, hwd) zêde dike
Tewandin .table-condensed Peldanka vertîkal, ji 8px heya 4px, di nav hemî tdû thhêmanan de nîvco dike

Tabloyên nimûne

1. Şêweyên sifrê yên bipêşketî

Tablo bixweber bi tenê çend sînoran têne şêwaz kirin da ku xwendin û strukturê biparêzin. Bi 2.0 re, .tablepola pêdivî ye.

  1. <table class = "table" >
  2. </table>
# Nav Paşnav Navê bikarhêner
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry Çûk @twitter

2. Maseya xerîdar

Bi lêzêdekirina zebra-striping bi tabloyên xwe piçek xweşiktir bibin - tenê .table-stripedpolê zêde bikin.

Nîşe: Tabloyên :nth-childzirav hilbijêra CSS bikar tînin û di IE7-IE8 de tune.

  1. <table class = "table-table-striped" >
  2. </table>
# Nav Paşnav Navê bikarhêner
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry Çûk @twitter

3. Tabloya sînorkirî

Ji bo mebestên estetîk sînorên li dora tevahiya maseyê û quncikên dorpêçkirî lê zêde bikin.

  1. <table class = "table-table-bordered" >
  2. </table>
# Nav Paşnav Navê bikarhêner
1 Delîl Otto @mdo
Delîl Otto @getbootstrap
2 Jacob Thornton @rûn
3 Larry The Bird @twitter

4. Tabloya hevgirtî

Bi lêzêdekirina .table-condensedpolê tabloyên xwe tevlihevtir bikin da ku pelika hucreya sifrê nîvco (ji 8px berbi 4px) bibire.

  1. <table class = "table-table-condensed" >
  2. </table>
# Nav Paşnav Navê bikarhêner
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter

5. Hemî wan tevlihev bikin!

Hûn azad bibin ku hûn yek ji dersên tabloyê bidin hev da ku bi karanîna yek ji dersên berdest ve dîmenên cihêreng bi dest bixin.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Navê tam
# Nav Paşnav Navê bikarhêner
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter

HTML û CSS-ya nerm

Beşa çêtirîn di derbarê formên li Bootstrap de ev e ku hemî têketin û kontrolên we pir xweş xuya dikin bila hûn wan çawa di nîşankirina xwe de ava bikin. HTML-ya zêde ne hewce ye, lê em ji bo kesên ku jê re hewce dikin nimûneyan peyda dikin.

Sêwiranên tevlihevtir bi dersên kurt û berbelav têne ji bo şêwaz û girêdana bûyerê hêsan, ji ber vê yekê hûn di her gavê de têne nixumandin.

Çar layout tê de hene

Bootstrap ji bo çar celeb sêwiranên formê piştgirî tê:

  • Vertical (default)
  • Gerr
  • Inline
  • Asumane

Cûreyên cûrbecûr sêwiranên formê ji bo nîşankirinê hin guheztinan hewce dikin, lê kontrol bixwe dimînin û heman tevdigerin.

Dewletên kontrol û bêtir

Formên Bootstrap ji bo hemî kontrolên forma bingehîn ên wekî têketin, textarea, û bijartina ku hûn li bendê ne, şêwaz hene. Lê di heman demê de ew bi hejmarek hêmanên xwerû yên mîna têketinên pêvekirî û pêşwext û piştgirî ji navnîşên qutiyên kontrolê re jî tê.

Dewletên mîna xeletî, hişyarî, û serketinê ji bo her cûre kontrolkirina formê tê de hene. Di heman demê de şêwazên ji bo kontrolên neçalak jî hene.

Çar cureyên formên

Bootstrap ji bo çar şêwazên formên webê yên hevpar nîşankirin û şêwazên hêsan peyda dike.

Nav Sinif Terîf
Vertical (default) .form-vertical (ne hewce ye) Li ser kontrolan etîketên lihevkirî, çepgir
Inline .form-inline Ji bo şêwaza kompakt kontrolên etîketkirî yên çepgir û bloka hundurîn
Gerr .form-search Ji bo estetîkek lêgerînek tîpîk têketina nivîsê ya pêvekirî
Asumane .form-horizontal Etîketên çepê, rast-hevkirî li ser heman rêzê wekî kontrolê biherikînin

Nimûne formên ku tenê kontrolên formê bikar tînin, bêyî nîşankirina zêde

Forma bingehîn

Vebijêrkên jîr û sivik bêyî nîşankirina zêde.

Mînak nivîsara alîkariyê ya asta blokê li vir.

  1. <form class = "baş" >
  2. <label> Navê labelê </label>
  3. < type input = "text" class = "span3" placeholder = "Tiştek binivîse…" >
  4. <span class = "help-block" > Mînak nivîsara alîkariyê ya asta blokê li vir. </span>
  5. <label class = "qutiya kontrolê" >
  6. <input type = "checkbox" > Min kontrol bike
  7. </label>
  8. <button type = "submit" class = "btn" > Bişîne </button>
  9. </form>

Forma lêgerînê

.form-searchLi formê û .search-queryli ser zêde bike input.

  1. <form class = "baş form-lêgerîn" >
  2. <input type = "text" class = "lêgerîn-lêgerîna navgîniya têketinê" >
  3. <button type = "submit" class = "btn" > Bigere </button>
  4. </form>

Forma hundurîn

Lihevhatina .form-inlinevertîkal û cihêbûna kontrolên formê lê zêde bikin.

  1. <form class = "baş form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "şîfre" class = "input-small" placeholder = "Şîfre" >
  4. <label class = "qutiya kontrolê" >
  5. <input type = "checkbox" > Min bi bîr bîne
  6. </label>
  7. <button type = "submit" class = "btn" > Têkeve </button>
  8. </form>

Formên Horizontal

Li milê rastê hemî kontrolên forma xwerû yên ku em piştgirî dikin têne xuyang kirin. Li vir navnîşa guleyan heye:

  • têketinên nivîsê (nivîs, şîfre, e-name, hwd.)
  • checkbox
  • radyo
  • neqandin
  • piralî hilbijêre
  • têketina pelê
  • textarea

Ji bilî nivîsa belaş, her têketina nivîsê-based HTML5 wusa xuya dike.

Mînak nîşankirin

Li gorî pîvana forma mînaka jorîn, li vir nîşana ku bi koma yekem û têketinê ve girêdayî ye. , .control-group, .control-labelû .controlsçîn hemî ji bo şêwazê hewce ne.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Nivîsara efsaneyê </legend>
  4. <div class = "kontrol-kom" >
  5. <label class = "control-label" for = "input01" > Ketina nivîsê </label>
  6. <div class = "kontrol" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Nivîsara alîkariyê piştgirî </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Dewletên kontrolkirina formê

Bootstrap ji bo baldarî û disableddewletên ku ji hêla gerokê ve têne piştgirî kirin şêwazên xwe vedigire. Em Webkit- outlinea xwerû jê dikin û a -yek box-shadowli şûna wê ji bo :focus.


Rastkirina formê

Di heman demê de şêwazên pejirandinê ji bo xeletî, hişyarî û serfiraziyê jî vedigire. Ji bo bikar bînin, çîna xeletiyê li derdorê zêde bikin .control-group.

  1. <fieldset
  2. class = "çewtiya koma kontrolê" >
  3. </fieldset>
Hin li vir nirx dikin
Dibe ku tiştek xelet çûbe
Ji kerema xwe xeletiyê rast bikin
Woohoo!
Woohoo!

Berfirehkirina kontrolên formê

Pêşniyar û pêvekirina têketinan

Komên têketinê - bi nivîsa pêvekirî an pêşdekirî - rêyek hêsan peyda dikin ku hûn ji bo têketinên xwe bêtir çarçoveyê bidin. Mînakên mezin nîşana @ ji bo navên bikarhênerên Twitter an jî $ ji bo darayî hene.


Checkboxes û radyo

Heya v1.4, Bootstrap hewceyê nîşankirina zêde li dora qutiyên kontrolê û radyoyan hewce dike ku wan bişkîne. Naha, ew mijarek hêsan e ku dubarekirina ya <label class="checkbox">ku pê dipêçe <input type="checkbox">.

Qutiyên kontrolê yên hundurîn û radyo jî têne piştgirî kirin. Tenê .inlineyek .checkboxan lê zêde bike .radioû hûn qediyan.


Formên xêzkirî û pêvekirin/pêşvekirin

Ji bo ku têketinên pêşdiyar an pêvek bi formek hundurîn bikar bînin, pê ewle bin ku .add-onû inputli ser heman rêzê, bêyî valahiyê bi cîh bikin.


Nivîsara alîkariyê form bike

Ji bo lêzêdekirina nivîsa alîkariyê ji bo têketinên forma xwe, nivîsa arîkariyê ya hundurîn bi <span class="help-inline">an jî bloka nivîsa arîkariyê ya bi <p class="help-block">piştî hêmana têketinê re têxin nav xwe.

Ji bo pîvanên têketinê heman .span*çînên ji pergala torê bikar bînin.

Her weha hûn dikarin çînên statîk ên ku nexşeya torê nagirin, bi şêwazên bersivdar ên CSS-ê veguhezînin, an jî cûreyên cûda yên kontrolê hesab bikin (mînak, inputli hember select).

@

Li vir hinek nivîsara alîkariyê heye

.00
Li vir bêtir nivîsara alîkariyê heye
$ .00

Nîşe: Etîket hemî vebijarkan ji bo deverên klîk pir mezintir û formek bêtir bikêrhatî dorpêç dikin.

Pişkov class = "" Terîf
btn Bişkojka gewr a standard bi gradient
btn btn-primary Giraniya dîtbarî ya zêde peyda dike û çalakiya bingehîn di komek bişkokan de nas dike
btn btn-info Wekî alternatîfek ji şêwazên xwerû tê bikar anîn
btn btn-success Çalakiyek serkeftî an erênî nîşan dide
btn btn-warning Nîşan dide ku divê bi vê çalakiyê re hişyarî were girtin
btn btn-danger Çalakiyek xeternak an potansiyel neyînî nîşan dide
btn btn-inverse Bişkojka gewr tarî ya alternatîf, ne bi kiryarek an karanîna semantîk ve girêdayî ye

Bişkojkên ji bo çalakiyan

Wekî peymanek, bişkok tenê ji bo çalakiyan têne bikar anîn dema ku hîpergirêdan ji bo tiştan têne bikar anîn. Mînakî, "Daxistin" pêdivî ye ku bişkokek be dema ku "çalakiya paşîn" divê girêdanek be.

Şêwazên bişkokê dikarin li ser her tiştê ku bi .btnpola hatî sepandin were sepandin. Lêbelê, bi gelemperî hûn dixwazin van tenê <a>û <button>hêmanan bicîh bikin.

Lihevhatina geroka cross

IE9 li quncikên girover gradientên paşerojê nabire, ji ber vê yekê em wê jê dikin. Têkildar, IE9 hêmanên neçalak jankifî dike button, nivîsê bi nivîs-siyayek nebaş a ku em nekarin rast bikin gewr dike.

Mezinahiyên pirjimar

Bişkokên mezintir an piçûktir dixwazin? Zêde .btn-largebikin, .btn-smallan jî .btn-miniji bo du mezinahiyên din.


Dewlet seqet

Ji bo bişkokên neçalak, .disabledçîna li ser girêdan û disabledtaybetmendiya <button>hêmanan zêde bikin.

Girêdana seretayî Pêvek

Serê xwe! Em .disabledli vir wekî çîna bikêrhatî, mîna .activeçîna hevpar, bikar tînin, ji ber vê yekê pêşgirek ne hewce ye.

Yek çîn, çend tag

Dersê .btnli ser hêmanek <a>, <button>, an jî bikar bînin.<input>

Pêvek
  1. <a class = "btn" href = "" > Girêdan </a>
  2. <button class = "btn" type = "submit" >
  3. Pişkov
  4. </button>
  5. <input class = "btn" type = "button"
  6. nirx = "Input" >
  7. <input class = "btn" type = "bişîne"
  8. nirx = "Submit" >

Wekî pratîkek çêtirîn, hewl bidin ku hêmanek ji bo çarçoweya we bi hev re peyda bikin da ku lihevhatina danasîna gerokê ya lihevhatî piştrast bikin. Heke we heye input, ji <input type="submit">bo bişkojka xwe anek bikar bînin.

  • îkon-cam
  • îkon-mûzîk
  • îkon-lêgerîn
  • îkon-zerf
  • îkon-dil
  • îkon-stêrk
  • îkon-stêrk-vala
  • îkon-bikarhêner
  • îkon-film
  • icon-th-mezin
  • îkon-th
  • icon-th-list
  • îkon-ok
  • îkon-rakirin
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • îkon-sînyal
  • îkon-cog
  • îkon-çopê
  • îkon-mal
  • îkon-pelê
  • îkon-dem
  • îkon-rê
  • icon-download-alt
  • îkon-dakêşandin
  • îkon-barkirin
  • icon-inbox
  • icon-play-circle
  • îkon-dubarekirin
  • îkon-tezekirin
  • îkon-lîste-alt
  • icon-lock
  • îkon-ala
  • îkon-guhê
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • îkon-barkod
  • icon-tag
  • icon-tags
  • îkon-pirtûk
  • icon-bookmark
  • îkon-çapkirinê
  • îkon-kamera
  • îkon-font
  • îkon-gewr
  • icon-italic
  • îkon-text-bilindî
  • icon-text-firehiya
  • icon-align-çep
  • îkon-align-navend
  • îkon-align-rast
  • icon-align-justify
  • îkon-lîste
  • icon-indent-çep
  • icon-indent-rast
  • îkon-facetime-vîdyo
  • îkon-wêne
  • îkon-pênûs
  • îkon-nexşe-marker
  • îkon-eyar
  • icon-tint
  • îkon-biguherîne
  • îkon-parvekirin
  • îkon-kontrol
  • îkon-tevger
  • îkon-gav-paşverû
  • îkon-zû-paşverû
  • îkon-paşverû
  • icon-play
  • îkon-pause
  • icon-raweste
  • îkon-pêş
  • îkon-zû-pêş
  • îkon-gav-pêş
  • îkon-derxistin
  • icon-chevron-çep
  • îkon-chevron-rast
  • îkon-plus-nîşan
  • îkon-minus-nîşan
  • îkon-rakirin-nîşan
  • îkon-ok-nîşan
  • îkon-pirs-nîşan
  • îkon-agahî-nîşan
  • icon-screenshot
  • icon-rake-circle
  • icon-ok-circle
  • icon-ban-circle
  • îkon-tîr-çep
  • îkon-tîr-rast
  • îkon-tîr-up
  • îkon-tîra-xwarê
  • icon-parve-alt
  • îkon-guherbar-tijî
  • îkon-guherbar-biçûk
  • icon-plus
  • îkon-minus
  • îkon-astêrk
  • îkon-exclamation-nîşan
  • îkon-diyarî
  • îkon-pel
  • icon-agir
  • îkon-çav-vekirî
  • îkon-çav-girtin
  • îkon-hişyarî-nîşan
  • icon-balafirê
  • îkon-salname
  • icon-random
  • îkon-şîrove
  • îkon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • îkon-retweet
  • îkon-dikirin-kert
  • îkon-peldanka-girtî
  • îkon-peldanka-vekirî
  • îkon-guherbar-vertîkal
  • îkon-guherbar-horizontal
  • îkon-hdd
  • icon-bullhorn
  • îkon-zengil
  • îkon-belge
  • icon-thumb-up
  • îkon-tişt-down
  • îkon-dest-rast
  • îkon-dest-çep
  • icon-dest-up
  • icon-destê-xwarê
  • icon-circle-tîr-rast
  • icon-circle-tîr-çep
  • icon-circle-tîr-up
  • icon-circle-tîr-down
  • icon-globe
  • icon-wrench
  • îkon-peywiran
  • îkon-filter
  • îkon-kurte
  • îkon-tevahî

Wek sprite hatiye çêkirin

Li şûna ku em her îkonê bikin daxwazek zêde, me ew di nav sprite de berhev kirine - komek wêne di yek pelê de ku CSS bikar tîne da ku wêneyan bi cih bike background-position. Ev heman rêbaz e ku em li ser Twitter.com bikar tînin û ji bo me baş xebitî.

Hemî çînên îkonan .icon-ji bo nav û hûrguliya rast, mîna pêkhateyên me yên din pêşgir têne pêşgir kirin. Ev ê ji nakokiyên bi amûrên din re bibe alîkar.

Glyphicons ji me re destûr daye ku em di nav amûra xweya çavkaniya vekirî de Halflings bikar bînin heya ku em li vir di belgeyan de girêdanek û krediyê peyda bikin. Ji kerema xwe di projeyên xwe de heman tiştî bifikirin.

Çawa bikar bînin

Bootstrap ji <i>bo hemî îkonan etîketek bikar tîne, lê çîna wan tune - tenê pêşgirek hevpar. Ji bo ku bikar bînin, koda jêrîn hema hema li her deverê bicîh bikin:

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

Ji bo îkonên berevajîkirî (spî) jî şêwaz hene, ku bi yek çînek zêde hatine amadekirin:

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

140 ders hene ku hûn ji bo îkonên xwe hilbijêrin. Tenê <i>bi dersên rast etîketek zêde bikin û hûn amade ne. Hûn dikarin navnîşa tevahî li sprites.less an jî li vir di vê belgeyê de bibînin.

Serê xwe! Dema ku li kêleka rêzikên nivîsê, wekî bişkok an girêdanên navokê bikar bînin, ji bo <i>cîhgirtina rast li dû etîketê cîhek bihêlin.

Rewşan bikar bînin

Îkon mezin in, lê meriv dê wan li ku bikar bîne? Li vir çend raman hene:

  • Wek dîtbarî ji bo navîgasyon li kêleka te
  • Ji bo navîgasyonek bi tenê îkon-rêvebirin
  • Ji bo bişkokên ku ji bo gihandina wateya çalakiyekê bibin alîkar
  • Bi girêdanên ji bo parvekirina çarçoweya li ser cîhê bikarhênerek

Di bingeh de, li her deverê ku hûn dikarin <i>etîketekê bixin, hûn dikarin îkonek bixin.

Examples

Wan di bişkokan, komên bişkokê de ji bo darikê amûran, navîgasyon, an têketinên forma pêşwext bikar bînin.