JavaScript
Bawa komponén Bootstrap pikeun hirup kalawan leuwih belasan plugins jQuery custom. Gampang kalebet sadayana, atanapi hiji-hiji.
Bawa komponén Bootstrap pikeun hirup kalawan leuwih belasan plugins jQuery custom. Gampang kalebet sadayana, atanapi hiji-hiji.
Plugins tiasa dilebetkeun masing-masing (ngagunakeun *.js
file individu Bootstrap), atanapi sadayana sakaligus (ngagunakeun bootstrap.js
atanapi minified bootstrap.min.js
).
Duanana bootstrap.js
sarta bootstrap.min.js
ngandung sakabéh plugins dina file tunggal. Kaasup ngan hiji.
Sababaraha plugins sareng komponén CSS gumantung kana plugins séjén. Upami anjeun ngalebetkeun plugin masing-masing, pastikeun pikeun pariksa katergantungan ieu dina dokumén. Catet ogé yén sadaya plugins gumantung kana jQuery (ieu hartosna jQuery kedah kalebet sateuacan file plugin). Taroskeun kamibower.json
pikeun ningali versi jQuery mana anu dirojong.
Anjeun tiasa nganggo sadayana plugins Bootstrap murni ngalangkungan API markup tanpa nyerat hiji baris JavaScript. Ieu mangrupikeun API kelas munggaran Bootstrap sareng kedah janten pertimbangan munggaran anjeun nalika nganggo plugin.
Kitu cenah, dina sababaraha kaayaan, éta pantes pikeun mareuman fungsionalitas ieu. Ku alatan éta, kami ogé nyadiakeun kamampuhan pikeun nganonaktipkeun API atribut data ku unbinding sakabeh kajadian dina ngaran spasi dokumen kalawan data-api
. Ieu sigana kieu:
Alternatipna, pikeun nargétkeun hiji plugin husus, ngan kaasup ngaran plugin urang salaku ngaranspasi babarengan jeung data-api ngaranspasi kawas kieu:
Entong nganggo atribut data tina sababaraha plugin dina unsur anu sami. Contona, hiji tombol teu bisa duanana mibanda tooltip sarta toggle modal a. Jang ngalampahkeun ieu, ngagunakeun unsur wrapping.
Kami ogé yakin yén anjeun kedah tiasa nganggo sadayana plugins Bootstrap murni ngalangkungan API JavaScript. Kabéh API umum téh tunggal, métode chainable, sarta balik kempelan acted kana.
Sadaya metode kedah nampi pilihan obyék pilihan, senar anu nargétkeun metodeu khusus, atanapi henteu nanaon (anu ngamimitian plugin kalayan paripolah standar):
Unggal plugin ogé ngungkabkeun konstruktor atah na dina Constructor
harta $.fn.popover.Constructor
:. Upami anjeun hoyong kéngingkeun conto plugin khusus, cokot deui langsung tina unsur: $('[rel="popover"]').data('popover')
.
Anjeun tiasa ngarobih setélan standar pikeun plugin ku ngarobih Constructor.DEFAULTS
obyék plugin:
Kadang-kadang perlu ngagunakeun plugins Bootstrap sareng kerangka UI anu sanés. Dina kaayaan ieu, tabrakan ngaranspasi kadang bisa lumangsung. Upami ieu kajantenan, anjeun tiasa nelepon .noConflict
kana plugin anu anjeun hoyong balikkeun nilaina.
Bootstrap nyayogikeun acara khusus pikeun kalolobaan tindakan unik plugins. Sacara umum, ieu datangna dina bentuk participle infinitive jeung kaliwat - dimana infinitive (ex. show
) dipicu dina mimiti hiji acara, sarta formulir participle kaliwat na (ex. shown
) dipicu nalika parantosan hiji aksi.
Dina 3.0.0, sadaya acara Bootstrap dibéré ngaran.
Kabéh acara infinitive nyadiakeun preventDefault
fungsionalitas. Ieu nyadiakeun kamampuhan pikeun ngeureunkeun palaksanaan hiji aksi saméméh dimimitian.
Versi masing-masing plugins jQuery Bootstrap tiasa diaksés via VERSION
hak milik konstruktor plugin. Contona, pikeun plugin tooltip:
Plugin Bootstrap henteu mundur sacara khusus nalika JavaScript ditumpurkeun. Upami anjeun paduli kana pangalaman pangguna dina hal ieu, paké <noscript>
pikeun ngajelaskeun kaayaan (sareng kumaha cara ngaktipkeun deui JavaScript) ka pangguna anjeun, sareng / atanapi tambahkeun fallbacks adat anjeun sorangan.
Bootstrap henteu sacara resmi ngadukung perpustakaan JavaScript pihak katilu sapertos Prototype atanapi jQuery UI. Sanaos .noConflict
acara sareng namespaced, meureun aya masalah kasaluyuan anu anjeun kedah ngalereskeun nyalira.
Pikeun épék transisi saderhana, lebetkeun transition.js
sakali sareng file JS anu sanés. Upami anjeun nganggo kompilasi (atanapi minified) bootstrap.js
, teu kedah kalebet ieu-éta parantos aya.
Transition.js mangrupikeun pembantu dasar pikeun transitionEnd
acara ogé émulator transisi CSS. Éta dianggo ku plugins anu sanés pikeun mariksa dukungan transisi CSS sareng nangkep transisi gantung.
Transisi tiasa ditumpurkeun sacara global nganggo snippet JavaScript di handap ieu, anu kedah sumping saatos transition.js
(atanapi bootstrap.js
, bootstrap.min.js
sakumaha kasusna) parantos dimuat:
Modals anu streamlined, tapi fléksibel, dialog prompts kalawan fungsionalitas diperlukeun minimum jeung standar pinter.
Pastikeun teu muka modal bari sejen masih katingali. Némbongkeun leuwih ti hiji modal dina hiji waktu merlukeun kode custom.
Salawasna cobian nempatkeun kode HTML modal dina posisi tingkat luhur dina dokumén anjeun pikeun ngahindarkeun komponén sanés anu mangaruhan penampilan sareng / atanapi fungsionalitas modal.
Aya sababaraha caveats ngeunaan ngagunakeun modals dina alat nu bagerak. Tingali dokumén pangrojong browser kami pikeun detil.
Kusabab kumaha HTML5 ngahartikeun semantik na, autofocus
atribut HTML teu boga pangaruh dina modals Bootstrap. Pikeun ngahontal éfék anu sami, paké sababaraha JavaScript khusus:
Modal anu disayogikeun sareng lulugu, awak, sareng set tindakan dina footer.
Toggle a modal via JavaScript ku ngaklik tombol di handap. Bakal ngageser ka handap sareng luntur ti luhur halaman.
Pastikeun pikeun nambahkeun role="dialog"
jeung aria-labelledby="..."
, ngarujuk kana judul modal, ka .modal
, jeung role="document"
ka .modal-dialog
sorangan.
Salaku tambahan, anjeun tiasa masihan pedaran ngeunaan dialog modal anjeun sareng aria-describedby
on .modal
.
Embedding video YouTube dina modals merlukeun JavaScript tambahan teu di Bootstrap pikeun otomatis ngeureunkeun playback sareng nu sanesna. Tingali tulisan Stack Overflow ieu pikeun inpormasi anu langkung lengkep.
Modals gaduh dua ukuran pilihan, sadia via kelas modifier pikeun ditempatkeun dina .modal-dialog
.
Pikeun modal anu ngan saukur némbongan tinimbang luntur pikeun ditingali, cabut .fade
kelas tina markup modal anjeun.
Pikeun ngamangpaatkeun sistem grid Bootstrap dina modal, ngan sarang .row
s dina .modal-body
teras nganggo kelas sistem grid normal.
Boga kebat tombol anu sadayana micu modal anu sami, ngan kalayan eusi anu rada béda? Paké event.relatedTarget
jeung atribut HTMLdata-*
(jigana via jQuery ) pikeun rupa-rupa eusi modal gumantung kana tombol nu diklik. Tingali dokumén Modal Events pikeun detil ngeunaan relatedTarget
,
Modél plugin toggles eusi disumputkeun Anjeun on demand, via atribut data atawa JavaScript. Ogé nambihan .modal-open
ka <body>
override kabiasaan ngagugulung standar sarta dibangkitkeun a .modal-backdrop
nyadiakeun wewengkon klik pikeun dismissing modals ditémbongkeun nalika ngaklik luar modal.
Aktipkeun modal tanpa nulis JavaScript. Disetél data-toggle="modal"
dina elemen controller, kawas tombol, babarengan jeung data-target="#foo"
atawa href="#foo"
pikeun nargétkeun modal husus pikeun toggle.
Nelepon modal sareng id myModal
sareng hiji baris JavaScript:
Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-
, sapertos dina data-backdrop=""
.
Ngaran | ngetik | standar | katerangan |
---|---|---|---|
latar | boolean atawa string'static' |
leres | Ngawengku unsur modal-backdrop. Alternatipna, tangtukeun static pikeun backdrop nu teu nutup modal dina klik. |
kibor | boolean | leres | Nutup modal nalika konci kabur dipencet |
nempokeun | boolean | leres | Némbongkeun modal nalika dimimitian. |
jauh | jalur | palsu | pilihan ieu deprecated saprak v3.3.0 sarta geus dihapus dina v4. Kami ngarékoméndasikeun tinimbang ngagunakeun templating sisi klien atawa kerangka data mengikat, atawa nelepon jQuery.load sorangan. Upami URL jauh disayogikeun, eusi bakal dimuat sakali nganggo metode jQuery |
.modal(options)
Aktipkeun eusi anjeun salaku modal. Narima hiji pilihan pilihan object
.
.modal('toggle')
Sacara manual toggles modal. Mulih ka panelepon saméméh modal sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.modal
atawa hidden.bs.modal
kajadian lumangsung).
.modal('show')
Sacara manual muka modal. Mulih ka panelepon saméméh modal sabenerna geus ditémbongkeun (ie saméméh shown.bs.modal
acara lumangsung).
.modal('hide')
Sacara manual nyumputkeun modal. Mulih ka panelepon saméméh modal geus sabenerna disumputkeun (ie saméméh hidden.bs.modal
acara lumangsung).
.modal('handleUpdate')
Nyaluyukeun deui posisi modal pikeun ngalawan scrollbar upami aya anu muncul, anu bakal ngajantenkeun modal luncat ka kénca.
Ngan diperlukeun nalika jangkungna modal robah bari dibuka.
Kelas modal Bootstrap ngungkabkeun sababaraha acara pikeun nyambungkeun kana fungsionalitas modal.
Sadaya acara modal dipecat dina modal sorangan (ie di <div class="modal">
).
Jenis Acara | Katerangan |
---|---|
show.bs.modal | Kajadian ieu langsung hurung nalika show metode conto disebut. Upami disababkeun ku klik, unsur anu diklik sayogi salaku relatedTarget hak milik acara. |
ditémbongkeun.bs.modal | Acara ieu dipecat nalika modal parantos katingali ku pangguna (bari ngadagoan transisi CSS réngsé). Upami disababkeun ku klik, unsur anu diklik sayogi salaku relatedTarget hak milik acara. |
hide.bs.modal | Kajadian ieu langsung dipecat nalika hide metode conto parantos disebut. |
hidden.bs.modal | Acara ieu dipecat nalika modal parantos disumputkeun tina pangguna (bari ngadagoan transisi CSS réngsé). |
loaded.bs.modal | Kajadian ieu dipecat nalika modal parantos ngamuat eusi nganggo remote pilihan. |
Tambihkeun ménu lungsur ka ampir naon waé kalayan plugin saderhana ieu, kalebet navbar, tab, sareng pil.
Ngaliwatan atribut data atanapi JavaScript, plugin dropdown toggles eusi disumputkeun (dropdown menu) ku toggling .open
kelas dina item daptar indungna.
Dina alat nu bagerak, muka dropdown a nambahkeun .dropdown-backdrop
salaku aréa ketok pikeun nutup menu dropdown nalika ngetok luar menu, sarat pikeun rojongan ios ditangtoskeun. Ieu ngandung harti yén pindah tina menu dropdown kabuka ka menu dropdown béda merlukeun ketok tambahan dina mobile.
Catetan: data-toggle="dropdown"
Atribut ieu diandelkeun pikeun nutup ménu lungsur dina tingkat aplikasi, janten langkung saé ngagunakeun éta.
Tambihkeun data-toggle="dropdown"
kana tautan atanapi tombol pikeun ngagentoskeun turunna.
Pikeun ngajaga URL gembleng sareng tombol link, paké data-target
atribut tinimbang href="#"
.
Nelepon dropdowns via JavaScript:
data-toggle="dropdown"
masih diperlukeunPaduli naha anjeun nelepon dropdown Anjeun liwat JavaScript atawa gantina ngagunakeun data-api, data-toggle="dropdown"
salawasna diperlukeun pikeun hadir dina elemen pemicu dropdown urang.
Euweuh
$().dropdown('toggle')
Toggles menu dropdown tina navbar tinangtu atawa navigasi tab.
Sadaya acara dropdown dipecat dina .dropdown-menu
's elemen indungna.
Sadaya acara dropdown gaduh relatedTarget
sipat, anu nilaina mangrupikeun unsur jangkar anu toggling.
Jenis Acara | Katerangan |
---|---|
show.bs.dropdown | Kajadian ieu langsung hurung nalika metode conto acara disebut. |
ditémbongkeun.bs.dropdown | Kajadian ieu dipecat nalika turunna parantos katingali ku pangguna (bari ngadagoan transisi CSS, réngsé). |
hide.bs.dropdown | Kajadian ieu langsung dipecat nalika metode conto sumputkeun parantos disebut. |
hidden.bs.dropdown | Acara ieu dipecat nalika dropdown tos rengse disumputkeun ti pamaké (bakal ngadagoan transisi CSS, pikeun ngalengkepan). |
ScrollSpy plugin pikeun otomatis ngamutahirkeun target nav dumasar kana posisi ngagugulung. Gulung wewengkon handap navbar jeung lalajo robah kelas aktip. Sub item dropdown bakal disorot ogé.
Ad leggings keytar, brunch id pésta seni dolor kuli. Pitchfork yr enim lo-fi saméméh maranéhna dijual kaluar qui. Tumblr ladang-ka-méja hak sapedah naon. Anim keffiyeh carles cardigan. stan poto Velit seitan mcsweeney 3 serigala bulan irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui Anjeun meureun geus teu ngadéngé éta et cardigan trust fund culpa biodiesel wes anderson estetika. Nihil tato accusamus, cred ironi biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa kumis skateboard, adipisicing fugiat velit pitchfork janggot. Freegan janggot aliqua cupidatat mcsweeney urang vero. Cupidatat opat loko nisi, ea helvetica nulla carles. treuk dahareun baju haneut cosby tato, mcsweeney urang quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non estetika exercitation quis gentrify. Brooklyn adipisicing karajinan bir wakil keytar deserunt.
Occaecat commodo aliqua delectus. Fap karajinan bir deserunt skateboard ea. Hak sapedah Lomo adipisicing banh mi, velit ea sunt tingkat salajengna locavore kopi asal tunggal di magna veniam. Kahirupan tinggi id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS nyaéta adipisicing. Consectetur nisi DIY mini kantong utusan. Cred ex di, sustainable delectus consectetur fanny pak 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 naon delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats Anjeun meureun geus teu ngadéngé éta consequat hoodie gluten bébas lo-fi fap aliquip. Labore elit placeat saméméh maranéhna dijual kaluar, terry richardson proident brunch nesciunt quis cosby baju haneut pariatur keffiyeh ut helvetica artisan. Cardigan karajinan bir seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Tumbu Navbar kudu boga target id resolvable. Contona, hiji <a href="#home">home</a>
kudu pakait jeung hal di DOM kawas <div id="home"></div>
.
:visible
target teu dipalireelemen target nu teu :visible
nurutkeun jQuery bakal dipaliré jeung item nav saluyu maranéhna bakal pernah disorot.
Perkara teu metoda palaksanaan, scrollspy merlukeun pamakéan position: relative;
dina unsur nu nuju spionase on. Dina kalolobaan kasus ieu teh <body>
. Nalika scrollspying on elemen lian ti éta <body>
, pastikeun gaduh height
set sarta overflow-y: scroll;
dilarapkeun.
Pikeun gampang nambahkeun kabiasaan scrollspy kana navigasi topbar Anjeun, tambahkeun data-spy="scroll"
ka elemen rék nénjo dina (paling ilaharna ieu bakal jadi <body>
). Teras tambahkeun data-target
atribut sareng ID atanapi kelas unsur indung tina .nav
komponén Bootstrap.
Saatos nambahkeun position: relative;
kana CSS anjeun, nelepon scrollspy via JavaScript:
.scrollspy('refresh')
Nalika nganggo scrollspy sareng nambihan atanapi ngahapus unsur tina DOM, anjeun kedah nyauran metode refresh sapertos kieu:
Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-
, sapertos dina data-offset=""
.
Ngaran | ngetik | standar | katerangan |
---|---|---|---|
ngimbangan | angka | 10 | Piksel pikeun ngimbangan ti luhur nalika ngitung posisi ngagugulung. |
Jenis Acara | Katerangan |
---|---|
activate.bs.scrollspy | Kajadian ieu hurung iraha waé item anyar diaktipkeun ku scrollspy. |
Tambihkeun fungsionalitas tab anu gancang sareng dinamis pikeun ngaliwat panel eusi lokal, bahkan ngalangkungan ménu turun. Tab Nested teu dirojong.
Denim atah anjeun panginten henteu acan kantos nguping aranjeunna kaos jeans Austin. Nesciunt tahu stumptown aliqua, retro synth master cleanse. Kumis klise tempor, williamsburg carles vegan helvetica. Reprehenderit tukang daging retro keffiyeh dreamcatcher synth. Baju haneut Cosby eu banh mi, qui irure Terry richardson ex cumi. Aliquip nempatkeun salvia cillum iphone. Seitan aliquip quis cardigan apparel Amérika, jagal 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.
Plugin ieu ngalegaan komponén navigasi tab pikeun nambihan daérah tabable.
Aktipkeun tab tabable via JavaScript (unggal tab kudu diaktipkeun individual):
Anjeun tiasa ngaktipkeun tab individu ku sababaraha cara:
Anjeun tiasa ngaktipkeun navigasi tab atanapi pil tanpa nyerat JavaScript ku ngan saukur nangtukeun data-toggle="tab"
atanapi data-toggle="pill"
dina unsur. Nambahkeun kelas nav
jeung nav-tabs
ka tab ul
bakal nerapkeun gaya tab Bootstrap , bari nambahkeun nav
jeung nav-pills
kelas bakal nerapkeun styling pil .
Pikeun nyieun tab luntur, tambahkeun .fade
ka unggal .tab-pane
. Panel tab munggaran ogé kedah .in
ngajantenkeun eusi awal katingali.
$().tab
Aktipkeun unsur tab sareng wadah eusi. Tab kedah gaduh data-target
atanapi href
nargétkeun titik wadah dina DOM. Dina conto di luhur, tab nyaéta <a>
s sareng data-toggle="tab"
atribut.
.tab('show')
Milih tab nu dibikeun tur nembongkeun eusi pakait na. Tab séjén nu saméméhna dipilih jadi teu dipilih jeung eusi pakait disumputkeun. Mulih ka panelepon saméméh panel tab sabenerna geus ditémbongkeun (ie saméméh shown.bs.tab
acara lumangsung).
Nalika ningalikeun tab anyar, kajadian-kajadian hurung dina urutan ieu:
hide.bs.tab
(dina tab aktip ayeuna)show.bs.tab
(dina tab anu bakal dipidangkeun)hidden.bs.tab
(dina tab aktip saméméhna, sarua jeung pikeun hide.bs.tab
acara)shown.bs.tab
(dina tab anu nembé ditingalikeun, sami sareng show.bs.tab
acara)Upami teu aya tab anu parantos aktip, maka acara hide.bs.tab
sareng hidden.bs.tab
moal dipecat.
Jenis Acara | Katerangan |
---|---|
show.bs.tab | Kajadian ieu hurung dina acara tab, tapi sateuacan tab anyar ditingalikeun. Anggo event.target sareng event.relatedTarget nargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi). |
ditémbongkeun.bs.tab | Kajadian ieu hurung dina acara tab saatos tab dipintonkeun. Anggo event.target sareng event.relatedTarget nargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi). |
hide.bs.tab | Kajadian ieu hurung nalika tab anyar bakal ditingalikeun (sahingga tab aktip saméméhna bakal disumputkeun). Anggo event.target sareng event.relatedTarget nargétkeun tab aktip anu ayeuna sareng tab anu énggal-énggal aktip, masing-masing. |
disumputkeun.bs.tab | Kajadian ieu hurung saatos tab énggal ditampilkeun (sahingga tab aktip sateuacana disumputkeun). Anggo event.target sareng event.relatedTarget nargétkeun tab aktip sateuacana sareng tab aktip énggal, masing-masing. |
Diideuan ku jQuery.tipsy plugin unggulan ditulis ku Jason pigura; Tooltips mangrupikeun vérsi anu diropéa, anu henteu ngandelkeun gambar, nganggo CSS3 pikeun animasi, sareng atribut data pikeun neundeun judul lokal.
Tooltips kalawan judul nol-panjangna pernah ditémbongkeun.
Hover dina tumbu di handap pikeun ningali tooltips:
Calana ketat tingkat salajengna keffiyeh Anjeun meureun geus teu ngadéngé éta. Booth poto janggot denim atah letterpress vegan utusan kantong stumptown. Ladang-ka-méja seitan, fixie sustainable quinoa 8-bit Amérika apparel 8-bit mcsweeney urang boga terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tahu biodiesel williamsburg marfa, opat loko mcsweeney urang cleanse vegan chambray. A artisan bener ironis keytar naon , scenester tegalan-to-méja banksy Austin twitter nanganan freegan cred denim atah single-asal kopi viral.
Opat pilihan sadia: luhur, katuhu, handap, jeung kénca Blok.
Pikeun alesan kinerja, Tooltip na Popover data-apis téh opt-in, hartina anjeun kudu initialize aranjeunna sorangan .
Salah sahiji cara pikeun ngamimitian sadaya tooltip dina halaman nyaéta milih ku data-toggle
atributna:
Plugin tooltip ngahasilkeun eusi sareng markup dumasar kana paménta, sareng sacara standar nempatkeun tooltip saatos unsur pemicuna.
Micu tooltip via JavaScript:
Markup anu diperyogikeun pikeun tooltip ngan ukur data
atribut sareng title
dina unsur HTML anjeun hoyong gaduh tooltip. Markup anu dihasilkeun tina tooltip rada saderhana, sanaos peryogi posisi (sacara standar, disetel top
ku plugin).
Kadang anjeun hoyong nambihan tooltip kana hyperlink anu ngabungkus sababaraha garis. Paripolah standar tina plugin tooltip nyaéta pikeun ngapusatkeunana sacara horisontal sareng vertikal. Tambahkeun white-space: nowrap;
ka jangkar anjeun pikeun nyegah ieu.
Lamun ngagunakeun tooltips dina elemen dina hiji .btn-group
atawa hiji .input-group
, atawa dina elemen nu patali tabel ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), anjeun bakal kudu nangtukeun pilihan container: 'body'
(documented handap) pikeun nyegah efek samping nu teu dihoyongkeun (kayaning unsur tumuwuh lega tur/ atawa kaleungitan juru buleud nalika tooltip dipicu).
Pikeun pamaké nganapigasi maké kibor, sarta hususna pamaké téknologi assistive, Anjeun ngan kudu nambahkeun tooltips ka elemen fokus-kibor kayaning Tumbu, kontrol formulir, atawa unsur sawenang nu mibanda tabindex="0"
atribut.
Nambahkeun tooltip ka hiji disabled
atawa .disabled
unsur, nempatkeun unsur di jero a <div>
jeung nerapkeun tooltip ka eta <div>
gantina.
Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-
, sapertos dina data-animation=""
.
Ngaran | Tipe | Default | Katerangan |
---|---|---|---|
animasi | boolean | leres | Larapkeun transisi fade CSS kana tooltip |
wadahna | string | palsu | palsu | Appends tooltip ka elemen husus. Contona: |
reureuh | angka | objék | 0 | Reureuh némbongkeun sarta nyumputkeun tooltip (ms) - teu dilarapkeun ka tipe pemicu manual Lamun jumlah disadiakeun, reureuh diterapkeun ka duanana nyumputkeun / acara Struktur objék nyaéta: |
html | boolean | palsu | Selapkeun HTML kana tooltip nu. Upami palsu, text metode jQuery bakal dianggo pikeun nyelapkeun eusi kana DOM. Anggo téks upami anjeun hariwang ngeunaan serangan XSS. |
panempatan | string | fungsi | 'luhureun' | Kumaha posisi tooltip - top | handap | ditinggalkeun | katuhu | otomatis. Nalika hiji fungsi dipaké pikeun nangtukeun panempatan, mangka disebut titik tooltip DOM salaku argumen kahiji sarta triggering unsur titik DOM salaku kadua. Kontéks |
pamilih | senar | palsu | Upami pamilih disayogikeun, obyék tooltip bakal didelegasikeun ka target anu ditangtukeun. Dina prakna, ieu dipaké pikeun ngaktipkeun eusi HTML dinamis boga tooltips ditambahkeun. Tingali ieu sareng conto informatif . |
citakan | senar | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Dasar HTML pikeun dianggo nalika nyiptakeun tooltip. The tooltip urang
Unsur wrapper pangluarna kudu boga |
judul | string | fungsi | '' | Nilai judul standar upami Upami fungsina dipasihkeun, éta bakal disebat ku |
pemicu | senar | 'fokus fokus' | Kumaha tooltip dipicu - klik | ngalayang | fokus | manual. Anjeun tiasa ngalangkungan sababaraha pemicu; misahkeun aranjeunna kalayan spasi. manual teu bisa digabungkeun jeung sagala pemicu séjén. |
viewport | string | objék | fungsi | { pamilih: 'awak', padding: 0 } | Ngajaga tooltip dina wates unsur ieu. Contona: Upami fungsina dipasihkeun, éta disebut ku titik DOM unsur pemicu salaku hiji-hijina argumen. Kontéks |
Pilihan pikeun tooltips individu Alternatipna bisa dieusian ngaliwatan pamakéan atribut data, sakumaha dipedar di luhur.
$().tooltip(options)
Ngagantelkeun panangan tooltip ka kumpulan unsur.
.tooltip('show')
Nembongkeun tooltip hiji unsur. Mulih ka nu nelepon saméméh tooltip sabenerna geus ditémbongkeun (ie saméméh shown.bs.tooltip
acara lumangsung). Ieu dianggap "manual" pemicu tooltip. Tooltips kalawan judul nol-panjangna pernah ditémbongkeun.
.tooltip('hide')
Nyumputkeun tooltip unsur. Mulih ka panelepon saméméh tooltip sabenerna disumputkeun (ie saméméh hidden.bs.tooltip
acara lumangsung). Ieu dianggap "manual" pemicu tooltip.
.tooltip('toggle')
Toggles tooltip hiji unsur. Mulih ka nu nelepon saméméh tooltip sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.tooltip
atawa hidden.bs.tooltip
kajadian lumangsung). Ieu dianggap "manual" pemicu tooltip.
.tooltip('destroy')
Nyumputkeun sareng ngancurkeun tooltip unsur. Tooltips nu make delegasi (anu dijieun maké pilihanselector
) teu bisa individual ancur dina elemen pemicu turunan.
Jenis Acara | Katerangan |
---|---|
show.bs.tooltip | Kajadian ieu langsung hurung nalika show metode conto disebut. |
ditémbongkeun.bs.tooltip | Kajadian ieu dipecat nalika tooltip parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé). |
hide.bs.tooltip | Kajadian ieu langsung dipecat nalika hide metode conto parantos disebut. |
hidden.bs.tooltip | Kajadian ieu dipecat nalika tooltip parantos disumputkeun tina pangguna (bari ngantosan transisi CSS réngsé). |
inserted.bs.tooltip | Kajadian ieu dipecat sanggeus show.bs.tooltip kajadian nalika template tooltip geus ditambahkeun kana DOM. |
Nambahkeun overlays leutik eusi, kawas nu aya dina iPad, kana elemen naon wae pikeun perumahan informasi sekundér.
Popovers anu judul sareng eusina nol-panjangna henteu pernah ditampilkeun.
Popovers ngabutuhkeun plugin tooltip pikeun dilebetkeun kana versi Bootstrap anjeun.
Pikeun alesan kinerja, Tooltip na Popover data-apis téh opt-in, hartina anjeun kudu initialize aranjeunna sorangan .
Salah sahiji cara pikeun ngamimitian sadayana popovers dina halaman nyaéta milih aranjeunna dumasar kana data-toggle
atributna:
Lamun make popovers on elemen dina hiji .btn-group
atawa hiji .input-group
, atawa dina elemen nu patali tabel ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), Anjeun bakal kudu nangtukeun pilihan container: 'body'
(documented handap) pikeun nyegah efek samping nu teu dihoyongkeun (saperti unsur tumuwuh lega tur / atanapi kaleungitan juru buleud nalika popover dipicu).
Nambahkeun popover ka hiji disabled
atawa .disabled
unsur, nempatkeun unsur di jero a <div>
jeung nerapkeun popover ka eta <div>
gantina.
Kadang anjeun hoyong nambihan popover kana hyperlink anu ngabungkus sababaraha garis. Paripolah standar tina plugin popover nyaéta pikeun dipuseurkeun sacara horisontal sareng vertikal. Tambahkeun white-space: nowrap;
ka jangkar anjeun pikeun nyegah ieu.
Opat pilihan sadia: luhur, katuhu, handap, jeung kénca Blok.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Anggo focus
pemicu pikeun ngaleungitkeun popovers dina klik salajengna anu dilakukeun ku pangguna.
Pikeun paripolah cross-browser sareng cross-platform anu leres, anjeun kedah nganggo <a>
tag, sanés tag <button>
, sareng anjeun ogé kedah ngalebetkeun atribut role="button"
sareng .tabindex
Aktipkeun popovers via JavaScript:
Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-
, sapertos dina data-animation=""
.
Ngaran | Tipe | Default | Katerangan |
---|---|---|---|
animasi | boolean | leres | Larapkeun transisi fade CSS kana popover |
wadahna | string | palsu | palsu | Appends popover ka elemen husus. Contona: |
eusi | string | fungsi | '' | Nilai eusi standar lamun Upami fungsina dipasihkeun, éta bakal disebat ku |
reureuh | angka | objék | 0 | Reureuh némbongkeun sarta nyumputkeun popover (ms) - teu dilarapkeun ka tipe pemicu manual Lamun jumlah disadiakeun, reureuh diterapkeun ka duanana nyumputkeun / acara Struktur objék nyaéta: |
html | boolean | palsu | Selapkeun HTML kana popover nu. Upami palsu, text metode jQuery bakal dianggo pikeun nyelapkeun eusi kana DOM. Anggo téks upami anjeun hariwang ngeunaan serangan XSS. |
panempatan | string | fungsi | 'leres' | Kumaha posisi popover - top | handap | ditinggalkeun | katuhu | otomatis. Nalika fungsi dipaké pikeun nangtukeun panempatan, mangka disebut titik popover DOM salaku argumen kahijina sarta triggering unsur titik DOM salaku kadua. Kontéks |
pamilih | senar | palsu | Upami pamilih disayogikeun, obyék popover bakal didelegasikeun ka target anu ditangtukeun. Dina prakték, ieu dipaké pikeun ngaktipkeun eusi HTML dinamis boga popovers ditambahkeun. Tingali ieu sareng conto informatif . |
citakan | senar | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Dasar HTML pikeun dianggo nalika nyiptakeun popover. The popover urang The popover urang
Unsur wrapper pangluarna kudu boga |
judul | string | fungsi | '' | Nilai judul standar upami Upami fungsina dipasihkeun, éta bakal disebat ku |
pemicu | senar | 'klik' | Kumaha popover dipicu - klik | ngalayang | fokus | manual. Anjeun tiasa ngalangkungan sababaraha pemicu; misahkeun aranjeunna kalayan spasi. manual teu bisa digabungkeun jeung sagala pemicu séjén. |
viewport | string | objék | fungsi | { pamilih: 'awak', padding: 0 } | Ngajaga popover dina wates unsur ieu. Contona: Upami fungsina dipasihkeun, éta disebut ku titik DOM unsur pemicu salaku hiji-hijina argumen. Kontéks |
Pilihan pikeun popovers individu bisa Alternatipna dieusian ngaliwatan pamakéan atribut data, sakumaha dipedar di luhur.
$().popover(options)
Initializes popovers pikeun kumpulan unsur.
.popover('show')
Nembongkeun popover unsur. Mulih ka nu nelepon saméméh popover nu sabenerna geus ditémbongkeun (ie saméméh shown.bs.popover
acara lumangsung). Ieu dianggap "manual" triggering of popover nu. Popovers anu judul sareng eusina nol-panjangna henteu pernah ditampilkeun.
.popover('hide')
Nyumputkeun popover unsur. Mulih ka panelepon saméméh popover sabenerna geus disumputkeun (ie saméméh hidden.bs.popover
acara lumangsung). Ieu dianggap "manual" triggering of popover nu.
.popover('toggle')
Toggles popover unsur urang. Mulih ka nu nelepon saméméh popover sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.popover
atawa hidden.bs.popover
kajadian lumangsung). Ieu dianggap "manual" triggering of popover nu.
.popover('destroy')
Nyumputkeun sareng ngancurkeun popover unsur. Popovers nu make delegasi (anu dijieun maké pilihanselector
) teu bisa individual ancur dina elemen pemicu turunan.
Jenis Acara | Katerangan |
---|---|
show.bs.popover | Kajadian ieu langsung hurung nalika show metode conto disebut. |
ditémbongkeun.bs.popover | Kajadian ieu dipecat nalika popover parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé). |
hide.bs.popover | Kajadian ieu langsung dipecat nalika hide metode conto parantos disebut. |
disumputkeun.bs.popover | Acara ieu dipecat nalika popover parantos disumputkeun tina pangguna (bari ngantosan transisi CSS réngsé). |
diselapkeun.bs.popover | Kajadian ieu dipecat sanggeus show.bs.popover kajadian nalika template popover geus ditambahkeun kana DOM. |
Tambihkeun pungsionalitasna pikeun sadaya pesen waspada nganggo plugin ieu.
Nalika nganggo .close
tombol, éta kedah janten anak anu munggaran .alert-dismissible
sareng henteu aya eusi téks anu aya sateuacanna dina markup.
Robah ieu sareng éta sareng cobian deui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Ngan tambahkeun data-dismiss="alert"
kana tombol nutup anjeun pikeun otomatis masihan hiji fungsi nutup ngageter. Nutup ngageter ngaluarkeun tina DOM.
Pikeun ngageter anjeun nganggo animasi nalika nutup, pastikeun aranjeunna gaduh .fade
sareng.in
kelas anu parantos dilarapkeun ka aranjeunna.
$().alert()
Ngadamel waspada ngadangukeun acara klik dina unsur turunan anu ngagaduhan data-dismiss="alert"
atribut. (Teu diperlukeun nalika ngagunakeun data-api sacara otomatis-inisialisasi.)
$().alert('close')
Nutup ngageter ku cara ngahapus tina DOM. Upami kelas .fade
sareng .in
aya dina unsur, waspada bakal luntur sateuacan dicabut.
Plugin ngageter Bootstrap ngungkabkeun sababaraha acara pikeun ngahubungkeun kana fungsionalitas waspada.
Jenis Acara | Katerangan |
---|---|
close.bs.waspada | Kajadian ieu langsung hurung nalika close metode conto disebut. |
closed.bs.waspada | Acara ieu dipecat nalika ngageter parantos ditutup (bari ngantosan transisi CSS réngsé). |
Ngalakukeun leuwih ku tombol. Tombol kontrol nyatakeun atanapi jieun grup tombol pikeun langkung seueur komponén sapertos tulbar.
Firefox tetep kaayaan kontrol formulir (cacad tur checkedness) sakuliah beban kaca . Solusi pikeun ieu nyaéta ngagunakeun autocomplete="off"
. Tempo bug Mozilla #654072 .
Tambahkeun data-loading-text="Loading..."
ka make kaayaan loading on tombol a.
fitur ieu deprecated saprak v3.3.5 sarta geus dihapus dina v4.
Demi démo ieu, kami nganggo data-loading-text
na $().button('loading')
, tapi éta teu hijina kaayaan anjeun bisa make. Tingali langkung seueur ngeunaan ieu di handap dina $().button(string)
dokuméntasi .
Tambahkeun data-toggle="button"
pikeun ngaktipkeun toggling dina hiji tombol.
.active
naaria-pressed="true"
Pikeun tombol tos toggled, Anjeun kudu nambahkeun .active
kelas jeung aria-pressed="true"
atribut ka button
diri.
Tambahkeun data-toggle="buttons"
ka .btn-group
kotak centang atanapi input radio anu ngandung pikeun ngaktipkeun toggling dina gaya masing-masing.
.active
Pikeun pilihan anu tos dipilih, anjeun kedah nambihan .active
kelas kana input label
anjeun nyalira.
Lamun kaayaan dipariksa tina hiji tombol kotak centang diropéa tanpa némbak hiji click
kajadian dina tombol (misalna via <input type="reset">
atawa via setelan checked
milik input), anjeun bakal kudu toggle .active
kelas on input urang label
sorangan.
$().button('toggle')
Toggles kaayaan push. Méré tombol tampilan yén éta geus diaktipkeun.
$().button('reset')
Reset kaayaan tombol - swaps téks kana téks aslina. Metoda ieu asynchronous sarta balik saméméh reset sabenerna geus réngsé.
$().button(string)
Swap téks kana sagala data ditetepkeun kaayaan téks.
Plugin fléksibel anu ngagunakeun sakeupeul kelas pikeun paripolah toggle anu gampang.
Collapse merlukeun plugin transisi diasupkeun kana versi Bootstrap anjeun.
Pencét tombol di handap pikeun nunjukkeun sareng nyumputkeun unsur sanés ku parobihan kelas:
.collapse
nyumputkeun eusi.collapsing
diterapkeun dina mangsa transisi.collapse.in
nembongkeun eusiAnjeun tiasa nganggo tautan sareng href
atribut, atanapi tombol sareng data-target
atribut. Dina duanana kasus, éta data-toggle="collapse"
diperlukeun.
Manjangkeun paripolah runtuhna standar pikeun nyiptakeun akordion sareng komponén panel.
Ieu oge mungkin mun swap kaluar .panel-body
s kalawan .list-group
s.
Pastikeun pikeun nambahkeun aria-expanded
kana elemen kontrol. Atribut ieu sacara eksplisit ngahartikeun kaayaan ayeuna tina unsur anu tiasa digulung pikeun layar pamiarsa sareng téknologi pitulung anu sami. Lamun unsur collapsible ditutup sacara standar, éta kudu boga nilai aria-expanded="false"
. Upami anjeun parantos nyetél unsur anu tiasa digulung janten kabuka sacara standar nganggo in
kelas, setel aria-expanded="true"
dina kontrol. Plugin bakal otomatis toggle atribut ieu dumasar kana naha atanapi henteu unsur collapsible geus dibuka atawa ditutup.
Salaku tambahan, upami unsur kontrol anjeun nargétkeun hiji unsur anu tiasa dilipat - nyaéta data-target
atributna nujul ka id
pamilih - anjeun tiasa nambihan atribut tambahan aria-controls
kana unsur kontrol, anu ngandung id
unsur anu tiasa dilipat. Pamiarsa layar modéren sareng téknologi pitulung anu sami ngagunakeun atribut ieu pikeun nyayogikeun potong kompas tambahan pikeun pangguna pikeun langsung napigasi ka unsur anu tiasa dilipat.
Plugin runtuh ngagunakeun sababaraha kelas pikeun nanganan angkat beurat:
.collapse
nyumputkeun eusi.collapse.in
nembongkeun eusi.collapsing
ditambahkeun nalika transisi dimimitian, sarta dihapus nalika rengsekelas ieu bisa kapanggih dina component-animations.less
.
Ngan tambahkeun data-toggle="collapse"
na a data-target
kana unsur pikeun otomatis napelkeun kadali unsur collapsible. Atribut data-target
nampi pamilih CSS pikeun nerapkeun runtuhna. Pastikeun pikeun nambahkeun kelas collapse
ka elemen collapsible. Upami anjeun hoyong kabuka sacara standar, tambahkeun kelas tambahan in
.
Pikeun nambahkeun manajemén grup kawas akordion ka kontrol collapsible, tambahkeun atribut data data-parent="#selector"
. Tingali kana demo pikeun ningali ieu aksi.
Aktipkeun sacara manual nganggo:
Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-
, sapertos dina data-parent=""
.
Ngaran | ngetik | standar | katerangan |
---|---|---|---|
kolot | pamilih | palsu | Upami pamilih disayogikeun, maka sadaya elemen anu tiasa dilipat dina indungna anu ditangtukeun bakal ditutup nalika item anu tiasa dilipat ieu ditampilkeun. (sarupa jeung kabiasaan akordion tradisional - ieu gumantung kana panel kelas) |
togél | boolean | leres | Toggles unsur collapsible on invocation |
.collapse(options)
Aktipkeun eusi anjeun salaku unsur collapsible. Narima hiji pilihan pilihan object
.
.collapse('toggle')
Toggles unsur collapsible mun ditémbongkeun atawa disumputkeun. Mulih ka nu nelepon saméméh unsur collapsible sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.collapse
atawa hidden.bs.collapse
kajadian lumangsung).
.collapse('show')
Némbongkeun unsur collapsible. Mulih ka panelepon saméméh unsur collapsible sabenerna geus ditémbongkeun (ie saméméh shown.bs.collapse
acara lumangsung).
.collapse('hide')
Nyumputkeun unsur anu tiasa dilipat. Mulih ka panelepon saméméh unsur collapsible sabenerna disumputkeun (ie saméméh hidden.bs.collapse
acara lumangsung).
Kelas runtuh Bootstrap ngungkabkeun sababaraha acara pikeun ngaitkeun kana fungsionalitas runtuh.
Jenis Acara | Katerangan |
---|---|
show.bs.collapse | Kajadian ieu langsung hurung nalika show metode conto disebut. |
ditémbongkeun.bs.collapse | Kajadian ieu dipecat nalika unsur runtuh parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé). |
hide.bs.collapse | Kajadian ieu dipecat langsung nalika hide padika geus disebut. |
disumputkeun.bs.collapse | Acara ieu dipecat nalika unsur runtuhna disumputkeun ti pangguna (bari ngadagoan transisi CSS réngsé). |
Komponén pintonan slaid pikeun ngurilingan elemen, sapertos carousel. Carousel Nested teu dirojong.
Komponén carousel umumna henteu saluyu sareng standar aksésibilitas. Upami anjeun kedah patuh, mangga pertimbangkeun pilihan sanés pikeun nampilkeun kontén anjeun.
Bootstrap sacara éksklusif ngagunakeun CSS3 pikeun animasi na, tapi Internet Explorer 8 & 9 teu ngarojong sipat CSS diperlukeun. Ku kituna, teu aya animasi transisi slide nalika ngagunakeun browser ieu. Kami geus ngahaja mutuskeun teu kaasup fallbacks basis jQuery keur transisi.
Kelas .active
perlu ditambahkeun kana salah sahiji slides. Upami teu kitu, carousel moal katingali.
The .glyphicon .glyphicon-chevron-left
jeung .glyphicon .glyphicon-chevron-right
kelas teu merta diperlukeun pikeun kadali. Bootstrap nyayogikeun .icon-prev
sareng .icon-next
salaku alternatif unicode polos.
Tambihkeun caption kana slide anjeun kalayan gampang kalayan .carousel-caption
unsur anu aya dina .item
. Tempatkeun naon waé HTML pilihan di dinya sareng éta bakal otomatis dijajarkeun sareng diformat.
Carousels merlukeun pamakéan hiji id
on wadahna pangluarna (éta .carousel
) pikeun kadali carousel fungsina leres. Nalika nambihan sababaraha carousel, atanapi nalika ngarobih carousel id
, pastikeun pikeun ngapdet kadali anu relevan.
Paké atribut data pikeun gampang ngadalikeun posisi carousel nu. data-slide
narima kecap konci prev
atawa next
, nu ngarobah posisi slide relatif ka posisi ayeuna. Alternatipna, pake data-slide-to
pikeun ngirimkeun indéks slide atah ka carousel data-slide-to="2"
, anu mindahkeun posisi slide ka indéks tinangtu dimimitian ku 0
.
Atribut data-ride="carousel"
dipaké pikeun nandaan carousel salaku animasi dimimitian dina beban kaca. Ieu teu bisa dipaké dina kombinasi kalayan (kaleuleuwihan jeung teu perlu) initialization JavaScript eksplisit tina carousel sarua.
Telepon carousel sacara manual nganggo:
Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-
, sapertos dina data-interval=""
.
Ngaran | ngetik | standar | katerangan |
---|---|---|---|
interval | angka | 5000 | Jumlah waktu reureuh antara otomatis Ngabuburit hiji item. Lamun palsu, carousel moal otomatis siklus. |
reureuh sakeudeung | string | null | "ngalayang" | Lamun disetel ka "hover" , ngareureuhkeun muter tina carousel on mouseenter sarta neruskeun muter tina carousel on mouseleave . Upami disetel ka null , hovering dina carousel moal ngareureuhkeun eta. |
bungkus | boolean | leres | Naha carousel kedah ngurilingan kontinyu atanapi kedah eureun. |
kibor | boolean | leres | Naha carousel kedah ngaréspon kana acara keyboard. |
.carousel(options)
Initializes carousel kalawan pilihan pilihan object
tur mimitian Ngabuburit ngaliwatan item.
.carousel('cycle')
Siklus ngaliwatan item carousel ti kénca ka katuhu.
.carousel('pause')
Ngeureunkeun carousel tina ngurilingan barang.
.carousel(number)
Siklus carousel ka pigura nu tangtu (0 dumasar, sarupa hiji Asép Sunandar Sunarya).
.carousel('prev')
Siklus ka item saméméhna.
.carousel('next')
Siklus ka item salajengna.
Kelas carousel Bootstrap ngungkabkeun dua acara pikeun ngaitkeun kana fungsionalitas carousel.
Kadua acara gaduh sipat tambahan di handap ieu:
direction
: Arah nu carousel nu ngageser (boh "left"
atawa "right"
).relatedTarget
: Unsur DOM nu keur slid kana tempat salaku item aktip.Sadaya acara carousel dipecat dina carousel sorangan (ie di <div class="carousel">
).
Jenis Acara | Katerangan |
---|---|
slide.bs.carousel | Kajadian ieu langsung hurung sawaktos slide metodeu invoked. |
slid.bs.carousel | Acara ieu dipecat nalika carousel parantos réngsé transisi slide na. |
Plugin afiks position: fixed;
hurung sareng mareuman, niru éfék anu kapanggih sareng position: sticky;
. Subnavigasi di beulah katuhu mangrupikeun demo langsung tina plugin afiks.
Anggo plugin afiks via atribut data atanapi sacara manual nganggo JavaScript anjeun nyalira. Dina duanana kaayaan, Anjeun kudu nyadiakeun CSS pikeun positioning jeung lebar eusi affixed Anjeun.
Catetan: Entong nganggo plugin afiks dina unsur anu aya dina unsur anu rada diposisikan, sapertos kolom anu ditarik atanapi didorong, kusabab kutu rendering Safari .
Plugin afiks toggles antara tilu kelas, masing-masing ngagambarkeun kaayaan nu tangtu: .affix
, .affix-top
, jeung .affix-bottom
. Anjeun kudu nyadiakeun gaya, iwalposition: fixed;
on .affix
, pikeun kelas ieu sorangan (bebas tina plugin ieu) pikeun nanganan posisi sabenerna.
Ieu kumaha plugin affix jalanna:
.affix-top
pikeun nunjukkeun yén unsur aya dina posisi anu paling luhur. Dina titik ieu euweuh positioning CSS diperlukeun..affix
ngagantikeun .affix-top
sarta susunanposition: fixed;
(disadiakeun ku Bootstrap urang CSS)..affix
ku .affix-bottom
. Kusabab offsets mangrupakeun pilihan, netepkeun hiji merlukeun anjeun nyetel CSS luyu. Dina hal ieu, tambahkeun position: absolute;
lamun perlu. Plugin ngagunakeun atribut data atanapi pilihan JavaScript pikeun nangtukeun dimana nempatkeun unsur ti dinya.Turutan léngkah-léngkah di luhur pikeun nyetél CSS anjeun pikeun salah sahiji pilihan pamakean di handap ieu.
Pikeun gampang nambihan paripolah afiks kana unsur naon waé, tambahkeun data-spy="affix"
kana unsur anu anjeun hoyong nénjo. Paké offsets pikeun nangtukeun iraha bade togél pinning unsur.
Nelepon plugin afiks via JavaScript:
Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-
, sapertos dina data-offset-top="200"
.
Ngaran | ngetik | standar | katerangan |
---|---|---|---|
ngimbangan | angka | fungsi | objék | 10 | Piksel pikeun ngimbangan tina layar nalika ngitung posisi ngagugulung. Upami nomer tunggal disayogikeun, offset bakal diterapkeun dina arah luhur sareng handap. Pikeun nyadiakeun unik, handap tur luhur offset ngan nyadiakeun hiji obyék offset: { top: 10 } atawa offset: { top: 10, bottom: 5 } . Anggo fungsi nalika anjeun kedah ngitung sacara dinamis offset. |
udagan | pamilih | titik | unsur jQuery | window objék _ |
Nangtukeun unsur target tina afiks. |
.affix(options)
Aktipkeun eusi anjeun salaku eusi anu ditempelkeun. Narima hiji pilihan pilihan object
.
.affix('checkPosition')
Ngitung deui kaayaan afiks dumasar kana dimensi, posisi, sareng posisi gulir unsur-unsur anu aya hubunganana. The .affix
, .affix-top
, sarta .affix-bottom
kelas ditambahkeun kana atawa dipiceun tina eusi affixed nurutkeun kaayaan anyar. Metoda ieu perlu disebut iraha wae dimensi eusi affixed atawa unsur target dirobah, pikeun mastikeun positioning bener tina eusi affixed.
Plugin afiks Bootstrap ngungkabkeun sababaraha acara pikeun nyambungkeun kana fungsionalitas afiks.
Jenis Acara | Katerangan |
---|---|
afiks.bs.afiks | Kajadian ieu langsung hurung sateuacan unsur dipasang. |
afiks.bs.afiks | Kajadian ieu dipecat saatos unsur ditempelkeun. |
afiks-top.bs.afiks | Kajadian ieu langsung hurung sateuacan unsur dipasang-luhur. |
affixed-top.bs.afiks | Kajadian ieu dipecat sanggeus unsur geus affixed-luhur. |
afiks-bottom.bs.afiks | Kajadian ieu langsung hurung sateuacan unsur ditempelkeun-handap. |
affixed-bottom.bs.afiks | Kajadian ieu dipecat saatos unsur ditempelkeun-handap. |