Za ma modals

Chosavuta, koma chosinthika, tengerani javascript modal plugin yokhala ndi magwiridwe antchito ochepa komanso zosasintha zanzeru.

Chitsanzo chokhazikika

Pansipa pali statically kumasuliridwa modal.

Chiwonetsero chamoyo

Sinthani modal kudzera pa javascript podina batani pansipa. Idzatsika ndikuzimiririka kuchokera pamwamba pa tsamba.

Kugwiritsa ntchito bootstrap-modal

Imbani modal kudzera pa javascript:

$ ( '#myModal' ). modali ( zosankha )

Zosankha

Markup

Mutha kuyambitsa ma mods patsamba lanu mosavuta popanda kulemba mzere umodzi wa javascript. Ingoyikani data-toggle="modal"pa chinthu chowongolera chokhala ndi data-target="#foo"kapena href="#foo"chomwe chikufanana ndi id ya chinthu cha modal, ndipo mukadina, imayambitsa modal yanu.

Komanso, kuti muwonjezere zosankha pamwambo wanu wa modal, ingowaphatikiza ngati zowonjezera za data paziwongolero kapena ma modal markup omwe.

<a class = "btn" data-toggle = "modal" href = "#myModal"> Launch Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Mutu wamutu </h3>
  </div>
  <div class = "modal-body" > 
    <p> Thupi limodzi labwino… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal"> Tsekani </a> _   
    <a href = "#" class = "btn btn-primary"> Sungani zosintha </a>  
  </div>
</div>

Njira

.modal(zosankha)

Imayambitsa zomwe zili ngati modal. Imavomereza zomwe mungachite object.

$ ( '#myModal' ). modali ({
  keyboard : zabodza 
})

.modal('kusintha')

Imatembenuza pamanja modali.

$ ( '#myModal' ). modali ( 'toggle' )

.modal('show')

Pamanja amatsegula modali.

$ ( '#myModal' ). modali ( 'show' )

.modal('bisala')

Amabisa pamanja modali.

$ ( '#myModal' ). modali ( 'hide' )

Zochitika

Kalasi ya modal ya Bootstrap imawulula zochitika zingapo kuti zigwirizane ndi machitidwe a modal.

$ ( '#myModal' ). pa ( 'zobisika' , ntchito () {   
  // kuchitapo kanthu...
})

Za dropdowns

Onjezani mindandanda yotsitsa pafupifupi chilichonse mu Bootstrap ndi pulogalamu yowonjezera iyi. Bootstrap imakhala ndi chithandizo chonse cha menyu otsikira pa navbar, ma tabo, ndi mapiritsi.

Zitsanzo

Dinani pa maulalo otsikirapo mu navbar ndi mapiritsi omwe ali pansipa kuti muyese kutsitsa.

• Ulalo wokhazikika
• Tsitsa m'munsi
  • Action
  • Another action
  • Something else here
  • Separated link
• Kutsika 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Kutsika 3
  • Action
  • Another action
  • Something else here
  • Separated link

Kugwiritsa ntchito bootstrap-dropdown.js

Imbani zotsitsa kudzera pa javascript:

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

Markup

Kuti muwonjezere magwiridwe antchito ku chinthu data-toggle="dropdown"chilichonse ingowonjezerani ndipo kutsitsa kulikonse kovomerezeka kwa bootstrap kumangotsegulidwa.

<ul class = "mapiritsi a nav-nav" > 
  <li class = "active" > <a href = "#"> Ulalo wokhazikika </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _   
      Tsitsa m'munsi
      <b class = "caret" > </b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#"> Zochita </a> </li> 
      <li><a href = "#"> Zochita zina </a></li> 
      <li><a href = "#"> Chinachake apa </a></li> 
      <li class = "divider" > </li> 
      <li><a href = "#"> Ulalo wolekanitsidwa </a> </li> 
    </ul>
  </li>
  ...
</ul>

Kuti ma URL asasinthe, gwiritsani ntchito mawonekedwewo data-targetm'malo mwa href="#".

<ul class = "mapiritsi a nav-nav" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html"> _    
      Tsitsa m'munsi
      <b class = "caret" > </b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Njira

$().kutsitsa()

Pulogalamu ya api yotsegulira ma menus a navbar yopatsidwa kapena navigation ya tabbed.

Pulagi ya ScrollSpy ndi yongosintha zokha za nav kutengera malo opukutira.

Chitsanzo navbar ndi scrollspy

Mpukutu m'munsimu ndi kuona navigation update. Zinthu zotsikirapo zidzawonetsedwanso. Yesani!

Kugwiritsa ntchito bootstrap-scrollspy.js

Imbani scrollspy kudzera pa javascript:

$ ( '#navbar' ). scrollspy ()

Markup

Kuti muwonjezeko machitidwe a scrollspy pakuyenda kwanu kwapamwamba, ingowonjezerani data-spy="scroll"chinthu chomwe mukufuna kuti mukazonde (nthawi zambiri ili lingakhale thupi).

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

Njira

.scrollspy('refresh')

Mukamagwiritsa ntchito scrollspy molumikizana ndi kuwonjezera kapena kuchotsa zinthu mu DOM, muyenera kuyimbira njira yotsitsimutsa motere:

$ ( '[data-spy="scroll"]' ). chilichonse ( ntchito () {  
  var $ kazitape = $ ( izi ). scrollspy ( 'refresh' )
});

Zosankha

Zochitika

Pulagi iyi imawonjezera tabu yachangu, yosinthika komanso magwiridwe antchito apiritsi kuti asinthe kudzera m'malo am'deralo.

Zitsanzo tabu

Dinani ma tabu omwe ali m'munsimu kuti musinthe pakati pa zobisika, ngakhale kudzera pazotsitsa.

• Kunyumba
• Mbiri
• Tsitsa m'munsi
  • @fat
  • @mdo

Kugwiritsa ntchito bootstrap-tab.js

Yambitsani ma tabbles kudzera pa javascript (tabu iliyonse iyenera kutsegulidwa payekhapayekha):

$ ( '#myTab a' ). dinani ( ntchito ( e ) {  
  e . preventDefault ();
  $ ( izi ). tabu ( 'show' );
})

Mutha kuyambitsa ma tabo amodzi m'njira zingapo:

$ ( '#myTab a[href="#profile"]' ). tabu ( 'show' ); // Sankhani tabu ndi dzina 
$ ( '#myTab a:first' ). tabu ( 'show' ); // Sankhani tsamba loyamba 
$ ( '#myTab a:last' ). tabu ( 'show' ); // Sankhani tabu yomaliza 
$ ( '#myTab li:eq(2) a' ). tabu ( 'show' ); // Sankhani tabu lachitatu (0-indexed) 

Markup

Mutha kuyambitsa tabu kapena kuyenda kwa mapiritsi osalemba javascript mwa kungotchulapo data-toggle="tab"kapena data-toggle="pill"pa chinthu. Kuwonjezera navndi nav-tabsmakalasi pa tabu ulidzagwiritsa ntchito kalembedwe ka bootstrap tabu.

<ul class = "nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab"> Kwawo </a></li >  
  <li><a href = "#profile" data-toggle = "tab"> Mbiri </a></li >  
  <li><a href = "#messages" data-toggle = "tab"> Mauthenga </a></li >  
  <li><a href = "#settings" data-toggle = "tab"> Zokonda </a> </li >  
</ul>

Njira

$().tabu

Imayatsa chinthu cha tabu ndi chidebe cha zinthu. Tabu iyenera kukhala ndi imodzi data-targetkapena hrefyolunjika ku chidebe mu DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" > <a href = "#home"> Kwawo </a></li>  
  <li><a href = "#profile"> Mbiri </a> </li> 
  <li><a href = "#mauthenga"> Mauthenga </a> </li> 
  <li><a href = "#zikhazikiko"> Zokonda </a> </li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "mbiri" > ... </div>  
  <div class = "tab-pane" id = "mauthenga" > ... </div>  
  <div class = "tab-pane" id = "zikhazikiko" > ... </div>  
</div>
 
<script>
  $ ( ntchito () {  
    $ ( '#myTab a:last' ). tabu ( 'show' );
  })
</script>

Zochitika

$ ( 'a[data-toggle="tab"]' ). pa ( 'yawonetsedwa' , ntchito ( e ) {   
  e . target // tabu yotsegulidwa
  e . zokhudzanaTarget // tabu yapita
})

About Tooltips

Kulimbikitsidwa ndi pulogalamu yowonjezera ya jQuery.tipsy yolembedwa ndi Jason Frame; Tooltips ndi mtundu wosinthidwa, womwe sudalira zithunzi, gwiritsani ntchito CSS3 pa makanema ojambula pamanja, ndi mawonekedwe a data posungira mitu yanu.

Chitsanzo chogwiritsa ntchito Tooltips

Yendani pamwamba pa maulalo omwe ali pansipa kuti muwone zida zothandizira:

Kugwiritsa ntchito bootstrap-tooltip.js

Yambitsani chida kudzera pa javascript:

$ ( '#chitsanzo' ). chida ( zosankha )

Zosankha

Markup

Pazifukwa zogwirira ntchito, Tooltip ndi Popover data-apis alowa. Ngati mukufuna kuzigwiritsa ntchito ingotchulani kusankha.

<a href = "#" rel = "tooltip" title = "chida choyamba"> yendani pamwamba panga </a>   

Njira

$().tip(zosankha)

Imangiriza chogwirizira ku zida zosonkhanitsira.

.tooltip('show')

Imawulula zida za chinthu.

$ ( '#element' ). chida ( 'show' )

.tooltip('bisala')

Imabisa chida cha chinthu.

$ ( '#element' ). chida ( 'hide' )

.tooltip('toggle')

Imatembenuza chida cha chinthu.

$ ( '#element' ). chida ( 'toggle' )

Za popovers

Onjezani zophatikizika zazing'ono, monga zomwe zili pa iPad, kuzinthu zilizonse zachidziwitso chachiwiri.

* Imafunikira Tooltip kuti iphatikizidwe

Mwachitsanzo hover popover

Yendetsani pa batani kuti muyambitse popover.

Kugwiritsa ntchito bootstrap-popover.js

Yambitsani popover kudzera pa javascript:

$ ( '#chitsanzo' ). popover ( zosankha )

Zosankha

Markup

Pazifukwa zogwirira ntchito, Tooltip ndi Popover data-apis alowa. Ngati mukufuna kuzigwiritsa ntchito ingotchulani kusankha.

Njira

$().popover(zosankha)

Imayambitsa ma popover pazosonkhanitsira zinthu.

.popover('show')

Imawulula ma element popover.

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

.popover('bisala')

Imabisa zinthu zotuluka.

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

.popover('kusintha')

Imatembenuza ma element popover.

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

Za zidziwitso

Pulagi yochenjeza ndi kagulu kakang'ono kowonjezera magwiridwe antchito ku zidziwitso.

Zidziwitso zachitsanzo

Pulogalamu yowonjezera yochenjeza imagwira ntchito pa mauthenga ochenjeza nthawi zonse, ndikuletsa mauthenga.

Kugwiritsa ntchito bootstrap-alert.js

Yambitsani kuchotsedwa kwa chenjezo kudzera pa javascript:

$ ( ".chidziwitso" ). chenjezo ()

Markup

Ingowonjezerani data-dismiss="alert"ku batani lanu lakutseka kuti mungopereka chidziwitso chapafupi.

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

Njira

$().chenjezo()

Zimangiriza zidziwitso zonse ndi magwiridwe antchito apafupi. Kuti zidziwitso zanu ziwonetsedwe zikatsekedwa, onetsetsani kuti zili .fadendi .inkalasi zomwe zagwiritsidwa ntchito kale.

.chenjezo('kutseka')

Kutseka chenjezo.

$ ( ".chidziwitso" ). chenjezo ( 'close' )

Zochitika

Gulu lachidziwitso la Bootstrap limawulula zochitika zingapo kuti zigwirizane ndi zochitika zochenjeza.

$ ( '#chenjezo langa' ). kumanga ( 'kotsekedwa' , ntchito () {   
  // kuchitapo kanthu...
})

Za

Chitani zambiri ndi mabatani. Batani lowongolera likunena kapena pangani magulu a mabatani azinthu zambiri ngati zida.

Zitsanzo ntchito

Gwiritsani ntchito mabatani owonjezera kuti musinthe ndikusintha.

Pogwiritsa ntchito bootstrap-button.js

Yambitsani mabatani kudzera pa javascript:

$ ( '.nav-tabs' ). batani ()

Markup

Makhalidwe a data ndi ofunikira pa batani lowonjezera. Onani chitsanzo pansipa chamitundu yosiyanasiyana yolembera.

<!-- Onjezani data-toggle="batani" kuti mutsegule batani limodzi -->
<button class = "btn" data-toggle = "batani" > Kusintha Kumodzi </button>  
 
<!-- Add data-toggle="buttons-checkbox" pakusintha kalembedwe ka bokosi pa btn-group -->
<div class = "btn-group" data-toggle = "mabatani-checkbox" >  
  <button class = "btn" > Kumanzere </ batani> 
  <button class = "btn" > Pakati </ batani> 
  <button class = "btn" > Kumanja </ batani> 
</div>
 
<!-- Add data-toggle="buttons-radio" pakusintha kalembedwe ka wailesi pa btn-group -->
<div class = "btn-group" data-toggle = "mabatani-wailesi" >  
  <button class = "btn" > Kumanzere </ batani> 
  <button class = "btn" > Pakati </ batani> 
  <button class = "btn" > Kumanja </ batani> 
</div>

Njira

$().batani('kusintha')

Imatembenuza dziko lokankhira. Imawonetsa batani kuwonekera kuti yayatsidwa.

<button class = "btn" data-toggle = "batani" > … </button>   

$().batani('kutsegula')

Imakhazikitsa mawonekedwe a batani kuti mutsegule - imalepheretsa mabatani ndikusintha mawu pokweza mawu. Kutsegula mawu kuyenera kufotokozedwa pa batani pogwiritsa ntchito mawonekedwe a data data-loading-text.

<button class = "btn" data-loading-text = "kutsitsa zinthu..." > ... </button>   

$(). batani ('kukonzanso')

Bwezerani mawonekedwe a batani - kusintha mawu kukhala mawu oyamba.

$(). batani (chingwe)

Bwezerani mawonekedwe a batani - kusinthana mawu kumtundu uliwonse wa data.

<button class = "btn" data-complete-text = "wamaliza!" > ... </ batani>   
<script>
  $ ( '.btn' ). batani ( 'kumaliza' )
</script>

Za

Pezani masitayelo oyambira ndi chithandizo chosinthika cha zinthu zomwe zimatha kugwa monga ma accordion ndi navigation.

* Imafunikira pulogalamu yowonjezera ya Transitions kuti iphatikizidwe.

Chitsanzo cha accordion

Pogwiritsa ntchito pulogalamu yowonjezera ya kugwa, tinapanga widget yosavuta ya accordion:

Kugwiritsa ntchito bootstrap-collapse.js

Yambitsani kudzera pa javascript:

$ ( ".kugwa" ). kugwa ()

Zosankha

Markup

Ingowonjezerani data-toggle="collapse"ndi data-targetchinthu kuti muzitha kuwongolera chinthu chomwe chimatha kutha. Malingaliro data-targetamavomereza chosankha cha css kuti agwiritse ntchito kugwa. Onetsetsani kuti mwawonjezera kalasi collapseku chinthu chomwe chimatha. Ngati mukufuna kuti isatseguke, onjezani kalasi yowonjezera in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  zosavuta kukomoka
</ batani>
 
<div id = "demo" class = "kugwera mkati" > … </div>  

Njira

.kugwa(zosankha)

Imatsegula zomwe zili patsamba lanu ngati chinthu chosokonekera. Imavomereza zomwe mungachite object.

$ ( '#myCollapsible' ). kugwa ({
  toggle : zabodza 
})

.kugwa ('kusintha')

Imasintha zinthu zomwe zimagundika kuti ziwonetsedwe kapena zobisika.

.kugwa('show')

Imawonetsa chinthu chomwe chimatha kutha.

.gwa ('bisala')

Imabisa chinthu chomwe chimatha kutha.

Zochitika

Gulu la kugwa la Bootstrap limawulula zochitika zingapo kuti zigwirizane ndi kugwa.

$ ( '#myCollapsible' ). pa ( 'zobisika' , ntchito () {   
  // kuchitapo kanthu...
})

Za

Pulogalamu yowonjezera yowonjezera yoyendetsa njinga kudzera muzinthu. Kuyenda mosangalatsa.

Mwachitsanzo carousel

Onerani chiwonetsero chazithunzi pansipa.

Chizindikiro choyamba cha Thumbnail

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

Chizindikiro Chachiwiri cha Thumbnail

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

Chizindikiro Chachitatu cha Thumbnail

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

‹ ›

Kugwiritsa ntchito bootstrap-carousel.js

Imbani kudzera pa javascript:

$ ( '.carousel' ). carousel ()

Zosankha

Markup

Mawonekedwe a data amagwiritsidwa ntchito pazowongolera zam'mbuyomu ndi zina. Onani chitsanzo pansipa.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Zinthu za Carousel -->
  <div class = "carousel-inner" > 
    <div class = "chinthu chogwira" > ... </div> 
    <div class = "chinthu" > ... </div> 
    <div class = "chinthu" > ... </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> & lsaquo ; </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Njira

.carousel(zosankha)

Imayambitsa carousel ndi zosankha zomwe mungasankhe objectndikuyamba kuyendetsa zinthu.

$ ( '.carousel' ). carousel ({
  nthawi : 2000 
})

.carousel('cycle')

Amazungulira zinthu za carousel kuchokera kumanzere kupita kumanja.

.carousel('pause')

Imayimitsa carousel kuti isayendetse zinthu.

.carousel(nambala)

Azunguliza carousel ku chimango china (0 kutengera, ofanana ndi gulu).

.carousel('prev')

Kuzungulira kwa chinthu cham'mbuyo.

.carousel('next')

Kuzungulira ku chinthu chotsatira.

Zochitika

Kalasi ya carousel ya Bootstrap imawulula zochitika ziwiri zolumikizana ndi machitidwe a carousel.

Za

Pulagi yoyambira, yotalikira mosavuta yopangira mwachangu zilembo zokongola ndi mawu amtundu uliwonse.

Chitsanzo

Yambani kulemba m'gawo lomwe lili pansipa kuti muwonetse zotsatira za typeahead.

Kugwiritsa ntchito bootstrap-typeahead.js

Imbani typeahead kudzera javascript:

$ ( '.typeahead' ). mtundu ()

Zosankha

Markup

Onjezani mawonekedwe a data kuti mulembetse chinthu chokhala ndi typeahead.

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

Njira

.typeahead(zosankha)

Imayambitsa zolowetsa ndi typeahead.