Шолу

Жеке немесе құрастырылған

Плагиндерді жеке (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

Оқиғалар

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

Санитизатор

Кеңестер мен Popovers HTML қабылдайтын опцияларды зарарсыздандыру үшін кіріктірілген дезинфекциялау құралын пайдаланады.

Әдепкі whiteListмән келесі:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Осы әдепкіге жаңа мәндерді қосқыңыз келсе whiteList, келесі әрекеттерді орындауға болады:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Арнайы кітапхананы, мысалы, DOMPurify пайдаланғыңыз келетіндіктен, біздің дезинфекциялау құралын айналып өткіңіз келсе , келесі әрекеттерді орындауыңыз керек:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

Нұсқа нөмірлері

Bootstrap jQuery плагиндерінің әрқайсысының нұсқасына VERSIONплагин конструкторының қасиеті арқылы қол жеткізуге болады. Мысалы, көмекші плагин үшін:

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

JavaScript өшірілген кезде арнайы резервтер жоқ

Bootstrap плагиндері әсіресе JavaScript өшірілген кезде жақсы жұмыс істемейді. Бұл жағдайда пайдаланушы тәжірибесіне мән берсеңіз, пайдаланушыларыңызға <noscript>жағдайды (және JavaScript-ті қайта қосу жолын) түсіндіру үшін пайдаланыңыз және/немесе өзіңіздің реттелетін резервтеріңізді қосыңыз.

Transitions transition.js

Ауысулар туралы

Қарапайым өту әсерлері transition.jsүшін басқа JS файлдарымен қатар бір рет қосыңыз. Егер сіз құрастырылған (немесе кішірейтілген) қолданып жатсаңыз, bootstrap.jsоны қосудың қажеті жоқ — ол қазірдің өзінде бар.

Ішінде не бар

Transition.js – оқиғаларға арналған негізгі көмекші, transitionEndсонымен қатар CSS ауысу эмуляторы. Оны басқа плагиндер CSS өту қолдауын тексеру және ілулі ауысуларды ұстау үшін пайдаланады.

Ауысуларды өшіру

transition.jsӨтпелер жүктелгеннен кейін (немесе bootstrap.js, bootstrap.min.jsжағдайға қарай) келуі керек келесі JavaScript үзіндісі арқылы жаһандық түрде өшірілуі мүмкін:

$.support.transition = false

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

Тікелей демо

Төмендегі түймені басу арқылы модальды 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>

Қосымша өлшемдер

Модальдердің екі қосымша өлшемі бар, оларды модификатор кластары арқылы алуға болады .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" 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" 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 құжаттарын қараңыз 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модальдан тыс басқанда көрсетілген модальдарды алып тастау үшін басу аймағын қамтамасыз ету үшін a жасайды.<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 арқылы

myModalJavaScript бір жолымен идентификаторы бар модальды шақырыңыз :

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

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-backdrop="".

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

Әдістері

.modal(options)

Мазмұныңызды модаль ретінде белсендіреді. Қосымша опцияларды қабылдайды object.

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

.modal('toggle')

Модальді қолмен ауыстырады. Модаль іс жүзінде көрсетілгенге немесе жасырылғанға дейін (яғни shown.bs.modalнемесе hidden.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')

Оқиғалар

Bootstrap модальды класы модальды функционалдылыққа қосылу үшін бірнеше оқиғаларды көрсетеді.

Барлық модальдық оқиғалар модальдың өзіне (яғни <div class="modal">) жіберіледі.

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

Ашылмалы тізімдер dropdown.js

Мысалдар

Осы қарапайым плагиннің көмегімен кез келген дерлік, соның ішінде шарлау тақтасы, қойындылар және таблеткалар ашылмалы мәзірлерді қосыңыз.

Шарлау тақтасында

Таблеткалардың ішінде

Қолданылуы

.openДеректер атрибуттары немесе JavaScript арқылы ашылмалы плагин негізгі тізім элементіндегі сыныпты ауыстыру арқылы жасырын мазмұнды (ашылмалы мәзірлер) ауыстырады .

.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()

Опциялар

Жоқ

Әдістері

$().dropdown('toggle')

Берілген шарлау тақтасының немесе қойындылы шарлаудың ашылмалы мәзірін ауыстырады.

Оқиғалар

Барлық ашылмалы оқиғалар .dropdown-menuнегізгі элементінде іске қосылады.

Барлық ашылмалы оқиғалардың relatedTargetмәні ауыспалы анкерлік элемент болып табылатын сипатқа ие.

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

ScrollSpy scrollspy.js

Шарлау тақтасындағы мысал

ScrollSpy плагині айналдыру орнына негізделген шарлау мақсаттарын автоматты түрде жаңартуға арналған. Шарлау тақтасының астындағы аймақты айналдырыңыз және белсенді сыныптың өзгеруін қараңыз. Ашылмалы ішкі элементтер де бөлектеледі.

Қолданылуы

Салыстырмалы орналасуды талап етеді

Іске асыру әдісіне қарамастан, scrollspy position: relative;сіз тыңшылық жасап жатқан элементте пайдалануды талап етеді. Көп жағдайда бұл <body>. -дан басқа элементтерде айналдыру кезінде жиынтық және қолданбалы <body>болуын ұмытпаңыз .heightoverflow-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' })

Әдістері

.scrollspy('refresh')

Scrollspy қолданбасын DOM ішінен элементтерді қосу немесе жоюмен бірге пайдаланған кезде, жаңарту әдісін келесідей шақыру керек:

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

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-offset="".

Оқиғалар

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

Ауыстырылатын қойындылар 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)

Белгілеу

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>

Әдістері

$().tab

Қойынды элементін және мазмұн контейнерін белсендіреді. Қойындыда DOM ішіндегі контейнер түйініне бағытталған не а data-targetнемесе болуы керек. hrefЖоғарыдағы мысалдарда қойындылар төлсипаттары <a>бар s болып табылады.data-toggle="tab"

.tab('show')

Берілген қойындыны таңдап, оның байланысты мазмұнын көрсетеді. Бұрын таңдалған кез келген басқа қойынды таңдалмайды және оның байланысты мазмұны жасырылады. Қойындылар тақтасы нақты көрсетілмей тұрып (яғни shown.bs.tabоқиға болғанға дейін) қоңырау шалушыға оралады.

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

Оқиғалар

Жаңа қойындыны көрсеткенде оқиғалар келесі ретпен іске қосылады:

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

Құралдар кеңестері tooltip.js

Джейсон Фрейм жазған тамаша 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)

Белгілеу

Құрал кеңесі үшін қажетті түзету тек 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="".

Әдістері

$().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')

Оқиғалар

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

Popovers popover.js

Қосымша ақпаратты орналастыру үшін кез келген элементке iPad-дағы сияқты шағын мазмұн қабаттарын қосыңыз.

Тақырыптары мен мазмұны нөлге тең болатын поповерлер ешқашан көрсетілмейді.

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

Мысалдар

Статикалық қалқымалы

Төрт опция қолжетімді: жоғарғы, оң жақ, төменгі және солға тураланған.

Тікелей демо

<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 арқылы popovers қосыңыз:

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

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-animation="".

Әдістері

$().popover(options)

Элемент жинағы үшін қалқымалы элементтерді инициализациялайды.

.popover('show')

Элементтің қалқымалы қалпын көрсетеді. Қоңырау шалушыға қалқымалы қоңырау нақты көрсетілмей тұрып (яғни shown.bs.popoverоқиға орын алмас бұрын) қайтарады. Бұл поповерді «қолмен» іске қосу деп саналады. Тақырыптары мен мазмұны нөлге тең болатын поповерлер ешқашан көрсетілмейді.

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

.popover('hide')

Элементтің қалқымалы қалқымалын жасырады. Қалқымалы қоңырау шынымен жасырылғанға дейін (яғни оқиға орын алмас бұрын) қоңырау шалушыға оралады . hidden.bs.popoverБұл поповерді «қолмен» іске қосу деп саналады.

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

.popover('toggle')

Элементтің қалқымалы параметрін ауыстырады. Қоңырау шалушыға қалқымалы шын мәнінде көрсетілмей тұрып немесе жасырылғанға дейін (яғни shown.bs.popoverнемесе hidden.bs.popoverоқиға болғанға дейін) қайтарады. Бұл поповерді «қолмен» іске қосу деп саналады.

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

.popover('destroy')

Элементтің қалқымалы қалпын жасырады және жояды. Делегацияны пайдаланатын поповерлер ( опция арқылы жасалғанselector ) ұрпақ триггер элементтерінде жеке жойылмайды.

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

Оқиғалар

$('#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сыныптары бар екеніне көз жеткізіңіз.

Әдістері

$().alert()

data-dismiss="alert"Төлсипатқа ие ұрпақ элементтерін басу оқиғалары үшін ескертуді тыңдайды . (Data-api автоматты түрде инициализациясын пайдаланған кезде қажет емес.)

$().alert('close')

Ескертуді DOM ішінен жою арқылы жабады. Элементте .fadeжәне .inсыныптары болса, ескерту жойылмас бұрын өшеді.

Оқиғалар

Bootstrap ескерту плагині ескерту функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.

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

Buttons button.js

Түймелердің көмегімен көбірек әрекет етіңіз. Басқару түймесі құралдар тақталары сияқты қосымша құрамдастарға арналған түймелер тобын көрсетеді немесе жасайды.

Мемлекеттік

data-loading-text="Loading..."Түймедегі жүктеу күйін пайдалану үшін қосыңыз .

Бұл мүмкіндік v3.3.5 нұсқасынан бері ескірген және v4 нұсқасында жойылған.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  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">
  Single toggle
</button>

Құсбелгі ұяшығы / Радио

Тиісті мәнерлерінде ауысуды қосу data-toggle="buttons"үшін бар құсбелгіні немесе радио кірістерін қосыңыз..btn-group

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

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

Әдістері

$().button('toggle')

Басу күйін ауыстырады. Түйме белсендірілгендей көрініс береді.

$().button('reset')

Түйме күйін қалпына келтіреді - мәтінді бастапқы мәтінге ауыстырады. Бұл әдіс асинхронды және бастапқы қалпына келтіру аяқталғанға дейін қайтарылады.

$().button(string)

Мәтінді кез келген деректер анықталған мәтін күйіне ауыстырады.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</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 мен .list-groups ауыстыруға болады.

Қолданылуы

Collapse плагині ауыр жүкті көтеру үшін бірнеше сыныптарды пайдаланады:

• .collapseмазмұнын жасырады
• .collapse.inмазмұнын көрсетеді
• .collapsingауысу басталған кезде қосылады және ол аяқталған кезде жойылады

Бұл сыныптарды мына жерден табуға болады component-animations.less.

Деректер атрибуттары арқылы

Жиналмалы элементті басқаруды автоматты түрде тағайындау үшін элементке жай ғана data-toggle="collapse"және a қосыңыз . data-targetТөлсипат data-targetқысқартуды қолдану үшін CSS селекторын қабылдайды. collapseСыныпты жиналмалы элементке қосуды ұмытпаңыз . Оның әдепкі бойынша ашылғанын қаласаңыз, қосымша сыныпты қосыңыз in.

Жиналмалы басқару элементіне аккордеон тәрізді топты басқаруды қосу үшін деректер төлсипатын қосыңыз data-parent="#selector". Бұл әрекетті көру үшін демонстрацияны қараңыз.

JavaScript арқылы

Қолмен қосу:

$('.collapse').collapse()

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-parent="".

Әдістері

.collapse(options)

Мазмұнды жиналмалы элемент ретінде белсендіреді. Қосымша опцияларды қабылдайды object.

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

.collapse('toggle')

Жиналатын элементті көрсетілген немесе жасырын етіп ауыстырады. Жиналатын элемент нақты көрсетілмей немесе жасырылғанға дейін (яғни shown.bs.collapseнемесе hidden.bs.collapseоқиға орын алмас бұрын) қоңырау шалушыға қайтарады.

.collapse('show')

Жиналатын элементті көрсетеді. Жиналмалы элемент нақты көрсетілмей тұрып (яғни shown.bs.collapseоқиға болғанға дейін) қоңырау шалушыға қайтарады.

.collapse('hide')

Жиналатын элементті жасырады. Жиналмалы элемент шынымен жасырылғанға дейін (яғни hidden.bs.collapseоқиға орын алғанға дейін) қоңырау шалушыға қайтарады.

Оқиғалар

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, pharetra augue mollis interdum.

Екінші слайд белгісі

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Үшінші слайд белгісі

Керемет коммодо курсус магна, және scelerisque nisl consectetur.

Алдыңғы Келесі

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

Қолданылуы

Бірнеше карусель

Карусель басқару элементтері дұрыс жұмыс істеуі үшін idең шеткі контейнерді ( ) пайдалану қажет. .carouselБірнеше карусельді қосқанда немесе карусельді өзгерткен кезде idтиісті басқару элементтерін жаңартыңыз.

Деректер атрибуттары арқылы

Карусель орнын оңай басқару үшін деректер атрибуттарын пайдаланыңыз. немесе data-slideкілт сөздерін қабылдайды , бұл слайд орнын оның ағымдағы орнына қатысты өзгертеді. Немесе, слайд орнын - деп басталатын белгілі бір индекске жылжытатын шикі слайд индексін карусельге беру үшін пайдаланыңыз .prevnextdata-slide-todata-slide-to="2"0

Атрибут data-ride="carousel"карусельді бет жүктелуінен бастап анимация ретінде белгілеу үшін пайдаланылады. Оны бір карусельдің (артық және қажетсіз) анық JavaScript инициализациясымен бірге пайдалану мүмкін емес.

JavaScript арқылы

Карусельге қолмен қоңырау шалыңыз:

$('.carousel').carousel()

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-interval="".

Әдістері

.carousel(options)

Қосымша опциялармен карусельді инициализациялайды objectжәне элементтерді айналдыра бастайды.

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

.carousel('cycle')

Карусель элементтерін солдан оңға қарай айналдырады.

.carousel('pause')

Карусель элементтерді айналып өтуді тоқтатады.

.carousel(number)

Карусельді белгілі бір кадрға айналдырады (0 негізінде, массивке ұқсас).

.carousel('prev')

Алдыңғы элементке ауысады.

.carousel('next')

Келесі элементке ауысады.

Оқиғалар

Bootstrap карусель сыныбы карусель функциясына қосылу үшін екі оқиғаны көрсетеді.

Екі оқиғаның да келесі қосымша қасиеттері бар:

• direction: Карусель қозғалатын бағыт ( "left"немесе "right").
• relatedTarget: Белсенді элемент ретінде орнына сырғытылып жатқан DOM элементі.

Барлық карусель оқиғалары карусельдің өзіне (яғни <div class="carousel">) жіберіледі.

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

affix.js аффиксі

Мысал

Аффикс плагині position: fixed;арқылы табылған әсерді эмуляциялай отырып, қосады және өшіреді position: sticky;. Оң жақтағы қосалқы навигация аффикс плагинінің тікелей көрсетілімі болып табылады.

Қолданылуы

Қосымша плагинді деректер атрибуттары арқылы немесе өзіңіздің JavaScript көмегімен қолмен пайдаланыңыз. Екі жағдайда да сіз бекітілген мазмұнның орналасуы мен енін CSS қамтамасыз етуіңіз керек.

Ескертпе: Safari көрсету қатесіне байланысты тартылған немесе итерілген баған сияқты салыстырмалы түрде орналасқан элементте қамтылған элементте аффикс плагинін пайдаланбаңыз .

CSS арқылы позициялау

Аффикс плагині әрқайсысы белгілі бір күйді білдіретін үш сынып арасында ауысады: .affix, .affix-top, және .affix-bottom. position: fixed;On таңбасын қоспағанда, мәнерлерді беруіңіз керек.affixНақты позицияларды өңдеу үшін осы сыныптар үшін мәндерді (осы плагинге тәуелсіз) өзіңіз

Міне, аффикс плагині қалай жұмыс істейді:

1. Бастау үшін плагин қосады.affix-top элементтің ең жоғарғы орнында екенін көрсету үшін қосады. Бұл кезде CSS орналасуы қажет емес.
2. Бекітілетін элементтің үстінен айналдыру нақты аффиксті іске қосуы керек. Бұл жерде .affixауыстырады .affix-topжәне орнатады position: fixed;(Bootstrap CSS қамтамасыз етеді).
3. Төменгі ығысу анықталған болса, өткенді жылжыту онымен ауыстырылуы .affixкерек .affix-bottom. Офсеттер міндетті емес болғандықтан, біреуін орнату сәйкес CSS орнатуды талап етеді. Бұл жағдайда position: absolute;қажет болған жағдайда қосыңыз. Плагин сол жерден элементті қайда орналастыру керектігін анықтау үшін деректер төлсипатын немесе JavaScript опциясын пайдаланады.

Төмендегі пайдалану опцияларының кез келгені үшін CSS орнату үшін жоғарыдағы қадамдарды орындаңыз.

Деректер атрибуттары арқылы

Кез келген элементке аффикс әрекетін оңай қосу data-spy="affix"үшін, барлау керек элементке жай ғана қосыңыз. Элементтің түйреуіштерін ауыстырып қосу уақытын анықтау үшін ығысуларды пайдаланыңыз.

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

Әдістері

.affix(options)

Мазмұныңызды бекітілген мазмұн ретінде белсендіреді. Қосымша опцияларды қабылдайды object.

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

.affix('checkPosition')

Сәйкес элементтердің өлшемдері, орналасуы және айналдыру орны негізінде аффикс күйін қайта есептейді. , .affix, .affix-topжәне .affix-bottomсыныптары жаңа күйге сәйкес аффикстелген мазмұнға қосылады немесе жойылады. Бұл әдіс бекітілген мазмұнның немесе мақсатты элементтің өлшемдері өзгерген сайын, бекітілген мазмұнның дұрыс орналасуын қамтамасыз ету үшін шақырылуы керек.

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

Оқиғалар

Bootstrap аффикс плагині аффикс функционалдығын қосу үшін бірнеше оқиғаларды көрсетеді.