بىزنىڭ Modal قىستۇرمىمىز ئەنئەنىۋى مودېل js قىستۇرمىسىغا دەرىجىدىن تاشقىرى نېپىز بولۇپ ، twitter دا بىز تەلەپ قىلىدىغان يالىڭاچ ئىقتىدارلارنىلا ئۆز ئىچىگە ئالىدۇ.

چۈشۈرۈش

Bootstrap-modal نى ئىشلىتىش

$ ( '# my-modal' ). modal ( options )

تاللانما

ئىسمى	تىپى	كۆڭۈلدىكى	description
ئارقا كۆرۈنۈش	boolean, string	false	مودېل ئارقا كۆرۈنۈش ئېلېمېنتىنى ئۆز ئىچىگە ئالىدۇ. "static"ئارقا كۆرۈنۈشنى چەككەندە مودېلنىڭ تاقىلىشىنى خالىمىسىڭىز ئارقا كۆرۈنۈشنى تەڭشەڭ .
كۇنۇپكا تاختىسى	boolean	false	قېچىش كۇنۇپكىسى بېسىلغاندا مودېلنى تاقايدۇ
show	boolean	false	دەرس باشلاشتا مودېلنى ئاچىدۇ

Markup

بىر قۇر javascript يازمىسىڭىزمۇ بېتىڭىزدىكى مودېللارنى ئاسانلا قوزغىتالايسىز. ئېلېمېنتقا data-controls-modalمودېل ئېلېمېنت id غا ماس كېلىدىغان خاسلىق بېرىڭ ، چەككەندە ئۇ مودىلىڭىزنى قوزغىتىدۇ. مودېل تاللاشلارنى قوشۇش ئۈچۈن ، ئۇلارنى سانلىق مەلۇمات خاسلىقى سۈپىتىدە قوشۇڭ.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static"> قوزغىتىش مودېلى </a>    

ئەسكەرتىش ئەگەر مودىلىڭىزنىڭ جانلىنىشىنى ئۈمىد قىلسىڭىز ، ئېلېمېنتقا دەرس قوشۇڭ (.fade بۇنى .modalھەرىكەتتە كۆرۈش ئۈچۈن كۆرسەتمە دىن پايدىلىنىڭ).

Methods

.modal (تاللانما)

مەزمۇنلىرىڭىزنى مودېل سۈپىتىدە قوزغىتىدۇ. ئىختىيارى تاللاشلارنى قوبۇل قىلىدۇ object.

$ ( '# my-modal' ). modal ({
  كۇنۇپكا تاختىسى : راست 
})

.modal ('toggle')

قولدا مودېلنى ئالماشتۇرىدۇ.

$ ( '# my-modal' ). modal ( 'toggle' )

.modal ('show')

قولدا مودېل ئاچىدۇ.

$ ( '# my-modal' ). modal ( 'show' )

.modal ('hide')

قولدا مودېلنى يوشۇرىدۇ.

$ ( '# my-modal' ). modal ( 'hide' )

.modal (true)

ئېلېمېنتلارنىڭ مودېل سىنىپ ئۈلگىسىنى قايتۇرىدۇ.

$ ( '# my-modal' ). modal ( true )

ئەسكەرتىش ئۇنىڭدىن باشقا ، بۇنى ئەسلىگە كەلتۈرگىلى بولىدۇ $().data('modal').

Events

Bootstrap نىڭ مودېل سىنىپى مودېل ئىقتىدارغا باغلىنىش ئۈچۈن بىر قانچە ۋەقەنى ئاشكارىلىدى.

Event	چۈشەندۈرۈش
show	showمىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ .
كۆرسىتىلدى	بۇ ھادىسە مودېلنى ئىشلەتكۈچىگە كۆرۈنگەندە ئېتىلىدۇ (css ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).
يوشۇر	hideئۈلگە ئۇسۇلى چاقىرىلغاندا بۇ پائالىيەت دەرھال ئېتىۋېتىلىدۇ .
يوشۇرۇنغان	بۇ ھادىسە مودېل ئىشلەتكۈچىگە يوشۇرۇنغاندىن كېيىن چىقىرىلىدۇ (css ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).

$ ( '# my-modal' ). bind ( 'hidden' , function () {   
  // بىرەر ئىش قىل ...
})

Demo

Launch Modal

بۇ قىستۇرما bootstrap ئۈستى بالداق ياكى بەتكۈچ يولباشچىغا چۈشۈش ئۆز-ئارا تەسىر كۆرسىتىش ئۈچۈن.

چۈشۈرۈش

Bootstrap-dropdown.js نى ئىشلىتىش

$ ( '#topbar' ). dropdown ()

Markup

ھەر قانداق nav ئېلېمېنتىغا تېز سۈرئەتتە چۈشۈرۈش ئىقتىدارىنى قوشۇش ئۈچۈن ، data-dropdownخاسلىقنى ئىشلىتىڭ. ھەر قانداق ئىناۋەتلىك قوزغىتىش ئېغىزى چۈشۈش ئاپتوماتىك قوزغىتىلىدۇ.

<ul class = "بەتكۈچ" > 
  <li class = "active" > <a href = "#"> باش بەت </a> </li >  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle"> چۈشۈش </a> _  
    <ul class = "dropdown-menu" > 
      <li> <a href = "#"> ئىككىلەمچى ئۇلىنىش </a> </li> 
      <li> <a href = "#"> بۇ يەردە باشقا بىر نەرسە </a> </li> 
      <li class = "divider" > </li> 
      <li> <a href = "#"> باشقا ئۇلىنىش </a> </li> 
    </ul>
  </li>
</ul>

دىققەت ئەگەر ui دا بىر قانچە تۆۋەنلەش بار بولسا ، خاسلىقنى data-dropdownتېخىمۇ مۇھىم قاچا ئېلېمېنتىغا قوشۇشنى ئويلاڭ ..tabs.topbar

Methods

$ (). dropdown ()

بېرىلگەن توپ بالداق ياكى بەتكۈچ يول باشلاش ئۈچۈن تىزىملىكلەرنى قوزغىتىش ئۈچۈن پروگرامما خاراكتېرلىك api.

Demo

بۇ قىستۇرما bootstrap ئۈستى بالداققا scrollspy (ئاپتوماتىك يېڭىلاش nav) ئۆز-ئارا تەسىر كۆرسىتىش ئۈچۈن ئىشلىتىلىدۇ.

چۈشۈرۈش

Bootstrap-scrollspy.js نى ئىشلىتىش

$ ( '#topbar' ). scrollSpy ()

Markup

نامىڭىزغا سىيرىلما ھەرىكەتنى ئاسانلا قوشۇش ئۈچۈن ، data-scrollspyخاسلىقنى پەقەت .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Methods

$ (). scrollSpy ()

ئاپتوماتىك يول باشلاش كۇنۇپكىسىنى ئابونتلارنىڭ سىيرىلىش ئورنى قوزغىتىدۇ.

$ ( 'body> .topbar' ). scrollSpy ()

ئەسكەرتىش Topbar لەڭگەر بەلگىسىنىڭ چوقۇم ھەل قىلغىلى بولىدىغان id نىشانى بولۇشى كېرەك. مەسىلەن ، <a href="#home">home</a>چوقۇم dom دىكىگە ئوخشاش نەرسىگە ماس كېلىشى كېرەك <div id="home"></div>.

.scrollSpy ('يېڭىلاش')

سىيرىلما كەش ناۋ كۇنۇپكىسى ۋە بۆلەك ماسلاشتۇرالايدۇ. ئەگەر بۇ غەملەكنى يېڭىلاشقا ئېھتىياجلىق بولسىڭىز (ھەرىكەتچان مەزمۇن بولسا مۇمكىن) بۇ يېڭىلاش ئۇسۇلىنى چاقىرىڭ. ئەگەر سانلىق مەلۇمات خاسلىقىنى ئىشلىتىپ سىيرىلما بەلگىڭىزنى بەلگىلىگەن بولسىڭىز ، بەدەنگە يېڭىلاش دەپ تېلېفون قىلىڭ.

$ ( 'body' ). scrollSpy ( 'يېڭىلاش' )

Demo

بۇ بەتتىكى ئۈستى بالداق يول باشلاشنى تەكشۈرۈڭ.

بۇ قىستۇرما كۇنۇپكا ھالىتىنى باشقۇرۇش ئۈچۈن قوشۇمچە ئىقتىدار بىلەن تەمىنلەيدۇ.

چۈشۈرۈش

Bootstrap-buttons.js نى ئىشلىتىش

$ ( '.tabs' ). كۇنۇپكا ()

Methods

$ (). كۇنۇپكا ('toggle')

Toggles ھالەتنى ئىلگىرى سۈرىدۇ. قوزغىتىلغاندەك كۆرۈنۈشنى btn غا بېرىدۇ.

ئەسكەرتىشdata-toggle سىز خاسلىقنى ئىشلىتىپ بىر كۇنۇپكىنى ئاپتوماتىك قوزغىتىشنى قوزغىتالايسىز .

<button class = "btn" data-toggle = "toggle" > ... </button>   

$ (). كۇنۇپكا ('يۈكلەش')

كۇنۇپكا ھالىتىنى يۈكلەشكە تەڭشەيدۇ - كۇنۇپكىنى چەكلەيدۇ ۋە تېكىستنى يۈكلەش تېكىستىگە ئالماشتۇرىدۇ. تېكىستنى يۈكلەش سانلىق مەلۇمات خاسلىقى ئارقىلىق كۇنۇپكا ئېلېمېنتىغا ئېنىقلىما بېرىش كېرەك data-loading-text.

<button class = "btn" data-load-text = "نەرسە قاچىلاش ..." > ... </button>   

$ (). كۇنۇپكا ('reset')

كۇنۇپكا ھالىتىنى ئەسلىگە كەلتۈرىدۇ - تېكىستنى ئەسلى تېكىستكە ئالماشتۇرىدۇ.

$ (). كۇنۇپكا (string)

كۇنۇپكا ھالىتىنى ئەسلىگە كەلتۈرىدۇ - تېكىستنى ئېنىقلانغان تېكىست ھالىتىگە ئالماشتۇرىدۇ.

<button class = "btn" data-complete-text = "تامام!" > ... </button>   
<script>
  $ ('. btn'). كۇنۇپكا ('تامام')
</scrip>

Demo

Loading Demo Toggle Demo

بۇ قىستۇرما تېز ، ھەرىكەتچان بەتكۈچ ۋە دورا ئىقتىدارىنى قوشىدۇ.

چۈشۈرۈش

Bootstrap-tabs.js نى ئىشلىتىش

$ ( '.tabs' ). بەتكۈچ ()

Markup

data-tabsسىز پەقەت بىر ياكى data-pillsخاسلىق بېرىش ئارقىلىق ھېچقانداق javascript يازمايلا بىر بەتكۈچ ياكى دورا يول باشلاشنى قوزغىتالايسىز .

 <ul class = "tabs" data-tabs = "بەتكۈچ" > ... </ul>   

Methods

$ (). بەتكۈچ ياكى $ (). دورىلار

بېرىلگەن قاچىنىڭ بەتكۈچ ۋە دورىنىڭ ئىقتىدارىنى قوزغىتىدۇ. بەتكۈچ ئۇلانمىلىرى ھۆججەتتىكى id نى كۆرسىتىدۇ.

<ul class = "بەتكۈچ" > 
  <li class = "active" > <a href = "#home"> باشبەت </a> </li >  
  <li> <a href = "#profile"> ئارخىپ </a> </li> 
  <li> <a href = "#messages"> ئۇچۇرلار </a> </li> 
  <li> <a href = "#settings"> تەڭشەكلەر </a> </li > 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "ئۇچۇر" > ... </div> 
  <div id = "settings" > ... </div> 
</div>
 
<script>
  $ ( function () {  
    $ ( '.tabs' ). بەتكۈچ ()
  })
</script>

Events

Event	چۈشەندۈرۈش
ئۆزگەرتىش	بۇ پائالىيەت بەتكۈچ ئۆزگەرتىشكە ئوت قويىدۇ. ئاكتىپ بەتكۈچ ۋە ئالدىنقى ئاكتىپ بەتكۈچنى ئىشلىتىڭ event.targetۋە نىشانلاڭ.event.relatedTarget

$ ( '# .tabs' ). bind ( 'change' , function ( e ) {   
  e . نىشان // قوزغىتىلغان بەتكۈچ
  e . مۇناسىۋەتلىك نىشان // ئالدىنقى بەتكۈچ
})

Demo

• ئۆي
• ئارخىپ
• ئۇچۇرلار
• تەڭشەك
• Dropdown
  • @fat
  • @mdo

Jason Frame يازغان ئېسىل jQuery.tipsy قىستۇرمىسىغا ئاساسەن; twipsy يېڭىلانغان نەشرى بولۇپ ، ئۇ رەسىمگە تايانمايدۇ ، كارتون ئۈچۈن css3 ئىشلىتىدۇ ، تېما ساقلاش ئۈچۈن سانلىق مەلۇمات خاسلىقى!

چۈشۈرۈش

Bootstrap-twipsy.js نى ئىشلىتىش

$ ( '# مىسال' ). twipsy ( تاللانما )

تاللانما

ئىسمى	تىپى	كۆڭۈلدىكى	description
animate	boolean	true	قورال ساندۇقىغا css سۇس ئۆتۈشنى ئىشلىتىڭ
delayIn	سان	0	قورال كۆرسەتكۈچى (ms) نى كۆرسىتىشتىن بۇرۇن كېچىكىش
delayOut	سان	0	قورال قوراللىرىنى (ms) يوشۇرۇشتىن بۇرۇن كېچىكىش
ئارقىغا چېكىنىش	string	''	قورال قورال ماۋزۇسى يوق ۋاقىتتا ئىشلىتىدىغان تېكىست
ئورۇنلاشتۇرۇش	string	'above'	قورال قورالنى قانداق ئورۇنلاشتۇرۇش - ئۈستىدىكى | below | left | توغرا
html	boolean	false	قورال قوراللىرى ئىچىدىكى html مەزمۇنىغا يول قويىدۇ
live	boolean	false	پائالىيەت ۋەكىللىرىنى ئايرىم پائالىيەت بېجىرگۈچىلەرنىڭ ئورنىغا ئىشلىتىڭ
offset	سان	0	نىشان ئېلېمېنتتىن قورال قوراللىرىنىڭ پېكسىل ئۆچۈرۈلۈشى
ماۋزۇ	string, function	'title'	تېما تېكىستىنى ئېلىشنىڭ خاسلىقى ياكى ئۇسۇلى
trigger	string	'hover'	قورال قوراللىرى قانداق قوزغىتىلىدۇ - hover | فوكۇس | manual
قېلىپ	string	[سۈكۈتتىكى بەلگە]	قوش يۆنىلىشلىك كۆرسىتىش ئۈچۈن ئىشلىتىلىدىغان html ئەندىزىسى.

ئەسكەرتىش يەككە قوش يۆنىلىشلىك مىسال تاللانمىلىرىنى سانلىق مەلۇمات خاسلىقىنى ئىشلىتىش ئارقىلىق بەلگىلىگىلى بولىدۇ.

<a href = "#" data-placement = "below" rel ='twipsy' title = 'بەزى ماۋزۇ تېكىستى'> تېكىست </a>    

Methods

$ (). twipsy (تاللانما)

ئېلېمېنتلار توپلىمىغا قوش تۇتقۇچ تۇتاشتۇرىدۇ.

.twipsy ('show')

ئېلېمېنتلارنىڭ ئەگرى-توقايلىقىنى ئاشكارىلايدۇ.

$ ( '#element' ). twipsy ( 'show' )

.twipsy ('hide')

ئېلېمېنتلارنىڭ ئەگرى-توقايلىقىنى يوشۇرىدۇ.

$ ( '#element' ). twipsy ( 'hide' )

.twipsy (true)

ئېلېمېنت قوش يۆنىلىشلىك سىنىپنى قايتۇرىدۇ.

$ ( '#element' ). twipsy ( true )

ئەسكەرتىش ئۇنىڭدىن باشقا ، بۇنى ئەسلىگە كەلتۈرگىلى بولىدۇ $().data('twipsy').

Demo

قاڭقىش قىستۇرمىسى قوللىنىشچان پروگراممىڭىزغا قىستۇرما دېتال قوشۇش ئۈچۈن ئاددىي كۆرۈنمە يۈزى بىلەن تەمىنلەيدۇ. ئۇ bootstrap-twipsy.js قىستۇرمىسىنى كېڭەيتىدۇ ، شۇڭا تۈرىڭىزگە پوپايكىلارنى قوشقاندا بۇ ھۆججەتنىمۇ تۇتۇڭ.

دىققەت bootstrap-popover.js دىن بۇرۇن چوقۇم bootstrap-twipsy.js ھۆججىتىنى ئۆز ئىچىگە ئېلىشىڭىز كېرەك .

چۈشۈرۈش

Bootstrap-popover.js نى ئىشلىتىش

$ ( '# مىسال' ). popover ( تاللانما )

تاللانما

ئىسمى	تىپى	كۆڭۈلدىكى	description
animate	boolean	true	قورال ساندۇقىغا css سۇس ئۆتۈشنى ئىشلىتىڭ
delayIn	سان	0	قورال كۆرسەتكۈچى (ms) نى كۆرسىتىشتىن بۇرۇن كېچىكىش
delayOut	سان	0	قورال قوراللىرىنى (ms) يوشۇرۇشتىن بۇرۇن كېچىكىش
ئارقىغا چېكىنىش	string	''	قورال قورال ماۋزۇسى يوق ۋاقىتتا ئىشلىتىدىغان تېكىست
ئورۇنلاشتۇرۇش	string	'right'	قورال قورالنى قانداق ئورۇنلاشتۇرۇش - ئۈستىدىكى | below | left | توغرا
html	boolean	false	قورال قوراللىرى ئىچىدىكى html مەزمۇنىغا يول قويىدۇ
live	boolean	false	پائالىيەت ۋەكىللىرىنى ئايرىم پائالىيەت بېجىرگۈچىلەرنىڭ ئورنىغا ئىشلىتىڭ
offset	سان	0	نىشان ئېلېمېنتتىن قورال قوراللىرىنىڭ پېكسىل ئۆچۈرۈلۈشى
ماۋزۇ	string, function	'title'	تېما تېكىستىنى ئېلىشنىڭ خاسلىقى ياكى ئۇسۇلى
مەزمۇن	string, function	'data-content'	مەزمۇن تېكىستىنى ئېلىشنىڭ تىزمىسى ياكى ئۇسۇلى. ئەگەر ھېچكىم تەمىنلەنمىسە ، مەزمۇن سانلىق مەلۇمات خاسلىقىدىن كېلىدۇ.
trigger	string	'hover'	قورال قوراللىرى قانداق قوزغىتىلىدۇ - hover | فوكۇس | manual
قېلىپ	string	[سۈكۈتتىكى بەلگە]	مودا ئېقىمىنى كۆرسىتىشتە ئىشلىتىلىدىغان html قېلىپى.

ئەسكەرتىش يەككە خاسلىق ئۈلگە تاللانمىلىرىنى سانلىق مەلۇمات خاسلىقىنى ئىشلىتىش ئارقىلىق بەلگىلىگىلى بولىدۇ.

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover"> تېكىست </a>    

Methods

$ (). popover (تاللانما)

ئېلېمېنت توپلاش ئۈچۈن پوپايكىلارنى قوزغىتىدۇ.

.popover ('show')

ئېلېمېنت ئېلېمېنتلىرىنى ئاشكارىلايدۇ.

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

.popover ('hide')

ئېلېمېنت ئېلېمېنتنى يوشۇرىدۇ.

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

Demo

popover

ئاگاھلاندۇرۇش قىستۇرمىسى ئاگاھلاندۇرۇشلارغا يېقىن ئىقتىدار قوشۇش ئۈچۈن دەرىجىدىن تاشقىرى كىچىك دەرس.

چۈشۈرۈش

Bootstrap-alerts.js نى ئىشلىتىش

$ ( ".alert-message" ). alert ()

Markup

ئاگاھلاندۇرۇش ئۇچۇرلىرىڭىزغا خاسلىق قوشسىڭىز ، data-alertئۇلارغا ئاپتوماتىك يېقىن ئىقتىدار بېرىدۇ.

تاللانما

ئىسمى	تىپى	كۆڭۈلدىكى	description
تاللىغۇچ	string	'.close'	قايسى تاللىغۇچ ئاگاھلاندۇرۇشنى تاقاشنى نىشان قىلىدۇ.

Methods

$ (). ئاگاھلاندۇرۇش ()

بارلىق ئاگاھلاندۇرۇشلارنى يېقىن ئىقتىدار بىلەن ئورايدۇ. ئاگاھلاندۇرۇشلىرىڭىز تاقالغاندا جانلاندۇرۇلىدۇ ، ئۇلارنىڭ ئاللىقاچان ئۇلارغا .fadeۋە .inسىنىپقا ئىلتىماس قىلىنغانلىقىنى جەزملەشتۈرۈڭ.

.alert ('close')

ئاگاھلاندۇرۇشنى تاقايدۇ.

$ ( ".alert-message" ). alert ( 'close' )

Demo