مودېللار ھەققىدە

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

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

تۆۋەندىكىسى ستاتىستىكىلىق كۆرسىتىلگەن مودېل.

Live demo

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

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

Javascript ئارقىلىق مودېلغا تېلېفون قىلىڭ:

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

تاللانما

Markup

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

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

<a class = "btn" data-toggle = "modal" href = "#myModal"> قوزغىتىش مودېلى </a>    

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

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 () {   
  // بىرەر ئىش قىلىڭ…
})

چۈشۈش ھەققىدە

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

مىساللار

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

• دائىملىق ئۇلىنىش
• Dropdown
  • ھەرىكەت
  • باشقا ھەرىكەت
  • بۇ يەردە باشقا بىر نەرسە
  • ئايرىم ئۇلىنىش
• Dropdown 2
  • ھەرىكەت
  • باشقا ھەرىكەت
  • بۇ يەردە باشقا بىر نەرسە
  • ئايرىم ئۇلىنىش
• Dropdown 3
  • ھەرىكەت
  • باشقا ھەرىكەت
  • بۇ يەردە باشقا بىر نەرسە
  • ئايرىم ئۇلىنىش

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

Javascript ئارقىلىق چۈشكەنلەرگە تېلېفون قىلىڭ:

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

Markup

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

<ul class = "nav nav-pills" > 
  <li class = "active" > <a href = "#"> دائىملىق ئۇلىنىش </a> </li >  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _   
      Dropdown
      <b class = "caret" > </b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li> <a href = "#"> ھەرىكەت </a> </li> 
      <li> <a href = "#"> باشقا ھەرىكەت </a> </li> 
      <li> <a href = "#"> بۇ يەردە باشقا بىر نەرسە </a> </li> 
      <li class = "divider" > </li> 
      <li> <a href = "#"> ئايرىم ئۇلىنىش </a> </li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html"> _    
      Dropdown
      <b class = "caret" > </b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Methods

$ (). dropdown ()

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

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

Scrollspy بىلەن navbar نى مىسال قىلىڭ

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

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

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

$ ( '#navbar' ). scrollspy ()

Markup

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

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

Methods

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

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

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

تاللانما

Events

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

مىسال بەتكۈچ

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

• ئۆي
• ئارخىپ
• Dropdown
  • @fat
  • @mdo

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

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

سىز پەقەت بىر ئېلېمېنتنىلا بەلگىلەش ئارقىلىق ھېچقانداق javascript يازمايلا بەتكۈچ ياكى دورا يول باشلاشنى قوزغىتالايسىز data-toggle="tab". بەتكۈچكە ۋە دەرسلەرنى data-toggle="pill"قوشقاندا bootstrap بەتكۈچ ئۇسلۇبى قوللىنىلىدۇ.navnav-tabsul

<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 نى ئىشلىتىدۇ ، يەرلىك ماۋزۇ ساقلاشقا سانلىق مەلۇمات خاسلىقى ئىشلىتىلىدۇ.

قورال قوراللىرىنىڭ مىسالى

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

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

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

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

تاللانما

Markup

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

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

Methods

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

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

.tooltip ('show')

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

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

.tooltip ('hide')

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

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

.tooltip ('toggle')

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

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

پوپلار ھەققىدە

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

* قورال قورالنى ئۆز ئىچىگە ئالىدۇ

مىسال hover popover

كۇنۇپكىنى بېسىپ تۇرۇپ سەكرەشنى قوزغىتىڭ.

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

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

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

تاللانما

Markup

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

Methods

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

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

.popover ('show')

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

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

.popover ('hide')

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

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

.popover ('toggle')

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

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

ئاگاھلاندۇرۇش ھەققىدە

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

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

ئاگاھلاندۇرۇش قىستۇرمىسى دائىملىق ئاگاھلاندۇرۇش ئۇچۇرلىرى ۋە ئۇچۇرلارنى توسىدۇ.

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

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 () {   
  // بىرەر ئىش قىلىڭ…
})

ھەققىدە

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

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

ئىشتات ۋە قوزغىتىش ئۈچۈن كۇنۇپكىلار قىستۇرمىسىنى ئىشلىتىڭ.

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

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

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

Markup

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

<! - سانلىق مەلۇمات- toggle = "كۇنۇپكا" نى قوشۇپ ، بىر كۇنۇپكىنى قوزغىتىشنى قوزغىتىڭ ->
<button class = "btn" data-toggle = "button" > تاق كۆزنەك </button>  
 
B!
<div class = "btn-group" data-toggle = "كۇنۇپكا-تەكشۈرۈش ساندۇقى" >  
  <button class = "btn" > سول </button> 
  <button class = "btn" > ئوتتۇرا </button> 
  <button class = "btn" > ئوڭ </button> 
</div>
 
B!
<div class = "btn-group" data-toggle = "كۇنۇپكا-رادىئو" >  
  <button class = "btn" > سول </button> 
  <button class = "btn" > ئوتتۇرا </button> 
  <button class = "btn" > ئوڭ </button> 
</div>

Methods

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

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

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

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

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

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

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

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

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

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

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

ھەققىدە

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

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

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

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

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

Javascript ئارقىلىق قوزغىتىش:

$ ( ".collapse" ). collapse ()

تاللانما

Markup

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

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

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.

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

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.

ئۈچىنچى كىچىك بەلگە

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.

‹‹ ›

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

Javascript ئارقىلىق تېلېفون قىلىڭ:

$ ( '.carousel' ). carousel ()

تاللانما

Markup

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

<div id = "myCarousel" class = "كارۇسېل تام تەسۋىر" >  
  <! - كارۇسېل بۇيۇملىرى ->
  <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>

Methods

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

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

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

.carousel ('cycle')

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

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

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

.carousel (نومۇرى)

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

.carousel ('prev')

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

.carousel ('next')

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

Events

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

ھەققىدە

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

مىسال

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

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

Javascript ئارقىلىق خەت بېسىش تېلېفونىغا تېلېفون قىلىڭ:

$ ( '.typeahead' ). typeahead ()

تاللانما

Markup

Typeahead ئىقتىدارى بار ئېلېمېنتنى تىزىملاش ئۈچۈن سانلىق مەلۇمات خاسلىقىنى قوشۇڭ.

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

Methods

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

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