Ba composants

Ebele ya biloko oyo ekoki kosalelama lisusu oyo etongami mpo na kopesa navigation, makebisi, popovers, mpe mingi mosusu.

Bandakisa

Ba options mibale ya base, elongo na ba variations mibale ya spécifique mosusu.

Groupe ya bouton moko

Envelopper série ya ba boutons na .btnin .btn-group.

  1. <div kelasi = "btn-etuluku" >
  2. <bouton classe = "btn" > Na loboko ya mwasi </bouton>
  3. <bouton classe = "btn" > Kati </bouton>
  4. <bouton classe = "btn" > Na loboko ya mobali </button>
  5. </div>

Ba groupes ya ba boutons ebele

Sangisa ba ensembles ya <div class="btn-group">na kati ya a <div class="btn-toolbar">mpo na ba composants complexes mingi.

  1. <div class = "btn-barre ya bisaleli" >
  2. <div kelasi = "btn-etuluku" >
  3. ...
  4. </div>
  5. </div>

Ba groupes ya ba boutons verticales

Salá ete ensemble ya ba boutons emonana ebelemi na verticale na esika ya kozala horizontalement.

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

Boîte de coche na ba saveurs ya radio

Ba groupes ya ba boutons ekoki pe kosala lokola ba radio, esika kaka bouton moko ekoki kozala activé, to ba cases ya kotiya elembo, esika nombre nionso ya ba boutons ekoki kozala activé. Tala ba docs ya JavaScript pona yango.

Ba dropdowns na ba groupes ya ba boutons

Mitó likoló!Ba boutons oyo ezali na ba dropdowns esengeli ko envelopper moko moko na oyo ya yango na .btn-groupkati ya a .btn-toolbarmpo na ko rendu yango malamu.

Botali ya mozindo mpe bandakisa

Salelá bouton nyonso mpo na kobanda menu oyo ezali kokita na kotyáká yango na kati ya a .btn-groupmpe kopesa elembo ya menu oyo ebongi.

  1. <div kelasi = "btn-etuluku" >
  2. <a class = "btn kokita-toggle" data-toggle = "kokita" href = "#" >
  3. Mosala
  4. <span kelasi = "caret" </span>
  5. </a>
  6. <ul class = "menu ya kokita" >
  7. <!-- ba liens ya menu oyo ezali kokita -->
  8. </ul>
  9. </div>

Esalaka na ba taille nionso ya ba boutons

Ba boutons oyo ezali kokita esalaka na bonene nyonso: .btn-large, .btn-small, to .btn-mini.

Esengeli na JavaScript

Ba déroulants ya ba boutons esengaka plugin ya ba déroulants ya Bootstrap esala.

Na bantango mosusu —lokola telefone ya mabɔkɔ —ba menu oyo ezali kokita ekopanzana na libándá ya esika ya kotala. Esengeli o résoudre alignment manuellement to na JavaScript personnalisé.


Ba déroulants ya bouton ya kokabola

Kotonga na ba styles ya groupe ya bouton na marquage, tokoki kosala bouton ya kokabola na pete. Ba boutons ya kokabola ezali na action standard na gauche mpe toggle ya déroulant na droite na ba liens contextuels.

  1. <div kelasi = "btn-etuluku" >
  2. <bouton classe = "btn" > Mosala </bouton>
  3. <bouton classe = "btn kokita-toggle" data-toggle = "kokita" >
  4. <span kelasi = "caret" </span>
  5. </bouton>
  6. <ul class = "menu ya kokita" >
  7. <!-- ba liens ya menu oyo ezali kokita -->
  8. </ul>
  9. </div>

Ba taille

Salelá bakelasi ya bouton ya kobakisa .btn-mini, .btn-small, to .btn-largempo na kosala bonene.

  1. <div kelasi = "btn-etuluku" >
  2. <bouton classe = "btn btn-mini" > Mosala </bouton>
  3. <bouton classe = "btn btn-mini kokita-ba-toggle" data-toggle = "kokita" >
  4. <span kelasi = "caret" </span>
  5. </bouton>
  6. <ul class = "menu ya kokita" >
  7. <!-- ba liens ya menu oyo ezali kokita -->
  8. </ul>
  9. </div>

Ba menu ya kokita

Ba menu ya kokita ekoki mpe kobalusama uta na nse kino na kobakisa kelasi moko na moboti ya penepene ya .dropdown-menu. Ekobalusa direction ya .caretmpe ekozongisa menu yango moko mpo na kokende longwa na nse likoló na esika ya likoló na nse.

  1. <div class = "bokiti ya etuluku ya btn" >
  2. <bouton classe = "btn" > Kobwaka </bouton>
  3. <bouton classe = "btn kokita-toggle" data-toggle = "kokita" >
  4. <span kelasi = "caret" </span>
  5. </bouton>
  6. <ul class = "menu ya kokita" >
  7. <!-- ba liens ya menu oyo ezali kokita -->
  8. </ul>
  9. </div>

Pagination standard

Pagination simple inspirée par Rdio, bien pona ba apps na ba résultats ya recherche. Bloc ya monene ezali mpasi mpo na kozanga, ekoki ko évoluer na pete, mpe epesaka bisika ya minene ya ko cliquer.

  1. <div classe = "kosala lokasa" >
  2. <ul>
  3. <li><a href = "#" > Liboso </a></li>
  4. <li><a href = "#" > 1 </a></li> Ezali ndenge nini?
  5. <li><a href = "#" > 2 </a></li> Ezali ndenge nini?
  6. <li><a href = "#" > 3 </a></li> Ezali ndenge nini?
  7. <li><a href = "#" > 4 ​​</a></li> Ezali ndenge nini?
  8. <li><a href = "#" > 5 </a></li> Ezali ndenge nini?
  9. <li><a href = "#" > Na sima </a></li>
  10. </ul>
  11. </div>

Makambo oyo okoki kopona

Ba états handicapés na actives

Ba liens ezali personnalisable pona ba circonstances différentes. Salelá .disabledmpo na ba liens oyo okoki kofina te mpe .activempo na komonisa lokasa oyo ozali kosalela.

  1. <div classe = "kosala lokasa" >
  2. <ul>
  3. <li classe = "ezali na mosala te" ><a href = "#" > « </a></li>
  4. <li kelasi = "mosala" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Okoki na bolingi ya ko swap out ba ancres actifs to désactivés mpo na ba spans mpo na kolongola fonctionnalité ya clic tout en gardant ba styles oyo ekanamaki.

  1. <div classe = "kosala lokasa" >
  2. <ul>
  3. <li classe = "ezali na bozangi makoki" ><span> « </span></li> oyo ezali na kati
  4. <li kelasi = "mosala" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Ba taille

Fancy pagination ya monene to ya moke? Bakisa .pagination-large, .pagination-small, to .pagination-minimpo na bonene mosusu.

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

Kobongisa makambo

Bakisa moko ya bakelasi mibale oyo okoki kopona mpo na kobongola boyokani ya ba liens ya pagination: .pagination-centeredmpe .pagination-right.

  1. <div class = "ezali na katikati ya bopanzi nsango" >
  2. ...
  3. </div>
  1. <div class = "pagination ya lokasa-na loboko ya mobali" >
  2. ...
  3. </div>

Pager oyo azali kosala

Ba liens ya mbangu ya liboso mpe ya sima mpo na ba implémentations ya pagination ya pete na marquage ya pole mpe ba styles. Ezali malamu mingi mpo na ba sites ya pete lokola ba blogs to ba magazines.

Ndakisa ya liboso

Par défaut, pager ezo centrer ba liens.

  1. <ul kelasi = "pager" >
  2. <li><a href = "#" > Liboso </a></li>
  3. <li><a href = "#" > Na sima </a></li>
  4. </ul>

Ba liens oyo ezali na boyokani

Na lolenge mosusu, okoki kosala ete lien mokomoko ezala na mipanzi:

  1. <ul kelasi = "pager" >
  2. <li classe = "ya liboso" >
  3. <a href = "#" > Ezali ndenge nini? Mibange </a>
  4. </li>
  5. <li classe = "oyo elandi" >
  6. <a href = "#" > Ya sika → </a>
  7. </li>
  8. </ul>

Etat désactivé optionnel

Ba liens ya pager esalela pe .disabledclasse ya utilité générale à partir ya pagination.

  1. <ul kelasi = "pager" >
  2. <li class = "ya kala ekangamaki" >
  3. <a href = "#" > Ezali ndenge nini? Mibange </a>
  4. </li>
  5. ...
  6. </ul>

Ba étiquettes

Ba étiquettes Kosala bilembo
Mbeba <span class="label">Default</span>
Kolonga <span class="label label-success">Success</span>
Likebisi <span class="label label-warning">Warning</span>
Ntina <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Badge ya ba badges

Nkombo Ndakisa Kosala bilembo
Mbeba 1. 1. <span class="badge">1</span>
Kolonga 2. 2 <span class="badge badge-success">2</span>
Likebisi 4. <span class="badge badge-warning">4</span>
Ntina 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Ekoki kokangama na pɛtɛɛ nyonso

Mpo na kosalela yango na pɛtɛɛ nyonso, ba étiquettes mpe ba badges ekokwea kaka (na nzela ya moponi ya CSS :empty) ntango makambo ezali te na kati.

Unité ya elombe

Eloko moko ya pɛpɛlɛ, oyo ekoki kobongwana mpo na kolakisa makambo ya ntina na site na yo. Esalaka malamu na ba sites ya marketing mpe oyo ezali na makambo mingi.

Mbote, mokili!

Oyo ezali unité ya héros simple, composant simple ya style jumbotron pona ko benga attention supplémentaire na ba contenus to ba informations oyo elakisami.

Yekola makambo mosusu

  1. <div class = "elombe-unité" >
  2. <h1> Motó ya likambo </h1>
  3. <p> Molongo ya bilembo </p>
  4. <p>
  5. <a classe = "btn btn-ya liboso btn-monene" >
  6. Yekola makambo mosusu
  7. </a>
  8. </p>
  9. </div>

Motó ya likambo ya lokasa

Shell moko ya pete mpo na h1mpo na esika oyo ebongi mpe kokabola biteni ya makambo na lokasa moko. Ekoki kosalela h1's default small, élément lokola mingi ya ba composants misusu (na ba styles ya kobakisa).

  1. <div class = "motó ya lokasa" >
  2. <h1> Ndakisa motó ya lokasa <moke> Mokanda ya moke mpo na motó ya likambo </small></h1>
  3. </div>

Ba miniatures ya défaut

Na ndenge ya libela, bililingi ya mikemike ya Bootstrap ebongisami mpo na kolakisa bililingi oyo ezali na boyokani na bilembo moke oyo esengeli.

Personnalisable makasi

Na mwa marquage ya kobakisa, ezali na nzela ya kobakisa lolenge nyonso ya makambo ya HTML lokola mitó ya makambo, baparagrafe, to ba boutons na kati ya bililingi mikemike.

  • 300x200 ya monene

    Etiquette ya miniature

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

    Mosala Mosala

  • 300x200 ya monene

    Etiquette ya miniature

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

    Mosala Mosala

  • 300x200 ya monene

    Etiquette ya miniature

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

    Mosala Mosala

Mpo na nini kosalela bililingi ya mikemike

Ba miniatures (liboso .media-gridtii na v1.4) ezali malamu mpo na ba grille ya ba photos to ba vidéos, ba résultats ya recherche ya ba images, ba produits ya détail, ba portefeuilles, mpe mingi mosusu. Ekoki kozala ba liens to ba contenus statiques.

Marquage ya pete, oyo ekoki kobongwana

Kosala bilembo ya moke ezali pɛtɛɛ —a oyo ezali ulna motángo nyonso ya libiloko ezali kaka oyo esengeli. Ezali mpe super flexible, kopesa nzela na lolenge nyonso ya makambo na kaka mwa marquage mingi mpo na kozinga makambo na yo.

Esalelaka bonene ya makonzí ya grille

Na nsuka, eteni ya bililingi ya mikemike esalela bakelasi ya système ya grille oyo ezali —lokola .span2to.span3 —mpo na kokamba bonene ya bililingi ya mike.

Kosala bilembo

Ndenge tolobaki yango liboso, elembo oyo esengeli mpo na bililingi ya mikemike ezali pɛtɛɛ mpe ezali pɛtɛɛ. Tala ndenge ya kosala na ndenge ya liboso mpo na bilili oyo ezali na boyokani :

  1. <ul class = "bilili ya mike" >
  2. <li kelasi = "span4" >
  3. <a href = "#" classe = "elilingi ya moke" >
  4. <img data-src = "mobateli.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Mpo na makambo ya HTML oyo obongisi na bililingi ya mikemike, elembo ebongwanaka mwa moke. Pona ko permettre contenus ya niveau ya bloc partout, to swap the <a>pona <div>like donc:

  1. <ul class = "bilili ya mike" >
  2. <li kelasi = "span4" >
  3. <div class = "elilingi ya moke" >
  4. <img data-src = "mobateli.js/300x200" alt = "" >
  5. <h3> Etiketi ya elilingi ya moke </h3>
  6. <p> Liloba ya moke ya elilingi... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Bandakisa mosusu

Explorez ba options na yo nionso na ba classes ya grille ndenge na ndenge oyo ezali na yo. Okoki mpe kosangisa mpe kosala boyokani na ba taille ndenge na ndenge.

Alerte ya liboso

Zinga makomi nyonso mpe bouton ya koboya oyo okoki kopona mpo na .alertkozwa nsango ya likebisi ya moboko.

Likebisi! Meilleur vérifier yo self, ozali komonana trop bien te.
  1. <div classe = "kebisi" >
  2. < lolenge ya bouton = "bouton" classe = "kanga" data-dismiss = "alerte" > × </bouton>
  3. <strong> Kebisa! </strong> Meilleur vérifier yo yo moko, ozali komonana malamu mingi te.
  4. </div>

Kolongola ba boutons

Ba navigateurs Mobile Safari na Mobile Opera, en plus ya data-dismiss="alert"attribut, esengaka un href="#"pona ko rejeter ba alertes tango ya kosalela <a>tag.

  1. <a href = "#" classe = "kokanga" data-dismiss = "kebisi" > &ntango; </a>

Na lolenge mosusu, okoki kosalela <button>eleman moko oyo ezali na attribut ya ba données, oyo toponaki kosala mpo na ba docs na biso. Ntango ozali kosalela <button>, osengeli kotya yango type="button"to mpe bakoki kotinda baformilɛrɛ na yo te.

  1. < lolenge ya bouton = "bouton" classe = "kanga" data-dismiss = "alerte" > × </bouton>

Bolongola makebisi na nzela ya JavaScript

Salelá plugin ya ba alertes jQuery mpo na kobwaka ba alertes nokinoki mpe na pɛtɛɛ nyonso.


Makambo oyo okoki kopona

Mpo na ba messages ya milayi, bakisa padding na likolo mpe na se ya enveloppe ya alerte na kobakisa .alert-block.

Likebisi!

Meilleur vérifier yo self, ozali komonana trop bien te. Nulla vitae elit libero, oyo ezali na mbula-mpɛmbɛ oyo babengi pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "bokangami ya likebisi ya likebisi" >
  2. < lolenge ya bouton = "bouton" classe = "kanga" data-dismiss = "alerte" > × </bouton>
  3. <h4> Kebisa! </h4>
  4. Meilleur vérifier yo self, ozali te...
  5. </div>

Ba alternatives ya contexte

Bakisa ba classes optionnelles pona ko changer connotation ya alerte.

Libunga to likama

Oh snap! Bobongola mwa makambo likolo mpe meka kotinda lisusu.
  1. <div class = "libunga ya likebisi ya likebisi" >
  2. ...
  3. </div>

Kolonga

Longonya! Otángi malamu nsango oyo ya ntina mingi ya kokebisa.
  1. <div class = "alerte ya kokebisa-elonga" >
  2. ...
  3. </div>

Nsango

Mitó likoló! Alerte oyo esengeli na attention na yo, mais eza super important te.
  1. <div class = "liyebisi ya likebisi ya likebisi" >
  2. ...
  3. </div>

Bandakisa mpe bilembo

Ya ntina

Barre ya progression par défaut na gradient vertical.

  1. <div classe = "kokende liboso" >
  2. <div classe = "barre" style = " bonene : 60 %; " ></div>
  3. </div>

Ezali na bansinga

Esalelaka gradient mpo na kosala effet rayé. Ezali te na IE7-8.

  1. <div class = "bokende liboso-banda" >
  2. <div classe = "barre" style = " bonene : 20 %; " ></div>
  3. </div>

Ezali na bomoi

Bakisa .activena mpo na .progress-stripedko animer ba rayures droite à gauche. Ezali te na ba versions nionso ya IE.

  1. <div class = "progrès progression-rayé active" >
  2. <div classe = "bar" style = " bonene : 40 %; " ></div>
  3. </div>

Ebele na ebele

Tia ba barres ebele na kati moko .progresspona ko stack yango.

  1. <div classe = "kokende liboso" >
  2. <div class = "bar bar-success" style = " bonene : 35 %; " ></div>
  3. <div class = "barre-barre-kebisi" style = " bonene : 20 %; " ></div>
  4. <div classe = "bar bar-danger" style = " bonene : 10 %; " ></div>
  5. </div>

Makambo oyo okoki kopona

Ba couleurs ya kobakisa

Ba barres ya progrès esalela mwa ndambo ya bouton moko mpe ba classes ya alerte mpo na ba styles oyo ezali constant.

  1. <div class = "ba sango ya bokende liboso" >
  2. <div classe = "bar" style = " bonene : 20 % " ></div>
  3. </div>
  4. <div class = "bokende liboso-elonga" >
  5. <div classe = "bar" style = " bonene : 40 % " ></div>
  6. </div>
  7. <div class = "kebisi ya bokende liboso" >
  8. <div classe = "barre" style = " bonene : 60 % " ></div>
  9. </div>
  10. <div class = "bokende liboso-likama" >
  11. <div classe = "bar" style = " bonene : 80 % " ></div>
  12. </div>

Barres à rayures

Ndenge moko na balangi ya makasi, tozali na ba barres ya progression ya ba rayures ndenge na ndenge.

  1. <div class = "progress progress-info progression-rayé" >
  2. <div classe = "bar" style = " bonene : 20 % " ></div>
  3. </div>
  4. <div class = "bokende liboso-bolongi bokende liboso-rayé" >
  5. <div classe = "bar" style = " bonene : 40 % " ></div>
  6. </div>
  7. <div class = "bokebisi ya bokende liboso ya bokende liboso-striped" >
  8. <div classe = "barre" style = " bonene : 60 % " ></div>
  9. </div>
  10. <div class = "bokende liboso-likama bokende liboso-rayé" >
  11. <div classe = "bar" style = " bonene : 80 % " ></div>
  12. </div>

Lisungi ya navigateur

Ba barres ya progrès esalela ba gradients ya CSS3, ba transitions, na ba animations pona kozua ba effets na yango nionso. Makambo oyo esimbami te na IE7-9 to ba versions ya kala ya Firefox.

Ba versions ya kala koleka Internet Explorer 10 na Opera 12 esimbaka ba animations te.

Ba styles ya objet abstrait pona kotonga ba types ya ba composants ndenge na ndenge (lokola ba commentaires ya blog, ba Tweets, etc) oyo ezali na image oyo ezali aligné na gauche to na droite pembeni ya contenus textuel.

Ndakisa ya liboso

Media ya défaut epesaka nzela ya ko flotter objet ya media (bililingi, video, audio) na gauche to droite ya bloc ya contenus.

64x64 ezali

Motó ya likambo ya bapanzi-nsango

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.
64x64 ezali

Motó ya likambo ya bapanzi-nsango

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.
64x64 ezali

Motó ya likambo ya bapanzi-nsango

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.
  1. <div classe = "bapanzi sango" >
  2. <a classe = "kobenda-na loboko ya mwasi" href = "#" >
  3. <img classe = "objet-media" data-src = "mobateli.js/64x64" >
  4. </a>
  5. <div class = "nzoto-ya-media" >
  6. <h4 class = "motó ya likambo ya media" > Motó ya likambo ya media </h4>
  7. ...
  8.  
  9. <!-- Objet ya media oyo ekangami -->
  10. <div classe = "bapanzi sango" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Liste ya ba médias

Na mwa marquage ya likolo, okoki kosalela media na kati ya liste (ezali na ntina mpo na ba threads ya ba commentaires to ba listes ya ba articles).

  • 64x64 ezali

    Motó ya likambo ya bapanzi-nsango

    Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.

    64x64 ezali

    Motó ya likambo ya media oyo ekangami

    Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.
    64x64 ezali

    Motó ya likambo ya media oyo ekangami

    Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.
    64x64 ezali

    Motó ya likambo ya media oyo ekangami

    Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.
  • 64x64 ezali

    Motó ya likambo ya bapanzi-nsango

    Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.
  1. <ul classe = "liste-ya bapanzi sango" >
  2. <li kelasi = "bapanzi sango" >
  3. <a classe = "kobenda-na loboko ya mwasi" href = "#" >
  4. <img classe = "objet-media" data-src = "mobateli.js/64x64" >
  5. </a>
  6. <div class = "nzoto-ya-media" >
  7. <h4 class = "motó ya likambo ya media" > Motó ya likambo ya media </h4>
  8. ...
  9.  
  10. <!-- Objet ya media oyo ekangami -->
  11. <div classe = "bapanzi sango" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Mabulu ya mai

Salelá libulu lokola effet simple na élément moko mpo na kopesa yango effet inset.

Talá, nazali na kati ya libulu moko!
  1. <div classe = "malamu" >
  2. ...
  3. </div>

Ba kelasi oyo okoki kopona

Contrôle remplissage na ba coins arrondis na deux classes modificateurs optionnels.

Talá, nazali na kati ya libulu moko!
  1. <div class = "malamu malamu-monene" >
  2. ...
  3. </div>
Talá, nazali na kati ya libulu moko!
  1. <div class = "malamu malamu-moke" >
  2. ...
  3. </div>

Bokanga elembo

Salelá elembo ya bokangami ya monene mpo na koboya makambo lokola ba modal mpe makebisi.

  1. <bouton classe = "kokanga" > &ntango; </bouton>

Ba appareils iOS esengaka un href="#"pona ba événements ya cliquer soki olingi kosalela anchor.

  1. <a classe = "kokanga" href = "#" > &ntango; </a>

Bakelasi ya basalisi

Ba classes simples, focusées pona ba petits affichages to ba tweaks ya comportement.

.kobenda-na lobɔkɔ ya mwasi

Flotter élément moko na gauche

  1. classe = "kobenda-na loboko ya mwasi".
  1. . kobenda - na loboko ya mwasi { .
  2. float : na loboko ya mwasi ;
  3. } .

.kobenda-na loboko ya mobali

Flotter élément moko na droite

  1. classe = "kobenda-na loboko ya mobali".
  1. . benda - na loboko ya mobali { .
  2. float : na loboko ya mobali ;
  3. } .

.ezali kokanga mongongo

Bobongola langi ya eleman moko na#999

  1. classe = "ezali kokanga mongongo".
  1. . muted { .
  2. langi : #999;
  3. } .

.kobongisa polele

Effacer na floatna élément nionso

  1. class = "bolongoli malamu".
  1. . bobongisi ya polele { .
  2. * kosala zoom : 1 ;
  3. &: liboso ya , .
  4. &: nsima ya { .
  5. kolakisa : mesa ;
  6. makambo oyo ezali na kati : "" ;
  7. } .
  8. &: nsima ya { .
  9. polele : nyonso mibale ;
  10. } .
  11. } .