Malangizo
Zolemba ndi zitsanzo zowonjezerera zida za Bootstrap ndi CSS ndi JavaScript pogwiritsa ntchito CSS3 pa makanema ojambula pamanja ndi mawonekedwe a data posungira mitu yanu.
Zomwe muyenera kudziwa mukamagwiritsa ntchito pulogalamu yowonjezera:
- Zida zimadalira laibulale ya gulu lachitatu Popper.js kuti ikhazikike. Muyenera kuphatikiza popper.min.js pamaso pa bootstrap.js kapena gwiritsani ntchito
bootstrap.bundle.min.js
/bootstrap.bundle.js
yomwe ili ndi Popper.js kuti zida zigwire ntchito! - Ngati mukupanga JavaScript yathu kuchokera kugwero, pamafunika
util.js
. - Zida ndizolowera pazifukwa zogwirira ntchito, chifukwa chake muyenera kuziyambitsa nokha .
- Zida zokhala ndi mitu zazitali sizimawonetsedwa.
- Nenani
container: 'body'
kuti mupewe kupereka zovuta muzinthu zovuta kwambiri (monga magulu athu olowetsa, magulu a batani, ndi zina). - Kuyambitsa zida zazinthu zobisika sikungagwire ntchito.
- Zida
.disabled
kapenadisabled
zinthu ziyenera kuyambitsidwa pa chinthu chokulunga. - Zikayambika kuchokera ku ma hyperlink omwe amatambasula mizere ingapo, nsonga za zida zidzakhazikika. Gwiritsani
white-space: nowrap;
ntchito zanu<a>
kuti mupewe izi. - Zida ziyenera kubisika zisanachotsedwe mu DOM.
Muli nazo zonse? Chabwino, tiyeni tiwone momwe amagwirira ntchito ndi zitsanzo zina.
Njira imodzi yokhazikitsira zida zonse patsamba ingakhale kuwasankha malinga ndi momwe data-toggle
alili:
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.
Yendani pamwamba pa mabatani omwe ali pansipa kuti muwone malangizo anayi: pamwamba, kumanja, pansi, ndi kumanzere.
Ndipo ndi HTML yachizolowezi yowonjezedwa:
Pulogalamu yowonjezera yowonjezera imapanga zokhutira ndi zolembera zomwe zimafunidwa, ndipo mwachisawawa zimayika zida pambuyo pa zomwe zimayambitsa.
Yambitsani chida kudzera pa JavaScript:
Cholembera chofunikira pa chida ndi mawonekedwe chabe data
ndipo title
pa chinthu cha HTML mukufuna kukhala ndi chida. Zolemba zopangira zida ndizosavuta, ngakhale zimafunikira malo (mwachisawawa, zokhazikitsidwa top
ndi pulogalamu yowonjezera).
Kupanga zida zothandizira ogwiritsa ntchito kiyibodi ndi ukadaulo wothandizira
Muyenera kungowonjezera zida kuzinthu za HTML zomwe nthawi zambiri zimakhala zolunjika pa kiyibodi komanso zolumikizana (monga maulalo kapena zowongolera mawonekedwe). Ngakhale zinthu zosasintha za HTML (monga <span>
s) zitha kuwonetseredwa powonjezera mawonekedwe tabindex="0"
, izi ziwonjezera kuyimitsa kokhumudwitsa komanso kusokoneza pazinthu zomwe sizimalumikizana ndi ogwiritsa ntchito kiyibodi. Kuphatikiza apo, matekinoloje ambiri othandizira pakadali pano salengeza zachida ichi.
Kuphatikiza apo, musamangodalira hover
ngati choyambitsa chida chanu, chifukwa izi zipangitsa kuti zida zanu zikhale zosatheka kuyambitsa ogwiritsa ntchito kiyibodi.
Zinthu zomwe zili ndi mawonekedwe disabled
ake sizimayenderana, kutanthauza kuti ogwiritsa ntchito sangathe kuyang'ana, kuyang'ana pamwamba, kapena kuzidina kuti ayambitse chida (kapena popover). Monga njira yogwirira ntchito, mudzafuna kuyambitsa chida kuchokera pachimake <div>
kapena <span>
, chopangidwa kuti chikhale chokhazikika pogwiritsa ntchito kiyibodi tabindex="0"
, ndikupitilira zomwe pointer-events
zili olumala.
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-
, monga mu data-animation=""
.
Dzina | Mtundu | Zosasintha | Kufotokozera |
---|---|---|---|
makanema ojambula | boolean | zoona | Ikani kusintha kwa CSS pazida |
chotengera | chingwe | chinthu | zabodza | zabodza | Imawonjezera chida ku chinthu china. Chitsanzo: |
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: |
html | boolean | zabodza | Lolani HTML pazida. Ngati ndi zoona, ma tag a HTML mu tooltip's Gwiritsani ntchito mawu ngati mukuda nkhawa ndi kuukira kwa XSS. |
kuika | chingwe | ntchito | 'pamwamba' | Momwe mungayikitsire chida - auto | pamwamba | pansi | kumanzere | kulondola. Ntchito ikagwiritsidwa ntchito kudziwa malo, imatchedwa ndi chida cha DOM node ngati mtsutso wake woyamba ndi chinthu choyambitsa DOM node ngati yachiwiri. Nkhaniyi |
wosankha | chingwe | zabodza | zabodza | Ngati chosankha chaperekedwa, zida zopangira zida zimaperekedwa ku zomwe zafotokozedwazo. M'malo mwake, izi zimagwiritsidwa ntchito kuti zithandizire HTML zomwe zili ndi ma popover awonjezedwe. Onani izi ndi chitsanzo chodziwitsa . |
template | chingwe | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Base HTML kuti mugwiritse ntchito popanga chida. The tooltip's adzabayidwa
Chovala chakunja chiyenera kukhala ndi |
mutu | chingwe | chinthu | ntchito | '' | Mtengo wamutu wotsikirapo ngati Ngati ntchito yaperekedwa, idzayitanidwa ndi |
choyambitsa | chingwe | 'hover focus' | Momwe chida chimayambira - dinani | kugwa | kuganizira | buku. Mutha kudutsa zoyambitsa zambiri; alekanitse iwo ndi danga.
|
kuchepetsa | nambala | chingwe | 0 | Kuchotsera kwa chida chogwirizana ndi chandamale chake. Kuti mumve zambiri onani za Popper.js's offset docs . |
fallbackPlacement | chingwe | gulu | 'tembenuzani' | Lolani kutchula malo omwe Popper adzagwiritse ntchito pobwerera. Kuti mumve zambiri onani za Popper.js's behaviour docs |
malire | chingwe | chinthu | 'scrollParent' | Kusefukira malire malire a chida. Imavomereza mfundo za 'viewport' , 'window' , 'scrollParent' , kapena HTMLElement reference (JavaScript yokha). Kuti mudziwe zambiri onani zolemba za preventOverflow za Popper.js . |
Mawonekedwe a data pazida zapayekha
Zosankha za zida zapayekha zitha kufotokozedwa pogwiritsa ntchito mawonekedwe a data, monga tafotokozera pamwambapa.
Asynchronous njira ndi kusintha
Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbirayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .
Imangiriza chogwirizira ku zida zosonkhanitsira.
Imawulula zida za chinthu. Imabwerera kwa woyimbirayo chida chisanasonyezedwe (ie zisanachitike shown.bs.tooltip
). Izi zimatengedwa ngati "kuyambitsa" kwa chida chothandizira. Zida zokhala ndi mitu zazitali sizimawonetsedwa.
Imabisa chida cha chinthu. Imabwerera kwa woyimbirayo chida chisanabisike (ie zisanachitike hidden.bs.tooltip
). Izi zimatengedwa ngati "kuyambitsa" kwa chida chothandizira.
Imatembenuza chida cha chinthu. Imabwerera kwa woyimbirayo chida chisanasonyezedwe kapena kubisidwa (ie chisanachitike shown.bs.tooltip
kapena hidden.bs.tooltip
chochitikacho). Izi zimatengedwa ngati "kuyambitsa" kwa chida chothandizira.
Imabisa ndi kuwononga chida cha chinthu. Zida zomwe zimagwiritsa ntchito kugawira ena (omwe amapangidwa pogwiritsa ntchito selector
kusankha ) sizingawonongeke pazigawo zoyambitsa mbadwa.
Imapatsa chida cha chinthu kuti chiwonetsedwe. Zida zothandizira zimayatsidwa mwachisawawa.
Imachotsa kuthekera kwa chida cha chinthu kuti chiwonetsedwe. Zidazi zitha kuwonetsedwa pokhapokha zitayatsidwanso.
Imasintha kuthekera kwa chida cha chinthu kuti chiwonetsedwe kapena kubisika.
Imakonzanso pomwe pali chida cha chinthu.
Mtundu wa Chochitika | Kufotokozera |
---|---|
show.bs.tip | Chochitika ichi chimayaka nthawi yomweyo show njira yachitsanzo itayitanidwa. |
chiwonetsero.bs.tip | Chochitikachi chimachotsedwa pamene chida chawonekera kwa wogwiritsa ntchito (chidikira kuti kusintha kwa CSS kumalize). |
hide.bs.tip | Chochitika ichi chimachotsedwa nthawi yomweyo pamene hide njira yachitsanzo yayitanidwa. |
zobisika.bs.tip | Chochitikachi chimachotsedwa pamene chida chatha kubisidwa kwa wogwiritsa ntchito (chidikira kuti kusintha kwa CSS kumalize). |
inserted.bs.tooltip | Chochitikachi chimachotsedwa pambuyo pa show.bs.tooltip chochitikacho pamene template ya tooltip yawonjezeredwa ku DOM. |