Javascript yeBootstrap

Hunza zvinhu zveBootstrap kuhupenyu-ikozvino negumi nembiri jQuery plugins.

Modals

Yakakwenenzverwa, asi inochinjika, tora iyo yechinyakare javascript modal plugin ine chete shoma inodiwa mashandiro uye smart defaults.

Dropdowns

Wedzera mamenu ekudonha kunenge chero chinhu muBootstrap neiyi plugin iri nyore. Bootstrap inoratidzira yakazara yekudonhedza menyu rutsigiro pane iyo navbar, ma tabo, uye mapiritsi.

Scrollspy

Shandisa scrollspy kuti ugadzirise otomatiki ma link mubhara rako rekuona kuti uratidze yazvino inoshanda link inoenderana nenzvimbo yekupumburudza.

Togglable tabs

Shandisa iyi plugin kugadzira ma tabo nemapiritsi anonyanya kubatsira nekuvabvumira kuti vashandure kuburikidza netabhebhi pane zvemukati zvemukati.

Tooltips

Kutorwa kutsva pajQuery Tipsy plugin, Tooltips haivimbi nemifananidzo-vanoshandisa CSS3 yeanimations uye data-athunhu yekuchengetedza zita renzvimbo.

Popovers *

Wedzera zvidiki zvakafukidzwa zvemukati, sezviya zviri paPadad, kune chero chinhu cheimba yechipiri ruzivo.

* Inoda Tooltips kuti ibatanidzwe

Mameseji echenjedzo

Iyo yambiro plugin ikirasi diki yekuwedzera kushanda kwepedyo kune ziviso.

Mabhatani

Ita zvakawanda nemabhatani. Kudzora bhatani rinotaura kana kugadzira mapoka emabhatani ezvimwe zvinhu zvakaita sematurusi.

Collapse

Tora masitaera epasi uye inochinjika tsigiro yezvinhu zvinoputsika senge maaccordion uye kufamba.

Carousel

Gadzira merry-go-round yechero yemukati yaunoda kupa inopindirana slideshow yezvirimo.

Typeahead

Yekutanga, yakawedzerwa zviri nyore plugin yekukurumidza kugadzira anoyevedza typeaheads nechero fomu yekunyora mameseji.

Shanduko *

Kuti uite shanduko iri nyore, sanganisira bootstrap-transition.js kamwe kutsvedza mumamodal kana kudzima chenjedzo.

* Inodiwa kune animation mumapulagi

Musoro! Yese javascript plugins inoda yazvino vhezheni yejQuery.

About modals

Yakakwenenzverwa, asi inochinjika, tora iyo yechinyakare javascript modal plugin ine chete shoma inodiwa mashandiro uye smart defaults.

Dhaunirodha faira

Muenzaniso wakasimba

Pazasi pane statically yakashandurwa modal.

Live demo

Shandura modal kuburikidza nejavascript nekudzvanya bhatani riri pazasi. Ichatsvedza pasi uye kupera mukati kubva kumusoro kwepeji.

Tanga demo modal

Kushandisa bootstrap-modal

Fonera modal kuburikidza nejavascript:

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

Options

Zita type default tsananguro
kumashure boolean chokwadi Inosanganisira modal-backdrop element. Neimwe nzira, tsanangura statickune yekumashure iyo isingavhare modal pakudzvanya.
keyboard boolean chokwadi Inovhara modal kana kiyi yekutiza ikadzvanywa
show boolean chokwadi Inoratidza modal kana yatangwa.

Markup

Iwe unogona kumisa modals pane peji rako zviri nyore pasina kunyora mutsara mumwechete wejavascript. Ingogadzika data-toggle="modal"pane chinhu chekutonga chine data-target="#foo"kana href="#foo"chinoenderana ne modal element id, uye kana yadzvanywa, inovhura yako modal.

Zvakare, kuti uwedzere sarudzo kune yako modal muenzaniso, ingoisanganisira iwo ekuwedzera data hunhu pane chero chinhu chekutonga kana modal markup pachayo.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal"> Launch Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div kirasi = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Modal musoro </h3>
  5. </ div>
  6. <div kirasi = "modal-muviri" >
  7. <p> Muviri mumwe wakanaka… </p>
  8. </ div>
  9. <div kirasi = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal"> Vhara </a> _
  11. <a href = "#" class = "btn btn-primary"> Chevha shanduko </a>
  12. </ div>
  13. </ div>
Musoro! Kana iwe uchida kuti modal yako iite hupenyu mukati nekunze, ingo wedzera .fadekirasi .modalkuchinhu (tarisa kune demo kuti uone izvi zvichiitika) uye sanganisira bootstrap-transition.js.

Nzira

.modal(sarudzo)

Inomisa zvirimo zvako se modal. Inobvuma sarudzo dzaungada object.

  1. $ ( '#myModal' ). modhi ({
  2. keyboard : nhema
  3. })

.modal('toggle')

Pamaoko anoshandura modal.

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

.modal('show')

Nemaoko anovhura modal.

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

.modal('hide')

Anozvivanza modal.

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

Zviitiko

Bootstrap's modal kirasi inofumura zviitiko zvishoma zvekukochekera kuita modal mashandiro.

Chiitiko Tsanangudzo
show Ichi chiitiko chinopisa nekukasira kana shownzira yemuenzaniso inodanwa.
kuratidzwa Ichi chiitiko chinodzingwa kana modal yaitwa kuti ionekwe kumushandisi (inomirira kuti css shanduko ipedze).
hide Ichi chiitiko chinodzingwa nekukasira kana iyo hidemuenzaniso nzira yadaidzwa.
zvakavanzika Ichi chiitiko chinodzingwa kana modal yapedza kuvanzwa kubva kumushandisi (inomirira css shanduko kuti ipedze).
  1. $ ( '#myModal' ). pa ( 'zvakavanzika' , basa () {
  2. // ita chimwe chinhu…
  3. })

Iyo ScrollSpy plugin ndeyekugadzirisa otomatiki zvinangwa zve nav zvichienderana nenzvimbo yekupumburudza.

Dhaunirodha faira

Muenzaniso navbar ine scrollspy

Skroka nzvimbo iri pazasi uye tarisa iyo navigation update. Izvo zvinodonhedza sub zvinhu zvicharatidzwa zvakare. Edza!

@mafuta

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi vasati vatengesa izvo. Tumblr purazi-ku-tafura kodzero dzebhasikoro chero. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui pamwe hausati wanzwa nezvavo et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork ndebvu. Freegan ndebvu aliqua cupidatat mcsweeney's vero. Cupidatat mana ako ini, ea helvetica nulla carles. Tattooed cosby sweater chikafu rori, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

Poshi

Occaecat commodo aliqua deelectus. Fap craft doro deserunt skateboard ea. Lomo bhasikoro kodzero adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. Hupenyu hwepamusoro id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, inogara yakasimba deelectus consectetur fanny pack iphone.

piri

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 blog, culpa messenger bag marfa chero deelectus chikafu rori. Sapiente synth id imaginenda. Locavore sed helvetica cliche irony, mabhanan'ana iwe pamwe hausati wanzwa nezvawo consequat hoodie gluten-isina lo-fi fap aliquip. Labore elit placeat vasati vatengesa, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Kushandisa bootstrap-scrollspy.js

Fonera iyo scrollspy kuburikidza nejavascript:

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

Markup

Kuti uwedzere nyore scrollspy maitiro kune yako topbar navigation, ingo wedzera data-spy="scroll"kune chinhu chaunoda kunosora (kazhinji uyu ungave muviri).

  1. <body data-spy = "scroll" > ... </ body>
Musoro! Navbar links dzinofanirwa kunge dziine zvinogadziriswa id zvinangwa. Semuenzaniso, <a href="#home">home</a>inofanirwa kuenderana nechimwe chinhu chiri mudom senge <div id="home"></div>.

Nzira

.scrollpy('refresh')

Paunenge uchishandisa scrollspy pamwe nekuwedzera kana kubvisa zvinhu kubva kuDOM, iwe unozofanirwa kufonera nzira yekuzorodza senge:

  1. $ ( '[data-spy="scroll"]' ). chimwe nechimwe ( basa () {
  2. var $ spy = $ ( iyi ). scrollspy ( 'refresh' )
  3. });

Options

Zita type default tsananguro
offset nhamba 10 Mapikisi ekubvisa kubva kumusoro paunenge uchiverenga nzvimbo yekupumburudza.

Zviitiko

Chiitiko Tsanangudzo
activate Chiitiko ichi chinopisa chero chinhu chitsva chikavhurwa neiyo scrollspy.

Iyi plugin inowedzera nekukurumidza, ine simba tab uye mapiritsi ekushanda kwekuchinja kuburikidza nemukati zvemukati.

Dhaunirodha faira

Muenzaniso tabs

Dzvanya ma tabo ari pazasi kuti uchinje pakati pemapaneru akavanzika, kunyangwe nemamenu ekudonhedza.

Raw denim pamwe hausati wanzwa nezvavo zvipfupi zvejean Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.


Kushandisa bootstrap-tab.js

Gonesa tabable tabs kuburikidza nejavascript (tebhu yega yega inoda kuvhurwa yega):

  1. $ ( '#myTab a' ). tinya ( basa ( e ) {
  2. e . kudziviriraDefault ();
  3. $ ( izvi ). tab ( 'kuratidza' );
  4. })

Iwe unogona kumisa ma tabo ega ega munzira dzinoverengeka:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'kuratidza' ); // Sarudza tab nezita
  2. $ ( '#myTab a:first' ). tab ( 'kuratidza' ); // Sarudza yekutanga tab
  3. $ ( '#myTab a:kupedzisira' ). tab ( 'kuratidza' ); // Sarudza yekupedzisira tab
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'kuratidza' ); // Sarudza yechitatu tebhu (0-indexed)

Markup

Unogona kumisikidza tebhu kana piritsi kufamba usinganyore chero javascript nekungotsanangura data-toggle="tab"kana data-toggle="pill"pane chinhu. Kuwedzera iyo navuye nav-tabsmakirasi kune iyo tebhu ulichashandisa iyo bootstrap tebhu styling.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab"> Kumba </a></li >
  3. <li><a href = "#profile" data-toggle = "tab"> Profile </a></li >
  4. <li><a href = "#messages" data-toggle = "tab"> Mameseji </a> </li >
  5. <li><a href = "#settings" data-toggle = "tab"> Zvirongwa </a></li >
  6. </ul>

Nzira

$().tab

Inomisikidza chinhu chetabhu uye mudziyo wemukati. Tab inofanirwa kunge iine data-targetkana hrefyakanangana nemudziyo node muDOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home"> Kumba </a></li >
  3. <li><a href = "#profile"> Profile </a> </li>
  4. <li><a href = "#messages"> maMessages </a> </li>
  5. <li><a href = "#settings"> Zvirongwa </a> </li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane inoshanda" id = "kumba" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </ div>
  14.  
  15. <script>
  16. $ ( basa () {
  17. $ ( '#myTab a:kupedzisira' ). tab ( 'kuratidza' );
  18. })
  19. </script>

Zviitiko

Chiitiko Tsanangudzo
show Ichi chiitiko chinopisa pane tab show, asi iyo itsva tebhu isati yaratidzwa. Shandisa event.targetuye event.relatedTargetkunanga iyo inoshanda tebhu uye yapfuura inoshanda tebhu (kana iripo) zvichiteerana.
kuratidzwa Ichi chiitiko chinopisa pane tab show mushure mekunge tab yaratidzwa. Shandisa event.targetuye event.relatedTargetkunanga iyo inoshanda tebhu uye yapfuura inoshanda tebhu (kana iripo) zvichiteerana.
  1. $ ( 'a[data-toggle="tab"]' ). pa ( 'inoratidzwa' , basa ( e ) {
  2. e . chinangwa // activated tab
  3. e . yakabatanaTarget // yapfuura tab
  4. })

About Tooltips

Yakafuridzirwa neyakanakisa jQuery.tipsy plugin yakanyorwa naJason Frame; Maturusi ivhezheni yakagadziridzwa, isingavimbi nemifananidzo, shandisa CSS3 yemifananidzo, uye data-hunhu hwekuchengetera zita renzvimbo.

Dhaunirodha faira

Muenzaniso kushandisa Tooltips

Hover pamusoro pemalink ari pasi apa kuti uone maturusi ekushandisa:

Tight bhurugwa next level keffiyeh pamwe hausati wanzwa nezvavo. Photo booth ndebvu mbishi denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american nguo ine terry richardson vinyl chambray. Ndebvu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, mana loko mcsweeney's cleanse vegan chambray. A really artisan artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


Kushandisa bootstrap-tooltip.js

Tamba chishandiso kuburikidza nejavascript:

  1. $ ( '#muenzaniso' ). tooltip ( sarudzo )

Options

Zita type default tsananguro
animation boolean chokwadi shandisa css fade shanduko kune tooltip
kuiswa tambo|basa 'pamusoro' nzira yekuisa iyo tooltip - pamusoro | pasi | left | rudyi
selector tambo nhema Kana sarudzo yakapihwa, zviro zveturusi zvinopihwa kune izvo zvakatarwa.
title tambo | basa '' default title value kana `title` tag isipo
trigger tambo 'deuka' kuti tooltip inokonzereswa sei - hover | focus | manual
delay nhamba | object 0

kunonoka kuratidza uye kuvanza iyo tooltip (ms) - haishande kune manual trigger type

Kana nhamba yapihwa, kunonoka kunoiswa kune ese ari maviri hide/show

Chimiro chechinhu ndeichi:delay: { show: 500, hide: 100 }

Musoro! Sarudzo dzematurusi ega ega dzinogona kutsanangurwa neimwe nzira kuburikidza nekushandisa data hunhu.

Markup

Nekuda kwezvikonzero zvekuita, Tooltip nePopover data-apis vanosarudza kupinda. Kana uchida kuzvishandisa ingotaura sarudzo yekusarudza.

  1. <a href = "#" rel = "tooltip" title = "first tooltip"> tenderera pamusoro pangu </a>

Nzira

$().tip(sarudzo)

Inonamira chibatiso cheturusi kune muunganidzwa wezvinhu.

.tooltip('show')

Inoratidza chekushandisa chechinhu.

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

.tooltip('hide')

Inovanza zano rekushandisa.

  1. $ ( '#element' ). tooltip ( 'hide' )

.tooltip('toggle')

Inoshandura matipi echinhu.

  1. $ ( '#element' ). tooltip ( 'toggle' )

About popovers

Wedzera zvidiki zvakafukidzwa zvemukati, sezviya zviri paPadad, kune chero chinhu cheimba yechipiri ruzivo.

* Inoda Tooltip kuti ibatanidzwe

Dhaunirodha faira

Muenzaniso hover popover

Famba pamusoro pebhatani kuti utange popover.


Kushandisa bootstrap-popover.js

Gonesa mapopovers kuburikidza nejavascript:

  1. $ ( '#muenzaniso' ). popover ( sarudzo )

Options

Zita type default tsananguro
animation boolean chokwadi shandisa css fade shanduko kune tooltip
kuiswa tambo|basa 'rudyi' maitiro ekuisa popover - kumusoro | pasi | left | rudyi
selector tambo nhema kana sarudzo yakapihwa, zviro zveturusi zvinopihwa kune izvo zvakatarwa
trigger tambo 'deuka' kuti tooltip inokonzereswa sei - hover | focus | manual
title tambo | basa '' default title value kana `title` hunhu asipo
content tambo | basa '' default content value kana `data-content` asipo
delay nhamba | object 0

kunonoka kuratidza uye kuvanza iyo popover (ms) - haishande kune manual trigger type

Kana nhamba yapihwa, kunonoka kunoiswa kune ese ari maviri hide/show

Chimiro chechinhu ndeichi:delay: { show: 500, hide: 100 }

Musoro! Sarudzo dzemapopovers ega dzinogona kutsanangurwa neimwe nzira kuburikidza nekushandisa data hunhu.

Markup

Nekuda kwezvikonzero zvekuita, Tooltip nePopover data-apis vanosarudza kupinda. Kana uchida kuzvishandisa ingotaura sarudzo yekusarudza.

Nzira

$().popover(sarudzo)

Inotanga popover yekuunganidza zvinhu.

.popover('show')

Inoburitsa zvinhu popover.

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

.popover('hide')

Inoviga zvinhu zvinobuda.

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

.popover('toggle')

Toggles an elements popover.

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

Nezve chenjedzo

Iyo yambiro plugin ikirasi diki yekuwedzera kushanda kwepedyo kune ziviso.

Download

Muenzaniso chenjedzo

Iyo yekuzivisa plugin inoshanda pane yakajairwa yambiro mameseji, uye block mameseji.

Holy guacamole! Best check yo self, hausi kunyanyonaka.

Oh snap! Wawana kukanganisa!

Chinja ichi neicho uye edza zvakare. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Ita chiito ichi Kana kuti ita izvi


Kushandisa bootstrap-alert.js

Ita kuti chenjedzo iraswe kuburikidza nejavascript:

  1. $ ( ".alert" ). chenjerera ()

Markup

Ingo wedzera data-dismiss="alert"kune yako bhatani rekuvhara kuti upe otomatiki yambiro yepedyo kushanda.

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

Nzira

$().chenjedzo()

Inopeta chenjedzo dzese nekushanda kwepedyo. Kuti zviziviso zvako zvibude kana zvakavharwa, ita shuwa kuti vane .fadeuye .inkirasi yatoiswa kwazviri.

.alert('kuvhara')

Inovhara chenjedzo.

  1. $ ( ".alert" ). chenjedzo ( 'vhara' )

Zviitiko

Bootstrap's alert kirasi inofumura zviitiko zvishoma zvekukochekera mukuita kweyambiro.

Chiitiko Tsanangudzo
pedyo Ichi chiitiko chinopisa nekukasira kana closenzira yemuenzaniso inodanwa.
yakavharwa Ichi chiitiko chinodzingwa kana yambiro yavharwa (ichamirira css shanduko kuti ipedze).
  1. $ ( '#my-alert' ). sunga ( 'yakavharwa' , basa () {
  2. // ita chimwe chinhu…
  3. })

About

Ita zvakawanda nemabhatani. Kudzora bhatani rinotaura kana kugadzira mapoka emabhatani ezvimwe zvinhu zvakaita sematurusi.

Dhaunirodha faira

Mienzaniso inoshandiswa

Shandisa mabhatani plugin yematunhu uye toggles.

Stateful
Single toggle
Checkbox
Radio

Kushandisa bootstrap-button.js

Vhura mabhatani kuburikidza nejavascript:

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

Markup

Mamiriro e data akakosha kune bhatani plugin. Tarisa kodhi yemuenzaniso pazasi yemhando dzakasiyana dzemakapu.

  1. <!-- Wedzera data-toggle="bhatani" kuti uvhure kubatika pabhatani rimwechete -->
  2. <button class = "btn" data-toggle = "bhatani" > Single Toggle </button>
  3.  
  4. <!-- Wedzera data-toggle = "mabhatani-checkbox" yekutarisa bhokisi rekuchinja pa btn-group -->
  5. <div class = "btn-group" data-toggle = "mabhatani-checkbox" >
  6. <button class = "btn" > Kuruboshwe </ bhatani>
  7. <button class = "btn" > Pakati </button>
  8. <button class = "btn" > Right </ button>
  9. </ div>
  10.  
  11. <!-- Wedzera data-toggle="buttons-radio" yeredhiyo style toggling pa btn-group -->
  12. <div class = "btn-group" data-toggle = "mabhatani-redhiyo" >
  13. <button class = "btn" > Kuruboshwe </ bhatani>
  14. <button class = "btn" > Pakati </button>
  15. <button class = "btn" > Right </ button>
  16. </ div>

Nzira

$().bhatani('toggle')

Toggles push state. Inopa bhatani kutaridzika kuti rakaitwa.

Musoro! Unogona kugonesa auto toggling yebhatani uchishandisa data-togglehunhu.
  1. <button class = "btn" data-toggle = "bhatani" > </button>

$().bhatani('loading')

Gadzirisa bhatani mamiriro ekurodha - inodzima bhatani uye kuchinjanisa mavara kuti atakure mavara. Kurodha mavara kunofanirwa kutsanangurwa pane bhatani chinhu uchishandisa data hunhu data-loading-text.

  1. <button class = "btn" data-loading-text = "kurodha zvinhu..." > ... </button>
Musoro! Firefox inorambira iyo yakaremara mamiriro emapeji ese . A workaround yeiyi ndeye kushandisa autocomplete="off".

$().bhatani('reset')

Reset mamiriro ebhatani - kuchinjanisa mavara kune mavara ekutanga.

$().bhatani(tambo)

Resets bhatani mamiriro - swaps mavara kune chero data yakatsanangurwa mameseji mamiriro.

  1. <button class = "btn" data-complete-text = "yapera!" > ... </ button>
  2. <script>
  3. $ ( '.btn' ). bhatani ( 'zvakakwana' )
  4. </script>

About

Tora masitaera epasi uye inochinjika tsigiro yezvinhu zvinoputsika senge maaccordion uye kufamba.

Dhaunirodha faira

* Inoda iyo Transitions plugin kuti ibatanidzwe.

Muenzaniso accordion

Tichishandisa iyo yekudonha plugin, isu takavaka yakapusa accordion style widget:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf mwedzi officia aute, kwete cupidatat skateboard dolor brunch. Rori yechikafu quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua isa shiri pairi squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan kunzeeur butcher vice lomo. Leggings occaecat craft doro purazi-ku-tafura, mbishi denim aesthetic synth nesciunt iwe ungangove usati wanzwa nezvavo kupomera basa rakagadzikana VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf mwedzi officia aute, kwete cupidatat skateboard dolor brunch. Rori yechikafu quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua isa shiri pairi squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan kunzeeur butcher vice lomo. Leggings occaecat craft doro purazi-ku-tafura, mbishi denim aesthetic synth nesciunt iwe ungangove usati wanzwa nezvavo kupomera basa rakagadzikana VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf mwedzi officia aute, kwete cupidatat skateboard dolor brunch. Rori yechikafu quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua isa shiri pairi squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan kunzeeur butcher vice lomo. Leggings occaecat craft doro purazi-ku-tafura, mbishi denim aesthetic synth nesciunt iwe ungangove usati wanzwa nezvavo kupomera basa rakagadzikana VHS.

Kushandisa bootstrap-collapse.js

Bvumira kuburikidza nejavascript:

  1. $ ( ".collapse" ). kuputsika ()

Options

Zita type default tsananguro
mubereki selector nhema Kana sesarudzi zvino zvese zvinopeta pasi pemubereki wataurwa zvichavharwa kana chinhu chinopetana ichi charatidzwa. (zvakafanana nemaitiro echinyakare accordion)
toggle boolean chokwadi Inoshandura chinhu chinopeta pakukumbira

Markup

Ingo wedzera data-toggle="collapse"uye data-targetkune chinhu kuti ugozvigadzika kutonga kwechinhu chinodonha. Hunhu data-targethunogashira css selector yekushandisa kuputsika. Iva nechokwadi chekuwedzera kirasi collapsekune chinhu chinoputika. Kana uchida kuti risavhurika, wedzera imwe kirasi in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. simple collapsible
  3. </ button>
  4.  
  5. <div id = "demo" kirasi = "kudonha mukati" > </div>
Musoro! Kuwedzera accordion-senge boka manejimendi kune inodonha kutonga, wedzera iyo data hunhu data-parent="#selector". Tarisa kune demo kuti uone izvi mukuita.

Nzira

.collapse(sarudzo)

Inobatisa zvirimo sechinhu chinogoneka. Inobvuma sarudzo dzaungada object.

  1. $ ( '#myCollapsible' ). kuparara ({
  2. toggle : nhema
  3. })

.collapse('toggle')

Inoshandura chinhu chinopeta kuti chiratidze kana kuvanzwa.

.collapse('show')

Inoratidza chinhu chinopeta.

.collapse('hide')

Inoviga chinhu chinopeta.

Zviitiko

Bootstrap's kudonha kirasi inofumura zviitiko zvishoma zvekukochekera mukudonha kushanda.

Chiitiko Tsanangudzo
show Ichi chiitiko chinopisa nekukasira kana shownzira yemuenzaniso inodanwa.
kuratidzwa Ichi chiitiko chinodzingwa kana chinhu chekudonha chaitwa kuti chionekwe kumushandisi (chichamirira css shanduko kuti ipedze).
hide Chiitiko ichi chinodzingwa pakarepo kana hidenzira yadaidzwa.
zvakavanzika Chiitiko ichi chinodzingwa kana chinhu chekudonha chakavigwa kubva kumushandisi (chinomirira css shanduko kuti ipedze).
  1. $ ( '#myCollapsible' ). pa ( 'zvakavanzika' , basa () {
  2. // ita chimwe chinhu…
  3. })

About

Yekutanga, yakawedzerwa zviri nyore plugin yekukurumidza kugadzira anoyevedza typeaheads nechero fomu yekunyora mameseji.

Dhaunirodha faira

Muenzaniso

Tanga kutaipa mundima iri pazasi kuti uratidze zvabuda.


Kushandisa bootstrap-typeahead.js

Fonera iyo typeahead kuburikidza nejavascript:

  1. $ ( '.typeahead' ). typehead ()

Options

Zita type default tsananguro
source array [ ] Nzvimbo yedata yekubvunza nezvayo.
zvinhu nhamba 8 Huwandu hwezvinhu zvicharatidzwa mukudonhedza.
matcher basa nyaya isinganzwisisi Nzira inoshandiswa kuona kana mubvunzo uchienderana nechimwe chinhu. Inogamuchira nharo imwe chete, itemiyo yekuedza mubvunzo. Svika pane zvauri kutsvaga ne this.query. Dzosa boolean truekana mubvunzo uchienderana.
sorter basa machisi chaiwo,
nyaya
isinganzwisisike
Nzira yakashandiswa kugadzirisa mhinduro dzega. Inogamuchira nharo imwe chete itemsuye ine chiyero cheiyo typeahead muenzaniso. Revera mubvunzo wazvino ne this.query.
highlighter basa inosimbisa ese machisi akasarudzika Nzira yakashandiswa kuratidza mhinduro dzakakwana. Inogamuchira nharo imwe chete itemuye ine chiyero cheiyo typeahead muenzaniso. Inofanira kudzorera html.

Markup

Wedzera data hunhu kunyoresa chinhu chine typeahead mashandiro.

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

Nzira

.typeahead(sarudzo)

Inotanga inopinza ine typeahead.