Kokangama ya bottes

Ba composants

Ba douzaines ya ba composants oyo ekoki kosalelama lisusu etongami na Bootstrap mpo na kopesa navigation, ba alertes, ba popovers, mpe mingi mosusu.

Bituluku ya ba boutons Sangisa ba boutons mpo na misala mingi lokola barre ya bisaleli

Ba groupes ya ba boutons

Salelá bituluku ya ba boutons mpo na kosangisa ba boutons ebele esika moko lokola composante composite moko. Tongela bango na série ya <a>to <button>ba éléments.

Misala ya malamu koleka

Tosengi malako oyo elandi mpo na kosalela bituluku ya ba boutons mpe ba barres ya bisaleli:

  • Salelá ntango nyonso eleman moko na etuluku ya bouton moko, <a>to <button>.
  • Kosangisa te ba boutons ya ba couleurs différentes na groupe moko ya ba boutons.
  • Salelá bilembo longola to na esika ya makomi, kasi salá makasi otya alt mpe makomi ya motó ya likambo soki esengeli.

Ba groupes ya Bouton oyo etali yango na ba dropdowns (tala na se) esengeli kobengama separatement mpe kozala toujours na caret ya dropdown pona kolakisa comportement oyo ekanamaki.

Ndakisa ya liboso

Tala ndenge HTML elukaka groupe ya ba boutons standard oyo etongami na ba boutons ya tag ya ancre:

  1. <div kelasi = "btn-etuluku" > 
  2.   < kelasi ya bouton = "btn" > 1 </bouton> 
  3.   <bouton classe = "btn" > 2 </bouton> 
  4.   < kelasi ya bouton = "btn" > 3 </bouton> 
  5. </div>

Ndakisa ya barre ya bisaleli

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>

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.

Bozua javascript »

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.

Ba menu ya kokita ya ba boutons Etongami na bituluku ya ba boutons mpo na kopesa ba menu ya contexte

Ba boutons oyo ezali kokita

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.

Ndakisa ya kosala bilembo

Ndenge moko na groupe ya ba boutons, marquage na biso esalela marquement ya bouton ya mbala na mbala, kasi na mwa ba additions mpo na ko refiner style mpe ko soutenir plugin jQuery ya déroulant ya Bootstrap.

  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 dropdowns esalaka na taille nionso. bonene ya bouton na yo na .btn-large, .btn-small, to .btn-mini.

Esengaka 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

Botali ya mozindo mpe bandakisa

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.

Ba taille

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

  1. <div kelasi = "btn-etuluku" > 
  2.   ...
  3.   <ul class = "menu ya kokita ya kobenda-na loboko ya mobali" > 
  4.     <!-- ba liens ya menu oyo ezali kokita -->
  5.   </ul>
  6. </div>

Ndakisa ya kosala bilembo

To panza na ba déroulants ya bouton normal pona kopesa action ya deuxième bouton oyo ezo fonctionner lokola déclencheur ya déroulant separate.

  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 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 ekende 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 Ba options mibale pona ko paging na kati ya contenus

Pagination ya ba pages multicon

Ntango nini osengeli kosalela

Pagination ultra simpliste et minimalement styled 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.

Ba liens ya page oyo ezali na état

Ba liens ezali personnalisable mpe esalaka na nombre ya ba circonstances na classe oyo ebongi. .disabledmpo na ba liens oyo okoki ko cliquer te mpe .activempo na page ya lelo.

Alignment oyo ekoki kobongwana

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

Bandakisa

Composant ya pagination par défaut ezali flexible mpe esalaka na nombre ya ba variations.

Kosala bilembo

Enveloppé na <div>, pagination ezali kaka <ul>.

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

Pager Pona ba liens ya mbangu ya liboso pe ya sima

Na ntina na pager

Composant pager ezali ensemble ya ba liens pona ba implémentations simples ya pagination na marquage ya lumière et même ba styles ya léger. Ezali malamu mingi mpo na ba sites ya pete lokola ba blogs to ba magazines.

Etat désactivé optionnel

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

Ndakisa ya liboso

Par défaut, pager ezo centrer ba liens.

  1. <ul kelasi = "pager" > 
  2.   <li>
  3.     <a href = "#" > Liboso </a> 
  4.   </li>
  5.   <li>
  6.     <a href = "#" > Na sima </a> 
  7.   </li>
  8. </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>

Ba étiquettes ya kati ya molɔngɔ Ba étiquette mpe ba annoter makomi

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>

Badges Ba indicateurs na ba comptes oyo etangami te

Pene

Badge ezali biloko mikemike mpe ya pɛtɛɛ mpo na kolakisa elembo to motángo ya lolenge moko boye. Bazwamaka mingi na ba clients ya email lokola Mail.app to na ba apps mobiles mpo na ba notifications ya push.

Bakelasi oyo ezali

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>

Ba composants typographiques Motó ya lokasa mpe unité ya elombe mpo na kokabola makambo

Unité ya elombe

Bootstrap epesaka composant moko ya pete, flexible oyo babengaka unité ya héros pona kolakisa ba contenus na site na yo. Esalaka malamu na ba sites ya marketing mpe oyo ezali na makambo mingi.

Kosala bilembo

Envelopper contenus na yo na divlike so:

  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>

Mbote, mokili!

Oyo ezali unité ya elombe ya pete, composant ya style jumbotron ya pete pona kobenga attention supplémentaire na ba contenus to ba informations oyo elakisami.

Yekola makambo mosusu

Motó ya likambo ya lokasa

Coquille 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).

Ndakisa motó ya lokasa Sous-texte mpo na motó ya likambo

  1. <div class = "motó ya lokasa" > 
  2.   <h1> Ndakisa ya motó ya lokasa </h1>
  3. </div>

Ba miniatures Grilles ya bilili, ba vidéos, makomi, mpe mingi mosusu

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.

  • 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

  • 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 mike esalela bakelasi ya système ya grille oyo ezali —lokola .span2to .span3—mpo na kokamba bonene ya bililingi ya mike.

Ba marquage yango

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 = "span3" > 
  3.     <a href = "#" classe = "elilingi ya moke" >  
  4.       <img src = "Esika ya kofanda/260x180" 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 = "span3" > 
  3.     <div class = "elilingi ya moke" > 
  4.       <img src = "Esika ya kofanda/260x180" alt = "" >  
  5.       <h5> Etiketi ya elilingi ya moke </h5>
  6.       <p> Liloba ya moke kaka awa... </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.

Alerts Styles mpo na succès, likebisi, mpe ba messages ya erreur

Ba défauts ya pete

Classe ya base oyo ekomami lisusu

Na Bootstrap 2, tosili ko simplifier classe ya base: .alertna esika ya .alert-message. Tokitisi mpe bilembo ya moke oyo esengeli —te <p>esengeli na ndenge ya libela, kaka oyo ya libándá <div>.

Message ya alerte moko

Mpo na composant oyo eumelaka mingi na code moke, tolongoli lolenge ya kokesana mpo na ba alertes ya bloc, ba messages oyo eyaka na remplissage mingi mpe typiquement texte mingi. Kelasi yango mpe ebongwanaki mpe ekómi .alert-block.

Ekendeke malamu na javascript

Bootstrap eza na plugin ya jQuery ya malamu oyo esimbaka ba messages ya alerte, kosala que ko rejeter yango noki pe facile.

Bozwa plugin yango »

Ndakisa ya makebisi

Envelopper message na yo na icône ya fermeture optionnelle na div na classe simple.

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

Mitó likoló! Ba appareils iOS esengaka an href="#"pona ko rejeter ba alertes. Sala makasi otia yango na attribut ya ba données pona ba icônes ya anchor close. 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.

Bobakisi na pete message ya alerte standard na ba classes mibale ya option: .alert-blockpona ba contrôles ya remplissage pe ya texte mingi pe .alert-headingpona motó ya likambo oyo ekokani.

Likebisi!

Meilleur vérifier yo self, ozali komonana malamu mingi 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 = "bokebisi-bokebisi" > 
  2.   <a class = "kokanga" data-dismiss = "kebisi" href = "#" > × </a>   
  3.   <h4 class = "motó ya likambo ya likebisi" > Likebisi! </h4> 
  4.   Meilleur vérifier yo self, ozali te...
  5. </div>

Ba alternatives ya contexte Bakisa ba classes ya option 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>

Barres ya progrès Mpo na ko charger, ko redirectionner, to état ya action

Bandakisa mpe bilembo

Ya ntina

Barre ya progression par défaut na gradient vertical.

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

Ezali na bansinga

Esalelaka gradient mpo na kosala effet rayé (IE te).

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

Ezali na bomoi

Azuaka exemple rayé pe a animer yango (IE te).

  1. <div class = "bokende liboso-striped." 
  2.      ezali kosala" >
  3.   <div kelasi = "barre". 
  4.        style = " bonene : 40 %; " ></div> 
  5. </div>

Options mpe lisungi ya navigateur

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.

Barres à rayures

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

Ezaleli

Ba barres ya progrès esalelaka ba transitions CSS3, yango wana soki o ajuster dynamiquement largeur via javascript, eko changer taille sans problème.

Soki osaleli .activekelasi, ba .progress-stripedbarres na yo ya progrès eko animer ba rayures gauche à droite.

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.

Opera na IE esimbaka ba animations te na tango oyo.

Miscellaneous Ba composants ya utilité ya pete

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>

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 ya iOS esengaka href="#" pona ba événements ya clic soki olingi kosalela anchor.

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