يەككە ياكى تۈزۈلگەن

قىستۇرمىلارنى ئايرىم ئۆز ئىچىگە ئالغىلى بولىدۇ (گەرچە بەزىلىرى بېقىنىشنى تەلەپ قىلسىمۇ) ياكى ھەممىسىنى بىراقلا ئۆز ئىچىگە ئالىدۇ. Bootstrap.js ۋە bootstrap.min.js ھەر ئىككىسى بىرلا ھۆججەتتىكى بارلىق قىستۇرمىلارنى ئۆز ئىچىگە ئالىدۇ.

سانلىق مەلۇمات خاسلىقى

بارلىق Bootstrap قىستۇرمىلىرىنى JavaScript نىڭ بىر قۇرنى يازماي تۇرۇپلا بەلگە API ئارقىلىق ساپ ئىشلىتەلەيسىز. بۇ Bootstrap نىڭ بىرىنچى دەرىجىلىك API بولۇپ ، قىستۇرما ئىشلەتكەندە بىرىنچى ئويلىنىشىڭىز كېرەك.

دېمەك ، بەزى ئەھۋاللاردا بۇ ئىقتىدارنى تاقاشنى ئارزۇ قىلىش مۇمكىن. شۇڭلاشقا ، بىز يەنە «data-api» بىلەن بەدەن نامىدىكى بارلىق ۋەقەلەرنى باغلاپ سانلىق مەلۇمات خاسلىقى API نى چەكلەش ئىقتىدارى بىلەن تەمىنلەيمىز. بۇ ئوخشايدۇ:

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

ئۇنىڭدىن باشقا ، مەلۇم بىر قىستۇرمىنى نىشانلاش ئۈچۈن ، قىستۇرمىنىڭ نامىنى ئىسىم بوشلۇقى سۈپىتىدە سانلىق مەلۇمات api ئىسىم بوشلۇقى بىلەن قوشۇڭ:

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

پروگرامما API

بىز يەنە بارلىق Bootstrap قىستۇرمىلىرىنى JavaScript API ئارقىلىقلا ئىشلىتەلەيدىغانلىقىڭىزغا ئىشىنىمىز. بارلىق ئاممىۋى API لار يەككە ، زەنجىرسىمان ئۇسۇل بولۇپ ، توپلانغان مەشغۇلاتنى قايتۇرىدۇ.

$ ( ".btn.danger" ). كۇنۇپكا ( "ئالماشتۇرۇش" ). addClass ( "ماي" )

بارلىق ئۇسۇللار ئىختىيارى تاللاش ئوبيېكتىنى ، مەلۇم بىر ئۇسۇلنى نىشان قىلغان بىر قۇر ياكى ھېچنىمە (سۈكۈتتىكى ھەرىكەت بىلەن قىستۇرمىنى قوزغىتىدۇ) نى قوبۇل قىلىشى كېرەك:

$ ( "#myModal" ). modal () // سۈكۈتتىكى ھالەتتە باشلانغان                       
$ ( "#myModal" ). modal ({ كۇنۇپكا تاختىسى : يالغان }) // ھېچقانداق كۇنۇپكا تاختىسى يوق     
$ ( "#myModal" ). modal ( 'show' ) // دەرھال باشلايدۇ ۋە چاقىرىدۇ                

ھەر بىر قىستۇرما خام ئەشياسىنى `Constructor` خاسلىقىدا ئاشكارىلايدۇ : $.fn.popover.Constructor. ئەگەر سىز مەلۇم قىستۇرما مىسالىغا ئېرىشمەكچى بولسىڭىز ، ئۇنى بىۋاسىتە ئېلېمېنتتىن ئېلىڭ : $('[rel=popover]').data('popover').

توقۇنۇش يوق

بەزىدە باشقا UI رامكىسى بىلەن Bootstrap قىستۇرمىلىرىنى ئىشلىتىشكە توغرا كېلىدۇ. بۇ خىل ئەھۋال ئاستىدا ، ئىسىم بوشلۇقى سوقۇلۇش بەزىدە يۈز بېرىشى مۇمكىن. ئەگەر بۇ خىل ئەھۋال كۆرۈلسە ، .noConflictقىممىتىنى ئەسلىگە كەلتۈرمەكچى بولغان قىستۇرمىغا تېلېفون قىلسىڭىز بولىدۇ.

var bootstrapButton = $ . fn . كۇنۇپكا . noConflict () // $ .fn.button نى ئىلگىرى بېكىتىلگەن قىممەتكە قايتۇرۇڭ 
$ . fn . bootstrapBtn = bootstrapButton             // بېرىڭ $ (). bootstrapBtn bootstrap ئىقتىدارىنى

Events

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

بارلىق چەكسىز ۋەقەلەر ئالدىنى ئېلىش ئىقتىدارى بىلەن تەمىنلەيدۇ. بۇ ھەرىكەت باشلىنىشتىن بۇرۇن ئىجرا قىلىشنى توختىتىش ئىقتىدارى بىلەن تەمىنلەيدۇ.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    if (! data ) return e . preventDefault () // مودېلنىڭ كۆرسىتىلىشىنى توختىتىدۇ   
})

ئۆتكۈنچى ھەققىدە

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

دېلولارنى ئىشلىتىڭ

ئۆتكۈنچى قىستۇرمىنىڭ بىر قانچە مىسالى:

• مودېللاردا سىيرىلىش ياكى سۇسلاش
• بەتكۈچلەرنى يوقىتىۋاتىدۇ
• ئاگاھلاندۇرۇش سۇسلاش
• سىيرىلما كارۇسېل تاختىسى

مىساللار

مودېللار ئىخچام ، ئەمما جانلىق ، دىئالوگ ئەڭ تۆۋەن تەلەپتىكى ئىقتىدار ۋە ئەقلىي ئىقتىدارلىق سۈكۈتتىكى ئەسكەرتىش.

تۇراقلىق مىسال

بەت ئاستى قىسمىدا باش ، گەۋدە ۋە بىر يۈرۈش ھەرىكەتلەر بىلەن كۆرسىتىلگەن مودېل.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > & times; </button>    
    <h3> مودېل ماۋزۇ </ h3>
  </div>
  <div class = "modal-body" > 
    <p> بىر ئېسىل بەدەن… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> تاقاش </a> _  
    <a href = "#" class = "btn btn-primary"> ئۆزگەرتىشلەرنى ساقلاش </a>  
  </div>
</div>

Live demo

تۆۋەندىكى كۇنۇپكىنى بېسىش ئارقىلىق JavaScript ئارقىلىق مودېلنى ئالماشتۇرۇڭ. ئۇ سىيرىلىپ بەتنىڭ ئۈستىدىن سۇسلاپ كېتىدۇ.

<! - مودېلنى قوزغىتىش كۇنۇپكىسى ->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal"> ئۈلگە كۆرسىتىش ئەندىزىسىنى قوزغىتىش </a>    
 
<! - Modal ->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > مودېل بەت بېشى </h3> 
  </div>
  <div class = "modal-body" > 
    <p> بىر ئېسىل بەدەن… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > تاقاش </button>   
    <button class = "btn btn-primary" > ئۆزگەرتىشلەرنى ساقلاش </button> 
  </div>
</div>

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

JavaScript يازماي تۇرۇپ مودېلنى قوزغىتىڭ. كونتروللىغۇچ data-toggle="modal"ئېلېمېنتىغا ، بىر كۇنۇپكا بىلەن تەڭ data-target="#foo"ياكى href="#foo"مەلۇم مودېلنى ئالماشتۇرۇشقا توغرىلاڭ.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > قوزغىتىش مودېلى </button>   

JavaScript ئارقىلىق

myModalبىر قۇر JavaScript بىلەن id بىلەن مودېلغا تېلېفون قىلىڭ :

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

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-backdrop="".

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

Methods

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

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

$ ( '#myModal' ). modal ({
  كۇنۇپكا تاختىسى : يالغان 
})

.modal ('toggle')

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

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

.modal ('show')

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

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

.modal ('hide')

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

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

Events

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

$ ( '#myModal' ). on ( 'hidden' , function () {   
  // بىرەر ئىش قىلىڭ…
})

مىساللار

بۇ ئاددىي قىستۇرما ئارقىلىق يولباشچى بەتكۈچ ، بەتكۈچ ۋە دورا قاتارلىقلارنى ئۆز ئىچىگە ئالىدۇ.

بىر بالداق ئىچىدە

بەتكۈچ ئىچىدە

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

ئۇلىنىش ياكى كۇنۇپكىنى قوشسىڭىز data-toggle="dropdown"، چۈشۈشنى قوزغىتىڭ.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> تامچە قوزغىتىش </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL لارنى ساقلاپ قېلىش ئۈچۈن ، data-targetخاسلىقنى ئۇنىڭ ئورنىغا ئىشلىتىڭ href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown"      data-target = "#" href = "/page.html"> _ 
    Dropdown
    <b class = "caret" > </b> 
  </a>
  <ul class = "dropdown-menu" رولى  = "menu" aria-labelledby = "dLabel" > 
    ...
  </ul>
</div>

JavaScript ئارقىلىق

چۈشۈشنى JavaScript ئارقىلىق تېلېفون قىلىڭ:

$ ( '.dropdown-toggle' ). dropdown ()

تاللانما

ياق

Methods

$ (). چۈشۈش ('toggle')

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

Navbar دىكى مىسال

ScrollSpy قىستۇرمىسى سىيرىلما ئورۇنغا ئاساسەن nav نىشانلىرىنى ئاپتوماتىك يېڭىلاش ئۈچۈندۇر. يولباشچىنىڭ ئاستىدىكى رايوننى سىيرىپ ئاكتىپ سىنىپ ئۆزگىرىشىنى كۆرۈڭ. تارتما تارماق تۈرلەرمۇ گەۋدىلىنىدۇ.

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

ئۈستۈنكى بالداق يول باشلىشىڭىزغا ئاسانلا سىيرىلما ھەرىكەت قوشۇش data-spy="scroll"ئۈچۈن ، سىز جاسۇسلۇق قىلماقچى بولغان ئېلېمېنتنى قوشۇڭ (كۆپىنچە بۇ بەدەن بولىدۇ) ۋە data-target=".navbar"قايسى nav نى ئىشلىتىشنى تاللاڭ. سىز .navزاپچاس بىلەن scrollspy نى ئىشلەتمەكچى بولىسىز.

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

JavaScript ئارقىلىق

JavaScript ئارقىلىق scrollspy غا تېلېفون قىلىڭ:

$ ( '#navbar' ). scrollspy ()

Methods

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

DOM دىكى ئېلېمېنتلارنى قوشۇش ياكى چىقىرىۋېتىش بىلەن بىللە scrollspy نى ئىشلەتكەندە ، يېڭىلاش ئۇسۇلىنى مۇنداق چاقىرىشىڭىز كېرەك:

$ ( '[data-spy = "scroll"]' ). each ( function () {  
  var $ spy = $ ( بۇ ). scrollspy ( 'refresh' )
});

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-offset="".

Events

مىسال بەتكۈچ

تېز ، ھەرىكەتچان بەتكۈچ ئىقتىدارىنى قوشۇڭ ، ھەتتا تىزىملىك ​​تىزىملىكى ئارقىلىق يەرلىك مەزمۇننىڭ تاختىسىغا ئۆتۈڭ.

ئىشلىتىش

JavaScript ئارقىلىق جەدۋەل بەتكۈچلىرىنى قوزغىتىڭ (ھەر بىر بەتكۈچنى ئايرىم قوزغىتىش كېرەك):

$ ( '#myTab a' ). Click ( function ( e ) {  
  e . preventDefault ();
  $ ( this ). tab ( 'show' );
})

يەككە بەتكۈچلەرنى بىر قانچە خىل ئۇسۇلدا قوزغىتالايسىز:

$ ( '#myTab a [href = "# profile"]' ). tab ( 'show' ); // بەتكۈچنى ئىسىم بويىچە تاللاڭ 
$ ( '#myTab a: first' ). tab ( 'show' ); // بىرىنچى بەتكۈچنى تاللاڭ 
$ ( '#myTab a: last' ). tab ( 'show' ); // ئاخىرقى بەتكۈچنى تاللاڭ 
$ ( '#myTab li: eq (2) a' ). tab ( 'show' ); // ئۈچىنچى بەتكۈچنى تاللاڭ (0 كۆرسەتكۈچ) 

Markup

data-toggle="tab"سىز پەقەت بىر ئېلېمېنت ياكى ئېلېمېنت ئارقىلىق JavaScript يازمايلا بەتكۈچ ياكى دورا يول باشلاشنى قوزغىتالايسىز data-toggle="pill". navبەتكۈچكە ۋە nav-tabsدەرسلەرنى قوشقاندا ulBootstrap بەتكۈچ ئۇسلۇبى قوللىنىلىدۇ.

<ul class = "nav nav-tabs" > 
  <li> <a href = "#home" data-toggle = "tab"> باشبەت </a> </li >  
  <li> <a href = "#profile" data-toggle = "tab"> ئارخىپ </a> </li >  
  <li> <a href = "#messages" data-toggle = "tab"> ئۇچۇرلار </a> </li >  
  <li> <a href = "#settings" data-toggle = "tab"> تەڭشەكلەر </a> </li >  
</ul>

Methods

$ (). بەتكۈچ

بەتكۈچ ئېلېمېنتى ۋە مەزمۇن قاچىسىنى قوزغىتىدۇ. بەتكۈچتە DOM دىكى قاچا تۈگۈنى data-targetياكى نىشانلانغان بولۇشى كېرەك.href

<ul class = "nav nav- tabs" id = "myTab" >  
  <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 = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "ئۇچۇر" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( function () {  
    $ ( '#myTab a: last' ). tab ( 'show' );
  })
</script>

Events

$ ( 'a [data-toggle = "tab"]' ). on ( 'shown' , function ( e ) {   
  e . نىشان // قوزغىتىلغان بەتكۈچ
  e . مۇناسىۋەتلىك نىشان // ئالدىنقى بەتكۈچ
})

مىساللار

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

ئىقتىدار سەۋەبىدىن ، قورال كۆرسەتكۈچى ۋە ئېلېكترونلۇق سانلىق مەلۇمات apis تاللىنىدۇ ، يەنى سىز چوقۇم ئۇلارنى ئۆزىڭىز باشلىشىڭىز كېرەك .

تۆۋەندىكى ئۇلىنىشلارنى بېسىپ قورال قوراللىرىنى كۆرۈڭ:

تۆت يۆنىلىش

كىرگۈزۈش گۇرۇپپىسىدىكى قوراللار

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

ئىشلىتىش

قورال قورالنى JavaScript ئارقىلىق قوزغىتىڭ:

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

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-animation="".

Markup

<a href = " # " data-toggle = " tooltip " title = "بىرىنچى قورال قورال "   

Methods

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

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

.tooltip ('show')

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

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

.tooltip ('hide')

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

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

.tooltip ('toggle')

ئېلېمېنتنىڭ قورال قوراللىرىنى بىر تەرەپ قىلىدۇ.

$ ( '#element' ). tooltip ( 'toggle' )

.tooltip ('يوقىتىش')

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

$ ( '#element' ). tooltip ( 'destroy' )

مىساللار

تۇرالغۇ ئۇچۇرلىرى ئۈچۈن ھەر قانداق ئېلېمېنتقا iPad دىكىگە ئوخشاش كىچىك مەزمۇنلارنى قوشۇڭ. كۇنۇپكىنى بېسىپ تۇرۇپ سەكرەشنى قوزغىتىڭ. قورال قورالنى ئۆز ئىچىگە ئالىدۇ.

تۇراقلىق ھالەت

تۆت خىل تاللاش بار: ئۈستى ، ئوڭ ، ئاستى ۋە سولغا توغرىلىنىدۇ.

dataپوپايكا سۈپىتىدە كۆرسىتىلگەن بەلگە JavaScript ۋە خاسلىق ئىچىدىكى مەزمۇندىن ھاسىل بولمايدۇ.

Live demo

تۆت يۆنىلىش

ئىشلىتىش

JavaScript ئارقىلىق پوپايكىلارنى قوزغىتىڭ:

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

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-animation="".

Markup

ئىقتىدار سەۋەبلىرى ئۈچۈن ، Tooltip ۋە Popover سانلىق مەلۇمات apis تاللىنىدۇ. ئەگەر ئىشلەتمەكچى بولسىڭىز تاللىغۇچنى تاللاڭ.

Methods

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

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

.popover ('show')

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

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

.popover ('hide')

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

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

.popover ('toggle')

بىر ئېلېمېنتنىڭ ئېقىشىنى قوزغىتىدۇ.

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

.popover ('يوقىتىش')

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

$ ( '#element' ). popover ( 'يوقىتىش' )

مىسال ئاگاھلاندۇرۇشى

بۇ قىستۇرما ئارقىلىق بارلىق ئاگاھلاندۇرۇش ئۇچۇرلىرىغا ئىشتىن بوشىتىش ئىقتىدارىنى قوشۇڭ.

ئىشلىتىش

JavaScript ئارقىلىق ئاگاھلاندۇرۇشنى ئەمەلدىن قالدۇرۇڭ:

$ ( ".alert" ). alert ()

Markup

تاقاش كۇنۇپكىسىنى قوشسىڭىزلا data-dismiss="alert"ئاپتوماتىك ئاگاھلاندۇرۇش ئىقتىدارىنى بېرىدۇ.

<a class = "close" data-dismiss = "alert" href = "#"> & times ; </a>   

Methods

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

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

.alert ('close')

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

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

Events

Bootstrap نىڭ ئاگاھلاندۇرۇش سىنىپى ئاگاھلاندۇرۇش ئىقتىدارىغا باغلانغان بىر قانچە ۋەقەلەرنى ئاشكارىلىدى.

$ ( '# my-alert' ). bind ( 'closed' , function () {   
  // بىرەر ئىش قىلىڭ…
})

مىسال ئىشلىتىلىدۇ

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

دۆلەت

data-loading-text="Loading..."بىر كۇنۇپكىنى قاچىلاش ھالىتىنى ئىشلىتىشكە قوشۇڭ .

<button type = "button" class = "btn btn-primary" data-load-text = "يۈكلەۋاتىدۇ ..." > يۈكلەش ھالىتى </button>   

تاق تاقاش

data-toggle="button"بىر كۇنۇپكىنى قوزغىتىشنى قوزغىتىشقا قوشۇڭ .

<button type = "button" class = "btn btn-primary" data-toggle = "button" > تاق كۆزنەك </button>   

تەكشۈرۈش رامكىسى

Btn- data-toggle="buttons-checkbox"گۇرۇپپىغا تەكشۈرۈش رامكىسى ئۇسلۇبىنى ئالماشتۇرۇڭ.

<div class = "btn-group" data-toggle = "كۇنۇپكا-تەكشۈرۈش ساندۇقى" >  
  <button type = "button" class = "btn btn-primary" > سول </button>  
  <button type = "button" class = "btn btn-primary" > ئوتتۇرا </button>  
  <button type = "button" class = "btn btn-primary" > ئوڭ </button>  
</div>

Radio

data-toggle="buttons-radio"Btn گۇرۇپپىسىدا رادىئو ئۇسلۇبىنى ئالماشتۇرۇشقا قوشۇڭ .

<div class = "btn-group" data-toggle = "كۇنۇپكا-رادىئو" >  
  <button type = "button" class = "btn btn-primary" > سول </button>  
  <button type = "button" class = "btn btn-primary" > ئوتتۇرا </button>  
  <button type = "button" class = "btn btn-primary" > ئوڭ </button>  
</div>

ئىشلىتىش

JavaScript ئارقىلىق كۇنۇپكىلارنى قوزغىتىڭ:

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

Markup

سانلىق مەلۇمات خاسلىقى كۇنۇپكا قىستۇرمىسىدا كەم بولسا بولمايدۇ. ھەر خىل بەلگە تىپلىرى ئۈچۈن تۆۋەندىكى مىسال كودىنى تەكشۈرۈپ بېقىڭ.

تاللانما

ياق

Methods

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

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

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

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

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

<button type = "button" class = "btn" data-load-text = "يۈك قاچىلاش ..." > ... </button>    

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

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

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

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

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

ھەققىدە

ئاككوردىيون ۋە يول باشلاش قاتارلىق قاتلىنىدىغان زاپچاسلارنى ئاساسىي ئۇسلۇب ۋە جانلىق قوللاشقا ئېرىشىڭ.

* ئۆتكۈنچى قىستۇرمىنىڭ ئۆز ئىچىگە ئېلىنىشىنى تەلەپ قىلىدۇ.

مىسال ئاككوردىيون

يىمىرىلىش قىستۇرمىسىنى ئىشلىتىپ ، ئاددىي ئاككوردىيون ئۇسلۇبىدىكى كىچىك قورال قۇردۇق:

<div class = "ئاككوردىيون" id = "ئاككوردىيون 2" >  
  <div class = "ئاككوردىيون گۇرۇپپىسى" > 
    <div class = "ئاككوردىيون-ماۋزۇ" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _    
        قاتلىنىدىغان گۇرۇپپا تۈرى # 1
      </a>
    </div>
    <div id = "collapseOne" class = "ئاككوردىيون-بەدەننىڭ يىمىرىلىشى" >  
      <div class = "ئاككوردىيون-ئىچكى" > 
        Anim pariatur cliche ...
      </div>
    </div>
  </div>
  <div class = "ئاككوردىيون گۇرۇپپىسى" > 
    <div class = "ئاككوردىيون-ماۋزۇ" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _    
        قاتلىنىدىغان گۇرۇپپا 2-تۈر
      </a>
    </div>
    <div id = "collapseTwo" class = "ئاككوردىيون-بەدەن يىمىرىلىش" >  
      <div class = "ئاككوردىيون-ئىچكى" > 
        Anim pariatur cliche ...
      </div>
    </div>
  </div>
</div>
...

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

<button type = "button" class = "btn btn- danger" data-toggle = "يىمىرىلىش" data-target = "#demo" >    
  simple collapsible
</button>
 
<div id = "demo" class = "يىمىرىلىش" > … </div>  

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

پەقەت بىر ئېلېمېنتنى قوشۇپ data-toggle="collapse"، data-targetقاتلىنىدىغان ئېلېمېنتنىڭ كونتروللۇقىنى ئاپتوماتىك تەقسىملەيدۇ. بۇ data-targetخاسلىق يىمىرىلىشنى قوللىنىش ئۈچۈن css تاللىغۇچنى قوبۇل قىلىدۇ. collapseدەرسنى قاتلىنىدىغان ئېلېمېنتقا قوشۇشقا كاپالەتلىك قىلىڭ . ئەگەر سۈكۈتتىكى ھالەتتە ئېچىشنى ئويلىسىڭىز ، قوشۇمچە دەرسنى قوشۇڭ in.

قاتلىنىدىغان كونترولغا ئاككوردىيونغا ئوخشاش گۇرۇپپا باشقۇرۇشنى قوشۇش ئۈچۈن ، سانلىق مەلۇمات خاسلىقىنى قوشۇڭ data-parent="#selector". بۇنى ھەرىكەتتە كۆرۈش ئۈچۈن كۆرسەتمە دىن پايدىلىنىڭ.

JavaScript ئارقىلىق

قولدا قوزغىتىڭ:

$ ( ".collapse" ). collapse ()

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-parent="".

Methods

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

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

$ ( '#myCollapsible' ). collapse ({
  toggle : false 
})

.collapse ('toggle')

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

.collapse ('show')

قاتلىنىدىغان ئېلېمېنتنى كۆرسىتىدۇ.

.collapse ('hide')

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

Events

Bootstrap نىڭ يىمىرىلىش سىنىپى يىمىرىلىش ئىقتىدارىغا باغلانغان بىر قانچە ھادىسىنى ئاشكارىلىدى.

$ ( '#myCollapsible' ). on ( 'hidden' , function () {   
  // بىرەر ئىش قىلىڭ…
})

مىسال كارۇسېل

تۆۋەندىكى تام تەسۋىردە كارۇسېلغا ئوخشاش ئېلېمېنتلار ئارقىلىق ۋېلىسىپىت مىنىشنىڭ ئومۇمىي قىستۇرمىسى ۋە زاپچاسلىرى كۆرسىتىلدى.

بىرىنچى كىچىك بەلگە

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.

Second Thumbnail label

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

Third Thumbnail label

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

‹‹ ›

<div id = "myCarousel" class = "كارۇسېل تام تەسۋىر" >  
  <ol class = "كارۇسېل كۆرسەتكۈچ" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" > </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" > </li>  
    <li data-target = "#myCarousel" data-slide-to = "2" > </li>  
  </ol>
  <! - كارۇسېل بۇيۇملىرى ->
  <div class = "carousel-inner" > 
    <div class = "ئاكتىپ تۈر" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <! - Carousel nav ->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> & lsaquo; </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next"> & rsaquo; </a>   
</div>

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

سانلىق مەلۇمات خاسلىقىنى ئىشلىتىپ كارۇسېلنىڭ ئورنىنى ئاسانلا كونترول قىلىڭ. data-slideئاچقۇچلۇق سۆزلەرنى قوبۇل قىلىدۇ prevياكى nextتام تەسۋىر ئورنىنى ھازىرقى ئورۇنغا ئۆزگەرتىدۇ. ئۇنىڭدىن باشقا ، data-slide-toخام تام تەسۋىر كۆرسەتكۈچىنى كارۇسېلغا يەتكۈزۈشكە ئىشلىتىڭ data-slide-to="2"، بۇ سىيرىلىش ئورنىنى مەلۇم كۆرسەتكۈچكە باشلايدۇ 0.

JavaScript ئارقىلىق

كارۇسېل بىلەن قولدا تېلېفون قىلىڭ:

$ ( '.carousel' ). carousel ()

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScriptz ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-interval="".

Methods

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

كارۇسېلنى ئىختىيارى تاللاش objectبىلەن باشلايدۇ ۋە تۈرلەر ئارقىلىق ۋېلىسىپىت مىنىشكە باشلايدۇ.

$ ( '.carousel' ). carousel ({
  ئارىلىقى : 2000 
})

.carousel ('cycle')

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

.carousel ('توختاپ')

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

.carousel (نومۇرى)

كارۇسېلنى مەلۇم بىر رامكىغا ئايلاندۇرىدۇ (0 ئاساس قىلىنغان ، سانلار گۇرپىسىغا ئوخشايدۇ).

.carousel ('prev')

ئالدىنقى تۈرگە ئايلىنىش.

.carousel ('next')

كېيىنكى تۈرگە ئايلىنىش.

Events

Bootstrap نىڭ كارۇسېل سىنىپى كارۇسېل ئىقتىدارىغا باغلانغان ئىككى خىل ھادىسىنى ئاشكارىلىدى.

مىسال

ھەر قانداق شەكىلدىكى تېكىست كىرگۈزۈش ئارقىلىق نەپىس خەت بېشىنى تېز قۇرۇش ئۈچۈن ئاساسىي ، ئاسان كېڭەيتىلگەن قىستۇرما.

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

autocomplete="off"كۆڭۈلدىكى توركۆرگۈچ تىزىملىكلىرىنىڭ Bootstrap خەت بېسىش تىزىملىكىدە كۆرۈنمەسلىكىنى تەڭشىمەكچى بولىسىز.

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

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

JavaScript ئارقىلىق

خەت بېسىش ماشىنىسىنى قولدا تېلېفون قىلىڭ:

$ ( '.typeahead' ). typeahead ()

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-source="".

Methods

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

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

مىسال

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

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

ھەر قانداق ئېلېمېنتقا چاپلاش ھەرىكىتىنى ئاسانلا قوشۇش ئۈچۈن data-spy="affix"، جاسۇسلۇق قىلماقچى بولغان ئېلېمېنتقا قوشۇڭ. ئاندىن offsets نى ئىشلىتىپ ئېلېمېنتنىڭ قاچىلىنىشىنى قاچان ئالماشتۇرۇۋېتىدىغانلىقىنى ئېنىقلاڭ.

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

JavaScript ئارقىلىق

JavaScript ئارقىلىق قوشۇمچە قىستۇرمىغا تېلېفون قىلىڭ:

$ ( '#navbar' ). affix ()

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-offset-top="200".