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').

Khilaaf ma jiro

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 .noConflictkartaa plugin-ka aad rabto inaad dib u soo celiso qiimaha.

var bootstrapButton = $ . fn . badhanka _ noConflict () // ku soo celi badhanka $.fn.qiimihii hore loo qoondeeyay 
$ . fn . bootstrapBtn = bootstrapButton             // sii $() .bootstrapBtn shaqada bootstrap

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 yareeyey) , looma baahna in lagu daro tan-horay ayay u jirtaa.

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 = "hoos u dhac" xogta-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 programmatic ah oo loogu rogaayo menu-yada ee navbar la bixiyay ama tabo-wareejinta.

Tusaale ahaan navbar

Plugin ScrollSpy waxaa loogu talagalay si toos ah cusboonaysiinta bartilmaameedyada nav ku salaysan booska duudduuban. 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 degdeg ah, firfircoon si aad ugu gudubto muraayadaha nuxurka gudaha, xitaa iyada oo loo marayo menus-hoosaadka.

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.

Sababaha waxqabadka awgood, aaladda tip-ka iyo popover data-apis ayaa door biday, taasoo la macno ah in aad adigu bilawdo .

Ka dul rog xiriirka hoose si aad u aragto aaladaha:

Afar jiho

Tilmaamaha qalabka ee kooxaha wax gelinta

Markaad isticmaalayso qalab-tips iyo popovers kooxaha gelinta Bootstrap, waa inaad dejisaa containerikhtiyaarka (hoos ku qoran) si aad uga fogaato waxyeelooyinka aan loo baahnayn.

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

<a href = "#" data-toggle = "tooltip" title = "tooltip first" > i dul heehaab </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 shay raadka.

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

.tooltip('burbur')

Qariyaa oo burburiyaa aaladda curiyaha.

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

Tusaalooyinka

Ku dar waxyaabo yaryar oo dulsaaran, sida kuwa iPadka, shay kasta oo loogu talagalay macluumaadka labaad ee guriyeynta. Dul mar 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 macluumaadka ku jira datasifo.

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 rabto inaad isticmaasho kaliya caddee ikhtiyaarka xulashada.

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

$() digtoonaan()

Waxay ku duubtaa dhammaan digniinaha oo leh shaqeyn dhow. Si ogeysiisyadaadu u soo baxaan marka la xiro, hubi inay haystaan .fade​​​​iyo .infasalka 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 xaalad rarid badhanka.

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

Kelida beddelka

Ku dar data-toggle="button"si aad dhaqaajiso togging hal badhan.

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

Sanduuqa hubinta

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

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

Raadiyaha

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

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Bidix </button>  
  <button type = "button" class = "btn btn-primary" > Dhexe </button>  
  <button type = "button" class = "btn btn-primary" > 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 ku beddelaa qoraalka qoraalka. Qoraalka soo dejinta waa in lagu qeexaa qaybta badhanka iyadoo la adeegsanayo sifada xogta 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

Annaga 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 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

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" >  
  <ol class = "carousel-indexators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "firfircoon" </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" </li>  
  </ol>
  <!-- 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

Isticmaal sifada xogta si aad si fudud u xakamayso booska carouselka. data-slideaqbala ereyada furaha prevama next, kaas oo beddela booska slide marka loo eego booska uu hadda joogo. Haddii kale, isticmaal data-slide-tosi aad u gudbiso tusmaynta slide ceeriin ee carousel data-slide-to="2", kaas oo ka boodaya booska duleelka tusmo gaar ah oo ka bilaabmaya 0.

Iyadoo loo marayo JavaScript

Si gacanta ah ula wac carousel:

$ ( '.carousel' ). carousel ()

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScriptz. 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 ku-qabsiga shaqada carousel-ka.

Tusaale

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

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

Waxaad u baahan doontaa inaad dejiso autocomplete="off"si aad uga ilaaliso menu-yada browser-ka caadiga ah inay ka soo baxaan hoos-u-dhaca nooca Bootstrap.

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 hoose ee 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 ()

Ikhtiyaarada

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