JavaScript
Keen qaybaha Bootstrap nolosha in ka badan darsin caado ah oo jQuery ah. Si fudud ugu dar dhamaantood, ama mid mid.
Keen qaybaha Bootstrap nolosha in ka badan darsin caado ah oo jQuery ah. Si fudud ugu dar dhamaantood, ama mid mid.
Plugins-ka si gaar ah ayaa loogu dari karaa (iyadoo la isticmaalayo *.js
faylalka gaarka ah ee Bootstrap), ama dhammaan hal mar (adoo la isticmaalayo bootstrap.js
ama la yareeyay bootstrap.min.js
).
Labaduba waxay bootstrap.js
ka bootstrap.min.js
kooban yihiin dhammaan plugins hal fayl. Ku dar hal kaliya.
Qaybaha qaar iyo qaybaha CSS waxay ku xidhan yihiin plugins kale. Haddii aad si gaar ah ugu darto plugins, hubi inaad hubiso waxyaalahan ku-tiirsanaanta dukumentiyada. Sidoo kale ogow in dhammaan pluginsku ay ku xiran yihiin jQuery (taasi waxay ka dhigan tahay jQuery waa in lagu daraa ka hor faylasha plugin). Kala tashobower.json
si aad u aragto noocyada jQuery ee la taageeray.
Waxaad isticmaali kartaa dhammaan Bootstrap plugins adiga oo isticmaalaya API calaamadaynta adiga oo aan qorin hal xariiq oo JavaScript ah. Kani waa API-ga fasalka koowaad ee Bootstrap waana inuu noqdaa tixgelintaada ugu horreysa markaad isticmaalayso plugin.
Taasi waxay tidhi, xaaladaha qaarkood waxa laga yaabaa in la jeclaysto in la damiyo shaqadan. Sidaa darteed, waxaanu sidoo kale bixinaa awooda lagu curyaaminayo sifada xogta API anagoo ka saarayna dhammaan dhacdooyinka dukumeentiga ku magacaaban data-api
. Tani waxay u egtahay sidan:
Haddii kale, si loo beegsado plugin gaar ah, kaliya ku dar magaca plugin-ka oo ah meel magac ah oo ay la socoto xogta-api namespace sidan oo kale:
Ha isticmaalin sifada xogta laga soo qaatay plugins badan oo isku mid ah. Tusaale ahaan, badhanku labaduba ma yeelan karaan qalab wax lagu xidho oo beddelaan modal. Si taas loo gaaro, isticmaal walxaha duubista.
Waxaan sidoo kale aaminsanahay inaad awood u leedahay inaad isticmaasho dhammaan Bootstrap plugins iyada oo keliya JavaScript API. Dhammaan API-yada dadwaynaha waa hal, habab la silsiladi karo, oo soo celi ururinta lagu dhaqmay.
Dhammaan hababka waa in ay aqbalaan shay ikhtiyaari ikhtiyaari ah, xadhig bartilmaameed u ah hab gaar ah, ama waxba (kaas oo bilaabaya plugin leh dabeecad aan caadi ahayn):
Plugin kasta waxa kale oo uu soo bandhigaa dhisaha ceeriin ee Constructor
guriga: $.fn.popover.Constructor
. Haddii aad jeclaan lahayd inaad hesho tusaale plugin gaar ah, si toos ah uga soo celi curiyaha: $('[rel="popover"]').data('popover')
.
Waxaad ka beddeli kartaa habaynta caadiga ah ee plugin adiga oo wax ka beddelaya Constructor.DEFAULTS
shayga plugin:
Mararka qaarkood waa lagama maarmaan in la isticmaalo bootstrap plugins oo leh qaabab kale oo UI ah. Duruufahaan, isku dhacyada meel magac ayaa marmar dhici kara. Haddii tani dhacdo, waxaad wici .noConflict
kartaa plugin-ka aad rabto inaad dib u soo celiso qiimaha.
Bootstrap waxay siisaa dhacdooyin caado u ah inta badan ficilada gaarka ah ee plugins. Guud ahaan, kuwani waxay ku yimaadaan qaab aan dhammaad lahayn oo hore uga qayb-qaatay-halkaas oo aan dhammaad lahayn (tusaale ahaan show
) uu kiciyo bilawga dhacdada, iyo qaabkeedii hore ee ka qaybqaadashada (tus. shown
) uu kiciyo marka ficilku dhammeeyo.
Laga bilaabo 3.0.0, dhammaan dhacdooyinka Bootstrap waa la magacaabay.
Dhammaan dhacdooyinka aan dhamaadka lahayn waxay bixiyaan preventDefault
shaqeyn Tani waxay siinaysaa awoodda lagu joojinayo fulinta ficilka ka hor inta uusan bilaaban.
Nooca mid kasta oo ka mid ah Bootstrap's jQuery plugins waxaa laga geli karaa VERSION
hantida dhisaha plugin. Tusaale ahaan, plugin tip-ka ah:
Bootstrap's plugins si gaar ah dib uguma soo noqdaan marka JavaScript naafo yahay. Haddii aad danaynayso khibrada isticmaalaha kiiskan, isticmaal <noscript>
si aad u sharaxdo xaalada (iyo sida dib loogu soo celiyo JavaScript) isticmaalayaashaada, iyo/ama ku darso dib-u-dhacyadaada caadada ah.
Bootstrap si rasmi ah uma taageerto qaybta saddexaad ee JavaScript maktabadaha sida Prototype ama jQuery UI. In kasta .noConflict
oo ay jiraan dhacdooyin magacyo kala duwan leh, waxaa laga yaabaa inay jiraan dhibaatooyin iswaafajin oo aad u baahan tahay inaad keligaa hagaajiso.
Saamaynta kala-guurka fudud, ku dar transition.js
hal mar oo ay la socdaan faylalka kale ee JS. Haddii aad isticmaalayso kuwa la soo ururiyey (ama la yareeyey) bootstrap.js
, looma baahna in lagu daro tan-horay ayay u jirtaa.
Transition.js waa kaaliyaha aasaasiga ah ee transitionEnd
dhacdooyinka iyo sidoo kale ku dayashada kala guurka CSS. Waxa isticmaala plugins-yada kale si ay u hubiyaan taageerada kala-guurka ee CSS iyo inay qabtaan kala-guurka ka laadlaadda.
Kala-guurka waxaa si caalami ah loo curyaami karaa iyadoo la isticmaalayo jajabka JavaScript ee soo socda, kaas oo ay tahay inuu yimaado ka dib transition.js
( bootstrap.js
ama bootstrap.min.js
, sida ay xaaladdu noqon karto) la raray:
Hababka waa la habeeyey, laakiin dabacsanaan, waxay kiciyaan wada hadal oo leh shaqada ugu yar ee loo baahan yahay iyo khaladaad caqli gal ah.
Hubi inaadan furin modal inta mid kale weli muuqanayo. Muujinta in ka badan hal qaab markiiba waxay u baahan tahay kood gaar ah.
Had iyo jeer isku day inaad dhigato modal code HTML meel heer sare ah dukumeentigaaga si aad uga fogaato qaybaha kale ee saameeya muuqaalka iyo/ama shaqeynta qaabka.
Waxaa jira digniino ku saabsan isticmaalka modal-ka aaladaha mobilada. Faahfaahinta ka eeg dokumentiyada taageerada browserkayaga .
Sababtoo ah sida HTML5 u qeexdo semantic-keeda, autofocus
sifada HTML wax saameyn ah kuma laha hababka Bootstrap. Si loo gaaro saameyn isku mid ah, isticmaal qaar ka mid ah JavaScript caadadii:
Hab la sameeyay oo leh madax, jidh, iyo hab ficil oo ku jira lugta.
U beddel habka JavaScript adoo gujinaya badhanka hoose. Hoos ayay u soo degi doontaa oo waxay ka soo geli doontaa xagga sare ee bogga.
Hubi inaad ku darto role="dialog"
iyo , tixraaca aria-labelledby="..."
cinwaanka qaab-dhismeedka , .modal
, iyo laftiisa.role="document"
.modal-dialog
Intaa waxaa dheer, waxaad ku siin kartaa sharaxaad ku saabsan wada-hadalka qaab- aria-describedby
dhismeedka .modal
.
Ku darista fiidiyowyada YouTube ee moodooyinka waxay u baahan tahay JavaScript dheeraad ah oo aan ku jirin Bootstrap si ay si toos ah u joojiso dib-u-ciyaarista iyo wax ka badan. Fiiri qoraalkan waxtarka leh ee Stack Overflow wixii macluumaad dheeraad ah.
Moodooyinka waxay leeyihiin laba cabbir oo ikhtiyaari ah, oo lagu heli karo fasallada wax ka beddelka si loogu dhejiyo .modal-dialog
.
Qaababka si fudud u muuqda halkii ay ka libdhi lahaayeen si loo eego, ka saar .fade
fasalka calaamadaynta qaabkaaga.
Si aad uga faa'iidaysato nidaamka xariijimaha Bootstrap gudaha modal, kaliya buul .row
gudaha dhex .modal-body
gal ka dibna isticmaal fasalada nidaamka xariijinta caadiga ah.
Hayso farabadan badhamada kuwaas oo dhamaantood kicinaya qaab isku mid ah, oo leh waxyaabo yar oo kala duwan? Isticmaal event.relatedTarget
iyo sifooyinka HTMLdata-*
(laga yaabo iyada oo loo marayo jQuery ) si loo kala beddelo waxa ku jira habka iyadoo ku xiran badhanka la gujiyay. Fiiri dukumeentiyada Dhacdooyinka Modal wixii faahfaahin ah relatedTarget
,
Plugin-ka moodeelku wuxuu beddelaa macluumaadkaaga qarsoon ee baahida, iyada oo loo marayo sifooyinka xogta ama JavaScript. Waxa kale oo ay ku darsataa .modal-open
in ay meesha <body>
ka saarto hab-dhaqanka duubista caadiga ah waxayna soo saartaa a .modal-backdrop
si ay u bixiso aag gujis ah oo lagu eryo moodooyinka la soo bandhigay marka la gujinayo meel ka baxsan habka.
Dhaqdhaqaaqa modal adigoon qorin JavaScript. Deji curiyaha data-toggle="modal"
kontoroolka, sida badhan, oo ay la socoto a data-target="#foo"
ama href="#foo"
si aad u beegsato hab gaar ah si aad u leexiso.
Wac modal leh id myModal
leh hal xariiq oo JavaScript ah:
Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-
, sida ku jira data-backdrop=""
.
Magaca | nooca | default | sharaxaad |
---|---|---|---|
dib-u-dhac | boolean ama xadhig'static' |
run | Waxaa ka mid ah curiyaha qaab-dhabeedka. Beddelkeeda, sheeg static meel-dambe oo aan xidhin habka gujiska. |
kiiboodhka | booliyan | run | Wuxuu xidhaa habka marka furaha baxsadka la riixo |
show | booliyan | run | Muujinaya habka marka la bilaabay. |
fogaan | waddo | been ah | Doorashadan waa la joojiyay ilaa v3.3.0 waxaana laga saaray v4. Waxaan kugula talineynaa taa beddelkeeda isticmaalka qaabaynta dhinaca macmiilka ama qaab-dhismeedka xogta, ama wac jQuery.load naftaada. Haddii URL fog la bixiyo, waxa ku jira waxa lagu shubi doonaa hal mar habka jQuery |
.modal(options)
Waxay u hawlgelisaa macluumaadkaaga qaab habaysan. Aqbala ikhtiyaarka ikhtiyaariga ah object
.
.modal('toggle')
Gacanta ayaa u roga modal Ku soo noqda qofka soo wacay ka hor inta aan habka dhabta ah la muujin ama aan la qarin (tusaale ka hor inta aanay dhicin shown.bs.modal
ama hidden.bs.modal
dhacdada).
.modal('show')
Gacanta ayaa u fura modal Ku soo noqoshada soo wacaha ka hor inta aan qaabka dhabta ah loo muujin (tusaale ka hor intaanay shown.bs.modal
dhacdada dhicin).
.modal('hide')
Gacanta ayaa u qarisa habka. Ku soo noqoshada soo wacaha ka hor inta aan habka dhabta ah la qarin (ie ka hor intaanay hidden.bs.modal
dhacdada dhicin).
.modal('handleUpdate')
Waxa uu hagaajiyaa meelaynta modal-ka si uu uga hortago baararka-rogid haddii ay dhacdo in mid ka mid ahi soo baxo, taas oo ka dhigaysa habku u boodo bidix.
Kaliya loo baahan yahay marka dhererka modalku isbeddelo inta uu furan yahay.
Bootstrap's modal class wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay in lagu xidho shaqaynta modal.
Dhammaan dhacdooyinka modal waxa lagu eryaa habka laftiisa (ie at the <div class="modal">
).
Nooca Dhacdada | Sharaxaada |
---|---|
show.bs.modal | Dhacdadani waxay isla markaaba gubataa marka show habka tusaalaha la yiraahdo. Haddi ay keento gujis, cunsurka la gujiyay ayaa diyaar u ah relatedTarget hantida dhacdada. |
tusay.bs.modal | Dhacdadan waxa la eryaa marka habka loo muujiyo isticmaalaha (waxa ay sugi doontaa inta uu CSS ku wareejinayo dhamaystirka). Haddi ay keento gujis, cunsurka la gujiyay ayaa diyaar u ah relatedTarget hantida dhacdada. |
qari.bs.modal | Dhacdadan ayaa isla markaaba la eryaa marka hide habka tusaale ahaan loo waco. |
qarsoon.bs.modal | Dhacdadan waxa la eryaa marka modalku dhammeeyo in laga qariyo isticmaalaha (waxay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). |
raran.bs.modal | Dhacdadan ayaa la eryaa marka modalku soo buuxiyo nuxurka iyadoo la adeegsanayo remote ikhtiyaarka. |
Ku dar liiska hoos-u-dhaca wax kasta oo leh plugin-kan fudud, oo ay ku jiraan navbar, tabs, iyo kaniiniyada.
Iyada oo loo marayo sifooyinka xogta ama JavaScript, plugin-ka hoos-u-dhaca wuxuu beddelaa nuxurka qarsoon (menus-ka-soo-celinta) isagoo beddelaya .open
fasalka shayga liiska waalidka.
Aaladaha mobilada, furista hoos u dhaca waxay ku dartaa meel .dropdown-backdrop
tuubada ah oo lagu xidho liiska hoos u dhaca marka la taabanayo meel ka baxsan liiska, shuruuda taageerada saxda ah ee iOS. Tani waxay ka dhigan tahay ka beddelashada liiska hoos u dhaca ee furan una beddelo liiska hoos-u-dhaca kale waxay u baahan tahay taabasho dheeri ah oo ku saabsan mobilada.
Fiiro gaar ah: data-toggle="dropdown"
Sifada waxa lagu tiirsadaa xidhitaanka liiska hoos-u-dhaca ee heer codsi, marka waa fikrad wanaagsan in had iyo jeer la isticmaalo.
Ku dar data-toggle="dropdown"
xiriiriye ama badhan si aad u beddesho hoos u dhaca.
Si aad URL-yada ugu ilaaliso badhamada isku xidhka, isticmaal data-target
sifada halkii aad ka isticmaali lahayd href="#"
.
Hoos ka wac JavaScript:
data-toggle="dropdown"
weli loo baahan yahayIyadoo aan loo eegin haddii aad ugu wacdo hoos u dhigistaada JavaScript ama aad isticmaasho xogta-api, data-toggle="dropdown"
had iyo jeer waxaa looga baahan yahay inaad ku jirto qaybta kicinta ee hoos u dhaca.
Midna
$().dropdown('toggle')
Wuxuu rogaa liiska hoos-u-dhaca ee navbar la bixiyay ama navigation tab.
Dhammaan dhacdooyinka hoos u dhaca waxaa lagu eryaa xubinta .dropdown-menu
waalidka.
Dhammaan dhacdooyinka hoos u dhaca waxay leeyihiin relatedTarget
hanti, qiimihiisu waa curiyaha barroosinka roganaya.
Nooca Dhacdada | Sharaxaada |
---|---|
show.bs.hoos u dhac | Dhacdadani waxay isla markiiba gubtaa marka habka tusaalaha bandhigga la yiraahdo. |
la tusay.bs.hoos u dhac | Dhacdadan ayaa la eryaa marka hoos u dhigista laga dhigo mid la arki karo isticmaaluhu (waxay sugi doontaa kala-guurka CSS, si loo dhamaystiro). |
qari.bs.hoos u dhac | Dhacdadan ayaa isla markiiba la eryaa marka habka dhuumashada la waco. |
qarsoon.bs. hoos u dhac | Dhacdadan waxa la eryaa marka ay dhammaato hoos u dhigista laga qarinayo isticmaalaha (waxa ay sugi doontaa kala-guurka CSS, si loo dhamaystiro). |
Plugin-ka ScrollSpy waxaa loogu talagalay in si toos ah loo cusboonaysiiyo bartilmaameedyada nav ee ku saleysan booska duubista. U rog aagga navbar ka hooseeya oo daawo isbeddelka fasalka firfircoon. Qodobada hoos u dhaca ayaa sidoo kale la iftiimin doonaa.
Ad leggings keytar, brunch id art party dolor labour. Pitchfork yr enim lo-fi ka hor inta aysan iibin qui. Tumblr beer-ilaa-miiska xuquuqda baaskiilka wax kasta ha ahaatee. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby funaanad lomo Jean shorts, williamsburg hoodie minim qui waxaa laga yaabaa inaadan maqlin iyaga iyo cardigan Trust fund culpa biodiesel wes anderson bilicda. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa shaarib skateboard, oo leh gadhka fugiat velit gadhka. Gadhka xorta ah aliqua cupidatat mcsweeney's vero. Cupidatat afar loko nisi, iyo helvetica nulla carles. Gaariga cuntada ee shaabada leh ee cosby funaanad, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non bilicsan jimicsi quis gentrify. Brooklyn adipisicing craft biir ku xigeenka keytar deserunt.
Occaecat commodo aliqua delectus. Beerka farsamada gacanta ee deserunt skateboard ea. Xuquuqda baaskiilka Lomo adipisicing banh mi, velit ea sunt heerka xiga locavore kafee-kaliya ee magna veniam. Nolosha sare id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim boorsada fariinta. Cred ex in, waarta delectus consectetur fanny pack iphone.
Inciddunt echo park, officia deserunt mcsweeney's master-ka caanka ah ayaa nadiifiya thundercats sapiente veniam. Marka laga reebo VHS elit, shoreditch caan ah +1 biodiesel laborum biirka farsamada. Wadfarers kafeega asal ahaan ka soo jeeda irure afar loko, cupidatat Terry Richardson master cleanse. Ka soo qaad in ay u badan tahay in aadan maqlin iyaga xirmo faneedka fannaanka, tattooed nulla cardigan tempor ad. yeey aad u caan ah oo sartorial keffiyeh eu banh mi waara. Elit wolf voluptate, lo-fi ea portland ka hor inta aysan iibin afar loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labour. Pitchfork yr enim lo-fi ka hor inta aysan iibin qui. Tumblr beer-ilaa-miiska xuquuqda baaskiilka wax kasta ha ahaatee. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby funaanad lomo Jean shorts, williamsburg hoodie minim qui waxaa laga yaabaa inaadan maqlin iyaga iyo cardigan Trust fund culpa biodiesel wes anderson bilicda. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa wax alla wixii gaari cunto ah oo delectus ah. Sapiente synth id la qaatay. Locavore sed helvetica cliche bir ah, onkod laga yaabo inaadan maqlin iyaga oo keenaya hoodie gluten-free lo-fi fap aliquip. Labore elit placeat ka hor inta aysan iibin, Terry Richardson oo aad u cad cad brunch nesciunt quis cosby funaanad pariatur keffiyeh ut helvetica artisan. Beerka farsamada gacanta ee Cardigan seitan velit diyaarsan. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco onkod.
Xidhiidhiyayaasha Navbar waa inay lahaadaan bartilmaameedyada id la xallin karo. Tusaale ahaan, <a href="#home">home</a>
waa inuu u dhigmaa wax ku jira DOM sida <div id="home"></div>
.
:visible
bartilmaameedka ahayn waa la iska indhatirayWalxaha bartilmaameedka ah ee aan :visible
waafaqsanayn jQuery waa la iska indha tiraayaa oo shayada badda ee u dhigma weligood lama iftiimin doono.
Si kastaba ha ahaatee habka hirgelinta, scrollspy waxay u baahan tahay isticmaalka position: relative;
walxaha aad basaaseyso. Inta badan tani waa tan <body>
. Markaad ku duuduubto canaasiirta aan ahayn kan <body>
, hubi inaad haysato meel height
la isku dhejiyo oo overflow-y: scroll;
codso.
Si aad si fudud ugu darto habdhaqanka scrollspy to your topbar navigation, data-spy="scroll"
ku dar walxaha aad rabto in aad basaasto (inta badan tani waxay noqonaysaa <body>
). Ka dib ku dar data-target
sifada aqoonsiga ama fasalka xubinta waalidka ee qayb kasta oo Bootstrap .nav
ah.
Ka dib markaad ku position: relative;
darto CSS-gaaga, wac qoraalka qoraalka JavaScript:
.scrollspy('refresh')
Markaad isticmaalayso scrollspy iyadoo lala kaashanayo ku darista ama ka saarida walxaha DOM, waxaad u baahan doontaa inaad wacdo habka dib u cusboonaysiinta sida:
Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-
, sida ku jira data-offset=""
.
Magaca | nooca | default | sharaxaad |
---|---|---|---|
dhimis | tirada | 10 | Pixels in laga bilaabo xagga sare marka la xisaabinayo booska rogid. |
Nooca Dhacdada | Sharaxaada |
---|---|
firfircooni.bs.scrollspy | Dhacdadani waxay dab kacaysaa mar kasta oo shay cusub uu hawl galo duubista. |
Ku dar hawlqabad tab degdeg ah, firfircoon si aad ugu gudubto muraayadaha nuxurka gudaha, xitaa iyada oo loo marayo menus-hoosaadka. Tabaha buulka ah lama taageero
Denim cayriin waxaa laga yaabaa inaadan maqlin iyaga Jean-gaaban Austin. Nesciunt tofu stumptown aliqua, retro synth master nadiifinta. Shaarubaha cliche tempor, williamsburg carles vegan helvetica. Reprehenderit hiliblaha retro keffiyeh dreamcatcher synth. Cosby funaanad eu banh mi, qui irure terry richardson ex squid. Sida loo sameeyo salvia cillum iphone. Seitan aliquip quis cardigan dharka mareykanka, hiliblaha voluptate nisi qui.
Gaariga cuntada fixie locavore, accusamus mcsweeney's marfa nulla squid qaxwaha hal asal ah. Jimicsiga +1 shaqada, blog sartorial PBR leggings heerka xiga wes anderson artisan afar loko beer-ilaa-miiska biirka farsamada gacanta. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean gaaban ullamco ad vinyl cillum PBR. Homo nostrud organic, waxay u malaynayaan in shaqada bilicsanaanta magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, jean gaaban gadhka waara iyo DIY anshaxa culpa Terry Richardson biodiesel. Goobta xaflada fanka stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, akhlaaqda wes anderson tofu ka hor intaanay iibin mcsweeney's organic lomo retro fanny pack lo-fi farm-to-miiska diyaarsan. Bacda Messenger gentrify fargeeto tattooed biirka farsamada gacanta, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy bir ah. Lugaha ayaa sifeeyaa 8-bit fargeeto saqiir ah. Williamsburg banh mi wax alla wixii aan lahayn gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk Vice blog. Sawirka muuqaalka waxaad u badan tahay inaadan maqlin iyaga, stumptown-Blooga farsamada vinyl craft. Pitchfork tofu synth chambray waara sanad.
Trust fund seitan letterpress, keytar cayriin denim keffiyeh etsy xisbiga fanka ka hor inta aysan iibin Master Cleanse gluten-free Squid scenester freegan cosby funaanad. Fanny pack portland seitan DIY, xaflad farshaxan locavore wolf cliche nolosha sare echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi ka hor inta aysan iibin beer-u-miiska VHS viral locavore cosby funaanad. Lomo yeyda viral, shaarubaha diyaarsan onkod keffiyeh farshaxan biir marfa anshax. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Plugin -gani waxa uu fidinayaa qaybta hagidda tabbeded si loogu daro meelaha la taabtay.
U oggolow tab tabsiyada JavaScript-ka (tabo kastaa waxay u baahan tahay in si gaar ah loo hawlgeliyo):
Waxaad u dhaqaajin kartaa tabs shaqsiyeed dhowr siyaabood:
Waxaad dhaqaajin kartaa tab ama kaniiniga navigation adoon qorin wax JavaScript ah adiga oo si fudud u qeexaya data-toggle="tab"
ama data-toggle="pill"
shay. Ku darista nav
iyo nav-tabs
xiisadaha tab waxay dabaqi doontaa habaynta tabkaul
Bootstrap , halka ku darida iyo xiisadaha lagu dabaqi doono habaynta kiniinka .nav
nav-pills
Si aad tabsku u libdhaan, ku dar .fade
mid kasta .tab-pane
. Shabakadda ugu horreysa waa inay sidoo kale ka .in
dhigtaa nuxurka bilowga ah mid muuqda.
$().tab
Wuxuu hawlgeliyaa curiyaha tab iyo weelka ka kooban. Tabku waa inuu lahaadaa mid data-target
ama meel la href
beegsanayo noodhka weelka ee DOM. Tusaalooyinka kor ku xusan, tabsku waa <a>
s leh data-toggle="tab"
sifooyin.
.tab('show')
Waxay doorataa tab la siiyay oo waxay muujisaa waxa ku jira. Tabo kasta oo kale oo hore loo doortay waxa ay noqotaa mid aan la dooran oo waxa la xidhiidha way qarsoon tahay. Ku soo noqda qofka soo wacay ka hor inta aan la soo bandhigin muraayadda tab (tusaale ka hor intaanay shown.bs.tab
dhacdada dhicin).
Marka la tuso tab cusub, dhacdooyinku waxay u dabcaan sida soo socota:
hide.bs.tab
(ku yaal tab firfircoon ee hadda)show.bs.tab
(ku yaal tabka lagu soo bandhigi doono)hidden.bs.tab
(ee tabtii hore ee firfircoonayd, oo la mid ah hide.bs.tab
dhacdada)shown.bs.tab
(oo ku yaal tab cusub oo firfircoon, oo la mid ah show.bs.tab
dhacdada)Haddi aanu tab hore u shaqayn, markaa dhacdooyinka hide.bs.tab
iyo hidden.bs.tab
dhacdooyinka lama eryi doono.
Nooca Dhacdada | Sharaxaada |
---|---|
show.bs.tab | Dhacdadani waxay ku socotaa bandhigga tab, laakiin ka hor intaan tab cusub la muujin. Isticmaal event.target oo event.relatedTarget aad beegsato tab firfircooni iyo tabtii hore ee firfircoonayd (haddii la heli karo) siday u kala horreeyaan. |
tusay.bs.tab | Dhacdadani waxay ku gubanaysaa bandhiga tab ka dib marka tab la tuso. Isticmaal event.target oo event.relatedTarget aad beegsato tab firfircooni iyo tabtii hore ee firfircoonayd (haddii la heli karo) siday u kala horreeyaan. |
qari.bs.tab | Dhacdadani waxay dab kacaysaa marka tab cusub la muujinayo (oo sidaas awgeed tabtii hore ee firfircoonayd waa in la qariyaa). Isticmaal event.target oo event.relatedTarget aad beegsato tab firfircoon ee hadda iyo ta cusub ee dhawaan-wax-qaban doona, siday u kala horreeyaan. |
qarsoon.bs.tab | Dhacdadani waxay dabaysaa ka dib marka tab cusub la muujiyo (oo sidaas awgeed tabtii hore ee firfircoonayd ayaa qarsoon). Isticmaal event.target oo event.relatedTarget aad beegsato tabtii hore ee firfircoonayd iyo tab cusub ee firfircoon, siday u kala horreeyaan. |
Waxaa dhiirigeliyay plugin jQuery.tipsy ee aad u wanaagsan oo uu qoray Jason Frame; Tilmaamaha qalabku waa nooc la cusboonaysiiyay, kaas oo aan ku tiirsanayn sawirada, u isticmaal CSS3 animations, iyo xogta sifada kaydinta cinwaanka maxaliga ah.
Tilmaamaha qalabka leh cinwaanno eber ah weligood lama soo bandhigin.
Ka dul rog xiriirka hoose si aad u aragto qalabyada:
Surwaal dhagan keffiyeh malaha ma aadan maqlin iyaga. Photo booth gadhka cayriin denim warqad-press vegan messenger bag stumptown. Beer-ilaa-miiska seitan, mcsweeney's fixie sustainable quinoa 8-bit dharka maraykanku waxay leeyihiin terry Richardson vinyl chambray. Gadhka stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, afar loko mcsweeney's chambray vegan nadiif ah. Farsamoyaqaan dhab ah oo biro ah wax kasta oo keytar , scenester farm-to-table banksy Austin twitter handle freegan cred denim ceeriin hal-asalka kafeega viral.
Afar doorasho ayaa diyaar ah: sare, midig, hoose, iyo bidix oo toosan.
Sababaha wax qabad dartood, Tooltip iyo Popover data-apis waa gaabsan yihiin, taasoo la macno ah inaad adigu bilawdo .
Hal dariiqo oo lagu bilaabi karo dhammaan qalabyada bogga waxay noqon kartaa in lagu xusho data-toggle
sifadooda:
Plugin-ka Tooltip wuxuu soo saaraa nuxur iyo calaamadayn baahida, iyo sida caadiga ah wuxuu meeleeyaa tilmaamo qalab ka dib cunsurkooda kiciya.
Ku kiciya tilmaanta aalada JavaScript:
Calaamadeynta loo baahan yahay ee qalab-tireedku waa data
sifo kaliya oo title
qaybta HTML ee aad rabto inaad haysato qalab. Astaanta la soo saaray ee tilmaanta qalabku waa mid fudud, in kasta oo ay u baahan tahay boos (sida caadiga ah, oo loo dejiyay top
plugin).
Mararka qaarkood waxaad dooneysaa inaad ku darto qalab xiriiriye hyperlink kaas oo ku duubaya khadadka badan. Habdhaqanka caadiga ah ee plugin tip-ka qalabku waa inuu u dhexeeyo si toosan iyo toosan. Ku dar white-space: nowrap;
barroosinnadaada si aad taas uga fogaato.
Markaad isticmaalayso tibaaxaha walxaha ku jira a .btn-group
ama a .input-group
, ama walxaha la xidhiidha miiska ( <td>
, <th>
, <tr>
, <thead>
, ) <tbody>
, <tfoot>
waa inaad qeexdaa ikhtiyaarka container: 'body'
( hoos ku qoran) si aad uga fogaato waxyeelooyinka aan loo baahnayn (sida curiyaha sii kordhaya iyo/ ama luminaya geesaheeda wareegsan marka qalabku kiciyo).
Isticmaalayaasha ku dhex wareegaya kiiboodhka, iyo gaar ahaan isticmaalayaasha tignoolajiyada caawinta, waa inaad kaliya ku dartaa tilmaamo qalab kiiboodhka walxaha diirada saari kara sida isku xidhka, kontaroolada foomka, ama shay kasta oo aan sabab lahayn oo leh tabindex="0"
sifo.
Si aad tibaaxaha ugu darto shay disabled
ama .disabled
curiye, geli curiyaha gudaha a <div>
oo ku dabaq aalada taas <div>
bedelkeeda.
Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-
, sida ku jira data-animation=""
.
Magaca | Nooca | Asal ahaan | Sharaxaada |
---|---|---|---|
animation | booliyan | run | Codso u gudbida libdhicida CSS ilaa aaladda |
weel | xadhig | been ah | been ah | Waxay ku dhejisaa caarada aaladda shay gaar ah. Tusaale |
dib u dhac | lambarka | walax | 0 | Daahinta muujinta iyo qarinta aaladda (ms) - kuma khusayso nooca kiciya gacanta Haddii nambar la keeno, dib u dhac ayaa lagu dabaqayaa qarinta/muujinta labadaba Qaab dhismeedka shaygu waa: |
html | booliyan | been ah | Geli HTML galka qalabka Haddii ay been tahay, text habka jQuery ayaa loo isticmaali doonaa in la geliyo macluumaadka DOM. Isticmaal qoraal haddii aad ka welwelsan tahay weerarrada XSS. |
meelaynta | xadhig | shaqayn | 'sare' | Sida loo dhigo tip-tip-top | hoose | bidix | xaq | baabuur. Marka hawl loo isticmaalo si loo go'aamiyo meelaynta, waxa loogu yeedhaa qalabka DOM node oo ah doodiisa koowaad iyo curiyaha DOM node oo ah kan labaad. Macnaha |
dooriye | xadhig | been ah | Haddii la bixiyo doorasho, walxaha tibaaxaha ah waxaa loo igman doonaa bartilmaameedyada la cayimay. Ficil ahaan, tan waxaa loo istcimaalaa in lagu suurtageliyo nuxurka HTML ee firfircoon in lagu daro aaladaha. Bal u fiirso tan iyo tusaale wargelin ah . |
qaab-dhismeedka | xadhig | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML saldhig si aad u isticmaasho marka la abuurayo tip-ka. Tilmaamaha qalabka
Cutubka duubka ugu dambeeya waa inuu lahaadaa |
horyaalka | xadhig | shaqayn | '' | Qiimaha cinwaanka caadiga ah haddii Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo |
kicin | xadhig | 'fiirsashada dulsaarka' | Sida aaladda loo kiciyo - guji | dullid | diiradda | buug-gacmeedka. Waxaad ka gudbi kartaa kiciyeyaasha badan; kala saar meel bannaan. manual laguma dari karo kiciye kale. |
daawasho | xadhig | shay | shaqayn | {door: 'jirka', suufka: 0} | Waxay ku ilaalisaa caarada aaladda gudaha xudduudaha cunsurkan. Tusaale: Haddii shaqo la bixiyo, waxaa loogu yeeraa curiyaha DOM node oo ah dooda keliya. Macnaha |
Ikhtiyaarada aaladaha gaarka ah waxaa lagu qeexi karaa iyadoo la adeegsanayo sifooyinka xogta, sida kor lagu sharaxay.
$().tooltip(options)
Wuxuu ku lifaaqaa gacan hayaha qalab ururinta walxaha.
.tooltip('show')
Waxay daaha ka qaadaysaa aaladda curiyaha Ku soo noqda qofka soo wacay ka hor inta aan aalada qalabku dhab ahaan la muujin (tusaale ka hor intaanay shown.bs.tooltip
dhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta qalabka. Tilmaamaha qalabka leh cinwaanno eber ah weligood lama soo bandhigin.
.tooltip('hide')
Wuxuu qariyaa calaamadda curiyaha. Ku soo noqda qofka soo wacay ka hor inta aan la qarin qalabka wax lagu qoro (tusaale ka hor intaanay hidden.bs.tooltip
dhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta qalabka.
.tooltip('toggle')
Beddelayaa shay raadka. Ku soo noqda qofka soo wacay ka hor inta aan aalada qalabku dhab ahaan la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.tooltip
ama hidden.bs.tooltip
dhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta qalabka.
.tooltip('destroy')
Qariyaa oo baabi'iyaa aaladda curiyaha. Aaladaha adeegsada ergada (kuwaaso la abuuray iyadoo la isticmaalayo ikhtiyaarka selector
) si gaar ah looma baabi'in karo walxaha kiciya faraca.
Nooca Dhacdada | Sharaxaada |
---|---|
show.bs.tooltip | Dhacdadani waxay isla markaaba gubataa marka show habka tusaalaha la yiraahdo. |
tusay.bs.tooltip | Dhacdadan waxa la eryaa marka tip-tip-ka loo dhigay mid la arki karo isticmaaluhu (waxay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). |
qari.bs.tooltip | Dhacdadan ayaa isla markaaba la eryaa marka hide habka tusaale ahaan loo waco. |
qarsoon.bs.tooltip | Dhacdadan waxa la eryaa marka qalabku dhammeeyo in laga qariyo isticmaalaha (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). |
la geliyey.bs.tooltip | Dhacdadan ayaa la eryaa dhacdada ka dib show.bs.tooltip marka qaabka qalabaynta lagu daro DOM. |
Ku dar waxyaabo yaryar oo dulsaaran, sida kuwa iPad-ka, shay kasta oo loogu talagalay macluumaadka labaad ee guriyeynta.
Popovers oo ciwaanka iyo nuxurkooduba yihiin eber-dherer weligood lama soo bandhigin.
Popovers waxay u baahan yihiin plugin tip-ka in lagu daro nooca Bootstrap kaaga.
Sababaha wax qabad dartood, Tooltip iyo Popover data-apis waa gaabsan yihiin, taasoo la macno ah inaad adigu bilawdo .
Hal dariiqo oo lagu bilaabi karo dhammaan popovers bogga waxay noqon kartaa in lagu xusho data-toggle
sifadooda:
Markaad isticmaalayso popovers walxaha ku jira a .btn-group
ama a .input-group
, ama miiska la xidhiidha walxaha ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), waa inaad qeexdaa ikhtiyaarka container: 'body'
( hoos ku qoran) si aad uga fogaato waxyeelooyinka aan loo baahnayn (sida curiyaha sii kordhaya iyo/ ama luminaya geesaheeda wareegsan marka popover uu kiciyo).
Si aad ugu darto popover a disabled
ama .disabled
element, geli curiyaha gudaha a <div>
oo ku dabaq popover taas <div>
bedelkeeda.
Mararka qaarkood waxaad rabtaa inaad popover ku darto hyperlink kaas oo ku duudduubay khadadka badan. Dabeecadda caadiga ah ee plugin popover-ka ayaa ah in uu u dhexeeyo si toosan iyo toosan. Ku dar white-space: nowrap;
barroosinnadaada si aad taas uga fogaato.
Afar doorasho ayaa diyaar ah: sare, midig, hoose, iyo bidix oo toosan.
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.
Isticmaal focus
kiciyeyaasha si aad u tirtirto popovers marka xigta ee isticmaaluhu sameeyo.
Si aad u hesho hab-dhaqan iskutallaab ah oo sax ah iyo hab-dhaqan-madal-madal ah, waa inaad isticmaashaa <a>
summada, ma aha summada , <button>
sidoo kale waa inaad ku dartaa sifooyinka role="button"
iyo tabindex
sifooyinka.
U oggolow popovers iyada oo loo marayo JavaScript:
Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-
, sida ku jira data-animation=""
.
Magaca | Nooca | Asal ahaan | Sharaxaada |
---|---|---|---|
animation | booliyan | run | Codso u gudbida libdhicida CSS ilaa popover |
weel | xadhig | been ah | been ah | Ku dhejinta popover-ka shay gaar ah. Tusaale |
nuxurka | xadhig | shaqayn | '' | Qiimaha nuxurka asalka ah haddii Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo |
dib u dhac | lambarka | walax | 0 | Dib u dhigista muujinta iyo qarinta popover (ms) - kuma khusayso nooca kiciya gacanta Haddii nambar la keeno, dib u dhac ayaa lagu dabaqayaa qarinta/muujinta labadaba Qaab dhismeedka shaygu waa: |
html | booliyan | been ah | Geli HTML-ka popover-ka Haddii ay been tahay, text habka jQuery ayaa loo isticmaali doonaa in la geliyo macluumaadka DOM. Isticmaal qoraal haddii aad ka welwelsan tahay weerarrada XSS. |
meelaynta | xadhig | shaqayn | 'sax' | Sida loo dhigo popover - top | hoose | bidix | xaq | baabuur. Marka hawl loo isticmaalo si loo go'aamiyo meelaynta, waxaa lagu magacaabaa node popover DOM oo ah dooddeeda kowaad iyo curiyaha DOM node oo ah kan labaad. Macnaha |
dooriye | xadhig | been ah | Haddii doorasho la bixiyo, shayada soo-bandhigista waxa loo igmaday bartilmaameedyada la cayimay. Ficil ahaan, tan waxaa loo istcimaalaa in lagu suurtageliyo nuxurka HTML ee firfircoon in lagu daro popovers. Bal u fiirso tan iyo tusaale wargelin ah . |
qaab-dhismeedka | xadhig | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
HTML saldhig si loo isticmaalo marka la abuurayo popover. Popover's Popover's
Cutubka duubka ugu dambeeya waa inuu lahaadaa |
horyaalka | xadhig | shaqayn | '' | Qiimaha cinwaanka caadiga ah haddii Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo |
kicin | xadhig | 'guji' | Sida popover u kiciyo - guji | dullid | diiradda | buug-gacmeedka. Waxaad ka gudbi kartaa kiciyeyaasha badan; kala saar meel bannaan. manual laguma dari karo kiciye kale. |
daawasho | xadhig | shay | shaqayn | {door: 'jirka', suufka: 0} | Waxay ku ilaalisaa popover-ka gudaha xudduudaha cunsurkan. Tusaale: Haddii shaqo la bixiyo, waxaa loogu yeeraa curiyaha DOM node oo ah dooda keliya. Macnaha |
Ikhtiyaarada popovers shakhsi ahaan waxaa lagu qeexi karaa iyada oo la isticmaalayo sifooyin xogta, sida kor lagu sharaxay.
$().popover(options)
Wuxuu u bilaabaa popovers ururinta curiyaha.
.popover('show')
Waxay daaha ka qaadaysaa soo boodada curiyaha Ku soo noqoshada soo wacaha ka hor inta aan si dhab ah loo muujin popover (ie ka hor intaanay shown.bs.popover
dhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta popover. Popovers oo ciwaanka iyo nuxurkooduba yihiin eber-dherer weligood lama soo bandhigin.
.popover('hide')
Wuxuu qariyaa boodboodka curiyaha. Ku soo noqoshada soo wacaha ka hor inta aan bood-boodka dhab ahaantii la qarin (ie ka hor intaanay hidden.bs.popover
dhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta popover.
.popover('toggle')
Beddelaa soo boodada curiyaha Ku soo noqda qofka soo wacaya ka hor inta aan bood-boodka dhab ahaantii la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.popover
ama hidden.bs.popover
dhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta popover.
.popover('destroy')
Qariyaa oo baabi'iyaa popover element. Popovers isticmaala ergada (kuwaas oo la abuuray iyadoo la isticmaalayo ikhtiyaarka selector
) si gaar ah looma baabi'in karo walxaha kiciya faraca.
Nooca Dhacdada | Sharaxaada |
---|---|
show.bs.popover | Dhacdadani waxay isla markaaba gubataa marka show habka tusaalaha la yiraahdo. |
la tusay.bs.popover | Dhacdadan waxa la eryaa marka popover-ka laga dhigo mid la arki karo isticmaaluhu (waxay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). |
qari.bs.popover | Dhacdadan ayaa isla markaaba la eryaa marka hide habka tusaale ahaan loo waco. |
qarsoon.bs.popover | Dhacdadan waxa la eryaa marka popover uu dhammeeyo in laga qariyo isticmaalaha (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). |
la geliyey.bs.popover | Dhacdadan ayaa la eryaa dhacdada ka dib show.bs.popover marka qaabka popover lagu daray DOM. |
Ku dar shaqada ka eryida dhammaan fariimaha digniinta leh ee plugin this.
Marka la isticmaalayo .close
badhanka, waa in uu ahaado ubadka ugu horreeya ee .alert-dismissible
wax qoraal ah lagama yaabo inuu ka hor yimaado calaamadaynta.
Beddel kan iyo taas oo isku day mar kale. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Kaliya ku dar data-dismiss="alert"
badhanka ku dhow si aad si toos ah u siiso hawlgelinta heeganka dhow. Xiritaanka digniinta waxay ka saartaa DOM
Si aad digniinahaagu u isticmaalaan animation marka la xidhayo, hubi inay haystaan .fade
���iyo .in
fasaladii hore loogu dabaqay iyaga.
$().alert()
Wuxuu ka dhigaa digniin inuu dhegeysto dhacdooyinka gujinta ee walxaha faraca leh ee leh data-dismiss="alert"
sifada. ( Looma baahna marka la isticmaalayo xogta-api si toos ah u bilaabay.)
$().alert('close')
Xidhaa digniinta adoo ka saaraya DOM Haddii fasalada .fade
iyo .in
fasaladu ay ku jiraan curiyaha, digniintu way libdhi doontaa ka hor intaan la saarin.
Bootstrap's alert plugin wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta digniinta.
Nooca Dhacdada | Sharaxaada |
---|---|
dhow.bs. heegan | Dhacdadani waxay isla markaaba gubataa marka close habka tusaalaha la yiraahdo. |
xiran.bs. feejignaan | Dhacdadan waxa la eryaa marka digniinta la xidho (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). |
Wax badan ku samee badhamada. Xakamaynta badhanka ayaa sheegaysa ama samee kooxo badhamada qaybo badan sida qalabyada.
Firefox waxay ku sii socotaa qaabka xakamaynta (naafada iyo hubinta) guud ahaan culaysyada bogga . Habka xalinta tani waa in la isticmaalo autocomplete="off"
. Eeg bug Mozilla #654072 .
Ku darsodata-loading-text="Loading..."
si aad u isticmaasho xaalad rarid badhanka.
Sifadan waa la tirtiray ilaa v3.3.5 waxaana laga saaray v4.
Bannaanbaxan dartiis, waxaan isticmaaleynaa data-loading-text
iyo $().button('loading')
, laakiin taasi maaha gobolka kaliya ee aad isticmaali karto. Hoos ka arag wax badan oo arrintan ku saabsan $().button(string)
dukumeentiyada .
Ku dar data-toggle="button"
si aad dhaqaajiso togging hal badhan.
.active
iyoaria-pressed="true"
Badhamada horay loo-rogmaday, waa inaad kudartaa .active
fasalka iyo aria-pressed="true"
sifada button
naftaada.
Ku dar sanduuqa hubinta ama agabka raadiyaha data-toggle="buttons"
si .btn-group
aad awood ugu yeelatid ku-rogid qaababkooda.
.active
Ikhtiyaarada hore loo doortay, waa in aad ku darto .active
fasalka label
laftaadu wax galinta.
Haddii xaaladda la hubiyay ee badhanka sanduuqa jeeggu la cusboonaysiiyo iyada oo aan la ridin click
dhacdo badhanka (tusaale iyada oo la adeegsanayo <input type="reset">
ama la samaynayo habaynta checked
hantida gelinta), waxa aad u baahan doontaa in aad .active
fasalka ku beddesho qaybta wax-gelinta label
.
$().button('toggle')
Beddelayaa gobolka riix Siinaya badhanka muuqaalka in la hawlgeliyay.
$().button('reset')
Dib u dajinaysaa xaalada badhanka - waxay ku badashaa qoraalka qoraalka asalka ah. Habkani waa mid isku mid ah oo soo noqda ka hor inta aan dib-u-dejintu dhammayn.
$().button(string)
Ku beddela qoraalka xaalad kasta oo qoraal ah oo qeexan.
Plugin dabacsan oo ka faa'iidaysa muggeed oo fasallo ah hab-dhaqan sahlan.
Burburku wuxuu u baahan yahay furaha wareejinta in lagu daro nooca Bootstrap kaaga.
Guji badhamada hoose si aad u muujiso oo aad u qariso shay kale adigoo isticmaalaya isbeddelada fasalka:
.collapse
qariyaa waxa ku jira.collapsing
waxaa lagu dabaqaa xilliga kala-guurka.collapse.in
waxay muujinaysaa nuxurkaWaxaad isticmaali kartaa xiriiriye leh href
sifada, ama badhan sifada leh data-target
. Labada xaaladoodba, data-toggle="collapse"
waa loo baahan yahay.
Kordhi habdhaqanka burburka caadiga ah si aad u abuurto accordion oo leh qaybta guddida.
Waxa kale oo suurtogal ah in lagu beddelo .panel-body
s .list-group
.
Hubi inaad ku darto aria-expanded
qaybta xakamaynta. Sifadani waxay si cad u qeexaysaa xaaladda hadda jirta ee cunsurka la dumin karo si loo eego akhristayaasha iyo tignoolajiyada la midka ah ee caawinta. Haddii curiyaha dumaya uu si caadi ah u xidhan yahay, waa inuu lahaadaa qiime aria-expanded="false"
. Haddii aad dejisay curiyaha dumin kara inuu si caadi ah u furmo adoo isticmaalaya in
fasalka, dhigaria-expanded="true"
kontaroolada. Plugin-ku si toos ah ayuu u rogi doonaa sifadan iyadoo lagu salaynayo in walxaha burburi kara la furay ama la xidhay iyo in kale.
Intaa waxaa dheer, haddii qaybta kontoroolka ay beegsanayso hal unug oo dumin kara - tusaale ahaan data-target
sifadu waxay tilmaamaysaa id
doore - waxa aad ku dari kartaa aria-controls
sifo dheeraad ah qaybta kontoroolka, oo ay ku jirto id
curiyaha burburi kara. Akhristayaasha shaashada casriga ah iyo tignoolajiyada la midka ah ee caawinta ayaa isticmaala sifadan si ay u siiyaan isticmaalayaasha habab gaagaaban oo dheeri ah si ay si toos ah ugu socdaan walxaha burburi kara laftiisa.
Plugin-ka burburku wuxuu isticmaalaa dhawr fasal si uu u maareeyo qaadista culus:
.collapse
qariya waxa ku jira.collapse.in
waxay muujinaysaa nuxurka.collapsing
waxa lagu daraa marka kala guurku bilaabmo, lagana saaro marka uu dhamaadoFasaladaan waxaa laga heli karaacomponent-animations.less
.
Kaliya ku dar data-toggle="collapse"
oo a data-target
curiyaha si si toos ah loogu qoondeeyo xakamaynta shay burburi kara. Sifadu data-target
waxay aqbashaa xulashada CSS si loogu dabaqo burburka. U hubso inaad fasalka ku darto collapse
walxaha duminaya. Haddii aad rabto in uu furmo, ku dar fasalka dheeraadka ah in
.
Si loogu daro maamulka kooxda accordion u eg kantaroolka burburi kara, ku dar xogta sifada data-parent="#selector"
. Tixraac demo si aad u aragto tan ficil ahaan
Ku oggolow gacanta:
Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-
, sida ku jira data-parent=""
.
Magaca | nooca | default | sharaxaad |
---|---|---|---|
waalid | dooriye | been ah | Haddii la bixiyo doore, markaas dhammaan walxaha burburi kara ee hoos yimaada waalidka la cayimay waa la xidhi doonaa marka shaygan la tuso. (oo la mid ah hab-dhaqanka wadajirka ah ee dhaqanka - tani waxay ku xiran tahay panel fasalka) |
leexleex | booliyan | run | Wuxuu beddelaa cunsurka burburi kara marka la codsado |
.collapse(options)
Waxay u hawlgelisaa macluumaadkaaga sidii shay burburi kara. Aqbala ikhtiyaarka ikhtiyaariga ah object
.
.collapse('toggle')
U rogaa shay burburi kara si loo muujiyo ama loo qariyo. Ku soo noqda qofka soo wacay ka hor inta aan la muujin ama la qarin walxaha burburi kara (tusaale ka hor intaanay dhacdada shown.bs.collapse
ama hidden.bs.collapse
dhacdada dhicin).
.collapse('show')
Wuxuu muujiyaa shay burburi kara. Ku soo noqda qofka soo wacaya ka hor inta aan dhab ahaantii la muujin walxaha burburi kara (tusaale ka hor intaanay shown.bs.collapse
shilku dhicin).
.collapse('hide')
Qariyaa shay burburi kara. Ku soo noqda qofka soo wacay ka hor inta aan la qarin walxaha burburi kara (tusaale ka hor intaanay hidden.bs.collapse
shilku dhicin).
Fasalka burburka Bootstrap wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta burburka.
Nooca Dhacdada | Sharaxaada |
---|---|
show.bs.burbur | Dhacdadani waxay isla markaaba gubataa marka show habka tusaalaha la yiraahdo. |
la tusay.bs.burbur | Dhacdadan waxa la eryaa marka curiyaha burburay loo muujiyo isticmaalaha (waxay sugi doontaa inta CSS ka wareejinta la dhamaystirayo). |
qari.bs.burbur | Dhacdadan ayaa isla markiiba la eryaa marka hide habka loo waco. |
qarsoon.bs.burbur | Dhacdadan waxa la eryaa marka walxaha burburay laga qariyay isticmaalaha (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). |
Qayb musalsal ah oo loogu talagalay baaskiil wadida walxaha, sida carousel-ka.Carousels buul leh lama taageero.
Qaybta carouselku guud ahaan ma waafaqsana heerarka gelitaanka. Haddii aad u baahan tahay inaad u hoggaansanto, fadlan tixgeli xulashooyinka kale ee soo bandhigida macluumaadkaaga.
Bootstrap waxay si gaar ah u isticmaashaa CSS3 dhaqdhaqaaqyadeeda, laakiin Internet Explorer 8 & 9 ma taageeraan sifooyinka CSS ee lagama maarmaanka ah. Sidaa darteed, ma jiraan animations kala-guurka slide marka la isticmaalayo daalacashadan. Waxaan si ula kac ah u go'aansanay inaanan ku darin dib u dhaca ku salaysan jQuery ee kala guurka.
Fasalka .active
wuxuu u baahan yahay in lagu daro mid ka mid ah bogagga. Haddii kale, carouselku ma muuqan doono.
Qaybaha .glyphicon .glyphicon-chevron-left
iyo .glyphicon .glyphicon-chevron-right
fasallada daruuri uma baahna kontaroolada. Bootstrap wuxuu bixiyaa .icon-prev
iyo .icon-next
sida beddelka unicode ee cad.
Ku dar qoraallada boggagaaga si fudud oo leh .carousel-caption
curiyaha ku jira mid kasta .item
. Dhig HTML kasta oo ikhtiyaari ah halkaas oo si toos ah ayaa loo toosin doonaa oo loo qaabayn doonaa.
Karooselsku waxay u baahan yihiin isticmaalka id
weelka bannaanka ugu dambeeya (the .carousel
) si kontaroolada carouselku si habboon u shaqeeyaan. Marka lagu daro carousels badan, ama marka la beddelo carousel eeid
, hubi inaad cusboonaysiiso kontaroolada khuseeya.
Isticmaal sifada xogta si aad si fudud u xakamayso booska carouselka. data-slide
aqbala ereyada furaha prev
ama next
, kaas oo beddela booska slide marka loo eego booska uu hadda joogo. Haddii kale, isticmaal data-slide-to
si aad u gudbiso tusmaynta slide ceeriin ee carousel data-slide-to="2"
, kaas oo u beddelaya booska slide index gaar ah oo ka bilaabma0
.
Sifada data-ride="carousel"
waxa loo isticmaalaa in lagu calaamadiyo carousel-ka sida firfircoon ee ka bilaabmaya culayska bogga.Looma isticmaali karo marka lagu daro (kaadiraan iyo aan loo baahnayn) bilawga JavaScript cad ee isla carouselka.
Si gacanta ah ula wac carousel:
Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-
, sida ku jira data-interval=""
.
Magaca | nooca | default | sharaxaad |
---|---|---|---|
dhexda | tirada | 5000 | Qadarka wakhtiga dib u dhigista udhaxaysa si toos ah shay baaskiil wadida. Haddii ay been tahay, carousel si toos ah uma wareegeyso. |
hakad | xadhig | waxba | "hoos u dhac" | Haddii la dejiyo "hover" , waxay hakisaa baaskiil wadida karouselka oo daaran mouseenter dib u bilaabaya baaskiilka carouselka mouseleave . Haddii la dejiyo null , dul heehaabista karoosalka ma joojin doonto. |
duub | booliyan | run | Haddii carouselku si joogto ah u wareego ama uu yeesho joogsi adag. |
kiiboodhka | booliyan | run | Haddii carouselku uu ka falcelinayo dhacdooyinka kiiboodhka. |
.carousel(options)
Waxay ku bilawday carousel-ka ikhtiyaar ikhtiyaari ah object
oo bilaabay inuu ku dhex wado alaabta.
.carousel('cycle')
Wareegtada dhex mara alaabta carouselka bidix ilaa midig.
.carousel('pause')
Karoosalka ka joojiya in uu baaskiil ku dhex maro alaabta.
.carousel(number)
Wareega karooselka si uu u sameeyo jir gaar ah (0 ku salaysan, oo la mid ah array).
.carousel('prev')
Wareegto shayga hore
.carousel('next')
Wareegto shayga xiga
Fasalka carousel ee Bootstrap wuxuu daaha ka qaadaa laba dhacdo oo loogu talagalay in lagu xidho shaqeynta carousel.
Labada dhacdoba waxay leeyihiin waxyaabo dheeraad ah oo soo socda:
direction
: Jihada uu carouselku u sii jeedo (ama "left"
ama "right"
).relatedTarget
: Cunsurka DOM ee meesha lagu sibiibi sida shayga firfircoon.Dhammaan dhacdooyinka carousel-ka waxaa lagu ridaa carouselka laftiisa (ie at the <div class="carousel">
).
Nooca Dhacdada | Sharaxaada |
---|---|
slide.bs.carousel | Dhacdadani waxay isla markiiba gubtaa marka slide habka tusaale ahaan loo yeedho. |
slid.bs.carousel | Dhacdadan waxa la eryaa marka carouselku dhammeeyo kala-guurka slide-ka. |
Plugin position: fixed;
-ku wuu daaraa oo demi doonaa, isagoo ku dayanaya saamaynta lagu helay position: sticky;
. Subnavigation-ka dhanka midig waa muujinta tooska ah ee plugin lifaaqa ah.
Isticmaal plugin-ka lifaaqa ah adigoo isticmaalaya sifooyinka xogta ama gacanta adoo isticmaalaya JavaScript adiga kuu gaar ah. Labada xaaladoodba, waa inaad bixisa CSS meelaynta iyo ballaca macluumaadkaaga ku lifaaqan.
Fiiro gaar ah: Ha u isticmaalin plugin affix-ka shay ku jira qayb meelaysan, sida tiir la jiiday ama la riixay, sababtuna tahay bug samaynta Safari .
Plugin-ka lifaaqa ah wuxuu u dhexeeyaa saddex fasal, mid walbana wuxuu matalaa gobol gaar ah: .affix
, .affix-top
, iyo .affix-bottom
. Waa inaad bixisaa qaababka, marka laga reebo position: fixed;
on .affix
, waayo, fasalada naftaada (madax banaan plugin this) si ay u maareeyaan boosaska dhabta ah.
Waa kan sida uu u shaqeeyo affix-ku:
.affix-top
si uu u muujiyo curiyaha inuu ku jiro booska ugu sarreeya. Halkaa marka ay marayso meelaynta CSS looma baahna..affix
beddelka .affix-top
iyo dejintaposition: fixed;
(waxaa bixiyay Bootstrap's CSS)..affix
beddelaa .affix-bottom
. Maaddaama ay dhimisyadu yihiin ikhtiyaari, dejinta mid waxay kaaga baahan tahay inaad dejiso CSS-da ku habboon. Xaaladdan, ku dar position: absolute;
marka loo baahdo. Plugin waxa ay isticmaashaa sifada xogta ama ikhtiyaarka JavaScript si loo go'aamiyo meesha meesha laga dhigo curiyaha.Raac tillaabooyinka kore si aad u dejiso CSS-gaaga mid ka mid ah fursadaha isticmaalka ee hoose.
Si aad si sahal ah ugu darto habdhaqanka lifaaqa shay kasta, kaliya ku dar data-spy="affix"
walxaha aad rabto in aad basaasto. Isticmaal offsets si aad u qeexdo goorta la beddelayo ku dhejinta curiyaha.
Ka wac plugin ku lifaaqan JavaScript:
Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-
, sida ku jira data-offset-top="200"
.
Magaca | nooca | default | sharaxaad |
---|---|---|---|
dhimis | lambarka | shaqada | walax | 10 | Pixels si looga saaro shaashadda marka la xisaabinayo booska duudduuban. Haddii hal nambar la bixiyo, kabista waxa lagu dabaqi doonaa jihooyinka sare iyo kuwa hooseba. Si aad u bixiso mid gaar ah, hoose iyo sare kaliya bixi shay offset: { top: 10 } ama offset: { top: 10, bottom: 5 } . Isticmaal shaqo marka aad u baahan tahay inaad si firfircoon u xisaabiso dhimista. |
bartilmaameed | xule | noodhka | element jQuery | window shayga _ |
Wuxuu qeexayaa qaybta la beegsanayo ee lifaaqa. |
.affix(options)
Waxay u hawlgelisaa macluumaadkaaga sidii nuxur ku dheggan. Aqbala ikhtiyaarka ikhtiyaariga ah object
.
.affix('checkPosition')
Waxay dib u xisaabisaa xaaladda lifaaqa iyadoo ku saleysan cabbirka, booska, iyo booska duubka ee walxaha khuseeya. Fasalada .affix
, .affix-top
, iyo .affix-bottom
fasalada ayaa lagu daraa ama laga saaray nuxurka ku lifaaqan si waafaqsan gobolka cusub. Habkani wuxuu u baahan yahay in loo yeedho mar kasta oo cabbirada nuxurka ku dhejisan ama curiyaha bartilmaameedka la beddelo, si loo hubiyo meelaynta saxda ah ee nuxurka ku dheggan.
Bootstrap's affix plugin wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta lifaaqa.
Nooca Dhacdada | Sharaxaada |
---|---|
ku dhejis.bs.dhabar | Dhacdadani waxay isla markiiba gubataa ka hor inta aan curiyaha lagu dhejin. |
ku dhejisan.bs.dhabar | Dhacdadan ayaa la eryaa ka dib marka curiyaha lagu dhejiyo. |
ku dhejin-sare.bs.ku dhejin | Dhacdadani waxay isla markiiba gubataa ka hor intaan curiyaha lagu dhejin-sare. |
ku dhejisan-sare.bs. ku dhejisan | Dhacdadan ayaa la eryaa ka dib marka curiyaha lagu dhejiyo-sare. |
ku dheji-hoos.bs.ku dhejin | Dhacdadani waxay dab ka kacaysaa isla markiiba ka hor inta aan curiyaha lagu dhejin hoosta. |
ku dhejisan-hoos.bs | Dhacdadan ayaa la eryaa ka dib marka curiyaha lagu dhejiyo hoosta. |