Bweretsani zamoyo za Bootstrap - tsopano ndi mapulagini 13 a jQuery.
Mapulagini amatha kuphatikizidwa payekhapayekha (ngakhale ena amafunikira kudalira), kapena zonse mwakamodzi. Ma bootstrap.js ndi bootstrap.min.js ali ndi mapulagini onse mufayilo imodzi.
Mutha kugwiritsa ntchito mapulagini onse a Bootstrap kudzera mu API yamakapu osalemba mzere umodzi wa JavaScript. Iyi ndiye kalasi yoyamba ya Bootstrap ndipo iyenera kukhala kuganizira kwanu koyamba mukamagwiritsa ntchito pulogalamu yowonjezera.
Izi zati, nthawi zina zingakhale zofunika kuzimitsa ntchitoyi. Chifukwa chake, timaperekanso kuthekera koletsa API ya data pochotsa zochitika zonse pagulu lokhala ndi `'data-api'`. Izi zikuwoneka motere:
- $ ( 'thupi' ). kuzimitsa ( '.data-api' )
Kapenanso, kuti mulondole pulogalamu yowonjezera, ingophatikizani dzina la plugin ngati malo okhala ndi dzina la data-api monga chonchi:
- $ ( 'thupi' ). kuzimitsa ( '.alert.data-api' )
Tikukhulupiriranso kuti muyenera kugwiritsa ntchito mapulagini onse a Bootstrap kudzera mu JavaScript API. Ma API onse omwe ali pagulu ndi amodzi, njira zosinthira, ndikubweza zosonkhanitsa zomwe zachitika.
- $ ( ".btn.danger" ). batani ( "kusintha" ). addClass ( "mafuta" )
Njira zonse ziyenera kuvomereza chinthu chosankha, chingwe chomwe chimayang'ana njira inayake, kapena palibe (chomwe chimayambitsa pulogalamu yowonjezera yokhala ndi machitidwe osakhazikika):
- $ ( "#myModal" ). modal () // yoyambitsidwa ndi zosasintha
- $ ( "#myModal" ). modal ({ kiyibodi : zabodza }) // zoyambitsidwa popanda kiyibodi
- $ ( "#myModal" ). modal ( 'show' ) // kuyambitsa ndi kuyitanitsa kuwonetsa nthawi yomweyo
Pulagi iliyonse imawululanso womanga wake pamtengo wa `Constructor`: $.fn.popover.Constructor
. Ngati mukufuna kupeza pulogalamu yowonjezera, itengereni mwachindunji ku chinthu: $('[rel=popover]').data('popover')
.
Nthawi zina pamafunika kugwiritsa ntchito mapulagini a Bootstrap okhala ndi ma UI ena. Pazifukwa izi, kugunda kwa mayina kumachitika nthawi zina. Izi zikachitika, mutha kuyitanitsa pulogalamu yowonjezera .noConflict
yomwe mukufuna kubwezeretsa mtengo wake.
- var bootstrapButton = $ . fn . batani . noConflict () // bweretsani $.fn.button ku mtengo womwe munapatsidwa kale
- $ . fn . bootstrapBtn = bootstrapButton // perekani $().bootstrapBtn ntchito ya bootstrap
Bootstrap imapereka zochitika zapadera pazochita zambiri zapadera za pulogalamu yowonjezera. Nthawi zambiri, izi zimabwera mu mawonekedwe osamalizidwa komanso am'mbuyomu - pomwe mawu osamalitsa (mwachitsanzo. show
) amayambika kumayambiriro kwa chochitika, ndipo mawonekedwe ake apitalo (mwachitsanzo. shown
) amayambika akamaliza kuchitapo kanthu.
Zochitika zonse zopanda malire zimapereka magwiridwe antchito a preventDefault. Izi zimapereka kuthekera koyimitsa kuchitapo kanthu kusanayambe.
- $ ( '#myModal' ). pa ( 'show' , ntchito ( e ) {
- ngati (! data ) kubwerera e . preventDefault () // imayimitsa modal kuti isawonetsedwe
- })
Pazosavuta kusintha, phatikizani bootstrap-transition.js kamodzi pamodzi ndi mafayilo ena a JS. Ngati mukugwiritsa ntchito compiled (kapena minified) bootstrap.js , palibe chifukwa chophatikizira izi-zilipo kale.
Zitsanzo zingapo za pulogalamu yowonjezera yosinthira:
Ma modals amasinthidwa, koma osinthika, zokambirana zimalimbikitsa ndi magwiridwe antchito ochepera komanso kusasintha kwanzeru.
Njira yowonetsera yokhala ndi mutu, thupi, ndi zochita m'munsimu.
Thupi limodzi labwino…
- <div class = "modal hide fade" >
- <div class = "modal-header" >
- <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </ batani>
- <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>
Sinthani modal kudzera pa JavaScript podina batani pansipa. Idzatsika ndikuzimiririka kuchokera pamwamba pa tsamba.
- <!-- Batani loyambitsa modal -->
- <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal"> Yambitsani mawonekedwe </a>
- <!-- Modali -->
- <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria- hidden = "true" >
- <div class = "modal-header" >
- <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "zoona" > × </button>
- <h3 id = "myModalLabel" > Mutu wamutu </h3>
- </div>
- <div class = "modal-body" >
- <p> Thupi limodzi labwino… </p>
- </div>
- <div class = "modal-footer" >
- <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Tsekani </button>
- <button class = "btn btn-primary" > Sungani zosintha </ batani>
- </div>
- </div>
Yambitsani modali osalemba JavaScript. Khazikitsani data-toggle="modal"
chinthu chowongolera, ngati batani, limodzi ndi data-target="#foo"
kapena href="#foo"
kutsata njira inayake kuti musinthe.
- <button type = "button" data-toggle = "modal" data-target = "#myModal" > Launch modal </button>
Imbani modal yokhala ndi id myModal
yokhala ndi mzere umodzi wa JavaScript:
- $ ( '#myModal' ). modali ( zosankha )
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-
, monga mu data-backdrop=""
.
Dzina | mtundu | kusakhulupirika | kufotokoza |
---|---|---|---|
kumbuyo | boolean | zoona | Mulinso modal-backdrop element. Kapenanso, tchulani static zakumbuyo zomwe sizitseka moduli mukadina. |
kiyibodi | boolean | zoona | Amatseka modali pamene kiyi yothawa ikanikizidwa |
chiwonetsero | boolean | zoona | Imawonetsa modali ikayambika. |
kutali | njira | zabodza | Ngati ulalo wakutali waperekedwa, zomwe zili mkati zimayikidwa kudzera munjira ya jQuery
|
Imatsegula zomwe zili ngati modal. Imavomereza zomwe mungachite object
.
- $ ( '#myModal' ). modali ({
- keyboard : zabodza
- })
Imatembenuza pamanja modali.
- $ ( '#myModal' ). modali ( 'toggle' )
Pamanja amatsegula modali.
- $ ( '#myModal' ). modali ( 'show' )
Amabisa pamanja modali.
- $ ( '#myModal' ). modali ( 'hide' )
Kalasi ya modal ya Bootstrap imawulula zochitika zingapo kuti zigwirizane ndi machitidwe a modal.
Chochitika | Kufotokozera |
---|---|
chiwonetsero | Chochitika ichi chimayaka nthawi yomweyo show njira yachitsanzo itayitanidwa. |
zowonetsedwa | Chochitikachi chimachotsedwa pomwe modal yawonetsedwa kwa wogwiritsa ntchito (idikirira kuti kusintha kwa css kumalize). |
kubisa | Chochitika ichi chimachotsedwa nthawi yomweyo pamene hide njira yachitsanzo yayitanidwa. |
zobisika | Chochitikachi chimachotsedwa pamene modal yatha kubisidwa kwa wogwiritsa ntchito (idikirira kuti kusintha kwa css kumalize). |
- $ ( '#myModal' ). pa ( 'zobisika' , ntchito () {
- // kuchitapo kanthu ...
- })
Onjezani mindandanda yotsitsa pafupifupi chilichonse ndi pulogalamu yowonjezera iyi, kuphatikiza navbar, ma tabo, ndi mapiritsi.
Onjezani data-toggle="dropdown"
ku ulalo kapena batani kuti musinthe kutsitsa.
- <div class = "dropdown" >
- <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Choyambitsa chotsitsa </a>
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
- </div>
Kuti ma URL asasinthe, gwiritsani ntchito mawonekedwewo data-target
m'malo mwa href="#"
.
- <div class = "dropdown" >
- <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >
- Tsitsa m'munsi
- <b class = "caret" > </b>
- </a>
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
- </div>
Imbani zotsitsa kudzera pa JavaScript:
- $ ( '. dropdown-toggle' ). kutsika ()
Palibe
Pulogalamu yama api yosinthira ma menyu a navbar yopatsidwa kapena kusakatula kwa ma tabbed.
Pulagi ya ScrollSpy ndi yongosintha zokha za nav kutengera malo a mpukutu. Sungani malo omwe ali pansi pa navbar ndikuwona kusintha kwa kalasi yogwira. Zinthu zotsikirapo zidzawonetsedwanso.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi asanagulitse. Ufulu wa njinga zamtundu wa Tumblr zilizonse. Ma cardigan opangidwa ndi manja. Chithunzi cha Velit seitan mcsweeney 3 wolf moon irure. Kabudula wa Cosby lomo wa jean, williamsburg hoodie minim qui mwina simunamvepo za iwo et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa masharubu skateboard, adipisicing fugiat velit pitchfork ndevu. Freegan ndevu aliqua cupidatat mcsweeney's vero. Cupidatat zinayi loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, 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.
Occaecat commodo aliqua deelectus. Fap craft beer 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 ndi adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable deelectus consectetur fanny pack iphone.
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.
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 delectus food truck. Sapiente synth id guessnda. Locavore sed helvetica cliche irony, mabingu mwina simunawamvepo consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat asanagulitse, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft mowa seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco mabingu.
Kuti muwonjezere machitidwe a scrollspy pakuyenda kwanu kwapamwamba, ingowonjezerani data-spy="scroll"
ku chinthu chomwe mukufuna kuti mukazonde (nthawi zambiri ili ndi thupi) data-target=".navbar"
ndikusankha nav yoti mugwiritse ntchito. Mufuna kugwiritsa ntchito scrollspy ndi .nav
gawo.
- <body data-spy = "scroll" data-target = ".navbar" > ... </body>
Imbani scrollspy kudzera pa JavaScript:
- $ ( '#navbar' ). scrollspy ()
<a href="#home">home</a>
kuyenera kufanana ndi chinthu chomwe chili mu dome ngati
<div id="home"></div>
.
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 zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-
, monga mu data-offset=""
.
Dzina | mtundu | kusakhulupirika | kufotokoza |
---|---|---|---|
kuchepetsa | nambala | 10 | Ma pixel oti muyike kuchokera pamwamba powerengera malo osindikizira. |
Chochitika | Kufotokozera |
---|---|
yambitsa | Chochitikachi chimayaka nthawi iliyonse chinthu chatsopano chikatsegulidwa ndi scrollspy. |
Onjezani magwiridwe antchito a tabu achangu, osinthika kuti musinthe pazigawo zazomwe zili m'deralo, ngakhale kudzera m'mindandanda yotsitsa.
denim yaiwisi mwina simunamvepo za iwo akabudula a jean 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 aarel, 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Yambitsani ma tabable 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)
Mutha kuyambitsa tabu kapena kuyenda kwamapiritsi osalemba JavaScript mwa kungotchulapo data-toggle="tab"
kapena data-toggle="pill"
pa chinthu. Kuwonjezera nav
ndi nav-tabs
makalasi pa tabu ul
idzagwiritsa ntchito kalembedwe ka Bootstrap.
- <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>
Imayatsa chinthu cha tabu ndi chidebe cha zinthu. Tabu iyenera kukhala ndi imodzi data-target
kapena href
yolunjika 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>
Chochitika | Kufotokozera |
---|---|
chiwonetsero | Chochitikachi chikuyaka pa tabu chiwonetsero, koma tabu yatsopano isanasonyezedwe. Gwiritsani ntchito event.target ndikuwongolera event.relatedTarget tabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana. |
zowonetsedwa | Chochitika ichi chikuyaka pa tabu chiwonetsero pambuyo poti tabu yawonetsedwa. Gwiritsani ntchito event.target ndikuwongolera event.relatedTarget tabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana. |
- $ ( 'a[data-toggle="tab"]' ). pa ( 'yawonetsedwa' , ntchito ( e ) {
- e . target // tabu yotsegulidwa
- e . zokhudzanaTarget // tabu yapita
- })
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.
Pazifukwa zogwirira ntchito, chida ndi popover data-apis alowa, kutanthauza kuti muyenera kuziyambitsa nokha .
Yendani pamwamba pa maulalo omwe ali pansipa kuti muwone zida zothandizira:
mathalauza olimba next level keffiyeh mwina simunamvepo. Photo booth ndevu za denim yaiwisi letterpress vegan messenger bag stumptown. Zovala za Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american zovala zili ndi terry richardson vinyl chambray. Ndevu stumptown, ma cardigans banh mi lomo mabingu. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really artisan artisan whatever keytar , malo owoneka bwino a famu-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Mukamagwiritsa ntchito zida ndi popovers ndi magulu olowetsa a Bootstrap, muyenera kukhazikitsa container
(zolembedwa pansipa) kuti mupewe zotsatira zosafunikira.
Yambitsani chida kudzera pa JavaScript:
- $ ( '#chitsanzo' ). chida ( zosankha )
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-
, monga mu data-animation=""
.
Dzina | mtundu | kusakhulupirika | kufotokoza |
---|---|---|---|
makanema ojambula | boolean | zoona | gwiritsani ntchito kusintha kwa css ku chida |
html | boolean | zabodza | Ikani html muzothandizira. Ngati zabodza, njira ya jquery text idzagwiritsidwa ntchito kuyika zomwe zili mu dom. Gwiritsani ntchito mawu ngati mukuda nkhawa ndi kuukira kwa XSS. |
kuika | chingwe | ntchito | 'pamwamba' | momwe mungakhazikitsire chida - pamwamba | pansi | kumanzere | kulondola |
wosankha | chingwe | zabodza | Ngati chosankha chaperekedwa, zida zopangira zida zidzaperekedwa ku zomwe zafotokozedwazo. |
mutu | chingwe | ntchito | '' | mtengo wamutu wokhazikika ngati tag ya `title` palibe |
choyambitsa | chingwe | 'hover focus' | momwe chida chimayambira - dinani | kugwa | kuganizira | buku. Dziwani kuti case pass trigger mutliple, malo opatulidwa, mitundu yoyambitsa. |
kuchedwa | nambala | chinthu | 0 | kuchedwa kusonyeza ndi kubisa chida (ms) - sikugwira ntchito pamanja choyambitsa Ngati nambala yaperekedwa, kuchedwetsa kumayikidwa pazithunzi zonse ziwiri Kapangidwe kachinthu ndi: |
chotengera | chingwe | zabodza | zabodza | Imawonjezera chida ku chinthu china |
- <a href = "#" data-toggle = "tooltip" title = "chida choyamba"> yendani pamwamba panga </a>
Imangiriza chogwirizira ku zida zosonkhanitsira.
Imawulula zida za chinthu.
- $ ( '#element' ). chida ( 'show' )
Imabisa chida cha chinthu.
- $ ( '#element' ). chida ( 'hide' )
Imatembenuza chida cha chinthu.
- $ ( '#element' ). chida ( 'toggle' )
Imabisa ndi kuwononga chida cha chinthu.
- $ ( '#element' ). chida ( 'destroy' )
Onjezani zophatikizika zazing'ono, monga zomwe zili pa iPad, kuzinthu zilizonse zachidziwitso chachiwiri. Yendetsani pa batani kuti muyambitse popover. Pamafunika Tooltip iphatikizidwe.
Zosankha zinayi zilipo: pamwamba, kumanja, pansi, ndi kumanzere.
Sed posuere consectetur est at lobortis. Aenean eu lero quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu lero quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu lero quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu lero quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Palibe zowonetsa zomwe zimawonetsedwa ngati popover amapangidwa kuchokera ku JavaScript ndi zomwe zili mkati mwa adata
mwamalingaliro.
Yambitsani popover kudzera pa JavaScript:
- $ ( '#chitsanzo' ). popover ( zosankha )
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-
, monga mu data-animation=""
.
Dzina | mtundu | kusakhulupirika | kufotokoza |
---|---|---|---|
makanema ojambula | boolean | zoona | gwiritsani ntchito kusintha kwa css ku chida |
html | boolean | zabodza | Ikani html mu popover. Ngati zabodza, njira ya jquery text idzagwiritsidwa ntchito kuyika zomwe zili mu dom. Gwiritsani ntchito mawu ngati mukuda nkhawa ndi kuukira kwa XSS. |
kuika | chingwe | ntchito | 'chabwino' | momwe mungayikitsire popover - pamwamba | pansi | kumanzere | kulondola |
wosankha | chingwe | zabodza | ngati chosankha chaperekedwa, zida zothandizira zidzaperekedwa ku zolinga zomwe zatchulidwa |
choyambitsa | chingwe | 'dinani' | momwe popover imayambira - dinani | kugwa | kuganizira | buku |
mutu | chingwe | ntchito | '' | mtengo wamutu wokhazikika ngati mawonekedwe a `mutu` palibe |
zomwe zili | chingwe | ntchito | '' | mtengo wokhazikika ngati mawonekedwe a `data-contain` palibe |
kuchedwa | nambala | chinthu | 0 | kuchedwa kusonyeza ndi kubisa popover (ms) - sikugwira ntchito pamanja choyambitsa mtundu Ngati nambala yaperekedwa, kuchedwetsa kumayikidwa pazithunzi zonse ziwiri Kapangidwe kachinthu ndi: |
chotengera | chingwe | zabodza | zabodza | Imawonjezera popover ku chinthu china |
Pazifukwa zogwirira ntchito, Tooltip ndi Popover data-apis alowa. Ngati mukufuna kuzigwiritsa ntchito ingotchulani kusankha.
Imayambitsa ma popover pazosonkhanitsira zinthu.
Imawulula ma element popover.
- $ ( '#element' ). popover ( 'show' )
Imabisa zinthu zotuluka.
- $ ( '#element' ). popover ( 'bisala' )
Imatembenuza ma element popover.
- $ ( '#element' ). popover ( 'toggle' )
Imabisa ndikuwononga kufalikira kwa chinthu.
- $ ( '#element' ). popover ( 'kuwononga' )
Onjezani magwiridwe antchito ku mauthenga onse ochenjeza omwe ali ndi pulogalamu yowonjezera iyi.
Sinthani ichi ndi icho ndikuyesanso. Ndife mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Yambitsani kuchotsedwa kwa chenjezo kudzera pa JavaScript:
- $ ( ".chidziwitso" ). chenjezo ()
Ingowonjezerani data-dismiss="alert"
ku batani lanu lakutseka kuti mungopereka chidziwitso chapafupi.
- <a class = "close" data-dismiss = "alert" href = "#" > × </a>
Zimangiriza zidziwitso zonse ndi magwiridwe antchito apafupi. Kuti zidziwitso zanu ziwonetsedwe zikatsekedwa, onetsetsani kuti zili .fade
ndi .in
kalasi zomwe zagwiritsidwa ntchito kale.
Kutseka chenjezo.
- $ ( ".chidziwitso" ). chenjezo ( 'close' )
Gulu lochenjeza la Bootstrap limawulula zochitika zingapo kuti zigwirizane ndi zochitika zochenjeza.
Chochitika | Kufotokozera |
---|---|
pafupi | Chochitika ichi chimayaka nthawi yomweyo close njira yachitsanzo itayitanidwa. |
chatsekedwa | Chochitikachi chimachotsedwa pamene chenjezo latsekedwa (lidikira kuti kusintha kwa css kumalize). |
- $ ( '#chenjezo langa' ). kumanga ( 'kotsekedwa' , ntchito () {
- // kuchitapo kanthu ...
- })
Pezani masitayelo oyambira ndi chithandizo chosinthika cha zinthu zomwe zimatha kugwa monga ma accordion ndi navigation.
* Imafunikira pulogalamu yowonjezera ya Transitions kuti iphatikizidwe.
Pogwiritsa ntchito pulogalamu yowonjezera ya kugwa, tinapanga widget yosavuta ya accordion:
- <div class = "accordion" id = "accordion2" >
- <div class = "gulu la accordion" >
- <div class = "accordion-heading" >
- <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _
- Gulu #1
- </a>
- </div>
- <div id = "collapseOne" class = "accordion-body collapse in" >
- <div class = "accordion-inner" >
- Dziwani zambiri ...
- </div>
- </div>
- </div>
- <div class = "gulu la accordion" >
- <div class = "accordion-heading" >
- <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _
- Gulu #2
- </a>
- </div>
- <div id = "collapseTwo" class = "accordion-body collapse" >
- <div class = "accordion-inner" >
- Dziwani zambiri ...
- </div>
- </div>
- </div>
- </div>
- ...
Mutha kugwiritsanso ntchito pulogalamu yowonjezera popanda chizindikiro cha accordion. Pangani batani kuti musinthe kukulitsa ndi kugwa kwa chinthu china.
- <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
- zosavuta kukomoka
- </ batani>
- <div id = "demo" class = "kugwera mkati" > … </div>
Ingowonjezerani data-toggle="collapse"
ndi data-target
chinthu kuti muzitha kuwongolera chinthu chomwe chimatha kutha. Malingaliro data-target
amavomereza chosankha cha css kuti agwiritse ntchito kugwa. Onetsetsani kuti mwawonjezera kalasi collapse
ku chinthu chomwe chimatha. Ngati mukufuna kuti ikhale yotseguka, onjezani kalasi yowonjezerain
.
Kuti muwonjeze kasamalidwe kagulu ka accordion ku chiwongolero chosokonekera, onjezani mawonekedwe a data data-parent="#selector"
. Onani pachiwonetsero kuti muwone izi zikugwira ntchito.
Yambitsani pamanja ndi:
- $ ( ".kugwa" ). kugwa ()
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-
, monga mu data-parent=""
.
Dzina | mtundu | kusakhulupirika | kufotokoza |
---|---|---|---|
kholo | wosankha | zabodza | Ngati chosankha ndiye kuti zinthu zonse zomwe zimasokonekera pansi pa kholo lotchulidwa zidzatsekedwa chinthu chosokonekerachi chikuwonetsedwa. (zofanana ndi chikhalidwe cha accordion) |
kusintha | boolean | zoona | Imasintha chinthu chomwe chimasokonekera pakuyitanitsa |
Imatsegula zomwe zili ngati chinthu chomwe chimatha kutha. Imavomereza zomwe mungachite object
.
- $ ( '#myCollapsible' ). kugwa ({
- toggle : zabodza
- })
Imasintha zinthu zomwe zimagundika kuti ziwonetsedwe kapena zobisika.
Imawonetsa chinthu chomwe chimatha kutha.
Imabisa chinthu chomwe chimatha kutha.
Gulu la kugwa la Bootstrap limawulula zochitika zingapo kuti zigwirizane ndi kugwa.
Chochitika | Kufotokozera |
---|---|
chiwonetsero | Chochitika ichi chimayaka nthawi yomweyo show njira yachitsanzo itayitanidwa. |
zowonetsedwa | Chochitikachi chimachotsedwa pomwe chinthu chakugwa chawonetsedwa kwa wogwiritsa ntchito (chidikirira kuti kusintha kwa css kumalize). |
kubisa | Chochitikachi chimathamangitsidwa nthawi yomweyo hide njirayo itayitanidwa. |
zobisika | Chochitikachi chimachotsedwa pomwe chinthu chakugwa chabisidwa kwa wogwiritsa ntchito (chidikirira kuti kusintha kwa css kumalize). |
- $ ( '#myCollapsible' ). pa ( 'zobisika' , ntchito () {
- // kuchitapo kanthu ...
- })
Chiwonetserochi chili m'munsimu chikuwonetsa pulogalamu yowonjezera ndi gawo la kupalasa njinga kupyola zinthu ngati carousel.
- <div id = "myCarousel" class = "carousel slide" >
- <ol class = "carousel-indicators" >
- <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>
- <li data-target = "#myCarousel" data-slide-to = "1" ></li>
- <li data-target = "#myCarousel" data-slide-to = "2" ></li>
- </ol>
- <!-- 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>
Gwiritsani ntchito mawonekedwe a data kuti muwongolere malo a carousel mosavuta. data-slide
imavomereza mawu osakira prev
kapena next
, omwe amasintha malo a slide mogwirizana ndi momwe ilili pano. Kapenanso, gwiritsani ntchito data-slide-to
kupititsa index ya slide yaiwisi ku carousel data-slide-to="2"
, yomwe imadumphira malo a slide kupita ku index inayake kuyambira ndi0
.
Imbani carousel pamanja ndi:
- $ ( '.carousel' ). carousel ()
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScriptz. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-
, monga mu data-interval=""
.
Dzina | mtundu | kusakhulupirika | kufotokoza |
---|---|---|---|
nthawi | nambala | 5000 | Kuchuluka kwa nthawi yochedwetsa pakati pa kuyendetsa chinthu chokha. Ngati zabodza, carousel siizungulira yokha. |
kupuma | chingwe | "kuyenda" | Imayimitsa njinga ya carousel pa mouseenter ndikuyambanso kukwera njinga ya carousel pa mouseleave. |
Imayambitsa carousel ndi zosankha zomwe mungasankhe object
ndikuyamba kuyendetsa zinthu.
- $ ( '.carousel' ). carousel ({
- nthawi : 2000
- })
Amazungulira zinthu za carousel kuchokera kumanzere kupita kumanja.
Imayimitsa carousel kuti isayendetse zinthu.
Amayendetsa carousel kupita ku chimango china (0 kutengera, ofanana ndi gulu).
Kuzungulira kwa chinthu cham'mbuyo.
Kuzungulira ku chinthu chotsatira.
Kalasi ya carousel ya Bootstrap imawulula zochitika ziwiri zolumikizana ndi machitidwe a carousel.
Chochitika | Kufotokozera |
---|---|
yenda | Chochitika ichi chimayaka nthawi yomweyo slide njira yachitsanzo ikugwiritsidwa ntchito. |
slid | Chochitikachi chimachotsedwa pamene carousel yamaliza kusintha kwake. |
Pulagi yoyambira, yotalikira mosavuta yopangira mwachangu zilembo zokongola ndi mawu amtundu uliwonse.
- <input type = "text" data- provide = "typeahead" >
Mufuna kukhazikitsa autocomplete="off"
kuti mulepheretse mindandanda yamasewera osasinthika kuti asawonekere pazotsitsa za Bootstrap.
Onjezani mawonekedwe a data kuti mulembetse chinthu chokhala ndi typeahead monga momwe tawonetsera pachitsanzo pamwambapa.
Imbani typeahead pamanja ndi:
- $ ( '.typeahead' ). mtundu ()
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-
, monga mu data-source=""
.
Dzina | mtundu | kusakhulupirika | kufotokoza |
---|---|---|---|
gwero | array, ntchito | [] | Gwero la data loti mufunse motsutsa. Zitha kukhala zingwe zingapo kapena ntchito. Ntchitoyi yadutsa mikangano iwiri, query mtengo mu gawo lolowera ndi process callback. Ntchitoyi ingagwiritsidwe ntchito mofananamo pobweza gwero la deta mwachindunji kapena mosasinthasintha kudzera process mkangano umodzi wa callback. |
zinthu | nambala | 8 | Nambala yochulukitsitsa yazinthu zomwe zikuwonetsedwa pazotsitsa. |
minLength | nambala | 1 | Kutalika kwa zilembo kumafunika musanayambitse malingaliro omaliza okha |
wofananira | ntchito | wosamva kanthu | Njira yomwe imagwiritsidwa ntchito kudziwa ngati funso likufanana ndi chinthu. Amavomereza mkangano umodzi, item womwe ungayesere funso. Pezani funso lapano ndi this.query . Bweretsani boolean true ngati funso likufanana. |
sintha | ntchito | zofananira ndendende, kukhudzidwa kwa nkhani, kusakhudzidwa ndi vuto |
Njira yomwe imagwiritsidwa ntchito posankha zotsatira zomaliza zokha. Imavomereza mkangano umodzi items ndipo imakhala ndi gawo la chitsanzo cha typeahead. Lowetsani funso lomwe lilipo ndi this.query . |
zowonjezera | ntchito | imabweretsanso chinthu chosankhidwa | Njira yomwe imagwiritsidwa ntchito pobweza chinthu chosankhidwa. Amavomereza mkangano umodzi, item ndipo ali ndi kuchuluka kwa chitsanzo cha typeahead. |
chowunikira | ntchito | ikuwonetsa mafananidwe onse osasinthika | Njira yomwe imagwiritsidwa ntchito powunikira zotsatira zomaliza zokha. Imavomereza mkangano umodzi item ndipo imakhala ndi gawo la chitsanzo cha typeahead. Iyenera kubwereranso html. |
Imayambitsa zolowetsa ndi typeahead.
Ma subnavigation kumanzere ndi chiwonetsero chamoyo cha pulogalamu yowonjezera.
Kuti muwonjezere mosavuta khalidwe la affix ku chinthu chilichonse, ingowonjezerani data-spy="affix"
ku chinthu chomwe mukufuna kuti muzichiyang'ana. Kenako gwiritsani ntchito ma offsets kutanthauzira nthawi yosinthira kuyika ndi kutseka chinthu.
- <div data-spy = "affix" data-offset-top = "200" > ... </div>
affix
,
affix-top
, ndi
affix-bottom
. Kumbukirani kuyang'ana kholo lomwe lingathe kugwa pamene cholembera chikalowa pamene chikuchotsa zomwe zili patsamba.
Imbani pulogalamu yowonjezera kudzera pa JavaScript:
- $ ( '#navbar' ). phatikiza ()
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-
, monga mu data-offset-top="200"
.
Dzina | mtundu | kusakhulupirika | kufotokoza |
---|---|---|---|
kuchepetsa | nambala | ntchito | chinthu | 10 | Ma pixel oti muchotse pa skrini powerengera malo osindikizira. Ngati nambala imodzi yaperekedwa, chotsitsacho chidzagwiritsidwa ntchito kumtunda ndi kumanzere. Kuti mumvetsere njira imodzi, kapena zosintha zingapo zapadera, ingoperekani chinthu offset: { x: 10 } . Gwiritsani ntchito ngati mukufuna kupereka chosinthira (chothandiza pamapangidwe ena omvera). |