Javascript kwa Bootstrap

Sahihisha vipengele vya Bootstrap—sasa na programu jalizi 12 maalum za jQuery .

Mitindo

Programu iliyoratibiwa, lakini inayonyumbulika, inachukua programu-jalizi ya jadi ya javascript yenye utendakazi wa chini zaidi unaohitajika na chaguomsingi mahiri.

Kunjuzi

Ongeza menyu kunjuzi kwa karibu chochote katika Bootstrap na programu-jalizi hii rahisi. Bootstrap ina usaidizi kamili wa menyu kunjuzi kwenye upau wa urambazaji, vichupo, na vidonge.

Scrollspy

Tumia scrollspy kusasisha kiotomatiki viungo katika upau wa urambazaji ili kuonyesha kiungo kinachotumika sasa kulingana na nafasi ya kusogeza.

Vichupo vinavyoweza kugeuzwa

Tumia programu-jalizi hii kufanya vichupo na tembe kuwa muhimu zaidi kwa kuviruhusu kugeuza vidirisha vinavyoweza kuonyeshwa vya maudhui ya ndani.

Vidokezo vya zana

Mtazamo mpya wa programu-jalizi ya jQuery Tipsy, Vidokezo vya zana havitegemei picha—vinatumia CSS3 kwa uhuishaji na sifa za data kwa hifadhi ya mada ya ndani.

Popovers *

Ongeza viwekeleo vidogo vya maudhui, kama vile vilivyo kwenye iPad, kwa kipengele chochote kwa maelezo ya upili.

* Inahitaji Vidokezo vya zana kujumuishwa

Ujumbe wa tahadhari

Programu-jalizi ya tahadhari ni darasa dogo la kuongeza utendakazi wa karibu kwa arifa.

Vifungo

Fanya zaidi na vifungo. Kitufe cha kudhibiti kinasema au unda vikundi vya vitufe vya vipengee zaidi kama vile upau wa vidhibiti.

Kunja

Pata mitindo msingi na usaidizi unaonyumbulika wa vipengee vinavyoweza kukunjwa kama vile accordions na urambazaji.

Jukwaa

Unda raundi ya kufurahisha ya maudhui yoyote unayotaka kutoa onyesho la slaidi shirikishi la maudhui.

Aina ya mbele

Programu-jalizi ya msingi, iliyopanuliwa kwa urahisi ya kuunda vichwa vya uchapaji kwa haraka kwa kuingiza maandishi ya aina yoyote.

Mipito *

Kwa madoido rahisi ya mpito, ni pamoja na bootstrap-transition.js mara moja ili kuteleza katika miundo au kufifisha arifa.

* Inahitajika kwa uhuishaji katika programu-jalizi

Vichwa juu! Programu-jalizi zote za javascript zinahitaji toleo jipya zaidi la jQuery.

Kuhusu modals

Programu iliyoratibiwa, lakini inayonyumbulika, inachukua programu-jalizi ya jadi ya javascript yenye utendakazi wa chini zaidi unaohitajika na chaguomsingi mahiri.

Pakua faili

Mfano tuli

Chini ni modali inayotolewa kwa takwimu.

Onyesho la moja kwa moja

Geuza modali kupitia javascript kwa kubofya kitufe kilicho hapa chini. Itateleza chini na kufifia kutoka juu ya ukurasa.

Zindua moduli ya onyesho

Kutumia bootstrap-modal

Piga modal kupitia javascript:

  1. $ ( '#MyModal' ). modal ( chaguzi )

Chaguo

Jina aina chaguo-msingi maelezo
mandhari boolean kweli Inajumuisha kipengele cha mandharinyuma ya modal. Vinginevyo, bainisha statickwa mandhari ambayo haifungi muundo wa kubofya.
kibodi boolean kweli Hufunga modali wakati kitufe cha Escape kinapobozwa
onyesha boolean kweli Inaonyesha moduli inapoanzishwa.

Alama

Unaweza kuamilisha moduli kwenye ukurasa wako kwa urahisi bila kulazimika kuandika safu moja ya javascript. Weka tu data-toggle="modal"kwenye kipengee cha kidhibiti kilicho na data-target="#foo"au href="#foo"ambacho kinalingana na kitambulisho cha kipengele cha modal, na ikibofya, itazindua modali yako.

Pia, ili kuongeza chaguo kwa mfano wako wa modal, zijumuishe tu kama sifa za ziada za data kwenye kipengele cha udhibiti au mwanzilishi wa modal yenyewe.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Fungua Modali </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Kichwa cha modal </h3>
  5. </ div>
  6. <div class = "modal-body" >
  7. <p> Mwili mmoja mzuri… </p>
  8. </ div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Funga </a>
  11. <a href = "#" class = "btn btn-primary" > Hifadhi mabadiliko </a>
  12. </ div>
  13. </ div>
Vichwa juu! Ikiwa ungependa modali yako ihuishwe ndani na nje, ongeza tu .fadedarasa kwenye .modalkipengele (rejelea onyesho ili kuona hili likiendelea) na ujumuishe bootstrap-transition.js.

Mbinu

.modal(chaguo)

Huwasha maudhui yako kama modali. Inakubali chaguo za hiari object.

  1. $ ( '#MyModal' ). mtindo ({
  2. kibodi : uongo
  3. })

.modal('geuza')

Hugeuza modali mwenyewe.

  1. $ ( '#MyModal' ). modali ( 'geuza' )

.modal('show')

Hufungua moduli mwenyewe.

  1. $ ( '#MyModal' ). modali ( 'onyesha' )

.modal('ficha')

Huficha modali mwenyewe.

  1. $ ( '#MyModal' ). modal ( 'jificha' )

Matukio

Darasa la modali la Bootstrap linafichua matukio machache ya kuunganisha kwenye utendakazi wa modal.

Tukio Maelezo
onyesha Tukio hili huwaka mara moja wakati shownjia ya mfano inaitwa.
iliyoonyeshwa Tukio hili linafutwa wakati modali imefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya css kukamilika).
kujificha Tukio hili linafutwa mara moja wakati hidenjia ya mfano imeitwa.
siri Tukio hili linafutwa wakati modali imekamilika kufichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya css kukamilika).
  1. $ ( '#MyModal' ). juu ya ( 'hidden' , kazi () {
  2. // fanya kitu…
  3. })

Programu-jalizi ya ScrollSpy ni ya kusasisha kiotomatiki malengo ya nav kulingana na nafasi ya kusogeza.

Pakua faili

Mfano upau wa urambazaji na scrollspy

Sogeza eneo hapa chini na utazame sasisho la urambazaji. Vipengee vidogo vya kunjuzi vitaangaziwa pia. Ijaribu!

@mafuta

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi kabla ya kuuza qui. Haki za baiskeli za kilimo kwa meza za Tumblr chochote. Anim keffiyeh carles cardigan. kibanda cha picha cha Velit seitan mcsweeney 3 wolf moon irure. Cosby sweta la lomo jean kaptula, williamsburg hoodie minim qui pengine hujasikia kuzihusu na cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil aliandika tattoo accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa masharubu skateboard, adipisicing fugiat velit pitchfork ndevu. Freegan ndevu aliqua cupidatat vero mcsweeney. Cupidatat nne loko nisi, ea helvetica nulla carles. Lori la chakula la sweta la cosby lililowekwa alama za tattoo, vinyl ya mcsweeney's non freegan. Lo-fi wes anderson +1 sartorial. Carles mazoezi yasiyo ya urembo quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

moja

Occaecat commodo aliqua deelectus. Fap craft bia deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger mfuko. Cred ex in, iphone endelevu deelectus consectetur fanny pack.

mbili

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 whatever deelectus food truck. Sapiente synth id id kudhani. Locavore sed helvetica cliche kejeli, thundercats pengine hujasikia kuwahusu consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat kabla hazijauzwa, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan hila bia seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Kwa kutumia bootstrap-scrollspy.js

Piga simu scrollspy kupitia javascript:

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

Alama

Ili kuongeza kwa urahisi tabia ya kusogeza kwenye urambazaji wa upau wako wa juu, ongeza tu data-spy="scroll"kwenye kipengee unachotaka kupeleleza (kawaida huu utakuwa mwili).

  1. <body data-spy = "scroll" > ... </body>
Vichwa juu! Viungo vya Upau wa Uelekezaji lazima viwe na malengo ya vitambulisho vinavyoweza kutatuliwa. Kwa mfano, <a href="#home">home</a>lazima ilingane na kitu kwenye dom kama <div id="home"></div>.

Mbinu

.scrollpy('onyesha upya')

Unapotumia scrollspy kwa kushirikiana na kuongeza au kuondoa vitu kutoka kwa DOM, utahitaji kupiga njia ya kuburudisha kama hivyo:

  1. $ ( '[data-spy="scroll"]' ). kila ( kazi () {
  2. var $spy = $ ( hii ). scrollspy ( 'refresh' )
  3. });

Chaguo

Jina aina chaguo-msingi maelezo
kukabiliana nambari 10 Pikseli za kurekebisha kutoka juu wakati wa kukokotoa nafasi ya kusogeza.

Matukio

Tukio Maelezo
amilisha Tukio hili huwaka wakati kipengee kipya kinapowezeshwa na scrollspy.

Programu-jalizi hii inaongeza kichupo cha haraka, chenye nguvu na utendaji wa kidonge kwa ajili ya mpito kupitia maudhui ya ndani.

Pakua faili

Vichupo vya mfano

Bofya vichupo vilivyo hapa chini ili kugeuza kati ya vidirisha vilivyofichwa, hata kupitia menyu kunjuzi.

Jeans mbichi labda haujazisikia kaptula za jeans Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Muda mfupi wa masharubu, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweta eu banh mi, qui irure terry richardson ex ngisi. 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.


Kwa kutumia bootstrap-tab.js

Washa vichupo vinavyoweza kutekelezeka kupitia javascript (kila kichupo kinahitaji kuamilishwa kivyake):

  1. $ ( '#myTab a' ). bonyeza ( kazi ( e ) {
  2. e . kuzuiaDefault ();
  3. $ ( hii ). tab ( 'onyesha' );
  4. })

Unaweza kuwezesha tabo binafsi kwa njia kadhaa:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'onyesha' ); // Chagua kichupo kwa jina
  2. $ ( '#myTab a:first' ). tab ( 'onyesha' ); // Chagua kichupo cha kwanza
  3. $ ( '#myTab a:last' ). tab ( 'onyesha' ); // Chagua kichupo cha mwisho
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'onyesha' ); // Chagua kichupo cha tatu (kilichoonyeshwa 0)

Alama

Unaweza kuwezesha urambazaji wa kichupo au kidonge bila kuandika javascript yoyote kwa kubainisha tu data-toggle="tab"au data-toggle="pill"kwa kipengele. Kuongeza navna nav-tabsmadarasa kwenye kichupo ulkutatumia mtindo wa kichupo cha bootstrap.

  1. <ul class = "nav-tabs" >
  2. <li><a href = "#nyumbani" data-toggle = "tab" > Nyumbani </a></li>
  3. <li><a href = "#profile" data-toggle = "tab"> Wasifu </a></li >
  4. <li><a href = "#messages" data-toggle = "tab" > Ujumbe </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Mipangilio </a></li>
  6. </ul>

Mbinu

$().kichupo

Huwasha kipengele cha kichupo na kontena ya maudhui. Kichupo kinapaswa kuwa na nodi ya chombo data-targetau inayolenga kwenye DOM.href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#nyumbani" > Nyumbani </a></li>
  3. <li><a href = "#wasifu" > Wasifu </a></li>
  4. <li><a href = "#ujumbe" > Ujumbe </a></li>
  5. <li><a href = "#mipangilio" > Mipangilio </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "nyumbani" > ... </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. $ ( kazi () {
  17. $ ( '#myTab a:last' ). tab ( 'onyesha' );
  18. })
  19. </script>

Matukio

Tukio Maelezo
onyesha Tukio hili linawaka kwenye onyesho la kichupo, lakini kabla ya kichupo kipya kuonyeshwa. Tumia event.targetna event.relatedTargetkulenga kichupo amilifu na kichupo amilifu cha awali (kama kinapatikana) mtawalia.
iliyoonyeshwa Tukio hili huwashwa kwenye onyesho la kichupo baada ya kichupo kuonyeshwa. Tumia event.targetna event.relatedTargetkulenga kichupo amilifu na kichupo amilifu cha awali (kama kinapatikana) mtawalia.
  1. $ ( 'a[data-toggle="tab"]' ). kwenye ( 'imeonyeshwa' , kazi ( e ) {
  2. e . lengo // kichupo kilichoamilishwa
  3. e . kuhusianaTarget // tabo iliyopita
  4. })

Kuhusu Vidokezo vya zana

Imehamasishwa na programu-jalizi bora ya jQuery.tipsy iliyoandikwa na Jason Frame; Vidokezo vya zana ni toleo lililosasishwa, ambalo halitegemei picha, tumia CSS3 kwa uhuishaji, na sifa za data kwa hifadhi ya mada ya ndani.

Pakua faili

Mfano wa matumizi ya Vidokezo

Elea juu ya viungo vilivyo hapa chini ili kuona vidokezo vya zana:

Suruali za kubana ngazi ya pili keffiyeh pengine hujazisikia . Picha kibanda ndevu mbichi shoes letterpress vegan messenger mfuko stumptown. Mavazi ya aina ya seitan ya shamba hadi meza, vazi la mcsweeney endelevu la quinoa 8-bit lina chambray ya terry richardson vinyl. Ndevu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Fundi wa kejeli sana whatever keytar , scenester farm-to-table banksy Austin twitter kushughulikia freegan cred ghafi denim single-origin kahawa virusi.


Kwa kutumia bootstrap-tooltip.js

Anzisha kidokezo cha zana kupitia javascript:

  1. $ ( '#mfano' ). kidokezo cha zana ( chaguo )

Chaguo

Jina aina chaguo-msingi maelezo
uhuishaji boolean kweli tumia mpito wa css fade kwenye kidokezo cha zana
uwekaji kamba|kazi 'juu' jinsi ya kuweka ncha ya zana - juu | chini | kushoto | haki
kiteuzi kamba uongo Iwapo kiteuzi kitatolewa, vipengee vya vidokezo vitakabidhiwa kwa walengwa maalum.
kichwa kamba | kazi '' thamani ya kichwa chaguo-msingi ikiwa lebo ya `kichwa` haipo
kichochezi kamba 'kurupuka' jinsi ncha ya zana inavyoanzishwa - elea | kuzingatia | mwongozo
kuchelewa nambari | kitu 0

kuchelewesha kuonyesha na kuficha ncha ya zana (ms) - haitumiki kwa aina ya kichochezi cha mwongozo

Nambari ikitolewa, ucheleweshaji unatumika kwa Ficha/onyesho zote mbili

Muundo wa kitu ni:delay: { show: 500, hide: 100 }

Vichwa juu! Chaguzi za vidokezo vya mtu binafsi zinaweza kubainishwa kwa matumizi ya sifa za data.

Alama

Kwa sababu za utendakazi, Kidokezo cha data na Popover data-apis zimejumuishwa. Ikiwa ungependa kuzitumia bainisha chaguo la kiteuzi.

  1. <a href = "#" rel = "tooltip" title = "kidokezo cha kwanza" > elea juu yangu </a>

Mbinu

$().kidokezo cha zana(chaguo)

Huambatisha kidhibiti kidokezo kwenye mkusanyiko wa vipengele.

.kidokezo('onyesha')

Hufichua kidokezo cha kipengele.

  1. $ ( '#element' ). kidokezo cha zana ( 'onyesha' )

.kidokezo cha zana('ficha')

Huficha kidokezo cha kipengele.

  1. $ ( '#element' ). kidokezo cha zana ( 'ficha' )

.kidokezo cha zana('geuza')

Hugeuza kidokezo cha kipengee.

  1. $ ( '#element' ). kidokezo cha zana ( 'geuza' )

Kuhusu popovers

Ongeza viwekeleo vidogo vya maudhui, kama vile vilivyo kwenye iPad, kwa kipengele chochote kwa maelezo ya upili.

* Inahitaji Tooltip kujumuishwa

Pakua faili

Mfano hover popover

Elea juu ya kitufe ili kuanzisha popover.


Kwa kutumia bootstrap-popover.js

Washa popover kupitia javascript:

  1. $ ( '#mfano' ). popover ( chaguzi )

Chaguo

Jina aina chaguo-msingi maelezo
uhuishaji boolean kweli tumia mpito wa css fade kwenye kidokezo cha zana
uwekaji kamba|kazi 'haki' jinsi ya kuweka popover - juu | chini | kushoto | haki
kiteuzi kamba uongo ikiwa kichaguzi kimetolewa, vipengee vya vidokezo vitakabidhiwa kwa malengo maalum
kichochezi kamba 'kurupuka' jinsi ncha ya zana inavyoanzishwa - elea | kuzingatia | mwongozo
kichwa kamba | kazi '' thamani ya kichwa chaguo-msingi ikiwa sifa ya `kichwa` haipo
maudhui kamba | kazi '' thamani ya maudhui chaguomsingi ikiwa sifa ya `maudhui ya data` haipo
kuchelewa nambari | kitu 0

kuchelewesha kuonyesha na kuficha popover (ms) - haitumiki kwa aina ya kichocheo cha mwongozo

Nambari ikitolewa, ucheleweshaji unatumika kwa Ficha/onyesho zote mbili

Muundo wa kitu ni:delay: { show: 500, hide: 100 }

Vichwa juu! Chaguo za popover binafsi zinaweza kubainishwa kwa kutumia sifa za data.

Alama

Kwa sababu za utendakazi, Kidokezo cha data na Popover data-apis zimejumuishwa. Ikiwa ungependa kuzitumia bainisha chaguo la kiteuzi.

Mbinu

$(). popover(chaguo)

Huanzisha popover kwa mkusanyiko wa vipengele.

.popover('onyesha')

Hufichua pover ya vipengele.

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

.popover('ficha')

Huficha popover ya vipengele.

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

.popover('geuza')

Hugeuza popover ya vipengele.

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

Kuhusu arifa

Programu-jalizi ya tahadhari ni darasa dogo la kuongeza utendakazi wa karibu kwa arifa.

Pakua

Arifa za mfano

Programu-jalizi ya arifa hufanya kazi kwenye ujumbe wa arifa za kawaida, na kuzuia ujumbe.

Guacamole takatifu! Bora jiangalie mwenyewe, huonekani kuwa mzuri sana.

Oh snap! Umepata hitilafu!

Badilisha hili na lile na ujaribu tena. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Chukua hatua hii Au fanya hivi


Kwa kutumia bootstrap-alert.js

Washa uondoaji wa arifa kupitia javascript:

  1. $ ( ".tahadhari" ). tahadhari ()

Alama

Ongeza tu data-dismiss="alert"kwenye kitufe chako cha kufunga ili kutoa kiotomatiki utendakazi wa karibu wa tahadhari.

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

Mbinu

$().tahadhari()

Hufunga arifa zote kwa utendakazi wa karibu. Ili arifa zako zihuishwe zinapofungwa, hakikisha kuwa .fadena .indarasa tayari zimetumika kwao.

.tahadhari('funga')

Hufunga arifa.

  1. $ ( ".tahadhari" ). tahadhari ( 'funga' )

Matukio

Darasa la tahadhari la Bootstrap linafichua matukio machache ya kuunganisha katika utendaji wa tahadhari.

Tukio Maelezo
karibu Tukio hili huwaka mara moja wakati closenjia ya mfano inaitwa.
imefungwa Tukio hili linafutwa wakati tahadhari imefungwa (itasubiri mabadiliko ya css kukamilika).
  1. $ ( '#tahadhari yangu' ). funga ( 'imefungwa' , kazi () {
  2. // fanya kitu…
  3. })

Kuhusu

Fanya zaidi na vifungo. Kitufe cha kudhibiti kinasema au unda vikundi vya vitufe vya vipengee zaidi kama vile upau wa vidhibiti.

Pakua faili

Matumizi ya mfano

Tumia programu-jalizi ya vitufe kwa hali na vigeuza.

Ya serikali
Kugeuza moja
Kisanduku cha kuteua
Redio

Kwa kutumia bootstrap-button.js

Washa vitufe kupitia javascript:

  1. $ ( '.nav-tabo' ). kitufe ()

Alama

Sifa za data ni muhimu kwa programu-jalizi ya kitufe. Angalia msimbo wa mfano hapa chini kwa aina mbalimbali za markup.

  1. <!-- Ongeza data-toggle="button" ili kuamilisha kugeuza kwenye kitufe kimoja -->
  2. <button class = "btn" data-toggle = "button" > Single Toggle </button>
  3.  
  4. <!-- Ongeza data-toggle="buttons-checkbox" kwa kugeuza mtindo wa kisanduku cha kuteua kwenye btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Kushoto </button>
  7. <button class = "btn" > Kati </button>
  8. <button class = "btn" > Kulia </button>
  9. </ div>
  10.  
  11. <!-- Ongeza data-toggle="buttons-radio" kwa kugeuza mtindo wa redio kwenye btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Kushoto </button>
  14. <button class = "btn" > Kati </button>
  15. <button class = "btn" > Kulia </button>
  16. </ div>

Mbinu

$().kifungo('geuza')

Hugeuza hali ya kusukuma. Hutoa kitufe mwonekano kwamba kimewashwa.

Vichwa juu! Unaweza kuwezesha kugeuza kiotomatiki kwa kitufe kwa kutumia data-togglesifa.
  1. <button class = "btn" data-toggle = "button" > </button>

$().kifungo('inapakia')

Huweka hali ya vitufe kupakia - huzima kitufe na kubadilisha maandishi hadi kupakia maandishi. Upakiaji wa maandishi unapaswa kufafanuliwa kwenye kipengee cha kitufe kwa kutumia sifa ya data data-loading-text.

  1. <button class = "btn" data-loading-text = "kupakia vitu..." > ... </button>
Vichwa juu! Firefox hudumu hali ya ulemavu katika upakiaji wa ukurasa . Workaround kwa hii ni kutumia autocomplete="off".

$().kifungo('weka upya')

Huweka upya hali ya kitufe - hubadilisha maandishi hadi maandishi asili.

$().kifungo(kamba)

Huweka upya hali ya kitufe - hubadilisha maandishi kwa hali yoyote ya maandishi iliyobainishwa na data.

  1. <button class = "btn" data-complete-text = "finished!" > ... </ button>
  2. <script>
  3. $ ( '.btn' ). kitufe ( 'kamili' )
  4. </script>

Kuhusu

Pata mitindo msingi na usaidizi unaonyumbulika wa vipengee vinavyoweza kukunjwa kama vile accordions na urambazaji.

Pakua faili

* Inahitaji programu-jalizi ya Mpito kujumuishwa.

Mfano wa accordion

Kwa kutumia programu-jalizi ya kukunja, tulitengeneza wijeti rahisi ya mtindo wa accordion:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad ngisi. 3 mbwa mwitu mwezi officia aute, non cupidatat skateboard dolor brunch. Lori la chakula quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua weka ndege juu yake ngisi mwenye asili ya kahawa nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mchinjaji makamu wa lomo. Leggings occaecat craft bia farm-to-table, denim ghafi aesthetic synth nesciunt pengine hujasikia kuwahusu accusamus labour endelevu VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad ngisi. 3 mbwa mwitu mwezi officia aute, non cupidatat skateboard dolor brunch. Lori la chakula quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua weka ndege juu yake ngisi mwenye asili ya kahawa nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mchinjaji makamu wa lomo. Leggings occaecat craft bia farm-to-table, denim ghafi aesthetic synth nesciunt pengine hujasikia kuwahusu accusamus labour endelevu VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad ngisi. 3 mbwa mwitu mwezi officia aute, non cupidatat skateboard dolor brunch. Lori la chakula quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua weka ndege juu yake ngisi mwenye asili ya kahawa nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mchinjaji makamu wa lomo. Leggings occaecat craft bia farm-to-table, denim ghafi aesthetic synth nesciunt pengine hujasikia kuwahusu accusamus labour endelevu VHS.

Kwa kutumia bootstrap-collapse.js

Washa kupitia javascript:

  1. $ ( ".collapse" ). kuanguka ()

Chaguo

Jina aina chaguo-msingi maelezo
mzazi kiteuzi uongo Ikiwa kiteuzi basi vipengele vyote vinavyoweza kukunjwa chini ya mzazi aliyebainishwa vitafungwa wakati kipengee hiki kinachoweza kukunjwa kitaonyeshwa. (sawa na tabia ya kitamaduni ya accordion)
kugeuza boolean kweli Hugeuza kipengele kinachoweza kukunjwa kwenye ombi

Alama

Ongeza tu data-toggle="collapse"na data-targetkipengele ili kukabidhi kiotomatiki udhibiti wa kipengele kinachoweza kukunjwa. Sifa data-targetinakubali kiteuzi cha css cha kutumia kukunja. Hakikisha umeongeza darasa collapsekwenye kipengele kinachoweza kukunjwa. Ikiwa ungependa ifungue chaguomsingi, ongeza darasa la ziada in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. rahisi kukunjwa
  3. </kifungo>
  4.  
  5. <div id = "demo" class = "kunjuka" > </div>
Vichwa juu! Ili kuongeza usimamizi wa kikundi kama accordion kwenye kidhibiti kinachoweza kukunjwa, ongeza sifa ya data data-parent="#selector". Rejelea onyesho ili kuona hili likiendelea.

Mbinu

.kunja(chaguo)

Huwasha maudhui yako kama kipengele kinachoweza kukunjwa. Inakubali chaguo za hiari object.

  1. $ ( '#myCollapsible' ). kuanguka ({
  2. kugeuza : uongo
  3. })

.kunja('geuza')

Hugeuza kipengele kinachoweza kukunjwa kuonyeshwa au kufichwa.

.kunja('onyesha')

Inaonyesha kipengele kinachoweza kukunjwa.

.kunja('ficha')

Huficha kipengele kinachoweza kukunjwa.

Matukio

Darasa la kukunja la Bootstrap linafichua matukio machache ya kunasa katika utendakazi wa kukunja.

Tukio Maelezo
onyesha Tukio hili huwaka mara moja wakati shownjia ya mfano inaitwa.
iliyoonyeshwa Tukio hili huwashwa wakati kipengele cha kukunja kimefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya css kukamilika).
kujificha Tukio hili linafukuzwa mara moja wakati hidenjia imeitwa.
siri Tukio hili huwashwa wakati kipengele cha kukunja kimefichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya css kukamilika).
  1. $ ( '#myCollapsible' ). juu ya ( 'hidden' , kazi () {
  2. // fanya kitu…
  3. })

Kuhusu

Programu-jalizi ya msingi, iliyopanuliwa kwa urahisi ya kuunda vichwa vya uchapaji kwa haraka kwa kuingiza maandishi ya aina yoyote.

Pakua faili

Mfano

Anza kuchapa katika sehemu iliyo hapa chini ili kuonyesha matokeo ya chapa.


Kwa kutumia bootstrap-typeahead.js

Piga simu ya kichwa kupitia javascript:

  1. $ ( '.typeahead' ). chapa ()

Chaguo

Jina aina chaguo-msingi maelezo
chanzo safu [] Chanzo cha data cha kuhoji dhidi ya.
vitu nambari 8 Idadi ya juu zaidi ya vipengee vya kuonyesha kwenye menyu kunjuzi.
mshikaji kazi kesi isiyojali Njia inayotumika kubainisha ikiwa hoja inalingana na kipengee. Hukubali hoja moja, itemambayo itajaribu hoja. Fikia swali la sasa ukitumia this.query. Rejesha boolean trueikiwa hoja inalingana.
mpangaji kazi inayolingana kabisa,
kesi nyeti,
kesi isiyojali
Njia iliyotumiwa kupanga matokeo ya kukamilisha kiotomatiki. Inakubali hoja moja itemsna ina wigo wa mfano wa chapa. Rejelea swali la sasa na this.query.
kiangazi kazi inaangazia mechi zote chaguomsingi Mbinu inayotumika kuangazia matokeo ya kukamilisha kiotomatiki. Inakubali hoja moja itemna ina wigo wa mfano wa chapa. Inapaswa kurudisha html.

Alama

Ongeza sifa za data ili kusajili kipengele kilicho na utendakazi wa kuandika mbele.

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

Mbinu

.typeahead(chaguo)

Huanzisha ingizo kwa kuandika mbele.