Shakhsi ama la ururiyey

Plugins-ka si gaar ah ayaa loogu dari karaa (inkasta oo qaarkood ay u baahdeen ku-tiirsanaan), ama dhammaan hal mar. Labada bootstrap.js iyo bootstrap.min.js waxay ka kooban yihiin dhammaan plugins hal fayl.

Sifooyinka xogta

Waxaad isticmaali kartaa dhammaan Bootstrap plugins adiga oo isticmaalaya API calaamadaynta adiga oo aan qorin hal xariiq oo JavaScript ah. Kani waa API 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 curyaamiyo sifada xogta API annagoo ka saarayna dhammaan dhacdooyinka jidhka ee ku jira magaca ''data-api''. Tani waxay u egtahay sidan:

$ ( 'jirka' ). off ( '.data-api' )

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:

$ ( 'jirka' ). off ( '.alert.data-api' )

API Programmatic

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.

$ ( ".btn.danger" ). badhanka ( "rogid" ). addClass ( "dufan" )

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):

$ ( "#myModal" ). modal () // lagu bilaabay cillado                       
$ ( "#myModal" ). modal ({ kiiboodhka : been }) // lagu bilaabay iyada oo aan lahayn kiiboobo     
$ ( "#myModal" ). modal ( 'show' ) // bilaaba oo ku baaqaa bandhiga isla markaaba                

Plugin kasta waxa kale oo uu soo bandhigaa dhismeheeda ceeriin ee dhismaha 'Constructor': $.fn.popover.Constructor. Haddii aad jeclaan lahayd inaad hesho tusaale plugin gaar ah, si toos ah uga soo celi curiyaha: $('[rel=popover]').data('popover').

Dhacdooyinka

Bootstrap waxay siisaa dhacdooyin caado u ah inta badan filalka gaarka ah ee plugin. Guud ahaan, kuwani waxay ku yimaadaan qaab aan dhammaad lahayn oo hore uga qayb-qaatay-halkaas oo aan dhammayn (tusaale ahaan show) uu kiciyo bilawga dhacdada, iyo qaabkeedii hore ee ka qaybqaadashada (tus. shown) uu kiciyo dhammaystirka ficilka.

Dhammaan dhacdooyinka aan dhamaadka lahayn waxay bixiyaan ka hortagga shaqeynta. Tani waxay siinaysaa awoodda lagu joojinayo fulinta ficilka ka hor inta uusan bilaaban.

$ ( '#myModal' ). daaran ( 'show' , function ( e ) {   
    haddii (! xog ) soo celiso e . ka hortaggaDefault () // waxay joojisaa habka in la tuso   
})

Ku saabsan kala-guurka

Saamaynta kala-guurka fudud, ku dar bootstrap-transition.js hal mar oo ay la socdaan faylalka kale ee JS. Haddii aad isticmaalayso bootstrap.js la soo ururiyey (ama la dhimay), looma baahna in tan lagu daro — waaba halkaas.

Isticmaal kiisaska

Tusaalayaal dhowr ah oo ku saabsan plugin-ka wareejinta:

• Simbiriirixid ama libdhaysa moodalka
• Baabi'inta tabs
• Diidmada digniinaha
• Muraayadaha carousel-ka simbiriirixaya

Tusaalooyinka

Hababka waa la habeeyey, laakiin dabacsanaan, waxay kiciyaan wada hadal oo leh shaqada ugu yar ee loo baahan yahay iyo khaladaad caqli gal ah.

Tusaale taagan

Hab la sameeyay oo leh madax, jidh, iyo hab ficil oo ku jira lugta.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "run" > × </button>    
    <h3> Madaxa Modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Hal jidh oo wanaagsan… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> Xir </a> _  
    <a href = "#" class = "btn btn-primary" > Keydi isbeddelada </a>  
  </div>
</div>

Muujinta tooska ah

U beddel habka JavaScript adoo gujinaya badhanka hoose. Hoos ayay u soo degi doontaa oo waxay ka soo geli doontaa xagga sare ee bogga.

<!-- Button si loo kiciyo modal -->
<a href = "#myModal" doorka = "button" class = "btn" data-toggle = "modal" > Bilaw demo modal </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" doorka = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "run" >      
  <div class = "modal-header" > 
    <button type = "button" class = "xir" data-dismiss = "modal" aria-hidden = "run" > × </button>    
    <h3 id = "myModalLabel" > Madaxa qaabka </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Hal jidh oo wanaagsan… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data- dismiss = "modal" aria-hidden = "run" > Xir </button>   
    <button class = "btn btn-primary" > Keydi isbeddelada </button> 
  </div>
</div>

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

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.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Qaabka bilawga </button>   

Iyadoo loo marayo JavaScript

Wac modal leh id myModalleh hal xariiq oo JavaScript ah:

$ ( '#myModal' ). moodal ( ikhtiyaar )

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Hababka

.modal(ikhtiyaar)

Waxay u hawlgelisaa macluumaadkaaga qaab habaysan. Aqbala ikhtiyaarka ikhtiyaariga ah object.

$ ( '#myModal' ). modal ({
  kiiboodhka : been 
})

.modal('toogag')

Gacanta ayaa u roga modal

$ ( '#myModal' ). moodal ( 'rogrogmi kara' )

.modal('show')

Gacanta ayaa u fura modal

$ ( '#myModal' ). moodal ( 'show' )

.modal('Qarin')

Gacanta ayaa u qarisa habka.

$ ( '#myModal' ). modal ( 'Qarin' )

Dhacdooyinka

Bootstrap's modal class wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay in lagu xidho shaqaynta modal.

$ ( '#myModal' ). daaran ( 'Qarin' , function () {   
  // wax samee…
})

Tusaalooyinka

Ku dar liiska hoos-u-dhaca wax kasta oo leh plugin-kan fudud, oo ay ku jiraan navbar, tabs, iyo kaniiniyada.

Gudaha navbar

Gudaha tabs

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Ku dar data-toggle="dropdown"xiriiriye ama badhan si aad u beddesho hoos u dhaca.

<div class = "hoos u dhac" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > kicinta hoos u dhaca </a>   
  <ul class = "Dropdown-menu" doorka = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Si aad URL-yada u sii ahaato, isticmaal data-targetsifada beddelkii href="#".

<div class = "hoos u dhac" > 
  <a class = "dropdown-toggle" id = "dLabel" doorka = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Hoos u dhigid
    <b class = "daryeel" </b> 
  </a>
  <ul class = "Dropdown-menu" doorka = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Iyadoo loo marayo JavaScript

Hoos ka wac JavaScript:

$ ( '. dropdown-toggle' ). hoos u dhac ()

Ikhtiyaarada

Midna

Hababka

$().hoos u dhigida('rogid')

Api barnaamijeed ah oo loogu rogaayo menu-yada ee navbar la bixiyay ama tabo-wareejinta.

Tusaale ahaan navbar

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.

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Si aad si fudud ugu darto dabeecadda scrollspy to your topbar navigation, kaliya ku dar data-spy="scroll"element aad rabto in aad basaasaan on (inta badan sida caadiga ah tani waxay noqon doontaa jidhka) iyo data-target=".navbar"in la doorto mid ka mid ah nav in la isticmaalo. Waxaad u baahan doontaa inaad isticmaasho scrollspy oo leh .navqayb.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

Iyadoo loo marayo JavaScript

Ka wac qoraalka qoraalka adigoo isticmaalaya JavaScript:

$ ( '#navbar' ). scrollspy ()

Hababka

.scrollspy('cusbooneysii')

Markaad isticmaalayso scrollspy iyadoo lala kaashanayo ku darista ama ka saarida walxaha DOM, waxaad u baahan doontaa inaad wacdo habka dib u cusboonaysiinta sida:

$ ( '[xogta-basaasiga = "booq" ). mid kasta ( shaqo () {  
  var $ Spy = $ ( kan ). scrollspy ( 'cusbooneysii' )
}

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-offset="".

Dhacdooyinka

Tusaalaha tabs

Ku dar hawlqabad tab dhaq-dhaqaaq leh oo ku-meel-gaar ah iyada oo loo marayo muraayadaha macluumaadka gudaha, xitaa iyada oo loo marayo liiska hoos-u-dhaca.

Isticmaalka

U oggolow tab tabsiyada JavaScript-ka (tabo kastaa waxay u baahan tahay in si gaar ah loo hawlgeliyo):

$ ( '#myTab a' ). guji ( function ( e ) {  
  e . ka hortaggaDefault ();
  $ ( kan ). tab ( 'show' );
})

Waxaad u dhaqaajin kartaa tabs shaqsiyeed dhowr siyaabood:

$ ( '#myTab a[href="#profile"]' ). tab ( 'show' ); // Dooro tab magac ahaan 
$ ( '#myTab a: first' ). tab ( 'show' ); // Dooro tab ugu horeysa 
$ ( '#myTab a: last' ). tab ( 'show' ); // Dooro tab ugu dambeeya 
$ ( '#myTab li:eq(2) a' ). tab ( 'show' ); // Dooro tab saddexaad (0-indexed) 

Calaamadayn

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 naviyo nav-tabsxiisadaha tab ulwaxay dabaqi doontaa habaynta tabka Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Guriga </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Fariimaha </a></li>  
  <li><a href = "#settings" data-toggle = "tab"> Settings </a></li >  
</ul>

Hababka

$() tab

Wuxuu hawlgeliyaa curiyaha tab iyo weelka ka kooban. Tabku waa inuu lahaadaa mid data-targetama meel la hrefbeegsanayo noodhka weelka ee DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "firfircoon" ><a href = "#guriga" > Guriga </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#farimaha" > Fariimaha </a></li> 
  <li><a href = "#Settings" > Dejinta </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "guri" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "farimaha" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( shaqada () {  
    $ ( '#myTab a: last' ). tab ( 'show' );
  })
</script>

Dhacdooyinka

$ ( 'a[data-toggle="tab"]' ). daaran ( 'la tusay' , shaqada ( e ) {   
  e . bartilmaameed // tab firfircoon
  e . laxiriiraTarget // tab hore
})

Tusaalooyinka

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.

Ka dul rog xiriirka hoose si aad u aragto qalabyada:

Afar jiho

Isticmaalka

Ku kiciya tilmaanta aalada JavaScript:

$ ( '#tusaale' ). qalab ( ikhtiyaar )

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-animation="".

Calaamadayn

Sababaha waxqabadka awgood, Tooltip iyo Popover data-apis ayaa door biday. Haddii aad jeclaan lahayd inaad isticmaasho kaliya caddee ikhtiyaarka doorashada.

<a href = "#" rel = "tooltip" title = "tooltip first" > dusha iga bood </a>   

Hababka

$().tooltip(ikhtiyaar)

Wuxuu ku lifaaqaa gacan hayaha qalab ururinta walxaha.

.tooltip('show')

Waxay daaha ka qaadaysaa aaladda curiyaha

$ ( '# element' ). qalab tip ( 'show' )

.tooltip('Qarin')

Wuxuu qariyaa calaamadda curiyaha.

$ ( '# element' ). qalab ( 'Qarin' )

.tooltip('Toggle')

Beddelayaa aaladda curiyaha

$ ( '# element' ). Tooltip ( 'rogid' )

.tooltip('burbur')

Qariyaa oo baabi'iyaa aaladda curiyaha.

$ ( '# element' ). qalab tilmaan ( 'burbur' )

Tusaalooyinka

Ku dar waxyaabo yaryar oo dulsaaran, sida kuwa iPad-ka, shay kasta oo loogu talagalay macluumaadka labaad ee guriyeynta. Ku dul rog badhanka si aad u kiciso popover-ka. Waxay u baahan tahay tilmaan -bixinta in lagu daro.

popover taagan

Afar doorasho ayaa diyaar ah: sare, midig, hoose, iyo bidix oo toosan.

Ma jiro calaamad muujinaysa sida popovers laga soo saaray JavaScript iyo waxa ku jira adata sifo.

Muujinta tooska ah

Afar jiho

Isticmaalka

U oggolow popovers iyada oo loo marayo JavaScript:

$ ( '#tusaale' ). popover ( doorashooyinka )

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-animation="".

Calaamadayn

Sababaha waxqabadka awgood, Tooltip iyo Popover data-apis ayaa door biday. Haddii aad jeclaan lahayd inaad isticmaasho kaliya caddee ikhtiyaarka doorashada.

Hababka

$().popover(ikhtiyaar)

Wuxuu u bilaabaa popovers ururinta curiyaha.

.popover('show')

Waxay daaha ka qaadaysaa curiyayaasha soo booda.

$ ( '# element' ). popover ( 'muuji' )

.popover('Qarin')

Waxay qarisaa curiyayaasha soo booda.

$ ( '# element' ). popover ( 'Qarin' )

.popover('rogrogmi')

Wuxuu rogaa curiyayaasha soo booda

$ ( '# element' ). popover ( "rogrogmi" )

.popover('burbur')

Qariyaa oo baabi'iyaa popover element.

$ ( '# element' ). popover ( 'burbur' )

Tusaale ahaan digniinaha

Ku dar shaqada ka eryida dhammaan fariimaha digniinta leh ee plugin this.

Isticmaalka

U oggolow cayrinta digniinta iyada oo loo marayo JavaScript:

$ ( ". heegan" ). heegan ()

Calaamadayn

Kaliya ku dar data-dismiss="alert"badhanka ku dhow si aad si toos ah u siiso hawlgelinta heeganka dhow.

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

Hababka

$() digniin()

Waxay ku duubtaa dhammaan digniinaha oo leh shaqeyn dhow. Si ogeysiisyadaadu u soo baxaan marka la xiro, hubi inay hayaan .fadeiyo.in fasalka mar hore lagu dabaqay iyaga.

digniin ('ku dhow')

Xidhaa digniinta

$ ( ". heegan" ). heegan ( 'xir' )

Dhacdooyinka

Fasalka feejignaanta ee Bootstrap wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay in lagu xidho shaqaynta heeganka.

$ ( '# feejignaantayda' ). xidhi ( 'xiran' , function () {   
  // wax samee…
})

Tusaale ahaan isticmaal

Wax badan ku samee badhamada. Xakamaynta badhanka ayaa sheegaysa ama samee kooxo badhamada qaybo badan sida qalabyada.

Dawlad leh

Ku dar data-loading-text="Loading..." si aad u isticmaasho xaalada rarka ee badhanka.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Xaaladda soo dejinta </button>   

Kelida beddelka

Ku dar xogta-toggle="button" si aad u dhaqaajiso toggling hal badhan.

<button type = "button" class = "btn" data-toggle = "button" > Kelida Toggle </button>   

Sanduuqa hubinta

Ku dar data-toggle="buttons-checkbox" qaabka sanduuqa jeeg-rogista ee btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn" > Bidix </button>  
  <button type = "button" class = "btn" > Dhexe </button>  
  <button type = "button" class = "btn" > Midig </button>  
</div>

Raadiyaha

Ku dar data-toggle="buttons-radio" qaabka raadiyaha ee btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn" > Bidix </button>  
  <button type = "button" class = "btn" > Dhexe </button>  
  <button type = "button" class = "btn" > Midig </button>  
</div>

Isticmaalka

Daar badhamada JavaScript:

$ ( '.nav-tabs' ). badhanka ()

Calaamadayn

Sifooyinka xogtu waxay udub dhexaad u yihiin furaha badhanka. Fiiri koodhka tusaalaha hoose ee noocyada calaamadaynta ee kala duwan.

Ikhtiyaarada

Midna

Hababka

$().badhanka('toogag')

Beddelayaa gobolka riix Siinaya badhanka muuqaalka in la hawlgeliyay.

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().badhanka('loading')

Waxay dejisaa xaalada badhanka si loo raro - wuxuu demiyaa badhanka oo wuxuu beddelaa qoraalka qoraalka. Qoraalka soo dejinta waa in lagu qeexaa qaybta badhanka iyadoo la adeegsanayo xogta sifada data-loading-text.

<button type = "button" class = "btn" data-loading-text = "wax rarista..." > ... </button>    

$().badhanka('dib u dajin')

Dib u dajinaysaa xaalada badhanka - waxay ku badashaa qoraalka qoraalka asalka ah.

$() badhan (xadhig)

Dib u dajiya xaalada badhanka - waxay ku badashaa qoraalka xaalad kasta oo qoraal ah oo qeexan.

<button type = "button" class = "btn" data-complete-text = "dhammeeyey!" > ... </button>    
<script>
  $ ( '.btn' ). badhanka ( 'dhamaystiran' )
</script>

Ku saabsan

U hel qaababka aasaasiga ah iyo taageerada dabacsan ee qaybaha burburi kara sida accordions iyo navigation.

* Waxay u baahan tahay plugin Transitions in lagu daro.

Tusaale accordion

Anaga oo adeegsanayna plugin burburka, waxaan dhisnay widget qaab accordion fudud:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Kooxda La Burburin karo Shayga #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body burburay gudaha" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Kooxda La Burburin karo Shayga #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Waxa kale oo aad isticmaali kartaa plugin la'aanteed calaamadda accordion. Samee badhanka beddel fidinta iyo burburka shay kale.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  fudud oo la dumin karo
</button>
 
<div id = "demo" class = "ku dumi" > … </div>  

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Kaliya ku dar data-toggle="collapse"oo a data-targetcuriye si si toos ah loogu qoondeeyo xakamaynta shay burburi kara. Sifadu data-targetwaxay aqbashaa css-dooriyaha si loogu dabaqo burburka. U hubso inaad fasalka ku darto collapsewalxaha duminaya. Haddii aad rabto inuu furmo, ku dar fasalka dheeraadka ahin .

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

Iyadoo loo marayo JavaScript

Ku oggolow gacanta:

$ ( ". dumay" ). burbur ()

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-parent="".

Hababka

.burbur (ikhtiyaar)

Waxay u hawlgelisaa macluumaadkaaga sidii shay burburi kara. Aqbala ikhtiyaarka ikhtiyaariga ah object.

$ ( '#my Collapsible' ). burbur ({
  leexo : been 
})

.burbur('rogid')

U rogaa shay burburi kara si loo muujiyo ama loo qariyo.

.burbur ('show')

Wuxuu muujiyaa shay burburi kara.

.burbur('qari')

Qariyaa shay burburi kara.

Dhacdooyinka

Fasalka burburka Bootstrap wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta burburka.

$ ( '#my Collapsible' ). daaran ( 'Qarin' , function () {   
  // wax samee…
})

Tusaale carousel

Muuqaalka hoose wuxuu muujinayaa plugin guud iyo qayb loogu talagalay baaskiil wadista walxaha sida carousel-ka.

Summada koowaad ee thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id un mi porta gravida iyo eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Calaamadda thumbnail labaad

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id un mi porta gravida iyo eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Calaamadda thumbnail ee saddexaad

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id un mi porta gravida iyo eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Alaabta carousel -->
  <div class = "carousel-inner" > 
    <div class = "wax firfircoon" > … </div> 
    <div class = "shay" > … </div> 
    <div class = "shay" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "ku xiga" > & rsaquo; </a>   
</div>

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

...

Iyadoo loo marayo JavaScript

Si gacanta ah ula wac carousel:

$ ( '.carousel' ). carousel ()

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-interval="".

Hababka

.carousel(doorashooyinka)

Waxay ku bilawday carousel-ka ikhtiyaar ikhtiyaari ah objectoo bilaabay inuu ku dhex wado alaabta.

$ ( '.carousel' ). carousel ({
  inta u dhaxaysa : 2000 
})

.carousel('wareeg')

Wareegtada dhex mara alaabta carouselka bidix ilaa midig.

.carousel('hakid')

Karoosalka ka joojiya in uu baaskiil ku dhex maro alaabta.

.carousel (lambar)

Wareega karooselka si uu u sameeyo jir gaar ah (0 ku salaysan, oo la mid ah array).

.carousel(' hore')

Wareegto shayga hore

carousel ('ka xiga')

Wareegto shayga xiga

Dhacdooyinka

Fasalka carousel ee Bootstrap wuxuu daaha ka qaadaa laba dhacdo oo loogu talagalay in lagu xidho shaqeynta carousel.

Tusaale

Qalab aasaasi ah, oo si fudud loo fidiyay si dhakhso ah loogu abuuro madax-qoritaan xarrago leh oo leh qaab kasta oo qoraal ah.

<input type = "text" data-provide = "typeahead" >  

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Ku dar sifada xogta si aad u diiwaan geliso shay leh shaqaynta nooca-head sida ku cad tusaalaha kore.

Iyadoo loo marayo JavaScript

Si gacanta ugu wac nooca-head:

$ ( '.typehead' ). qoriga ()

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-source="".

Hababka

.typehead(ikhtiyaarada)

Wuxuu ku bilaabayaa wax gelinta oo leh madax-madaxeedka.

Tusaale

Navigation hoosaadka bidix waa demo toos ah ee plugin lifaaqa ah.

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Si aad si sahal ah ugu darto habdhaqanka lifaaqa shay kasta, kaliya ku dar data-spy="affix"walxaha aad rabto in aad basaasto. Ka dib isticmaal offsets si aad u qeexdo goorta la beddelo ku xidhka curiyaha daar iyo dami.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Iyadoo loo marayo JavaScript

Ka wac plugin ku lifaaqan JavaScript:

$ ( '#navbar' ). ku dheji ()

Hababka

.affix('cusbooneysii')

Markaad isticmaalayso lifaaqa iyada oo la socota ku darista ama ka saarista walxaha DOM, waxaad u baahan doontaa inaad wacdo habka dib u cusbooneysiinta:

$ ( '[xogta-basaasiga = "affix"]' ). mid kasta ( shaqo () {  
  $ ( kan ). ku dheji ( 'cusbooneysii' )
}

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-offset-top="200".