Banaka edo konpilatua

Pluginak banan-banan sar daitezke (nahiz eta batzuk beharrezkoak diren mendekotasunak izan), edo aldi berean. Bootstrap.js eta bootstrap.min.js - ek plugin guztiak fitxategi bakarrean dituzte.

Datu-atributuak

Bootstrap plugin guztiak erabil ditzakezu markatze APIaren bidez soilik JavaScript lerro bakar bat idatzi gabe. Hau Bootstrap-en lehen mailako APIa da eta zure lehen kontua izan beharko litzateke plugin bat erabiltzean.

Hori bai, zenbait egoeratan funtzionalitate hori desaktibatzea komenigarria izan daiteke. Hori dela eta, datu-atributuaren APIa desgaitzeko gaitasuna ere eskaintzen dugu "data-api"-rekin tartekatuta dagoen gorputzeko gertaera guztiak deslotuz. Honela dirudi:

$ ( 'gorputza' ). off ( '.data-api' )

Bestela, plugin zehatz bat bideratzeko, gehitu pluginaren izena izen-espazio gisa, datu-api izen-espazioarekin batera honela:

$ ( 'gorputza' ). off ( '.alert.data-api' )

API programatikoa

Gainera, Bootstrap plugin guztiak JavaScript APIaren bidez soilik erabili ahal izango dituzula uste dugu. API publiko guztiak metodo bakarrak eta kateagarriak dira, eta egindako bilduma itzultzen dute.

$ ( ".btn.danger" ). botoia ( " txandakatu " ). addClass ( "koipea" )

Metodo guztiek aukerako aukera-objektu bat onartu beharko lukete, metodo jakin bati zuzendutako kate bat edo ezer ez (portaera lehenetsia duen plugin bat abiarazten duena):

$ ( "#nireModala" ). modala () // lehenespenekin hasieratuta                       
$ ( "#nireModala" ). modala ({ keyboard : false }) // teklaturik gabe hasieratu     
$ ( "#nireModala" ). modala ( 'erakutsi' ) // show hasieratzen eta berehala deitzen du                

Plugin bakoitzak bere eraikitzaile gordina ere erakusten du `Constructor` propietate batean: $.fn.popover.Constructor. Plugin-instantzia jakin bat lortu nahi baduzu, eskuratu zuzenean elementu batetik: $('[rel=popover]').data('popover').

Gatazkarik ez

Batzuetan beharrezkoa da Bootstrap pluginak beste UI esparru batzuekin erabiltzea. Egoera horietan, noizean behin izen-espazioen talkak gerta daitezke. Hori gertatzen bada, .noConflictbalioa berreskuratu nahi duzun pluginera dei dezakezu.

var bootstrapButton = $ . fn . botoia . noConflict () // $.fn.button lehen esleitutako baliora itzultzen du 
$ . fn . bootstrapBtn = bootstrapButton             // eman $().bootstrapBtn bootstrap funtzioa

Gertaerak

Bootstrap-ek gertaera pertsonalizatuak eskaintzen ditu pluginen ekintza berezi gehienetarako. Orokorrean, mugagabea eta iraganeko partizipio formakoak dira, non infinitiboa (adib. show) gertaera baten hasieran abiarazten den eta bere iraganeko partizipioaren forma (adib. shown) ekintza bat amaitzean abiarazten den.

Gertaera infinitibo guztiek preventDefault funtzionaltasuna eskaintzen dute. Horrek ekintza baten exekuzioa hasi baino lehen gelditzeko gaitasuna ematen du.

$ ( '#nireModala' ). on ( 'erakutsi' , funtzioa ( e ) {   
    bada (! datuak ) itzuli e . preventDefault () // modala bistaratzeari uzten dio   
})

Trantsizioei buruz

Trantsizio efektu errazetarako, sartu bootstrap-transition.js behin beste JS fitxategiekin batera. Bootstrap.js konpilatua (edo txikitua) erabiltzen ari bazara , ez dago hau sartu beharrik, dagoeneko hor dago.

Erabilera kasuak

Trantsizio pluginaren adibide batzuk:

• Labaintzea edo lausotzea modaletan
• Fitxak itzaltzen
• Alertak itzaltzea
• Karruselaren panel irristagarriak

Adibideak

Modalak errazak dira, baina malguak, elkarrizketa-abisuak behar diren gutxieneko funtzionaltasunekin eta lehenespen adimendunekin.

Adibide estatikoa

Goiburua, gorputza eta oinean ekintza multzoa dituen errendatutako modal bat.

<div class = "modala ezkutatu desagertzea" > 
  <div class = "goiburu-modala" > 
    <button type = "button" class = "close" data-dismiss = "modala" aria-hidden = "egia" > × </button>    
    <h3> Goiburu modala </h3>
  </div>
  <div class = "gorputz-modala" > 
    <p> Gorputz fin bat... </p>
  </div>
  <div class = "modal-oina" > 
    <a href = "#" class = "btn" > Itxi </a>  
    <a href = "#" class = "btn btn-primary" > Gorde aldaketak </a>  
  </div>
</div>

Zuzeneko demoa

Aldatu modal bat JavaScript bidez, beheko botoian klik eginez. Behera lerratu eta orriaren goialdetik lausotuko da.

<!-- Modala abiarazteko botoia -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Abiarazi demo modala </a>    
 
<!-- Modala -->
<div id = "myModal" class = "modala ezkutatu desagertzea" tabindex = "-1" role = "elkarrizketa" aria-labelledby = "myModalLabel" aria-hidden = "egia" >      
  <div class = "goiburu-modala" > 
    <button type = "button" class = "close" data-dismiss = "modala" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Goiburu modala </h3> 
  </div>
  <div class = "gorputz-modala" > 
    <p> Gorputz fin bat... </p>
  </div>
  <div class = "modal-oina" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Itxi </button>   
    <button class = "btn btn-primary" > Gorde aldaketak </button> 
  </div>
</div>

Erabilera

Datu-atributuen bidez

Aktibatu modal bat JavaScript idatzi gabe. Ezarri data-toggle="modal"kontrolagailu-elementu batean, botoi batean adibidez, data-target="#foo"edo href="#foo"aktibatzeko modal zehatz bat bideratzeko.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Abiarazi modala </button>   

JavaScript bidez

Deitu id duen modal myModalbat JavaScript lerro bakar batekin:

$ ( '#nireModala' ). modala ( aukerak )

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-backdrop="".

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

Metodoak

.modala(aukerak)

Zure edukia modal gisa aktibatzen du. Aukerako aukerak onartzen ditu object.

$ ( '#nireModala' ). modala ({
  teklatua : faltsua 
})

.modal('toggle')

Modal bat eskuz aldatzen du.

$ ( '#nireModala' ). modala ( 'aldatu' )

.modal('erakutsi')

Eskuz modal bat irekitzen du.

$ ( '#nireModala' ). modala ( 'erakutsi' )

.modal('ezkutatu')

Eskuz ezkutatzen du modal bat.

$ ( '#nireModala' ). modala ( 'ezkutatu' )

Gertaerak

Bootstrap-en klase modalak funtzionalitate modalean konektatzeko gertaera batzuk erakusten ditu.

$ ( '#nireModala' ). on ( 'ezkutatuta' , funtzioa () {   
  // Zerbait egin…
})

Adibideak

Gehitu goitibeherako menuak plugin sinple honekin ia edozertara, nabigazio-barra, fitxak eta pilulak barne.

Nabigazio barra baten barruan

Fitxen barruan

Erabilera

Datu-atributuen bidez

Gehitu data-toggle="dropdown"esteka edo botoi bati goitibeherako aukera aldatzeko.

<div class = "goiburua" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Goitibeherako abiarazlea </a>   
  <ul class = "dropdown-menu" role = "menua" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URLak osorik mantentzeko, erabili data-targetatributua href="#".

<div class = "goiburua" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Goitibehera
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menua" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript bidez

Deitu goitibehetara JavaScript bidez:

$ ( '. dropdown-toggle' ). goitibeherako zerrenda ()

Aukerak

Bat ere ez

Metodoak

$(). dropdown('toggle')

Nabigazio barra edo fitxen nabigazio baterako menuak aldatzeko API programatikoa.

Adibidea nabigazio barran

ScrollSpy plugina nabigazio-helburuak automatikoki eguneratzeko da, korritze-posizioan oinarrituta. Joan nabigazio-barraren azpiko eremua eta ikusi klase aktiboaren aldaketa. Goitibeherako azpielementuak ere nabarmenduko dira.

Erabilera

Datu-atributuen bidez

Scrollspy portaera zure goiko barrako nabigazioan erraz gehitzeko, gehitu data-spy="scroll"espioi nahi duzun elementuari (normalean hau gorputza izango litzateke) eta data-target=".navbar"hautatu zein nabigazio erabili. Scrollspy osagai batekin erabili nahi duzu .nav.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

JavaScript bidez

Deitu scrollspy JavaScript bidez:

$ ( '#navbar' ). scrollspy ()

Metodoak

.scrollspy('freskatu')

Scrollspy DOMetik elementuak gehitzearekin edo kentzearekin batera erabiltzean, freskatzeko metodora deitu beharko duzu honela:

$ ( '[data-spy="scroll"]' ). bakoitza ( funtzioa () {  
  var $spy = $ ( hau ). scrollspy ( 'freskatu' )
});

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-offset="".

Gertaerak

Adibide fitxak

Gehitu fitxaren funtzionalitate azkarra eta dinamikoa tokiko edukiaren paneletatik igarotzeko, baita goitibeherako menuen bidez ere.

Erabilera

Gaitu tabulatzeko fitxak JavaScript bidez (fitxa bakoitza banan-banan aktibatu behar da):

$ ( '#nireTab a' ). egin klik ( funtzioa ( e ) {  
  e . preventDefault ();
  $ ( hau ). fitxa ( 'erakutsi' );
})

Banakako fitxak hainbat modutara aktibatu ditzakezu:

$ ( '#myTab a[href="#profile"]' ). fitxa ( 'erakutsi' ); // Hautatu fitxa izenaren arabera 
$ ( '#nireTab a:lehena' ). fitxa ( 'erakutsi' ); // Hautatu lehen fitxa 
$ ( '#nireTab a:azkena' ). fitxa ( 'erakutsi' ); // Hautatu azken fitxa 
$ ( '#myTab li:eq(2) a' ). fitxa ( 'erakutsi' ); // Hautatu hirugarren fitxa (0-indexatua) 

Markatzea

Fitxa edo pilulen nabigazioa aktiba dezakezu JavaScript idatzi gabe data-toggle="tab"edo data-toggle="pill"elementu batean zehaztuta. naveta nav-tabsklaseak fitxara gehitzeak ulBootstrap fitxaren estiloa aplikatuko du.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Hasiera </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profila </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mezuak </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Ezarpenak </a></li>  
</ul>

Metodoak

$().tab

Fitxa-elementu eta eduki-edukiontzi bat aktibatzen du. Tabulak DOM-eko edukiontzi-nodo bat izan behar data-targetdu href.

<ul class = "nav nav-tabs" id = "nireTab" >  
  <li class = "active" ><a href = "#home" > Hasiera </a></li>  
  <li><a href = "#profile" > Profila </a></li> 
  <li><a href = "#messages" > Mezuak </a></li> 
  <li><a href = "#settings" > Ezarpenak </a></li> 
</ul>
 
<div class = "tab-edukia" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profila" > ... </div>  
  <div class = "tab-pane" id = "mezuak" > ... </div>  
  <div class = "tab-pane" id = "ezarpenak" > ... </div>  
</div>
 
<gidoia>
  $ ( funtzioa () {  
    $ ( '#nireTab a:azkena' ). fitxa ( 'erakutsi' );
  })
</script>

Gertaerak

$ ( 'a[data-toggle="tab"]' ). on ( 'erakutsi' , funtzioa ( e ) {   
  e . xede // fitxa aktibatuta
  e . relatedTarget // aurreko fitxa
})

Adibideak

Jason Frame-k idatzitako jQuery.tipsy plugin bikainean inspiratuta; Tresna-aholkuak bertsio eguneratu bat dira, irudietan oinarritzen ez direnak, CSS3 animazioetarako eta datu-atributuak tokiko izenburuak biltegiratzeko.

Errendimenduaren arrazoiengatik, tresna-informazioa eta popover datu-apiak aukeratzen dira, hau da, zuk zeuk hasieratu behar dituzu .

Pasatu ondoko esteken gainean tresna-aholkuak ikusteko:

Lau norabide

Tresna-aholkuak sarrera-taldeetan

Bootstrap sarrera-taldeekin tresna-aholkuak eta popover-ak erabiltzean, container(behean dokumentatua) aukera ezarri beharko duzu nahi ez diren albo-ondorioak saihesteko.

Erabilera

Aktibatu tresna-informazioa JavaScript bidez:

$ ( '#adibidea' ). tresna-informazioa ( aukerak )

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-animation="".

Markatzea

<a href = "#" data-toggle = "tooltip" title = "lehen tresna-aholkua" > pasatu pasa ezazu nire gainean </a>   

Metodoak

$().tooltip(aukerak)

Elementu bilduma bati tresna-informazio-kudeatzailea eransten dio.

.tooltip('erakutsi')

Elementu baten argibidea erakusten du.

$ ( '#elementua' ). tresna -informazioa ( 'erakutsi' )

.tooltip('ezkutatu')

Elementu baten argibidea ezkutatzen du.

$ ( '#elementua' ). tresna -informazioa ( 'ezkutatu' )

.tooltip('toggle')

Elementu baten tresna-informazioa aktibatzen du.

$ ( '#elementua' ). tresna -informazioa ( 'aldatu' )

.tooltip('suntsitu')

Elementu baten informazioa ezkutatu eta suntsitzen du.

$ ( '#elementua' ). tresna -informazioa ( 'suntsitu' )

Adibideak

Gehitu edukiaren gainjartze txikiak, iPad-en bezalakoak, bigarren mailako informazioa gordetzeko edozein elementuri. Pasatu botoiaren gainean popover-a abiarazteko. Tooltip sartzea eskatzen du.

Popover estatikoa

Lau aukera daude eskuragarri: goiko, eskuineko, beheko eta ezkerreko lerrokatuta.

Ez da agertzen popover-ak JavaScript-etik eta atributu bateko edukitik sortzen diren markaketarik data.

Zuzeneko demoa

Lau norabide

Erabilera

Gaitu popover-ak JavaScript bidez:

$ ( '#adibidea' ). popover ( aukerak )

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-animation="".

Markatzea

Errendimenduaren arrazoiengatik, Tooltip eta Popover datu-apiak aukeratzen dira. Erabili nahi badituzu, zehaztu hautatzaile-aukera bat.

Metodoak

$().popover(aukerak)

Elementu bilduma baterako popover-ak hasieratzen ditu.

.popover('erakutsi')

Elementu popover bat erakusten du.

$ ( '#elementua' ). popover ( 'erakutsi' )

.popover('ezkutatu')

Elementuen popover bat ezkutatzen du.

$ ( '#elementua' ). popover ( 'ezkutatu' )

.popover('toggle')

Elementu-jabea aktibatzen du.

$ ( '#elementua' ). popover ( 'aldatu' )

.popover('suntsitu')

Elementu baten popover-a ezkutatu eta suntsitzen du.

$ ( '#elementua' ). popover ( 'suntsitu' )

Adibide alertak

Gehitu baztertzeko funtzionaltasuna plugin honekin alerta-mezu guztiei.

Erabilera

Gaitu alerta bat baztertzeko JavaScript bidez:

$ ( ".alerta" ). alerta ()

Markatzea

Gehitu data-dismiss="alert"ixteko botoia automatikoki alerta ixteko funtzionaltasuna emateko.

<a class = "close" data-dismiss = "alerta" href = "#" > × </a>   

Metodoak

$().alerta()

Alerta guztiak funtzionaltasun estuarekin biltzen ditu. Itxitakoan alertak animatzeko, ziurtatu .fadeeta .inklasea dagoeneko aplikatuta daukatela.

.alert('itxi')

Alerta bat ixten du.

$ ( ".alerta" ). alerta ( 'itxi' )

Gertaerak

Bootstrap-en alerta-klaseak gertaera batzuk erakusten ditu alerta-funtzionalitatean konektatzeko.

$ ( '#nire-alerta' ). bind ( 'itxia' , funtzioa () {   
  // Zerbait egin…
})

Erabilera adibide

Egin gehiago botoiekin. Kontrolatu botoien egoerak edo sortu botoi-taldeak tresna-barrak bezalako osagai gehiagotarako.

Estatutua

Gehitu data-loading-text="Loading..."botoi batean kargatzeko egoera erabiltzeko.

<button type = "button" class = "btn btn-primary" data-loading-text = "Kargatzen..." > Kargatzen egoera </button>   

Toggle bakarra

Gehitu data-toggle="button"botoi bakarrean txandakatzea aktibatzeko.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Etengailu bakarra </button>   

Kontrol-laukia

Gehitu data-toggle="buttons-checkbox"btn-group-en kontrol-laukiaren estiloa aldatzeko.

<div class = "btn-group" data-toggle = "botoiak-kontrol-laukia" >  
  <button type = "button" class = "btn btn-primary" > Ezkerrean </button>  
  <button type = "button" class = "btn btn-primary" > Erdikoa </button>  
  <button type = "button" class = "btn btn-primary" > Eskuinekoa </button>  
</div>

Irratia

Gehitu data-toggle="buttons-radio"irrati-estiloa aldatzeko btn-group-en.

<div class = "btn-group" data-toggle = "botoiak-irratia" >  
  <button type = "button" class = "btn btn-primary" > Ezkerrean </button>  
  <button type = "button" class = "btn btn-primary" > Erdikoa </button>  
  <button type = "button" class = "btn btn-primary" > Eskuinekoa </button>  
</div>

Erabilera

Gaitu botoiak JavaScript bidez:

$ ( '.nav-tabs' ). botoia ()

Markatzea

Datu-atributuak botoiaren pluginaren osagaiak dira. Begiratu beheko adibideko kodea markaketa mota ezberdinetarako.

Aukerak

Bat ere ez

Metodoak

$().button('toggle')

Bultza-egoera aktibatzen du. Botoiari aktibatuta dagoen itxura ematen dio.

<button type = "button" class = "btn" data-toggle = "botoia" > … </button>    

$().button('kargatzen')

Botoiaren egoera kargatzeko ezartzen du - botoia desgaitzen du eta testua kargatzeko testuarekin aldatzen du. Testua kargatzeko botoiaren elementuan definitu behar da datu-atributua erabiliz data-loading-text.

<button type = "button" class = "btn" data-loading-text = "gauzak kargatzen..." > ... </button>    

$().button('berrezarri')

Botoiaren egoera berrezartzen du - testua jatorrizko testuarekin aldatzen du.

$().button(katea)

Botoiaren egoera berrezartzen du - testua definitutako edozein testu-egoera aldatzen du.

<button type = "button" class = "btn" data-complete-text = "amaitu!" > ... </button>    
<gidoia>
  $ ( '.btn' ). botoia ( 'osatu' )
</script>

Buruz

Lortu oinarrizko estiloak eta laguntza malgua osagai tolesgarrietarako, hala nola akordeoiak eta nabigazioa.

* Transitions plugina sartzea eskatzen du.

Adibide akordeoia

Collapse plugina erabiliz, akordeoi estiloko widget sinple bat eraiki dugu:

<div class = "akordeoia" id = "akordeoia2" >  
  <div class = "akordeoi-taldea" > 
    <div class = "akordeoi-izenburua" > 
      <a class = "accordion-toggle" data-toggle = "kolapso" data-parent = "#accordion2" href = "#collapseOne" >    
        Talde tolesgarria 1. elementua
      </a>
    </div>
    <div id = "collapseOne" class = "akordeoiaren gorputzaren kolapsoa" >  
      <div class = "akordeoi barne" > 
        Anim pariatur topiko...
      </div>
    </div>
  </div>
  <div class = "akordeoi-taldea" > 
    <div class = "akordeoi-izenburua" > 
      <a class = "accordion-toggle" data-toggle = "kolapso" data-parent = "#accordion2" href = "#collapseTwo" >    
        Talde tolesgarria #2 elementua
      </a>
    </div>
    <div id = "collapseTwo" class = "akordeoiaren gorputz-kolapsoa" >  
      <div class = "akordeoi barne" > 
        Anim pariatur topiko...
      </div>
    </div>
  </div>
</div>
...

Plugin-a akordeoi markarik gabe ere erabil dezakezu. Egin botoi bat beste elementu baten hedapena eta kolapsoa aldatzeko.

<button type = "button" class = "btn btn-danger" data-toggle = "kolapso" data-target = "#demo" >    
  tolesgarri sinplea
</button>
 
<div id = "demo" class = "kolapsoa" > … </div>  

Erabilera

Datu-atributuen bidez

Gehitu data-toggle="collapse"eta a data-targetelementua tolesgarria den elementu baten kontrola automatikoki esleitzeko. Atributuak css hautatzaile bat onartzen du data-targetkolapsoa aplikatzeko. Ziurtatu klasea gehitzen duzula collapseelementu tolesgarrian. Lehenetsita irekitzea nahi baduzu, gehitu klase gehigarria in.

Akordeoi antzeko taldeen kudeaketa kontrol tolesgarri bati gehitzeko, gehitu datu-atributua data-parent="#selector". Ikusi demoa hau martxan ikusteko.

JavaScript bidez

Gaitu eskuz honekin:

$ ( ".kolapsoa" ). kolapsatu ()

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-parent="".

Metodoak

.kolapso(aukerak)

Zure edukia elementu tolesgarri gisa aktibatzen du. Aukerako aukerak onartzen ditu object.

$ ( '#nireTolesgarria' ). tolestu ({
  toggle : faltsu 
})

.kolapso('toggle')

Elementu tolesgarri bat bistaratzen edo ezkutuan jartzen du.

.kolapso('erakutsi')

Elementu tolesgarria erakusten du.

.kolapso('ezkutatu')

Elementu tolesgarri bat ezkutatzen du.

Gertaerak

Bootstrap-en kolapso-klaseak kolapso-funtzionalitatean konektatzeko gertaera batzuk erakusten ditu.

$ ( '#nireTolesgarria' ). on ( 'ezkutatuta' , funtzioa () {   
  // Zerbait egin…
})

Carrusel adibidea

Beheko diapositiba aurkezpenak plugin generiko bat eta osagai bat erakusten du karrusel bat bezalako elementuetan zehar bizikletaz ibiltzeko.

Lehenengo irudi txikiaren etiketa

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.

Bigarren Miniatura etiketa

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.

Hirugarren irudi txikiaren etiketa

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.

‹ ›

<div id = "myCarousel" class = "karruselaren diapositiba" >  
  <ol class = "karrusel-adierazleak" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktiboa" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Karruselaren elementuak -->
  <div class = "karruselaren barne" > 
    <div class = "elementu aktiboa" > … </div> 
    <div class = "elementua" > … </div> 
    <div class = "elementua" > … </div> 
  </div>
  <!-- Karruselaren nabigazioa -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "aurrekoa" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "hurrengoa" > › </a>   
</div>

Erabilera

Datu-atributuen bidez

Erabili datu-atributuak karruselaren posizioa erraz kontrolatzeko. data-slidegako-hitzak onartzen ditu prevedo next, eta horrek diapositiba posizioa aldatzen du bere uneko posizioarekiko. Bestela, erabili data-slide-todiapositiba-indize gordina karruselara pasatzeko data-slide-to="2", hau da, indize jakin batera hasten den diapositibaren posizioa 0.

JavaScript bidez

Deitu karuselera eskuz honekin:

$ ( '.karrusela' ). karrusela ()

Aukerak

Aukerak datu-atributuen edo JavaScriptz bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-interval="".

Metodoak

.carousel(aukerak)

Karrusela hautazko aukera batekin hasieratzen du objecteta elementuen bidez bizikletaz hasten da.

$ ( '.karrusela' ). karrusela ({
  tartea : 2000 
})

.carousel('zikloa')

Karruselaren elementuetan zehar ibiliko da ezkerretik eskuinera.

.carousel('pausa')

Karrusela elementuetan zehar bizikletaz ibiltzeari uzten dio.

.karrusela(zenbakia)

Karrusela fotograma jakin batera birziklatzen du (0 oinarrian, array baten antzera).

.carousel('aurrekoa')

Zikloak aurreko elementura.

.carousel('hurrengo')

Zikloak hurrengo elementura.

Gertaerak

Bootstrap-en karrusel klaseak bi gertaera erakusten ditu karruselaren funtzionalitatera konektatzeko.

Adibidea

Oinarrizko eta erraz hedatzen den plugin bat idazkera dotoreak azkar sortzeko edozein inprimakiko testu sarrerarekin.

<input type = "text" data- provide = "typeahead" >  

autocomplete="off"Arakatzailearen menu lehenetsiak Bootstrap typeahead goitibeherako goitibeherako agertzea saihesteko ezarri nahi duzu .

Erabilera

Datu-atributuen bidez

Gehitu datu-atributuak elementu bat idazteko aurretiko funtzionalitatearekin erregistratzeko, goiko adibidean erakusten den moduan.

JavaScript bidez

Deitu eskuz idatzi aurretik honekin:

$ ( '.typeahead' ). idatzi aurretik ()

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-source="".

Metodoak

.typeahead(aukerak)

Sarrera bat idazketa batekin hasieratzen du.

Adibidea

Ezkerreko azpinabigazioa affix pluginaren zuzeneko demo bat da.

Erabilera

Datu-atributuen bidez

Edozein elementuri afixen portaera erraz gehitzeko, gehitu data-spy="affix"espioi nahi duzun elementuari. Ondoren, erabili desplazamenduak elementu baten aingura noiz aktibatu eta desaktibatu zehazteko.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

JavaScript bidez

Deitu affix plugina JavaScript bidez:

$ ( '#navbar' ). eranskin ()

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-offset-top="200".