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, ingowaphatikizanso ngati zowonjezera za data paziwongolero kapena ma modal markup omwe.

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

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modal"> × </a> _  
    <h3> Mutu wamutu </h3>
  </div>
  <div class = "modal-body" > 
    <p> Thupi limodzi labwino… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> 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

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

Njira

$(). dropdown()

Pulogalamu ya api yotsegulira ma menyu a navbar yopatsidwa kapena kusakatula kwa ma 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 mawonekedwe a scrollspy pakuyenda kwanu kwapamwamba, ingowonjezerani data-spy="scroll"ku chinthu chomwe mukufuna kuti mukazonde (nthawi zambiri ili lingakhale thupi).

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

Zosankha

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:

$ ( '#myTab' ). tabu ( 'show' )

Markup

Mutha kuyambitsa tabu kapena kuyenda kwa mapiritsi osalemba javascript mwa kungotchulapo data-toggle="tab"kapena data-toggle="pill"pa chinthu.

<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 ikuyenera kukhala ndi `data-target` kapena `href` yolunjika pa chidebe mu dom.

<ul class = "nav-tabs" > 
  <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 () {  
    $ ( '.tabs a:last' ). tabu ( 'show' )
  })
</script>

Zochitika

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

Za 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 lochenjeza 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:

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

Chitsanzo cha accordion

Pogwiritsa ntchito pulogalamu yowonjezera, tinapanga widget yosavuta ya kalembedwe:

Kugwiritsa ntchito bootstrap-collapse.js

Yambitsani kudzera pa javascript:

$ ( ".kugwa" ). kugwa ()

Zosankha

Markup

Ingowonjezerani data-toggle="collapse"ndi data-targetku chinthu 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 likuwonetsa zochitika zingapo zokokera pakugwa.

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