Umumiy koʻrinish

Individual yoki tuzilgan

Plaginlar alohida-alohida (Bootstrap-ning alohida *.jsfayllari yordamida) yoki barchasi bir vaqtning o'zida ( bootstrap.jsyoki kichiklashtirilgan bootstrap.min.js) kiritilishi mumkin.

Ma'lumotlar atributlari

Siz barcha Bootstrap plaginlaridan JavaScript-ning bir qatorini yozmasdan faqat belgilash API orqali foydalanishingiz mumkin. Bu Bootstrap’ning birinchi darajali API’si bo‘lib, plagindan foydalanishda birinchi navbatda e’tiborga olish kerak.

Aytgancha, ba'zi hollarda ushbu funksiyani o'chirib qo'yish maqsadga muvofiq bo'lishi mumkin. Shu sababli, biz hujjat nomlari oraligʻidagi barcha hodisalarni bekor qilish orqali API maʼlumotlar atributini oʻchirish imkoniyatini ham taqdim etamiz data-api. Bu shunday ko'rinadi:

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

Shu bilan bir qatorda, ma'lum bir plaginni maqsad qilish uchun plagin nomini quyidagi kabi data-api nom maydoni bilan birga nom maydoni sifatida kiriting:

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

Dasturli API

Shuningdek, biz barcha Bootstrap plaginlarini faqat JavaScript API orqali ishlatishingiz kerakligiga ishonamiz. Barcha ommaviy API’lar yagona, zanjirband bo‘ladigan usullar bo‘lib, ular bajarilgan to‘plamni qaytaradi.

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

Barcha usullar ixtiyoriy variantlar ob'ektini, ma'lum bir usulga mo'ljallangan qatorni yoki hech narsani (standart xatti-harakat bilan plaginni ishga tushiradigan) qabul qilishi kerak:

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

Har bir plagin shuningdek, o'zining xom konstruktorini Constructorxususiyatga ko'rsatadi: $.fn.popover.Constructor. Agar siz ma'lum bir plagin namunasini olishni istasangiz, uni to'g'ridan-to'g'ri elementdan oling: $('[rel="popover"]').data('popover').

Standart sozlamalar

Constructor.DEFAULTSPlagin ob'ektini o'zgartirish orqali plagin uchun standart sozlamalarni o'zgartirishingiz mumkin :

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

Mojaro yo'q

Ba'zan boshqa UI ramkalari bilan Bootstrap plaginlaridan foydalanish kerak bo'ladi. Bunday sharoitda, vaqti-vaqti bilan nomlar maydoni to'qnashuvi sodir bo'lishi mumkin. Agar bu ro'y bersa, siz .noConflictqiymatini qaytarishni xohlagan plaginga qo'ng'iroq qilishingiz mumkin.

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

Voqealar

Bootstrap ko'pchilik plaginlarning noyob harakatlari uchun maxsus tadbirlarni taqdim etadi. Odatda, bular infinitiv va o‘tgan zamon shakllarida keladi - bunda infinitiv (masalan show, ) hodisa boshida, uning o‘tgan zamon shakli (masalan shown, ) esa ish-harakat tugagandan so‘ng ishga tushadi.

3.0.0 dan boshlab barcha Bootstrap hodisalari nomlar maydoniga ega.

Barcha infinitiv hodisalar preventDefaultfunksionallikni ta'minlaydi. Bu harakat boshlanishidan oldin uning bajarilishini to'xtatish imkoniyatini beradi.

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

Sanitizer

Maslahatlar va Popoverlar HTMLni qabul qiladigan variantlarni tozalash uchun oʻrnatilgan dezinfektsiyalash vositasidan foydalanadi.

Standart whiteListqiymat quyidagicha:

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: []
}

Agar siz ushbu standartga yangi qiymatlar qo'shmoqchi whiteListbo'lsangiz, quyidagilarni qilishingiz mumkin:

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)

Agar siz maxsus kutubxonadan, masalan , DOMPurify dan foydalanishni afzal ko'rganingiz uchun bizning dezinfektsiyalash vositasini chetlab o'tmoqchi bo'lsangiz, quyidagilarni qilishingiz kerak:

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

Versiya raqamlari

VERSIONBootstrap jQuery plaginlarining har bir versiyasiga plagin konstruktorining xususiyati orqali kirish mumkin . Masalan, maslahat plagini uchun:

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

JavaScript o'chirilgan bo'lsa, maxsus zaxiralar yo'q

Bootstrap plaginlari, ayniqsa JavaScript o'chirilgan bo'lsa, unchalik yaxshi ishlamaydi. Agar siz bu holatda foydalanuvchi tajribasi haqida qayg'ursangiz, foydalanuvchilarga <noscript>vaziyatni tushuntirish uchun foydalaning (va JavaScript-ni qayta yoqish) va/yoki o'zingizning shaxsiy zaxiralaringizni qo'shing.

Transitions transition.js

O'tishlar haqida

Oddiy o'tish effektlari transition.jsuchun boshqa JS fayllari qatoriga bir marta qo'shing. Agar siz kompilyatsiya qilingan (yoki kichiklashtirilgan) dan foydalanayotgan bo'lsangiz, buni bootstrap.jsqo'shishning hojati yo'q - u allaqachon mavjud.

Ichida nima bor

Transition.js - voqealar uchun asosiy yordamchi transitionEnd, shuningdek, CSS o'tish emulyatori. U boshqa plaginlar tomonidan CSS o'tish qo'llab-quvvatlashini tekshirish va osilgan o'tishlarni qo'lga olish uchun ishlatiladi.

O'tishlarni o'chirish

Oʻtishlarni global miqyosda quyidagi JavaScript snippeti yordamida oʻchirib qoʻyish mumkin, u yuklangandan keyin transition.js(yoki bootstrap.jsvaziyatga bootstrap.min.jsqarab yoki ) kelishi kerak:

$.support.transition = false

Modallar modal.js

Modallar soddalashtirilgan, ammo moslashuvchan, minimal talab qilinadigan funksionallik va aqlli standart sozlamalarga ega dialog oynasi takliflari.

HTML5 o'z semantikasini qanday aniqlaganligi sababli, autofocusHTML atributi Bootstrap modallarida hech qanday ta'sir ko'rsatmaydi. Xuddi shu effektga erishish uchun ba'zi maxsus JavaScript-dan foydalaning:

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

Misollar

Statik misol

Sarlavha, asosiy va pastki kolontiterdagi harakatlar to'plamiga ega ko'rsatilgan modal.

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

Jonli demo

Quyidagi tugmani bosish orqali modalni JavaScript orqali almashtiring. U pastga siljiydi va sahifaning yuqori qismidan o'chib ketadi.

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

Ixtiyoriy o'lchamlar

Modallar ikkita ixtiyoriy o'lchamga ega bo'lib, ularni o'zgartirish sinflari orqali joylashtirish mumkin .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>

Animatsiyani olib tashlang

Ko'rish uchun so'nish o'rniga oddiygina paydo bo'ladigan modallar uchun .fadesinfni modal belgilashingizdan olib tashlang.

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

Grid tizimidan foydalanish

Modal ichida Bootstrap grid tizimidan .rowfoydalanish .modal-bodyuchun oddiy grid tizimi sinflaridan foydalaning.

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

Trigger tugmasi asosida modal tarkibni o'zgartirish

Hammasi bir xil modalni ishga tushiradigan, mazmuni biroz boshqacha bo'lgan bir nechta tugmalar bormi? Qaysi tugma bosilganiga qarab modal tarkibini o'zgartirish uchun event.relatedTargetHTML atributlaridan data-*foydalaning ( ehtimol jQuery orqali ). Tafsilotlar uchun Modal hodisalar hujjatlariga qarang 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)
})

Foydalanish

Modal plagin ma'lumotlar atributlari yoki JavaScript orqali so'ralganda yashirin tarkibingizni almashtiradi. Shuningdek , u standart aylantirish harakatini bekor qilish uchun qo'shadi va modaldan tashqarida bosilganda ko'rsatilgan modallarni o'chirish uchun bosish maydonini ta'minlash uchun a hosil .modal-openqiladi .<body>.modal-backdrop

Ma'lumotlar atributlari orqali

JavaScript yozmasdan modalni faollashtiring. Oʻzgartirish uchun muayyan modalni nishonga olish uchun yoki data-toggle="modal"tugmasi kabi boshqaruvchi elementga oʻrnating .data-target="#foo"href="#foo"

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

JavaScript orqali

myModalBir qator JavaScript bilan identifikatorli modalni chaqiring :

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

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-backdrop="".

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

Usullari

.modal(options)

Kontentingizni modal sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

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

.modal('toggle')

Modalni qo'lda almashtiradi. Modal haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni yoki hodisa sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.modalhidden.bs.modal

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

.modal('show')

Modalni qo'lda ochadi. Modal ko'rsatilgunga qadar (ya'ni voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.modal

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

.modal('hide')

Modalni qo'lda yashiradi. Modal yashirin bo'lishidan oldin (ya'ni hidden.bs.modalvoqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi.

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

.modal('handleUpdate')

Modalning joylashuvini aylantirish paneli paydo bo'lishi kerak bo'lsa, unga qarshi turish uchun qayta sozlaydi, bu modalni chapga sakrashga olib keladi.

Faqat modal balandligi ochiq bo'lganda o'zgarganda kerak bo'ladi.

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

Voqealar

Bootstrap-ning modal klassi modal funksionallikka ulanish uchun bir nechta hodisalarni ochib beradi.

Barcha modal hodisalar modalning o'ziga qaratiladi (ya'ni <div class="modal">).

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

Ochiladiganlar dropdown.js

Misollar

Ushbu oddiy plagin yordamida deyarli hamma narsaga ochiladigan menyularni qo'shing, jumladan, navigatsiya paneli, yorliqlar va tabletkalar.

Navbar ichida

Tabletkalar ichida

Foydalanish

.openMa'lumotlar atributlari yoki JavaScript orqali ochiladigan plagin asosiy ro'yxat elementidagi sinfni almashtirish orqali yashirin tarkibni (ochiladigan menyular) almashtiradi .

Mobil qurilmalarda ochiladigan menyuni ochish .dropdown-backdropmenyudan tashqarida bosilganda ochiladigan menyularni yopish uchun teginish maydoni sifatida qo'shiladi, bu iOS-ni to'g'ri qo'llab-quvvatlash talabidir. Bu shuni anglatadiki, ochiladigan menyudan boshqa ochiladigan menyuga o'tish uchun mobil telefonga qo'shimcha tegish kerak bo'ladi.

Eslatma: data-toggle="dropdown"Atribut ilova darajasida ochiladigan menyularni yopish uchun ishlatiladi, shuning uchun uni har doim ishlatish yaxshi fikr.

Ma'lumotlar atributlari orqali

data-toggle="dropdown"Ochiladigan menyuni almashtirish uchun havola yoki tugmaga qo'shing .

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

Havola tugmalari yordamida URL manzillarini saqlab qolish uchun data-targeto‘rniga atributdan foydalaning 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 orqali

JavaScript orqali ochiladigan menyularga qo'ng'iroq qiling:

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

Variantlar

Yo'q

Usullari

$().dropdown('toggle')

Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini almashtiradi.

Voqealar

Barcha ochiladigan hodisalar .dropdown-menu'ning asosiy elementida ishga tushiriladi.

Barcha ochiladigan hodisalar relatedTargetqiymati o'zgaruvchan langar elementi bo'lgan xususiyatga ega.

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

ScrollSpy scrollspy.js

Navbardagi misol

ScrollSpy plagini o'tish joyiga qarab navbat maqsadlarini avtomatik ravishda yangilash uchun mo'ljallangan. Navbar ostidagi maydonni aylantiring va faol sinf o'zgarishini kuzating. Ochiladigan pastki elementlar ham ta'kidlanadi.

Foydalanish

Nisbiy joylashishni talab qiladi

Amalga oshirish usulidan qat'i nazar, scrollspy position: relative;siz josuslik qilayotgan elementda foydalanishni talab qiladi. Aksariyat hollarda bu <body>. dan boshqa elementlarda aylanayotganda , to'plam va qo'llanilishiga <body>ishonch hosil qiling.heightoverflow-y: scroll;

Ma'lumotlar atributlari orqali

Yuqori paneldagi navigatsiyaga osongina scrollspy harakatini qo'shish data-spy="scroll"uchun josuslik qilmoqchi bo'lgan elementga qo'shing (ko'pincha bu <body>). Keyin har qanday Bootstrap komponentining data-targetasosiy elementining identifikatori yoki sinfi bilan atributni qo'shing..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 orqali

CSS-ni qo'shgandan so'ng position: relative;, JavaScript orqali scrollspy-ga qo'ng'iroq qiling:

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

Usullari

.scrollspy('refresh')

Scrollspy-dan DOM-ga elementlarni qo'shish yoki olib tashlash bilan birgalikda foydalanilganda, siz yangilash usulini shunday chaqirishingiz kerak bo'ladi:

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

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-offset="".

Voqealar

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

Oʻzgartirish mumkin boʻlgan tab.js

Misol yorliqlari

Mahalliy kontent panellari orqali, hatto ochiladigan menyular orqali ham o‘tish uchun tezkor, dinamik yorliq funksiyasini qo‘shing. Ichki varaqlar qoʻllab-quvvatlanmaydi.

Foydalanish

JavaScript orqali yorliqli yorliqlarni yoqish (har bir yorliq alohida faollashtirilishi kerak):

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

Siz alohida yorliqlarni bir necha usul bilan faollashtirishingiz mumkin:

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

Belgilash

Siz biron bir JavaScript yozmasdan yorliq yoki tabletka navigatsiyasini oddiygina belgilab data-toggle="tab"yoki data-toggle="pill"elementda faollashtirishingiz mumkin. navYorliqlarga va nav-tabssinflarini qo'shish ulBootstrap yorlig'i uslubininav qo'llaydi, va sinflarini qo'shish esa hap uslubininav-pills qo'llaydi .

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

Yopish effekti

Yorliqlarni .fadeoʻchirish uchun har biriga qoʻshing .tab-pane. Birinchi yorliq paneli ham .inboshlang'ich tarkibni ko'rinadigan qilish kerak.

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

Usullari

$().tab

Yorliq elementi va kontent konteynerini faollashtiradi. Yorliqda DOM-dagi konteyner tuguniga mo'ljallangan data-targetyoki a bo'lishi kerak . hrefYuqoridagi misollarda yorliqlar atributlarga <a>ega s .data-toggle="tab"

.tab('show')

Berilgan yorliqni tanlaydi va unga aloqador tarkibni ko'rsatadi. Oldindan tanlangan boshqa yorliqlar bekor qilinadi va unga bog'liq kontent berkitiladi. Qo'ng'iroq qiluvchiga yorliqlar paneli ko'rsatilishidan oldin (ya'ni shown.bs.tabvoqea sodir bo'lishidan oldin) qaytadi.

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

Voqealar

Yangi yorliq ko'rsatilganda voqealar quyidagi tartibda yonadi:

1. hide.bs.tab(joriy faol yorliqda)
2. show.bs.tab(ko'rsatiladigan yorliqda)
3. hidden.bs.tab(oldingi faol yorliqda, voqea uchun bir xil hide.bs.tab)
4. shown.bs.tab(yangi faol ko'rsatilgan yorliqda, xuddi show.bs.tabvoqea uchun)

Hech qanday yorliq allaqachon faol bo'lmagan bo'lsa, hide.bs.tabva hidden.bs.tabvoqealari o'chirilmaydi.

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

Tooltips tooltip.js

Jeyson Frame tomonidan yozilgan mukammal jQuery.tipsy plaginidan ilhomlangan; Maslahatlar yangilangan versiya boʻlib, u tasvirlarga tayanmaydi, animatsiyalar uchun CSS3 va mahalliy sarlavhalarni saqlash uchun maʼlumotlar atributlaridan foydalanadi.

Nol uzunlikdagi sarlavhali maslahatlar hech qachon ko'rsatilmaydi.

Misollar

Maslahatlarni ko'rish uchun kursorni quyidagi havolalar ustiga olib boring:

Statik maslahat

To'rtta variant mavjud: yuqori, o'ng, pastki va chapga tekislangan.

To'rt yo'nalish

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

Foydalanish

Ko'rsatma plagini so'rov bo'yicha tarkib va ​​belgilarni yaratadi va sukut bo'yicha maslahatlarni ishga tushirish elementidan keyin joylashtiradi.

JavaScript orqali asboblar maslahatini ishga tushiring:

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

Belgilash

Maslahat uchun kerakli belgi faqat dataatribut titlebo'lib, HTML elementida siz maslahatchi bo'lishni xohlaysiz. Ko'rsatmaning yaratilgan belgilari juda oddiy, lekin u joyni talab qilsa (odatda, topplagin tomonidan o'rnatiladi).

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

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-animation="".

Usullari

$().tooltip(options)

Elementlar to'plamiga asboblar paneli ishlov beruvchisini biriktiradi.

.tooltip('show')

Elementning asboblar maslahatini ko'rsatadi. Maslahat ko'rsatilishidan oldin (ya'ni voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi . shown.bs.tooltipBu asboblar maslahatining "qo'lda" ishga tushirilishi hisoblanadi. Nol uzunlikdagi sarlavhali maslahatlar hech qachon ko'rsatilmaydi.

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

.tooltip('hide')

Elementning asboblar maslahatini yashiradi. Maslahat yashirin bo'lishidan oldin (ya'nihidden.bs.tooltip voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi. Bu asboblar maslahatining "qo'lda" ishga tushirilishi hisoblanadi.

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

.tooltip('toggle')

Elementning asboblar maslahatini almashtiradi. Maslahat ko'rsatilishidan yoki yashirilishidan oldin (ya'ni yoki hodisa sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi . Bu asboblar maslahatining "qo'lda" ishga tushirilishi hisoblanadi.shown.bs.tooltiphidden.bs.tooltip

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

.tooltip('destroy')

Elementning asboblar maslahatini yashiradi va yo'q qiladi. Delegatsiyadan foydalanadigan maslahatlarni ( opsiya yordamida yaratilgan )selector nasl trigger elementlarida alohida yo‘q qilib bo‘lmaydi.

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

Voqealar

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

Popovers popover.js

Ikkilamchi ma'lumotni saqlash uchun har qanday elementga, iPad'dagi kabi kontentning kichik qatlamlarini qo'shing.

Sarlavhasi va mazmuni nolga teng bo'lgan popoverlar hech qachon ko'rsatilmaydi.

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

Misollar

Statik popover

To'rtta variant mavjud: yuqori, o'ng, pastki va chapga tekislangan.

Jonli demo

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

To'rt yo'nalish

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

Keyingi bosishda o'chirib qo'ying

Foydalanuvchi qilgan focuskeyingi bosishda popoverlarni o'chirish uchun triggerdan foydalaning.

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

Foydalanish

JavaScript orqali popoverlarni yoqish:

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

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-animation="".

Usullari

$().popover(options)

Elementlar to'plami uchun popoverlarni ishga tushiradi.

.popover('show')

Elementning popoverini ko'rsatadi. Qo'ng'iroq qiluvchiga popover haqiqatda ko'rsatilishidan oldin (ya'ni shown.bs.popovervoqea sodir bo'lishidan oldin) qaytadi. Bu popoverning "qo'lda" ishga tushirilishi hisoblanadi. Sarlavhasi va mazmuni nol uzunlikdagi popoverlar hech qachon ko'rsatilmaydi.

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

.popover('hide')

Elementning qalqib chiquvchi oynasini yashiradi. Qo'ng'iroq qiluvchiga popover yashirin bo'lishidan oldin (ya'ni hidden.bs.popovervoqea sodir bo'lishidan oldin) qaytadi. Bu popoverning "qo'lda" ishga tushirilishi hisoblanadi.

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

.popover('toggle')

Elementning qalqib chiquvchi oynasini almashtiradi. Qo'ng'iroq qiluvchiga popover haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni shown.bs.popoveryoki hidden.bs.popoverhodisa sodir bo'lishidan oldin) qaytadi. Bu popoverning "qo'lda" ishga tushirilishi hisoblanadi.

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

.popover('destroy')

Elementning popoverini yashiradi va yo'q qiladi. Delegatsiyadan foydalanadigan popoverlarni ( opsiya yordamida yaratilgan )selector nasl trigger elementlarida alohida yo‘q qilib bo‘lmaydi.

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

Voqealar

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

Ogohlantirish xabarlari alert.js

Ogohlantirishlarga misollar

Ushbu plagin yordamida barcha ogohlantirish xabarlariga oʻchirish funksiyasini qoʻshing.

Tugmani ishlatganda .close, u birinchi bola bo'lishi kerak .alert-dismissibleva belgilashda undan oldin matn tarkibi kelmasligi kerak.

Foydalanish

data-dismiss="alert"Avtomatik ravishda ogohlantirish funksiyasini berish uchun yopish tugmachangizga qo'shing . Ogohlantirishni yopish uni DOMdan olib tashlaydi.

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

Ogohlantirishlaringiz yopilganda animatsiyadan foydalanishi uchun ularda .fadeva .insinflar allaqachon qo'llanilganligiga ishonch hosil qiling.

Usullari

$().alert()

Atributga ega boʻlgan avlod elementlaridagi bosish hodisalari haqida ogohlantirishni tinglaydi data-dismiss="alert". (Data-api-ning avtomatik ishga tushirilishidan foydalanilganda kerak emas.)

$().alert('close')

Ogohlantirishni DOMdan olib tashlash orqali yopadi. Agar elementda .fadeva .insinflari mavjud bo'lsa, ogohlantirish o'chirilishidan oldin o'chadi.

Voqealar

Bootstrap-ning ogohlantirish plagini ogohlantirish funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.

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

Tugmalar button.js

Tugmalar yordamida ko'proq harakat qiling. Boshqaruv tugmasi asboblar paneli kabi ko'proq komponentlar uchun tugmalar guruhlarini belgilaydi yoki yaratadi.

Davlatga tegishli

data-loading-text="Loading..."Tugmadagi yuklanish holatidan foydalanish uchun qo'shing .

Bu xususiyat 3.3.5 versiyasidan boshlab eskirgan va v4 da olib tashlangan.

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

Yagona almashtirish

data-toggle="button"Bitta tugma orqali almashtirishni faollashtirish uchun qo'shing .

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

Belgilash qutisi / Radio

Tegishli uslublarda almashtirishni yoqish uchun o'z ichiga olgan belgilash katakchasiga yoki radio yozuvlarini data-toggle="buttons"qo'shing ..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>

Usullari

$().button('toggle')

Bosish holatini almashtiradi. Tugma faollashtirilgan ko'rinishni beradi.

$().button('reset')

Tugma holatini tiklaydi - matnni asl matnga almashtiradi. Bu usul asinxrondir va asl holatini tiklash tugaguniga qadar qaytadi.

$().button(string)

Matnni har qanday ma'lumot bilan belgilangan matn holatiga almashtiradi.

<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-ni yig'ish

Oson almashtirish harakati uchun bir nechta sinflardan foydalanadigan moslashuvchan plagin.

Misol

Sinf o'zgarishlari orqali boshqa elementni ko'rsatish va yashirish uchun quyidagi tugmalarni bosing:

• .collapsemazmunini yashiradi
• .collapsingo'tish paytida qo'llaniladi
• .collapse.inmazmunini ko‘rsatadi

Siz atributli havoladan hrefyoki atributli tugmachadan foydalanishingiz mumkin data-target. Ikkala holatda data-toggle="collapse"ham talab qilinadi.

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

Akkordeon misoli

Panel komponenti bilan akkordeon yaratish uchun birlamchi siqilish harakatini kengaytiring.

<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 ni s bilan almashtirish ham mumkin .list-group.

Foydalanish

Yiqilish plagini og'ir yuklarni ko'tarish uchun bir nechta sinflardan foydalanadi:

• .collapsemazmunini yashiradi
• .collapse.inmazmunini ko‘rsatadi
• .collapsingo'tish boshlanganda qo'shiladi va tugashi bilan o'chiriladi

Ushbu sinflarni quyidagi manzilda topish mumkin component-animations.less.

Ma'lumotlar atributlari orqali

Yigʻiladigan element boshqaruvini avtomatik belgilash uchun elementga data-toggle="collapse"va a qoʻshing . data-targetAtribut data-targetsiqishni qo'llash uchun CSS selektorini qabul qiladi. collapseSinfni yig'iladigan elementga qo'shganingizga ishonch hosil qiling . Agar siz uni sukut bo'yicha ochishni istasangiz, qo'shimcha sinfni qo'shing in.

Akkordeonga o'xshash guruh boshqaruvini yig'iladigan boshqaruvga qo'shish uchun ma'lumotlar atributini qo'shing data-parent="#selector". Buni amalda ko'rish uchun demoga qarang.

JavaScript orqali

Qo'lda yoqish:

$('.collapse').collapse()

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-parent="".

Usullari

.collapse(options)

Kontentingizni yig'iladigan element sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

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

.collapse('toggle')

Yigʻiladigan elementni koʻrsatish yoki berkitishga almashtiradi. Yig'iladigan element haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni yoki hodisa sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.collapsehidden.bs.collapse

.collapse('show')

Yigʻiladigan elementni koʻrsatadi. Yig'ib olinadigan element haqiqatda ko'rsatilishidan oldin (ya'ni, voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.collapse

.collapse('hide')

Yig'iladigan elementni yashiradi. Yig'ib olinadigan element haqiqatda yashirilgunga qadar (ya'ni voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .hidden.bs.collapse

Voqealar

Bootstrap ning qulash klassi qulash funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.

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

Carousel carousel.js

Karusel kabi elementlarni aylanib o'tish uchun slayd-shou komponenti. Ichki karusellar qo'llab-quvvatlanmaydi.

Misollar

Oldingi Keyingisi

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

Ixtiyoriy taglavhalar

.carousel-captionHar qanday element ichidagi element bilan slaydlaringizga osongina sarlavha qo'shing .item. U yerga deyarli har qanday ixtiyoriy HTMLni joylashtiring va u avtomatik ravishda tekislanadi va formatlanadi.

Birinchi slayd yorlig'i

Nulla vitae elit libero, a pharetra augue mollis interdum.

Ikkinchi slayd yorlig'i

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Uchinchi slayd yorlig'i

To'g'ridan-to'g'ri commodo cursus magna, scelerisque nisl consectetur.

Oldingi Keyingisi

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

Foydalanish

Bir nechta karusel

Karusel boshqaruvlari to'g'ri ishlashi uchun ideng chetidagi idishdan ( ) foydalanish kerak. .carouselBir nechta karusel qo'shganda yoki karuselni o'zgartirganda id, tegishli boshqaruv elementlarini yangilashni unutmang.

Ma'lumotlar atributlari orqali

Karusel o'rnini osongina boshqarish uchun ma'lumotlar atributlaridan foydalaning. yoki data-slidekalit so'zlarini qabul qiladi , bu esa slaydni joriy holatiga nisbatan o'zgartiradi. Shu bilan bir qatorda, slayd o'rnini ma'lum bir indeksga siljituvchi karuselga xom slayd indeksini o'tkazish uchun foydalaningprevnextdata-slide-todata-slide-to="2"0 foydalaning .

data-ride="carousel"Atribut karuselni sahifa yuklanishidan boshlab animatsiya sifatida belgilash uchun ishlatiladi . Uni bir xil karuselning aniq JavaScript ishga tushirishi (ortiqcha va keraksiz) bilan birgalikda ishlatib bo'lmaydi.

JavaScript orqali

Karuselga qo'lda qo'ng'iroq qiling:

$('.carousel').carousel()

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-interval="".

Usullari

.carousel(options)

Karuselni ixtiyoriy variantlar objectbilan ishga tushiradi va ob'ektlar bo'ylab aylana boshlaydi.

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

.carousel('cycle')

Karusel elementlarini chapdan o'ngga aylantiring.

.carousel('pause')

Karuselning ob'ektlar orasidan aylanishini to'xtatadi.

.carousel(number)

Karuselni ma'lum bir freymga aylantiradi (0-ga asoslangan, massivga o'xshash).

.carousel('prev')

Oldingi elementga aylanish.

.carousel('next')

Keyingi elementga o'tish.

Voqealar

Bootstrap-ning karusel klassi karusel funksiyasiga ulanish uchun ikkita hodisani ochib beradi.

Ikkala hodisa ham quyidagi qo'shimcha xususiyatlarga ega:

• direction: Karusel siljish yo'nalishi (yoki "left"yoki "right").
• relatedTarget: Faol element sifatida joyiga surilayotgan DOM elementi.

Barcha karusel hodisalari karuselning o'ziga (ya'ni <div class="carousel">) qaratiladi.

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

Affiks.js _

Misol

Affiks plagini position: fixed;bilan topilgan effektga taqlid qilib, yoqiladi va o'chiriladi position: sticky;. O'ngdagi subnavigatsiya - bu affiks plaginining jonli demosi.

Foydalanish

Affiks plaginini ma'lumotlar atributlari orqali yoki o'zingizning JavaScript-ni qo'lda ishlating. Ikkala holatda ham siz biriktirilgan tarkibingizning joylashuvi va kengligi uchun CSS-ni taqdim etishingiz kerak.

Eslatma: Safari renderlash xatosi tufayli tortilgan yoki surilgan ustun kabi nisbatan joylashtirilgan element tarkibidagi elementda affiks plaginidan foydalanmang .

CSS orqali joylashishni aniqlash

Affiks plaginlari uchta sinf o'rtasida almashinadi, ularning har biri ma'lum bir holatni ifodalaydi: .affix, .affix-top, va .affix-bottom. Haqiqiy pozitsiyalarni boshqarish uchun siz o'zingiz (ushbu plagindan mustaqil) ushbu sinflar uchun uslublarni taqdim etishingiz kerak, position: fixed;on dan tashqari..affix

Affiks plagini qanday ishlaydi:

1. Boshlash uchun plagin qo'shiladi.affix-top element eng yuqori holatda ekanligini ko'rsatish uchun qo'shiladi. Bu nuqtada CSS joylashuvi talab qilinmaydi.
2. O'zingiz qo'ymoqchi bo'lgan elementni aylanib o'tish haqiqiy affiksni ishga tushirishi kerak. Bu joy .affixalmashtiradi .affix-topva o'rnatadi position: fixed;(Bootstrap's CSS tomonidan taqdim etilgan).
3. Agar pastki ofset aniqlangan bo'lsa, o'tga o'tish uni .affixbilan almashtirilishi kerak .affix-bottom. Ofsetlar ixtiyoriy bo'lgani uchun, birini o'rnatish tegishli CSS-ni o'rnatishingizni talab qiladi. Bunday holda, position: absolute;kerak bo'lganda qo'shing. Plagin elementni u yerdan qaerga joylashtirishni aniqlash uchun ma'lumotlar atributidan yoki JavaScript variantidan foydalanadi.

Quyidagi foydalanish opsiyalaridan biriga CSS-ni sozlash uchun yuqoridagi amallarni bajaring.

Ma'lumotlar atributlari orqali

Har qanday elementga affiks xatti-harakatlarini osongina qo'shish data-spy="affix"uchun josuslik qilmoqchi bo'lgan elementga qo'shing. Elementni qadashni qachon almashtirish kerakligini aniqlash uchun ofsetlardan foydalaning.

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

JavaScript orqali

JavaScript orqali affiks plaginiga qo'ng'iroq qiling:

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

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-offset-top="200".

Usullari

.affix(options)

Kontentingizni biriktirilgan tarkib sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

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

.affix('checkPosition')

Tegishli elementlarning o‘lchamlari, joylashuvi va aylanma o‘rnidan kelib chiqib, affiks holatini qayta hisoblab chiqadi. , .affix, .affix-topva .affix-bottomsinflar yangi holatga ko'ra affikslangan tarkibga qo'shiladi yoki o'chiriladi. Affikslangan tarkibning to'g'ri joylashishini ta'minlash uchun ushbu usulni har safar qo'yilgan tarkib yoki maqsad elementning o'lchamlari o'zgartirilganda chaqirish kerak.

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

Voqealar

Bootstrap-ning affiks plagini affiks funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.