Bootstrap-erako Javascript

Eman Bootstrap-en osagaiei bizitza, orain jQuery -ren 12 plugin pertsonalizatuekin.

Modalak

Javascript modalaren plugin arrunta, baina malgua, hartu behar den gutxieneko funtzionaltasun eta lehenespen adimendunekin soilik.

Goitibeherak

Gehitu goitibeherako menuak Bootstrap-en ia ezeri plugin sinple honekin. Bootstrap-ek goitibeherako menuaren laguntza osoa du nabigazio barran, fitxetan eta piluletan.

Scrollspy

Erabili scrollspy zure nabigazio-barrako estekak automatikoki eguneratzeko uneko esteka aktiboa korritze-posizioan oinarrituta erakusteko.

Txandaka daitezkeen fitxak

Erabili plugin hau fitxak eta pilulak erabilgarriagoak izateko, tokiko edukiaren tabulazio-paneletatik aldatzeko aukera emanez.

Erreminta-aholkuak

jQuery Tipsy pluginaren ikuspegi berri bat, Tooltips ez da irudietan oinarritzen; CSS3 erabiltzen dute animazioetarako eta datu-atributuak tokiko tituluak biltegiratzeko.

Popovers *

Gehitu edukiaren gainjartze txikiak, iPad-en bezalakoak, bigarren mailako informazioa gordetzeko edozein elementuri.

* Tresna- aholkuak sartzea eskatzen du

Alerta-mezuak

Alerta plugina abisuei funtzionaltasun hurbilak gehitzeko klase txikia da.

Botoiak

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

Tolestu

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

Karrusela

Sortu ibilaldi bat edukien aurkezpen interaktibo bat eskaintzeko nahi duzun edukia.

Idatzi aurretik

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

Trantsizioak *

Trantsizio-efektu sinpleetarako, sartu bootstrap-transition.js behin modalak sartzeko edo alertak itzaltzeko.

* Pluginetan animaziorako beharrezkoa da

Buruak gora! Javascript plugin guztiek jQueryren azken bertsioa behar dute.

Modalei buruz

Javascript modalaren plugin arrunta, baina malgua, hartu behar den gutxieneko funtzionaltasun eta lehenespen adimendunekin soilik.

Deskargatu fitxategia

Adibide estatikoa

Jarraian estatikoki errendatutako modal bat dago.

Zuzeneko demoa

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

Abiarazi demo modala

Bootstrap-modal erabiliz

Deitu modala javascript bidez:

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

Aukerak

Izena mota lehenetsia deskribapena
atzealdea boolearra egia Atzeko plano-elementu modala dakar. Bestela, zehaztu staticklik egitean modala ixten ez duen atzeko planoa.
teklatua boolearra egia Ihes tekla sakatzen denean modala ixten du
erakutsi boolearra egia Hasieratzen denean modala erakusten du.

Markatzea

Modalak zure orrialdean erraz aktibatu ditzakezu javascript lerro bakar bat idatzi beharrik gabe. Konfiguratu besterik ez dago elementu modaleko ID bati dagokion data-toggle="modal"kontroladore-elementu batean , eta sakatzean, zure modala abiaraziko du.data-target="#foo"href="#foo"

Gainera, zure instantzia modalari aukerak gehitzeko, sartu datu-atributu gehigarri gisa kontrol-elementuan edo marka modalean bertan.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Abiarazi modala </a>
  1. <div class = "modal hide" id = "nireModala" >
  2. <div class = "goiburu-modala" >
  3. <button type = "button" class = "close" data-dismiss = "modala" > × </button>
  4. <h3> Goiburu modala </h3>
  5. </div>
  6. <div class = "gorputz-modala" >
  7. <p> Gorputz fin bat... </p>
  8. </div>
  9. <div class = "modal-oina" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Itxi </a>
  11. <a href = "#" class = "btn btn-primary" > Gorde aldaketak </a>
  12. </div>
  13. </div>
Buruak gora! Zure modala sartu eta kanpo animatzea nahi baduzu, gehitu .fadeklase bat .modalelementuari (ikus demoa hau martxan ikusteko) eta sartu bootstrap-transition.js.

Metodoak

.modala(aukerak)

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

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

.modal('toggle')

Modal bat eskuz aldatzen du.

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

.modal('erakutsi')

Eskuz modal bat irekitzen du.

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

.modal('ezkutatu')

Eskuz ezkutatzen du modal bat.

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

Gertaerak

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

Gertaera Deskribapena
erakutsi Gertaera hau berehala abiarazten da showinstantzia-metodoa deitzen denean.
erakusten Gertaera hau modua erabiltzailearentzat ikusgai jarri denean abiarazten da (css trantsizioak amaitu arte itxarongo da).
ezkutatu Gertaera hau berehala abiarazten da hideinstantzia-metodoa deitzen denean.
ezkutuan Gertaera hau modua erabiltzaileari ezkutatzen amaitzen denean abiarazten da (css trantsizioak amaitu arte itxarongo da).
  1. $ ( '#nireModala' ). on ( 'ezkutatuta' , funtzioa () {
  2. // Zerbait egin…
  3. })

ScrollSpy plugina nabigazio-helburuak automatikoki eguneratzeko da, korritze-posizioan oinarrituta.

Deskargatu fitxategia

Nabigazio barraren adibidea scrollspy-rekin

Joan beheko eremuan eta ikusi nabigazioaren eguneraketa. Goitibeherako azpielementuak ere nabarmenduko dira. Saiatu!

@potolo

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi qui agortu aurretik. Tumblr baserritik mahairako bizikletaren eskubideak edozer. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby jertsea lomo jean galtza motzak, williamsburg hoodie gutxi batzuk ziurrenik ez duzu horien berri eta cardigan trust fund culpa biodiesel wes anderson estetika. Nihil tatuatu akusamus, kred ironia biodiesel keffiyeh artisau ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork bizar. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat lau loko nisi, ea helvetica nulla carles. Cosby jertse tatuatua food truck, mcsweeney-ren quis non freegan biniloa. Lo-fi wes anderson +1 sartoriala. Carles ez ariketa estetikoa quis gentrify. Brooklyn adipisicing artisau garagardo vice keytar deserunt.

bat

Occaecat commodo aliqua delectus. Fap artisau garagardo deserunt skateboard ea. Lomo bizikleta eskubideak adipisicing banh mi, belit ea dira hurrengo maila lokalizatu jatorri bakarreko kafea magna veniam. High life id biniloa, echo park consequat quis aliquip banh mi pitchfork. Vero VHS adipisicing da. Consectetur nisi DIY gutxieneko mezulari poltsa. Sinetsita dago, iphone-ko fanny-pack bateratu iraunkorra.

bi

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 bloga, culpa messenger poltsa marfa edozein dela ere delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica topiko ironia, thundercats ziurrenik ez duzu horien berri entzun hoodie glutenik gabeko lo-fi fap aliquip. Lan egin agortu baino lehen, Terry Richardson-ek hamaiketakoa egin behar izan zuen, eta kosby jertsea, bestela, artisau helvetikoa. Cardigan artisau garagardoa seitan readymade belit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Bootstrap-scrollspy.js erabiliz

Deitu scrollspy javascript bidez:

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

Markatzea

Scrollspy portaera zure goiko barrako nabigazioan erraz gehitzeko, gehitu data-spy="scroll"espioi nahi duzun elementuari (normalean hau gorputza izango litzateke).

  1. <body data-spy = "korritu" > ... </body>
Buruak gora! Nabbar-en estekek id-helburu konpongarriak izan behar dituzte. Adibidez, <a href="#home">home</a>must bat dom bezalako zerbaiti dagokio <div id="home"></div>.

Metodoak

.scrollspy('freskatu')

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

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

Aukerak

Izena mota lehenetsia deskribapena
desplazamendu zenbakia 10 Goitik desplazatzeko pixelak korrituaren posizioa kalkulatzean.

Gertaerak

Gertaera Deskribapena
aktibatu Gertaera hau scrollspy-k elementu berri bat aktibatzen duen bakoitzean abiarazten da.

Plugin honek fitxa eta pilulen funtzionaltasun azkarrak eta dinamikoak gehitzen ditu tokiko edukitik igarotzeko.

Deskargatu fitxategia

Adibide fitxak

Egin klik beheko fitxetan ezkutuko panelen artean aldatzeko, baita goitibeherako menuen bidez ere.

Denim gordina ziurrenik ez duzu Austin galtza motzak entzun. Nesciunt tofu stumptown aliqua, retro synth master garbiketa. Bibote klixe denbora, williamsburg carles vegan helvetica. Rerehenderit harakina retro keffiyeh dreamcatcher sintetizadorea. Cosby jertse eu banh mi, qui irure terry richardson ex squid. Jarri salvia cillum iphone. Seitan aliquip quis cardigan american apparel, harakina 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 erabiliz

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

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

Banakako fitxak hainbat modutara aktibatu ditzakezu:

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

Markatzea

Fitxa edo pilulen nabigazioa aktiba dezakezu javascriptik idatzi gabe elementu batean data-toggle="tab"edo zehaztu besterik ez baduzu. eta klaseak fitxara data-toggle="pill"gehitzeak bootstrap fitxaren estiloa aplikatuko du.navnav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Hasiera </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profila </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Mezuak </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Ezarpenak </a></li>
  6. </ul>

Metodoak

$().tab

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

  1. <ul class = "nav nav-tabs" id = "nireTab" >
  2. <li class = "active" ><a href = "#home" > Hasiera </a></li>
  3. <li><a href = "#profile" > Profila </a></li>
  4. <li><a href = "#messages" > Mezuak </a></li>
  5. <li><a href = "#settings" > Ezarpenak </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-edukia" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profila" > ... </div>
  11. <div class = "tab-pane" id = "mezuak" > ... </div>
  12. <div class = "tab-pane" id = "ezarpenak" > ... </div>
  13. </div>
  14.  
  15. <gidoia>
  16. $ ( funtzioa () {
  17. $ ( '#nireTab a:azkena' ). fitxa ( 'erakutsi' );
  18. })
  19. </script>

Gertaerak

Gertaera Deskribapena
erakutsi Gertaera hau fitxen erakustaldian abiarazten da, baina fitxa berria erakutsi aurretik. Erabili event.targeteta event.relatedTargetfitxa aktibora eta aurreko fitxa aktibora bideratzeko (eskuragarri badago), hurrenez hurren.
erakusten Gertaera hau fitxen erakustaldian abiarazten da fitxa bat erakutsi ondoren. Erabili event.targeteta event.relatedTargetfitxa aktibora eta aurreko fitxa aktibora bideratzeko (eskuragarri badago), hurrenez hurren.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'erakutsi' , funtzioa ( e ) {
  2. e . xede // fitxa aktibatuta
  3. e . relatedTarget // aurreko fitxa
  4. })

Tresna-aholkuei buruz

Jason Frame-k idatzitako jQuery.tipsy plugin bikainean inspiratuta; Tresna-aholkuak bertsio eguneratua dira, irudietan oinarritzen ez direnak, animazioetarako css3 erabiltzen dutenak eta titulu lokalak biltegiratzeko datu-atributuak.

Deskargatu fitxategia

Tooltips-en erabilera adibidea

Pasatu ondoko esteken gainean tresna-aholkuak ikusteko:

Praka estuak hurrengo mailan keffiyeh ziurrenik ez duzu horien berri. Photo booth beard raw denim letterpress vegan messenger poltsa stumptown. Baserritik mahairako seitan, mcsweeney's fixie sustainable quinoa 8 bit American Apparel- ek terry richardson binilozko chambray dute. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesela williamsburg marfa, lau loko mcsweeney's cleanse vegan chambray. Artisau benetan ironikoa edozein dela ere keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim jatorri bakarreko kafe birala.


Bootstrap-tooltip.js erabiliz

Aktibatu tresna-informazioa javascript bidez:

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

Aukerak

Izena mota lehenetsia deskribapena
animazioa boolearra egia aplikatu css fade trantsizioa tresna-informazioari
Kokapen katea|funtzioa 'goian' nola kokatu tresna-informazioa - goian | behea | ezkerra | eskubidea
hautatzailea katea faltsua Hautatzailea ematen bada, tresna-informazioko objektuak zehaztutako helburuetara delegatuko dira.
Izenburua katea | funtzioa '' tituluaren balio lehenetsia `title` etiketa ez badago
trigger katea 'pasatu' nola abiarazten den tresna-informazioa - pasa ezazu | fokua | eskuliburua
atzerapena zenbakia | objektua 0

atzeratu tresna-informazioa erakustean eta ezkutatzen (ms) - ez da eskuzko abiarazte motari aplikatzen

Zenbaki bat ematen bada, atzerapena aplikatuko da ezkutatzeko/erakusteko

Objektuaren egitura hau da:delay: { show: 500, hide: 100 }

Buruak gora! Banakako argibideen aukerak bestela datu-atributuen bidez zehaztu daitezke.

Markatzea

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

  1. <a href = "#" rel = "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.

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

.tooltip('ezkutatu')

Elementu baten argibidea ezkutatzen du.

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

.tooltip('toggle')

Elementu baten tresna-informazioa aktibatzen du.

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

Popovers buruz

Gehitu edukiaren gainjartze txikiak, iPad-en bezalakoak, bigarren mailako informazioa gordetzeko edozein elementuri.

* Tresna -informazioa sartzea eskatzen du

Deskargatu fitxategia

Adibidea pasatzeko popover

Pasatu botoiaren gainean popover-a abiarazteko.


Bootstrap-popover.js erabiliz

Gaitu popover-ak javascript bidez:

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

Aukerak

Izena mota lehenetsia deskribapena
animazioa boolearra egia aplikatu css fade trantsizioa tresna-informazioari
Kokapen katea|funtzioa 'zuzen' popover-a nola kokatu - goiko | behea | ezkerra | eskubidea
hautatzailea katea faltsua hautatzailea ematen bada, tresna-informazioko objektuak zehaztutako helburuetara delegatuko dira
trigger katea 'pasatu' nola abiarazten den tresna-informazioa - pasa ezazu | fokua | eskuliburua
Izenburua katea | funtzioa '' tituluaren balio lehenetsia `title` atributua ez badago
edukia katea | funtzioa '' eduki-balio lehenetsia `data-content` atributua ez badago
atzerapena zenbakia | objektua 0

atzeratu popover-a erakusteko eta ezkutatzeko (ms) - ez da eskuzko abiarazte motari aplikatzen

Zenbaki bat ematen bada, atzerapena aplikatuko da ezkutatzeko/erakusteko

Objektuaren egitura hau da:delay: { show: 500, hide: 100 }

Buruak gora! Popover indibidualetarako aukerak bestela datu-atributuak erabiliz zehaztu daitezke.

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.

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

.popover('ezkutatu')

Elementuen popover bat ezkutatzen du.

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

.popover('toggle')

Elementu-jabea aktibatzen du.

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

Alertari buruz

Alerta plugina abisuei funtzionaltasun hurbilak gehitzeko klase txikia da.

Deskargatu

Adibide alertak

Alerta-pluginak alerta-mezu arruntetan funtzionatzen du eta blokeatzen ditu.

Guacamole santua! Hobe egiazta ezazu zeure burua, ez zaude itxura ona.

Ai txorrota! Errore bat izan duzu!

Aldatu hau eta bestea eta saiatu berriro. Duis mollis, ez da komodoa luctus, ez da ligula garraiatzen, eta lacinia odio ez dago elit. Cras mattis consectetur purus eseri amet fermentum.

Egin ekintza hau Edo hau egin


Bootstrap-alert.js erabiliz

Gaitu alerta bat baztertzeko javascript bidez:

  1. $ ( ".alerta" ). alerta ()

Markatzea

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

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

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

Gertaerak

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

Gertaera Deskribapena
itxi Gertaera hau berehala abiarazten da closeinstantzia-metodoa deitzen denean.
itxita Gertaera hau alerta itxi denean abiarazten da (css trantsizioak amaitu arte itxarongo da).
  1. $ ( '#nire-alerta' ). bind ( 'itxia' , funtzioa () {
  2. // Zerbait egin…
  3. })

Buruz

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

Deskargatu fitxategia

Erabilera adibide

Erabili botoien plugina estatuetarako eta txandakatzeko.

Estatutua
Toggle bakarra
Kontrol-laukia
Irratia

Bootstrap-button.js erabiliz

Gaitu botoiak javascript bidez:

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

Markatzea

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

  1. <!-- Gehitu data-toggle="button" botoi bakarrean txandakatzea aktibatzeko -->
  2. <button class = "btn" data-toggle = "button" > Etengailu bakarra </button>
  3.  
  4. <!-- Gehitu data-toggle="buttons-checkbox" btn-group-en kontrol-laukiaren estiloa aldatzeko -->
  5. <div class = "btn-group" data-toggle = "botoiak-kontrol-laukia" >
  6. <button class = "btn" > Ezkerrean </button>
  7. <button class = "btn" > Erdikoa </button>
  8. <button class = "btn" > Eskuinera </button>
  9. </div>
  10.  
  11. <!-- Gehitu data-toggle="buttons-radio" btn-group-en irrati-estiloa aldatzeko -->
  12. <div class = "btn-group" data-toggle = "botoiak-irratia" >
  13. <button class = "btn" > Ezkerrean </button>
  14. <button class = "btn" > Erdikoa </button>
  15. <button class = "btn" > Eskuinera </button>
  16. </div>

Metodoak

$().button('toggle')

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

Buruak gora! Botoi baten aldakuntza automatikoa gaitu dezakezu data-toggleatributua erabiliz.
  1. <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.

  1. <button class = "btn" data-loading-text = "gauzak kargatzen..." > ... </button>
Buruak gora! Firefoxek desgaitutako egoera mantentzen du orrialdeen karga guztietan . Honetarako konponbidea erabiltzea da autocomplete="off".

$().button('berrezarri')

Botoiaren egoera berrezartzen du - testua jatorrizko testuarekin aldatzen du.

$().button(katea)

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

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

Buruz

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

Deskargatu fitxategia

* Transitions plugina sartzea eskatzen du.

Adibide akordeoia

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

Besteak beste, klixea erreklamatzea, bizimodu handia salatu Terry Richardson eta txipiroiak. 3 wolf moon ofiziala aute, ez cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 otsoaren ilargiaren denbora, baina txori bat jarri txipiroiak jatorri bakarreko kafea ez du hartu shoreditch eta. Nihil anim keffiyeh helvetica, artisau garagardoa lan egiteko wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur harategia vice lomo. Leggings occaecat artisau garagardoa baserritik mahaira, raw denim estetiko sintetizadoreak ziurrenik ez dituzu entzun VHS jasangarria salatu.
Besteak beste, klixea erreklamatzea, bizimodu handia salatu Terry Richardson eta txipiroiak. 3 wolf moon ofiziala aute, ez cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 otsoaren ilargiaren denbora, baina txori bat jarri txipiroiak jatorri bakarreko kafea ez du hartu shoreditch eta. Nihil anim keffiyeh helvetica, artisau garagardoa lan egiteko wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur harategia vice lomo. Leggings occaecat artisau garagardoa baserritik mahaira, raw denim estetiko sintetizadoreak ziurrenik ez dituzu entzun VHS jasangarria salatu.
Besteak beste, klixea erreklamatzea, bizimodu handia salatu Terry Richardson eta txipiroiak. 3 wolf moon ofiziala aute, ez cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 otsoaren ilargiaren denbora, baina txori bat jarri txipiroiak jatorri bakarreko kafea ez du hartu shoreditch eta. Nihil anim keffiyeh helvetica, artisau garagardoa lan egiteko wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur harategia vice lomo. Leggings occaecat artisau garagardoa baserritik mahaira, raw denim estetiko sintetizadoreak ziurrenik ez dituzu entzun VHS jasangarria salatu.

Bootstrap-collapse.js erabiliz

Gaitu javascript bidez:

  1. $ ( ".kolapsoa" ). kolapsatu ()

Aukerak

Izena mota lehenetsia deskribapena
gurasoa hautatzailea faltsua Hautatzailea bada, zehaztutako gurasoaren azpian dauden elementu tolesgarri guztiak itxiko dira elementu tolesgarri hau erakusten denean. (akordeoiaren portaera tradizionalaren antzekoa)
txandakatu boolearra egia Elementu tolesgarria aktibatzen du deitzean

Markatzea

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.

  1. <button class = "btn btn-danger" data-toggle = "kolapso" data-target = "#demo" >
  2. tolesgarri sinplea
  3. </button>
  4.  
  5. <div id = "demo" class = "kolapsoa" > </div>
Buruak gora! Akordeoi antzeko taldeen kudeaketa kontrol tolesgarri bati gehitzeko, gehitu datu-atributua data-parent="#selector". Ikusi demoa hau martxan ikusteko.

Metodoak

.kolapso(aukerak)

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

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

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

Gertaera Deskribapena
erakutsi Gertaera hau berehala abiarazten da showinstantzia-metodoa deitzen denean.
erakusten Gertaera hau tolestu elementu bat erabiltzailearentzat ikusgai jartzen denean abiarazten da (css trantsizioak amaitu arte itxarongo da).
ezkutatu Gertaera hau berehala abiarazten da hidemetodoa deitzen denean.
ezkutuan Gertaera hau tolesteko elementu bat erabiltzaileari ezkutatu zaionean abiarazten da (css trantsizioak amaitu arte itxarongo da).
  1. $ ( '#nireTolesgarria' ). on ( 'ezkutatuta' , funtzioa () {
  2. // Zerbait egin…
  3. })

Buruz

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

Deskargatu fitxategia

Adibidea

Hasi beheko eremuan idazten aurretik idatzitako emaitzak erakusteko.


Bootstrap-typeahead.js erabiliz

Deitu typeahead javascript bidez:

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

Aukerak

Izena mota lehenetsia deskribapena
iturria array [ ] Kontsultatu beharreko datu-iturburua.
elementuak zenbakia 8 Goitibeherako elementuen gehienezko kopurua.
parekidea funtzioa maiuskulak eta minuskulak bereizten ditu Kontsulta bat elementu batekin bat datorren zehazteko erabiltzen den metodoa. Argumentu bakarra onartzen du, itemzeinaren aurka kontsulta probatzeko. Atzitu uneko kontsultara this.query. Itzuli boolear bat truekontsulta bat badator.
ordenatzailea funtzioa bat-etortze zehatza,
maiuskulak eta
minuskulak bereizten ditu
Osatze automatikoaren emaitzak ordenatzeko erabiltzen den metodoa. Argumentu bakarra onartzen du itemseta typeahead instantziaren esparrua du. Erreferentzia uneko kontsultarekin this.query.
nabarmentzailea funtzioa lehenetsitako partida guztiak nabarmentzen ditu Osatze automatikoaren emaitzak nabarmentzeko erabiltzen den metodoa. Argumentu bakarra onartzen du itemeta typeahead instantziaren esparrua du. HTML itzuli beharko luke.

Markatzea

Gehitu datu-atributuak idazteko aurretiko funtzionaltasuna duen elementu bat erregistratzeko.

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

Metodoak

.typeahead(aukerak)

Sarrera bat idazketa batekin hasieratzen du.