Bootstrap

Bootstrap üçin Javascript

“Bootstrap” -yň komponentlerini durmuşa geçiriň, indi 12 sany “ jQuery ” plugin bilen.

jQuery pluginleri Başlamak üçin onlarça Bootstrap plugin

Başlar! Avhli javascript pluginleri jQuery-iň iň soňky wersiýasyny talap edýär.

Modallar bootstrap-modal.js

Modallar hakda

Düzgünli, ýöne çeýe, adaty iň az talap edilýän funksiýa we akylly başlangyçlar bilen adaty javascript modal pluginini alyň.

Faýly göçürip al

Statik mysal

Aşakda statiki taýdan görkezilen modal.

×

Modal sözbaşy

Bir gowy beden…

.Akyn Üýtgetmeleri ýatda sakla

Göni görkeziş

Aşakdaky düwmä basyp, javascript arkaly modaly üýtgediň. Aşakdan süýşer we sahypanyň ýokarsyndan pese gaçar.

Demo modaly işe giriziň

Bootstrap-modal ulanmak

Javascript arkaly modala jaň ediň:

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

Görnüş

Ady görnüşi gaýybana beýany
fon boolean dogry Modal-fon elementini öz içine alýar. staticAtivea- da bolmasa, basylanda modaly ýapmaýan fon üçin kesgitläň .
klawiatura boolean dogry Gaçmak düwmesi basylanda modaly ýapýar
görkezmek boolean dogry Başlanylanda modaly görkezýär.

Bellik

Javascriptiň bir setirini ýazman, sahypaňyzdaky modallary aňsatlyk bilen işjeňleşdirip bilersiňiz. Diňe modal element idine laýyk gelýän ýa-da data-toggle="modal"kontrol elementini düzüň we basylanda modalyňyzy işe girizer.data-target="#foo"href="#foo"

Mundan başga-da, modal meseläňize opsiýalary goşmak üçin, dolandyryş elementine ýa-da modal belligiň özünde goşmaça maglumat atributlary hökmünde goşuň.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal"> Modal açmak </a>    
  1. <div class = "modal" id = "myModal" >  
  2.   <div class = "modal-sözbaşy" > 
  3.     <a class = "close" data-dismiss = "modal"> × </a> _  
  4.     <h3> Modal sözbaşy </h3>
  5.   </div>
  6.   <div class = "modal-body" > 
  7.     <p> Bir gowy beden… </p>
  8.   </div>
  9.   <div class = "modal-footer" > 
  10.     <a href = "#" class = "btn"> Closeapyň </a> _  
  11.     <a href = "#" class = "btn btn-primary"> Üýtgeşmeleri ýatda saklaň </a>  
  12.   </div>
  13. </div>
Başlar! Modalyňyzyň içerde we daşarda janlanmagyny isleseňiz, elemente bir .fadesynp goşuň .modal(muny hereketde görmek üçin demo serediň) we bootstrap-transition.js-i goşuň.

Usullar

.modal (opsiýalar)

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

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

.modal ('üýtgetmek')

Modal bilen el bilen çalşyň.

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

.modal ('görkezmek')

Modal bilen el bilen açýar.

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

.modal ('gizlemek')

Modaly el bilen gizleýär.

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

Wakalar

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

Waka Düşündiriş
görkezmek showBu waka mysal usuly çagyrylanda derrew ýanýar .
görkezildi Bu waka modal ulanyja görünen mahaly atylýar (css geçişleriniň tamamlanmagyna garaşýar).
gizle Bu waka hidemysal usuly çagyrylanda derrew atylýar.
gizlenen Bu waka, modal ulanyjydan gizlenip gutarandan soň atylýar (css geçişleriniň tamamlanmagyna garaşýar). 
  1. $ ( '#myModal' ). üstünde ( 'gizlenen' , funksiýa () {   
  2.   // bir zatlar et…
  3. })

ScrollSpy bootstrap-scrollspy.js

“ScrollSpy” plugin, aýlaw pozisiýasyna esaslanyp nav nyşanlaryny awtomatiki täzelemek üçin.

Faýly göçürip al

Scrollspy bilen navbar

Aşakdaky meýdany aýlaň we nawigasiýa täzelenmesine tomaşa ediň. Açylýan aşaky elementler hem görkeziler. Synap görüň!

@fat

Mahabat leggings açary, ertirlik nahary sungat partiýasy dolor zähmeti. “Pitchfork yr enim lo-fi” kwi satmazdan ozal. “Tumblr” ferma-stoluň üstünde welosiped hukugy näme bolsa-da. Anim keffiyeh kardigan. Velit seitan mcsweeney-iň surat stendinde 3 möjek aýy irure. Cosby switer lomo jean şortikleri, williamsburg hoodie minim qui, belki-de siz olar hakda eşitmedik bolsaňyz we kardigan ynam gaznasy culpa biodiesel wes anderson estetiki. Nihil tatuirovka eden akusamus, krediti biodiesel keffiyeh senetçi ullamco netijesi.

@mdo

Weniam marfa murtly skeytbord, fugiat velit pitchfork sakgalyny özüne çekýär. Freegan sakgal aliqua cupidatat mcsweeney's vero. “Cupidatat dört loko nisi”, “helvetica nulla carles”. Tatuirovka edilen kosbi switer iýmit maşyny, mcsweeney's freegan winil. Lo-fi wes anderson +1 bölüm. Karles estetiki däl maşklary ýuwaşlaşdyrýar. Bruklin senetçilik piwo wise keytar deserunt.

biri

Occaecat commodo aliqua delectus. Fap senet piwo deserunt skateboard ea. “Lomo” welosiped hukuklary, banna mi, velit ea sunt indiki derejeli magna weniýamda ýeke-täk kofe. Lifeokary durmuş id vinil, echo park netijesi alikip banh mi pitchfork. Vero VHS est adipisising. “Consectetur nisi DIY” minimal habarçy sumkasy. “Cred ex”, dowamly “delectus consectetur fanny pack iphone”.

iki

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

“Keytar twee” blogy, nahar ýük maşyny näme bolsa-da. Sapiente synth id çaklama. “Locavore sed helvetica cliche irony”, ýyldyrym çakmalary, belki-de, “glýutensiz lo-fi fap alikipi” sebäpli eşitmediňiz. Satylmanka zähmet çekiň, terri Riçardson proident ertirlik nahary neskiunt quis cosby switer pariatur keffiyeh ut helvetica senetçisi. Kardigan senet piwo seitan taýýar mahmal. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco ýyldyrymlary.

Bootstrap-scrollspy.js ulanmak

Javascript arkaly scrollspy jaň ediň:

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

Bellik

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

  1. <body data-spy = "aýlamak" > ... </body>
Başlar! Navbar baglanyşyklarynda çözülip bilinýän ID nyşanlary bolmaly. Mysal üçin, <a href="#home">home</a>domdaky ýaly bir zada laýyk bolmaly <div id="home"></div>.

Görnüş

Ady görnüşi gaýybana beýany
ofset sany 10 Aýlanyş ýagdaýyny hasaplanyňyzda ýokardan ýapyljak pikseller.

Çekip bolýan tablar bootstrap-tab.js

Bu plugin ýerli mazmuna geçmek üçin çalt, dinamiki tab we tabletka funksiýasyny goşýar.

Faýly göçürip al

Mysal bellikleri

Aşakdaky menýu arkaly hem gizlin panelleriň arasynda geçmek üçin aşakdaky goýmalara basyň.

Çig denim, Ostin jeans şortikleri hakda eşitmedik bolsaňyz gerek. Nesciunt tofu stumptown aliqua, retro synth master arassalamak. Murtuň gysylmagy, williamsburg carles vegan helvetica. Reprehenderit gassap retro keffiyeh dreamcatcher synth. Cosby switer eu banh mi, qui irure terry richardson ex squid. “Aliquip placeat salvia cillum iphone”. Seitan aliquip quis cardigan amerikan eşigi, gassap voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Bootstrap-tab.js ulanmak

Javascript arkaly tablisa tablisalaryny açyň:

  1. $ ( '#myTab' ). goýmasy ( 'görkezmek' )

Bellik

Diňe bir elementi görkezip data-toggle="tab"ýa -da haýsydyr bir javascript ýazmazdan, tab ýa-da tabletka nawigasiýasyny işjeňleşdirip bilersiňiz .data-toggle="pill"

  1. <ul class = "nav nav-tabs" > 
  2.   <li> <a href = "#home" data-toggle = "tab"> Baş sahypa </a> </li >  
  3.   <li> <a href = "#profile" data-toggle = "tab"> Profil </a> </li >  
  4.   <li> <a href = "#messages" data-toggle = "tab"> Habarlar </a> </li >  
  5.   <li> <a href = "#settings" data-toggle = "tab"> Sazlamalar </a> </li >  
  6. </ul>

Usullar

$ () goýmasy

Salgy elementini we mazmun gapyny işjeňleşdirýär. Salgyda ýa-da domdäki konteýner düwünini nyşana alýan "maglumat nyşany" ýa-da "href" bolmaly.

  1. <ul class = "nav nav-tabs" > 
  2.   <li class = "işjeň" > <a href = "#home"> Öý </a> </li>  
  3.   <li> <a href = "#profile"> Profil </a> </li> 
  4.   <li> <a href = "#messages"> Habarlar </a> </li> 
  5.   <li> <a href = "#settings"> Sazlamalar </a> </li> 
  6. </ul>
  7.  
  8. <div class = "tab-content" > 
  9.   <div class = "tab-pane işjeň" id = "home" > ... </div>  
  10.   <div class = "tab-pane" id = "profile" > ... </div>  
  11.   <div class = "tab-pane" id = "habarlar" > ... </div>  
  12.   <div class = "tab-pane" id = "sazlamalar" > ... </div>  
  13. </div>
  14.  
  15. <script>
  16.   $ ( funksiýa () {  
  17.     $ ( '.tablar a: soňky' ). goýmasy ( 'görkezmek' )
  18.   })
  19. </script>

Wakalar

Waka Düşündiriş
görkezmek Bu waka tab goýmasynda ýanýar, ýöne täze goýma görkezilmänkä. Işjeň goýmany we öňki işjeň goýmany degişlilikde ulanyň event.targetwe nyşana alyň.event.relatedTarget
görkezildi Bu waka, görkezme görkezilenden soň tab goýmasynda ýanýar. Işjeň goýmany we öňki işjeň goýmany degişlilikde ulanyň event.targetwe nyşana alyň.event.relatedTarget 
  1. $ ( 'a [data-toggle = "tab"]' ). üstünde ( 'görkezilýär' , funksiýa ( e ) {   
  2.   e . nyşan // işjeňleşdirilen tab
  3.   e . baglanyşyklyTarget // öňki goýma
  4. })

Gurallar bootstrap- tooltip.js

Gurallar barada

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

Faýly göçürip al

Gurallar üçin mysal

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

Indiki derejeli berk balak keffiyeh , belki , olar hakda eşitmediňiz. Suratly stend sakgal çig denim harplary wegetarian habarçy sumkasy. Fermer-stol stoluna seýtan, mcsweeney-iň durnukly kwino 8 bitli amerikan eşiginde terri Riçardson winil çembraýy bar . Sakgal saklanýar, kardiganlar banh mi lomo ýyldyrym çakýar. Tofu biodizel williamsburg marfa, dört loko msweeney-iň arassa wegetarian kamerasy. Hakykatdanam gülkünç bir ussat, haýsy açar, sahna fermasy-stol banksy Austin twitter , freegan kredit denim ýeke-täk kofe wirusly.

Bootstrap-tooltip.js ulanmak

Gurallar maslahatyny javascript arkaly işlediň:

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

Görnüş

Ady görnüşi gaýybana beýany
animasiýa boolean dogry gurallar maslahatyna css solgun geçişini ulanyň
ýerleşdirmek setir | funksiýa 'ýokarky' gurallar maslahatyny nädip ýerleşdirmeli - ýokarky | aşagy | çep | dogry
saýlaýjy setir ýalan Eger saýlaýjy üpjün edilse, gurallar obýektleri görkezilen nyşanlara berler.
ady setir | funksiýasy '' "titul" belligi ýok bolsa, adaty at bahasy
trigger setir 'aýlanmak' gurallar maslahatynyň nädip başlamagy - aýlanmak | fokus | gollanma
gijikdirmek sany | obýekt 0

gural görkezmesini görkezmek we gizlemek (ms)

San berilse, gizlemek / görkezmek üçin gijikdirme ulanylýar

Obýektiň gurluşy:delay: { show: 500, hide: 100 }
Başlar! Aýry-aýry gurallar üçin opsiýalary maglumatlar atributlaryny ulanmak arkaly kesgitläp bolýar.

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ň.

  1. <a href = "#" rel = "tooltip" title = "birinji tooltip"> üstümden aýlan </a>

Usullar

$ (). gurallar maslahaty (opsiýalar)

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

.tooltip ('görkezmek')

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

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

.tooltip ('gizlemek')

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

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

.tooltip ('üýtgetmek')

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

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

Popovers bootstrap-popover.js

Açyjylar hakda

Ikinji derejeli maglumat üçin islendik elemente, “iPad” -daky ýaly mazmunyň kiçi gatlaklaryny goşuň.

* Tooltip -iň goşulmagyny talap edýär

Faýly göçürip al

Mysal üçin, popover

Açylýan düwmäni açmak üçin düwmä basyň.

popover üçin aýlan

Bootstrap-popover.js ulanmak

Javascript arkaly açylanlary açyň:

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

Görnüş

Ady görnüşi gaýybana beýany
animasiýa boolean dogry gurallar maslahatyna css solgun geçişini ulanyň
ýerleşdirmek setir | funksiýa 'dogry' çykýan ýeri nädip ýerleşdirmeli - ýokarky | aşagy | çep | dogry
saýlaýjy setir ýalan saýlaýjy üpjün edilse, gurallar görkezilen obýektler görkezilen nyşanlara berler
trigger setir 'aýlanmak' gurallar maslahatynyň nädip başlamagy - aýlanmak | fokus | gollanma
ady setir | funksiýasy '' "titul" häsiýeti ýok bolsa, deslapky at bahasy
mazmuny setir | funksiýasy '' "maglumat-mazmun" häsiýeti ýok bolsa, deslapky mazmun bahasy
gijikdirmek sany | obýekt 0

açylýan ýeri görkezmek we gizlemek (ms)

San berilse, gizlemek / görkezmek üçin gijikdirme ulanylýar

Obýektiň gurluşy:delay: { show: 500, hide: 100 }
Başlar! Aýry-aýry açyjylar üçin opsiýalar maglumat atributlaryny ulanmak arkaly kesgitlenip bilner.

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.

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

.popover ('gizlemek')

Bir elementi açýar.

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

.popover ('üýtgetmek')

Bir elementi açýar.

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

Duýduryş habarlary bootstrap-alert.js

Duýduryşlar barada

Duýduryş plugin duýduryşlara ýakyn işlemek üçin kiçijik synpdyr.

Göçürip al

Mysal duýduryşlary

Duýduryşlar plugin yzygiderli duýduryş habarlarynda işleýär we habarlary bloklaýar.

× Mukaddes guamamol! Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz.
×

Aý, gysga! Erroralňyşlyk boldy!

Muny we muny üýtgediň we gaýtadan synanyşyň. Duis mollis, täjir däl luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus amet fermentum oturýar.

Bu çäräni görüň Ora-da muny et

Bootstrap-alert.js ulanmak

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

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

Bellik

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

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

Usullar

$ () duýduryş ()

Allhli duýduryşlary ýakyn işlemek bilen örtýär. .fadeClosedapylanda duýduryşlaryňyzy janlandyrmak üçin, eýýäm olara we synplara degişlidigine göz ýetiriň .in.

.alert ('ýakyn')

Duýduryşy ýapýar.

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

Wakalar

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

Waka Düşündiriş
ýakyn closeBu waka mysal usuly çagyrylanda derrew ýanýar .
ýapyk Bu waka duýduryş ýapylanda atylýar (css geçişleriniň tamamlanmagyna garaşýar). 
  1. $ ( '# meniň duýduryşym' ). daňmak ( 'ýapyk' , funksiýa () {   
  2.   // bir zatlar et…
  3. })

Düwmeler bootstrap-button.js

Takmynan

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

Faýly göçürip al

Mysal ulanylyşy

Döwletler we üýtgetmek üçin düwmeler pluginini ulanyň.

Döwlet
Leeke üýtgetmek
Bellik gutusy
Radio

Bootstrap-button.js ulanmak

Javascript arkaly düwmeleri işlediň:

  1. $ ( '.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ň.

  1. <! - Bir düwmede üýtgemegi işjeňleşdirmek üçin data-toggle = "düwme" goşuň ->
  2. <button class = "btn" data-toggle = "button" > leeke çalyşmak </button>  
  3.  
  4. <! - btn-toparda bellik gutusynyň stilini üýtgetmek üçin data-toggle = "düwmeler-bellik gutusy" goşuň ->
  5. <div class = "btn-group" data-toggle = "düwmeler-bellik gutusy" >  
  6.   <button class = "btn" > Çep </button> 
  7.   <button class = "btn" > Orta </button> 
  8.   <button class = "btn" > Sag </button> 
  9. </div>
  10.  
  11. <! - btn-toparda radio stilini üýtgetmek üçin data-toggle = "düwmeler-radio" goşuň ->
  12. <div class = "btn-group" data-toggle = "düwmeler-radio" >  
  13.   <button class = "btn" > Çep </button> 
  14.   <button class = "btn" > Orta </button> 
  15.   <button class = "btn" > Sag </button> 
  16. </div>

Usullar

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

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

Başlar! Aýratynlygy ulanyp, düwmäni awtomatiki usulda açyp bilersiňiz data-toggle. 
  1. <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.

  1. <button class = "btn" data-load-text = "zatlary ýüklemek ..." > ... </button>
Başlar! Firefox, sahypa ýükleriniň arasynda ýapyk ýagdaýy dowam etdirýär . Munuň üçin bir çözgüt ulanmak autocomplete="off".

$ (). 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.

  1. <button class = "btn" data-complete-text = "gutardy!" > ... </button>   
  2. <script>
  3.   $ ( '.btn' ). düwmesi ( 'doly' )
  4. </script>

Bootstrap-collapse.js ýykyň

Takmynan

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

Faýly göçürip al

Akkordeon

Apseykylan plagini ulanyp, akkordeon stiliniň ýönekeý widjetini gurduk:

Apsykylýan topar elementi # 1
Anim pariatur cliche reprehenderit, enim eiusmod ýokary durmuş accusamus terry richardson ad squid. 3 möjek aýy officia aute, cupidatat däl skateboard dolor ertirlik. Azyk ýük maşyny quinoa nesciunt laborum eiusmod. Ertirlik nahary 3 möjek aý tempor, sunt aliqua bir guş kofe nulla assomenda shoreditch we ş.m. Nihil anim keffiyeh helvetica, piwo zähmeti wes anderson kredit nesciunt sapiente ea proident. Mahabat wegetarian aýratyn gassap wise-lomo. “Leggings occaecat senet” piwo fermasy-stol, çig denim estetiki synth nesciunt, belki-de, olaryň “VHS” işini dowam etdirýändigini eşitmediňiz.
Apsykylýan topar elementi # 2
Anim pariatur cliche reprehenderit, enim eiusmod ýokary durmuş accusamus terry richardson ad squid. 3 möjek aýy officia aute, cupidatat däl skateboard dolor ertirlik. Azyk ýük maşyny quinoa nesciunt laborum eiusmod. Ertirlik nahary 3 möjek aý tempor, sunt aliqua bir guş kofe nulla assomenda shoreditch we ş.m. Nihil anim keffiyeh helvetica, piwo zähmeti wes anderson kredit nesciunt sapiente ea proident. Mahabat wegetarian aýratyn gassap wise-lomo. “Leggings occaecat senet” piwo fermasy-stol, çig denim estetiki synth nesciunt, belki-de, olaryň “VHS” işini dowam etdirýändigini eşitmediňiz.
Apsykylýan topar elementi # 3
Anim pariatur cliche reprehenderit, enim eiusmod ýokary durmuş accusamus terry richardson ad squid. 3 möjek aýy officia aute, cupidatat däl skateboard dolor ertirlik. Azyk ýük maşyny quinoa nesciunt laborum eiusmod. Ertirlik nahary 3 möjek aý tempor, sunt aliqua bir guş kofe nulla assomenda shoreditch we ş.m. Nihil anim keffiyeh helvetica, piwo zähmeti wes anderson kredit nesciunt sapiente ea proident. Mahabat wegetarian aýratyn gassap wise-lomo. “Leggings occaecat senet” piwo fermasy-stol, çig denim estetiki synth nesciunt, belki-de, olaryň “VHS” işini dowam etdirýändigini eşitmediňiz.

Bootstrap-collapse.js ulanmak

Javascript arkaly açyň:

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

Görnüş

Ady görnüşi gaýybana beýany
ene-atasy saýlaýjy ýalan Eger saýlaýjy bolsa, bu ýykylýan element görkezilende görkezilen ene-atanyň aşagyndaky ähli çöküp bilýän elementler ýapylar. (adaty akkordeon häsiýetine meňzeýär)
üýtgetmek boolean dogry Apykylýan elementi çakylyk bilen üýtgedýär

Bellik

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.

  1. <button class = "btn btn-danger" data-toggle = "ýykylmak" data-target = "#demo" >   
  2.   ýönekeý çökýän
  3. </button>
  4.  
  5. <div id = "demo" class = "ýykylmak" > … </div>
Başlar! 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ň.

Usullar

ýykylmak (opsiýalar)

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

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

ýykylmak ('üýtgetmek')

Görkezilýän ýa-da gizlenýän elementi çalyşý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.

Waka Düşündiriş
görkezmek showBu waka mysal usuly çagyrylanda derrew ýanýar .
görkezildi Bu hadysa, çöküş elementi ulanyja görünen mahaly atylýar (css geçişleriniň tamamlanmagyna garaşýar).
gizle hideBu waka usul çagyrylanda derrew atylýar .
gizlenen Bu hadysa, ulanyjydan çökmek elementi gizlenende (css geçişleriniň tamamlanmagyna garaşar) atylýar. 
  1. $ ( '#myCollapsible' ). üstünde ( 'gizlenen' , funksiýa () {   
  2.   // bir zatlar et…
  3. })

Typeahead bootstrap-typeahead.js

Takmynan

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

Faýly göçürip al

Mysal

Typeazuw netijelerini görkezmek üçin aşakdaky meýdana ýazyp başlaň.

Bootstrap-typeahead.js ulanmak

Javascript arkaly ýazuw görnüşine jaň ediň:

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

Görnüş

Ady görnüşi gaýybana beýany
Çeşme massiw [] Garşylamak üçin maglumat çeşmesi.
elementler sany 8 Açylýan ýerde görkezilmeli zatlaryň iň köp sany.
gabat gelýän funksiýasy duýgur däl Talabyň bir elemente gabat gelýändigini kesgitlemek üçin ulanylýan usul. itemTalaby barlamak üçin ýekeje argumenti kabul edýär . Häzirki soraga giriň this.query. Talap gabat gelýän bolsa, bir bulany yzyna gaýtaryň true.
sortlaýjy funksiýasy takyk gabat gelýän,
kese duýgur,
kese duýgur		 Awtomatiki netijeleri tertiplemek üçin ulanylýan usul. Argeke-täk argumenti kabul edýär itemswe ýazuw nusgasynyň çägine eýe. Häzirki soraga serediň this.query.
tapawutlandyryjy funksiýasy defaulthli gabat gelýän gabat gelýänleri görkezýär Awtomatiki netijeleri görkezmek üçin ulanylýan usul. Argeke-täk argumenti kabul edýär itemwe ýazuw nusgasynyň çägine eýe. Html-i yzyna gaýtarmaly.

Bellik

“Typeahead” funksiýasy bilen bir elementi hasaba almak üçin maglumat atributlaryny goşuň.

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

Usullar

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

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