Kuhusu modals

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

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.

Kutumia bootstrap-modal

Piga modal kupitia javascript:

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

Chaguo

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.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Fungua Modali </a>    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <button class = "close" data-dismiss = "modal" > × </button>  
    <h3> Kichwa cha modal </h3>
  </ div>
  <div class = "modal-body" > 
    <p> Mwili mmoja mzuri… </p>
  </ div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> Funga </a> _  
    <a href = "#" class = "btn btn-primary" > Hifadhi mabadiliko </a>  
  </ div>
</ div>

Mbinu

.modal(chaguo)

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

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

.modal('geuza')

Hugeuza modali mwenyewe.

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

.modal('show')

Hufungua moduli mwenyewe.

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

.modal('ficha')

Huficha modali mwenyewe.

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

Matukio

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

$ ( '#MyModal' ). juu ya ( 'hidden' , kazi () {   
  // fanya kitu…
})

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

Mifano

Bofya kwenye viungo kunjuzi nav katika upau wa uelekezaji na tembe zilizo hapa chini ili kujaribu menyu kunjuzi.

• Kiungo cha kawaida
• Kunjuzi
  • Action
  • Another action
  • Something else here
  • Separated link
• Kunjuzi 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Kunjuzi 3
  • Action
  • Another action
  • Something else here
  • Separated link

Kwa kutumia bootstrap-dropdown.js

Piga kushuka kupitia javascript:

$ ( '. dropdown-toggle' ). kunjuzi ()

Alama

Ili kuongeza utendakazi wa menyu kunjuzi kwa kipengee chochote ongeza tu data-toggle="dropdown"na menyu kunjuzi yoyote halali ya bootstrap itaamilishwa kiotomatiki.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Kiungo cha kawaida </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Kunjuzi
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Kitendo </a></li> 
      <li><a href = "#" > Kitendo kingine </a></li> 
      <li><a href = "#" > Kitu kingine hapa </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Kiungo kilichotenganishwa </a></li> 
    </ul>
  </li>
  ...
</ul>

Ili kuweka URL zisizobadilika, tumia data-targetsifa badala ya href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Kunjuzi
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Mbinu

$().kunjuzi()

Api ya programu ya kuwezesha menyu kwa upau wa uelekezaji au urambazaji wa kichupo.

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

Mfano upau wa urambazaji na scrollspy

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

Kwa kutumia bootstrap-scrollspy.js

Piga simu scrollspy kupitia javascript:

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

<body data-spy = "scroll" > ... </body>  

Mbinu

.scrollpy('onyesha upya')

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

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

Chaguo

Matukio

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

Vichupo vya mfano

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

• Nyumbani
• Wasifu
• Kunjuzi
  • @fat
  • @mdo

Kwa kutumia bootstrap-tab.js

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

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

Unaweza kuwezesha tabo binafsi kwa njia kadhaa:

$ ( '#myTab a[href="#profile"]' ). tab ( 'onyesha' ); // Chagua kichupo kwa jina 
$ ( '#myTab a:first' ). tab ( 'onyesha' ); // Chagua kichupo cha kwanza 
$ ( '#myTab a:last' ). tab ( 'onyesha' ); // Chagua kichupo cha mwisho 
$ ( '#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.

<ul class = "nav-tabs" > 
  <li><a href = "#nyumbani" data-toggle = "tab" > Nyumbani </a></li>  
  <li><a href = "#profile" data-toggle = "tab"> Wasifu </a></li >  
  <li><a href = "#messages" data-toggle = "tab" > Ujumbe </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Mipangilio </a></li>  
</ul>

Mbinu

$().kichupo

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

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#nyumbani" > Nyumbani </a></li>  
  <li><a href = "#wasifu" > Wasifu </a></li> 
  <li><a href = "#ujumbe" > Ujumbe </a></li> 
  <li><a href = "#mipangilio" > Mipangilio </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "nyumbani" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</ div>
 
<script>
  $ ( kazi () {  
    $ ( '#myTab a:last' ). tab ( 'onyesha' );
  })
</script>

Matukio

$ ( 'a[data-toggle="tab"]' ). kwenye ( 'imeonyeshwa' , kazi ( e ) {   
  e . lengo // kichupo kilichoamilishwa
  e . kuhusianaTarget // tabo iliyopita
})

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.

Mfano wa matumizi ya Vidokezo

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

Kwa kutumia bootstrap-tooltip.js

Anzisha kidokezo cha zana kupitia javascript:

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

Chaguo

Alama

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

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

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

.kidokezo cha zana('ficha')

Huficha kidokezo cha kipengele.

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

.kidokezo cha zana('geuza')

Hugeuza kidokezo cha kipengee.

$ ( '#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

Mfano hover popover

Elea juu ya kitufe ili kuanzisha popover.

Kwa kutumia bootstrap-popover.js

Washa popover kupitia javascript:

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

Chaguo

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.

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

.popover('ficha')

Huficha popover ya vipengele.

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

.popover('geuza')

Hugeuza popover ya vipengele.

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

Kuhusu arifa

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

Arifa za mfano

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

Kwa kutumia bootstrap-alert.js

Washa uondoaji wa arifa kupitia javascript:

$ ( ".tahadhari" ). tahadhari ()

Alama

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

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

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

Matukio

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

$ ( '#tahadhari yangu' ). funga ( 'imefungwa' , kazi () {   
  // fanya kitu…
})

Kuhusu

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

Matumizi ya mfano

Tumia programu-jalizi ya vitufe kwa hali na vigeuza.

Kwa kutumia bootstrap-button.js

Washa vitufe kupitia javascript:

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

<!-- Ongeza data-toggle="button" ili kuamilisha kugeuza kwenye kitufe kimoja -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Ongeza data-toggle="buttons-checkbox" kwa kugeuza mtindo wa kisanduku cha kuteua kwenye btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Kushoto </button> 
  <button class = "btn" > Kati </button> 
  <button class = "btn" > Kulia </button> 
</ div>
 
<!-- Ongeza data-toggle="buttons-radio" kwa kugeuza mtindo wa redio kwenye btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Kushoto </button> 
  <button class = "btn" > Kati </button> 
  <button class = "btn" > Kulia </button> 
</ div>

Mbinu

$().kifungo('geuza')

Hugeuza hali ya kusukuma. Hutoa kitufe mwonekano kwamba kimewashwa.

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

<button class = "btn" data-loading-text = "kupakia vitu..." > ... </button>   

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

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

Kuhusu

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

* Inahitaji programu-jalizi ya Mpito kujumuishwa.

Mfano wa accordion

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

Kwa kutumia bootstrap-collapse.js

Washa kupitia javascript:

$ ( ".collapse" ). kuanguka ()

Chaguo

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.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  rahisi kukunjwa
</kifungo>
 
<div id = "demo" class = "kunjuka" > … </div>  

Mbinu

.kunja(chaguo)

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

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

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

$ ( '#myCollapsible' ). juu ya ( 'hidden' , kazi () {   
  // fanya kitu…
})

Kuhusu

Programu-jalizi ya jumla ya kuendesha baiskeli kupitia vipengele. Merry-go-round.

Mfano jukwa

Tazama onyesho la slaidi hapa chini.

Lebo ya kijipicha cha kwanza

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Kwa kutumia bootstrap-carousel.js

Piga simu kupitia javascript:

$ ( '.carousel' ). jukwa ()

Chaguo

Alama

Sifa za data hutumiwa kwa vidhibiti vilivyotangulia na vifuatavyo. Angalia alama ya mfano hapa chini.

<div id = "myCarousel" class = "carousel" >  
  <!-- Vitu vya jukwa -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </ div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#MyCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#MyCarousel" data-slide = "next" > › </a>   
</ div>

Mbinu

.jukwa(chaguo)

Huanzisha jukwa kwa chaguo za hiari objectna kuanza kuendesha baiskeli kupitia vitu.

$ ( '.carousel' ). jukwa ({
  muda : 2000 
})

.jukwa('cycle')

Huzungusha vitu vya jukwa kutoka kushoto kwenda kulia.

.jukwa('pause')

Husimamisha jukwa lisiendeshe baiskeli kupitia vitu.

.jukwa(nambari)

Huzungusha jukwa hadi fremu fulani (0 msingi, sawa na safu).

.jukwa('prev')

Mizunguko ya kipengee kilichotangulia.

.jukwa('linalofuata')

Mizunguko hadi kipengee kinachofuata.

Matukio

Darasa la jukwa la Bootstrap linafichua matukio mawili ya kuunganisha kwenye utendakazi wa jukwa.

Kuhusu

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

Mfano

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

Kwa kutumia bootstrap-typeahead.js

Piga simu ya kichwa kupitia javascript:

$ ( '.typeahead' ). chapa ()

Chaguo

Alama

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

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

Mbinu

.typeahead(chaguo)

Huanzisha ingizo kwa kuandika mbele.