Komponentët

Dhjetra komponentë të ripërdorshëm të ndërtuar për të ofruar navigim, sinjalizime, popover dhe më shumë.

Shembuj

Dy opsione bazë, së bashku me dy variacione më specifike.

Grupi me një buton të vetëm

Mbështillni një seri butonash me .btn.btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Majtas </button>
  3. <button class = "btn" > Mesme </button>
  4. <button class = "btn" > Djathtas </button>
  5. </div>

Grupe të shumta butonash

Kombinoni grupe <div class="btn-group">në një <div class="btn-toolbar">për komponentë më komplekse.

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

Grupet vertikale të butonave

Bëni që një grup butonash të shfaqen vertikalisht dhe jo horizontalisht.

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

Kutia e kontrollit dhe shijet e radios

Grupet e butonave mund të funksionojnë gjithashtu si radio, ku vetëm një buton mund të jetë aktiv, ose kuti zgjedhjeje, ku çdo numër butonash mund të jetë aktiv. Shikoni dokumentet JavaScript për këtë.

Dropdowns në grupet e butonave

Kokat lart!Butonat me zbritje duhet të mbështillen në mënyrë individuale .btn-groupbrenda një .btn-toolbarpër interpretim të duhur.

Vështrim i përgjithshëm dhe shembuj

Përdorni çdo buton për të aktivizuar një menu dropdown duke e vendosur atë brenda një .btn-groupdhe duke siguruar shënimin e duhur të menusë.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Veprimi
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "meny-dropdown" >
  7. <!-- lidhjet e menusë rënëse -->
  8. </ul>
  9. </div>

Punon me të gjitha madhësitë e butonave

Zbritja e butonave funksionon në çdo madhësi: .btn-large, .btn-small, ose .btn-mini.

Kërkon JavaScript

Zbritja e butonave kërkon që të funksionojë shtojca e lëshimit Bootstrap .

Në disa raste - si celulari - menytë rënëse do të shtrihen jashtë portit të shikimit. Ju duhet ta zgjidhni shtrirjen me dorë ose me JavaScript të personalizuar.


Zbritje të butonave të ndarjes

Duke u bazuar në stilet dhe shënjimin e grupit të butonave, ne mund të krijojmë lehtësisht një buton ndarjeje. Butonat e ndarjes paraqesin një veprim standard në të majtë dhe një ndryshim në rënie në të djathtë me lidhje kontekstuale.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Veprimi </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "meny-dropdown" >
  7. <!-- lidhjet e menusë rënëse -->
  8. </ul>
  9. </div>

Përmasat

Përdorni klasat shtesë të butonave .btn-mini, .btn-smallose .btn-largepër madhësinë.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Veprimi </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "meny-dropdown" >
  7. <!-- lidhjet e menusë rënëse -->
  8. </ul>
  9. </div>

Menytë rënëse

Menytë rënëse mund të ndërrohen gjithashtu nga poshtë lart duke shtuar një klasë të vetme në prindin e menjëhershëm të .dropdown-menu. Do të kthejë drejtimin e .caretmenusë dhe do të ripozicionojë vetë menunë për të lëvizur nga poshtë lart në vend të lart poshtë.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "meny-dropdown" >
  7. <!-- lidhjet e menusë rënëse -->
  8. </ul>
  9. </div>

Faqerojtje standarde

Faqerojtje e thjeshtë e frymëzuar nga Rdio, e shkëlqyeshme për aplikacionet dhe rezultatet e kërkimit. Blloku i madh është i vështirë për t'u humbur, lehtësisht i shkallëzueshëm dhe ofron zona të mëdha klikimesh.

  1. <div class = "faqezim" >
  2. <ul>
  3. <li><a href = "#" > E mëparshme </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 = "#" > Tjetra </a></li>
  10. </ul>
  11. </div>

Opsione

Gjendjet me aftësi të kufizuara dhe aktive

Lidhjet janë të personalizueshme për rrethana të ndryshme. Përdorni .disabledpër lidhje të paklikueshme dhe .activepër të treguar faqen aktuale.

  1. <div class = "faqezim" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "aktiv" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Mund të ndërroni opsionalisht ankorat aktive ose të paaftë për hapje për të hequr funksionalitetin e klikimeve duke ruajtur stilet e synuara.

  1. <div class = "faqezim" >
  2. <ul>
  3. <li class = "me aftësi të kufizuara" ><span> « </span></li>
  4. <li class = "aktiv" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Përmasat

Dëshironi faqezim më të madh apo më të vogël? Shto .pagination-large, .pagination-smallose .pagination-minipër madhësi shtesë.

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

Radhitje

Shtoni një nga dy klasat opsionale për të ndryshuar shtrirjen e lidhjeve të faqes: .pagination-centereddhe .pagination-right.

  1. <div class = "faqesimi në qendër të faqes" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

Pager

Lidhje të shpejta të mëparshme dhe të ardhshme për zbatime të thjeshta të faqes me shënime dhe stile të lehta. Është i shkëlqyeshëm për sajte të thjeshta si blogje ose revista.

Shembulli i parazgjedhur

Si parazgjedhje, lidhjet përqendrojnë pager-in.

  1. <ul class = "pager" >
  2. <li><a href = "#" > E mëparshme </a></li>
  3. <li><a href = "#" > Tjetra </a></li>
  4. </ul>

Lidhjet e rreshtuara

Përndryshe, ju mund të rreshtoni secilën lidhje në anët:

  1. <ul class = "pager" >
  2. <li class = "e mëparshme" >
  3. <a href = "#" > Më i vjetër </a>
  4. </li>
  5. <li class = "tjetër" >
  6. <a href = "#" > Më të reja → </a>
  7. </li>
  8. </ul>

Gjendja opsionale e çaktivizuar

Lidhjet e Pager gjithashtu përdorin .disabledklasën e përgjithshme të shërbimeve nga pagination.

  1. <ul class = "pager" >
  2. <li class = "e mëparshme me aftësi të kufizuara" >
  3. <a href = "#" > Më i vjetër </a>
  4. </li>
  5. ...
  6. </ul>

Etiketat

Etiketat Markup
E paracaktuar <span class="label">Default</span>
Sukses <span class="label label-success">Success</span>
Paralajmërim <span class="label label-warning">Warning</span>
E rëndësishme <span class="label label-important">Important</span>
Informacion <span class="label label-info">Info</span>
Anasjelltas <span class="label label-inverse">Inverse</span>

Shenjat

Emri Shembull Markup
E paracaktuar 1 <span class="badge">1</span>
Sukses 2 <span class="badge badge-success">2</span>
Paralajmërim 4 <span class="badge badge-warning">4</span>
E rëndësishme 6 <span class="badge badge-important">6</span>
Informacion 8 <span class="badge badge-info">8</span>
Anasjelltas 10 <span class="badge badge-inverse">10</span>

Lehtë e palosshme

Për zbatim të lehtë, etiketat dhe distinktivët thjesht do të shemben (nëpërmjet :emptypërzgjedhësit të CSS) kur nuk ekziston asnjë përmbajtje brenda.

Njësia heroike

Një komponent i lehtë dhe fleksibël për të shfaqur përmbajtjen kryesore në faqen tuaj. Ajo funksionon mirë në faqet e marketingut dhe përmbajtjes së rëndë.

Përshendetje Botë!

Kjo është një njësi e thjeshtë heroike, një komponent i thjeshtë i stilit jumbotron për të tërhequr vëmendje shtesë ndaj përmbajtjes ose informacionit të paraqitur.

Mëso më shumë

  1. <div class = "hero-njësi" >
  2. <h1> Titulli </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primare btn-large" >
  6. Mëso më shumë
  7. </a>
  8. </p>
  9. </div>

Kreu i faqes

Një predhë e thjeshtë për h1të ndarë dhe segmentuar në mënyrë të përshtatshme seksionet e përmbajtjes në një faqe. Mund të përdorë elementin h1e paracaktuar small, si dhe shumicën e komponentëve të tjerë (me stile shtesë).

  1. <div class = "page-header" >
  2. <h1> Shembull i kokës së faqes <small> Nëntekst për kokën </small></h1>
  3. </div>

Miniaturat e parazgjedhura

Si parazgjedhje, miniaturat e Bootstrap janë krijuar për të shfaqur imazhe të lidhura me shënjimin minimal të kërkuar.

Shumë i personalizueshëm

Me pak shënim shtesë, është e mundur të shtoni çdo lloj përmbajtjeje HTML si tituj, paragrafë ose butona në miniaturë.

  • 300x200

    Etiketa e miniaturës

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Veprimi Veprimi

  • 300x200

    Etiketa e miniaturës

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Veprimi Veprimi

  • 300x200

    Etiketa e miniaturës

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Veprimi Veprimi

Pse të përdorni miniaturë

Miniaturat (më parë .media-gridderi në versionin 1.4) janë të shkëlqyera për rrjetet e fotografive ose videove, rezultatet e kërkimit të imazheve, produktet me pakicë, portofolet dhe shumë më tepër. Ato mund të jenë lidhje ose përmbajtje statike.

Shënim i thjeshtë, fleksibël

Shënimi i miniaturës është i thjeshtë - ulme çdo numër lielementësh është gjithçka që kërkohet. Është gjithashtu super fleksibël, duke lejuar çdo lloj përmbajtjeje me vetëm pak më shumë shënime për të mbështjellë përmbajtjen tuaj.

Përdor madhësitë e kolonave të rrjetit

Së fundi, komponenti i miniaturave përdor klasat ekzistuese të sistemit të rrjetit - si .span2ose .span3- për kontrollin e dimensioneve të miniaturave.

Markup

Siç u përmend më parë, shënimi i kërkuar për miniaturat është i lehtë dhe i drejtpërdrejtë. Ja një vështrim në konfigurimin e paracaktuar për imazhet e lidhura :

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

Për përmbajtjen e personalizuar HTML në miniaturë, shënimi ndryshon pak. Për të lejuar përmbajtjen e nivelit të bllokut kudo, ne e ndërrojmë atë <a>me një <div>si më poshtë:

  1. <ul class = "miniaturë" >
  2. <li class = "span4" >
  3. <div class = "miniaturë" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Etiketa e miniaturës </h3>
  6. <p> Titulli i miniaturës... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Më shumë shembuj

Eksploroni të gjitha opsionet tuaja me klasat e ndryshme të rrjetit të disponueshme për ju. Ju gjithashtu mund të përzieni dhe përshtatni madhësi të ndryshme.

Sinjalizim i parazgjedhur

Mbështillni çdo tekst dhe një buton opsional të heqjes .alertpër një mesazh paralajmërues bazë.

Paralajmërim! Kontrolloni më mirë veten, nuk po dukeni shumë mirë.
  1. <div class = "alarm" >
  2. <button type = "button" class = "mbyll" data-dismiss = "alarm" > × </button>
  3. <strong> Paralajmërim! </strong> Kontrolloni më mirë veten, nuk po dukeni shumë mirë.
  4. </div>

Hiq butonat

Shfletuesit Mobile Safari dhe Mobile Opera, përveç data-dismiss="alert"atributit, kërkojnë një href="#"për heqjen e sinjalizimeve kur përdorin një <a>etiketë.

  1. <a href = "#" class = "mbyll" data-dismiss = "alarm" > × </a>

Përndryshe, mund të përdorni një <button>element me atributin e të dhënave, të cilin ne kemi zgjedhur ta bëjmë për dokumentet tona. Kur përdorni <button>, ju duhet të përfshini type="button"ose formularët tuaj mund të mos dorëzohen.

  1. <button type = "button" class = "mbyll" data-dismiss = "alarm" > × </button>

Hiq sinjalizimet nëpërmjet JavaScript

Përdorni shtesën e alarmeve jQuery për heqjen e shpejtë dhe të lehtë të sinjalizimeve.


Opsione

Për mesazhe më të gjata, rrisni mbushjen në pjesën e sipërme dhe të poshtme të mbështjellësit të sinjalizimeve duke shtuar .alert-block.

Paralajmërim!

Kontrolloni më mirë veten, nuk po dukeni shumë mirë. Nulla vitae elit libero, një pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert-block" >
  2. <button type = "button" class = "mbyll" data-dismiss = "alarm" > × </button>
  3. <h4> Paralajmërim! </h4>
  4. Kontrolloni më mirë veten, nuk jeni...
  5. </div>

Alternativat kontekstuale

Shto klasa opsionale për të ndryshuar konotacionin e një sinjalizimi.

Gabim apo rrezik

Dreqin! Ndrysho disa gjëra dhe provo të dorëzosh sërish.
  1. <div class = "gabim alarmi i alarmit" >
  2. ...
  3. </div>

Sukses

Te lumte! Ju e lexoni me sukses këtë mesazh të rëndësishëm alarmi.
  1. <div class = "suksesi i alarmit" >
  2. ...
  3. </div>

Informacion

Kokat lart! Ky alarm kërkon vëmendjen tuaj, por nuk është shumë i rëndësishëm.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Shembuj dhe shënimi

bazë

Shiriti i parazgjedhur i përparimit me një gradient vertikal.

  1. <div class = "progres" >
  2. <div class = "bar" style = " gjerësia : 60 %; " </div>
  3. </div>

Me vija

Përdor një gradient për të krijuar një efekt me vija. Nuk disponohet në IE7-8.

  1. <div class = "progres progres-striped" >
  2. <div class = "bar" style = " gjerësia : 20 %; " </div>
  3. </div>

I animuar

Shtoni .active.progress-stripedpër të animuar vijat nga e djathta në të majtë. Nuk disponohet në të gjitha versionet e IE.

  1. <div class = "progres progres-striped aktiv" >
  2. <div class = "bar" style = " gjerësia : 40 %; " </div>
  3. </div>

Të grumbulluara

Vendosni shufra të shumta në të njëjtën .progresspër t'i grumbulluar ato.

  1. <div class = "progres" >
  2. <div class = "bar bar-success" style = " gjerësia : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " gjerësia : 20 %; " </div>
  4. <div class = "bar bar-danger" style = " gjerësia : 10 %; " </div>
  5. </div>

Opsione

Ngjyra shtesë

Shiritat e progresit përdorin disa nga të njëjtin buton dhe klasa alarmi për stile të qëndrueshme.

  1. <div class = "progres progres-info" >
  2. <div class = "bar" style = " gjerësia : 20 % " ></div>
  3. </div>
  4. <div class = "progres progres-sukses" >
  5. <div class = "bar" style = " gjerësia : 40 % " ></div>
  6. </div>
  7. <div class = "progres-paralajmërim" >
  8. <div class = "bar" style = " gjerësia : 60 % " ></div>
  9. </div>
  10. <div class = "progres progres-rrezik" >
  11. <div class = "bar" style = " gjerësia : 80 % " ></div>
  12. </div>

Shufra me vija

Ngjashëm me ngjyrat e forta, ne kemi shirita të ndryshëm të përparimit me vija.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " gjerësia : 20 % " ></div>
  3. </div>
  4. <div class = "progres progres-sukses progres-striped" >
  5. <div class = "bar" style = " gjerësia : 40 % " ></div>
  6. </div>
  7. <div class = "progres progres-paralajmërim progresi-striped" >
  8. <div class = "bar" style = " gjerësia : 60 % " ></div>
  9. </div>
  10. <div class = "progres progres-risk progres-striped" >
  11. <div class = "bar" style = " gjerësia : 80 % " ></div>
  12. </div>

Mbështetja e shfletuesit

Shiritat e progresit përdorin gradientët, tranzicionet dhe animacionet CSS3 për të arritur të gjitha efektet e tyre. Këto veçori nuk mbështeten në IE7-9 ose në versionet më të vjetra të Firefox-it.

Versionet më të hershme se Internet Explorer 10 dhe Opera 12 nuk mbështesin animacione.

Stilet abstrakte të objekteve për ndërtimin e llojeve të ndryshme të komponentëve (si komentet në blog, Tweet, etj) që paraqesin një imazh të rreshtuar majtas ose djathtas së bashku me përmbajtjen tekstuale.

Shembulli i parazgjedhur

Mediat e parazgjedhura lejojnë të notosh një objekt mediatik (imazhe, video, audio) në të majtë ose në të djathtë të një blloku të përmbajtjes.

64x64

Titulli i medias

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.
64x64

Titulli i medias

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.
64x64

Titulli i medias

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.
  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-trup" >
  6. <h4 class = "media-heading" > Titulli i medias </h4>
  7. ...
  8.  
  9. <!-- Objekt mediatik i mbivendosur -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Lista e mediave

Me pak shënim shtesë, mund të përdorni media brenda listës (e dobishme për temat e komenteve ose listat e artikujve).

  • 64x64

    Titulli i medias

    Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Titulli i medias së mbivendosur

    Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Titulli i medias së mbivendosur

    Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Titulli i medias së mbivendosur

    Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Titulli i medias

    Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "media-lista" >
  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-trup" >
  7. <h4 class = "media-heading" > Titulli i medias </h4>
  8. ...
  9.  
  10. <!-- Objekt mediatik i mbivendosur -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Puset

Përdorni pusin si një efekt të thjeshtë në një element për t'i dhënë atij një efekt të futur.

Shiko, unë jam në një pus!
  1. <div class = "mirë" >
  2. ...
  3. </div>

Klasat me dëshirë

Kontrolloni mbushjen dhe qoshet e rrumbullakosura me dy klasa modifikuese opsionale.

Shiko, unë jam në një pus!
  1. <div class = "mirë-mirë i madh" >
  2. ...
  3. </div>
Shiko, unë jam në një pus!
  1. <div class = "mirë e vogël" >
  2. ...
  3. </div>

Ikona e mbylljes

Përdorni ikonën e përgjithshme të mbylljes për të hequr përmbajtjen si modalet dhe sinjalizimet.

  1. <button class = "mbyll" > × </button>

Pajisjet iOS kërkojnë një href="#"ngjarje për klikim nëse preferoni të përdorni një spirancë.

  1. <a class = "close" href = "#" > × </a>

Klasat ndihmëse

Klasa të thjeshta, të fokusuara për ndryshime të vogla të paraqitjes ose sjelljes.

.tërheq-majtas

Fluturoni një element majtas

  1. class = "tërheq majtas"
  1. . tërheq - majtas {
  2. noton : majtas ;
  3. }

.tërheq-djathtas

Fluturoni një element djathtas

  1. class = "tërheq djathtas"
  1. . tërheq - djathtas {
  2. noton : djathtas ;
  3. }

.e heshtur

Ndrysho ngjyrën e një elementi në#999

  1. klasa = "e heshtur"
  1. . i heshtur {
  2. ngjyra : #999;
  3. }

.sqaroj

Pastroni floatçdo element

  1. class = "i qartësuar"
  1. . zgjidh {
  2. * zmadhimi : 1 ;
  3. &: më parë ,
  4. &: pas {
  5. shfaqja : tabela ;
  6. përmbajtja : "" ;
  7. }
  8. &: pas {
  9. qartë : të dyja ;
  10. }
  11. }