JavaScript
Ampiaina ny singa Bootstrap miaraka amin'ny plugins jQuery mahazatra am-polony mahery. Ampidiro mora foana izy rehetra, na tsirairay.
Ampiaina ny singa Bootstrap miaraka amin'ny plugins jQuery mahazatra am-polony mahery. Ampidiro mora foana izy rehetra, na tsirairay.
Ny plugins dia azo ampidirina tsirairay (mampiasa ny *.js
rakitra manokana an'ny Bootstrap), na indray mandeha (mampiasa bootstrap.js
na ny minified bootstrap.min.js
).
Samy bootstrap.js
ary bootstrap.min.js
misy plugins rehetra ao anaty rakitra tokana. Ampidiro iray ihany.
Ny plugins sasany sy ny singa CSS dia miankina amin'ny plugins hafa. Raha ampidirinao tsirairay ny plugins, ataovy azo antoka ny manamarina ireo fiankinan-doha ireo ao amin'ny doka. Mariho ihany koa fa miankina amin'ny jQuery ny plugins rehetra (midika izany fa tsy maintsy ampidirina alohan'ny rakitra plugin ny jQuery). Jereo ny anaybower.json
mba hahitana hoe iza amin'ireo dikan-jQuery no tohana.
Azonao atao ny mampiasa ny plugins Bootstrap rehetra amin'ny alàlan'ny API markup nefa tsy manoratra andalana iray amin'ny JavaScript. Ity no API kilasy voalohany an'ny Bootstrap ary tokony hoheverinao voalohany rehefa mampiasa plugin.
Izany hoe, amin'ny toe-javatra sasany dia mety ilaina ny hamono ity fampiasa ity. Noho izany, izahay koa dia manome ny fahafahana manafoana ny data attribute API amin'ny alalan'ny fanafoanana ny hetsika rehetra ao amin'ny antontan-taratasy namespaced amin'ny data-api
. Toa izao ity:
Raha tsy izany, raha mikendry plugin manokana, ampidiro fotsiny ny anaran'ilay plugin ho toy ny namespace miaraka amin'ny namespace data-api toy izao:
Aza mampiasa toetra angona avy amin'ny plugins maromaro amin'ny singa iray ihany. Ohatra, ny bokotra iray dia tsy afaka manana tondro-fitaovana sy mamadika modal. Mba hanaovana izany, dia ampiasao singa famonosana.
Mino koa izahay fa tokony ho afaka mampiasa ny plugins Bootstrap rehetra ianao amin'ny alàlan'ny JavaScript API. Ny API ho an'ny daholobe rehetra dia fomba tokana, azo fehezina ary mamerina ny fanangonana natao.
Ny fomba rehetra dia tokony hanaiky zavatra safidy azo atao, tady izay mikendry fomba manokana, na tsy misy (izay manomboka plugin miaraka amin'ny fitondran-tena mahazatra):
Ny plugin tsirairay ihany koa dia mampiseho ny mpanamboatra manta ao amin'ny Constructor
fananana iray: $.fn.popover.Constructor
. Raha te hahazo ohatra plugin manokana ianao dia alaivo mivantana avy amin'ny singa iray: $('[rel="popover"]').data('popover')
.
Azonao atao ny manova ny kinova default ho an'ny plugin iray amin'ny fanovana ny Constructor.DEFAULTS
tanjon'ny plugin:
Indraindray dia ilaina ny mampiasa plugins Bootstrap miaraka amin'ny rafitra UI hafa. Amin'ireo toe-javatra ireo, mety hitranga indraindray ny fifandonan'ny toeran'ny anarana. Raha mitranga izany dia azonao atao ny miantso .noConflict
ny plugin tianao hamerenana ny sandan'ny.
Bootstrap dia manome hetsika manokana ho an'ny ankamaroan'ny hetsika tokana ataon'ny plugins. Amin'ny ankapobeny, ireo dia avy amin'ny endrika infinitive sy past participle - izay ny infinitive (ohatra. show
) dia mipoitra eo am-piandohan'ny hetsika iray, ary ny endrik'ilay matoanteny lasa (ex. shown
) dia mipoitra rehefa vita ny hetsika iray.
Amin'ny 3.0.0, ny hetsika Bootstrap rehetra dia nomena anarana.
Ny hetsika infinitive rehetra dia manome preventDefault
fiasa. Izany dia manome fahafahana hampiato ny fanatanterahana hetsika iray alohan'ny hanombohany.
Ny dikan-teny tsirairay amin'ny plugins jQuery an'ny Bootstrap dia azo idirana amin'ny alàlan'ny VERSION
fananan'ny mpamorona ny plugin. Ohatra, ho an'ny plugin tooltip:
Ny plugins Bootstrap dia tsy miverina amin'ny fomba tsara indrindra rehefa tsy mandeha ny JavaScript. Raha miraharaha ny traikefan'ny mpampiasa amin'ity tranga ity ianao dia ampiasao <noscript>
ny manazava ny toe-javatra (sy ny fomba famelomana indray ny JavaScript) amin'ny mpampiasa anao, ary/na ampio ny fianjeranao manokana.
Bootstrap dia tsy manohana amin'ny fomba ofisialy ny tranokala JavaScript an'ny antoko fahatelo toa ny Prototype na jQuery UI. Na .noConflict
dia eo aza ny zava-mitranga ary nomena anarana, dia mety hisy olana amin'ny fifanarahana izay mila amboarinao samirery.
Ho an'ny vokatry ny tetezamita tsotra, ampidiro transition.js
indray mandeha miaraka amin'ireo rakitra JS hafa. Raha mampiasa ny compiled (na minifié) bootstrap.js
ianao, dia tsy ilaina ny mampiditra an'ity — efa eo izy io.
Transition.js dia mpanampy fototra amin'ny transitionEnd
hetsika ary koa emulator tetezamita CSS. Ampiasain'ny plugins hafa izy io mba hijerena ny fanohanan'ny tetezamita CSS sy hisambotra ny fifindrana mihantona.
Ny Tetezamita dia mety ho kilemaina maneran-tany amin'ny fampiasana ity snippet JavaScript manaraka ity, izay tsy maintsy ho avy aorian'ny fampidirana transition.js
( bootstrap.js
na bootstrap.min.js
, araka ny mety ho zava-misy):
Modals dia mirindra, fa moramora, ny fifampiresahana miaraka amin'ny fampiasa kely indrindra ilaina sy ny default.
Aza hadino ny manokatra modal iray raha mbola hita ny iray hafa. Mila kaody manokana ny fampisehoana mody mihoatra ny iray isaky ny mandeha.
Andramo foana ny mametraka ny kaody HTML an'ny modal amin'ny toerana ambony ao amin'ny antontan-taratasinao mba hialana amin'ny singa hafa misy fiantraikany amin'ny fisehoan'ny modal sy/na fampiasa.
Misy fampitandremana sasany momba ny fampiasana modals amin'ny fitaovana finday. Jereo ny antontan-taratasy fanohanana ny navigateur raha mila antsipiriany.
Noho ny fomba famaritan'ny HTML5 ny semantikany, ny autofocus
toetra HTML dia tsy misy fiantraikany amin'ny modals Bootstrap. Mba hahazoana vokatra mitovy amin'izany, ampiasao JavaScript mahazatra:
Mody adika miaraka amin'ny lohapejy, vatana, ary andiana hetsika ao amin'ny tongo-tongony.
Ampifamadiho ny modal amin'ny alàlan'ny JavaScript amin'ny fipihana ny bokotra etsy ambany. Hivezivezy midina izy io ary hanjavona avy any an-tampon'ny pejy.
Ataovy azo antoka ny manampy role="dialog"
sy aria-labelledby="..."
, manondro ny lohateny modal, ny .modal
, ary role="document"
ny .modal-dialog
tenany.
Ho fanampin'izany, azonao atao ny manome famaritana ny fifanakalozan-dresakao miaraka amin'ny aria-describedby
on .modal
.
Ny fametahana horonan-tsary YouTube amin'ny modals dia mitaky JavaScript fanampiny tsy ao amin'ny Bootstrap mba hampijanonana ho azy ny playback sy ny maro hafa. Jereo ity lahatsoratra Stack Overflow mahasoa ity raha mila fanazavana fanampiny.
Ny modely dia manana habe roa azo atao, azo alaina amin'ny alàlan'ny kilasy modifier hapetraka amin'ny .modal-dialog
.
Ho an'ny modals izay miseho fotsiny fa tsy manjavona hojerena, esory ny .fade
kilasy amin'ny marika modal anao.
Mba hanararaotra ny rafitra grid Bootstrap ao anatin'ny modal iray, dia asio akany .row
ao anaty .modal-body
ary ampiasao ny kilasin'ny rafitra grid mahazatra.
Manana bokotra maromaro izay miteraka mody iray ihany, miaraka amin'ny atiny hafa kely fotsiny? Ampiasao event.relatedTarget
sy HTML data-*
toetra (mety ho amin'ny alalan'ny jQuery ) mba hanova ny votoatin'ny ny modal miankina amin'ny bokotra izay no kitihina. Jereo ny doka Modal Events ho an'ny antsipiriany momba ny relatedTarget
,
Ny plugin modal dia manova ny atiny miafina amin'ny fangatahana, amin'ny alàlan'ny toetran'ny data na JavaScript. Izy io koa dia manampy .modal-open
amin'ny <body>
fanafoanana ny fitondran-tena scrolling default ary miteraka a .modal-backdrop
manome faritra kitiho hanesorana ireo modals aseho rehefa manindry ivelan'ny modal.
Ampidiro modal iray tsy manoratra JavaScript. Apetraho data-toggle="modal"
eo amin'ny singa mpanara-maso, toy ny bokotra iray, miaraka amin'ny data-target="#foo"
na href="#foo"
hikendry mody iray manokana hivezivezy.
Miantso modal miaraka amin'ny id myModal
misy andalana tokana amin'ny JavaScript:
Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-
, toy ny ao amin'ny data-backdrop=""
.
Anarana | karazana | toerana misy anao | Description |
---|---|---|---|
resahana | boolean na ny tady'static' |
marina | Ahitana singa modal-backdrop. Raha tsy izany, manendry static ny backdrop izay tsy manidy ny modal amin'ny tsindry. |
Ohatra | boolean | marina | Manakatona ny modal rehefa tsindriana ny fanalahidin'ny escape |
FAMPISEHOANA | boolean | marina | Mampiseho ny modal rehefa natomboka. |
mitokana | LALANA | DISO | Ity safidy ity dia tsy ampiasaina hatramin'ny v3.3.0 ary nesorina tamin'ny v4. Manoro hevitra izahay fa hampiasa templating amin'ny lafiny mpanjifa na rafitra famatorana data, na miantso ny jQuery.load ny tenanao. Raha misy URL lavitra omena, ny votoaty dia hapetraka indray mandeha amin'ny alàlan'ny |
.modal(options)
Mampihetsika ny atiny ho toy ny modal. Manaiky safidy azo atao object
.
.modal('toggle')
Manova fomba tanana iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny modal (izany hoe talohan'ny nitrangan'ny shown.bs.modal
na hidden.bs.modal
hetsika).
.modal('show')
Manokatra modal amin'ny tanana. Miverina any amin'ny mpiantso alohan'ny tena naseho ny modal (izany hoe alohan'ny shown.bs.modal
nitrangan'ny hetsika).
.modal('hide')
Manafina modal iray amin'ny tanana. Miverina amin'ny mpiantso alohan'ny nafenina ny modal (izany hoe alohan'ny hidden.bs.modal
nitrangan'ny hetsika).
.modal('handleUpdate')
Manitsy ny toeran'ny modal mba hanohitra ny scrollbar raha sendra misy miseho, izay hahatonga ny modal hitsambikina miankavia.
Ilaina ihany rehefa miova ny haavon'ny modal rehefa misokatra.
Ny kilasy modal an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa modal.
Ny hetsika modal rehetra dia alefa amin'ny modal mihitsy (izany hoe ao amin'ny <div class="modal">
).
Karazana hetsika | Description |
---|---|
show.bs.modal | Mirehitra avy hatrany ity hetsika ity rehefa show antsoina ny fomba fiasa. Raha vokatry ny tsindry iray dia azo alaina ho relatedTarget fananan'ny hetsika ny singa voakitika. |
shown.bs.modal | Ity hetsika ity dia voaroaka rehefa natao ho hitan'ny mpampiasa ny modal (hiandry ny fifindran'ny CSS ho vita). Raha vokatry ny tsindry iray dia azo alaina ho relatedTarget fananan'ny hetsika ny singa voakitika. |
hide.bs.modal | Ity hetsika ity dia alefa avy hatrany rehefa hide nantsoina ny fomba fiasa. |
hidden.bs.modal | Voaroaka ity hetsika ity rehefa vita ny nafenina tamin'ny mpampiasa ny modal (hiandry ny famitana ny fifindrana CSS). |
loaded.bs.modal | Voaroaka ity hetsika ity rehefa nampiditra atiny tamin'ny fampiasana ny remote safidy ny modal. |
Ampio ny menio midina amin'ny zavatra rehetra miaraka amin'ity plugin tsotra ity, ao anatin'izany ny navbar, tabilao ary pilina.
Amin'ny alàlan'ny toetran'ny data na JavaScript, ny plugin fidinana dia mamadika votoaty miafina (meno midina) amin'ny alàlan'ny fanodina ny .open
kilasy amin'ny lisitry ny ray aman-dreny.
Amin'ny fitaovana finday, ny fanokafana dropdown dia manampy .dropdown-backdrop
faritra fanidiana ho an'ny fanakatonana ny menio midina rehefa manindry ivelan'ny sakafo, fepetra takiana amin'ny fanohanana iOS mety. Midika izany fa mila paompy fanampiny amin'ny finday ny fifindrana avy amin'ny menio midina mivelatra mankany amin'ny menio midina hafa.
Fanamarihana: data-toggle="dropdown"
Miantehitra amin'ny fanakatonana ny menio midina amin'ny ambaratonga fampiharana ilay toetra, ka tsara ny mampiasa azy foana.
Ampio data-toggle="dropdown"
amin'ny rohy na bokotra iray mba hivezivezena ny fidina.
Mba hitazonana ny URL tsy misy ifandraisany amin'ny bokotra rohy dia ampiasao ny data-target
toetra fa tsy href="#"
.
Antsoy amin'ny alalan'ny JavaScript ny dropdowns:
data-toggle="dropdown"
mbola takianaNa inona na inona miantso ny fidinao amin'ny JavaScript ianao na mampiasa ny data-api, data-toggle="dropdown"
dia tsy maintsy misy foana ny singa trigger an'ny dropdown.
tsy misy
$().dropdown('toggle')
Manova ny menio fidinan'ny navbar nomena na navigateur misy tabilao.
Ny hetsika fidinana rehetra dia alefa amin'ny .dropdown-menu
singa ray aman-dreny.
Ny hetsika fidinana rehetra dia manana relatedTarget
fananana, ny sandany dia ny singa vatofantsika mifamadika.
Karazana hetsika | Description |
---|---|
show.bs.dropdown | Mirehitra avy hatrany ity hetsika ity rehefa antsoina ny fomba fampisehoana ohatra. |
aseho.bs.dropdown | Ity hetsika ity dia alefa rehefa hita ho hitan'ny mpampiasa ny fampidinana (hiandry ny fifindrana CSS, ho vita). |
hide.bs.dropdown | Alefa avy hatrany ity hetsika ity rehefa nantsoina ny fomba fanafenana. |
hidden.bs.dropdown | Voaroaka ity hetsika ity rehefa tapitra nafenina tamin'ny mpampiasa ny fampidinana (hiandry ny fifindrana CSS, ho vita). |
Ny plugin ScrollSpy dia natao hanavao ho azy ireo tanjona nav mifototra amin'ny toeran'ny horonam-boky. Soraty eo ambanin'ny navbar ny faritra ary jereo ny fiovan'ny kilasy mavitrika. Hasongadina ihany koa ireo singa ambany midina.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi talohan'ny namidy azy ireo. Tumblr farm-to-table zon'ny bisikileta na inona na inona. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui mety mbola tsy naheno azy ireo ianao ary ny cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatoazy accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa volombava skateboard, adipisicing fugiat velit pitchfork volombava. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat efatra loko nisi, ea helvetica nulla carles. Kamiao sakafo palitao cosby misy tatoazy, vinyl's quis non freegan an'i mcsweeney. Lo-fi wes anderson +1 sartorial. Carles tsy aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore single-original coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS dia adipisicing. Consectetur misy DIY kely messenger kitapo. Cred ex in, maharitra delectus 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 na inona na inona kamiao sakafo delectus. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats angamba mbola tsy henonao momba azy ireo consequat hoodie tsy misy gluten lo-fi fap aliquip. Miasa elit placeat alohan'ny hamidy, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Ny rohy Navbar dia tsy maintsy manana tanjona id azo vahana. Ohatra, <a href="#home">home</a>
tsy maintsy mifanaraka amin'ny zavatra ao amin'ny DOM toy ny <div id="home"></div>
.
:visible
ireo singa tsy kendrenaNy singa kendrena izay tsy :visible
mifanaraka amin'ny jQuery dia tsy hojerena ary tsy hasongadina na oviana na oviana ireo singa nav mifanaraka aminy.
Na inona na inona fomba fampiharana, scrollspy dia mitaky ny fampiasana position: relative;
amin'ny singa tsikilovanao. Amin'ny ankamaroan'ny tranga dia ity no <body>
. Rehefa scrollspy amin'ny singa hafa ankoatry ny <body>
, ataovy azo antoka fa manana height
napetraka sy overflow-y: scroll;
ampiharina.
Raha te hampiditra mora foana ny fihetsika scrollspy amin'ny navigateur topbar dia ampio data-spy="scroll"
amin'ny singa tianao hitsikilo (matetika dia ity no <body>
). Avy eo dia ampio ny data-target
toetra miaraka amin'ny ID na kilasy amin'ny singa ray amin'ny singa Bootstrap rehetra .nav
.
Rehefa avy nampidirina position: relative;
tao amin'ny CSS-nao, antsoy ny scrollspy amin'ny alàlan'ny JavaScript:
.scrollspy('refresh')
Rehefa mampiasa scrollspy miaraka amin'ny fanampiana na fanesorana singa ao amin'ny DOM ianao dia mila miantso ny fomba fanavaozana toy izao:
Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-
, toy ny ao amin'ny data-offset=""
.
Anarana | karazana | toerana misy anao | Description |
---|---|---|---|
offset | isa | 10 | Pikaola ho entin'ny tampony rehefa manao kajy ny toeran'ny horonam-boky. |
Karazana hetsika | Description |
---|---|
activate.bs.scrollspy | Ity hetsika ity dia mirehitra isaky ny misy singa vaovao mampandeha ny scrollspy. |
Manampia fampiasa kiheba haingana sy mavitrika mba hivezivezy amin'ny alàlan'ny tontonana amin'ny atiny eo an-toerana, na dia amin'ny alàlan'ny menio midina. Tsy tohana ny kiheba nested.
Denim manta angamba mbola tsy henonao ny momba azy ireo pataloha jeans Austin. Nesciunt tofu stumptown aliqua, fanadiovana retro synth master. Ny volombava cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Alefaso toerana amin'ny salvia cillum iphone. Seitan aliquip quis cardigan akanjo amerikana, mpivaro-kena 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.
Ity plugin ity dia manitatra ny singa navigateur misy tabilao mba hanampiana faritra azo vakiana.
Alefaso amin'ny alalan'ny JavaScript ny kiheba azo vakiana (mila ampihetsika tsirairay ny tabilao tsirairay):
Azonao atao ny manetsika ny tabilao tsirairay amin'ny fomba maro:
Azonao atao ny manetsika kiheba na pilule navigation nefa tsy manoratra JavaScript amin'ny alalan'ny famaritana fotsiny data-toggle="tab"
na data-toggle="pill"
amin'ny singa iray. Ny fampidirana ny nav
sy ny nav-tabs
kilasy amin'ny tabilao ul
dia hampihatra ny bootstrap tab styling , raha ampiana ny nav
and nav-pills
classes dia hampihatra pill styling .
Mba hahatonga ny tabilao ho levona, ampio .fade
ny tsirairay .tab-pane
. Ny takelaka tabilao voalohany dia tsy maintsy .in
manao ny atiny voalohany ho hita ihany koa.
$().tab
Manetsika singa kiheba sy fitoeran'ny atiny. Ny tabilao dia tokony hanana na data-target
kendrena href
ny node container ao amin'ny DOM. Amin'ireo ohatra etsy ambony ireo, ny tabilao dia ny <a>
s misy data-toggle="tab"
toetra.
.tab('show')
Mifidy ny tabilao nomena ary mampiseho ny atiny mifandray aminy. Izay kiheba hafa voafantina teo aloha dia lasa tsy voafantina ary nafenina ny atiny mifandray aminy. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny takelaka tabilao (izany hoe alohan'ny shown.bs.tab
nitrangan'ny hetsika).
Rehefa mampiseho kiheba vaovao dia miredareda toy izao manaraka izao ny hetsika:
hide.bs.tab
(amin'ny tabilao mavitrika ankehitriny)show.bs.tab
(eo amin'ny tabilao haseho)hidden.bs.tab
(eo amin'ny tabilao mavitrika teo aloha, mitovy amin'ny an'ny hide.bs.tab
hetsika)shown.bs.tab
(eo amin'ny tabilao vao naseho vao mavitrika, mitovy amin'ny an'ny show.bs.tab
hetsika)Raha tsy misy kiheba efa navitrika dia tsy ho voaroaka ny hetsika ary hide.bs.tab
.hidden.bs.tab
Karazana hetsika | Description |
---|---|
show.bs.tab | Ity hetsika ity dia mirehitra amin'ny seho kiheba, saingy alohan'ny hisehoan'ny kiheba vaovao. Ampiasao event.target sy event.relatedTarget lasibatra ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy). |
aseho.bs.tab | Ity hetsika ity dia mirehitra amin'ny seho kiheba rehefa avy naseho ny kiheba iray. Ampiasao event.target sy event.relatedTarget lasibatra ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy). |
hide.bs.tab | Mirehitra ity hetsika ity rehefa misy kiheba vaovao haseho (ary noho izany dia afenina ny kiheba mavitrika teo aloha). Ampiasao event.target sy event.relatedTarget lasibatra ny tabilao mavitrika ankehitriny sy ny tabilao vaovao tsy ho ela. |
hidden.bs.tab | Mirehitra ity hetsika ity rehefa miseho ny tabilao vaovao (ary noho izany dia afenina ny tabilao mavitrika teo aloha). Ampiasao event.target sy event.relatedTarget ikendrena ny tabilao mavitrika teo aloha sy ny tabilao mavitrika vaovao. |
Nahazo aingam-panahy avy amin'ny plugin jQuery.tipsy tena tsara nosoratan'i Jason Frame; Tooltips dia kinova nohavaozina, izay tsy miankina amin'ny sary, mampiasa CSS3 ho an'ny sary mihetsika, ary angona-attributes ho an'ny fitahirizana lohateny eo an-toerana.
Ny toro-hevitra momba ny fitaovana misy lohateny tsy misy halavany dia tsy aseho mihitsy.
Mitsangàna eo amin'ny rohy etsy ambany raha te hahita fitaovana:
pataloha tery next level keffiyeh angamba mbola tsy naheno azy ireo ianao. Tranon-tsary volombava manta denim letterpress vegan messenger bag stumptown. Seitan Farm-to-table, mcsweeney's fixie sustainable quinoa 8-bit american apparel dia manana terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, efatra loko mcsweeney's cleanse vegan chambray. Mpanao asa tanana tena mahatsikaiky na inona na inona keytar , scenester farm-to-table banksy Austin twitter mitantana freegan cred denim manta kafe tokana nipoitra.
Misy safidy efatra: ambony, havanana, ambany ary havia.
Noho ny antony fampisehoana, ny Tooltip sy Popover data-apis dia opt-in, midika izany fa tsy maintsy ataonao voalohany izy ireo .
Ny fomba iray hanombohana ny toro-hevitra rehetra amin'ny pejy iray dia ny fisafidianana azy ireo amin'ny data-toggle
toetrany:
Ny plugin tooltip dia mamorona votoaty sy marika amin'ny fangatahana, ary amin'ny alàlan'ny default dia mametraka ireo toro-hevitra aorian'ny singa trigger.
Alefaso amin'ny alalan'ny JavaScript ny toro-hevitra:
Ny mari-pamantarana ilaina ho an'ny tondro-fitaovana dia data
toetra iray ihany ary title
amin'ny singa HTML tianao hananana tondro-fitaovana. Ny mari-pamantarana vokarina amin'ny tondro-fitaovana dia tsotra, na dia mitaky toerana aza izany (amin'ny alàlan'ny default, napetraky top
ny plugin).
Indraindray ianao te-hanampy tondro-fitaovana amin'ny rohibe mifono tsipika maromaro. Ny fitondran-tena mahazatra an'ny plugin tooltip dia ny mametraka azy mitsivalana sy mitsangana. Ampio white-space: nowrap;
amin'ny vatofantsika mba hisorohana izany.
Rehefa mampiasa toro-hevitra momba ny singa ao anatin'ny a .btn-group
na ny .input-group
, na amin'ny singa mifandraika amin'ny latabatra ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), dia tsy maintsy mamaritra ny safidy ianao container: 'body'
(voarakitra eto ambany) mba hisorohana ny voka-dratsy tsy ilaina (toy ny singa mitombo midadasika sy/ na very ny zorony boribory rehefa mipoitra ny tondro fitaovana).
Ho an'ireo mpampiasa mandeha amin'ny fitendry, ary indrindra ireo mpampiasa teknolojia manampy, dia tokony hampiditra toro-hevitra fotsiny amin'ireo singa azo ifantohan'ny klavier toy ny rohy, ny fanaraha-maso ny endrika, na ny singa tsy manara-dalàna misy tabindex="0"
toetra.
Raha te hampiditra tondro-fitaovana disabled
amin'ny .disabled
singa iray, dia apetraho ao anatin'ny a ny singa <div>
ary ampiharo amin'izany <div>
kosa ny tondro-fitaovana.
Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-
, toy ny ao amin'ny data-animation=""
.
Anarana | Type | toerana misy anao | Description |
---|---|---|---|
fanentanana | boolean | marina | Ampiharo CSS fade transition amin'ny tooltip |
fitoeran-javatra | string | DISO | DISO | Ampidiro amin'ny singa manokana ny tondro-fitaovana. Ohatra: |
fahatarana | laharana | zavatra | 0 | Fanemorana ny fampisehoana sy ny fanafenana ny toro-hevitra (ms) - tsy mihatra amin'ny karazana trigger manual Raha misy laharana omena dia mihatra amin'ny fanafenana/seho ny fahatarana Ny firafitry ny zavatra dia: |
html | boolean | DISO | Ampidiro ao amin'ny tondro-fitaovana ny HTML. Raha diso, ny text fomba jQuery dia hampiasaina hampidirana votoaty ao amin'ny DOM. Mampiasà lahatsoratra raha manahy momba ny fanafihana XSS ianao. |
fametrahana | string | asa | 'top' | Ahoana ny fametrahana ny tondro-fitaovana - top | ambany | ankavia | marina | fiara. Rehefa ampiasaina hamaritana ny fametrahana ny asa iray dia antsoina miaraka amin'ny node DOM tooltip ho tohan-kevitra voalohany ary ny singa DOM node ho azy faharoa. Ny |
mpifidy | tady | DISO | Raha misy mpifidy omena dia atolotra amin'ireo tanjona voafaritra ireo zavatra momba ny fitaovana. Amin'ny fampiharana, izany dia ampiasaina mba ahafahan'ny votoaty HTML mavitrika hampidirana toro-hevitra. Jereo ity ary ohatra misy fampahalalana . |
môdely | tady | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML fototra ampiasaina amin'ny famoronana ny toro-hevitra. Ampidirina
Ny singa famonosana ivelany indrindra dia tokony hanana ny |
lohateny | string | asa | '' | Sanda titre default raha Raha misy asa omena, dia hantsoina miaraka amin'ny |
miteraka | tady | 'hover focus' | Ahoana ny fomba fandraisan'ny tooltip - tsindrio | hover | mifantoka | manual. Mety handalo trigger maromaro ianao; saraho amin'ny toerana iray izy ireo. manual tsy azo atambatra amin'ny trigger hafa. |
viewport | string | object | asa | { mpifidy: 'body', padding: 0 } | Tazonina ao anatin'ny fetran'ity singa ity ny tendron'ny fitaovana. Ohatra: Raha misy asa omena, dia antsoina miaraka amin'ny singa DOM node izy io ho tohan-kevitra tokana. Ny |
Ny safidy ho an'ny toro-làlana tsirairay dia azo faritana amin'ny alàlan'ny fampiasana ny toetran'ny data, araka ny hazavaina etsy ambony.
$().tooltip(options)
Ampifandraiso amin'ny fanangonana singa iray ny mpitantana fitaovana.
.tooltip('show')
Maneho ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny nanehoana ny tondro-fitaovana (izany hoe alohan'ny shown.bs.tooltip
nitrangan'ny hetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip. Ny toro-hevitra momba ny fitaovana misy lohateny tsy misy halavany dia tsy aseho mihitsy.
.tooltip('hide')
Manafina ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny nafenina ny tondro fitaovana (izany hoe alohan'ny hidden.bs.tooltip
nitrangan'ny hetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip.
.tooltip('toggle')
Manova ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny tondro-fitaovana (izany hoe talohan'ny nitrangan'ny shown.bs.tooltip
na hidden.bs.tooltip
hetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip.
.tooltip('destroy')
Manafina sy manimba ny tondro-fitaovan'ny singa iray. Ireo toro-lalana mampiasa delegasiona (izay noforonina amin'ny alalan'ny safidy selector
) dia tsy azo rava tsirairay amin'ny singa trigger.
Karazana hetsika | Description |
---|---|
show.bs.tooltip | Mirehitra avy hatrany ity hetsika ity rehefa show antsoina ny fomba fiasa. |
shown.bs.tooltip | Voaroaka ity hetsika ity rehefa naseho ho hitan'ny mpampiasa ny toro-lalana (hiandry ny fahavitan'ny fifindrana CSS). |
hide.bs.tooltip | Ity hetsika ity dia alefa avy hatrany rehefa hide nantsoina ny fomba fiasa. |
hidden.bs.tooltip | Voaroaka ity hetsika ity rehefa tapitra nafenina tamin'ny mpampiasa ny toro-hevitra (hiandry ny famitana ny fifindrana CSS). |
inserted.bs.tooltip | Ity hetsika ity dia alefa aorian'ny show.bs.tooltip hetsika rehefa nampidirina tao amin'ny DOM ny môdelin'ny tooltip. |
Manampia votoaty mipetaka kely, toy ny ao amin'ny iPad, amin'ny singa rehetra amin'ny fametrahana fampahalalana faharoa.
Popovers ny lohateniny sy ny atiny dia aotra ny halavany dia tsy aseho mihitsy.
Ny Popovers dia mitaky ny plugin tooltip mba hampidirina ao amin'ny kinova Bootstrap anao.
Noho ny antony fampisehoana, ny Tooltip sy Popover data-apis dia opt-in, midika izany fa tsy maintsy ataonao voalohany izy ireo .
Ny fomba iray hanombohana ny popovers rehetra amin'ny pejy iray dia ny fisafidianana azy ireo amin'ny data-toggle
toetrany:
Rehefa mampiasa popovers amin'ny singa ao anatin'ny a .btn-group
na an .input-group
, na amin'ny singa mifandraika amin'ny latabatra ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), dia tsy maintsy mamaritra ny safidy ianao container: 'body'
(voarakitra eto ambany) mba hisorohana ny voka-dratsy tsy ilaina (toy ny singa mitombo mivelatra sy/ na very ny zorony boribory rehefa mipoitra ny popover).
Raha te hampiditra popover amina singa disabled
iray .disabled
dia apetraho ao anatin'ny a ny singa <div>
ary ampiharo amin'izany ny popover <div>
.
Indraindray ianao te-hanampy popover amin'ny rohibe iray mamehy andalana maromaro. Ny fitondran-tena mahazatra amin'ny plugin popover dia ny mametraka azy mitsivalana sy mitsangana. Ampio white-space: nowrap;
amin'ny vatofantsika mba hisorohana izany.
Misy safidy efatra: ambony, havanana, ambany ary havia.
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.
Ampiasao ny focus
trigger hanilika popovers amin'ny tsindry manaraka ataon'ny mpampiasa.
Ho an'ny fihetsika mifanandrify amin'ny navigateur sy cross-platform dia tsy maintsy mampiasa ny <a>
marika ianao, fa tsy ny <button>
tag, ary tsy maintsy ampidirinao koa ny toetra role="button"
sy tabindex
.
Alefaso ny popovers amin'ny JavaScript:
Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-
, toy ny ao amin'ny data-animation=""
.
Anarana | Type | toerana misy anao | Description |
---|---|---|---|
fanentanana | boolean | marina | Ampiharo CSS fade transition amin'ny popover |
fitoeran-javatra | string | DISO | DISO | Manampy ny popover amina singa iray manokana. Ohatra: |
votoaty | string | asa | '' | Sanda votoaty default raha Raha misy asa omena, dia hantsoina miaraka amin'ny |
fahatarana | laharana | zavatra | 0 | Fanemorana ny fampisehoana sy fanafenana ny popover (ms) - tsy mihatra amin'ny karazana trigger manual Raha misy laharana omena dia mihatra amin'ny fanafenana/seho ny fahatarana Ny firafitry ny zavatra dia: |
html | boolean | DISO | Ampidiro ao anaty popover ny HTML. Raha diso, ny text fomba jQuery dia hampiasaina hampidirana votoaty ao amin'ny DOM. Mampiasà lahatsoratra raha manahy momba ny fanafihana XSS ianao. |
fametrahana | string | asa | 'marina' | Ahoana ny fametrahana ny popover - top | ambany | ankavia | marina | fiara. Rehefa ampiasaina hamaritana ny toerana ny asa iray, dia antsoina miaraka amin'ny popover DOM node ho tohan-kevitra voalohany ary ny singa DOM node ho azy faharoa. |
mpifidy | tady | DISO | Raha misy mpifidy omena, ny zavatra popover dia atolotra amin'ireo tanjona voafaritra. Amin'ny fampiharana, izany dia ampiasaina mba ahafahan'ny votoaty HTML mavitrika hampidirana popovers. Jereo ity ary ohatra misy fampahalalana . |
môdely | tady | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Base HTML ampiasaina rehefa mamorona ny popover. Ny popover's Ny popover's
Ny singa famonosana ivelany indrindra dia tokony hanana ny |
lohateny | string | asa | '' | Sanda titre default raha Raha misy asa omena, dia hantsoina miaraka amin'ny |
miteraka | tady | 'click' | Ahoana no nanombohan'ny popover - tsindrio | hover | mifantoka | manual. Mety handalo trigger maromaro ianao; saraho amin'ny toerana iray izy ireo. manual tsy azo atambatra amin'ny trigger hafa. |
viewport | string | object | asa | { mpifidy: 'body', padding: 0 } | Mitazona ny popover ao anatin'ny sisin'ity singa ity. Ohatra: Raha misy asa omena, dia antsoina miaraka amin'ny singa DOM node izy io ho tohan-kevitra tokana. |
Ny safidy ho an'ny popovers tsirairay dia azo faritana amin'ny alàlan'ny fampiasana ny toetran'ny data, araka ny hazavaina etsy ambony.
$().popover(options)
Manomboha popover ho an'ny fanangonana singa.
.popover('show')
Mampiseho popover singa iray. Miverina any amin'ny mpiantso alohan'ny tena naseho ny popover (izany hoe alohan'ny shown.bs.popover
nitrangan'ny hetsika). Izany dia heverina ho "manual" triggering ny popover. Popovers ny lohateniny sy ny atiny dia aotra ny halavany dia tsy aseho mihitsy.
.popover('hide')
Manafina ny popover an'ny singa iray. Miverina amin'ny mpiantso alohan'ny nafenina ny popover (izany hoe alohan'ny hidden.bs.popover
nitrangan'ny hetsika). Izany dia heverina ho "manual" triggering ny popover.
.popover('toggle')
Manova ny popover an'ny singa iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny popover (izany hoe alohan'ny nitrangan'ny shown.bs.popover
na hidden.bs.popover
hetsika). Izany dia heverina ho "manual" triggering ny popover.
.popover('destroy')
Manafina sy manimba ny popover singa iray. Popovers izay mampiasa delegasiona (izay noforonina amin'ny alalan'ny safidy selector
) dia tsy azo ravana tsirairay amin'ny singa trigger.
Karazana hetsika | Description |
---|---|
show.bs.popover | Mirehitra avy hatrany ity hetsika ity rehefa show antsoina ny fomba fiasa. |
aseho.bs.popover | Ity hetsika ity dia alefa rehefa naseho ho hitan'ny mpampiasa ny popover (hiandry ny famitana ny fifindrana CSS). |
hide.bs.popover | Ity hetsika ity dia alefa avy hatrany rehefa hide nantsoina ny fomba fiasa. |
hidden.bs.popover | Ity hetsika ity dia alefa rehefa vita ny nafenina tamin'ny mpampiasa ny popover (hiandry ny famitana ny fifindrana CSS). |
inserted.bs.popover | Ity hetsika ity dia alefa aorian'ny show.bs.popover hetsika rehefa nampidirina tao amin'ny DOM ny môdely popover. |
Ampio ny fampiasa fandroahana amin'ny hafatra fanairana rehetra miaraka amin'ity plugin ity.
Rehefa mampiasa .close
bokotra iray dia tsy maintsy zaza voalohany amin'ny .alert-dismissible
ary tsy misy atiny lahatsoratra mety ho eo alohan'ny marika.
Ovay izao sy izao ary andramo indray. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Ampio fotsiny data-dismiss="alert"
amin'ny bokotra akaiky anao mba hanomezana fampiasa akaiky fanairana ho azy. Ny fanakatonana fanairana dia manala azy amin'ny DOM.
Raha te hampiasa sary mihetsika ny fanairanao rehefa mihidy dia ataovy azo antoka fa manana ny .fade
and.in
kilasy efa mihatra aminy izy ireo.
$().alert()
Manao fanairana amin'ny fihainoana hetsika kitiho amin'ny singa taranaka manana ny data-dismiss="alert"
toetra. (Tsy ilaina rehefa mampiasa ny fampandehanana mandeha ho azy ny data-api.)
$().alert('close')
Manakatona fanairana amin'ny fanesorana azy amin'ny DOM. Raha misy ny .fade
and .in
classes ao amin'ilay singa, dia hanjavona ny fanairana alohan'ny hanesorana azy.
Ny plugin fanairana an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampiasa mailo.
Karazana hetsika | Description |
---|---|
close.bs.alert | Mirehitra avy hatrany ity hetsika ity rehefa close antsoina ny fomba fiasa. |
closed.bs.alert | Tafavoaka ity hetsika ity rehefa nakatona ny fanairana (hiandry ny fahavitan'ny fifindrana CSS). |
Manaova bebe kokoa amin'ny bokotra. Ny bokotra fanaraha-maso dia manambara na mamorona vondrona bokotra ho an'ny singa maro kokoa toy ny barazy.
Firefox dia manohy ny fanjakana mifehy ny endrika (kilemaina sy ny fanaraha-maso) manerana ny entana pejy . Ny vahaolana amin'izany dia ny fampiasana autocomplete="off"
. Jereo Mozilla bug #654072 .
Ampio data-loading-text="Loading..."
mba hampiasa ny toetry ny entana amin'ny bokotra iray.
Ity endri-javatra ity dia tsy ampiasaina hatramin'ny v3.3.5 ary nesorina tamin'ny v4.
Ho an'ity fihetsiketsehana ity dia mampiasa data-loading-text
ary izahay $().button('loading')
, saingy tsy izany ihany no fanjakana azonao ampiasaina. Jereo bebe kokoa momba izany eto ambany ao amin'ny $().button(string)
antontan -taratasy .
Ampio data-toggle="button"
mba hampavitrika ny famadihana amin'ny bokotra tokana.
.active
aryaria-pressed="true"
Ho an'ny bokotra efa navadika mialoha dia tsy maintsy ampidirinao amin'ny tenanao ny .active
kilasy sy ny aria-pressed="true"
toetra button
.
Ampio data-toggle="buttons"
amin'ny .btn-group
boaty fisaka misy na fampidiran-dresaka amin'ny onjam-peo mba ahafahana manova ny fomba fiasany.
.active
Ho an'ny safidy voafantina dia tsy maintsy ampidirinao .active
amin'ny fampidirana ny kilasy ny label
tenanao.
Raha toa ka havaozina ny toetry ny bokotra checkbox nefa tsy manetsika click
hetsika eo amin'ny bokotra (ohatra amin'ny <input type="reset">
alàlan'ny fametrahana ny checked
fananan'ny fampidirana), dia mila manodina ny .active
kilasy amin'ny fidirana label
ianao.
$().button('toggle')
Manova ny toetry ny fanosehana. Manome ny bokotra ny endrika fa efa navitrika.
$().button('reset')
Mamerina ny toetry ny bokotra - manova lahatsoratra amin'ny lahatsoratra tany am-boalohany. Ity fomba ity dia asynchronous ary miverina alohan'ny fahavitan'ny famerenana.
$().button(string)
Manova lahatsoratra amin'ny toe-tsoratra voafaritra voafaritra.
Plugin flexible izay mampiasa kilasy vitsivitsy ho an'ny fihetsika mora miova.
Ny fianjerana dia mila ampidirina ao amin'ny kinova Bootstrap anao ny plugins transitions .
Kitiho ny bokotra etsy ambany mba hampisehoana sy hanafenana singa hafa amin'ny alàlan'ny fanovana kilasy:
.collapse
manafina votoaty.collapsing
dia ampiharina mandritra ny tetezamita.collapse.in
mampiseho votoatyAzonao atao ny mampiasa rohy misy ilay href
toetra, na bokotra misy ilay data-target
toetra. Amin'ireo tranga roa ireo, data-toggle="collapse"
dia ilaina ny.
Ampitomboy ny fitondran-tena firodana mahazatra mba hamoronana akorandriaka miaraka amin'ny singa tontonana.
Azo atao koa ny manakalo .panel-body
s amin'ny .list-group
s.
Ataovy azo antoka ny manampy aria-expanded
ny singa fanaraha-maso. Ity toetra ity dia mamaritra mazava ny toetry ny singa azo harodana amin'izao fotoana izao mba hamakiana ny mpamaky sy ny teknolojia fanampiana mitovy. Raha mihidy amin'ny alàlan'ny default ny singa azo rava, dia tokony hanana sanda aria-expanded="false"
. Raha toa ianao ka nametraka ny singa azo rava ho misokatra amin'ny alàlan'ny fampiasana ny in
kilasy dia apetraho aria-expanded="true"
amin'ny fanaraha-maso kosa. Ny plugin dia hanova ho azy io toetra io mifototra amin'ny hoe nosokafana na nakatona ilay singa azo rava.
Fanampin'izany, raha mikendry singa tokana azo harodana ny singanao - izany hoe data-target
manondro id
mpifidy iray ny toetranao - azonao atao ny manampy aria-controls
toetra fanampiny amin'ny singa fanaraha-maso, misy ny id
singa azo harodana. Ireo mpamaky efijery maoderina sy ireo teknolojia fanampiana mitovy amin'izany dia mampiasa an'io toetra io mba hanomezana ireo mpampiasa hitsin-dàlana fanampiny hivezivezy mivantana mankany amin'ilay singa azo rava.
Ny plugin collapse dia mampiasa kilasy vitsivitsy hifehezana ny fampiakarana mavesatra:
.collapse
manafina ny votoatiny.collapse.in
mampiseho ny votoatiny.collapsing
ampiana rehefa manomboka ny tetezamita, ary esorina rehefa tapitraIreo kilasy ireo dia azo jerena ao amin'ny component-animations.less
.
Ampio fotsiny data-toggle="collapse"
ary a data-target
amin'ny singa mba hanendry ho azy ny fanaraha-maso ny singa azo rava. Ny data-target
toetra dia manaiky mpifidy CSS hampiharana ny fianjerana. Ataovy azo antoka ny manampy ny kilasy collapse
amin'ny singa azo rava. Raha tianao ny hisokatra ho default dia ampio ny kilasy fanampiny in
.
Mba hanampiana ny fitantanana vondrona mitovy amin'ny akorandriaka amin'ny fanaraha-maso azo harodana, ampio ny toetran'ny data data-parent="#selector"
. Jereo ny demo raha te hahita an'ity hetsika ity.
Alefa tanana amin'ny:
Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-
, toy ny ao amin'ny data-parent=""
.
Anarana | karazana | toerana misy anao | Description |
---|---|---|---|
ray aman-dreny | mpifidy | DISO | Raha misy mpifidy omena, dia hikatona avokoa ny singa azo harodana eo ambanin'ny ray aman-dreny voatondro rehefa aseho io singa azo harodana io. (mitovy amin'ny fihetsika akordionina nentim-paharazana - miankina amin'ny panel kilasy izany) |
mifamadika | boolean | marina | Manova ny singa azo harodana amin'ny fiantsoana |
.collapse(options)
Mampihetsika ny atiny ho singa azo harodana. Manaiky safidy azo atao object
.
.collapse('toggle')
Manova singa azo harodana ho aseho na afenina. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny singa azo rava (izany hoe talohan'ny nitrangan'ny shown.bs.collapse
na hidden.bs.collapse
hetsika).
.collapse('show')
Mampiseho singa azo harodana. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny singa azo harodana (izany hoe alohan'ny shown.bs.collapse
nitrangan'ny hetsika).
.collapse('hide')
Manafina singa azo harodana. Miverina any amin'ny mpiantso alohan'ny tena nafenina ny singa azo harodana (izany hoe alohan'ny hidden.bs.collapse
nitrangan'ny hetsika).
Ny kilasin'ny firodanan'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampandehanana mirodana.
Karazana hetsika | Description |
---|---|
show.bs.collapse | Mirehitra avy hatrany ity hetsika ity rehefa show antsoina ny fomba fiasa. |
aseho.bs.collapse | Ity hetsika ity dia alefa rehefa misy singa mirodana hita ho hitan'ny mpampiasa (hiandry ny famitana ny fifindrana CSS). |
hide.bs.collapse | Ity hetsika ity dia alefa avy hatrany rehefa hide nantsoina ny fomba. |
hidden.bs.collapse | Ity hetsika ity dia voaroaka rehefa misy singa mianjera nafenina tamin'ny mpampiasa (hiandry ny fifindran'ny CSS ho vita). |
Singa sary mihetsika ho an'ny fitetezana singa, toy ny carousel. Tsy tohanana ny carousels voatokana.
Ny singa carousel amin'ny ankapobeny dia tsy mifanaraka amin'ny fenitry ny fidirana. Raha mila fanarahan-dalàna ianao dia diniho ny safidy hafa amin'ny fanolorana ny atiny.
Ny Bootstrap dia mampiasa CSS3 ho an'ny sary mihetsika, fa ny Internet Explorer 8 & 9 dia tsy manohana ny fananana CSS ilaina. Noho izany, tsy misy sary mihetsika mihetsika amin'ny alàlan'ny fampiasana ireo navigateur ireo. Niniana nanapa-kevitra izahay fa tsy hampiditra ny famotsorana mifototra amin'ny jQuery ho an'ny tetezamita.
Mila .active
ampiana amin'ny iray amin'ireo sary mihetsika ny kilasy. Raha tsy izany dia tsy ho hita ny carousel.
Ny kilasy .glyphicon .glyphicon-chevron-left
sy .glyphicon .glyphicon-chevron-right
ny kilasy dia tsy voatery ilaina amin'ny fanaraha-maso. Bootstrap dia manome .icon-prev
ary .icon-next
ho solon'ny unicode tsotra.
Ampio caption amin'ny slide-nao mora foana miaraka amin'ny .carousel-caption
singa ao anatin'ny .item
. Apetraho ao anatin'izany ny HTML rehetra azo atao ary halamina sy halamina ho azy izany.
Ny carousels dia mitaky ny fampiasana ny id
eny amin'ny kaontenera ivelany indrindra (ny .carousel
) mba hifehezana ny carousel miasa tsara. Rehefa manampy carousels maromaro, na rehefa manova carousel id
, dia ataovy izay hanavao ny fanaraha-maso mifandraika.
Mampiasà toetra angon-drakitra mba hifehezana mora foana ny toerana misy ny carousel. data-slide
manaiky ny teny fanalahidy prev
na next
, izay manova ny toeran'ny slide mifandraika amin'ny toerana misy azy ankehitriny. Raha tsy izany, ampiasao data-slide-to
ny fampitaovana fanondroana misesy manta mankany amin'ny carousel data-slide-to="2"
, izay mamindra ny toeran'ny kisendrasendra mankany amina fanondroana manokana manomboka amin'ny 0
.
Ny data-ride="carousel"
toetra dia ampiasaina hanamarihana carousel ho toy ny animating manomboka amin'ny entana pejy. Tsy azo ampiasaina miaraka amin'ny (miankina sy tsy ilaina) fanombohana JavaScript mazava ny carousel mitovy.
Antsoy amin'ny tanana ny carousel amin'ny:
Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-
, toy ny ao amin'ny data-interval=""
.
Anarana | karazana | toerana misy anao | Description |
---|---|---|---|
elanelana | isa | 5000 | Ny faharetan'ny fotoana eo anelanelan'ny fandehanana mandeha ho azy amin'ny zavatra iray. Raha diso dia tsy mandeha ho azy ny carousel. |
fiatoana | string | tohivakana foana | "hover" | Raha apetraka amin'ny "hover" , atsaharo ny fihodinan'ny carousel mouseenter ary avereno indray ny fihodinan'ny carousel amin'ny mouseleave . Raha apetraka amin'ny null , dia tsy hampiato azy ny fikopaka eo ambonin'ny carousel. |
fonosina | boolean | marina | Na tokony hihodina tsy tapaka ny carousel na hisy fiatoana mafy. |
Ohatra | boolean | marina | Na tokony hihetsika amin'ny hetsika fitendry ny carousel. |
.carousel(options)
Manomboka ny carousel miaraka amin'ny safidy azo atao object
ary manomboka mandehandeha amin'ny entana.
.carousel('cycle')
Mihodikodina amin'ireo singa carousel miankavia miankavanana.
.carousel('pause')
Manakana ny carousel tsy hivezivezy amin'ny entana.
.carousel(number)
Mihodina ny carousel mankany amin'ny frame manokana (mifototra amin'ny 0, mitovy amin'ny array).
.carousel('prev')
Mihodina mankany amin'ilay singa teo aloha.
.carousel('next')
Mihodina mankany amin'ny singa manaraka.
Ny kilasin'ny carousel an'ny Bootstrap dia mampiseho fisehoan-javatra roa ho an'ny fampidiran-dresaka amin'ny fiasa carousel.
Samy manana ireto toetra fanampiny ireto ny hetsika roa:
direction
: Lalana mikoriana ny carousel (na "left"
na "right"
).relatedTarget
: Ny singa DOM izay apetraka amin'ny toerany ho singa mavitrika.Ny hetsika carousel rehetra dia alefa amin'ny carousel mihitsy (izany hoe ao amin'ny <div class="carousel">
).
Karazana hetsika | Description |
---|---|
slide.bs.carousel | Mirehitra avy hatrany ity hetsika ity rehefa ampiasaina ny slide fomba fiasa. |
slid.bs.carousel | Tafavoaka ity hetsika ity rehefa nahavita ny fifindran'ny diany ny carousel. |
Ny plugin affix dia mihodina position: fixed;
sy miala, maka tahaka ny vokatra hita miaraka amin'ny position: sticky;
. Ny subnavigation eo ankavanana dia demo mivantana amin'ny plugin affix.
Ampiasao ny plugin affix amin'ny alàlan'ny toetra data na amin'ny tananao miaraka amin'ny JavaScript anao manokana. Amin'ireo toe-javatra roa ireo dia tsy maintsy manome CSS ianao amin'ny fametrahana sy ny sakan'ny atiny affixed anao.
Fanamarihana: Aza mampiasa ny plugin affix amin'ny singa iray ao anatin'ny singa iray somary mipetrapetraka, toy ny tsanganana voasintona na atosika, noho ny tsy fahampian'ny Safari rendering .
Ny plugin affix dia mifamadika eo anelanelan'ny kilasy telo, izay samy maneho fanjakana manokana: .affix
, .affix-top
, ary .affix-bottom
. Tsy maintsy manome ny styles ianao, ankoatra ny position: fixed;
on .affix
, ho an'ireo kilasy ireo ny tenanao (tsy miankina amin'ity plugin ity) mba hikarakarana ny toerana tena izy.
Toy izao ny fomba fiasan'ny plugin affix:
.affix-top
manondro fa ny singa dia eo amin'ny toerana ambony indrindra. Amin'izao fotoana izao dia tsy ilaina ny fametrahana CSS..affix
manolo .affix-top
sy mametraka position: fixed;
(nomen'ny CSS Bootstrap)..affix
hosoloina .affix-bottom
. Satria tsy voatery ny offsets, ny fametrahana iray dia mitaky anao hametraka ny CSS mety. Amin'ity tranga ity, ampio position: absolute;
raha ilaina. Ny plugin dia mampiasa ny toetran'ny data na safidy JavaScript hamaritana ny toerana hametrahana ilay singa avy any.Araho ireo dingana etsy ambony mba hametrahana ny CSS-nao ho an'ny iray amin'ireo safidy fampiasana etsy ambany.
Mba hanampiana mora foana ny fitondran-tena affix amin'ny singa rehetra, ampio fotsiny data-spy="affix"
amin'ny singa tianao hitsikilo. Mampiasà offset mba hamaritana hoe rahoviana no hanodina ny fanindriana singa iray.
Antsoy ny plugin affix amin'ny JavaScript:
Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-
, toy ny ao amin'ny data-offset-top="200"
.
Anarana | karazana | toerana misy anao | Description |
---|---|---|---|
offset | laharana | asa | zavatra | 10 | Pikaola hosoloina amin'ny efijery rehefa manao kajy ny toeran'ny horonana. Raha misy isa tokana omena, ny offset dia ampiharina amin'ny lalana ambony sy ambany. Mba hanomezana offset tokana, ambany sy ambony dia omeo zavatra offset: { top: 10 } na offset: { top: 10, bottom: 5 } . Mampiasà asa iray rehefa mila manao kajy dynamique ianao. |
tanjona | mpifidy | node | singa jQuery | ny window zavatra |
Mamaritra ny singa kendrena amin'ny affix. |
.affix(options)
Mampihetsika ny atiny ho votoaty apetaka. Manaiky safidy azo atao object
.
.affix('checkPosition')
Mamerina kajy ny toetry ny affix mifototra amin'ny refy, ny toerana ary ny toeran'ny horonam-boky misy ireo singa mifandraika amin'izany. Ny .affix
, .affix-top
, ary ny .affix-bottom
kilasy dia ampiana na esorina amin'ny atiny mipetaka araka ny fanjakana vaovao. Mila antsoina io fomba io isaky ny miova ny refin'ny atiny apetaka na ny singa kendrena, mba hahazoana antoka ny fipetrahan'ny atiny mipetaka marina.
Ny plugin affix an'ny Bootstrap dia mampiseho hetsika vitsivitsy amin'ny fampifandraisana amin'ny fiasa affix.
Karazana hetsika | Description |
---|---|
affix.bs.affix | Mirehitra avy hatrany ity hetsika ity alohan'ny hametrahana ilay singa. |
affixed.bs.affix | Ity hetsika ity dia alefa aorian'ny fametrahana ilay singa. |
affix-top.bs.affix | Mirehitra avy hatrany ity hetsika ity alohan'ny hametrahana ilay singa-ambony. |
affixed-top.bs.affix | Ity hetsika ity dia alefa aorian'ny fametrahana ny singa-tampony. |
affix-bottom.bs.affix | Mirehitra avy hatrany ity hetsika ity alohan'ny hametrahana ilay singa-ambany. |
affixed-bottom.bs.affix | Ity hetsika ity dia alefa rehefa avy nasiana singa-ambany. |