Moto na moto to oyo esangisi yango

Ba plugins ekoki kozala na kati moko moko (atako misusu esengelaki na ba dépendances), to nionso na mbala moko. bootstrap.js mpe bootstrap.min.js nyonso mibale ezali na ba plugins nyonso na fichier moko.

Ba attributs ya ba données

Okoki kosalela ba plugins nionso ya Bootstrap kaka na nzela ya API ya marquage sans kokoma ata ligne moko ya JavaScript. Oyo ezali API ya classe ya liboso ya Bootstrap mpe esengeli kozala considération na yo ya liboso tango ozali kosalela plugin.

Yango elobami, na makambo mosusu ekoki kozala malamu kokanga fonctionnalité oyo. Yango wana, tozali mpe kopesa makoki ya kokanga API ya attribut ya ba données na ko délinger ba événements nionso na body namespaced na `'data-api'`. Oyo ezali komonana boye:

$ ( 'nzoto' ). off ( '.api ya ba données' ) .

Na lolenge mosusu, mpo na ko cibler plugin moko ya sikisiki, kotia kaka kombo ya plugin lokola esika ya nkombo elongo na esika ya nkombo ya data-api lokola oyo:

$ ( 'nzoto' ). off ( '.alert.data-api' ) Ezali ndenge moko na ba .

API ya programme

Tondimi mpe ete osengeli kozala na likoki ya kosalela ba plugins nyonso ya Bootstrap kaka na nzela ya API ya JavaScript. Ba API nionso ya leta ezali ba méthodes moko, oyo ekoki kozala na chaîne, mpe ezongisaka bosangisi oyo esalemaki na yango.

$ ( ".btn.likama" ). bouton ( "kobongola" ). addClass ( "mafuta" ) .

Ba méthodes nionso esengeli kondima objet ya ba options optionnelles, chaîne oyo ezo cibler méthode moko boye, to eloko moko te (oyo ebandisaka plugin na comportement par défaut):

$ ( "#Modal na ngai" ). modal () // ebandisami na ba défauts                       
$ ( "#Modal na ngai" ). modal ({ clavier : lokuta }) // ebandisami na clavier te     
$ ( "#Modal na ngai" ). modal ( 'lakisa' ) // ebandisaka mpe ebengaka kolakisa mbala moko                

Plugin moko na moko e exposer pe constructeur na yango brut na propriété `Constructeur`: $.fn.popover.Constructor. Soki olingi kozwa instance ya plugin moko boye, zwa yango mbala moko na élément moko: $('[rel=popover]').data('popover').

Matata ezali te

Tango mosusu esengeli kosalela ba plugins ya Bootstrap na ba cadres mosusu ya UI. Na makambo oyo, bokutani ya esika ya nkombo ekoki kobima ntango mosusu. Soki likambo yango esalemi, okoki kobenga .noConflictplugin oyo olingi kozongisa motuya na yango.

var Bouton ya bootstrap = $ . fn . bouton . noConflict () // zongisa $.fn.button na motuya oyo bapesaki liboso 
$ . fn . bootstrapBtn = Bouton ya bootstrap             // pesa $().bootstrapBtn fonctionnalité ya bootstrap

Makambo oyo esalemaki

Bootstrap epesaka ba événements personnalisés mpo na mingi ya ba actions unique ya plugin. En général, oyo eyaka na forme ya infinitif na ya participe passé - esika infinitif (ex. show) e déclenché na ebandeli ya événement, pe forme na yango ya participle ya kala (ex. shown) e déclenché na complétion ya action.

Ba événements nionso ya infinitif epesaka fonctionnalité ya preventDefault. Yango epesaka makoki ya kopekisa exécution ya action moko avant ebanda.

$ ( '#Modal na ngai' ). na ( 'lakisa' , mosala ( e ) {   
    soki (! ba données ) ezongisa e . preventDefault () // epekisaka modal kolakisa   
}) .

Na ntina na mbongwana

Mpo na ba effets ya transition ya pete, kotia bootstrap-transition.js mbala moko pembeni ya ba fichiers JS misusu. Soki ozali kosalela bootstrap.js oyo esangisami (to oyo ekómi moke) , ezali na ntina te ya kotya oyo —ezali deja wana.

Salelá ba cas

Mwa bandakisa ya plugin ya mbongwana:

• Kokita to kokita na ba modal
• Kosilisa ba onglets
• Kosila ba alertes
• Ba panneaux ya carrousel oyo ezali kogumbama

Bandakisa

Ba modales ezali rationalisé, kasi flexible, ba prompts ya dialogue na fonctionnalité minimum oyo esengeli mpe ba défauts intelligents.

Ndakisa ya statique

Modal oyo esalemi na motó, nzoto, mpe ensemble ya misala na nse ya lokasa.

<div class = "bombami ya modal kosila" > 
  <div class = "motó ya-modal" > 
    < lolenge ya bouton = "bouton" classe = "kokanga" data-dismiss = "modal" aria-hidden = "solo" > × </bouton>    
    <h3> Motó ya likambo ya modɛlɛ </h3>
  </div>
  <div classe = "nzoto-modale" > 
    <p> Nzoto moko ya malamu... </p>
  </div>
  <div class = "modali-moda ya nse ya lokasa" > 
    <a href = "#" kelasi = "btn" > Bokanga </a>  
    <a href = "#" class = "btn btn-primary" > Bomba mbongwana </a>  
  </div>
</div>

Démonstration en direct

Toggle modal moko na nzela ya JavaScript na kofinaka bouton oyo ezali awa na nse. Ekokita mpe ekosila na kati longwa na likoló ya lokasa.

<!-- Bouton ya ko déclencher modal -->
<a href = "#myModal" role = "bouton" classe = "btn" data-toggle = "modal" > Bobandi modal ya démonstration </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal bomba fade" tabindex = "-1" rôle = "dialogue" aria-labelledby = "myModalLabel" aria-bombami = "solo" >      
  <div class = "motó ya-modal" > 
    < lolenge ya bouton = "bouton" classe = "kokanga" data-dismiss = "modal" aria-hidden = "solo" > × </bouton>    
    <h3 id = "myModalLabel" > Motó ya likambo ya modɛlɛ </h3> 
  </div>
  <div classe = "nzoto-modale" > 
    <p> Nzoto moko ya malamu... </p>
  </div>
  <div class = "modali-moda ya nse ya lokasa" > 
    <bouton classe = "btn" data-dismiss = "modal" aria-hidden = "solo" > Kanga </bouton>   
    <button class = "btn btn-primary" > Bomba mbongwana </button> 
  </div>
</div>

Kosalela yango

Na nzela ya ba attributs ya ba données

Activer un modal sans kokoma JavaScript. Set data-toggle="modal"na élément ya contrôleur, lokola bouton, elongo na data-target="#foo"to href="#foo"mpo na ko cibler modal spécifique mpo na ko toggler.

< lolenge ya bouton = "bouton" data-toggle = "modal" data-target = "#myModal" > Bobandi ya modal </button>   

Na nzela ya JavaScript

Benga modal na id myModalna ligne moko ya JavaScript:

$ ( '#Modal na ngai' ). modal ( ba options ) .

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Ba méthodes ya kosala

.modal(ba options) .

Active contenus na yo lokola modal. Andimi ba options moko ya option object.

$ ( '#Modal na ngai' ). modal ({
  clavier : lokuta 
}) .

.modal('kobongola')

Manuellement ebalukaka modal moko.

$ ( '#Modal na ngai' ). modal ( 'kobongola' ) .

.modal('lakisa') .

Manuellement efungolaka modal moko.

$ ( '#Modal na ngai' ). modal ( 'lakisa' ) .

.modal('bomba') .

Manuellement ebombaka modal moko.

$ ( '#Modal na ngai' ). modal ( 'bomba' ) .

Makambo oyo esalemaki

Classe modal ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité modal.

$ ( '#Modal na ngai' ). na ( 'ebombami' , mosala () {   
  // sala eloko moko...
}) .

Bandakisa

Bakisa ba menu ya kokita na pene na eloko nyonso na plugin oyo ya pete, bakisa mpe navbar, ba onglets, mpe ba pilili.

Na kati ya navbar moko

Na kati ya ba onglets

Kosalela yango

Na nzela ya ba attributs ya ba données

Bakisa data-toggle="dropdown"na lien to na bouton mpo na kobongola esika oyo ezali kokita.

<div class = "esika ya kokita" > 
  <a class = "kobanda-kokita" data-toggle = "kokita" href = "#" > Déclencheur ya kokita </a>   
  <ul class = "menu ya kokita" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Mpo na kobatela ba URL ndenge moko, salelá data-targetattribut na esika ya href="#".

<div class = "esika ya kokita" > 
  <a class = "kobanda-kobanda-kobanda" id = "dLabel" role = "bouton" kobongola-ba-donnée = "kobanda-kobalusama" cible-ba-donnée = "#" href = "/page.html" >      
    Kokita ya nse
    <b kelasi = "caret" ></b> 
  </a>
  <ul class = "menu ya kokita" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Na nzela ya JavaScript

Benga ba dropdowns na nzela ya JavaScript:

$ ( '.kokita-kobalusama' ). oyo ezali kokita () .

Makambo oyo okoki kopona

Moko te

Ba méthodes ya kosala

$().dropdown('kobongola')

Api programmatique mpo na kobalusa ba menu mpo na navbar to navigation tabbed oyo epesami.

Ndakisa na navbar

Plugin ScrollSpy ezali mpo na kosala mikolo oyo automatiquement ba cibles nav na kotalela position ya défilement. Défiler na esika oyo ezali na se ya navbar mpe tala mbongwana ya kelasi oyo ezali kosala. Ba sous-éléments oyo ezali kokita ekozala mpe na elembo.

Kosalela yango

Na nzela ya ba attributs ya ba données

Pona kobakisa facilement comportement scrollspy na navigation na yo ya topbar, bakisa kaka data-spy="scroll"na élément oyo olingi o espionner (mingi mingi oyo ekozala nzoto) pe data-target=".navbar"pona nav nini okosalela. Okolinga kosalela scrollspy na .navcomposant moko.

<nzoto data-spy = "kosala défilement" data-cible = ".navbar" > ... </body>  

Na nzela ya JavaScript

Benga scrollspy na nzela ya JavaScript:

$ ( '#navbar' ). scrollspy () .

Ba méthodes ya kosala

.scrollspy('kozongisa sika')

Ntango ozali kosalela scrollspy elongo na kobakisa to kolongola biloko na DOM, ekosɛnga obenga lolenge ya kozongisa sika lokola boye:

$ ( '[espion-données="kosala défilement"]' ). moko na moko ( mosala () { .  
  var $spy = $ ( oyo ). scrollspy ( 'kozongisa sika' ) .
});

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-offset="".

Makambo oyo esalemaki

Ndakisa ya ba onglets

Bakisa fonctionnalité ya tab ya mbangu, dynamique mpo na transition na nzela ya ba panneaux ya contenus local, ata na nzela ya ba menus déroulants.

Kosalela yango

Activer ba onglets ya ba tabbables na nzela ya JavaScript (onglet moko na moko esengeli ko activer yango moko):

$ ( '#Tab na ngai a' ). finá ( mosala ( e ) { .  
  e . kopekisaDefault ();
  $ ( oyo ). tab ( 'lakisa' );
}) .

Okoki ko activer ba onglets moko moko na ba façons ebele:

$ ( '#Tab na ngai a[href="#profil"]' ). tab ( 'lakisa' ); // Pona tab na kombo 
$ ( '#Tab na ngai a:ya liboso' ). tab ( 'lakisa' ); // Pona tab ya liboso 
$ ( '#Tab na ngai a:ya nsuka' ). tab ( 'lakisa' ); // Pona tab ya suka 
$ ( '#Tab na ngai li:eq(2) a' ). tab ( 'lakisa' ); // Pona tab ya misato (0-indexé) 

Kosala bilembo

Okoki ko activer navigation ya onglet to ya pilili sans kokoma JavaScript moko te na ko préciser kaka data-toggle="tab"to data-toggle="pill"na élément moko. Kobakisa ba classes mpe na onglet navekosalela styling ya onglet Bootstrap.nav-tabsul

<ul classe = "nav nav-tabs" > 
  <li><a href = "#ndako" data-toggle = "tab" > Ndako </a></li>  
  <li><a href = "#profil" data-toggle = "onglet" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Ba sango </a></li>  
  <li><a href = "#bobongisi" data-toggle = "tab" > Bobongisi </a></li>  
</ul>

Ba méthodes ya kosala

$().tab

Ezali ko activer élément ya onglet na conteneur ya contenus. Onglet esengeli kozala na soit a soit data-targetun hrefciblant node ya conteneur na DOM.

<ul classe = "nav nav-tabs" id = "Onglet na ngai" >  
  <li class = "active" ><a href = "#ndako" > Ndako </a></li>  
  <li><a href = "#profil" > Profil </a></li> 
  <li><a href = "#messages" > Ba messages </a></li> 
  <li><a href = "#bobongisi" > Bobongisi </a></li> 
</ul>
 
<div class = "makambo ya tab" > 
  <div class = "tab-pane ezali kosala" id = "ndako" > ... </div>  
  <div class = "tab-pane" id = "profil" > ... </div>  
  <div class = "tab-pane" id = "ba messages" > ... </div>  
  <div class = "tab-pane" id = "ba paramètres" > ... </div>  
</div>
 
<script>
  $ ( mosala () { .  
    $ ( '#Tab na ngai a:ya nsuka' ). tab ( 'lakisa' );
  }) .
</script>

Makambo oyo esalemaki

$ ( 'a[kobongola-ba-donnée="tab"]' ). na ( 'elakisami' , mosala ( e ) {   
  e . cible // onglet activé
  e . relatedTarget // onglet ya kala
}) .

Bandakisa

Inspiré na plugin ya malamu mpenza ya jQuery.tipsy oyo ekomami na Jason Frame; Tooltips ezali version ya sika, oyo etie motema na bilili te, esalela CSS3 mpo na ba animations, mpe ba data-attributs mpo na kobomba titre ya esika.

Mpo na bantina ya bosali, tooltip mpe popover data-apis ezali opt in, elingi koloba osengeli ko initialiser yango yo moko .

Botia maboko na ba liens oyo ezali awa na se mpo na komona ba toli ya bisaleli:

Ba direction minei

Ba toli ya bisaleli na bituluku ya bokoti

Ntango ozali kosalela ba toli ya bisaleli mpe ba popovers na bituluku ya bokɔti ya Bootstrap, ekosɛnga otya containeroption (oyo ekomami awa na nse) mpo na koboya ba effets secondaires oyo olingi te.

Kosalela yango

Déclenchez tooltip na nzela ya JavaScript:

$ ( '#ndakisa' ). tooltip ( ba options ) .

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-animation="".

Kosala bilembo

<a href = "#" data-toggle = "toli ya bisaleli" title = "toli ya esaleli ya yambo" > tombola likolo na ngai </a>   

Ba méthodes ya kosala

$().tooltip(ba options) .

Ezali kokangisa mosaleli ya tooltip na liboke ya biloko.

.tooltip('lakisa')

Ezali kobimisa tooltip ya élément moko.

$ ( '#elemento' ). tooltip ( 'lakisa' ) .

.tooltip('bomba') .

Ebombaka toli ya bisaleli ya eleman moko.

$ ( '#elemento' ). tooltip ( 'bomba' ) .

.tooltip('kobongola')

Ezali kobongola toggle ya tooltip ya élément moko.

$ ( '#elemento' ). tooltip ( 'kobongola' ) .

.tooltip('kobebisa') .

Ebombaka mpe ebebisaka tooltip ya élément moko.

$ ( '#elemento' ). tooltip ( 'kobebisa' ) .

Bandakisa

Bakisa ba superpositions ya mike ya contenus, lokola oyo ezali na iPad, na élément nionso pona ko loger ba informations secondaires. Botia loboko likolo ya bouton mpo na ko déclencher popover. Esengaka Tooltip ezala na kati.

Popover ya statique

Ba options minei ezali: likolo, droite, na se, mpe gauche aligné.

Marquage moko te elakisami lokola ba popovers esalemi uta na JavaScript mpe makambo oyo ezali na kati ya dataattribut moko.

Démonstration en direct

Ba direction minei

Kosalela yango

Bofungola ba popovers na nzela ya JavaScript:

$ ( '#ndakisa' ). popover ( ba options ) .

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-animation="".

Kosala bilembo

Mpo na bantina ya mosala, Tooltip mpe Popover data-apis ezali opt in. Soki olingi kosalela yango, lakisa kaka option ya moponi.

Ba méthodes ya kosala

$().popover(ba options) .

Initialise ba popovers pona collection ya élément.

.popover('lakisa') .

Emonisaka popover moko ya ba éléments.

$ ( '#elemento' ). popover ( 'elakisaka' ) .

.popover('bomba') .

Ebombaka popover moko ya ba éléments.

$ ( '#elemento' ). popover ( 'bomba' ) .

.popover('kobongola')

Toggles an ba éléments popover.

$ ( '#elemento' ). popover ( 'kobongola' ) .

.popover('kobebisa') .

Ebombaka mpe ebebisaka popover ya élément moko.

$ ( '#elemento' ). popover ( 'kobebisa' ) .

Ndakisa ya makebisi

Bakisa fonctionnalité ya démission na ba messages nionso ya alerte na plugin oyo.

Kosalela yango

Bofungola bolongolami ya likebisi na nzela ya JavaScript:

$ ( ".kebisi" ). kokebisa () .

Kosala bilembo

Bakisa kaka data-dismiss="alert"na bouton na yo ya kokanga mpo na kopesa automatiquement fonctionnalité ya kokanga alerte.

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

Ba méthodes ya kosala

$().alert() .

Enveloppe ba alertes nionso na fonctionnalité ya proche. Pona kozala na ba alertes na yo animation libanda tango ekangami, sala que bazala na classe ya .fadepe .indéjà appliqué na bango.

.alert('kokanga')

Ekangaka alerte moko.

$ ( ".kebisi" ). alerte ( 'kokanga' ) .

Makambo oyo esalemaki

Classe ya alerte ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité ya alerte.

$ ( '#kebisi-na ngai' ). bind ( 'ekangama' , mosala () { .   
  // sala eloko moko...
}) .

Ndakisa ya kosalela

Sala mingi na ba boutons. Bouton ya contrôle ezo loba to kosala ba groupes ya ba boutons pona ba composants ebele lokola ba barres d'outils.

Kozala na Leta

Bakisa data-loading-text="Loading..."mpo na kosalela état ya chargement na bouton moko.

< lolenge ya bouton = "bouton" classe = "btn btn-primary" data-loading-text = "Ezali kokɔtisa..." > Etat ya kokɔtisa </button>   

Toggle moko

Bakisa data-toggle="button"mpo na ko activer toggling na bouton moko.

< lolenge ya bouton = "bouton" classe = "btn btn-primaire" data-toggle = "bouton" > Botomboli moko </bouton>   

Boîte de vérification

Bakisa data-toggle="buttons-checkbox"mpo na kobongola lolenge ya boîte de coche na btn-group.

<div class = "btn-groupe" ba données-toggle = "boîte de contrôle-ba boutons" >  
  < lolenge ya bouton = "bouton" classe = "btn btn-primaire" > Na loboko ya mwasi </bouton>  
  < lolenge ya bouton = "bouton" classe = "btn btn-primaire" > Kati </bouton>  
  < lolenge ya bouton = "bouton" classe = "btn btn-primaire" > Bouton ya mobali </bouton>  
</div>

Radio

Bakisa data-toggle="buttons-radio"mpo na kosala ba toggling ya style ya radio na btn-group.

< kelasi ya div =  "btn-groupe" ba données-toggle = "ba boutons-radio" > 
  < lolenge ya bouton = "bouton".  classe = "btn btn-primaire" > Na loboko ya mwasi </bouton>
  < lolenge ya bouton = "bouton".  classe = "btn btn-primaire" > Kati </bouton>
  < lolenge ya bouton = "bouton".  classe = "btn btn-primaire" > Bouton ya mobali </bouton>
</div>

Kosalela yango

Bofungola ba boutons na nzela ya JavaScript:

$ ( '.nav-ba-tabs' ). bouton () .

Kosala bilembo

Ba attributs ya ba données ezali intégrale na plugin ya bouton. Tala code ya ndakisa oyo ezali awa na nse mpo na mitindo ndenge na ndenge ya bilembo.

Makambo oyo okoki kopona

Moko te

Ba méthodes ya kosala

$().bouton('kobongola')

Toggles état ya kopusama. Epesaka bouton apparence que esili ko activer.

< lolenge ya bouton = "bouton" classe = "btn" data-toggle = "bouton" > ... </bouton>    

$().button('kozwa')

Ebongisi état ya bouton na chargement - e désactiver bouton mpe e swap texte na chargement ya texte. Esengeli kolimbola makomi na eleman ya bouton na kosalelaka attribut ya ba données data-loading-text.

< lolenge ya bouton = "bouton" classe = "btn" data-loading-text = "kozwa biloko..." > ... </button>    

$().button('kozongisa na esika na yango')

Ezongisaka état ya bouton - ebongoli makomi na makomi ya ebandeli.

$().bouton(molongo) .

Réinitialiser état ya bouton - echanger texte na état nionso ya texte oyo e définir na ba données.

< lolenge ya bouton = "bouton" classe = "btn" data-complete-text = "esili!" > ... </bouton>    
<script>
  $ ( '.btn' ) Ezali ndenge moko. bouton ( 'kosilisa' ) .
</script>

Pene

Bozua ba styles ya base na soutien flexible pona ba composants collapsibles lokola ba accordions na navigation.

* Esengi ete plugin ya Transitions ezala na kati.

Ndakisa ya accordéon

Na kosalelaka plugin ya collapse, totongaki widget ya style ya accordéon ya pete:

<div classe = "accordion" id = "accordion2" >  
  <div class = "etuluku-ya-accordion" > 
    <div class = "motó ya likambo ya accordion" > 
      <a class = "accordion-toggle" data-toggle = "kokwea" moboti-ya-donnée = "#accordion2" href = "#kokweaMoko" >    
        Eloko ya Lisanga oyo ekoki kokangama #1
      </a>
    </div>
    <div id = "collapseOne" class = "kokwea ya nzoto-accordion na" >  
      <div class = "accordion-ya kati" > 
        Anim pariatur cliché ya...
      </div>
    </div>
  </div>
  <div class = "etuluku-ya-accordion" > 
    <div class = "motó ya likambo ya accordion" > 
      <a class = "accordion-toggle" data-toggle = "kokwea" moboti-ya-donnée = "#accordion2" href = "#kokweaMibale" >    
        Eloko ya Lisanga oyo ekoki kokangama #2
      </a>
    </div>
    <div id = "kokweaMibale" classe = "kokwea ya nzoto-accordion" >  
      <div class = "accordion-ya kati" > 
        Anim pariatur cliché ya...
      </div>
    </div>
  </div>
</div>
...

Okoki pe kosalela plugin sans marquage ya accordéon. Sala bouton toggle expansion na collapse ya élément mosusu.

< lolenge ya bouton = "bouton" classe = "btn btn-danger" data-toggle = "kokwea" data-cible = "#demo" >    
  simple oyo ekoki kokangama
</bouton>
 
<div id = "demo" classe = "kokwea na" > ... </div>  

Kosalela yango

Na nzela ya ba attributs ya ba données

Bakisa kaka data-toggle="collapse"na data-targetélément moko na pona ko assigner automatiquement contrôle ya élément collapsible. Attribut data-targetendimi selecteur ya css mpo na kosalela collapse na yango. Bozala sûr ya kobakisa classe collapsena élément collapsible. Soki olingi ete efungwama na ndenge ya liboso, bakisa kelasi ya kobakisain .

Mpo na kobakisa boyangeli ya etuluku lokola accordéon na contrôle collapsible, bakisa attribut ya ba données data-parent="#selector". Tala démonstration po omona likambo oyo na action.

Na nzela ya JavaScript

Activer manuellement na:

$ ( ".kokwea" ). kokwea () .

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-parent="".

Ba méthodes ya kosala

.collapse(ba options) .

Active contenus na yo lokola élément collapsible. Andimi ba options moko ya option object.

$ ( '#na ngaiEkoki kokangama' ). kokwea ({
  toggle : lokuta 
}) .

.collapse('kobongola')

Ezali kobongola eloko oyo ekoki kokangama mpo na kolakisa to kobombama.

.collapse('lakisa') .

Ezali kolakisa eleman moko oyo ekoki kokangama.

.collapse('bomba') .

Ebombaka eloko moko oyo ekoki kokangama.

Makambo oyo esalemaki

Classe ya collapse ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité ya collapse.

$ ( '#na ngaiEkoki kokangama' ). na ( 'ebombami' , mosala () {   
  // sala eloko moko...
}) .

Ndakisa ya carousel

Diaporama oyo ezali awa na nse ezali kolakisa plugin mpe composante moko ya monene mpo na kosala cycle na nzela ya ba éléments lokola carrousel.

Etiquette ya liboso 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.

Etiquette ya mibale 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.

Etiquette ya misato 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.

‹ . › Ezali ndenge nini?

<div id = "Carousel na ngai" classe = "diapositive ya carrousel" >  
  <ol classe = "ba indicateurs-carousel" > 
    <li data-target = "#myCarousel" data-slide-to = "0" kelasi = "mosala" ></li>   
    <li data-target = "#Carousel na ngai" diapositive-ya-ba-donnée-na = "1" ></li>  
    <li data-target = "#Carousel na ngai" diapositive-ya-ba-donnée-na = "2" ></li>  
  </ol>
  <!-- Biloko ya carousel -->
  <div class = "carousel-ya kati" > 
    <div class = "eloko ya mosala" > ... </div> 
    <div kelasi = "eloko" > ... </div> 
    <div kelasi = "eloko" > ... </div> 
  </div>
  <!-- Carrousel nav -->
  <a class = "carousel-contrôle gauche" href = "#carousel na ngai" data-slide = "liboso" > ‹ </a>   
  <a class = "droit ya contrôle-carousel" href = "#Carousel na ngai" data-slide = "oyo elandi" > › </a>   
</div>

Kosalela yango

Na nzela ya ba attributs ya ba données

Salelá ba attributs ya ba données mpo na ko contrôler facilement position ya carrousel. data-slideendimi maloba ya ntina prevto next, oyo ebongoli esika ya diapositive na kotalela esika na yango ya lelo. Na lolenge mosusu, salelá data-slide-tompo na koleka index ya diapositive brut na carrousel data-slide-to="2", oyo jump's position ya diapositive na index moko boye kobanda na0 .

Na nzela ya JavaScript

Benga carousel na maboko na:

$ ( '.carousel' ). carrousel () .

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScriptz. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-interval="".

Ba méthodes ya kosala

.carousel(ba options) .

Initialiser carrousel na options optionnelles objectmpe abandi ko cycler na nzela ya biloko.

$ ( '.carousel' ). carrousel ({
  intervalle : 2000. Ezali ndenge nini? 
}) .

.carousel('cycle') .

Ezali kosala cycle na kati ya biloko ya carrousel kobanda na lobɔkɔ ya mwasi tii na lobɔkɔ ya mobali.

.carousel('kopema') .

Epekisaka carrousel ekende na velo na nzela ya biloko.

.carousel(motango) .

Ezali kosala cycle ya carousel na cadre moko boye (0 basé, ndenge moko na array).

.carousel('liboso') .

Ba cycles na eloko oyo eleki.

.carousel('oyo elandi')

Ezali kosala ba cycles tii na eloko oyo elandi.

Makambo oyo esalemaki

Classe ya carrousel ya Bootstrap e exposer deux événements pona ko crochet na fonctionnalité ya carrousel.

Ndakisa

Plugin ya moboko, oyo ebakisami na pete mpo na kosala nokinoki ba typeaheads ya elegan na bokoti ya makomi ya formulaire nyonso.

< lolenge ya bokoti = "mokomi" data-provide = "typeahead" >  

Okolinga kotya autocomplete="off"mpo na kopekisa ba menu ya navigateur ya liboso ebima na likoló ya esika oyo bakomi Bootstrap typeahead.

Kosalela yango

Na nzela ya ba attributs ya ba données

Bakisa ba attributs ya ba données pona ko enregistrer élément na fonctionnalité typeahead ndenge elakisami na exemple oyo ezali likolo.

Na nzela ya JavaScript

Benga typeahead na maboko na:

$ ( '.kokoma liboso' ). kokoma liboso () .

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-source="".

Ba méthodes ya kosala

.typeahead(ba options) .

Ebandisaka entrée na typeahead.

Ndakisa

Sous-navigation oyo ezali na gauche ezali démonstration en direct ya plugin ya affix.

Kosalela yango

Na nzela ya ba attributs ya ba données

Pona kobakisa facilement comportement ya affix na élément nionso, bakisa kaka data-spy="affix"na élément oyo olingi o espionner. Na nsima, salelá ba offsets mpo na kolimbola ntango nini osengeli kofungola mpe kokanga pinning ya élément moko.

<div data-spy = "affixer" ba données-offset-likolo = "200" > ... </div>  

Na nzela ya JavaScript

Benga plugin ya affix na nzela ya JavaScript:

$ ( '#navbar' ). affix na yango () .

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-offset-top="200".