Vipengele

Vipengee vingi vinavyoweza kutumika tena vilivyoundwa ili kutoa urambazaji, arifa, popovers, na zaidi.

Mifano

Chaguzi mbili za msingi, pamoja na tofauti mbili maalum zaidi.

Kikundi cha kitufe kimoja

Funga mfululizo wa vifungo na .btnin .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Kushoto </button>
  3. <button class = "btn" > Kati </button>
  4. <button class = "btn" > Kulia </button>
  5. </ div>

Vikundi vingi vya vifungo

Changanya seti za <div class="btn-group">katika a <div class="btn-toolbar">kwa vipengele ngumu zaidi.

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

Vikundi vya vitufe vya wima

Fanya seti ya vitufe ionekane ikiwa imepangwa kwa safu wima badala ya mlalo.

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

Kisanduku cha kuteua na ladha za redio

Vikundi vya vitufe vinaweza pia kufanya kazi kama redio, ambapo kitufe kimoja pekee kinaweza kuwa amilifu, au visanduku vya kuteua, ambapo idadi yoyote ya vitufe vinaweza kuwa hai. Tazama hati za JavaScript kwa hiyo.

Kunjuzi katika vikundi vya vitufe

Vichwa juu!Vifungo vilivyo na menyu kunjuzi lazima vifunikwe kivyake .btn-groupndani ya a .btn-toolbarkwa uwasilishaji unaofaa.

Muhtasari na mifano

Tumia kitufe chochote kuanzisha menyu kunjuzi kwa kuiweka ndani ya a .btn-groupna kutoa lebo sahihi ya menyu.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Kitendo
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- viungo vya menyu kunjuzi -->
  8. </ul>
  9. </ div>

Inafanya kazi na saizi zote za vitufe

Vifungo kunjuzi hufanya kazi kwa ukubwa wowote: .btn-large, .btn-small, au .btn-mini.

Inahitaji JavaScript

Vituo kunjuzi vinahitaji programu- jalizi ya kunjuzi ya Bootstrap kufanya kazi.

Katika baadhi ya matukio—kama vile menyu kunjuzi ya simu ya mkononi itapanuliwa nje ya kituo cha kutazama. Unahitaji kutatua upangaji wewe mwenyewe au kwa JavaScript maalum.


Kunjuzi za vitufe vya kugawanyika

Kujenga juu ya mitindo ya vikundi vya vifungo na lebo, tunaweza kuunda kifungo cha mgawanyiko kwa urahisi. Vifungo vya kugawanya huangazia kitendo cha kawaida upande wa kushoto na kugeuza kunjuzi upande wa kulia kwa kutumia viungo vya muktadha.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Kitendo </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </kifungo>
  6. <ul class = "dropdown-menu" >
  7. <!-- viungo vya menyu kunjuzi -->
  8. </ul>
  9. </ div>

Ukubwa

Tumia madarasa ya vitufe vya ziada .btn-mini, .btn-small, au .btn-largekwa ukubwa.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Kitendo </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </kifungo>
  6. <ul class = "dropdown-menu" >
  7. <!-- viungo vya menyu kunjuzi -->
  8. </ul>
  9. </ div>

Menyu za kudondosha

Menyu kunjuzi pia zinaweza kugeuzwa kutoka chini kwenda juu kwa kuongeza darasa moja kwa mzazi wa karibu wa .dropdown-menu. Itageuza uelekeo wa .caretna kuweka upya menyu yenyewe ili kusonga kutoka chini kwenda juu badala ya juu kwenda chini.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Drop </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </kifungo>
  6. <ul class = "dropdown-menu" >
  7. <!-- viungo vya menyu kunjuzi -->
  8. </ul>
  9. </ div>

Pagination ya kawaida

Uandikaji rahisi uliochochewa na Rdio, mzuri kwa programu na matokeo ya utafutaji. Kizuizi kikubwa ni ngumu kukosa, kinaweza kuongezwa kwa urahisi, na hutoa maeneo makubwa ya kubofya.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Iliyotangulia </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 = "#" > Inayofuata </a></li>
  10. </ul>
  11. </ div>

Chaguo

Majimbo ya walemavu na amilifu

Viungo vinaweza kubinafsishwa kwa hali tofauti. Tumia .disabledkwa viungo visivyobofya na .activekuashiria ukurasa wa sasa.

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

Unaweza kubadilisha kwa hiari viunga vinavyotumika au vilivyozimwa kwa vipenyo ili kuondoa utendakazi wa kubofya huku ukihifadhi mitindo iliyokusudiwa.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "walemavu" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </ div>

Ukubwa

Je, ungependa kutengeneza kurasa kubwa au ndogo zaidi? Ongeza .pagination-large, .pagination-small, au .pagination-minikwa saizi za ziada.

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

Mpangilio

Ongeza mojawapo ya madarasa mawili ya hiari ili kubadilisha upatanishi wa viungo vya upagino: .pagination-centeredna .pagination-right.

  1. <div class = "pagination-centered" >
  2. ...
  3. </ div>
  1. <div class = "pagination-right" >
  2. ...
  3. </ div>

Peja

Viungo vya haraka vilivyotangulia na vifuatavyo vya utekelezaji rahisi wa uwekaji alama na mitindo nyepesi. Ni nzuri kwa tovuti rahisi kama blogu au majarida.

Mfano chaguomsingi

Kwa chaguo-msingi, paja huweka viungo.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Iliyotangulia </a></li>
  3. <li><a href = "#" > Inayofuata </a></li>
  4. </ul>

Viungo vilivyopangiliwa

Vinginevyo, unaweza kusawazisha kila kiunga kwa pande:

  1. <ul class = "pager" >
  2. <li class = "previous" >
  3. <a href = "#" > Mzee </a>
  4. </li>
  5. <li class = "next" >
  6. <a href = "#" > Mpya zaidi → </a>
  7. </li>
  8. </ul>

Hali ya hiari ya walemavu

Viungo vya Pager pia hutumia .disableddarasa la matumizi ya jumla kutoka kwa pagination.

  1. <ul class = "pager" >
  2. <li class = "previous disabled" >
  3. <a href = "#" > Mzee </a>
  4. </li>
  5. ...
  6. </ul>

Lebo

Lebo Alama
Chaguomsingi <span class="label">Default</span>
Mafanikio <span class="label label-success">Success</span>
Onyo <span class="label label-warning">Warning</span>
Muhimu <span class="label label-important">Important</span>
Habari <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Beji

Jina Mfano Alama
Chaguomsingi 1 <span class="badge">1</span>
Mafanikio 2 <span class="badge badge-success">2</span>
Onyo 4 <span class="badge badge-warning">4</span>
Muhimu 6 <span class="badge badge-important">6</span>
Habari 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Inakunjwa kwa urahisi

Kwa utekelezaji rahisi, lebo na beji zitaanguka (kupitia kiteuzi cha CSS :empty) wakati hakuna maudhui ndani.

Kitengo cha shujaa

Sehemu nyepesi, inayonyumbulika ili kuonyesha maudhui muhimu kwenye tovuti yako. Inafanya kazi vizuri kwenye tovuti za uuzaji na maudhui mazito.

Salamu, Dunia!

Hiki ni kitengo rahisi cha shujaa, kijenzi rahisi cha mtindo wa jumbotron cha kutoa umakini wa ziada kwa maudhui au maelezo yaliyoangaziwa.

Jifunze zaidi

  1. <div class = "hero-unit" >
  2. <h1> Kichwa </ h1>
  3. <p> Mstari wa tagi </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Jifunze zaidi
  7. </a>
  8. </ p>
  9. </ div>

Kijajuu cha ukurasa

Gamba rahisi la h1kuweka nafasi ipasavyo na kuweka sehemu za yaliyomo kwenye ukurasa. Inaweza kutumia h1chaguo-msingi small, kipengele pamoja na vipengele vingine vingi (na mitindo ya ziada).

  1. <div class = "page-header" >
  2. <h1> Mfano wa kichwa cha ukurasa <small> Matini ndogo ya kichwa </small></h1>
  3. </ div>

Vijipicha chaguomsingi

Kwa chaguo-msingi, vijipicha vya Bootstrap vimeundwa ili kuonyesha picha zilizounganishwa na alama ndogo zinazohitajika.

Inayoweza kubinafsishwa sana

Ukiwa na lebo ya ziada, inawezekana kuongeza aina yoyote ya maudhui ya HTML kama vile vichwa, aya, au vitufe kwenye vijipicha.

  • 300x200

    Lebo ya kijipicha

    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.

    Kitendo Kitendo

  • 300x200

    Lebo ya kijipicha

    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.

    Kitendo Kitendo

  • 300x200

    Lebo ya kijipicha

    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.

    Kitendo Kitendo

Kwa nini utumie vijipicha

Vijipicha (hapo awali .media-gridhadi v1.4) ni vyema kwa gridi za picha au video, matokeo ya utafutaji wa picha, bidhaa za rejareja, portfolios, na mengi zaidi. Wanaweza kuwa viungo au maudhui tuli.

Rahisi, markup rahisi

Alama ya kijipicha ni rahisi—a ulyenye idadi yoyote ya livipengele ndiyo tu inayohitajika. Pia ni rahisi kunyumbulika, ikiruhusu aina yoyote ya maudhui yenye alamisho kidogo zaidi ili kufunga maudhui yako.

Hutumia ukubwa wa safu wima ya gridi

Hatimaye, sehemu ya vijipicha hutumia aina zilizopo za mfumo wa gridi—kama .span2au .span3—kwa udhibiti wa vipimo vya kijipicha.

Alama

Kama ilivyotajwa hapo awali, alama inayohitajika ya vijipicha ni nyepesi na moja kwa moja. Hapa angalia usanidi chaguo-msingi wa picha zilizounganishwa :

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

Kwa maudhui maalum ya HTML katika vijipicha, alama hubadilika kidogo. Ili kuruhusu maudhui ya kiwango cha kuzuia mahali popote, tunabadilishana <a>kama <div>vile:

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Lebo ya kijipicha </h3>
  6. <p> Manukuu ya kijipicha... </p>
  7. </ div>
  8. </li>
  9. ...
  10. </ul>

Mifano zaidi

Chunguza chaguo zako zote ukitumia aina mbalimbali za gridi zinazopatikana kwako. Unaweza pia kuchanganya na kuchanganya ukubwa tofauti.

Tahadhari chaguomsingi

Funga maandishi yoyote na kitufe cha hiari cha kuondoa .alertkwa ujumbe wa tahadhari ya msingi.

Onyo! Bora jiangalie mwenyewe, huonekani kuwa mzuri sana.
  1. <div class = "alert" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </kifungo>
  3. <strong> Onyo! </strong> Bora jiangalie mwenyewe, huonekani kuwa mzuri sana.
  4. </ div>

Ondoa vifungo

Vivinjari vya Safari ya Simu na Mobile Opera, pamoja na data-dismiss="alert"sifa, vinahitaji ili kuondoa href="#"arifa unapotumia <a>lebo.

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

Vinginevyo, unaweza kutumia <button>kipengele chenye sifa ya data, ambacho tumechagua kufanya kwa hati zetu. Unapotumia <button>, ni lazima ujumuishe type="button"au fomu zako zisiwasilishe.

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </kifungo>

Ondoa arifa kupitia JavaScript

Tumia programu- jalizi ya arifa za jQuery kwa uondoaji wa arifa haraka na rahisi.


Chaguo

Kwa ujumbe mrefu, ongeza pedi juu na chini ya kanga ya tahadhari kwa kuongeza .alert-block.

Onyo!

Bora jiangalie mwenyewe, huonekani kuwa mzuri sana. Nulla vitae elit libero, pharetra augue. Karibu commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </kifungo>
  3. <h4> Onyo! </ h4>
  4. Bora ujichunguze, wewe si...
  5. </ div>

Njia mbadala za muktadha

Ongeza madarasa ya hiari ili kubadilisha maana ya arifa.

Hitilafu au hatari

Oh snap! Badilisha mambo machache na ujaribu kuwasilisha tena.
  1. <div class = "alert alert-error" >
  2. ...
  3. </ div>

Mafanikio

Umefanya vizuri! Umefaulu kusoma ujumbe huu muhimu wa tahadhari.
  1. <div class = "alert alert-success" >
  2. ...
  3. </ div>

Habari

Vichwa juu! Tahadhari hii inahitaji umakini wako, lakini sio muhimu sana.
  1. <div class = "tahadhari ya taarifa" >
  2. ...
  3. </ div>

Mifano na markup

Msingi

Upau chaguo-msingi wa maendeleo na upinde rangi wima.

  1. <div class = "progress" >
  2. <div class = "bar" style = " width : 60 %; " ></div>
  3. </ div>

Milia

Hutumia upinde rangi kuunda athari yenye milia. Haipatikani katika IE7-8.

  1. <div class = "progress progress-striped" >
  2. <div class = "bar" style = " width : 20 %; " ></div>
  3. </ div>

Imehuishwa

Ongeza .activekwa .progress-stripedkuhuisha milia kulia kwenda kushoto. Haipatikani katika matoleo yote ya IE.

  1. <div class = "progress progress-striped active" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </ div>

Imepangwa kwa rafu

Weka pau nyingi kwenye kitu kimoja .progressili kuziweka.

  1. <div class = "progress" >
  2. <div class = "bar-success" style = " upana : 35 %; " ></div>
  3. <div class = "bar-warning" style = " upana : 20 %; " ></div>
  4. <div class = "bar-danger" style = " width : 10 %; " ></div>
  5. </ div>

Chaguo

Rangi za ziada

Pau za maendeleo hutumia baadhi ya vitufe sawa na madarasa ya tahadhari kwa mitindo thabiti.

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </ div>
  4. <div class = "progress progress-success" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </ div>
  7. <div class = "onyo la maendeleo" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </ div>
  10. <div class = "progress progress-hatari" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </ div>

Paa zilizopigwa

Sawa na rangi dhabiti, tuna pau tofauti za maendeleo zenye mistari.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </ div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </ div>
  7. <div class = "maendeleo-onyo la maendeleo-yamepunguzwa" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </ div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </ div>

Usaidizi wa kivinjari

Pau za maendeleo hutumia gradient za CSS3, mipito, na uhuishaji kufikia athari zao zote. Vipengele hivi havitumiki katika IE7-9 au matoleo ya awali ya Firefox.

Matoleo ya mapema zaidi ya Internet Explorer 10 na Opera 12 hayatumii uhuishaji.

Mitindo ya vitu dhahania ya kuunda aina mbalimbali za vipengele (kama maoni ya blogu, Tweets, n.k) ambazo zinaangazia picha iliyopangwa kushoto au kulia pamoja na maudhui ya maandishi.

Mfano chaguomsingi

Midia chaguo-msingi huruhusu kuelea kitu cha midia (picha, video, sauti) upande wa kushoto au kulia wa kizuizi cha maudhui.

64x64

Kichwa cha habari

Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis kwenye faucibus.
64x64

Kichwa cha habari

Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis kwenye faucibus.
64x64

Kichwa cha habari

Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis kwenye 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-body" >
  6. <h4 class = "media-heading" > Kichwa cha habari </h4>
  7. ...
  8.  
  9. <!-- Nested media object -->
  10. <div class = "media" >
  11. ...
  12. </ div>
  13. </ div>
  14. </ div>

Orodha ya vyombo vya habari

Ukiwa na lebo ya ziada, unaweza kutumia maudhui ya ndani ya orodha (yanafaa kwa mazungumzo ya maoni au orodha za makala).

  • 64x64

    Kichwa cha habari

    Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis.

    64x64

    Kichwa cha media kilichoorodheshwa

    Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis.
    64x64

    Kichwa cha media kilichoorodheshwa

    Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis.
    64x64

    Kichwa cha media kilichoorodheshwa

    Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis.
  • 64x64

    Kichwa cha habari

    Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, 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-heading" > Kichwa cha habari </h4>
  8. ...
  9.  
  10. <!-- Nested media object -->
  11. <div class = "media" >
  12. ...
  13. </ div>
  14. </ div>
  15. </li>
  16. </ul>

Visima

Tumia kisima kama athari rahisi kwenye kipengele ili kukipa athari ya kuingiza.

Tazama, niko kisimani!
  1. <div class = "vizuri" >
  2. ...
  3. </ div>

Madarasa ya hiari

Dhibiti pedi na pembe zilizo na mviringo kwa madarasa mawili ya hiari ya kurekebisha.

Tazama, niko kisimani!
  1. <div class = "well-large" >
  2. ...
  3. </ div>
Tazama, niko kisimani!
  1. <div class = "well-small" >
  2. ...
  3. </ div>

Funga ikoni

Tumia aikoni ya jumla ya kufunga kwa kuondoa maudhui kama vile miundo na arifa.

  1. <button class = "close" > × </kifungo>

Vifaa vya iOS vinahitaji href="#"kwa matukio ya kubofya ikiwa ungependa kutumia nanga.

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

Madarasa ya wasaidizi

Madarasa rahisi, yaliyolengwa kwa maonyesho madogo au marekebisho ya tabia.

.vuta-kushoto

Elekeza kipengele kushoto

  1. darasa = "vuta-kushoto"
  1. . vuta - kushoto {
  2. kuelea : kushoto ;
  3. }

.vuta-kulia

Elekeza kipengele kulia

  1. darasa = "vuta kulia"
  1. . vuta - kulia {
  2. kuelea : kulia ;
  3. }

.imezimwa

Badilisha rangi ya kipengele kuwa#999

  1. darasa = "umezimwa"
  1. . imenyamazishwa {
  2. rangi : #999;
  3. }

.clearfix

Futa floatkwenye kipengele chochote

  1. darasa = "clearfix"
  1. . clearfix {
  2. * kuza : 1 ;
  3. &: kabla ,
  4. &: baada ya {
  5. onyesha : meza ;
  6. maudhui : "" ;
  7. }
  8. &: baada ya {
  9. wazi : zote mbili ;
  10. }
  11. }