JavaScript
Etsa hore likarolo tsa Bootstrap li phele ka li-plugins tse fetang leshome le metso e 'meli tsa jQuery. Ba kenye kaofela ha bonolo, kapa ka bonngoe.
Etsa hore likarolo tsa Bootstrap li phele ka li-plugins tse fetang leshome le metso e 'meli tsa jQuery. Ba kenye kaofela ha bonolo, kapa ka bonngoe.
Li-plugins li ka kenyelletsoa ka bonngoe (ho sebelisa *.js
lifaele tsa motho ka mong tsa Bootstrap), kapa kaofela ka nako e le 'ngoe (ho sebelisa bootstrap.js
kapa minified bootstrap.min.js
).
Ka bobeli bootstrap.js
mme bootstrap.min.js
li na le li-plugins tsohle faeleng e le 'ngoe. Kenyelletsa e le 'ngoe feela.
Li-plugins tse ling le likarolo tsa CSS li itšetlehile ka li-plugins tse ling. Haeba u kenyelletsa li-plugins ka bonngoe, etsa bonnete ba hore u hlahloba litšepiso tsena ho litokomane. Hape hlokomela hore li-plugins tsohle li itšetlehile ka jQuery (sena se bolela hore jQuery e tlameha ho kenngoa pele ho lifaele tsa plugin). Ikopanye le ronabower.json
ho bona hore na ke mefuta efe ea jQuery e tšehetsoeng.
U ka sebelisa li-plugins tsohle tsa Bootstrap feela ka har'a markup API ntle le ho ngola mola o le mong oa JavaScript. Ena ke API ea boemo ba pele ba Bootstrap 'me e lokela ho ba maikutlo a hau a pele ha u sebelisa plugin.
Ho boletse joalo, maemong a mang ho ka ba molemo ho tima ts'ebetso ena. Ka hona, re boetse re fana ka bokhoni ba ho tima API ea tšobotsi ea data ka ho lokolla liketsahalo tsohle tse tokomaneng e nang le sebaka sa mabitso data-api
. Sena se shebahala tjena:
Ntle le moo, ho lebisa plugin e itseng, kenyelletsa feela lebitso la plugin joalo ka sebaka sa mabitso hammoho le sebaka sa mabitso sa data-api joalo ka:
Se ke oa sebelisa lintlha tse tsoang ho li-plugins tse ngata nthong e le 'ngoe. Ka mohlala, konopo e ke ke ea ba le ntlha ea lisebelisoa le ho fetola modal. Ho etsa sena, sebelisa ntho e 'ngoe ea ho phuthela.
Hape re lumela hore o lokela ho sebelisa li-plugins tsohle tsa Bootstrap feela ka JavaScript API. Li-API tsohle tsa sechaba ke mekhoa e le 'ngoe, e ka tsamaisoang ka ketane, 'me e khutlisetsa pokello e sebelisitsoeng.
Mekhoa eohle e lokela ho amohela ntho ea boikhethelo, khoele e lebisitseng mokhoa o itseng, kapa letho (e qalang plugin ka boits'oaro ba kamehla):
Plugin e 'ngoe le e' ngoe e boetse e pepesa sehahi sa eona se tala Constructor
setšeng: $.fn.popover.Constructor
. Haeba u batla ho fumana mohlala o itseng oa plugin, e fumane ka kotloloho ho tsoa ho element: $('[rel="popover"]').data('popover')
.
U ka fetola litlhophiso tsa kamehla tsa plugin ka ho fetola Constructor.DEFAULTS
ntho ea plugin:
Ka linako tse ling hoa hlokahala ho sebelisa li-plugins tsa Bootstrap tse nang le meralo e meng ea UI. Maemong ana, ka linako tse ling ho ka ba le likhohlano tsa sebaka sa mabitso. Haeba sena se etsahala, u ka bitsa .noConflict
plugin u lakatsa ho khutlisetsa boleng ba.
Bootstrap e fana ka liketsahalo tsa tloaelo bakeng sa liketso tse ikhethang tsa li-plugins. Ka kakaretso, tsena li tla ka mokhoa o sa feleng le oa nako e fetileng - moo lentsoe le sa feleng (mohlala. show
) le qalisoang qalong ea ketsahalo, 'me sebopeho sa eona sa nako e fetileng sa karolo (mohl. shown
) se hlahisoang ha ketso e phethoa.
Ho tloha ka 3.0.0, liketsahalo tsohle tsa Bootstrap li arotsoe ka mabitso.
Liketsahalo tsohle tse sa feleng li fana ka preventDefault
ts'ebetso. Sena se fana ka bokhoni ba ho emisa ts'ebetso ea ketso pele e qala.
Mofuta oa e 'ngoe le e' ngoe ea li-plugins tsa Bootstrap's jQuery e ka fumaneha ka VERSION
thepa ea sehahi sa plugin. Ka mohlala, bakeng sa plugin ea tooltip:
Li-plugins tsa Bootstrap ha li khutlele morao haholo ha JavaScript e koetsoe. Haeba u tsotella boiphihlelo ba mosebelisi ntlheng ena, sebelisa <noscript>
ho hlalosa boemo (le mokhoa oa ho lumella JavaScript hape) ho basebelisi ba hau, le/kapa eketsa liphoso tsa hau tsa tloaelo.
Bootstrap ha e tšehetse ka molao lilaebrari tsa mokha oa boraro tsa JavaScript joalo ka Prototype kapa jQuery UI. Leha .noConflict
ho na le liketsahalo tse arohaneng le mabitso, ho kanna ha ba le mathata a ho lumellana ao u hlokang ho a lokisa u le mong.
Bakeng sa litlamorao tse bonolo tsa phetoho, kenyelletsa transition.js
hang hammoho le lifaele tse ling tsa JS. Haeba u sebelisa compiled (kapa minified) bootstrap.js
, ha ho hlokahale ho kenyelletsa sena - se se se ntse se le teng.
Transition.js ke mothusi oa mantlha oa transitionEnd
liketsahalo hammoho le emulator ea phetoho ea CSS. E sebelisoa ke li-plugins tse ling ho lekola tšehetso ea phetoho ea CSS le ho ts'oara liphetoho tse leketlileng.
Liphetoho li ka emisoa lefatšeng ka bophara ho sebelisoa snippet e latelang ea JavaScript, e tlamehang ho tla ka mor'a hore transition.js
(kapa bootstrap.js
, bootstrap.min.js
joalo ka ha ho ka ba joalo) e kentsoe:
Li-modal li hlophisitsoe hantle, empa lia tenyetseha, likeletso tsa lipuisano tse nang le ts'ebetso e nyane e hlokahalang le mefokolo e bohlale.
Etsa bonnete ba hore u se ke ua bula modal ha e 'ngoe e ntse e bonahala. Ho hlahisa mefuta e fetang e le 'ngoe ka nako ho hloka khoutu e ikhethileng.
Kamehla leka ho beha khoutu ea modal ea HTML sebakeng sa boemo bo holimo tokomaneng ea hau ho qoba likarolo tse ling tse amang chebahalo le/kapa tšebetso ea modal.
Ho na le litemoso tse ling mabapi le ho sebelisa li-modal ho lisebelisoa tsa mehala. Sheba litokomane tsa rona tsa tšehetso ea sebatli ho fumana lintlha.
Ka lebaka la hore na HTML5 e hlalosa semantics ea eona joang, autofocus
tšobotsi ea HTML ha e na phello ho mekhoa ea Bootstrap. Ho fihlela phello e tšoanang, sebelisa JavaScript e tloaelehileng:
Mokhoa o hlophisitsoeng o nang le hlooho, 'mele, le sete sa liketso botlaseng.
Fetolela modal ka JavaScript ka ho tobetsa konopo e ka tlase. E tla thellela fatše ebe e nyamela ho tloha holimo leqepheng.
Etsa bonnete ba ho eketsa role="dialog"
le aria-labelledby="..."
, ho supa sehlooho sa modal, ho .modal
, le role="document"
ho eona .modal-dialog
ka boeona.
Ho feta moo, o ka fana ka tlhaloso ea puisano ea hau ea modal le aria-describedby
on .modal
.
Ho kenya livideo tsa YouTube ho li-modal ho hloka JavaScript e eketsehileng eseng ho Bootstrap ho emisa ho bapala le tse ling. Sheba poso ena e thusang ea Stack Overflow bakeng sa lintlha tse ling.
Li-modal li na le mefuta e 'meli ea boikhethelo, e fumanehang ka litlelase tsa ho feto-fetoha tse tla beoa ho .modal-dialog
.
Bakeng sa li-modal tse hlahang feela ho e-na le ho nyamela, tlosa .fade
sehlopha ho li-modal markup tsa hau.
Ho nka monyetla ka sistimi ea grid ea Bootstrap ka har'a modal, feela sehlaha .row
s ka hare ho .modal-body
ebe o sebelisa litlelase tse tloaelehileng tsa grid system.
Na u na le lihlopha tsa likonopo tse hlahisang mokhoa o tšoanang, ka litaba tse fapaneng hanyane? Sebelisa event.relatedTarget
le litšobotsi tsa HTMLdata-*
(mohlomong ka jQuery ) ho fetola litaba tsa modal ho latela hore na konopo e tobetse. Sheba litokomane tsa Modal Events bakeng sa lintlha tse mabapi le relatedTarget
,
Modal plugin e fetola litaba tsa hau tse patiloeng ha li batloa, ka likarolo tsa data kapa JavaScript. E boetse e ekelletsa .modal-open
ho <body>
tloleng boits'oaro ba kamehla ba ho phutha 'me e hlahisa .modal-backdrop
ho fana ka sebaka sa ho tobetsa bakeng sa ho leleka mekhoa e bontšitsoeng ha o tobetsa ka ntle ho modal.
Kenya modal ntle le ho ngola JavaScript. Beha data-toggle="modal"
karolo ea taolo, joalo ka konopo, hammoho le data-target="#foo"
kapa href="#foo"
ho shebisa mokhoa o itseng oa ho fetola.
Letsetsa modal ka id myModal
ka mola o le mong oa JavaScript:
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-
, joalo ka data-backdrop=""
.
Lebitso | mofuta | ya kamehla | tlhaloso |
---|---|---|---|
bokamorao | boolean kapa khoele'static' |
'nete | E kenyelletsa karolo ea modal-backdrop. Ntle le moo, hlakisa static boemo ba morao-rao bo sa koaheleng mokhoa oa ho tobetsa. |
keyboard | boolean | 'nete | E koala modal ha konopo ea escape e tobetsoa |
bontsha | boolean | 'nete | E bonts'a modal ha e qala. |
hole | tsela | bohata | Khetho ena e tlositsoe ho tloha v3.3.0 mme e tlositsoe ho v4. Re khothaletsa ho sebelisa template ea lehlakore la bareki kapa moralo o tlamang data, kapa ho letsetsa jQuery.load ka bouena. Haeba URL e hole e fanoe, litaba li tla kengoa hang ka mokhoa oa jQuery |
.modal(options)
E kenya tšebetsong litaba tsa hau joalo ka mokhoa. E amohela khetho ea boikhethelo object
.
.modal('toggle')
E fetola modal ka letsoho. E kgutlela ho motho ya letsetsang pele modal e bontshwa kapa e patilwe (ke hore pele ketsahalo shown.bs.modal
kapa hidden.bs.modal
ketsahalo e etsahala).
.modal('show')
E bula modal ka letsoho. E khutlela ho motho ea letselitseng pele mokha o bonts'oa (ke hore pele shown.bs.modal
ketsahalo e etsahala).
.modal('hide')
E pata modal ka letsoho. E khutlela ho motho ea letselitseng pele mohale o patiloe (ke hore pele hidden.bs.modal
ketsahalo e etsahala).
.modal('handleUpdate')
E lokisa boemo ba modal ho hanyetsa scrollbar haeba motho a ka hlaha, e leng se ka etsang hore modal e tlole ka ho le letšehali.
E hlokahala feela ha bophahamo ba modal bo fetoha ha bo ntse bo bulehile.
Sehlopha sa modal sa Bootstrap se pepesa liketsahalo tse 'maloa tsa ho hokahana le ts'ebetso ea modal.
Liketsahalo tsohle tsa modal li lelekoa ho modal ka boeona (ke hore ho <div class="modal">
).
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
show.bs.modal | Ketsahalo ena e tuka hang hang ha show mokhoa oa mohlala o bitsoa. Haeba e bakoa ke ho tobetsa, ntho e tobelitsoeng e fumaneha e le relatedTarget thepa ea ketsahalo. |
e bonts'itsoeng.bs.modal | Ketsahalo ena e ts'oaroa ha modal e entsoe hore e bonahale ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). Haeba e bakoa ke ho tobetsa, ntho e tobelitsoeng e fumaneha e le relatedTarget thepa ea ketsahalo. |
pata.bs.modal | Ketsahalo ena e lelekoa hang hang ha hide mokhoa oa mohlala o bitsoa. |
patiloeng.bs.modal | Ketsahalo ena e ts'oaroa ha modal e qeta ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
loaded.bs.modal | Ketsahalo ena e lelekoa ha modal e kentse litaba tse sebelisang remote khetho. |
Kenya menyetla ea ho theoha hoo e batlang e le eng kapa eng ka plugin ena e bonolo, ho kenyeletsoa navbar, li-tab le lipilisi.
Ka litšoaneleho tsa data kapa JavaScript, plugin e theohang e fetola litaba tse patiloeng (menu e theohang) ka ho fetola .open
sehlopha lethathamong la batsoali.
Ho lisebelisoa tsa mehala, ho bula ho theoha ho eketsa sebaka .dropdown-backdrop
sa pompo bakeng sa ho koala menyetla ea ho theoha ha o tobetsa ka ntle ho menu, e leng tlhokahalo ea tšehetso e nepahetseng ea iOS. Sena se bolela hore ho tloha ho menu e theohang e bulehileng ho ea ho menu e fapaneng ho hloka pompo e eketsehileng ho mobile.
Tlhokomeliso: Ho data-toggle="dropdown"
tšeptjoa tšobotsi bakeng sa ho koala li-menu tse theohang boemong ba ts'ebeliso, kahoo ke mohopolo o motle ho e sebelisa kamehla.
Kenya data-toggle="dropdown"
sehokelong kapa konopong ho totobetsa ho theoha.
Ho boloka li-URL li ntse li le teng ka likonopo tsa lihokelo, sebelisa data-target
tšobotsi ho fapana le href="#"
.
Letsetsa li-dropdown ka JavaScript:
data-toggle="dropdown"
e ntse e hlokahalaHo sa tsotelehe hore na u letsetsa ho theoha ha hau ka JavaScript kapa ho e-na le hoo u sebelisa data-api, data-toggle="dropdown"
kamehla ho hlokahala hore u be teng karolong ea "trigger" e theoha.
Ha ho letho
$().dropdown('toggle')
E fetola menyetla ea ho theoha ea navbar e fanoeng kapa navigation e nang le li-tabbed.
Liketsahalo tsohle tse theohang li lelekoa ho karolo ea .dropdown-menu
motsoali.
Liketsahalo tsohle tse theohang li na le relatedTarget
thepa, eo boleng ba eona e leng ntho ea toggling ankora.
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
bonts'a.bs.ho theoha | Ketsahalo ena e tuka hang hang ha mokhoa oa mohlala oa pontšo o bitsoa. |
e bonts'itsoeng.bs.ho theoha | Ketsahalo ena e ts'oaroa ha ho theoha ho bonahala ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
pata.bs.ho theoha | Ketsahalo ena e lelekoa hang hang ha mokhoa oa ho pata o se o bitsoa. |
patiloeng.bs.ho theoha | Ketsahalo ena e ts'oaroa ha ho theoha ho felile ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
The ScrollSpy plugin ke ea ho inchafatsa lipheo tsa nav ka bo eona ho ipapisitse le boemo ba moqolo. Tsamaisetsa sebaka se ka tlase ho navbar 'me u shebelle phetoho ea sehlopha se sebetsang. Lintlha tse tlase li tla totobatsoa hape.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi pele ba rekisa qui. Litokelo tsa libaesekele tsa polasi-to-tafola tsa Tumblr eng kapa eng. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui mohlomong ha u e-s'o utloe ka tsona et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork litelu. Litelu tsa Freegan aliqua cupidatat mcsweeney's vero. Cupidatat tse nne loko nisi, ea helvetica nulla carles. Lori ea lijo e nang le tattoo ea cosby sweater, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft biri motlatsi oa keytar deserunt.
Occaecat commodo aliqua deelectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS e ntlafalitse. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable 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 whatever delectus food truck. Sapiente synth id guessnda. Locavore sed helvetica cliche irony, thundercats mohlomong ha u so utloe ka tsona consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat pele ba rekisa, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft biri seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Lihokelo tsa Navbar li tlameha ho ba le lipehelo tsa id tse rarollehang. Ka mohlala, e <a href="#home">home</a>
tlameha ho lumellana le ntho e 'ngoe e DOM e kang <div id="home"></div>
.
:visible
li hlokomolohuoeLintlha tse reriloeng tse sa lumellaneng :visible
le jQuery li tla hlokomolohuoa 'me lintho tse tsamaisanang le tsona li ke ke tsa hlakisoa.
Ho sa tsotelehe mokhoa oa ts'ebetsong, scrollspy e hloka ts'ebeliso ea position: relative;
ntho eo u ntseng u e hloela. Maemong a mangata sena ke <body>
. Ha u scrollspying linthong tse ling ntle le <body>
, etsa bonnete ba hore u na le height
sete le overflow-y: scroll;
ho sebelisoa.
Ho eketsa habonolo boits'oaro ba scrollspy ho navigation ea topbar ea hau, eketsa nthong data-spy="scroll"
eo u batlang ho e hloela (haholo-holo ena e tla ba eona <body>
). Ebe u eketsa data-target
tšobotsi ka ID kapa sehlopha sa karolo ea motsoali ea karolo efe kapa efe ea Bootstrap .nav
.
Kamora ho kenya position: relative;
CSS ea hau, letsetsa scrollspy ka JavaScript:
.scrollspy('refresh')
Ha o sebelisa scrollspy mmoho le ho eketsa kapa ho tlosa likarolo ho tsoa ho DOM, o tla hloka ho letsetsa mokhoa oa ho khatholla joalo ka:
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-
, joalo ka data-offset=""
.
Lebitso | mofuta | ya kamehla | tlhaloso |
---|---|---|---|
offset | palo | 10 | Lipikseli tsa ho theola ho tloha holimo ha ho baloa boemo ba ho tsamaisa. |
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
kenya tshebetsong.bs.scrollpy | Ketsahalo ena e tuka neng kapa neng ha ntho e ncha e kentsoe tšebetsong ke scrollspy. |
Eketsa ts'ebetso ea li-tab e potlakileng, e matla ho fetolela ka har'a liphasejene tsa litaba tsa lehae, esita le ka li-menu tse theohang. Li-tabo tsa Nested ha li tšehetsoe.
Raw denim mohlomong ha u e-s'o utloe ka bona li-jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Plugin ena e atolosa karolo ea ho tsamaea e nang le li-tabbed ho eketsa libaka tse ka khonehang.
Lumella li-tab tse ka khonehang ka JavaScript (tabo e 'ngoe le e' ngoe e hloka ho etsoa ka bonngoe):
O ka kenya li-tab tsa motho ka mong ka litsela tse 'maloa:
O ka kenya ts'ebetso ea "tabo" kapa "pilisi" ntle le ho ngola JavaScript efe kapa efe ka ho hlakisa feela data-toggle="tab"
kapa data-toggle="pill"
ka ntho e itseng. Ho kenyelletsa nav
le nav-tabs
litlelase ho tab ho tla sebelisa setaele sa tabul
ea Bootstrap , ha u ntse u eketsa le litlelase li tla sebelisa setaele sa lipilisi .nav
nav-pills
Ho etsa hore li-tab li nyamele, eketsa .fade
ho e 'ngoe le e 'ngoe .tab-pane
. Letlapa la pele la li-tab le lona le tlameha .in
ho etsa hore litaba tsa pele li bonahale.
$().tab
E kenya tshebetsong karolo ya tab le setshelo sa dikahare. Tab e lokela ho ba le node ea setshelo data-target
kapa e href
lebisitsoeng ho DOM. Mehlaleng e ka holimo, li-tab ke tsa <a>
s tse nang le data-toggle="tab"
litšobotsi.
.tab('show')
E khetha tab e fanoeng ebe e bontša litaba tse amanang le eona. Taba efe kapa efe e neng e khethiloe nakong e fetileng e fetoha e sa khethoang, 'me litaba tse amanang le eona lia patoa. E kgutlela ho moletsi pele fenstere ya tab e bontshwa (ke hore pele shown.bs.tab
ketsahalo e etsahala).
Ha o hlahisa tab e ncha, liketsahalo li tla ka tatellano e latelang:
hide.bs.tab
(tabong ea hajoale e sebetsang)show.bs.tab
(letlapeng le tlang ho bontšoa)hidden.bs.tab
(tabong e fetileng e sebetsang, e ts'oanang le ea hide.bs.tab
ketsahalo)shown.bs.tab
(tabong e sa tsoa hlaha, e ts'oanang le ea show.bs.tab
ketsahalo)Haeba ho se tab e neng e se e ntse e sebetsa, joale the hide.bs.tab
le hidden.bs.tab
liketsahalo li ke ke tsa lelekoa.
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
bontša.bs.tab | Ketsahalo ena e qala ho bonts'a li-tab, empa pele tab e ncha e bontšoa. Sebelisa event.target le event.relatedTarget ho shebisa tab e sebetsang le tab e fetileng e sebetsang (haeba e le teng) ka ho latellana. |
e bonts'itsoeng.bs.tab | Ketsahalo ena e tla hlaha ka mor'a hore tab e hlahisoe. Sebelisa event.target le event.relatedTarget ho shebisa tab e sebetsang le tab e fetileng e sebetsang (haeba e le teng) ka ho latellana. |
pata.bs.tab | Ketsahalo ena e tuka ha tab e ncha e tla bontšoa ('me ka hona tab e fetileng e sebetsang e lokela ho patoa). Sebelisa event.target le event.relatedTarget ho shebisa tab e sebetsang ea hajoale le e ncha e tlang ho sebetsa haufinyane, ka ho latellana. |
patiloeng.bs.tab | Ketsahalo ena e tuka ka mor'a hore ho bontšoe tabo e ncha ('me kahoo tab e fetileng e sebetsang e patiloe). Sebelisa event.target le event.relatedTarget ho shebisa tab e fetileng e sebetsang le tab e ncha e sebetsang, ka ho latellana. |
E bululetsoe ke plugin e ntle haholo ea jQuery.tipsy e ngotsoeng ke Jason Frame; Litlhahiso ke mofuta o ntlafalitsoeng, o sa itšetleheng ka litšoantšo, sebelisa CSS3 bakeng sa lipopae, le litšobotsi tsa data bakeng sa polokelo ea lihlooho tsa lehae.
Lisebelisoa tse nang le lihlooho tsa bolelele ba zero ha li hlahisoe.
Tsamaea holim'a lihokelo tse ka tlase ho bona lintlha tsa lisebelisoa:
Borikhoe bo thata bo latelang keffiyeh mohlomong ha u so utloe ka bona. Photo booth litelu tse tala tsa denim letterpress vegan messenger bag stumptown. Seaparo sa polasi-to-tafola seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparse e na le terry richardson vinyl chambray. Litelu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Ho na le likhetho tse 'nè: holimo, ho le letona, ka tlase, le ho le letšehali.
Ka mabaka a ts'ebetso, Tooltip le Popover data-apis lia khetha ho kena, ho bolelang hore u tlameha ho li qala ka bouena .
Tsela e 'ngoe ea ho qala lisebelisoa tsohle tse leqepheng e tla ba ho li khetha ka data-toggle
tšobotsi ea tsona:
plugin ea tooltip e hlahisa litaba le markup ha ho hlokahala, 'me ka ho sa feleng e beha malebela ka mor'a ntho ea eona ea ho qala.
Qala sesebelisoa ka JavaScript:
Letšoao le hlokahalang bakeng sa sesebelisoa ke data
tšobotsi feela 'me title
ho karolo ea HTML u lakatsa ho ba le sesebelisoa. Thepa e hlahisitsoeng ea sesebelisoa e bonolo, leha e hloka boemo (ka kamehla, e behiloeng top
ke plugin).
Ka nako e 'ngoe u batla ho kenya sesebelisoa ho hyperlink e koahelang mela e mengata. Boitšoaro bo sa lekanyetsoang ba plugin ea tooltip ke ho e beha bohareng ka mokhoa o otlolohileng le o otlolohileng. Eketsa white-space: nowrap;
liankora tsa hau ho qoba sena.
Ha u sebelisa lisebelisoa tsa lisebelisoa ka har'a a .btn-group
kapa .input-group
, kapa linthong tse amanang le tafole ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), u tla tlameha ho totobatsa khetho container: 'body'
(e ngotsoeng ka tlase) ho qoba litla-morao tse sa batleheng (joalo ka ntho e ntseng e hola ka bophara le/ kapa ho lahleheloa ke likhutlo tse chitja ha sesebelisoa sa thulusi se hlongoa).
Bakeng sa basebelisi ba tsamaeang ka keyboard, haholo-holo basebelisi ba litheknoloji tse thusang, o lokela ho eketsa lintlha tsa lisebelisoa ho lisebelisoa tse shebaneng le keyboard joalo ka lihokelo, taolo ea liforomo, kapa ntho efe kapa efe e sa reroang e nang le tabindex="0"
tšobotsi.
Ho kenya sesebelisoa ho ntho disabled
kapa .disabled
element, kenya elemente ka hare ho a <div>
'me u e sebelise ho eona <div>
.
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-
, joalo ka data-animation=""
.
Lebitso | Mofuta | Ea kamehla | Tlhaloso |
---|---|---|---|
animation | boolean | 'nete | Kenya phetoho ea CSS fade ho tooltip |
setshelo | khoele | bohata | bohata | E kopanya ntlha ea lisebelisoa ho ntho e itseng. Mohlala |
lieha | nomoro | ntho | 0 | Ho lieha ho bonts'a le ho pata ntlha ea lisebelisoa (ms) - ha e sebetse mofuteng oa ho kenya letsoho Haeba nomoro e fanoe, ho lieha ho sebelisoa ho pata/show ka bobeli Sebopeho sa ntho ke: |
html | boolean | bohata | Kenya HTML karolong ea lisebelisoa. Haeba e le leshano, mokhoa oa jQuery text o tla sebelisoa ho kenya litaba ho DOM. Sebelisa mongolo haeba u tšoenyehile ka litlhaselo tsa XSS. |
ho beha | khoele | tshebetso | 'holimo' | Mokhoa oa ho beha sesebelisoa - top | tlase | le letšehali | hantle | koloi. Ha ts'ebetso e sebelisoa ho fumana hore na e behiloe hokae, e bitsoa ka node ea DOM e nang le "tooltip" e le khang ea eona ea pele, 'me karolo e qalang ea DOM e le ea bobeli. Moelelo |
mokhethi | khoele | bohata | Haeba ho fanoe ka sekhetho, lintlha tsa lisebelisoa li tla abeloa lipehelo tse boletsoeng. Ha e le hantle, sena se sebelisetsoa ho nolofalletsa litaba tsa HTML tse matla hore li be le lisebelisoa tsa lisebelisoa. Bona sena le mohlala o rutang . |
template | khoele | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML ea mantlha eo u ka e sebelisang ha u theha sesebelisoa. The tooltip's
Karolo e ka ntle ea wrapper e lokela ho ba le |
sehlooho | khoele | tshebetso | '' | Boleng ba sehlooho sa kamehla haeba Haeba mosebetsi o fanoe, o tla bitsoa ka |
qhoqhoa | khoele | 'hover focus' | Mokhoa oa lisebelisoa o qala joang - tobetsa | hloella | tsepamisa | tataiso. U ka 'na ua fetisa li-triggers tse ngata; di arole ka sebaka. manual e ke ke ea kopanngoa le ntho leha e le efe e qalang. |
boema-kepe | khoele | ntho | tshebetso | {sekhetho: 'mele', padding: 0} | E boloka ntlha ea lisebelisoa ka har'a meeli ea ntho ena. Mohlala: Haeba ts'ebetso e fanoe, e bitsoa le "triggering element DOM node" e le khang ea eona feela. Moelelo |
Likhetho tsa lisebelisoa tsa motho ka mong li ka hlalosoa ka tšebeliso ea lintlha, joalo ka ha ho hlalositsoe ka holimo.
$().tooltip(options)
E hokela sebatli sa lithulusi pokellong ea lintho.
.tooltip('show')
E senola karolo ea lisebelisoa. E kgutlela ho moletsi pele thulusi e bontshwa (ke hore pele shown.bs.tooltip
ketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa. Lisebelisoa tse nang le lihlooho tsa bolelele ba zero ha li hlahisoe.
.tooltip('hide')
E pata ntlha ea lisebelisoa. E khutlela ho ea letselitseng pele sesebelisoa se patiloe (ke hore pele hidden.bs.tooltip
ketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa.
.tooltip('toggle')
E fetola ntlha ea lisebelisoa. E khutlela ho ea letselitseng pele sesebelisoa se bontšoa kapa se patiloe (ke hore pele ketsahalo shown.bs.tooltip
kapa hidden.bs.tooltip
ketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa.
.tooltip('destroy')
E pata le ho senya ntlha ea lisebelisoa. Litlhahiso tse sebelisang kemiso (tse entsoeng ho sebelisoa khetho selector
) li ke ke tsa senngoa ka bonngoe holima lintho tse qalang.
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
bonts'a.bs.tooltip | Ketsahalo ena e tuka hang hang ha show mokhoa oa mohlala o bitsoa. |
bontshiweng.bs.tooltip | Ketsahalo ena e ts'oaroa ha sesebelisoa sa lisebelisoa se bonahalitsoe ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
pata.bs.tooltip | Ketsahalo ena e lelekoa hang hang ha hide mokhoa oa mohlala o bitsoa. |
patiloeng.bs.tooltip | Ketsahalo ena e ts'oaroa ha sesebelisoa se qeta ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
kenya.bs.tooltip | Ketsahalo ena e lelekoa ka mor'a show.bs.tooltip ketsahalo ea ha thempleite ea tooltip e kentsoe ho DOM. |
Eketsa likoahelo tse nyane tsa litaba, joalo ka tse ho iPad, ho karolo efe kapa efe bakeng sa tlhaiso-leseling ea bobeli ea matlo.
Li-Popovers tseo sehlooho le litaba tsa tsona li leng bolelele ba lefela ha ho mohla li hlahisoang.
Popovers e hloka hore plugin ea tooltip e kenyellelitsoe mofuta oa hau oa Bootstrap.
Ka mabaka a ts'ebetso, Tooltip le Popover data-apis lia khetha ho kena, ho bolelang hore u tlameha ho li qala ka bouena .
Mokhoa o mong oa ho qala li-popovers tsohle leqepheng e tla ba ho li khetha ho latela data-toggle
semelo sa tsona:
Ha u sebelisa li-popovers linthong tse ka hare ho a .btn-group
kapa .input-group
, kapa linthong tse amanang le tafole ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), u tla tlameha ho hlakisa khetho container: 'body'
(e ngotsoeng ka tlase) ho qoba litla-morao tse sa batleheng (joalo ka ntho e ntseng e hola ka bophara le/ kapa ho lahleheloa ke likhutlo tsa eona tse chitja ha popover e qala).
Ho eketsa popover ho ntho disabled
kapa .disabled
element, kenya elemente ka hare ho a <div>
ebe u sebelisa popover ho seo <div>
ho fapana le hoo.
Ka nako e 'ngoe u batla ho eketsa popover ho hyperlink e koahelang mela e mengata. Boitšoaro bo sa lekanyetsoang ba plugin ea popover ke ho e beha sebakeng se otlolohileng le se otlolohileng. Eketsa white-space: nowrap;
liankora tsa hau ho qoba sena.
Ho na le likhetho tse 'nè: holimo, ho le letona, ka tlase, le ho le letšehali.
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.
Sebelisa focus
trigger ho leleka li-popover ha motho a penya ka lekhetlo le latelang.
Bakeng sa boits'oaro bo nepahetseng ba sebatli le sethala, o tlameha ho sebelisa tag <a>
, eseng<button>
tag, hape o tlameha ho kenyelletsa role="button"
le tabindex
litšobotsi.
Lumella li-popover ka JavaScript:
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-
, joalo ka data-animation=""
.
Lebitso | Mofuta | Ea kamehla | Tlhaloso |
---|---|---|---|
animation | boolean | 'nete | Kenya phetoho ea CSS fade ho popover |
setshelo | khoele | bohata | bohata | E eketsa popover ho element e itseng. Mohlala |
dikahare | khoele | tshebetso | '' | Boleng ba litaba bo ka rekoang haeba Haeba ts'ebetso e fanoe, e tla bitsoa ka |
lieha | nomoro | ntho | 0 | Ho lieha ho bonts'a le ho pata popover (ms) - ha e sebetse ho mofuta oa mochini oa ho qala Haeba nomoro e fanoe, ho lieha ho sebelisoa ho pata/show ka bobeli Sebopeho sa ntho ke: |
html | boolean | bohata | Kenya HTML ho popover. Haeba e le leshano, mokhoa oa jQuery text o tla sebelisoa ho kenya litaba ho DOM. Sebelisa mongolo haeba u tšoenyehile ka litlhaselo tsa XSS. |
ho beha | khoele | tshebetso | 'ho lokile' | Mokhoa oa ho beha popover - holimo | tlase | le letšehali | hantle | koloi. Ha ts'ebetso e sebelisoa ho fumana sebaka sa ho beoa, e bitsoa le node ea popover DOM e le khang ea eona ea pele le ntho e qalang ea DOM node e le ea bobeli. Boemo |
mokhethi | khoele | bohata | Haeba ho fanoe ka khetho, lintho tsa popover li tla abeloa ho sepheo se boletsoeng. Ha e le hantle, sena se sebelisetsoa ho nolofalletsa litaba tsa HTML tse matla hore li eketsoe ke popover. Bona sena le mohlala o rutang . |
template | khoele | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
HTML ea mantlha eo u ka e sebelisang ha u theha popover. Li-popover li Li-popover li
Karolo e ka ntle ea wrapper e lokela ho ba le |
sehlooho | khoele | tshebetso | '' | Boleng ba sehlooho sa kamehla haeba Haeba ts'ebetso e fanoe, e tla bitsoa ka |
qhoqhoa | khoele | 'tobetsa' | Popover e qala joang - tlanya | hloella | tsepamisa | tataiso. U ka 'na ua fetisa li-triggers tse ngata; di arole ka sebaka. manual e ke ke ea kopanngoa le ntho leha e le efe e qalang. |
boema-kepe | khoele | ntho | tshebetso | {sekhetho: 'mele', padding: 0} | E boloka popover ka har'a meeli ea ntho ena. Mohlala: Haeba ts'ebetso e fanoe, e bitsoa le "triggering element DOM node" e le khang ea eona feela. Boemo |
Likhetho bakeng sa li-popovers ka bomong li ka hlalosoa ka tšebeliso ea litšobotsi tsa data, joalo ka ha ho hlalositsoe ka holimo.
$().popover(options)
E qala popovers bakeng sa pokello ea lintho.
.popover('show')
E hlahisa poover ea element. E khutlela ho ea letselitseng pele popover e bonts'oa (ke hore pele shown.bs.popover
ketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo. Li-Popovers tseo sehlooho le litaba tsa tsona li leng bolelele ba lefela ha ho mohla li hlahisoang.
.popover('hide')
E pata popo ea lintho. E khutlela ho ea letselitseng pele popover e patiloe (ke hore pele hidden.bs.popover
ketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo.
.popover('toggle')
E fetola popover ea element. E khutlela ho ea letselitseng pele popover e bonts'oa kapa e patiloe (ke hore pele ketsahalo shown.bs.popover
kapa hidden.bs.popover
ketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo.
.popover('destroy')
E pata le ho senya popover ea element. Li-Popovers tse sebelisang moifo (tse entsoeng ho sebelisoa khetho selector
) li ke ke tsa senngoa ka bonngoe ho latela likarolo tse qalang.
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
bonts'a.bs.popover | Ketsahalo ena e tuka hang hang ha show mokhoa oa mohlala o bitsoa. |
bontshitsweng.bs.popover | Ketsahalo ena e lelekoa ha popover e se e bonahala ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
pata.bs.popover | Ketsahalo ena e lelekoa hang hang ha hide mokhoa oa mohlala o bitsoa. |
patiloeng.bs.popover | Ketsahalo ena e ts'oaroa ha popover e qetile ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
kentse.bs.popover | Ketsahalo ena e lelekoa kamora show.bs.popover ketsahalo ea ha template ea popover e kentsoe ho DOM. |
Kenya ts'ebetso ea ho tlosa melaetsa eohle ea tlhokomeliso ka plugin ena.
Ha o sebelisa .close
konopo, e tlameha ho ba ngoana oa pele .alert-dismissible
'me ho se be le sengoloa se ka tlang pele ho eona ka har'a markup.
Fetola sena le sane ebe o leka hape. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Kenya feela data-dismiss="alert"
konopo ea hau ea ho koala ho fana ka ts'ebetso e haufi ea tlhokomeliso. Ho koala tlhokomeliso ho e tlosa ho DOM.
Ho etsa hore litemoso tsa hau li sebelise animation ha u koala, etsa bonnete ba hore li na le .fade
le.in
litlelase tse seng li sebelisitsoe ho tsona.
$().alert()
E fana ka tlhokomeliso bakeng sa diketsahalo tsa ho tobetsa lintho tse hlahang tse nang le data-dismiss="alert"
tšobotsi. (Ha ho hlokahale ha o sebelisa data-api's auto-initialization.)
$().alert('close')
E koala tlhokomeliso ka ho e tlosa ho DOM. Haeba li- .fade
class .in
li le teng ho element, tlhokomeliso e tla nyamela pele e tlosoa.
Sesebelisoa sa tlhokomeliso sa Bootstrap se pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea tlhokomeliso.
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
koala.bs.temoso | Ketsahalo ena e tuka hang hang ha close mokhoa oa mohlala o bitsoa. |
e koetsoeng.bs.temoso | Ketsahalo ena e ts'oaroa ha tlhokomeliso e koetsoe (e tla emela hore liphetoho tsa CSS li phethehe). |
Etsa ho eketsehileng ka likonopo. Konopo ea ho laola e bolela kapa etsa lihlopha tsa likonopo bakeng sa likarolo tse ling tse kang lithulusi.
Firefox e phehella maemo a taolo ea sebopeho (bofofu le bofokoli) hohle maqepheng a mangata . Tharollo ea sena ke ho e sebelisa autocomplete="off"
. Sheba bug ea Mozilla #654072 .
Eketsa data-loading-text="Loading..."
ho sebelisa boemo ba ho kenya konopo.
Sebopeho sena ha se sa sebetsa ho tloha ka v3.3.5 mme se tlositsoe ho v4.
Molemong oa pontšo ena, re sebelisa data-loading-text
'me $().button('loading')
, empa ha se eona feela naha eo u ka e sebelisang. Sheba ho eketsehileng ka sena ka tlase $().button(string)
litokomaneng .
Eketsa data-toggle="button"
ho kenya tshebetsong toggling ho konopo e le 'ngoe.
.active
learia-pressed="true"
Bakeng sa likonopo tse fetoletsoeng pele, u tlameha ho eketsa .active
sehlopha le aria-pressed="true"
semelo ho button
uena.
Eketsa lebokoseng data-toggle="buttons"
le .btn-group
nang le li-checkbox kapa lisebelisoa tsa seea-le-moea ho nolofalletsa ho fetola mekhoa ea bona.
.active
Bakeng sa likhetho tse khethiloeng esale pele, u tlameha ho eketsa .active
sehlopha ho tse kenyelletsoang ka label
bouena.
Haeba boemo bo tšoailoeng ba konopo ea lebokose la ho hlahloba bo ka nchafatsoa ntle le ho thunya click
ketsahalo e konopong (mohlala, ka <input type="reset">
kapa ka ho seta checked
thepa ea kenyeletso), o tla hloka ho fetolela .active
sehlopha ka label
bouena.
$().button('toggle')
E fetola boemo ba push. E fa konopo ponahalo ea hore e kentsoe tšebetsong.
$().button('reset')
Seta bocha boemo ba konopo - fetola mongolo ho ea ho mongolo oa mantlha. Mokhoa ona ha o asynchronous 'me o khutla pele ho seta ho felile.
$().button(string)
Fetola mongolo ho boemo bofe kapa bofe ba mongolo bo hlalositsoeng.
Flexible plugin e sebelisang lihlopha tse 'maloa bakeng sa boitšoaro bo bonolo ba ho fetola.
Ho putlama ho hloka hore plugin ea liphetoho e kenyellelitsoe mofuta oa hau oa Bootstrap.
Tobetsa likonopo tse ka tlase ho bontša le ho pata ntho e 'ngoe ka liphetoho tsa sehlopha:
.collapse
e pata litaba.collapsing
e sebelisoa nakong ea liphetoho.collapse.in
e bontsha dikahareU ka sebelisa sehokelo se nang le href
tšobotsi, kapa konopo e nang le data-target
tšobotsi. Maemong ana ka bobeli, ho data-toggle="collapse"
hlokahala.
Eketsa tloaelo ea ho putlama ho theha accordion ka karolo ea phanele.
Hape hoa khoneha ho fapanyetsana .panel-body
s le .list-group
s.
Etsa bonnete ba hore o eketsa aria-expanded
karolo ea taolo. Tšobotsi ena e hlalosa ka ho hlaka boemo ba hona joale ba ntho e ka putlamang ho libali tsa skrini le lisebelisoa tse ling tse thusang. Haeba elemente e putlang e koetsoe ka mokhoa oa kamehla, e lokela ho ba le boleng ba aria-expanded="false"
. Haeba u setehile hore ntho e ka phuthoang e buloe ka mokhoa oa kamehla u sebelisa in
sehlopha, beha aria-expanded="true"
taolong. Plugin e tla fetola tšobotsi ena ka bo eona ho latela hore na ntho e putlahang e butsoe kapa che.
Ho feta moo, haeba karolo ea hau ea taolo e shebile ntho e le 'ngoe e ka putlamang - ke hore, data-target
tšobotsi e supa motho ea id
khethang - o ka eketsa aria-controls
tšobotsi e 'ngoe ho karolo ea taolo, e nang le id
ntho e putlang. Babali ba skrine ba sejoale-joale le mahlale a thusang a tšoanang a sebelisa tšobotsi ena ho fa basebelisi likhutšoane tse ling tsa ho ea ka kotloloho ho ntho e putlang ka boyona.
Plugin ea ho putlama e sebelisa lihlopha tse 'maloa ho sebetsana le ho phahamisa boima:
.collapse
e pata litaba.collapse.in
e bontsha dikahare.collapsing
e eketsoa ha phetoho e qala, mme e tlosoe ha e felaLihlopha tsena li ka fumanoa ho component-animations.less
.
Kenya feela data-toggle="collapse"
le a data-target
ho element ho fana ka taolo ea ntho e putlahang. data-target
Tšobotsi e amohela khetho ea CSS eo o ka sebelisang ho putlama ho eona . Etsa bonnete ba hore o kenyelletsa sehlopha collapse
ho ntho e putlang. Haeba u rata hore e bulehe ka mokhoa o tloaelehileng, eketsa sehlopha sa tlatsetso in
.
Ho kenya taolo ea sehlopha se kang accordion taolong e putlang, eketsa tšobotsi ea data data-parent="#selector"
. Sheba demo ho bona sena se sebetsa.
Lumella ka letsoho ka:
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-
, joalo ka data-parent=""
.
Lebitso | mofuta | ya kamehla | tlhaloso |
---|---|---|---|
motsoadi | mokhethi | bohata | Haeba ho fanoe ka khetho, likarolo tsohle tse ka putlamang tlas'a motsoali ea boletsoeng li tla koaloa ha ntho ena e bonohang e bontšoa. (e ts'oanang le boits'oaro ba moetlo oa accordion - sena se ipapisitse le panel sehlopha) |
toggle | boolean | 'nete | E fetola ntho e ka putlamang kopong |
.collapse(options)
E kenya tšebetsong litaba tsa hau joalo ka ntho e ka putlamang. E amohela khetho ea boikhethelo object
.
.collapse('toggle')
E fetolela ntho e putlahang hore e bontšoe kapa e patiloe. E khutlela ho moletsi pele ntho e putlahang e bonts'oa kapa e patiloe (ke hore pele ketsahalo shown.bs.collapse
kapa hidden.bs.collapse
ketsahalo e etsahala).
.collapse('show')
E bonts'a ntho e putlahang. E khutlela ho ea letselitseng pele ntho e putlang e bonts'oa (ke hore pele shown.bs.collapse
ketsahalo e etsahala).
.collapse('hide')
E pata ntho e putlang. E khutlela ho ea letselitseng pele ntho e putlang e patiloe (ke hore pele hidden.bs.collapse
ketsahalo e etsahala).
Sehlopha sa ho putlama sa Bootstrap se pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea ho putlama.
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
bontša.bs. putlama | Ketsahalo ena e tuka hang hang ha show mokhoa oa mohlala o bitsoa. |
e bontshitsweng.bs.e putlama | Ketsahalo ena e ts'oaroa ha ntho e putlama e bonahalitsoe ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
pata.bs. putlama | Ketsahalo ena e lelekoa hang-hang ha hide mokhoa o bitsoa. |
patiloeng.bs.roha | Ketsahalo ena e ts'oaroa ha ntho e putlamang e patetsoe mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
Karolo ea li-slideshow bakeng sa ho palama libaesekele ho pholletsa le likarolo, joalo ka carousel. Li-carousels tse halikiloeng ha li tšehetsoe.
Karolo ea carousel hangata ha e tsamaellane le maemo a phihlello. Haeba o hloka ho ikamahanya le maemo, ka kopo, nahana ka likhetho tse ling tsa ho hlahisa litaba tsa hau.
Bootstrap e sebelisa CSS3 feela bakeng sa lipopae tsa eona, empa Internet Explorer 8 & 9 ha e tšehetse thepa e hlokahalang ea CSS. Kahoo, ha ho na li-animation tsa phetoho ea li-slide ha u sebelisa libatli tsena. Re nkile qeto ka boomo ea hore re se ke ra kenyelletsa liphoso tse thehiloeng ho jQuery bakeng sa liphetoho.
Sehlopha .active
se hloka ho kenyelletsoa ho e 'ngoe ea li-slide. Ho seng joalo, carousel e ke ke ea bonahala.
Li -class .glyphicon .glyphicon-chevron-left
le .glyphicon .glyphicon-chevron-right
li-class ha li hlokehe bakeng sa taolo. Bootstrap e fana ka mekhoa .icon-prev
e .icon-next
meng e hlakileng ea unicode.
Kenya litlhaloso ho li-slide tsa hau habonolo ka .carousel-caption
karolo e ka har'a .item
. Beha hoo e ka bang HTML efe kapa efe ea boikhethelo ka har'a moo 'me e tla ikamahanya le ho hlophisoa ka bo eona.
Li-carousel li hloka ts'ebeliso ea id
sets'oants'o se ka ntle (the .carousel
) hore litsamaiso tsa carousel li sebetse hantle. Ha u eketsa li-carousel tse ngata, kapa ha u fetola carousel's id
, etsa bonnete ba hore u ntlafatsa litsamaiso tse amehang.
Sebelisa litšobotsi tsa data ho laola boemo ba carousel habonolo. data-slide
e amohela mantsoe a sehlooho prev
kapa next
, e fetolang boemo ba slide ho ipapisitse le boemo ba hona joale. Ntle le moo, sebelisa data-slide-to
ho fetisa index ea li-slide e tala ho carousel data-slide-to="2"
, e fetolang boemo ba li-slide ho index e itseng e qalang ka 0
.
Tšobotsi data-ride="carousel"
e sebelisoa ho tšoaea carousel e le e phelang ho qala ka palo ea maqephe. E ke ke ea sebelisoa hammoho le (ho sa hlokahale le ho sa hlokahale) ho qalisoa ka ho hlaka ha JavaScript ea carousel e tšoanang.
Letsetsa carousel ka letsoho ka:
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-
, joalo ka data-interval=""
.
Lebitso | mofuta | ya kamehla | tlhaloso |
---|---|---|---|
karohano | palo | 5000 | Nako ea ho lieha pakeng tsa ho palama ntho ka bo eona. Haeba e le leshano, carousel e ke ke ea potoloha ka bo eona. |
kgefutsa | khoele | lefeela | "tsamaea" | Ha e setetswe ho "hover" , e emisa ho palama baesekele ya carousel mouseenter ebe e ntshetsapele baesekele ya carousel ka mouseleave . Haeba e setiloe ho null , ho soaela holim'a carousel ho ke ke ha e emisa. |
thatela | boolean | 'nete | Hore na carousel e lokela ho potoloha ka ho sa feleng kapa e eme ka thata. |
keyboard | boolean | 'nete | Hore na carousel e lokela ho arabela liketsahalong tsa keyboard. |
.carousel(options)
E qala carousel ka khetho ea boikhethelo object
ebe e qala ho palama lintho.
.carousel('cycle')
E potoloha ka har'a lintho tsa carousel ho tloha ho le letšehali ho ea ho le letona.
.carousel('pause')
E emisa carousel ho palama baesekele ka har'a lintho.
.carousel(number)
E potoloha carousel ho foreime e itseng (0 e thehiloeng, e ts'oanang le lethathamo).
.carousel('prev')
Lipotoloho ho ea nthong e fetileng.
.carousel('next')
Lipotoloho ho ea nthong e latelang.
Sehlopha sa carousel sa Bootstrap se pepesa liketsahalo tse peli tsa ho hokahana le ts'ebetso ea carousel.
Liketsahalo tsena ka bobeli li na le litšobotsi tse latelang:
direction
: Tsela eo carousel e thellang ho eona (ebang ke "left"
kapa "right"
).relatedTarget
: Karolo ea DOM e ntseng e theoleloa sebakeng e le eona ntho e sebetsang.Liketsahalo tsohle tsa carousel li thunngoa ho carousel ka boeona (ke hore ho <div class="carousel">
).
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
slide.bs.carousel | Ketsahalo ena e tuka hang hang ha slide mokhoa oa mohlala o sebelisoa. |
slid.bs.carousel | Ketsahalo ena e thunngoa ha carousel e phethela phetoho ea eona ea li-slide. |
Affix plugin e bulela position: fixed;
le ho tima, e etsisa phello e fumanoang ka position: sticky;
. Subnavigation e ka ho le letona ke setšoantšo se phelang sa plugin ea affix.
Sebelisa plugin ea affix ka litšobotsi tsa data kapa ka letsoho ka JavaScript ea hau. Maemong ana ka bobeli, o tlameha ho fana ka CSS bakeng sa boemo le bophara ba litaba tse khomaretsoeng.
Tlhokomeliso: Se ke oa sebelisa plugin ea affix ho element e fumanehang sebakeng se batlang se eme, joalo ka kholomo e huloang kapa e sutumelitsoeng, ka lebaka la phoso ea Safari rendering bug .
Affix plugin e fetoha lipakeng tsa lihlopha tse tharo, e 'ngoe le e 'ngoe e emela boemo bo itseng: .affix
, .affix-top
, le .affix-bottom
. U tlameha ho fana ka litaele, ntle le position: fixed;
on .affix
, bakeng sa litlelase tsena u le mong (o ikemetseng oa plugin ena) ho sebetsana le maemo a nnete.
Mona ke kamoo plugin ea affix e sebetsang kateng:
.affix-top
ho bonts'a hore element e maemong a eona a holimo haholo. Mothating ona ha ho hlokahale boemo ba CSS..affix
nkeloang sebaka .affix-top
le ho seta position: fixed;
(ho fanoe ke Bootstrap's CSS)..affix
ka .affix-bottom
. Kaha li-offsets ke tsa boikhethelo, ho beha e 'ngoe ho hloka hore u behe CSS e nepahetseng. Tabeng ena, eketsa position: absolute;
ha ho hlokahala. Plugin e sebelisa tšobotsi ea data kapa khetho ea JavaScript ho fumana hore na e beha ntlha hokae ho tloha moo.Latela mehato e ka holimo ho seta CSS ea hau bakeng sa e 'ngoe ea likhetho tse ka tlase.
Ho eketsa habonolo boitšoaro ba affix ho ntho efe kapa efe, eketsa feela data-spy="affix"
ntho eo u batlang ho e hloela. Sebelisa li-offsets ho hlalosa nako ea ho fetola pinning ea element.
Letsetsa plugin ea affix ka JavaScript:
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-
, joalo ka data-offset-top="200"
.
Lebitso | mofuta | ya kamehla | tlhaloso |
---|---|---|---|
offset | nomoro | tshebetso | ntho | 10 | Lipikselse tsa ho theola skrineng ha ho baloa hore na sebaka sa moqolo ke sefe. Haeba ho fanoe ka nomoro e le 'ngoe, offset e tla sebelisoa ka litsela tse ka holimo le tse ka tlaase. Ho fana ka e ikhethang, tlase le holimo offset fana feela ka ntho offset: { top: 10 } kapa offset: { top: 10, bottom: 5 } . Sebelisa tšebetso ha u hloka ho bala offset ka matla. |
sepheo | mokhethi | node | jQuery element | window ntho _ |
E totobatsa ntlha e lebisitsoeng ho eona ea affix. |
.affix(options)
E kenya tšebetsong litaba tsa hau joalo ka litaba tse khomaretsoeng. E amohela khetho ea boikhethelo object
.
.affix('checkPosition')
E bala bocha boemo ba affix ho ipapisitsoe le boholo, boemo, le boemo ba moqolo ba likarolo tse amehang. The .affix
, .affix-top
, and .affix-bottom
class li eketsoa kapa li tlosoa ho litaba tse khomaretsoeng ho latela boemo bo bocha. Mokhoa ona o hloka ho bitsoa neng kapa neng ha litekanyo tsa litaba tse khomaretsoeng kapa ntho eo ho shebiloeng e fetoloa, ho netefatsa boemo bo nepahetseng ba litaba tse khomaretsoeng.
Bootstrap's affix plugin e pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea affix.
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
hlomamisa.bs.hlomathisa | Ketsahalo ena e tuka hang hang pele element e khomaretsoe. |
hlohlelletsoa.bs.khomaretsa | Ketsahalo ena e lelekoa ka mor'a hore element e hlomathisoe. |
hlomamisa-ka holimo.bs.hlomela | Ketsahalo ena e tuka hang hang pele element e behiloe holimo. |
hlohlelletsoa-ka holimo.bs.affix | Ketsahalo ena e ts'oaroa ka mor'a hore element e behoe holimo. |
khomaretsa-tlase.bs.khoketsa | Ketsahalo ena e tuka hang hang pele element e behiloe-tlase. |
khomaretse-tlase.bs.khomaretsa | Ketsahalo ena e lelekoa ka mor'a hore element e behoe ka tlase. |