Individualus arba sudarytas

Papildiniai gali būti įtraukti atskirai (nors kai kurie turi būtinų priklausomybių) arba visi iš karto. Tiek bootstrap.js , tiek bootstrap.min.js yra visi papildiniai viename faile.

Duomenų atributai

Visus „Bootstrap“ papildinius galite naudoti tik per žymėjimo API, neįrašydami nė vienos „JavaScript“ eilutės. Tai yra pirmos klasės „Bootstrap“ API ir pirmiausia turėtumėte į tai atsižvelgti, kai naudojate papildinį.

Tačiau kai kuriais atvejais gali būti pageidautina išjungti šią funkciją. Todėl taip pat suteikiame galimybę išjungti duomenų atributo API, atjungiant visus įvykius, esančius pagrindiniame vardų srityje su „data-api“. Tai atrodo taip:

$ ( „kūnas“ ). išjungta ( '.data-api' )

Arba, jei norite taikyti konkretų papildinį, tiesiog įtraukite papildinio pavadinimą kaip vardų erdvę kartu su data-api vardų erdve, pvz.:

$ ( „kūnas“ ). išjungtas ( '.alert.data-api' )

Programinė API

Taip pat manome, kad turėtumėte turėti galimybę naudoti visus „Bootstrap“ papildinius tik per „JavaScript“ API. Visos viešosios API yra pavieniai, grandininiai metodai ir grąžina rinkinį, pagal kurį buvo imtasi veiksmų.

$ ( ".btn.pavojus" ). mygtuką ( "perjungti" ). addClass ( "riebalai" )

Visi metodai turi priimti pasirenkamų parinkčių objektą, eilutę, kuri taikoma tam tikram metodui, arba nieko (kuris inicijuoja papildinį su numatytuoju elgesiu):

$ ( „#myModal“ ). modal () // inicijuojama pagal numatytuosius nustatymus                       
$ ( „#myModal“ ). modalinis ({ klaviatūra : false }) // inicijuotas be klaviatūros     
$ ( „#myModal“ ). modal ( 'show' ) // iš karto inicijuoja ir iškviečia šou                

Kiekvienas papildinys taip pat atskleidžia savo neapdorotą konstruktorių savybėje „Constructor“: $.fn.popover.Constructor. Jei norite gauti konkretų papildinio egzempliorių, gaukite jį tiesiai iš elemento: $('[rel=popover]').data('popover').

Jokio Konflikto

Kartais reikia naudoti Bootstrap papildinius su kitomis vartotojo sąsajos sistemomis. Tokiomis aplinkybėmis kartais gali įvykti vardų erdvės susidūrimai. Jei taip atsitiks, galite iškviesti .noConflictpapildinį, kurio vertę norite grąžinti.

var bootstrapButton = $ . fn . mygtukas . noConflict () // grąžina mygtuką $.fn. į anksčiau priskirtą reikšmę 
$ . fn . bootstrapBtn = bootstrapButton             // suteikite $().bootstrapBtn įkrovos funkciją

Renginiai

„Bootstrap“ teikia pasirinktinius įvykius daugeliui unikalių papildinio veiksmų. Paprastai jie būna įnagininko ir būtojo laiko formos – kai įnagininkas (pvz. show, ) suaktyvinamas įvykio pradžioje, o jo būtojo laiko forma (pvz. shown, ) – baigus veiksmą.

Visi begaliniai įvykiai suteikia „preventionDefault“ funkciją. Tai suteikia galimybę sustabdyti veiksmo vykdymą prieš jam pradedant.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    jei (! duomenys ) grąžinti e . preventDefault () // sustabdo modalo rodymą   
})

Apie perėjimus

Norėdami gauti paprastų perėjimo efektų, kartu su kitais JS failais įtraukite bootstrap-transition.js . Jei naudojate kompiliuotą (arba sumažintą) bootstrap.js , nereikia jo įtraukti – jis jau yra.

Naudojimo atvejai

Keli perėjimo papildinio pavyzdžiai:

• Slydimas arba blukimas modaluose
• Išnyksta skirtukai
• Išnykę įspėjimai
• Stumdomos karuselės stiklai

Pavyzdžiai

Modalai yra supaprastinti, bet lankstūs dialogo raginimai su minimaliomis būtinomis funkcijomis ir išmaniaisiais numatytais nustatymais.

Statinis pavyzdys

Pateiktas modalas su antrašte, turiniu ir veiksmų rinkiniu poraštėje.

<div class = "modalinis paslėptas išnykimas" > 
  <div class = "modalinė antraštė" > 
    <button type = "button" class = "uždaryti" data-dismiss = "modalinis" aria-hidden = "true" > × </button>    
    <h3> Modalinė antraštė </h3>
  </div>
  <div class = "modal-body" > 
    <p> Vienas puikus kūnas... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Uždaryti </a>  
    <a href = "#" class = "btn btn-primary" > Išsaugoti pakeitimus </a>  
  </div>
</div>

Tiesioginė demonstracija

Perjunkite modalą naudodami „JavaScript“ spustelėdami toliau esantį mygtuką. Jis slinks žemyn ir išnyks nuo puslapio viršaus.

<!-- Modalinio įjungimo mygtukas -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Paleisti demonstracinį modalą </a>    
 
<!-- Modalinis -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modalinė antraštė" > 
    <button type = "button" class = "uždaryti" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modalinė antraštė </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Vienas puikus kūnas... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Uždaryti </button>   
    <button class = "btn btn-primary" > Išsaugoti pakeitimus </button> 
  </div>
</div>

Naudojimas

Per duomenų atributus

Suaktyvinkite modalą neįrašę JavaScript. Nustatykite data-toggle="modal"valdiklio elementą, pvz., mygtuką, kartu su data-target="#foo"arba href="#foo", kad nukreiptumėte į konkretų modalą, kad perjungtumėte.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Paleisti modalinį </button>   

Per JavaScript

Iškvieskite modalą su ID myModalsu viena JavaScript eilute:

$ ( '#myModal' ). modalinis ( parinktys )

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-backdrop="".

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

Metodai

.modal(parinktys)

Suaktyvina jūsų turinį kaip modalą. Priima pasirenkamas parinktis object.

$ ( '#myModal' ). modalinis ({
  klaviatūra : klaidinga 
})

.modal('toggle')

Rankiniu būdu perjungia modalą.

$ ( '#myModal' ). modalinis ( 'perjungti' )

.modal('show')

Modalą atidaro rankiniu būdu.

$ ( '#myModal' ). modalinis ( „šou“ )

.modal('hide')

Rankiniu būdu paslepia modalą.

$ ( '#myModal' ). modalinis ( „paslėpti“ )

Renginiai

„Bootstrap“ modalinė klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie modalinės funkcijos.

$ ( '#myModal' ). on ( 'slėptas' , funkcija () {   
  // daryk ką nors...
})

Pavyzdžiai

Naudodami šį paprastą papildinį pridėkite išskleidžiamųjų meniu beveik prie bet ko, įskaitant naršymo juostą, skirtukus ir tabletes.

Naršymo juostoje

Skirtukų viduje

Naudojimas

Per duomenų atributus

Pridėkite data-toggle="dropdown"prie nuorodos arba mygtuko, kad perjungtumėte išskleidžiamąjį meniu.

<div class = "išskleidžiamasis sąrašas" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Išskleidžiamojo meniu aktyviklis </a>   
  <ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Kad URL nepažeistumėte, naudokite data-targetatributą, o ne href="#".

<div class = "išskleidžiamasis sąrašas" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Išskleidžiamasis meniu
    <b klasė = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Per JavaScript

Iškvieskite išskleidžiamuosius meniu naudodami „JavaScript“:

$ ( '.dropdown-toggle' ). išskleidžiamasis meniu ()

Galimybės

Nė vienas

Metodai

$().dropdown('toggle')

Programinė API, skirta perjungti tam tikros naršymo juostos arba naršymo skirtukais meniu.

Pavyzdys naršymo juostoje

„ScrollSpy“ papildinys skirtas automatiškai atnaujinti navigacijos taikinius pagal slinkties padėtį. Slinkite po naršymo juosta esančia sritimi ir stebėkite aktyvios klasės pasikeitimą. Taip pat bus paryškinti išskleidžiamieji antriniai elementai.

Naudojimas

Per duomenų atributus

Jei norite lengvai pridėti slinkties elgseną prie viršutinės juostos naršymo, tiesiog pridėkite data-spy="scroll"prie elemento, kurį norite šnipinėti (dažniausiai tai būtų korpusas) ir data-target=".navbar"pasirinkite, kurią naršymą naudoti. Su komponentu norėsite naudoti scrollspy .nav.

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

Per JavaScript

Iškvieskite scrollspy naudodami „JavaScript“:

$ ( '#navbar' ). scrollspy ()

Metodai

.scrollspy('refresh')

Kai naudojate scrollspy kartu su elementų pridėjimu arba pašalinimu iš DOM, turėsite iškviesti atnaujinimo metodą, pavyzdžiui:

$ ( '[data-spy="scroll"]' ). kiekvienas ( funkcija () {  
  var $spy = $ ( tai ). scrollspy ( 'atnaujinti' )
});

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-offset="".

Renginiai

Skirtukų pavyzdžiai

Pridėkite greitą, dinamišką skirtukų funkciją, kad galėtumėte pereiti per vietinio turinio sritis, net naudodami išskleidžiamuosius meniu.

Naudojimas

Įgalinti skirtukų skirtukus naudodami „JavaScript“ (kiekvieną skirtuką reikia suaktyvinti atskirai):

$ ( '#myTab a' ). spustelėkite ( funkcija ( e ) {  
  e . užkirsti keliąNumatytasis ();
  $ ( tai ). skirtukas ( 'rodyti' );
})

Atskirus skirtukus galite suaktyvinti keliais būdais:

$ ( '#myTab a[href="#profile"]' ). skirtukas ( 'rodyti' ); // Pasirinkite skirtuką pagal pavadinimą 
$ ( '#myTab a:first' ). skirtukas ( 'rodyti' ); // Pasirinkite pirmąjį skirtuką 
$ ( '#myTab a:last' ). skirtukas ( 'rodyti' ); // Pasirinkite paskutinį skirtuką 
$ ( '#myTab li:eq(2) a' ). skirtukas ( 'rodyti' ); // Pasirinkti trečią skirtuką (indeksuotas 0) 

Žymėjimas

Galite suaktyvinti skirtuką arba piliulės naršymą neįrašydami jokio „JavaScript“, tiesiog nurodydami data-toggle="tab"arba data-toggle="pill"ant elemento. Pridėjus navir nav-tabsklases prie skirtuko ulbus taikomas Bootstrap skirtuko stilius.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Pagrindinis </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profilis </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Pranešimai </a></li>  
  <li><a href = "#settings" data-toggle = "skirtukas" > Nustatymai </a></li>  
</ul>

Metodai

$().tab

Suaktyvina skirtuko elementą ir turinio konteinerį. Skirtuko lape turi būti a data-targetarba hrefDOM sudėtinio rodinio mazgas.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "aktyvus" ><a href = "#home" > Pagrindinis puslapis </a></li>  
  <li><a href = "#profile" > Profilis </a></li> 
  <li><a href = "#messages" > Žinutės </a></li> 
  <li><a href = "#settings" > Nustatymai </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profilis" > ... </div>  
  <div class = "tab-pane" id = "pranešimai" > ... </div>  
  <div class = "tab-pane" id = "nustatymai" > ... </div>  
</div>
 
<script>
  $ ( funkcija () {  
    $ ( '#myTab a:last' ). skirtukas ( 'rodyti' );
  })
</script>

Renginiai

$ ( 'a[data-toggle="tab"]' ). on ( 'rodoma' , funkcija ( e ) {   
  e . taikinys // suaktyvintas skirtukas
  e . relatedTarget // ankstesnis skirtukas
})

Pavyzdžiai

Įkvėptas puikaus jQuery.tipsy įskiepio, kurį parašė Jason Frame; Patarimai yra atnaujinta versija, kuri nepriklauso nuo vaizdų, naudoja CSS3 animacijai ir duomenų atributus vietiniam pavadinimo saugojimui.

Dėl našumo galima pasirinkti patarimą ir iškylančius duomenis, tai reiškia, kad turite juos inicijuoti patys .

Užveskite pelės žymeklį ant toliau pateiktų nuorodų, kad pamatytumėte patarimus:

Keturios kryptys

Patarimai įvesties grupėse

Naudodami patarimus ir iššokančius langus su „Bootstrap“ įvesties grupėmis, turėsite nustatyti containerparinktį (dokumentuota toliau), kad išvengtumėte nepageidaujamo šalutinio poveikio.

Naudojimas

Suaktyvinkite patarimą naudodami „JavaScript“:

$ ( '#pavyzdys' ). patarimas ( parinktys )

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-animation="".

Žymėjimas

<a href = "#" data-toggle = "tooltip" title = "pirmas patarimas" > užveskite pelės žymeklį virš manęs </a>   

Metodai

$().tooltip(parinktys)

Prie elementų rinkinio prideda patarimo tvarkyklę.

.tooltip('show')

Atskleidžia elemento patarimą.

$ ( „#elementas“ ). patarimas ( „rodyti“ )

.tooltip('hide')

Slepia elemento patarimą.

$ ( „#elementas“ ). patarimas ( 'slėpti' )

.tooltip('toggle')

Perjungia elemento patarimą.

$ ( „#elementas“ ). patarimas ( 'perjungti' )

.tooltip('destroy')

Slepia ir sunaikina elemento patarimą.

$ ( „#elementas“ ). patarimas ( „sunaikinti“ )

Pavyzdžiai

Prie bet kurio elemento pridėkite mažas turinio perdangas, pvz., esančias iPad. Užveskite pelės žymeklį virš mygtuko, kad suaktyvintumėte iššokantįjį ekraną. Reikia įtraukti patarimą .

Statinis iššokimas

Galimos keturios parinktys: viršuje, dešinėje, apačioje ir kairėje.

Joks žymėjimas, rodomas kaip iššokantis langas, negeneruojamas iš „JavaScript“ ir dataatributo turinio.

Tiesioginė demonstracija

Keturios kryptys

Naudojimas

Įgalinti iššokančius langus naudojant „JavaScript“:

$ ( '#pavyzdys' ). popover ( parinktys )

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-animation="".

Žymėjimas

Dėl našumo priežasčių pasirenkamas įrankių patarimas ir Popover duomenų apis. Jei norite jas naudoti, tiesiog nurodykite parinkiklio parinktį.

Metodai

$().popover(parinktys)

Inicijuoja elementų rinkinio iššokančius langus.

.popover('show')

Atskleidžia elementų iššokimą.

$ ( „#elementas“ ). popover ( "show" )

.popover('hide')

Slepia elementų iššokimą.

$ ( „#elementas“ ). popover ( „paslėpti“ )

.popover('toggle')

Perjungia elementų iššokimą.

$ ( „#elementas“ ). popover ( 'perjungti' )

.popover('sunaikinti')

Slepia ir sunaikina elemento iššokimą.

$ ( „#elementas“ ). popover ( „sunaikinti“ )

Įspėjimų pavyzdžiai

Pridėkite atmetimo funkciją prie visų įspėjimų pranešimų naudodami šį papildinį.

Naudojimas

Įgalinti įspėjimo atmetimą naudojant „JavaScript“:

$ ( ".alert" ). įspėjimas ()

Žymėjimas

Tiesiog pridėkite data-dismiss="alert"prie uždarymo mygtuko, kad automatiškai suteiktų įspėjimo uždarymo funkciją.

<a class = "uždaryti" data-dismiss = "alert" href = "#" > × </a>   

Metodai

$().alert()

Apima visus įspėjimus glaudžiais funkcionalumu. Jei norite, kad įspėjimai būtų aktyvūs uždarius, įsitikinkite, kad juose yra .fadeir.in klasė.

.alert('close')

Uždaro įspėjimą.

$ ( ".alert" ). įspėjimas ( 'uždaryti' )

Renginiai

„Bootstrap“ įspėjimų klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie įspėjimo funkcijų.

$ ( '#mano įspėjimas' ). bind ( 'closed' , function () {   
  // daryk ką nors...
})

Naudojimo pavyzdžiai

Padarykite daugiau naudodami mygtukus. Valdykite mygtukų būsenas arba sukurkite mygtukų grupes daugiau komponentų, pvz., įrankių juostoms.

Valstybinis

Pridėti data-loading-text="Loading...", jei norite naudoti mygtuko įkėlimo būseną.

<button type = "button" class = "btn btn-primary" data-loading-text = "Įkeliama..." > Įkeliama būsena </button>   

Vienas perjungimas

Pridėti data-toggle="button", kad suaktyvintumėte perjungimą vienu mygtuku.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Vienas perjungimas </button>   

Žymimasis langelis

Pridėti data-toggle="buttons-checkbox"žymės langelio stiliaus perjungimui btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Kairėn </button>  
  <button type = "button" class = "btn btn-primary" > Vidurinis </button>  
  <button type = "button" class = "btn btn-primary" > Dešinėn </button>  
</div>

Radijas

Pridėti data-toggle="buttons-radio"radijo stiliaus perjungimui btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Kairėn </button>  
  <button type = "button" class = "btn btn-primary" > Vidurinis </button>  
  <button type = "button" class = "btn btn-primary" > Dešinėn </button>  
</div>

Naudojimas

Įgalinti mygtukus per „JavaScript“:

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

Žymėjimas

Duomenų atributai yra neatsiejami mygtuko papildinio dalis. Peržiūrėkite toliau pateiktą įvairių žymėjimo tipų kodo pavyzdį.

Galimybės

Nė vienas

Metodai

$().button('toggle')

Perjungia stūmimo būseną. Mygtukui atrodo, kad jis buvo suaktyvintas.

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

$().button('kraunama')

Nustato mygtuko būseną į įkėlimą – išjungia mygtuką ir pakeičia tekstą į įkeliamą tekstą. Įkeliamas tekstas turi būti apibrėžtas mygtuko elemente naudojant duomenų atributą data-loading-text.

<button type = "button" class = "btn" data-loading-text = "įkeliama medžiaga..." > ... </button>    

$().button('atstatyti')

Iš naujo nustato mygtuko būseną – pakeičia tekstą į pradinį tekstą.

$().mygtukas(eilutė)

Iš naujo nustato mygtuko būseną – pakeičia tekstą į bet kurią duomenų apibrėžtą teksto būseną.

<button type = "button" class = "btn" data-complete-text = "baigta!" > ... </button>    
<script>
  $ ( '.btn' ). mygtukas ( 'užbaigti' )
</script>

Apie

Gaukite pagrindinius stilius ir lankstų sulankstomų komponentų, pvz., akordeonų ir navigacijos, palaikymą.

* Reikia įtraukti Transitions įskiepį.

Pavyzdys akordeonas

Naudodami sutraukimo papildinį sukūrėme paprastą akordeono stiliaus valdiklį:

<div class = "akordeonas" id = "akordeonas2" >  
  <div class = "akordeonų grupė" > 
    <div class = "akordeono antraštė" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Sutraukiamas grupės elementas Nr. 1
      </a>
    </div>
    <div id = "collapseOne" class = "akordeono korpuso griūtis" >  
      <div class = "akordeonas-vidinis" > 
        Anim pariatur klišė...
      </div>
    </div>
  </div>
  <div class = "akordeonų grupė" > 
    <div class = "akordeono antraštė" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Sutraukiamas grupės elementas Nr. 2
      </a>
    </div>
    <div id = "collapseTwo" class = "akordeono korpuso žlugimas" >  
      <div class = "akordeonas-vidinis" > 
        Anim pariatur klišė...
      </div>
    </div>
  </div>
</div>
...

Taip pat galite naudoti papildinį be akordeono žymėjimo. Padarykite mygtuką, kad perjungtumėte kito elemento išplėtimą ir sutraukimą.

<button type = "button" class = "btn btn-danger" data-toggle = "sutraukti" data-target = "#demo" >    
  paprastas sulankstomas
</button>
 
<div id = "demo" class = "sutraukti" > … </div>  

Naudojimas

Per duomenų atributus

Tiesiog pridėkite data-toggle="collapse"ir data-targetprie elemento, kad automatiškai priskirtumėte sulankstomo elemento valdymą. data-targetAtributas priima css parinkiklį, kuriam taikomas sutraukimas . Būtinai pridėkite klasę collapseprie sutraukiamo elemento. Jei norite, kad jis būtų atidarytas pagal numatytuosius nustatymus, pridėkite papildomą klasęin .

Norėdami pridėti į akordeoną panašų grupės valdymą prie sutraukiamo valdiklio, pridėkite duomenų atributą data-parent="#selector". Peržiūrėkite demonstracinę versiją, kad pamatytumėte, kaip tai veikia.

Per JavaScript

Įgalinti rankiniu būdu su:

$ ( ".sutraukti" ). griūti ()

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-parent="".

Metodai

.collapse(parinktys)

Suaktyvina turinį kaip sulankstomą elementą. Priima pasirenkamas parinktis object.

$ ( '#myCollapsible' ). sutraukti ({
  perjungti : klaidinga 
})

.collapse('toggle')

Perjungia sutraukiamą elementą į rodomą arba paslėptą.

.collapse('show')

Rodo sulankstomą elementą.

.collapse('slėpti')

Paslepia sulankstomą elementą.

Renginiai

„Bootstrap“ sutraukimo klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie sutraukimo funkcijos.

$ ( '#myCollapsible' ). on ( 'slėptas' , funkcija () {   
  // daryk ką nors...
})

Karuselės pavyzdys

Toliau pateiktoje skaidrių demonstracijoje rodomas bendras papildinys ir komponentas, skirtas važiuoti per elementus, pvz., karuselę.

Pirmoji miniatiūros etiketė

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.

Second Thumbnail label

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.

Third Thumbnail label

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 = "karuselės skaidrė" >  
  <ol class = "karuselės rodikliai" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktyvus" ></li>   
    <li data-target = "#manoKaruselė" data-slide-to = "1" ></li>  
    <li data-target = "#manoKaruselė" data-slide-to = "2" ></li>  
  </ol>
  <!-- Karuselės elementai -->
  <div class = "carousel-inner" > 
    <div class = "aktyvus elementas" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "ankstesnis" > ‹ </a>   
  <a class = "carousel-control right" href = "#manoKaruselė" data-slide = "kitas" > › </a>   
</div>

Naudojimas

Per duomenų atributus

Naudokite duomenų atributus, kad lengvai valdytumėte karuselės padėtį. data-slidepriima raktinius žodžius prevarba next, kuris pakeičia skaidrės padėtį, palyginti su dabartine padėtimi. Arba naudokite data-slide-to, jei norite perduoti neapdorotą skaidrės rodyklę į karuselę data-slide-to="2", kuri perkelia skaidrės padėtį į tam tikrą indeksą, prasidedantį0 .

Per JavaScript

Skambinkite į karuselę rankiniu būdu naudodami:

$ ( '.karuselė' ). karuselė ()

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScriptz. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-interval="".

Metodai

.carousel(parinktys)

Inicijuoja karuselę su pasirenkamomis parinktimis objectir pradeda važiuoti per elementus.

$ ( '.karuselė' ). karuselė ({
  intervalas : 2000 
})

.carousel('cycle')

Važiuoja per karuselės elementus iš kairės į dešinę.

.carousel('pause')

Sustabdo karuselės judėjimą per daiktus.

.carousel(number)

Perkelia karuselę į tam tikrą kadrą (pagrįsta 0, panašiai kaip masyvas).

.carousel('ankstesnis')

Perkeliama į ankstesnį elementą.

.carousel('kitas')

Perkeliama į kitą elementą.

Renginiai

„Bootstrap“ karuselės klasė atskleidžia du įvykius, kad būtų galima prisijungti prie karuselės funkcijų.

Pavyzdys

Pagrindinis, lengvai išplečiamas papildinys, skirtas greitai sukurti elegantiškas antraštes naudojant bet kokios formos teksto įvestį.

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

Norėsite nustatyti autocomplete="off", kad numatytieji naršyklės meniu nebūtų rodomi išskleidžiamajame meniu „Bootstrap typeahead“.

Naudojimas

Per duomenų atributus

Pridėkite duomenų atributus, kad užregistruotumėte elementą su įžanginio tipo funkcijomis, kaip parodyta anksčiau pateiktame pavyzdyje.

Per JavaScript

Rankiniu būdu iškvieskite antraštę naudodami:

$ ( '.typeahead' ). į priekį ()

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-source="".

Metodai

.typeahead(parinktys)

Inicijuoja įvestį su į priekį.

Pavyzdys

Kairėje esanti subnavigacija yra tiesioginė priedėlio įskiepio demonstracija.

Naudojimas

Per duomenų atributus

Norėdami lengvai pridėti prie bet kurio elemento priedą, tiesiog pridėkite data-spy="affix"prie elemento, kurį norite šnipinėti. Tada naudokite poslinkius, kad nustatytumėte, kada įjungti ir išjungti elemento prisegimą.

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

Per JavaScript

Iškvieskite affix papildinį naudodami „JavaScript“:

$ ( '#navbar' ). pritvirtinti ()

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-offset-top="200".