Обзор

Жеке же түзүлгөн

Плагиндер өзүнчө (Bootstrap'тын жеке *.jsфайлдарын колдонуу менен) же бардыгын бир убакта (колдонуу bootstrap.jsже кичирейтилген bootstrap.min.js) камтышы мүмкүн.

Маалымат атрибуттары

Сиз бардык Bootstrap плагиндерин JavaScriptтин бир сабын жазбастан гана белгилөө API аркылуу колдоно аласыз. Бул Bootstrap'тин биринчи класстагы API'си жана плагинди колдонууда биринчи көңүл бурууңуз керек.

Айтор, кээ бир учурларда бул функцияны өчүрүү туура болушу мүмкүн. Ошондуктан, биз ошондой эле документтин аталыштары мейкиндигиндеги бардык окуяларды алып салуу менен API маалымат атрибутун өчүрүү мүмкүнчүлүгүн беребиз data-api. Бул төмөнкүдөй көрүнөт:

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

Же болбосо, белгилүү бир плагинди максаттуу үчүн, жөн гана плагиндин атын төмөнкүдөй data-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
})

Санитизатор

Tooltips жана 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's 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 өтүү колдоосун текшерүү жана илинген өтүүлөрдү кармоо үчүн колдонулат.

Өтүүлөрдү өчүрүү

Төмөнкү JavaScript үзүндүсү аркылуу өтүүлөрдү глобалдык түрдө өчүрсө болот, ал жүктөлгөндөн кийин transition.js(же bootstrap.js, шартка жараша) келиши керек:bootstrap.min.js

$.support.transition = false

Modals 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модалдын сыртында басканда көрсөтүлгөн модальдарды четке кагуу үчүн чыкылдатуу аймагын камсыз кылуу үчүн а түзөт.<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 бир сап менен id менен модалды чакырыңыз :

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

Dropdowns dropdown.js

Мисалдар

Бул жөнөкөй плагин менен дээрлик бардык нерсеге ачылуучу менюларды кошуңуз, анын ичинде навигация тилкеси, өтмөктөр жана таблеткалар.

Navbar ичинде

Таблетка ичинде

Колдонуу

.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

Navbarдагы мисал

ScrollSpy плагини жылдыруу абалына жараша навигация максаттарын автоматтык түрдө жаңыртуу үчүн. Чабыт тилкесинин астындагы аймакты сыдырып, класстын активдүү өзгөрүшүн көрүңүз. Ылдый түшүүчү суб пункттар да баса белгиленет.

Колдонуу

Салыштырмалуу жайгашууну талап кылат

Ишке ашыруу ыкмасы кандай болбосун, scrollspy сиз шпион position: relative;кылып жаткан элементте колдонууну талап кылат. Көпчүлүк учурларда бул <body>. дан башка элементтерде жылдырып жатканда , топтомун жана колдонулушун <body>унутпаңыз .heightoverflow-y: scroll;

Маалымат атрибуттары аркылуу

Үстүнкү тилкеңиздин навигацияңызга scrollspy жүрүм-турумун оңой кошуу үчүн data-spy="scroll", шпион кылгыңыз келген элементке кошуңуз (көбүнчө бул <body>). Андан кийин атрибутту каалаган Bootstrap компонентинин data-targetнегизги элементинин ID же классы менен кошуңуз ..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')

DOMдан элементтерди кошуу же алып салуу менен бирге scrollspy колдонуп жатканда, сиз жаңылоо ыкмасын төмөнкүдөй чакырышыңыз керек:

$('[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"Сиз жөн гана белгилөө же data-toggle="pill"элемент боюнча эч кандай JavaScript жазбастан өтмөктү же таблетка навигациясын иштете аласыз . Өтмөккө navжана nav-tabsкласстарын кошуу Bootstrap өтмөктүн стилинul колдонот , ал эми класстарды кошуу таблетка стилин колдонот .navnav-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
})

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

Колдонуу

Tooltip плагини мазмунду жана суроо-талап боюнча белгилерди жаратат жана демейки шартта куралдар кеңештерин триггер элементинен кийин жайгаштырат.

JavaScript аркылуу инструментти иштетиңиз:

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

Белгилөө

dataКурал кеңеши үчүн талап кылынган белги атрибут гана болуп саналат жана titleHTML элементинде сиз кеңешке ээ болгуңуз келет. Аспаптын генерацияланган белгилөөсү өтө жөнөкөй, бирок ал позицияны талап кылат (демейки боюнча, 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.tooltipже hidden.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()
})

Мисалдар

Static 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 аркылуу поповерлерди иштетүү:

$('#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 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.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, a pharetra augue mollis interdum.

Экинчи слайд энбелгиси

Lorem ipsum dolor sit amet, consectetur adipiscing элит.

Үчүнчү слайд энбелгиси

Чыныгы Commodo cursus magna, жана 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'тин аффикс плагини аффикс функционалдуулугуна кирүү үчүн бир нече окуяларды ачып берет.