Komponentler

Nawigasiýa, duýduryşlar, popovers we başgalary üpjün etmek üçin gurlan onlarça gaýtadan ulanylýan komponent.

Mysallar

Iki sany aýratyn wariant bilen birlikde iki esasy wariant.

Buttoneke düwme topary

Düwmeleriň bir toparyny .btnörtüň .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Çep </button>
  3. <button class = "btn" > Orta </button>
  4. <button class = "btn" > Sag </button>
  5. </div>

Birnäçe düwme toparlary

Toplumlary has çylşyrymly komponentler üçin <div class="btn-group">birleşdiriň .<div class="btn-toolbar">

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Dik düwme toparlary

Düwmeleriň toplumyny keseligine däl-de, dikligine ýerleşdiriň.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

Bellik gutusy we radio tagamlary

Düwmeler toparlary radiolar hökmünde hem işläp bilerler, bu ýerde diňe bir düwme işjeň bolup biler ýa-da islendik düwme işjeň bolup bilýän bellik gutusy. Munuň üçin JavaScript resminamalaryny görüň .

Düwme toparlarynda aşak gaçmalar

Başlar!Açylýan düwmeler , dogry görkezilmegi üçin aýratynlykda öz-özünden .btn-groupörtülmelidir ..btn-toolbar

Gysgaça syn we mysallar

Açylýan menýu açmak üçin islendik düwmäni ulanyň .btn-groupwe degişli menýu belligini üpjün ediň.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">
  3. Hereket
  4. <span class = "caret" > </span>
  5. </a>
  6. <ul class = "drop-menu" >
  7. <! - açylýan menýu baglanyşyklary ->
  8. </ul>
  9. </div>

Buttonhli düwme ululyklary bilen işleýär

Düwmeleriň açylmagy islendik ululykda işleýär : .btn-large, .btn-smallýa-da .btn-mini.

JavaScript talap edýär

Düwmeleriň açylmagy Bootstrap açylýan pluginiň işlemegini talap edýär .

Käbir ýagdaýlarda, ykjam ýaly, aşak düşýän menýular görnüşiň daşynda uzalar. Düzedişi el bilen ýa-da adaty JavaScript bilen çözmeli.


Düwmeleriň açylan ýerlerini bölüň

Düwme toparynyň stillerine we belliklerine esaslanyp, bölmek düwmesini aňsatlyk bilen döredip bileris. Bölünmek düwmelerinde çep tarapda adaty bir hereket we sag tarapda kontekst baglanyşyklary bilen aşak açylma bar.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Hereket </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "drop-menu" >
  7. <! - açylýan menýu baglanyşyklary ->
  8. </ul>
  9. </div>

Ölçegler

Goşmaça düwme sapaklaryny ýa-da .btn-miniululyk üçin ulanyň..btn-small.btn-large

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Hereket </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "drop-menu" >
  7. <! - açylýan menýu baglanyşyklary ->
  8. </ul>
  9. </div>

Açylýan menýular

Açylýan menýular ýakyn ene-atasyna ýekeje synp goşmak bilen aşakdan ýokara üýtgedilip bilner .dropdown-menu. Ol ugry ugrukdyrar .caretwe menýudan ýokaryk däl-de, aşakdan ýokaryk hereket eder.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Çykmak </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "drop-menu" >
  7. <! - açylýan menýu baglanyşyklary ->
  8. </ul>
  9. </div>

Adaty sahypa

Rdio tarapyndan ylhamlanan ýönekeý sahypa, programmalar we gözleg netijeleri üçin ajaýyp. Uly bloky sypdyrmak kyn, aňsatlyk bilen ulalýar we uly basmak meýdançalaryny üpjün edýär.

  1. < div class = "sahypa"
  2. <ul>
  3. <li> <a href = "#"> Öňki </a> </li>
  4. <li> <a href = "#"> 1 </a> </li>
  5. <li> <a href = "#"> 2 </a> </li>
  6. <li> <a href = "#"> 3 </a> </li>
  7. <li> <a href = "#"> 4 </a> </li>
  8. <li> <a href = "#"> 5 </a> </li>
  9. <li> <a href = "#"> Indiki </a> </li>
  10. </ul>
  11. </div>

Görnüş

Maýyp we işjeň ýagdaýlar

Salgylar dürli ýagdaýlar üçin düzülip bilner. .disabledÇekip bolmaýan baglanyşyklar we .activehäzirki sahypany görkezmek üçin ulanyň .

  1. < div class = "sahypa"
  2. <ul>
  3. <li class = "maýyp" > <a href = "#"> & laquo; </a> </li>
  4. <li class = "işjeň" > <a href = "#"> 1 </a> </li>
  5. ...
  6. </ul>
  7. </div>

Göz öňünde tutulan stilleri saklamak bilen basmak funksiýasyny aýyrmak üçin işjeň ýa-da ýapyk labyrlary islege görä çalşyp bilersiňiz.

  1. < div class = "sahypa"
  2. <ul>
  3. <li class = "maýyp" > <span> & laquo; </span> </li>
  4. <li class = "işjeň" > <span> 1 </span> </li>
  5. ...
  6. </ul>
  7. </div>

Ölçegler

Ulymy ýa-da kiçi sahypa? Goşuň ýa-da .pagination-largegoşmaça ululyklar üçin..pagination-small.pagination-mini

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. < div class = "sahypa"
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "sahypa sahypasy-kiçi" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Deňleşdirmek

Sahypa baglanyşyklarynyň deňleşmesini üýtgetmek üçin iki sany goşmaça synpdan birini goşuň: .pagination-centeredwe .pagination-right.

  1. <div class = "sahypa sahypasy merkezi" >
  2. ...
  3. </div>
  1. <div class = "sahypa sahypasy-sag" >
  2. ...
  3. </div>

Pager

Lightagtylyk belligi we stili bilen ýönekeý sahypany durmuşa geçirmek üçin çalt öňki we indiki baglanyşyklar. Blog ýa-da magazinesurnal ýaly ýönekeý saýtlar üçin ajaýyp.

Bellenen mysal

Düzgüne görä, peýjer merkezleri baglanyşýar.

  1. <ul class = "pager" >
  2. <li> <a href = "#"> Öňki </a> </li>
  3. <li> <a href = "#"> Indiki </a> </li>
  4. </ul>

Deňdirilen baglanyşyklar

Ativea-da bolmasa, her baglanyşygy gapdallara deňleşdirip bilersiňiz:

  1. <ul class = "pager" >
  2. <li class = "öňki" >
  3. <a href = "#"> & larr ; Köne </a>
  4. </li>
  5. <li class = "indiki" >
  6. <a href = "#"> Has täze & rarr ; </a>
  7. </li>
  8. </ul>

Meýletin maýyp ýagdaý

Peýjer baglanyşyklary, sahypadan umumy .disabledpeýdaly synpy hem ulanýar.

  1. <ul class = "pager" >
  2. <li class = "öňki maýyp" >
  3. <a href = "#"> & larr ; Köne </a>
  4. </li>
  5. ...
  6. </ul>

Bellikler

Bellikler Bellik
Bellenen <span class="label">Default</span>
Üstünlik <span class="label label-success">Success</span>
Duýduryş <span class="label label-warning">Warning</span>
Möhüm <span class="label label-important">Important</span>
Maglumat <span class="label label-info">Info</span>
Tersine <span class="label label-inverse">Inverse</span>

Nyşanlar

Ady Mysal Bellik
Bellenen 1 <span class="badge">1</span>
Üstünlik 2 <span class="badge badge-success">2</span>
Duýduryş 4 <span class="badge badge-warning">4</span>
Möhüm 6 <span class="badge badge-important">6</span>
Maglumat 8 <span class="badge badge-info">8</span>
Tersine 10 <span class="badge badge-inverse">10</span>

Ansatlyk bilen ýykylýar

:emptyEasyeňil durmuşa geçirmek üçin bellikler we nyşanlar içerde hiç hili mazmun ýok bolanda ýykylar (CSS saýlaýjysynyň üsti bilen ).

Gahryman bölümi

Sahypaňyzdaky esasy mazmuny görkezmek üçin ýeňil, çeýe komponent. Marketing we mazmunly saýtlarda gowy işleýär.

Salam, dünýä!

Bu ýönekeý gahryman bölümi, aýratyn mazmuna ýa-da maglumata goşmaça ünsi çekmek üçin ýönekeý jumbotron stilidir.

Köpräk oka

  1. <div class = "gahryman-birlik" >
  2. <h1> sözbaşy </h1>
  3. <p> Bellik </p>
  4. <p>
  5. <a class = "btn btn- başlangyç btn-large">
  6. Köpräk oka
  7. </a>
  8. </p>
  9. </div>

Sahypanyň sözbaşy

h1Bir sahypadaky mazmun bölümlerini ýerlikli ýerleşdirmek üçin ýönekeý gabyk . h1Dymmaklyk small, elementi we beýleki komponentleriň köpüsini (goşmaça stil bilen) ulanyp biler .

  1. <div class = "sahypa-sözbaşy" >
  2. <h1> Mysal sahypasynyň sözbaşy <small> sözbaşy üçin subtekst </small> </h1>
  3. </div>

Bellenen kiçi suratlar

Düzgüne görä, “Bootstrap” -yň kiçi suratlary, iň az zerur bellik bilen baglanyşykly suratlary görkezmek üçin döredildi.

Lyokary düzülip bilner

Birneme goşmaça bellik bilen, kiçi sözbaşylara, abzaslara ýa-da düwmelere meňzeş HTML mazmunyny goşmak mümkin.

  • 300x200

    Surat eseri

    Cras justo odio, dapibus ac facilisis, egestas eget quam. Donec id elit metus-da mi porta gravida. Nullam id dolor id nibh ultricies ulag serişdesi.

    Hereket Hereket

  • 300x200

    Surat eseri

    Cras justo odio, dapibus ac facilisis, egestas eget quam. Donec id elit metus-da mi porta gravida. Nullam id dolor id nibh ultricies ulag serişdesi.

    Hereket Hereket

  • 300x200

    Surat eseri

    Cras justo odio, dapibus ac facilisis, egestas eget quam. Donec id elit metus-da mi porta gravida. Nullam id dolor id nibh ultricies ulag serişdesi.

    Hereket Hereket

Näme üçin kiçi suratlary ulanyň

Suratlar (öň .media-gridv1.4-e çenli) suratlar ýa-da wideolar, surat gözleg netijeleri, bölek önümler, bukjalar we başgalar üçin ajaýyp. Olar baglanyşyk ýa-da statiki mazmun bolup biler.

Pleönekeý, çeýe bellik

Eskiz belligi ýönekeý - zerur elementleriň ulsany köp . liŞeýle hem, aşa çeýe bolup, mazmunyňyzy örtmek üçin birneme has köp bellikli mazmun görnüşine mümkinçilik berýär.

Panel sütüniniň ululyklaryny ulanýar

Iň soňunda bolsa, kiçijik bölek komponenti , kiçijik ölçeglerine gözegçilik etmek .span2üçin bar bolan gözenek ulgamy synplaryny ulanýar..span3

Bellik

Öň bellenip geçilişi ýaly, kiçijik suratlar üçin zerur bellik ýeňil we gönümel. Baglanan suratlar üçin deslapky gurnama serediň :

  1. <ul class = "suratlar" >
  2. <li class = "span4" >
  3. <a href = "#" class = "thumbnail"> _
  4. <img data-src = "holder.js / 300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Eskizlerdäki adaty HTML mazmuny üçin bellik biraz üýtgeýär. Islendik ýerde blok derejesindäki mazmuna rugsat bermek <a>üçin <div>şuňa meňzeş zatlary çalyşýarys:

  1. <ul class = "suratlar" >
  2. <li class = "span4" >
  3. <div class = "kiçijik" >
  4. <img data-src = "holder.js / 300x200" alt = "" >
  5. <h3> kiçijik bellik </h3>
  6. <p> kiçijik ýazgy ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Has köp mysal

Elýeterli dürli gözenek synplary bilen ähli wariantlaryňyzy öwreniň. Şeýle hem dürli ululyklary garyşdyryp we deňeşdirip bilersiňiz.

Bellenen duýduryş

.alertEsasy duýduryş duýduryşy üçin islendik teksti we islege bagly işden aýyrmak düwmesini örtüň .

Duýduryş! Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz.
  1. <div class = "duýduryş" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > & times; </button>
  3. <strong> Duýduryş! </strong> Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz.
  4. </div>

Düwmeleri aýryň

Mobil Safari we Mobile Opera brauzerleri, data-dismiss="alert"atributdan başga-da, bellik href="#"ulanylanda duýduryşlaryň ýatyrylmagyny talap edýär.<a>

  1. <a href = "#" class = "close" data-dismiss = "alert"> & times ; </a>

<button>Ativea-da bolmasa, resminamalarymyz üçin etmegi saýlap alan maglumat atributy bolan bir elementi ulanyp bilersiňiz . Ulanylanda <button>, goşmaly type="button"ýa-da blankalaryňyzy tabşyryp bilmez.

  1. <button type = "button" class = "close" data-dismiss = "alert" > & times; </button>

JavaScript arkaly duýduryşlary aýyryň

Duýduryşlary çalt we aňsat işden aýyrmak üçin jQuery pluginini ulanyň .


Görnüş

Has uzyn habarlar üçin, goşmaçanyň üsti bilen duýduryş örtüginiň ýokarsynda we aşagynda paddini köpeldiň .alert-block.

Duýduryş!

Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur we ş.m.

  1. <div class = "duýduryş duýduryşy" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > & times; </button>
  3. <h4> Duýduryş! </h4>
  4. Iň gowusy özüňizi barlaň, siz däl ...
  5. </div>

Kontekst alternatiwalary

Duýduryşyň manysyny üýtgetmek üçin goşmaça sapaklary goşuň.

Roralňyşlyk ýa-da howp

Aý, gysga! Birnäçe zady üýtgediň we täzeden tabşyrmaga synanyşyň.
  1. <div class = "duýduryş duýduryşy" >
  2. ...
  3. </div>

Üstünlik

Berekella! Bu möhüm duýduryş habaryny üstünlikli okadyňyz.
  1. <div class = "duýduryş duýduryşy-üstünlik" >
  2. ...
  3. </div>

Maglumat

Başlar! Bu duýduryş siziň ünsüňize mätäç, ýöne bu gaty möhüm däl.
  1. <div class = "duýduryş duýduryşy" >
  2. ...
  3. </div>

Mysallar we bellik

Esasy

Dik gradient bilen deslapky ösüş paneli.

  1. <div class = "öňegidişlik" >
  2. <div class = "bar" style = " ini : 60 %; " > </div>
  3. </div>

Zolakly

Zolakly effekt döretmek üçin gradient ulanýar. IE7-8-de ýok

  1. <div class = "öňegidişlik zolakly" >
  2. <div class = "bar" style = " ini : 20 %; " > </div>
  3. </div>

Animasiýa

Zolaklary sagdan çepe janlandyrmak üçin .activegoşuň . .progress-stripedIE-iň ähli wersiýalarynda ýok.

  1. <div class = "öňegidişlik zolakly işjeň" >
  2. <div class = "bar" style = " ini : 40 %; " > </div>
  3. </div>

Toplanan

Toplamak üçin birnäçe barlary şol bir ýere goýuň .progress.

  1. <div class = "öňegidişlik" >
  2. <div class = "bar bar-success" style = " ini : 35 %; " > </div>
  3. <div class = "bar bar-duýduryş" style = " ini : 20 %; " > </div>
  4. <div class = "bar bar-danger" style = " ini : 10 %; " > </div>
  5. </div>

Görnüş

Goşmaça reňkler

Ösüş panelleri yzygiderli stil üçin şol bir düwmäni we duýduryş sapaklaryny ulanýar.

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " ini : 20 % " > </div>
  3. </div>
  4. <div class = "öňegidişlik-üstünlik" >
  5. <diw class = "bar" style = " ini : 40 % " > </div>
  6. </div>
  7. <div class = "öňegidişlik-duýduryş" >
  8. <div synp = "bar" style = " ini : 60 % " > </div>
  9. </div>
  10. <div class = "öňegidişlik-howp" >
  11. <div class = "bar" style = " ini : 80 % " > </div>
  12. </div>

Zolakly barlar

Gaty reňklere meňzeşlikde, dürli zolakly öňegidişlikler bar.

  1. <div class = "progress progress-info progress-zolakly" >
  2. <div class = "bar" style = " ini : 20 % " > </div>
  3. </div>
  4. <diw class = "öňegidişlik-üstünlik ösüş-zolakly" >
  5. <div class = "bar" style = " ini : 40 % " > </div>
  6. </div>
  7. <diw class = "öňegidişlik-duýduryş öňe gidiş zolakly" >
  8. <div class = "bar" style = " ini : 60 % " > </div>
  9. </div>
  10. <diw class = "öňegidişlik-howp howpy öňe gidiş zolakly" >
  11. <div class = "bar" style = " ini : 80 % " > </div>
  12. </div>

Brauzer goldawy

Ösüş barlary, ähli täsirlerine ýetmek üçin CSS3 gradiýentlerini, geçişlerini we animasiýalaryny ulanýarlar. Bu aýratynlyklar IE7-9 ýa-da Firefox-yň köne wersiýalarynda goldanylmaýar.

Internet Explorer 10 we Opera 12-den has irki wersiýalar animasiýalary goldamaýar.

Tekstiň mazmuny bilen birlikde çep ýa-da sag tarapdaky şekili görkezýän dürli görnüşli komponentleri gurmak üçin abstrakt obýekt stilleri (blog teswirleri, twitler we ş.m.).

Bellenen mysal

Adaty media media obýektini (suratlar, wideo, ses) mazmun blokynyň çep ýa-da sag tarapynda ýüzmäge mümkinçilik berýär.

64x64

Mediýa sözbaşy

Cras, gravida nulla-da amet nibh libero oturýar. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, wulputate vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. “Donec lacinia congue felis”.
64x64

Mediýa sözbaşy

Cras, gravida nulla-da amet nibh libero oturýar. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, wulputate vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. “Donec lacinia congue felis”.
64x64

Mediýa sözbaşy

Cras, gravida nulla-da amet nibh libero oturýar. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, wulputate vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. “Donec lacinia congue felis”.
  1. <div class = "media" >
  2. <a class = "pull-left" href = "#"> _
  3. <img class = "media-object" data-src = "holder.js / 64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-sözbaşy" > Mediýa sözbaşy </h4>
  7. ...
  8.  
  9. <! - Içerki media obýekti ->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Mediýa sanawy

Birneme goşmaça bellik bilen, sanawyň içindäki mediany ulanyp bilersiňiz (düşündiriş sapaklary ýa-da makalalaryň sanawy üçin peýdaly).

  • 64x64

    Mediýa sözbaşy

    Cras, gravida nulla-da amet nibh libero oturýar. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, wulputate vestibulum, tempus viverra turpis.

    64x64

    Mediýa sözbaşy

    Cras, gravida nulla-da amet nibh libero oturýar. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, wulputate vestibulum, tempus viverra turpis.
    64x64

    Mediýa sözbaşy

    Cras, gravida nulla-da amet nibh libero oturýar. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, wulputate vestibulum, tempus viverra turpis.
    64x64

    Mediýa sözbaşy

    Cras, gravida nulla-da amet nibh libero oturýar. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, wulputate vestibulum, tempus viverra turpis.
  • 64x64

    Mediýa sözbaşy

    Cras, gravida nulla-da amet nibh libero oturýar. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, wulputate vestibulum, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class = "pull-left" href = "#"> _
  4. <img class = "media-object" data-src = "holder.js / 64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-sözbaşy" > Mediýa sözbaşy </h4>
  8. ...
  9.  
  10. <! - Içerki media obýekti ->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Guýular

Giriş effekti bermek üçin bir elemente ýönekeý täsir ýaly guýyny ulanyň.

Gör, men guýyda!
  1. <div class = "gowy" >
  2. ...
  3. </div>

Meýletin sapaklar

Iki sany goşmaça üýtgediji synpy bilen padding we tegelek burçlary dolandyryň.

Gör, men guýyda!
  1. <div class = "gowy-uly" >
  2. ...
  3. </div>
Gör, men guýyda!
  1. <div class = "gowy-kiçi" >
  2. ...
  3. </div>

Nyşan ýapyň

Modallar we duýduryşlar ýaly mazmuny ýatyrmak üçin umumy ýakyn nyşany ulanyň.

  1. <button class = "close" > & times; </button>

href="#"iOS enjamy , labyr ulanmagy isleseňiz, basmak hadysalaryny talap edýär .

  1. <a class = "close" href = "#"> & times ; </a>

Kömekçi sapaklar

Kiçijik displeý ýa-da özüni alyp barşyň üýtgemegi üçin ýönekeý, gönükdirilen synplar.

Çep

Bir element galan

  1. class = "çekmek-çep"
  1. . çekmek - çep {
  2. ýüzmek : çep ;
  3. }

sag-sag

Bir elementi dogry ýüzüň

  1. class = "çekmek-sag"
  1. . çekmek - sag {
  2. ýüzmek : sag ;
  3. }

.Mut

Bir elementiň reňkini üýtgediň#999

  1. class = "sessiz"
  1. . sesini çykardy {
  2. reňk : # 999;
  3. }

.clearfix

floatIslendik elementi arassalaň

  1. class = "clearfix"
  1. . Clearfix {
  2. * ulaltmak : 1 ;
  3. &: öň ,
  4. &: soň {
  5. görkezmek : tablisa ;
  6. mazmuny : "" ;
  7. }
  8. &: soň {
  9. düşnükli : ikisi ;
  10. }
  11. }