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.

Kompilyatsiya qilingan JavaScript-dan foydalanish

Ikkala bootstrap.jsva bootstrap.min.jsbitta faylda barcha plaginlarni o'z ichiga oladi. Faqat bittasini kiriting.

Plaginga bog'liqliklar

Ba'zi plaginlar va CSS komponentlari boshqa plaginlarga bog'liq. Agar siz plaginlarni alohida-alohida qo'shsangiz, hujjatlarda ushbu bog'liqliklarni tekshiring. Shuni ham yodda tutingki, barcha plaginlar jQuery-ga bog'liq (bu jQuery plagin fayllaridan oldin kiritilishi kerakligini anglatadi ). jQuery-ning qaysi versiyalari qo'llab-quvvatlanishini ko'rish uchun biz bilan maslahatlashing .bower.json

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

Ma'lumotlar atributlari orqali har bir element uchun faqat bitta plagin

Bitta elementda bir nechta plaginlarning ma'lumotlar atributlaridan foydalanmang. Misol uchun, tugma ham asboblar maslahatiga ega, ham modalni almashtira olmaydi. Buni amalga oshirish uchun o'rash elementidan foydalaning.

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

Versiya raqamlari

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

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

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.

Uchinchi tomon kutubxonalari

Bootstrap rasmiy ravishda Prototype yoki jQuery UI kabi uchinchi tomon JavaScript kutubxonalarini qo'llab-quvvatlamaydi . Voqealarga va nomlar oralig'iga qaramay .noConflict, siz o'zingiz hal qilishingiz kerak bo'lgan muvofiqlik muammolari bo'lishi mumkin.

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.

Bir nechta ochiq modal qo'llab-quvvatlanmaydi

Boshqasi ko'rinib turganda modalni ochmaslikka ishonch hosil qiling. Bir vaqtning o'zida bir nechta modalni ko'rsatish uchun maxsus kod kerak.

Modal belgilashni joylashtirish

Modalning tashqi koʻrinishi va/yoki funksionalligiga taʼsir etuvchi boshqa komponentlarning oldini olish uchun har doim modalning HTML kodini hujjatingizda yuqori darajali joyga joylashtirishga harakat qiling.

Mobil qurilmalar uchun ogohlantirishlar

Mobil qurilmalarda modallardan foydalanish bo'yicha ba'zi ogohlantirishlar mavjud. Tafsilotlar uchun brauzerimizni qoʻllab-quvvatlash boʻlimiga qarang .

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>

Modallarga kirish imkoniyatini yarating

Modal sarlavhaga havola qilib, va ni qo'shishni unutmang, to role="dialog"ga va o'ziga .aria-labelledby="...".modalrole="document".modal-dialog

aria-describedbyBundan tashqari, siz on bilan modal dialogingizning tavsifini berishingiz mumkin .modal.

YouTube videolarini joylashtirish

YouTube videolarini modallarga joylashtirish, ijroni avtomatik ravishda to‘xtatish va boshqalar uchun Bootstrap-da bo‘lmagan qo‘shimcha JavaScript-ni talab qiladi. Qo'shimcha ma'lumot olish uchun ushbu foydali Stack Overflow postiga qarang.

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 bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

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

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

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,

...boshqa tugmalar...
<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="".

Ism turi standart tavsifi
fon mantiqiy yoki satr'static' rost Modal fon elementini o'z ichiga oladi. Shu bilan bir qatorda, staticbosilganda modalni yopmaydigan fon uchun belgilang.
klaviatura mantiqiy rost Escape tugmasi bosilganda modalni yopadi
ko'rsatish mantiqiy rost Initsializatsiya qilinganda modalni ko'rsatadi.
masofaviy yo'l yolg'on

Bu parametr v3.3.0 dan beri eskirgan va v4 da olib tashlangan. Buning o'rniga mijoz tomoni shablonini yoki ma'lumotlarni bog'lash tizimidan foydalanishni yoki jQuery.load ga o'zingiz qo'ng'iroq qilishni tavsiya etamiz.

Agar masofaviy URL taqdim etilsa, kontent jQuery usuli orqali bir marta yuklanadiload va divga kiritiladi .modal-content. Agar siz data-api dan foydalanayotgan bo'lsangiz href, masofaviy manbani ko'rsatish uchun atributdan foydalanishingiz mumkin. Bunga misol quyida ko'rsatilgan:

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

Usullari

Kontentingizni modal sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

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

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

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

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

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

Tadbir turi Tavsif
show.bs.modal Ushbu hodisa showmisol usuli chaqirilganda darhol ishga tushadi. Agar bosish sabab bo'lsa, bosilgan element relatedTargethodisaning xususiyati sifatida mavjud.
ko'rsatilgan.bs.modal Ushbu hodisa modal foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi). Agar bosish sabab bo'lsa, bosilgan element relatedTargethodisaning xususiyati sifatida mavjud.
hide.bs.modal Ushbu hodisa hidemisol usuli chaqirilganda darhol o'chiriladi.
yashirin.bs.modal Ushbu hodisa modal foydalanuvchidan yashirishni tugatgandan so'ng o'chiriladi (CSS o'tishlari tugashini kutadi).
yuklangan.bs.modal remoteModal opsiyadan foydalangan holda kontentni yuklagan bo'lsa, bu hodisa o'chiriladi .
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Ochiladiganlar dropdown.js

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

Navbar ichida

Tabletkalar ichida

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

data-toggle="dropdown"hali ham talab qilinadi

Ochiladigan ro'yxatni JavaScript orqali chaqirasizmi yoki o'rniga data-api dan foydalanasizmi, data-toggle="dropdown"har doim ochiladigan menyuning tetik elementida bo'lishi talab qilinadi.

Yo'q

Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini almashtiradi.

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

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

Tadbir turi Tavsif
show.bs.ochiluvchi Bu hodisa shou namunasi usuli chaqirilganda darhol ishga tushadi.
ko'rsatilgan.bs.ochiladi Ushbu hodisa ochiladigan ro'yxat foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi).
hide.bs.ochiluvchi Hide misol usuli chaqirilganda, bu hodisa darhol ishga tushiriladi.
yashirin.bs.ochiladigan Ushbu hodisa ochiladigan ro'yxatni foydalanuvchidan yashirishni tugatgandan so'ng boshlanadi (CSS o'tishlari tugashini kutadi).
$('#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.

@yog'

Reklama leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ular qui sotilgan oldin. Tumblr fermadan stolga velosiped huquqlari. Anim keffiyeh carles kardigan. Velit seitan mcsweeney ning fotostendi 3 bo'ri oy irure. Cosby sviter lomo jinsi shortilar, Uilyamsburg hoodie minim qui siz ular haqida eshitmagan bo'lsangiz kerak va kardigan ishonch fondi culpa biodiesel Wes Anderson estetik. Nihil tattooed accusamus, Cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mo'ylovli skeytbord, adipisicing fugiat velit pitchfork soqol. Freegan soqollari mcsweeney's ko'rinishida. Cupidatat to'rt loko nisi, ea helvetica nulla carles. Tatuirovka qilingan kosbi kozok oziq-ovqat yuk mashinasi, Mcsweeney's quis non freegan vinyl. Lo-fi Wes Anderson +1 sartorial. Karlesning estetik bo'lmagan mashqlari g'ayrioddiy. Bruklin adipisicing hunarmand pivo vitse keytar deserunt.

bitta

Occaecat commodo aliqua delectus. Fap craft pivo deserunt skeytbord ea. Lomo velosiped huquqlarini adipisicing banh mi, velit ea sunt the next level locavore in a magna Veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisizing. DIY minimal messenjer sumkasidan foydalanish. Cred ex in, iphone uchun barqaror delectus consectetur fanny pack.

ikki

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sintetik identifikatorni aniqlang. Locavore sed helvetica cliche irony, momaqaldiroqlar, ehtimol siz ular haqida eshitmagan bo'lsangiz ham, hoodie glyutensiz lo-fi fap aliquip. Ular sotilishidan oldin mehnatkashlar, Terri Richardson, hunarmandning kosbi kozoklarini yaxshi ko'rardi. Cardigan craft pivo seitan tayyor velit. VHS chambray laboris tempor veniam. Anim mollit minimal commodo ullamco thundercats.

Foydalanish

Bootstrap navini talab qiladi

Scrollspy hozirda faol havolalarni to'g'ri ajratib ko'rsatish uchun Bootstrap nav komponentidan foydalanishni talab qiladi .

Yechish mumkin bo'lgan ID maqsadlari talab qilinadi

Navbar havolalarida hal qilinadigan id maqsadlari boʻlishi kerak. Masalan, <a href="#home">home</a>DOMdagi biror narsaga mos kelishi kerak <div id="home"></div>.

Maqsadli bo'lmagan :visibleelementlar e'tiborga olinmadi

:visibleJQuery'ga mos kelmaydigan maqsadli elementlar e'tiborga olinmaydi va ularning mos navbatlari hech qachon ta'kidlanmaydi.

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

Ism turi standart tavsifi
ofset raqam 10 O'tkazish joyini hisoblashda yuqoridan siljish uchun piksellar.

Voqealar

Tadbir turi Tavsif
activate.bs.scrollspy Bu voqea har safar yangi element scrollspy tomonidan faollashtirilganda boshlanadi.
$('#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.

Raw denim, ehtimol siz ular haqida eshitmagansiz jinsi shortilar Ostin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mo'ylovli klişe tempor, Williamsburg Carles vegan helvetica. Reprehenderit qassob retro keffiyeh dreamcatcher synth. Cosby sviter eu banh mi, qui irure Terri Richardson sobiq kalamar. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, qassob voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Yorliqli navigatsiyani kengaytiradi

Ushbu plagin yorliqli navigatsiya komponentini yorliqli maydonlarni qo'shish uchun kengaytiradi.

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.

Tadbir turi Tavsif
show.bs.tab Bu voqea tab ko'rsatishda ishga tushadi, lekin yangi tab ko'rsatilishidan oldin. Faol va oldingi faol varaqni (agar mavjud bo'lsa) mos ravishda belgilash uchun va event.targetfoydalaning .event.relatedTarget
ko'rsatilgan.bs.tab Ushbu hodisa varaq ko'rsatilgandan so'ng yorliqlar ko'rsatishda ishga tushadi. Faol va oldingi faol varaqni (agar mavjud bo'lsa) mos ravishda belgilash uchun va event.targetfoydalaning .event.relatedTarget
hide.bs.tab Ushbu hodisa yangi yorliq ko'rsatilishi kerak bo'lganda boshlanadi (va shuning uchun oldingi faol yorliq yashiriladi). Joriy faol yorliq va yaqinda faol boʻladigan yangi yorliq uchun mos ravishda va event.targetfoydalaning .event.relatedTarget
yashirin.bs.tab Ushbu hodisa yangi yorliq ko'rsatilgandan so'ng boshlanadi (va shuning uchun oldingi faol yorliq yashiriladi). Oldingi faol yorliq va yangi faol yorliq uchun mos ravishda event.targetva dan foydalaning .event.relatedTarget
$('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:

Qattiq shimlar keyingi darajadagi keffiyeh , ehtimol siz ular haqida eshitmagansiz. Foto stend soqol xom denim letterpress vegan messenger sumkasi Stumptown. Farm-to-stol seitan, mcsweeney's fixie sustainable quinoa 8-bit amerikan kiyimida terri Richardson vinil chambray bor . Beard stumptown, kardiganlar banh mi lomo thundercats. Tofu biodizel Uilyamsburg marfa, to'rt loko mcsweeney ning tozalovchi vegan chambray. A, albatta, istehzoli hunarmand nima bo'lishidan qat'iy nazar, keytar , scenester farm-to-stol banksy Austin twitter handle freegan cred raw denim single-origin coffee virus.

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>

Ro'yxatdan o'tish funksiyasi

Ishlash sabablariga ko'ra, Tooltip va Popover data-apis qo'shiladi, ya'ni ularni o'zingiz ishga tushirishingiz kerak .

Sahifadagi barcha maslahatlarni ishga tushirishning bir usuli ularni data-toggleatributiga ko'ra tanlashdir:

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

Ko'p qatorli havolalar

Ba'zan bir nechta satrlarni o'rab turgan giperhavolaga maslahat qo'shishni xohlaysiz. Ko'rsatma plaginining standart xatti-harakati uni gorizontal va vertikal ravishda markazlashtirishdir. white-space: nowrap;Bunga yo'l qo'ymaslik uchun langarlaringizga qo'shing .

Tugma guruhlari, kiritish guruhlari va jadvallardagi maslahatlar maxsus sozlashni talab qiladi

.btn-groupMaslahatlardan a yoki a ichidagi elementlarda .input-groupyoki jadvalga oid elementlarda ( <td>, <th>, <tr>, <thead>, <tbody>, ) foydalanilganda, kiruvchi yon taʼsirlardan (masalan, element kengayishi va/) oldini olish uchun (quyida hujjatlashtirilgan) <tfoot>variantni belgilashingiz kerak boʻladi. container: 'body'yoki asboblar maslahati ishga tushirilganda uning yumaloq burchaklarini yo'qotish).

Yashirin elementlarda maslahatlarni ko'rsatishga urinmang

Maqsadli $(...).tooltip('show')element bo'lganda display: none;chaqirish asboblar maslahatining noto'g'ri joylashishiga olib keladi.

Klaviatura va yordamchi texnologiyalar foydalanuvchilari uchun mavjud maslahatlar

Klaviatura bilan navigatsiya qiluvchi foydalanuvchilar, xususan, yordamchi texnologiyalar foydalanuvchilari uchun havolalar, shakl boshqaruvlari yoki atributga ega har qanday ixtiyoriy element kabi klaviaturaga qaratilgan elementlarga faqat maslahatlar qo'shishingiz kerak tabindex="0".

O'chirilgan elementlar bo'yicha maslahatlar o'rash elementlarini talab qiladi

Bir disabledyoki .disabledelementga maslahat qo'shish uchun elementni a ichiga qo'ying va uning o'rniga <div>maslahatchini qo'llang .<div>

Variantlar

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

Ism Turi Standart Tavsif
animatsiya mantiqiy rost Asboblar maslahatiga CSS o'tishini qo'llang
idish string | yolg'on yolg'on

Maslahatni ma'lum bir elementga qo'shadi. Misol: container: 'body'. Ushbu parametr, ayniqsa, foydalidir, chunki u sizga asboblar panelini hujjat oqimida ishga tushirish elementi yaqinida joylashtirish imkonini beradi - bu oyna o'lchamini o'zgartirish paytida asboblar paneli tetiklash elementidan uzoqlashishini oldini oladi.

kechikish raqam | ob'ekt 0

Maslahatni ko'rsatish va yashirishni kechiktirish (ms) - qo'lda ishga tushirish turiga taalluqli emas

Agar raqam berilgan bo'lsa, kechikish ikkala yashirish/ko'rsatish uchun ham qo'llaniladi

Ob'ekt tuzilishi:delay: { "show": 500, "hide": 100 }

html mantiqiy yolg'on Asboblar paneliga HTMLni kiriting. Agar noto'g'ri bo'lsa, jQuery textusuli DOMga tarkibni kiritish uchun ishlatiladi. XSS hujumlaridan xavotirda bo'lsangiz, matndan foydalaning.
joylashtirish string | funktsiyasi "yuqori"

Maslahatni qanday joylashtirish mumkin - tepa | pastki | chap | to'g'ri | avto.
"Avtomatik" belgilansa, u asboblar maslahatini dinamik ravishda o'zgartiradi. Misol uchun, agar joylashtirish "avtomatik chap" bo'lsa, asboblar maslahati iloji bo'lsa chapga ko'rsatiladi, aks holda u o'ngda ko'rsatiladi.

Joylashuvni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida asboblar maslahati DOM tuguni va ikkinchi argument sifatida DOM tugunini ishga tushirish elementi bilan chaqiriladi. thisKontekst asboblar maslahati misoliga o'rnatiladi .

selektor ip yolg'on Agar selektor taqdim etilsa, asboblar paneli ob'ektlari belgilangan maqsadlarga topshiriladi. Amalda, bu dinamik HTML tarkibiga maslahatlar qo'shilishi uchun ishlatiladi. Buni va ma'lumot beruvchi misolni ko'ring .
shablon ip '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Maslahat yaratishda foydalanish uchun asosiy HTML.

Maslahatlar ga titlekiritiladi .tooltip-inner.

.tooltip-arrowasboblar maslahatining o'qiga aylanadi.

Eng tashqi o'rash elementi .tooltipsinfga ega bo'lishi kerak.

sarlavha string | funktsiyasi ''

Atribut mavjud bo'lmasa, birlamchi sarlavha qiymati title.

Agar funktsiya berilgan bo'lsa, u thisasboblar paneli biriktirilgan elementga mos yozuvlar to'plami bilan chaqiriladi.

tetik ip 'fokusni ko'tarish' Maslahatchi qanday ishga tushiriladi - | tugmasini bosing hover | diqqat | qo'llanma. Siz bir nechta triggerlardan o'tishingiz mumkin; ularni bo'sh joy bilan ajrating. manualboshqa trigger bilan birlashtirib bo'lmaydi.
ko'rish oynasi string | ob'ekt | funktsiyasi { selektor: 'tana', to'ldirish: 0 }

Maslahatni ushbu element chegarasida saqlaydi. Misol: viewport: '#viewport'yoki{ "selector": "#viewport", "padding": 0 }

Agar funktsiya berilgan bo'lsa, u yagona argument sifatida DOM tugunining tetiklash elementi bilan chaqiriladi. thisKontekst asboblar maslahati misoliga o'rnatiladi .

Shaxsiy maslahatlar uchun ma'lumotlar atributlari

Yuqorida aytib o'tilganidek, individual maslahatlar uchun variantlar ma'lumotlar atributlaridan foydalanish orqali belgilanishi mumkin.

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 haqiqatda yashirilgunga qadar (ya'ni hidden.bs.tooltipvoqea 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

Tadbir turi Tavsif
show.bs.maslahat Ushbu hodisa showmisol usuli chaqirilganda darhol ishga tushadi.
ko'rsatilgan.bs.maslahat Ushbu hodisa asboblar maslahati foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi).
hide.bs.tooltip Ushbu hodisa hidemisol usuli chaqirilganda darhol o'chiriladi.
yashirin.bs.yozuv maslahati Ushbu voqea asboblar maslahati foydalanuvchidan yashirishni tugatgandan so'ng ishga tushiriladi (CSS o'tishlari tugashini kutadi).
kiritilgan.bs.maslahat Ushbu hodisa voqeadan so'ng show.bs.tooltipDOMga asboblar maslahati shablonini qo'shgandan so'ng o'chiriladi.
$('#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.

Plaginga bog'liqlik

Popoverlar Bootstrap versiyangizga qo'shilishi uchun maslahat plaginini talab qiladi .

Ro'yxatdan o'tish funksiyasi

Ishlash sabablariga ko'ra, Tooltip va Popover data-apis qo'shiladi, ya'ni ularni o'zingiz ishga tushirishingiz kerak .

Sahifadagi barcha popoverlarni ishga tushirishning bir usuli ularni data-toggleatributiga ko'ra tanlashdir:

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

Tugma guruhlari, kiritish guruhlari va jadvallardagi popoverlar maxsus sozlashni talab qiladi

.btn-groupa yoki a ichidagi elementlarda .input-groupyoki jadval bilan bog'liq elementlarda ( <td>, <th>, <tr>, <thead>, <tbody>, ) popoverlardan foydalanilganda, kiruvchi yon ta'sirlardan (masalan, element kengayishi va/) oldini olish uchun (quyida hujjatlashtirilgan) <tfoot>variantni belgilashingiz kerak bo'ladi. container: 'body'yoki popover ishga tushirilganda uning yumaloq burchaklarini yo'qotish).

Yashirin elementlarda popoverlarni ko'rsatishga urinmang

$(...).popover('show')Maqsadli element bo'lganda chaqirish popoverning display: none;noto'g'ri joylashishiga olib keladi.

O'chirilgan elementlardagi popoverlar o'rash elementlarini talab qiladi

disabledA yoki .disabledelementga popover qo'shish uchun elementni a ichiga qo'ying va uning o'rniga <div>popoverni qo'llang .<div>

Ko'p qatorli havolalar

Ba'zan siz bir nechta satrlarni o'rab turgan giperhavolaga popover qo'shmoqchisiz. Popover plaginining standart xatti-harakati uni gorizontal va vertikal ravishda markazlashtirishdir. white-space: nowrap;Bunga yo'l qo'ymaslik uchun langarlaringizga qo'shing .

Misollar

Statik popover

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

Popover tepasi

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pelentesque ornare sem lacinia quam venenatis vestibulum.

Popover o'ngda

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pelentesque ornare sem lacinia quam venenatis vestibulum.

Popover pastki

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pelentesque ornare sem lacinia quam venenatis vestibulum.

Popover ketdi

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pelentesque ornare sem lacinia quam venenatis vestibulum.

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.

Keyingi chertishda o'chirish uchun maxsus belgi kerak

Brauzer va platformalararo to'g'ri harakat qilish uchun siz tegdan emas, tegdan foydalanishingiz kerak <a>, shuningdek , va atributlarini <button>ham o'z ichiga olishingiz kerak .role="button"tabindex

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

Ism Turi Standart Tavsif
animatsiya mantiqiy rost Popoverga CSS o'tishini qo'llang
idish string | yolg'on yolg'on

Popoverni ma'lum bir elementga qo'shadi. Misol: container: 'body'. Ushbu parametr, ayniqsa, foydalidir, chunki u sizga popoverni hujjat oqimida ishga tushirish elementi yaqinida joylashtirish imkonini beradi - bu oyna hajmini o'zgartirish vaqtida popoverning tetiklash elementidan uzoqlashishiga yo'l qo'ymaydi.

mazmuni string | funktsiyasi ''

data-contentAtribut mavjud boʻlmasa, standart kontent qiymati .

Agar funktsiya berilsa, u thispopover biriktirilgan elementga mos yozuvlar to'plami bilan chaqiriladi.

kechikish raqam | ob'ekt 0

Popoverni ko'rsatish va yashirishni kechiktirish (ms) - qo'lda tetiklash turiga taalluqli emas

Agar raqam berilgan bo'lsa, kechikish ikkala yashirish/ko'rsatish uchun ham qo'llaniladi

Ob'ekt tuzilishi:delay: { "show": 500, "hide": 100 }

html mantiqiy yolg'on Popover-ga HTML-ni joylashtiring. Agar noto'g'ri bo'lsa, jQuery textusuli DOMga tarkibni kiritish uchun ishlatiladi. XSS hujumlaridan xavotirda bo'lsangiz, matndan foydalaning.
joylashtirish string | funktsiyasi "to'g'ri"

Popoverni qanday joylashtirish mumkin - tepa | pastki | chap | to'g'ri | avto.
"Avtomatik" belgilansa, u popoverni dinamik ravishda o'zgartiradi. Misol uchun, agar joylashtirish "avtomatik chap" bo'lsa, popover imkon qadar chapga ko'rsatiladi, aks holda u o'ngga ko'rsatiladi.

Joylashuvni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida popover DOM tuguni va ikkinchi argument sifatida DOM tugunini ishga tushirish bilan chaqiriladi. thisKontekst popover misoliga o'rnatiladi .

selektor ip yolg'on Agar selektor taqdim etilsa, popover ob'ektlari belgilangan maqsadlarga topshiriladi. Amalda, bu dinamik HTML tarkibiga popoverlar qo'shilishi uchun ishlatiladi. Buni va ma'lumot beruvchi misolni ko'ring .
shablon ip '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Popover yaratishda foydalanish uchun asosiy HTML.

Popover ning titleichiga AOK qilinadi .popover-title.

Popover ning contentichiga AOK qilinadi .popover-content.

.arrowpopoverning o'qiga aylanadi.

Eng tashqi o'rash elementi .popoversinfga ega bo'lishi kerak.

sarlavha string | funktsiyasi ''

Atribut mavjud bo'lmasa, birlamchi sarlavha qiymati title.

Agar funktsiya berilsa, u thispopover biriktirilgan elementga mos yozuvlar to'plami bilan chaqiriladi.

tetik ip "bosish" Popover qanday ishga tushiriladi - | tugmasini bosing hover | diqqat | qo'llanma. Siz bir nechta triggerlardan o'tishingiz mumkin; ularni bo'sh joy bilan ajrating. manualboshqa trigger bilan birlashtirib bo'lmaydi.
ko'rish oynasi string | ob'ekt | funktsiyasi { selektor: 'tana', to'ldirish: 0 }

Popoverni ushbu element chegaralarida saqlaydi. Misol: viewport: '#viewport'yoki{ "selector": "#viewport", "padding": 0 }

Agar funktsiya berilgan bo'lsa, u yagona argument sifatida DOM tugunining tetiklash elementi bilan chaqiriladi. thisKontekst popover misoliga o'rnatiladi .

Alohida popoverlar uchun ma'lumotlar atributlari

Yuqorida aytib o'tilganidek, individual popoverlar uchun variantlar ma'lumotlar atributlaridan foydalanish orqali belgilanishi mumkin.

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 nolga teng bo'lgan 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

Tadbir turi Tavsif
show.bs.popover Ushbu hodisa showmisol usuli chaqirilganda darhol ishga tushadi.
ko'rsatilgan.bs.popover Ushbu hodisa popover foydalanuvchiga ko'rinadigan qilib qo'yilganda ishga tushiriladi (CSS o'tishlari tugashini kutadi).
hide.bs.popover Ushbu hodisa hidemisol usuli chaqirilganda darhol o'chiriladi.
hidden.bs.popover Ushbu hodisa popover foydalanuvchidan yashirishni tugatgandan so'ng ishga tushiriladi (CSS o'tishlari tugashini kutadi).
kiritilgan.bs.popover Ushbu hodisa show.bs.popoverDOMga popover shablonini qo'shgandan so'ng o'chiriladi.
$('#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.

Tadbir turi Tavsif
yaqin.bs.alert Ushbu hodisa closemisol usuli chaqirilganda darhol ishga tushadi.
yopiq.bs.alert Ogohlantirish yopilgandan so'ng, bu hodisa ishga tushiriladi (CSS o'tishlari tugashini kutadi).
$('#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.

Brauzerlar o'rtasidagi muvofiqlik

Firefox sahifa yuklanishida shakl nazorati holatini (nogironlik va tekshirilganlik) davom ettiradi . Buning uchun vaqtinchalik yechim foydalanish hisoblanadi autocomplete="off". Mozilla xatosi #654072 ga qarang .

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.

O'zingizga yoqqan davlatdan foydalaning!

Ushbu namoyish uchun biz data-loading-textva dan foydalanmoqdamiz $().button('loading'), ammo bu siz foydalanishingiz mumkin bo'lgan yagona holat emas. Bu haqda quyida $().button(string)hujjatlarda ko'proq bilib oling .

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

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

Yagona almashtirish

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

Oldindan almashtirilgan tugmalar kerak .activevaaria-pressed="true"

Oldindan almashtirilgan tugmalar uchun .activesinf va aria-pressed="true"atributni o'zingizga qo'shishingiz kerak button.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  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

Oldindan tanlangan variantlar kerak.active

Oldindan tanlangan variantlar uchun .activesinfni kirishga labelo'zingiz qo'shishingiz kerak.

Vizual tekshirilgan holat faqat bosish orqali yangilanadi

Agar belgilash katakchasi tugmachasining belgilangan holati tugmadagi clickhodisani ishga tushirmasdan yangilansa (masalan , kirish xususiyatini <input type="reset">o'rnatish orqali yoki checked), siz .activekirishdagi sinfni labelo'zingiz almashtirishingiz kerak bo'ladi.

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

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" autocomplete="off">
  ...
</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.

Plaginga bog'liqlik

Yigʻish uchun oʻtish plagini Bootstrap versiyangizga kiritilishi kerak.

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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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.

Anim pariatur cliche reprehenderit, enim eiusmod yuqori hayot uchun Terri Richardson va kalamar uchun. 3 bo'ri oy officia aute, non cupidatat skeytbord dolor brunch. Oziq-ovqat yuk mashinasi quinoa nesciunt laborum eiusmod. Brunch 3 bo'ri oy tempor, sunt aliqua unga bir qush qo'yish kalamar bir kelib chiqishi kofe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo ishchisi Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur qassob vitse lomo. Leggings occaecat craft pivo farm-to-stol, raw denim estetik synth nesciunt siz ular haqida eshitmagan bo'lsangiz kerak accusamus labore barqaror VHS.
Anim pariatur cliche reprehenderit, enim eiusmod yuqori hayot uchun Terri Richardson va kalamar uchun. 3 bo'ri oy officia aute, non cupidatat skeytbord dolor brunch. Oziq-ovqat yuk mashinasi quinoa nesciunt laborum eiusmod. Brunch 3 bo'ri oy tempor, sunt aliqua unga bir qush qo'yish kalamar bir kelib chiqishi kofe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo ishchisi Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur qassob vitse lomo. Leggings occaecat craft pivo farm-to-stol, raw denim estetik synth nesciunt siz ular haqida eshitmagan bo'lsangiz kerak accusamus labore barqaror VHS.
Anim pariatur cliche reprehenderit, enim eiusmod yuqori hayot uchun Terri Richardson va kalamar uchun. 3 bo'ri oy officia aute, non cupidatat skeytbord dolor brunch. Oziq-ovqat yuk mashinasi quinoa nesciunt laborum eiusmod. Brunch 3 bo'ri oy tempor, sunt aliqua unga bir qush qo'yish kalamar bir kelib chiqishi kofe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo ishchisi Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur qassob vitse lomo. Leggings occaecat craft pivo farm-to-stol, raw denim estetik synth nesciunt siz ular haqida eshitmagan bo'lsangiz kerak accusamus labore barqaror VHS.
<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.

  • Bootply
  • Bitta itmus ac facilin
  • Ikkinchi eros

Kengaytirish/yig‘ish boshqaruvlarini foydalanish mumkin bo‘lsin

aria-expandedBoshqaruv elementiga qo'shishni unutmang . Ushbu atribut ekranni o'qish moslamalari va shunga o'xshash yordamchi texnologiyalarga yig'iladigan elementning joriy holatini aniq belgilaydi. Agar yig'iladigan element sukut bo'yicha yopilgan bo'lsa, u qiymatga ega bo'lishi kerak aria-expanded="false". Agar siz yig'iladigan elementni insinfdan foydalanib, sukut bo'yicha ochiq qilib qo'ygan bo'lsangiz, aria-expanded="true"uning o'rniga boshqaruvni o'rnating. Plagin yig'iladigan element ochilgan yoki yopilmaganligiga qarab avtomatik ravishda ushbu atributni almashtiradi.

Bundan tashqari, agar sizning boshqaruv elementingiz bitta yig'iladigan elementga mo'ljallangan bo'lsa, ya'ni data-targetatribut selektorga ishora qilsa, siz boshqaruv elementiga yig'iladigan elementni o'z ichiga olgan idqo'shimcha atributni qo'shishingiz mumkin . Zamonaviy ekran o'quvchilari va shunga o'xshash yordamchi texnologiyalar foydalanuvchilarga to'g'ridan-to'g'ri yig'iladigan elementga o'tish uchun qo'shimcha yorliqlar bilan ta'minlash uchun ushbu atributdan foydalanadi.aria-controlsid

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

Ism turi standart tavsifi
ota-ona selektor yolg'on Agar selektor taqdim etilgan bo'lsa, ushbu yig'iladigan element ko'rsatilganda ko'rsatilgan ota-ona ostidagi barcha yig'iladigan elementlar yopiladi. (an'anaviy akkordeon xatti-harakatlariga o'xshash - bu panelsinfga bog'liq)
almashtirish mantiqiy rost Chaqiruvda yig'iladigan elementni almashtiradi

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 yashirishga oʻzgartiradi. 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.

Tadbir turi Tavsif
show.bs.collapse Ushbu hodisa showmisol usuli chaqirilganda darhol ishga tushadi.
ko'rsatilgan.bs.qulash Ushbu hodisa yig'ish elementi foydalanuvchiga ko'rinadigan bo'lsa, ishga tushiriladi (CSS o'tishlari tugashini kutadi).
yashirish.bs.qulash Ushbu hodisa hideusul chaqirilgandan so'ng darhol o'chiriladi.
yashirin.bs.qulash Ushbu hodisa siqilish elementi foydalanuvchidan yashirilganda ishga tushiriladi (CSS o'tishlari tugashini kutadi).
$('#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.

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

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

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 bilan boshlangan ma'lum bir indeksga o'tkazadigan karuselga xom slayd indeksini o'tkazish uchun foydalaning .prevnextdata-slide-todata-slide-to="2"0

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 ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-interval="".

Ism turi standart tavsifi
interval raqam 5000 Ob'ektni avtomatik aylantirish o'rtasidagi kechikish vaqti. Agar noto'g'ri bo'lsa, karusel avtomatik ravishda aylanmaydi.
pauza string | null "ko'chirish" ga o'rnatilgan bo'lsa "hover", karuselning aylanishini to'xtatib turadi va karuselning mouseenteraylanishini davom ettiradi mouseleave. Agar ga oʻrnatilgan boʻlsa null, kursorni karusel ustiga olib borish uni toʻxtatib qoʻymaydi.
o'rash mantiqiy rost Karusel doimiy ravishda aylanishi kerakmi yoki qattiq to'xtashlari kerakmi.
klaviatura mantiqiy rost Karusel klaviatura hodisalariga munosabat bildirishi kerakmi.

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

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

Karusel elementlarini chapdan o'ngga aylantiring.

Karuselning ob'ektlar orasidan aylanishini to'xtatadi.

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

Oldingi elementga aylanish.

Keyingi elementga o'tish.

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.

Tadbir turi Tavsif
slayd.bs.karusel Bu hodisa slidemisol usuli chaqirilganda darhol ishga tushadi.
slid.bs.carusel Ushbu hodisa karusel slaydga o'tishni tugatgandan so'ng o'chiriladi.
$('#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 .affix-topelement 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".

Ism turi standart tavsifi
ofset raqam | funktsiyasi | ob'ekt 10 O'tkazish joyini hisoblashda ekrandan siljish uchun piksellar. Agar bitta raqam taqdim etilsa, ofset yuqori va pastki yo'nalishlarda qo'llaniladi. Noyob, pastki va yuqori ofsetni ta'minlash uchun faqat ob'ektni offset: { top: 10 }yoki offset: { top: 10, bottom: 5 }. Ofsetni dinamik ravishda hisoblash kerak bo'lganda funktsiyadan foydalaning.
maqsad selektor | tugun | jQuery elementi windowob'ekt _ Affiksning maqsadli elementini belgilaydi.

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.

Tadbir turi Tavsif
affiks.bs.affiks Ushbu hodisa element biriktirilishidan oldin darhol boshlanadi.
affiksli.bs.affiks Ushbu hodisa element qo'yilgandan keyin o'chiriladi.
affiks-top.bs.affiks Ushbu hodisa element tepaga yopishtirilishidan oldin darhol boshlanadi.
affiks-top.bs.affiks Bu hodisa element yuqoriga qo'yilgandan so'ng ishga tushiriladi.
affiks-pastki.bs.affiks Ushbu hodisa element pastki qismga yopishtirilishidan oldin darhol boshlanadi.
affiksli-pastki.bs.affiks Ushbu hodisa element pastki qismga qo'yilgandan keyin ishga tushiriladi.