Ku saabsan moodooyinka

La habeeyey, laakiin dabacsan, qaado plugin-ka Javascript-ka caadiga ah oo leh shaqada ugu yar ee loo baahan yahay iyo cillado caqli-gal ah.

Tusaale taagan

Hoos waxaa ku yaal qaab la sameeyay.

Muujinta tooska ah

U beddel modal adigoo isticmaalaya javascript adigoo gujinaya badhanka hoose. Hoos ayay u soo degi doontaa oo waxay ka soo geli doontaa xagga sare ee bogga.

Isticmaalka bootstrap-modal

Ka wac modal ka Javascript:

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

Ikhtiyaarada

Calaamadayn

Waxaad si fudud ugu dhaqaajin kartaa modal-ka boggaaga adigoon qorin hal xariiq oo javascript ah. Kaliya deji data-toggle="modal"curiyaha kontoroolka leh data-target="#foo"ama href="#foo"u dhigma modal element id, oo marka la gujiyo, waxay bilaabi doontaa habkaaga.

Sidoo kale, si aad ugu darto ikhtiyaarada tusaalahaaga moodeelka ah, kaliya ku dar iyaga sifada xogta dheeraadka ah ee qaybta kontoroolka ama jaantuska laftiisa.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Qaabka bilawga </a>    

<div class = "Qarin modal" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "xir" data-dismiss = "modal" > × </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" data-dismiss = "modal" > Xir </a>   
    <a href = "#" class = "btn btn-primary" > Keydi isbeddelada </a>  
  </div>
</div>

Hababka

.modal(ikhtiyaar)

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

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

.modal('rogid')

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…
})

Ku saabsan hoos u dhaca

Ku dar liiska hoos-u-dhaca ku dhawaad ​​wax kasta oo ku jira Bootstrap oo wata plugin fudud. Bootstrap wuxuu leeyahay taageero menu hoos u dhac buuxa oo ku jira navbar, tabs, iyo kaniiniyada.

Tusaalooyinka

Guji isku xirka nav-ga ee ku yaala navbar iyo kaniiniyada hoose si aad u tijaabiso hoos u dhaca.

• Xiriirinta joogtada ah
• Hoos u dhigid
  • Action
  • Another action
  • Something else here
  • Separated link
• Hoos u dhaca 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Hoos u dhigida 3
  • Action
  • Another action
  • Something else here
  • Separated link

Isticmaalka bootstrap-dropdown.js

Hoos ka wac javascript:

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

Calaamadayn

Si aad si dhakhso ah ugu darto shaqada hoos u dhaca shay kasta kaliya ku dar oo dhibic data-toggle="dropdown"kasta oo bootstrap sax ah si toos ah ayaa loo hawlgelin doonaa.

<ul class = "nav nav-pills" > 
  <li class = "firfircoon" ><a href = "#" > Xiriirinta joogtada ah </a></li>  
  <li class = "hoos u dhac " id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "hoos u dhac" href = "#menu1" >   
      Hoos u dhigid
      <b class = "daryeel" </b> 
    </a>
    <ul class = "Dropdown-menu" > 
      <li><a href = "#" > Ficil </a></li> 
      <li><a href = "#" > Ficil kale </a></li> 
      <li><a href = "#" > Wax kale halkan </a></li> 
      <li class = "qaybiye" </li> 
      <li><a href = "#" > Xiriirinta goonida ah </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "hoos u dhac" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Hoos u dhigid
      <b class = "daryeel" </b> 
    </a>
    <ul class = "Dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Hababka

$().hoos u dhac()

Api barnaamijeed loogu talagalay hawlgelinta menus-ka ee navbar la bixiyay ama navigation tab.

Plugin ScrollSpy waxaa loogu talagalay si toos ah cusboonaysiinta bartilmaameedyada nav ku salaysan booska duudduuban.

Tusaale navbar leh scrollspy

Guji aagga hoose oo daawo cusboonaysiinta navigation Qodobada hoos u dhaca ayaa sidoo kale la iftiimin doonaa. Isku day!

Isticmaalka bootstrap-scrollspy.js

Ka wac qoraalka qoraalka ah Javascript:

$ ( '#navbar' ). scrollspy ()

Calaamadayn

Si aad si fudud ugu darto dabeecadda scrollspy to your topbar navigation, kaliya ku dar data-spy="scroll"walxaha aad rabto in aad basaasaan (inta badan sida caadiga ah tani waxay noqon doontaa jidhka).

<body data-spy = "rogad" > ... </body>  

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

Dhacdooyinka

Pluginkani waxa uu ku darayaa tabo degdeg ah, firfircooni leh iyo shaqaynta kiniinka si loogu gudbo nuxurka maxaliga ah.

Tusaalaha tabs

Guji tabsyada hoose si aad ugu kala beddesho muraayadaha qarsoon, xitaa iyada oo loo marayo liiska hoos u dhaca.

• Guriga
• Profile
• Hoos u dhigid
  • @fat
  • @mdo

Isticmaalka bootstrap-tab.js

Ku sahli tab tabsiyada Javascript-ka (tabo kasta waxa ay 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 adigoo si fudud u qeexaya data-toggle="tab"ama data-toggle="pill"curiye. 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" > Farriimaha </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" > Farriimaha </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
})

Ku saabsan Tilmaamaha Qalabka

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.

Tusaale ahaan isticmaalka qalabka

Ka dul rog xiriirka hoose si aad u aragto qalabyada:

Isticmaalka bootstrap-tooltip.js

Ku kiciya aaladda javascript:

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

Ikhtiyaarada

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 shay raadka.

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

Ku saabsan popovers

Ku dar waxyaabo yaryar oo dulsaaran, sida kuwa iPadka, shay kasta oo loogu talagalay macluumaadka labaad ee guriyeynta.

* Waxay u baahan tahay qalab si loogu daro

Tusaale boodboodka

Dul mar badhanka si aad u kiciso popover-ka

Isticmaalka bootstrap-popover.js

U oggolow popovers iyada oo loo marayo Javascript:

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

Ikhtiyaarada

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('toggle')

Wuxuu rogaa curiyayaasha soo booda

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

Ku saabsan digniinaha

Plugin-ka digniinta waa fasal aad u yar oo loogu darayo shaqeynta dhow ee digniinaha.

Tusaale ahaan digniinaha

Plugin-ka digniinta wuxuu ku shaqeeyaa fariimaha digniinta joogtada ah, wuxuuna xannibaa fariimaha.

Isticmaalka bootstrap-alert.js

U oggolow cayrinta digniinta iyada oo loo marayo Javascript:

$ ( ". heegan" ). heegan ()

Calaamadayn

Kaliya ku dar data-dismiss="alert"batoonkaaga 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 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…
})

Ku saabsan

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

Tusaale ahaan isticmaal

U isticmaal badhamada furaha gobolada iyo beddelka

Isticmaalka bootstrap-button.js

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.

<!-- Ku dar data-toggle="button" si aad u dhaqaajiso togging hal badhan -->
<button class = "btn" data-toggle = "button" > Kelida Toggle </button>  
 
<!-- Ku dar data-toggle="buttons-checkbox" qaabka sanduuqa jeeg-rogista ee btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Bidix </button> 
  <button class = "btn" > Dhexe </button> 
  <button class = "btn" > Midig </button> 
</div>
 
<!-- Ku dar data-toggle="buttons-radio" qaabka raadiyaha ee btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Bidix </button> 
  <button class = "btn" > Dhexe </button> 
  <button class = "btn" > Midig </button> 
</div>

Hababka

$().badhanka('toogag')

Beddelayaa gobolka riix Siinaya badhanka muuqaalka in la hawlgeliyay.

<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 class = "btn" data-loading-text = "qalabaynta alaabta..." > ... </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 class = "btn" data-complete-text = "dhamaatay!" > ... </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 Transition in lagu daro.

Tusaale accordion

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

Isticmaalka bootstrap-collapse.js

Ku oggolow Javascript:

$ ( ". dumay" ). burbur ()

Ikhtiyaarada

Calaamadayn

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.

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

Hababka

.burbur (ikhtiyaar)

Waxay u hawlgelisaa macluumaadkaaga sidii shay burburi kara. Aqbala ikhtiyaarka ikhtiyaarka 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')

Waxay qarisaa 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…
})

Ku saabsan

Qalab guud oo loogu talagalay baaskiil wadista walxaha. A rery-go-wareeg ah.

Tusaale carousel

Hoos ka daawo muuqaalka muuqaalka

Calaamadda thumbnail-ka koowaad

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.

‹ ›

Isticmaalka bootstrap-carousel.js

Ka wac Javascript:

$ ( '.carousel' ). carousel ()

Ikhtiyaarada

Calaamadayn

Sifooyinka xogta waxaa loo isticmaalaa kontarooladii hore iyo kan xiga. Hoos ka eeg calaamadaynta tusaalaha.

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

Hababka

.carousel(doorashooyinka)

Waxay ku bilawdaa 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.

Ku saabsan

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

Tusaale

Bilow ku qor goobta hoose si aad u muujiso natiijooyinka nooca-head.

Isticmaalka bootstrap-typeahead.js

Ka wac typeahead adigoo isticmaalaya javascript:

$ ( '.typehead' ). qoriga ()

Ikhtiyaarada

Calaamadayn

Ku dar sifada xogta si aad u diiwaan geliso shay leh shaqaynta nooca-head.

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

Hababka

.typehead(ikhtiyaarada)

Wuxuu ku bilaabayaa wax gelinta oo leh madax-madaxeedka.