Şahsy ýa-da düzülen

Pluginleri aýratynlykda goşup bolýar (käbirlerine baglylyk talap edilse-de) ýa-da birbada. Bootstrap.js we bootstrap.min.js ikisi hem bir faýldaky ähli pluginleri öz içine alýar.

Maglumat atributlary

Bootstrap plaginleriniň hemmesini JavaScript-iň bir setirini ýazman diňe bellik API arkaly ulanyp bilersiňiz. Bu “Bootstrap” -yň ilkinji synp API-si we bir plugin ulananyňyzda ilkinji üns bermeli.

Saidagny, käbir ýagdaýlarda bu funksiýany öçürmek islenip bilner. Şol sebäpden, "data-api" bilen ýerleşdirilen beden atlaryndaky ähli hadysalary birleşdirip, maglumat atributy API-ni öçürmek mümkinçiligini berýäris. Bu şeýle görünýär:

$ ( 'beden' ). öçürilen ( '.data-api' )

Ativea-da bolmasa, belli bir plagini nyşana almak üçin, plugin adyny at giňişligi hökmünde maglumat-api at giňişligi bilen birlikde goşuň:

$ ( 'beden' ). öçürildi ( '.alert.data-api' )

Programmatiki API

Şeýle hem, ähli Bootstrap pluginlerini diňe JavaScript API arkaly ulanyp biljekdigiňize ynanýarys. Publichli jemgyýetçilik API-leri ýeke-täk, zynjyrly usullardyr we ýerine ýetirilen kolleksiýany yzyna gaýtaryp berýär.

$ ( ".btn.danger" ). düwmesi ( "üýtgetmek" ). addClass ( "ýag" )

Methodshli usullar goşmaça opsiýa obýektini, belli bir usuly nyşana alýan setiri ýa-da hiç zady kabul etmeli däldir (deslapky hereket bilen bir plugin açýar):

$ ( "#myModal" ). modal () // başlangyç bilen başlandy                       
$ ( "#myModal" ). modal ({ klawiatura : ýalan }) // klawiaturasyz başlandy     
$ ( "#myModal" ). modal ( 'show' ) // derrew görkezýär we görkezýär                

Her bir plugin, çig konstruktoryny "Konstruktoryň" emläginde açýar : $.fn.popover.Constructor. Belli bir plugin mysalyny almak isleseňiz, göni bir elementden alyň : $('[rel=popover]').data('popover').

Dawa ýok

Käwagt beýleki UI çarçuwalary bilen Bootstrap plaginlerini ulanmaly bolýar. Bu ýagdaýlarda at giňişliginde wagtal-wagtal çaknyşyklar bolup biler. .noConflictŞeýle ýagdaý ýüze çyksa, bahasyny yzyna öwürmek isleýän pluginiňize jaň edip bilersiňiz.

var bootstrapButton = $ . fn . düwmesi . noConflict () // $ .fn.buttony öň bellenen baha gaýtaryň 
$ . fn . bootstrapBtn = bootstrapButton             // ber $ (). bootstrapBtn bootstrap funksiýasy

Wakalar

“Bootstrap”, pluginiň özboluşly hereketleri üçin ýörite wakalary üpjün edýär. Umuman aýdylanda, bular infinitif we geçmiş gatnaşygy görnüşinde gelýär - bu ýerde showbir hadysanyň başynda infinitif (mysal üçin) ýüze çykýar we geçmişdäki gatnaşygy (mysal shown) bir işiň tamamlanmagyna sebäp bolýar.

Infhli infinitif hadysalar öňüni alyş funksiýasyny üpjün edýär. Bu, hereketiň başlamazdan ozal ýerine ýetirilmegini togtatmak ukybyny üpjün edýär.

$ ( '#myModal' ). ( 'görkezmek ' , funksiýa ( e ) {   
    eger (! maglumatlar ) gaýdyp gelse e . preventDefault () // modalyň görkezilmegini saklaýar   
})

Geçişler hakda

Simpleönekeý geçiş effektleri üçin beýleki JS faýllary bilen bir hatarda bootstrap-transition.js- i goşuň. Toplanan (ýa-da kiçeldilen) bootstrap.js ulanýan bolsaňyz, muny goşmagyň zerurlygy ýok - ol eýýäm bar.

Kazyýetleri ulanyň

Geçiş plagininiň birnäçe mysallary:

• Modallarda süýşmek ýa-da solmak
• Salgylar öçýär
• Duýduryşlaryň öçmegi
• Karusel panelleri

Mysallar

Modallar tertipli, ýöne çeýe, iň az talap edilýän işleýiş we akylly defoltlar bilen gepleşik teklip edýär.

Statik mysal

Aşakdaky sözbaşy, göwre we hereketler toplumy bilen görkezilen modal.

<div class = "modal gizlenmek solýar" > 
  <div class = "modal-sözbaşy" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > & times; </button>    
    <h3> Modal sözbaşy </h3>
  </div>
  <div class = "modal-body" > 
    <p> Bir gowy beden… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> Closeapyň </a> _  
    <a href = "#" class = "btn btn-primary"> Üýtgeşmeleri ýatda saklaň </a>  
  </div>
</div>

Göni görkeziş

Aşakdaky düwmä basyp, JavaScript arkaly modal çalşyň. Aşakdan süýşer we sahypanyň ýokarsyndan pese gaçar.

<! - Modal açmak üçin düwme ->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal"> Demo modalyny işe giriziň </a>    
 
<! - Modal ->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-sözbaşy" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modal sözbaşy </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Bir gowy beden… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Closeapyň </button>   
    <button class = "btn btn-primary" > Üýtgeşmeleri saklaň </button> 
  </div>
</div>

Ulanylyşy

Maglumat atributlary arkaly

JavaScript ýazman modaly işjeňleşdiriň. Dolandyryjy data-toggle="modal"elementi, düwme ýaly, data-target="#foo"ýa-da href="#foo"üýtgetmek üçin belli bir modaly nyşana alyň.

<düwme görnüşi = "düwme" data-toggle = "modal" data-target = "#myModal" > Modal işe girizmek </button>   

JavaScript arkaly

myModalJavaScript-iň bir setiri bolan idli modala jaň ediň :

$ ( '#myModal' ). modal ( opsiýalar )

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-backdrop="".

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

Usullar

.modal (opsiýalar)

Mazmunyňyzy modal hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

$ ( '#myModal' ). modal ({
  klawiatura : ýalan 
})

.modal ('üýtgetmek')

Modal bilen el bilen çalşyň.

$ ( '#myModal' ). modal ( 'üýtgetmek' )

.modal ('görkezmek')

Modal bilen el bilen açýar.

$ ( '#myModal' ). modal ( 'görkezmek' )

.modal ('gizlemek')

Modaly el bilen gizleýär.

$ ( '#myModal' ). modal ( 'gizlemek' )

Wakalar

“Bootstrap” -yň modal synpy modal işleýşi üçin birnäçe wakany paş edýär.

$ ( '#myModal' ). üstünde ( 'gizlenen' , funksiýa () {   
  // bir zatlar et…
})

Mysallar

Bu ýönekeý plugin, deňiz paneli, goýmalar we dermanlar ýaly islendik zada diýen ýaly açylýan menýulary goşuň.

Gämi duralgasynyň içinde

Salgylaryň içinde

Ulanylyşy

Maglumat atributlary arkaly

data-toggle="dropdown"Açylýan zady üýtgetmek üçin baglanyşyk ýa-da düwme goşuň .

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Açylýan trigger </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL-lerini saklamak üçin, data-targetýerine atribut ulanyň href="#".

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

JavaScript arkaly

JavaScript arkaly açylanlara jaň ediň:

$ ( '.dropdown-toggle' ). aşak düşmek ()

Görnüş

Hiç

Usullar

aşak düşmek ('üýtgetmek')

Berlen deňiz paneli ýa-da bellikli nawigasiýa üçin menýulary üýtgetmek üçin programma api.

Deňiz panelinde mysal

“ScrollSpy” plugin, aýlaw pozisiýasyna esaslanyp nav nyşanlaryny awtomatiki täzelemek üçin. Deňiz paneliniň aşagyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň. Açylýan aşaky elementler hem görkeziler.

Ulanylyşy

Maglumat atributlary arkaly

Topbar nawigasiýaňyza skrollspy häsiýetini aňsatlyk bilen goşmak data-spy="scroll"üçin içalyçylyk etmek isleýän elementiňize goşuň (köplenç bu beden bolar) we data-target=".navbar"haýsy nawig ulanmalydygyny saýlaň. “Scrollspy” .navkomponenti bilen ulanmak islärsiňiz.

<body data-spy = "aýlamak" data-target = ".navbar" > ... </body>  

JavaScript arkaly

JavaScript arkaly scrollspy jaň ediň:

$ ( '#navbar' ). scrollspy ()

Usullar

.scrollspy ('täzele')

DOM-dan elementleri goşmak ýa-da aýyrmak bilen bilelikde scrollspy ulananyňyzda, täzeleniş usulyna şeýle jaň etmeli bolarsyňyz:

$ ( '[data-spy = "aýlamak"]' ). hersi ( funksiýa () {  
  var $ içaly = $ ( bu ). scrollspy ( 'täzele' )
});

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-offset="".

Wakalar

Mysal bellikleri

Contenterli mazmun panellerinden, hatda aşak düşýän menýulardan geçmek üçin çalt, dinamiki tab funksiýasyny goşuň.

Ulanylyşy

JavaScript arkaly tablisa tablisalaryny açyň (her tab aýratynlykda işjeňleşdirilmeli):

$ ( '#myTab a' ). basyň ( funksiýa ( e ) {  
  e . öňüni almak ();
  $ ( bu ). tab ( 'görkezmek' );
})

Aýry-aýry bellikleri birnäçe usul bilen işjeňleşdirip bilersiňiz:

$ ( '#myTab a [href = "# profil"]' ). tab ( 'görkezmek' ); // Ady boýunça tab saýlaň 
$ ( '#myTab a: ilki' ). tab ( 'görkezmek' ); // Birinji goýmany saýlaň 
$ ( '#myTab a: soňky' ). tab ( 'görkezmek' ); // Soňky goýmany saýlaň 
$ ( '#myTab li: eq (2) a' ). tab ( 'görkezmek' ); // Üçünji goýmany saýlaň (0-indekslenen) 

Bellik

data-toggle="tab"Diňe bir elementi ýa-da bir elementi görkezip, hiç hili JavaScript ýazmazdan, tab ýa-da tablet nawigasiýasyny işjeňleşdirip bilersiňiz data-toggle="pill". navSalgylara we nav-tabssynplary goşmak, ul“Bootstrap” goýmasynyň stilini ulanar.

<ul class = "nav nav-tabs" > 
  <li> <a href = "#home" data-toggle = "tab"> Baş sahypa </a> </li >  
  <li> <a href = "#profile" data-toggle = "tab"> Profil </a> </li >  
  <li> <a href = "#messages" data-toggle = "tab"> Habarlar </a> </li >  
  <li> <a href = "#settings" data-toggle = "tab"> Sazlamalar </a> </li >  
</ul>

Usullar

$ () goýmasy

Salgy elementini we mazmun gapyny işjeňleşdirýär. Salgyda ýa data-target-da hrefDOM-da konteýner düwünini nyşana alýan bolmaly.

<ul class = "nav nav- tabs" id = "myTab" >  
  <li class = "işjeň" > <a href = "#home"> Öý </a> </li>  
  <li> <a href = "#profile"> Profil </a> </li> 
  <li> <a href = "#messages"> Habarlar </a> </li> 
  <li> <a href = "#settings"> Sazlamalar </a> </li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane işjeň" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "habarlar" > ... </div>  
  <div class = "tab-pane" id = "sazlamalar" > ... </div>  
</div>
 
<script>
  $ ( funksiýa () {  
    $ ( '#myTab a: soňky' ). tab ( 'görkezmek' );
  })
</script>

Wakalar

$ ( 'a [data-toggle = "tab"]' ). ( 'görkezilen ' , funksiýa ( e ) {   
  e . nyşan // işjeňleşdirilen goýma
  e . baglanyşyklyTarget // öňki goýma
})

Mysallar

Jeýson Frame tarapyndan ýazylan ajaýyp jQuery.tipsy plugininden ylham aldy; Gurallar maslahatlary, şekillere bil baglamaýan, animasiýa üçin CSS3 we ýerli at saklamak üçin maglumat atributlaryny ulanýan täzelenen wersiýa.

Öndürijilik sebäplerine görä, gurallar maslahaty we açylan maglumatlar-apis saýlanýar, ýagny olary özüňiz başlamaly .

Gural görkezmelerini görmek üçin aşakdaky baglanyşyklara basyň:

Dört ugur

Giriş toparlaryndaky gurallar

“Bootstrap” giriş toparlary bilen gurallar we açarlary ulananyňyzda, containerislenilmeýän täsirlerden gaça durmak üçin (aşakda resminamalaşdyrylan) opsiýany bellemeli bolarsyňyz.

Ulanylyşy

Gurallar maslahatyny JavaScript arkaly işlediň:

$ ( '# mysal' ). gurallar ( opsiýalar )

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-animation="".

Bellik

<a href = "#" data-toggle = "tooltip" title = "birinji gural gurallary"> üstümden geçiň </a>   

Usullar

$ (). gurallar maslahaty (opsiýalar)

Gurallar işleýjisini elementler ýygyndysyna dakýar.

.tooltip ('görkezmek')

Bir elementiň gural görkezmesini açýar.

$ ( '#element' ). gural görkezmesi ( 'görkezmek' )

.tooltip ('gizlemek')

Bir elementiň gural görkezmesini gizleýär.

$ ( '#element' ). gural görkezmesi ( 'gizlemek' )

.tooltip ('üýtgetmek')

Bir elementiň gurallar maslahatyny üýtgedýär.

$ ( '#element' ). gural görkezmesi ( 'üýtgetmek' )

.tooltip ('ýok etmek')

Bir elementiň gural görkezmesini gizleýär we ýok edýär.

$ ( '#element' ). gural görkezmesi ( 'ýok etmek' )

Mysallar

Ikinji derejeli maglumat üçin islendik elemente, “iPad” -daky ýaly mazmunyň kiçi gatlaklaryny goşuň. Açylýan düwmäni açmak üçin düwmä basyň. Tooltip -iň goşulmagyny talap edýär .

Statik popover

Dört wariant bar: ýokarky, sag, aşaky we çep deňleşdirilen.

Açylýan görnüşde görkezilen bellik, JavaScript-den we bir dataatributyň mazmunyndan döredilmeýär.

Göni görkeziş

Dört ugur

Ulanylyşy

JavaScript arkaly açylýan ýerleri açyň:

$ ( '# mysal' ). popover ( opsiýalar )

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-animation="".

Bellik

Iş öndürijiligi sebäpli, “Tooltip” we “Popover data-apis” saýlanýar. Olary ulanmak isleseňiz, saýlaýjy opsiýasyny görkeziň.

Usullar

$ (). popover (opsiýalar)

Element ýygnamak üçin açylanlary başlaýar.

.popover ('görkezmek')

Bir elementiň açylmagyny açýar.

$ ( '#element' ). popover ( 'show' )

.popover ('gizlemek')

Bir elementi açýar.

$ ( '#element' ). popover ( 'gizlemek' )

.popover ('üýtgetmek')

Bir elementi açýar.

$ ( '#element' ). popover ( 'üýtgetmek' )

.popover ('ýok etmek')

Bir elementiň açylýan ýerini gizleýär we ýok edýär.

$ ( '#element' ). popover ( 'ýok etmek' )

Mysal duýduryşlary

Bu plugin bilen ähli duýduryş habarlaryna işden çykarmak funksiýasyny goşuň.

Ulanylyşy

JavaScript arkaly duýduryşy ýatyrmaga mümkinçilik beriň:

$ ( ".alert" ). duýduryş ()

Bellik

data-dismiss="alert"Duýduryşyň ýakyn işlemegini awtomatiki bermek üçin diňe ýakyn düwmäňize goşuň .

<a class = "close" data-dismiss = "alert" href = "#"> & times ; </a>   

Usullar

$ () duýduryş ()

Allhli duýduryşlary ýakyn işlemek bilen örtýär. Closedapylanda duýduryşlaryňyzy janlandyrmak üçin, synpyň .fadewe .insynpyň eýýäm ulanylandygyna göz ýetiriň.

.alert ('ýakyn')

Duýduryşy ýapýar.

$ ( ".alert" ). duýduryş ( 'ýap' )

Wakalar

“Bootstrap” -yň duýduryş synpy duýduryş funksiýasyna girmek üçin birnäçe wakany paş edýär.

$ ( '# meniň duýduryşym' ). daňmak ( 'ýapyk' , funksiýa () {   
  // bir zatlar et…
})

Mysal ulanylyşy

Düwmeler bilen has köp iş ediň. Dolandyryş düwmesi gurallar paneli ýaly has köp komponentler üçin düwmeler toparyny döredýär ýa-da döredýär.

Döwlet

data-loading-text="Loading..."Bir düwmä ýüklemek ýagdaýyny ulanmak üçin goşuň .

<button type = "button" class = "btn btn-primary" data-load-text = "adingüklenýär ..." > adingüklenýän ýagdaý </button>   

Leeke üýtgetmek

data-toggle="button"Bir düwmede üýtgemegi işjeňleşdirmek üçin goşuň .

<düwme görnüşi = "düwme" class = "btn btn-primary" data-toggle = "button" > leeke çalyşmak </button>   

Bellik gutusy

data-toggle="buttons-checkbox"Btn-toparda bellik gutusynyň stilini üýtgetmek üçin goşuň .

<div class = "btn-group" data-toggle = "düwmeler-bellik gutusy" >  
  <button type = "button" class = "btn btn-primary" > Çep </button>  
  <düwme görnüşi = "düwme" synp = "btn btn-başlangyç" > Orta </button>  
  <button type = "button" class = "btn btn-primary" > Sag </button>  
</div>

Radio

data-toggle="buttons-radio"Btn-toparda radio stilini üýtgetmek üçin goşuň .

<div class = "btn-group" data-toggle = "düwmeler-radio" >  
  <button type = "button" class = "btn btn-primary" > Çep </button>  
  <düwme görnüşi = "düwme" synp = "btn btn-başlangyç" > Orta </button>  
  <button type = "button" class = "btn btn-primary" > Sag </button>  
</div>

Ulanylyşy

JavaScript arkaly düwmeleri açyň:

$ ( '.nav-tabs' ). düwmesi ()

Bellik

Maglumat atributlary düwme plugininiň aýrylmaz bölegidir. Dürli bellik görnüşleri üçin aşakdaky mysal koduny gözden geçiriň.

Görnüş

Hiç

Usullar

$ (). düwmesi ('üýtgetmek')

Toggles ýagdaýy basýar. Düwmä işjeňleşdirilen görnüşini berýär.

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

$ (). düwmesi ('ýüklemek')

Düwme ýagdaýyny ýüklemek üçin düzýär - düwmäni öçürýär we teksti ýüklemek üçin teksti çalyşýar. Textüklenýän tekst, maglumat atributyny ulanyp, düwme elementinde kesgitlenmeli data-loading-text.

<düwme görnüşi = "düwme" synp = "btn" maglumat ýüklemek-tekst = "zatlary ýüklemek ..." > ... </button>    

$ (). düwmesi ('täzeden düzmek')

Düwme ýagdaýyny täzeden düzýär - teksti asyl tekste çalyşýar.

$ () düwmesi (setir)

Düwme ýagdaýyny täzeden düzýär - teksti kesgitlenen tekst ýagdaýyna tekst çalşýar.

<düwme görnüşi = "düwme" synp = "btn" data-complete-text = "gutardy!" > ... </button>    
<script>
  $ ( '.btn' ). düwmesi ( 'doly' )
</script>

Takmynan

Akkordeon we nawigasiýa ýaly çöküp bilýän komponentler üçin esasy stilleri we çeýe goldawy alyň.

* Geçiş plagininiň goşulmagyny talap edýär.

Akkordeon

Apseykylýan plugini ulanyp, ýönekeý akkordeon stili widjetini gurduk:

<div class = "akkordeon" id = "akkordeon2" >  
  <div class = "akkordeon-topar" > 
    <div class = "akkordeon-sözbaşy" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _    
        Apsykylýan topar elementi # 1
      </a>
    </div>
    <div id = "collapseOne" class = "akkordeon-bedeniň çökmegi" >  
      <div class = "akkordeon-içki" > 
        Anim pariatur cliche ...
      </div>
    </div>
  </div>
  <div class = "akkordeon-topar" > 
    <div class = "akkordeon-sözbaşy" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _    
        Apsykylýan topar elementi # 2
      </a>
    </div>
    <div id = "collapseTwo" class = "akkordeon-bedeniň çökmegi" >  
      <div class = "akkordeon-içki" > 
        Anim pariatur cliche ...
      </div>
    </div>
  </div>
</div>
...

Şeýle hem, plagini akkordeon belligi bolmazdan ulanyp bilersiňiz. Başga bir elementiň giňelmegini we çökmegini üýtgetmek üçin düwme düzüň.

<button type = "button" class = "btn btn-danger" data-toggle = "ýykylmak" data-target = "#demo" >    
  ýönekeý çökýän
</button>
 
<div id = "demo" class = "ýykylmak" > … </div>  

Ulanylyşy

Maglumat atributlary arkaly

Aykylýan elementiň gözegçiligini awtomatiki bellemek üçin diňe data-toggle="collapse"bir element goşuň . data-targetAýratynlyk data-target, çökmegi ulanmak üçin css saýlaýjysyny kabul edýär. Synpy collapseýykylýan elemente goşuň. Adaty açylmagyny isleseňiz, goşmaça synp goşuň in.

Apsykylýan dolandyryşa akkordeona meňzeş topar dolandyryşyny goşmak üçin maglumat atributyny goşuň data-parent="#selector". Muny hereketde görmek üçin demo serediň.

JavaScript arkaly

El bilen işlediň:

$ ( ".collapse" ). ýykylmak ()

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-parent="".

Usullar

ýykylmak (opsiýalar)

Mazmunyňyzy çöküp bilýän element hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

$ ( '#myCollapsible' ). ýykylmak ({
  üýtgetmek : ýalan 
})

ýykylmak ('üýtgetmek')

Görkezilýän ýa-da gizlenýän ýykylýan elementi açýar.

ýykylmak ('görkezmek')

Apsykylýan elementi görkezýär.

ýykylmak ('gizlemek')

Apsykylýan elementi gizleýär.

Wakalar

“Bootstrap” -yň çökmegi synpy, çökmek funksiýasyna girmek üçin birnäçe wakany paş edýär.

$ ( '#myCollapsible' ). üstünde ( 'gizlenen' , funksiýa () {   
  // bir zatlar et…
})

Karusel

Aşakdaky slaýdşoda karusel ýaly elementleriň üsti bilen tigir sürmek üçin umumy bir plugin we komponent görkezilýär.

Ilkinji kiçijik bellik

Cras justo odio, dapibus ac facilisis, egestas eget quam. Donec id elit metus-da mi porta gravida. Nullam id dolor id nibh ultricies ulag serişdesi.

Ikinji kiçijik bellik

Cras justo odio, dapibus ac facilisis, egestas eget quam. Donec id elit metus-da mi porta gravida. Nullam id dolor id nibh ultricies ulag serişdesi.

Üçünji kiçijik bellik

Cras justo odio, dapibus ac facilisis, egestas eget quam. Donec id elit metus-da mi porta gravida. Nullam id dolor id nibh ultricies ulag serişdesi.

‹ ›

<div id = "myCarousel" class = "karusel slaýd" >  
  <ol class = "karusel-görkezijiler" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "işjeň" > </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" > </li>  
    <li data-target = "#myCarousel" data-slide-to = "2" > </li>  
  </ol>
  <! - Karusel önümleri ->
  <div class = "karusel-içki" > 
    <div class = "işjeň element" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <! - Karusel nav ->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> & lsaquo ; </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next"> & rsaquo ; </a>   
</div>

Ulanylyşy

Maglumat atributlary arkaly

Karuseliň ýagdaýyny aňsatlyk bilen dolandyrmak üçin maglumat atributlaryny ulanyň. data-slideaçar sözleri kabul edýär prevýa-da nextslaýd ýagdaýyny häzirki ýagdaýyna görä üýtgedýär. Ativea- da bolmasa, data-slide-toçig slaýd indeksini karusele geçirmek üçin ulanyň data-slide-to="2", bu slaýd ýagdaýyny belli bir görkezijä başlaýar 0.

JavaScript arkaly

Karusel bilen el bilen jaň ediň:

$ ( '.carousel' ). karusel ()

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScriptz arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-interval="".

Usullar

Karusel (opsiýalar)

Karuseli islege bagly görnüşler objectbilen başlaýar we zatlaryň üsti bilen tigir sürüp başlaýar.

$ ( '.carousel' ). karusel ({
  aralyk : 2000 
})

.carousel ('sikl')

Karusel önümleriniň çepden saga aýlanmagy.

.carousel ('pauza')

Karuseliň zatlaryň üsti bilen tigir sürmegini bes edýär.

Karusel (san)

Karuseli belli bir ramka aýlaýar (massiwlere meňzeş 0 esasly).

.carousel ('öňki')

Öňki elemente aýlawlar.

.carousel ('indiki')

Indiki elemente aýlawlar.

Wakalar

“Bootstrap” -yň karusel synpy karuseliň işlemegi üçin iki hadysany paş edýär.

Mysal

Islendik görnüşdäki tekst girizişi bilen ajaýyp görnüşli kelleleri çalt döretmek üçin esasy, aňsat uzaldylan plugin.

<giriş görnüşi = "tekst" data-provide = "typeahead" >  

autocomplete="off"Başlangyç brauzer menýusynyň “Bootstrap” görnüşiniň açylmagynyň üstünde görünmeginiň öňüni alarsyňyz .

Ulanylyşy

Maglumat atributlary arkaly

Aboveokardaky mysalda görkezilişi ýaly tipahead funksiýasy bolan bir elementi hasaba almak üçin maglumat atributlaryny goşuň.

JavaScript arkaly

Typazuw görnüşine el bilen jaň ediň:

$ ( '. görnüşi' ). tipahead ()

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-source="".

Usullar

görnüşi (görnüşleri)

Typeazuw görnüşi bilen giriş başlaýar.

Mysal

Çep tarapdaky subnawigasiýa affiks plagininiň göni ýaýlymydyr.

Ulanylyşy

Maglumat atributlary arkaly

Islendik elemente affiks häsiýetini aňsatlyk bilen goşmak üçin diňe data-spy="affix"içalyçylyk etmek isleýän elementiňize goşuň. Soňra bir elementiň haçan ýapyljakdygyny we öçüriljekdigini kesgitlemek üçin ofsetleri ulanyň.

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

JavaScript arkaly

JavaScript arkaly affiks plaginine jaň ediň:

$ ( '#navbar' ). affiksi ()

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-offset-top="200".