ئومۇمىي چۈشەنچە

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

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

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

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

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

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

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

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

پروگرامما API

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

$('.btn.danger').button('toggle').addClass('fat')

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

كۆڭۈلدىكى تەڭشەكلەر

قىستۇرمىنىڭ Constructor.DEFAULTSئوبيېكتىنى ئۆزگەرتىش ئارقىلىق قىستۇرمىنىڭ سۈكۈتتىكى تەڭشىكىنى ئۆزگەرتەلەيسىز:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

توقۇنۇش يوق

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Events

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

3.0.0 گىچە ، بارلىق Bootstrap ھادىسىلىرى ئىسىم قويۇلغان.

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

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

نەشرى نومۇرى

Bootstrap نىڭ ھەر بىر jQuery قىستۇرمىسىنىڭ نۇسخىسىنى VERSIONقىستۇرما قۇرغۇچىنىڭ خاسلىقى ئارقىلىق زىيارەت قىلغىلى بولىدۇ. مەسىلەن ، قورال قىستۇرمىسى ئۈچۈن:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

JavaScript چەكلەنگەندە ئالاھىدە خاتالىق يوق

JavaScript چەكلەنگەندە Bootstrap نىڭ قىستۇرمىلىرى ئالاھىدە چىرايلىق چۈشمەيدۇ. ئەگەر بۇ ئەھۋالدا ئىشلەتكۈچىنىڭ تەجرىبىسىگە كۆڭۈل بۆلسىڭىز <noscript>، ئەھۋالنى (ۋە JavaScript نى قايتا قوزغىتىش) ئىشلەتكۈچىلىرىڭىزگە چۈشەندۈرۈڭ ، ۋە ياكى ئۆزىڭىزنىڭ كەمچىلىكىڭىزنى قوشۇڭ.

Transitions transition.js

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

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

ئىچىدە نېمە بار

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

ئۆتكەلنى چەكلەش

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

$.support.transition = false

Modal modal.js

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

HTML5 نىڭ مەنىسىنى قانداق ئېنىقلىغانلىقى ئۈچۈن ، autofocusHTML خاسلىقىنىڭ Bootstrap مودىلىدا ھېچقانداق رولى يوق. ئوخشاش ئۈنۈمگە ئېرىشىش ئۈچۈن ، بىر قىسىم خاس JavaScript نى ئىشلىتىڭ:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

مىساللار

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

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Live demo

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ئىختىيارى چوڭلۇق

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

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

كارتوننى ئۆچۈرۈڭ

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

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

تور سىستېمىسىنى ئىشلىتىش

مودېل ئىچىدىكى Bootstrap تور سىستېمىسىدىن پايدىلىنىش ئۈچۈن ، پەقەت .rowئىچىگە ئۇۋا .modal-bodyسېلىپ ئاندىن نورمال تور سىستېمىسى دەرسلىكىنى ئىشلىتىڭ.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

قوزغىتىش كۇنۇپكىسىغا ئاساسەن مودېل مەزمۇنىنى ئۆزگەرتىش

ئازراق ئوخشىمىغان مەزمۇنلار بىلەن ھەممىسى ئوخشاش مودېلنى قوزغىتىدىغان بىر تۈركۈم كۇنۇپكىلار بارمۇ؟ ئىشلىتىش event.relatedTargetۋە HTML data-*خاسلىقى ( jQuery ئارقىلىق بولۇشى مۇمكىن ) مودېلنىڭ مەزمۇنىنى قايسى كۇنۇپكىنى باسقانلىقىغا قاراپ ئۆزگەرتىڭ. تەپسىلاتىنى Modal Events doc دىن كۆرۈڭ relatedTarget.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

ئىشلىتىش

مودېل قىستۇرمىسى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق ئېھتىياجغا ئاساسەن يوشۇرۇن مەزمۇنلىرىڭىزنى ئالماشتۇرىدۇ. ئۇ يەنە سۈكۈتتىكى سىيرىلىش .modal-openھەرىكىتىنى <body>قاپلىۋېتىدۇ .modal-backdropھەمدە مودېلنىڭ سىرتىنى چەككەندە كۆرسىتىلگەن مودېللارنى ئەمەلدىن قالدۇرۇش ئۈچۈن چېكىش رايونى بىلەن تەمىنلەيدۇ.

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

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</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(options)

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

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

قولدا مودېلنى ئالماشتۇرىدۇ. مودېل ئەمەلىيەتتە كۆرسىتىش ياكى يوشۇرۇشتىن بۇرۇن (يەنى ۋەقە ياكى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .shown.bs.modalhidden.bs.modal

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

.modal('show')

قولدا مودېل ئاچىدۇ. مودېل ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .shown.bs.modal

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

.modal('hide')

قولدا مودېلنى يوشۇرىدۇ. مودېل ئەمەلىيەتتە يوشۇرۇلۇشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .hidden.bs.modal

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

.modal('handleUpdate')

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

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

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

Events

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

بارلىق مودېل ھادىسىلىرى مودېلنىڭ ئۆزىدە (يەنى <div class="modal">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

مىساللار

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

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

دورىلارنىڭ ئىچىدە

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق ، تارتما قىستۇرما .openئانا تىزىملىك ​​تۈرىدىكى دەرسنى ئالماشتۇرۇش ئارقىلىق يوشۇرۇن مەزمۇننى (چۈشۈرۈش تىزىملىكى) ئالماشتۇرىدۇ.

كۆچمە ئۈسكۈنىلەردە ، چۈشۈش ئېغىزىنى ئېچىش .dropdown-backdropتىزىملىكنىڭ سىرتىغا چەككەندە تامچە تىزىملىكلەرنى تاقاشنىڭ چېكىش رايونى سۈپىتىدە قوشىدۇ ، بۇ مۇۋاپىق iOS قوللىشىنىڭ تەلىپى. دېمەك ، ئوچۇق چۈشۈش تىزىملىكىدىن باشقا چۈشۈش تىزىملىكىگە ئالماشتۇرۇش كۆچمە تېلېفوندا قوشۇمچە چېكىشنى تەلەپ قىلىدۇ.

ئەسكەرتىش: data-toggle="dropdown"خاسلىق پروگرامما سەۋىيىسىدىكى تۆۋەنلەش تىزىملىكىنى تاقاشقا تايىنىدۇ ، شۇڭا ئۇنى دائىم ئىشلىتىش ياخشى ئۇسۇل.

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

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

JavaScript ئارقىلىق

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

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

تاللانما

ياق

Methods

$().dropdown('toggle')

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

Events

بارلىق چۈشۈش ھادىسىلىرى ئاتا- .dropdown-menuئانىلار ئېلېمېنتىغا قارىتىلغان.

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Navbar دىكى مىسال

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

ئىشلىتىش

نىسپىي ئورۇن بەلگىلەشنى تەلەپ قىلىدۇ

مەيلى قانداق يولغا قويۇش ئۇسۇلى بولۇشىدىن قەتئىينەزەر ، scrollspy position: relative;سىز جاسۇسلۇق قىلغان ئېلېمېنتنى ئىشلىتىشنى تەلەپ قىلىدۇ. كۆپىنچە ئەھۋاللاردا بۇ <body>. ئۇنىڭدىن باشقا ئېلېمېنتلارغا دومىلىغاندا <body>، چوقۇم بىر heightيۈرۈش ۋە overflow-y: scroll;قوللىنىشقا كاپالەتلىك قىلىڭ.

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

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

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScript ئارقىلىق

CSS نى قوشقاندىن كېيىن position: relative;، JavaScript ئارقىلىق scrollspy غا تېلېفون قىلىڭ:

$('body').scrollspy({ target: '#navbar-example' })

Methods

.scrollspy('refresh')

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

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

تاللانما

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

Events

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Togglable بەتكۈچ tab.js

مىسال بەتكۈچ

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

ئىشلىتىش

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

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Markup

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

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

سۇس ئۈنۈم

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

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Methods

$().tab

بەتكۈچ ئېلېمېنتى ۋە مەزمۇن قاچىسىنى قوزغىتىدۇ. بەتكۈچتە DOM دىكى قاچا تۈگۈنى data-targetياكى نىشانلانغان بولۇشى كېرەك. hrefيۇقارقى مىساللاردا ، بەتكۈچلەر خاسلىق <a>بىلەن s .data-toggle="tab"

.tab('show')

بېرىلگەن بەتكۈچنى تاللايدۇ ۋە مۇناسىۋەتلىك مەزمۇنلارنى كۆرسىتىدۇ. ئىلگىرى تاللانغان باشقا بەتكۈچلەر تاللانمايدۇ ۋە مۇناسىۋەتلىك مەزمۇنلار يوشۇرۇن بولىدۇ. بەتكۈچ تاختىسى ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .shown.bs.tab

$('#someTab').tab('show')

Events

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

1. hide.bs.tab(نۆۋەتتىكى ئاكتىپ بەتكۈچتە)
2. show.bs.tab(كۆرسىتىلىدىغان بەتكۈچتە)
3. hidden.bs.tab(ئالدىنقى ئاكتىپ بەتكۈچتە ، hide.bs.tabپائالىيەت بىلەن ئوخشاش)
4. shown.bs.tab(يېڭىدىن ئاكتىپلانغان ئەمدىلا كۆرسىتىلگەن بەتكۈچتە ، show.bs.tabپائالىيەت بىلەن ئوخشاش)

ئەگەر ھېچقانداق بەتكۈچ ئاكتىپلانمىغان بولسا ، ئۇنداقتا hide.bs.tabۋە hidden.bs.tabۋەقەلەر ئېتىلمايدۇ.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

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

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

مىساللار

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

تۇراقلىق قورال

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

تۆت يۆنىلىش

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

ئىشلىتىش

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

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

$('#example').tooltip(options)

Markup

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

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

تاللانما

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

Methods

$().tooltip(options)

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

.tooltip('show')

بىر ئېلېمېنتنىڭ قورال قوراللىرىنى ئاشكارىلايدۇ. قورال كۆرسەتكۈچى ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . shown.bs.tooltipبۇ قورال قورالنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ. نۆل ئۇزۇنلۇقتىكى ماۋزۇلار بار قوراللار ھەرگىز كۆرۈنمەيدۇ.

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

.tooltip('hide')

ئېلېمېنتنىڭ قورال قوراللىرىنى يوشۇرىدۇ. قورال كۆرسەتكۈچى ئەمەلىيەتتە يوشۇرۇلۇشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . hidden.bs.tooltipبۇ قورال قورالنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.

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

.tooltip('toggle')

ئېلېمېنتنىڭ قورال قوراللىرىنى بىر تەرەپ قىلىدۇ. قورال كۆرسەتكۈچى ئەمەلىيەتتە كۆرسىتىش ياكى يوشۇرۇشتىن بۇرۇن (يەنى ۋەقە ياكى ھادىسە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . بۇ قورال قورالنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.shown.bs.tooltiphidden.bs.tooltip

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

.tooltip('destroy')

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

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

Events

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

$(function () {
  $('[data-toggle="popover"]').popover()
})

مىساللار

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

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

Live demo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

تۆت يۆنىلىش

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

كېيىنكى چېكىشتىن ۋاز كېچىڭ

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

ئىشلىتىش

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

$('#example').popover(options)

تاللانما

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

Methods

$().popover(options)

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

.popover('show')

بىر ئېلېمېنتنىڭ مودا ئېقىمىنى ئاشكارىلايدۇ. پوپايكا ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . shown.bs.popoverبۇ مودا ئېقىمىنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ. ئىسمى ۋە مەزمۇنى نۆل ئۇزۇنلۇقتىكى پوپايكىلار ھەرگىز كۆرۈنمەيدۇ.

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

.popover('hide')

بىر ئېلېمېنتنىڭ ئېقىمىنى يوشۇرىدۇ. پوپايكا ئەمەلىيەتتە يوشۇرۇنغان (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . hidden.bs.popoverبۇ مودا ئېقىمىنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.

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

.popover('toggle')

بىر ئېلېمېنتنىڭ مودا ئېقىمىنى توغرىلايدۇ. پوپايكا ئەمەلىيەتتە كۆرسىتىش ياكى يوشۇرۇشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . بۇ مودا ئېقىمىنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.shown.bs.popoverhidden.bs.popover

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

.popover('destroy')

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

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

Events

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

ئاگاھلاندۇرۇش ئۇچۇرى alert.js

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

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

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

ئىشلىتىش

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

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

Methods

$().alert()

خاسلىقى بار ئەۋلاد ئېلېمېنتلىرىدىكى چېكىلىش ھادىسىلىرىنى ئاگاھلاندۇرۇش ئاڭلايدۇ data-dismiss="alert". (Data-api نىڭ ئاپتوماتىك قوزغىتىشنى ئىشلەتكەندە لازىم ئەمەس.)

$().alert('close')

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

Events

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

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

كۇنۇپكىلار . Js

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

دۆلەت

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

بۇ ئىقتىدار v3.3.5 دىن باشلاپ ئەمەلدىن قالدۇرۇلدى ۋە v4 دە ئۆچۈرۈلدى.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

تاق تاقاش

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

تەكشۈرۈش ساندۇقى / رادىئو

ئۆز ئىچىگە ئالغان تەكشۈرۈش رامكىسى ياكى رادىئو كىرگۈزگۈچنى قوشسىڭىز data-toggle="buttons"، .btn-groupئۇلارنىڭ ئۇسلۇبىدا ئالماشتۇرغىلى بولىدۇ.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Methods

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Collapse.js _

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

مىسال

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

• .collapseمەزمۇننى يوشۇرىدۇ
• .collapsingئۆتكۈنچى مەزگىلدە قوللىنىلىدۇ
• .collapse.inمەزمۇننى كۆرسىتىدۇ

خاسلىق بىلەن ئۇلىنىش hrefياكى خاسلىق بار كۇنۇپكىنى ئىشلىتەلەيسىز data-target. ھەر ئىككى ئىشتا data-toggle="collapse"تەلەپ قىلىنىدۇ.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

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

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

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

.panel-bodyS بىلەن s نى ئالماشتۇرۇشمۇ مۇمكىن .list-group.

ئىشلىتىش

يىمىرىلىش قىستۇرمىسى بىر نەچچە سىنىپتىن پايدىلىنىپ ئېغىر كۆتۈرۈشنى بىر تەرەپ قىلىدۇ:

• .collapseمەزمۇننى يوشۇرىدۇ
• .collapse.inمەزمۇننى كۆرسىتىدۇ
• .collapsingئۆتكۈنچى باشلانغاندا قوشۇلىدۇ ، ئاخىرلاشقاندا چىقىرىۋېتىلىدۇ

بۇ دەرسلەرنى تاپقىلى بولىدۇ component-animations.less.

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

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

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

JavaScript ئارقىلىق

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

$('.collapse').collapse()

تاللانما

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

Methods

.collapse(options)

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

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

.collapse('toggle')

كۆرسىتىلىدىغان ياكى يوشۇرۇنغان قاتلىنىدىغان ئېلېمېنتنى توغرىلايدۇ. قاتلىنىدىغان ئېلېمېنت ئەمەلىيەتتە كۆرسىتىلىش ياكى يوشۇرۇلۇشتىن بۇرۇن (يەنى ھادىسە ياكى ھادىسە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .shown.bs.collapsehidden.bs.collapse

.collapse('show')

قاتلىنىدىغان ئېلېمېنتنى كۆرسىتىدۇ. قاتلىنىدىغان ئېلېمېنت ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .shown.bs.collapse

.collapse('hide')

قاتلىنىدىغان ئېلېمېنتنى يوشۇرىدۇ. قاتلىنىدىغان ئېلېمېنت ئەمەلىيەتتە يوشۇرۇنۇشتىن بۇرۇن (يەنى hidden.bs.collapseۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ.

Events

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

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

مىساللار

ئالدىنقى كېيىنكى

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ئىختىيارىي ئىزاھلار

.carousel-captionتام تەسۋىرگە ھەر قانداق ئېلېمېنت بىلەن ئاسانلا خەت قوشۇڭ .item. خالىغان خالىغان HTML نى شۇ يەرگە قويۇڭ ، ئۇ ئاپتوماتىك توغرىلىنىدۇ ۋە فورماتلىنىدۇ.

بىرىنچى تام تەسۋىر بەلگىسى

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

ئالدىنقى كېيىنكى

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

ئىشلىتىش

كۆپ كارۇسېل

كارۇسېل كارۇسېل كونتروللۇقىنىڭ نورمال ئىشلىنىشى ئۈچۈن idئەڭ سىرتقى قاچىدا ( ) ئىشلىتىشنى تەلەپ قىلىدۇ . .carouselكۆپ كارۇسېل قوشقاندا ياكى كارۇسېل ئالماشتۇرغاندا id، مۇناسىۋەتلىك كونتروللارنى يېڭىلاشقا كاپالەتلىك قىلىڭ.

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

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

بۇ data-ride="carousel"خاسلىق كارۇسېلنى بەت يۈكىدىن باشلاپ جانلاندۇرۇش دەپ بەلگە قىلىشقا ئىشلىتىلىدۇ. ئۇنى ئوخشاش كارۇسېلنىڭ (ئارتۇقچە ۋە زۆرۈر بولمىغان) ئېنىق JavaScript دەسلەپكى قەدەمدە بىرلەشتۈرۈپ ئىشلىتىشكە بولمايدۇ.

JavaScript ئارقىلىق

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

$('.carousel').carousel()

تاللانما

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

Methods

.carousel(options)

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

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

Events

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

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

• direction: كارۇسېلنىڭ سىيرىلىش يۆنىلىشى (ياكى "left"ياكى "right").
• relatedTarget: ئاكتىپ تۈر سۈپىتىدە جايىغا سىيرىلىۋاتقان DOM ئېلېمېنتى.

بارلىق كارۇسېل ھادىسىلىرى كارۇسېلنىڭ ئۆزىگە قارىتىلغان (يەنى <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

مىسال

قوشۇمچە قىستۇرما قىستۇرما ھالەتتە position: fixed;ئېچىلىپ ، بايقالغان ئۈنۈمنى تەقلىد قىلىدۇ position: sticky;. ئوڭ تەرەپتىكى بويسۇندۇرۇش قىستۇرما قىستۇرمىسىنىڭ نەق مەيدان كۆرۈنۈشى.

ئىشلىتىش

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

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

CSS ئارقىلىق ئورۇن بەلگىلەش

قىستۇرما قىستۇرما ئۈچ سىنىپ ئارىسىدا ئالماشتۇرۇلىدۇ ، ھەر بىرى مەلۇم ھالەتكە ۋەكىللىك قىلىدۇ: .affix، .affix-topۋە .affix-bottom. بۇ دەرسلەرنى ئۆزىڭىز (بۇ قىستۇرمىدىن مۇستەقىل) ئەمەلىي ئورۇنلارنى بىر تەرەپ قىلىش ئۈچۈن position: fixed;، ئۇسلۇبلارنى تەمىنلىشىڭىز كېرەك ..affix

بۇ قىستۇرما قىستۇرمىنىڭ قانداق ئىشلەيدىغانلىقى:

1. باشلاش ئۈچۈن قىستۇرما قوشۇلدى.affix-top ئېلېمېنتنىڭ ئەڭ يۇقىرى ئورۇندا ئىكەنلىكىنى كۆرسىتىپ بېرىدۇ. بۇ ۋاقىتتا ھېچقانداق CSS ئورۇن بەلگىلەش تەلەپ قىلىنمايدۇ.
2. سىز چاپلىماقچى بولغان ئېلېمېنتتىن ئۆتۈپ كەتسىڭىز ، ئەمەلىي چاپلاشنى قوزغىتىشى كېرەك. بۇ ئورۇننى .affixئالماشتۇرىدۇ .affix-topۋە position: fixed;ئورۇنلاشتۇرىدۇ (Bootstrap نىڭ CSS تەمىنلىگەن).
3. ئەگەر ئاستى قىسمىغا ئېنىقلىما بېرىلگەن بولسا ، ئۇنى ئالماشتۇرۇش .affixكېرەك .affix-bottom. Offset ئىختىيارىي بولغاچقا ، بىرنى تەڭشەش سىزدىن مۇۋاپىق CSS تەڭشىشىڭىزنى تەلەپ قىلىدۇ. بۇ خىل ئەھۋالدا ، position: absolute;زۆرۈر تېپىلغاندا قوشۇڭ. قىستۇرما سانلىق مەلۇمات خاسلىقى ياكى JavaScript تاللانمىسىنى ئىشلىتىپ ، ئېلېمېنتنى ئۇ يەردىن قەيەرگە قويۇشنى بەلگىلەيدۇ.

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

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

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

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

JavaScript ئارقىلىق

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

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

تاللانما

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

Methods

.affix(options)

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

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

مۇناسىۋەتلىك ئېلېمېنتلارنىڭ ئۆلچىمى ، ئورنى ۋە دومىلاش ئورنىغا ئاساسەن قوشۇمچىنىڭ ھالىتىنى قايتا ھېسابلايدۇ. ، .affix، .affix-topۋە .affix-bottomدەرسلەر يېڭى ھالەتكە ئاساسەن چاپلانغان مەزمۇنغا قوشۇلىدۇ ياكى چىقىرىۋېتىلىدۇ. چاپلانغان مەزمۇننىڭ ياكى نىشان ئېلېمېنتىنىڭ ئۆلچىمى ئۆزگەرتىلگەن ھامان بۇ ئۇسۇلنى چاقىرىپ ، چاپلانغان مەزمۇننىڭ توغرا ئورۇنلىنىشىغا كاپالەتلىك قىلىش كېرەك.

$('#myAffix').affix('checkPosition')

Events

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