Обзор

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

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

Компиляцияланган JavaScriptти колдонуу

Экөө тең bootstrap.jsжана bootstrap.min.jsбардык плагиндерди бир файлда камтыйт. Бирин гана кошуңуз.

Плагиндин көз карандылыгы

Кээ бир плагиндер жана CSS компоненттери башка плагиндерден көз каранды. Эгер сиз плагиндерди өзүнчө кошсоңуз, бул көз карандылыктарды документтерде текшериңиз. Ошондой эле, бардык плагиндер jQueryден көз каранды экенин эске алыңыз (бул jQuery плагин файлдарынын алдында камтылышы керек дегенди билдирет). jQuery'динbower.json кайсы версиялары колдоого алынарын көрүү үчүн биздин кеңешке кайрылыңыз.

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

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

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

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

Же болбосо, белгилүү бир плагинди максаттуу үчүн, жөн гана плагиндин атын төмөнкүдөй data-api аттар мейкиндиги менен кошо аттар мейкиндиги катары кошуңуз:

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

Маалымат атрибуттары аркылуу бир элементке бир гана плагин

Бир эле элементте бир нече плагиндердин маалымат атрибуттарын колдонбоңуз. Мисалы, баскычтын кеңеши да, модалды которуштуруусу да болбойт. Бул үчүн, орогуч элементти колдонуңуз.

Программалык API

Ошондой эле сиз бардык Bootstrap плагиндерин JavaScript API аркылуу гана колдоно аласыз деп ишенебиз. Бардык жалпыга ачык API'лер жалгыз, чынжырлануучу ыкмалар болуп саналат жана аларга ылайык иштелген коллекцияны кайтарып берет.

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

Бардык методдор кошумча опциялар объектисин, белгилүү бир ыкманы көздөгөн сапты же эч нерсени (демейки жүрүм-туруму бар плагинди баштаган) кабыл алышы керек:

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

Ар бир плагин ошондой эле өзүнүн чийки конструкторун касиетке көрсөтөт Constructor: $.fn.popover.Constructor. Эгер сиз белгилүү бир плагиндин үлгүсүн алгыңыз келсе, аны түздөн-түз элементтен чыгарып алыңыз: $('[rel="popover"]').data('popover').

Демейки жөндөөлөр

Constructor.DEFAULTSПлагиндин объектисин өзгөртүү менен плагиндин демейки жөндөөлөрүн өзгөртө аласыз :

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

Конфликт жок

Кээде башка UI алкактары менен Bootstrap плагиндерин колдонуу керек болот. Мындай шарттарда аттар мейкиндигинде кагылышуулар кээде пайда болушу мүмкүн. Эгер мындай болуп калса, сиз .noConflictмаанисин кайтарууну каалаган плагинге чалсаңыз болот.

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

Окуялар

Bootstrap көпчүлүк плагиндердин уникалдуу аракеттери үчүн ыңгайлаштырылган окуяларды камсыз кылат. Негизинен булар инфинитив жана өткөн чак формада келет - мында инфинитив (мис. show) окуянын башталышында, ал эми анын өткөн чак формасы (мис. shown) иш-аракет аяктаганда ишке ашырылат.

3.0.0 боюнча, бардык Bootstrap окуялары аталыштар мейкиндигинде.

Бардык инфинитив окуялар preventDefaultфункционалдуулукту камсыз кылат. Бул аракеттин аткарылышын ал башталганга чейин токтотуу мүмкүнчүлүгүн берет.

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

Версия номерлери

Bootstrap's jQuery плагиндеринин ар биринин версиясына VERSIONплагиндин конструкторунун касиети аркылуу кирүүгө болот. Мисалы, инструментарий плагини үчүн:

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

JavaScript өчүрүлгөндө, эч кандай өзгөчө кайтаруу жок

Bootstrap плагиндери JavaScript өчүрүлгөндө өзгөчө кооздук менен артка кайтпайт. Эгер сиз бул учурда колдонуучунун тажрыйбасына маани берсеңиз, колдонуучуларыңызга <noscript>кырдаалды (жана JavaScript кантип кайра иштетүү керек) түшүндүрүү үчүн колдонуңуз жана/же өзүңүздүн жеке ыңгайлаштырылган резервдерди кошуңуз.

Үчүнчү тараптын китепканалары

Bootstrap расмий түрдө Prototype же jQuery UI сыяктуу үчүнчү тараптын JavaScript китепканаларын колдобойт . Окуяларга жана аттар мейкиндигине карабастан .noConflict, шайкештик көйгөйлөрү болушу мүмкүн, аларды сиз өз алдынча чечишиңиз керек.

Transitions transition.js

Өтүүлөр жөнүндө

Жөнөкөй өтүү эффекттери үчүн, transition.jsбашка JS файлдарына бир жолу кошуңуз. Эгер сиз компиляцияланган (же кичирейтилген) файлын колдонуп жатсаңыз, муну кошуунун bootstrap.jsкереги жок — ал мурунтан эле бар.

Ичинде эмне бар

Transition.js бул окуялар үчүн негизги жардамчы transitionEnd, ошондой эле CSS өтүү эмулятору. Ал башка плагиндер тарабынан CSS өтүү колдоосун текшерүү жана илинген өтүүлөрдү кармоо үчүн колдонулат.

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

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

$.support.transition = false

Modals modal.js

Модальдар жөнөкөйлөштүрүлгөн, бирок ийкемдүү, минималдуу талап кылынган функционалдуулук жана акылдуу демейки параметрлери бар диалог чакырыктары.

Бир нече ачык модалдар колдоого алынбайт

Башкасы көрүнүп турганда модалды ачпоону унутпаңыз. Бир убакта бирден ашык модалды көрсөтүү ыңгайлаштырылган кодду талап кылат.

Модалдык белгилөө жайгаштыруу

Модалдын сырткы көрүнүшүнө жана/же функционалдуулугуна таасир этүүчү башка компоненттерди болтурбоо үчүн ар дайым модалдын HTML кодун документиңизде эң жогорку деңгээлде жайгаштырууга аракет кылыңыз.

Мобилдик түзмөк эскертүүлөрү

Модалдарды мобилдик түзмөктөрдө колдонууга байланыштуу кээ бир эскертүүлөр бар. Чоо-жайын билүү үчүн биздин браузерди колдоо документтерин караңыз.

HTML5 анын семантикасын кантип аныктаганына байланыштуу, autofocusHTML атрибуту Bootstrap модалдарына эч кандай таасир этпейт. Ошол эле эффектке жетүү үчүн, кээ бир ыңгайлаштырылган JavaScript колдонуңуз:

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

Мисалдар

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

Төмөнкү колонтитулдагы башкы, негизги жана аракеттердин жыйындысы менен көрсөтүлгөн модаль.

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

Түз демо

Төмөнкү баскычты чыкылдатуу менен JavaScript аркылуу модалды которуштуруу. Ал ылдый жылып, беттин жогору жагына карай өчүп калат.

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

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

Модалдарды жеткиликтүү кылуу

Модалдык аталышка шилтеме кылуу role="dialog"менен жана дегенди кошууну унутпаңыз , ага жана өзүнө.aria-labelledby="...".modalrole="document".modal-dialog

aria-describedbyКошумча, сиз on менен модалдык диалогуңуздун сүрөттөмөсүн бере аласыз .modal.

YouTube видеолорун кыстаруу

YouTube видеолорун модалдарга кыстаруу ойнотууну автоматтык түрдө токтотуу үчүн Bootstrap'те эмес, кошумча JavaScriptти талап кылат жана башкалар. Көбүрөөк маалымат алуу үчүн бул пайдалуу Stack Overflow постун караңыз .

Кошумча өлчөмдөр

Модалдардын эки кошумча өлчөмдөрү бар, аларды модификатор класстары аркылуу .modal-dialog.

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

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

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

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

Анимацияны алып салуу

Көрүү үчүн өчүп калбастан, жөн гана пайда болгон модалдар үчүн .fadeклассты модалдык белгилөөдөн алып салыңыз.

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

Тор системасын колдонуу

Модалдын ичиндеги Bootstrap тор тутумунун артыкчылыктарын пайдалануу үчүн, жөн гана анын ичинде уя салып .row, .modal-bodyандан кийин кадимки тор системасынын класстарын колдонуңуз.

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

Бир аз башкача мазмундагы бир эле модалды иштеткен бир топ баскычтар барбы? Кайсы баскыч басылганына жараша модалдын мазмунун өзгөртүү үчүн event.relatedTargetжана HTML data-*атрибуттарын (мүмкүн jQuery аркылуу ) колдонуңуз . жөнүндө чоо-жайын билүү үчүн Modal Events документтерин караңыз relatedTarget,

...дагы баскычтар...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Колдонуу

Модалдык плагин маалымат атрибуттары же JavaScript аркылуу сиздин жашыруун мазмунуңузду суроо-талап боюнча которушат. Ал ошондой эле демейки сыдыруу жүрүм-турумун жокко чыгаруу үчүн кошумчалайт жана .modal-openмодалдын сыртында басканда көрсөтүлгөн модальдарды четке кагуу үчүн чыкылдатуу аймагын камсыз кылуу үчүн а түзөт.<body>.modal-backdrop

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

JavaScript жазбастан модалды активдештирүү. Которуу үчүн белгилүү бир модалды максаттоо үчүн же data-toggle="modal"баскычы сыяктуу контроллердин элементине орнотуңуз .data-target="#foo"href="#foo"

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

JavaScript аркылуу

myModalJavaScript бир сап менен id менен модалды чакырыңыз :

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

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-backdrop="".

аты түрү демейки сүрөттөмө
фон логикалык же сап'static' чын Модалдык көшөгө элементин камтыйт. Же болбосо, staticчыкылдатканда модалды жаппаган фон үчүн көрсөтүңүз.
клавиатура логикалык чын Escape баскычы басылганда модалды жабат
көрсөтүү логикалык чын Инициализацияланганда модалды көрсөтөт.
алыскы жол жалган

Бул параметр v3.3.0 версиясынан бери эскирген жана v4 версиясында алынып салынган. Биз анын ордуна кардар тарабындагы шаблонду же берилиштерди байланыштыруучу алкакты колдонууну же jQuery.load'га өзүңүз чалууну сунуштайбыз.

Эгер алыскы URL берилсе, мазмун jQuery ыкмасы аркылуу бир жолу жүктөлөтload жана divге киргизилет .modal-content. Эгер сиз data-api колдонуп жатсаңыз href, алыскы булакты көрсөтүү үчүн атрибутту колдонсоңуз болот. Мунун бир мисалы төмөндө көрсөтүлгөн:

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

Методдор

Мазмунуңузду модаль катары иштетет. Кошумча варианттарды кабыл алат object.

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

Модалды кол менен которуштуруу. Модал чындыгында көрсөтүлгөнгө же жашырылганга чейин (б.а. shown.bs.modalже hidden.bs.modalокуя болгонго чейин) чалуучуга кайтат.

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

Модалды кол менен ачат. Модал иш жүзүндө көрсөтүлө электе (б.а. shown.bs.modalокуя болгонго чейин) чалуучуга кайтат.

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

Модалды кол менен жашырат. Модал чындыгында жашырылганга чейин (б.а. hidden.bs.modalокуя болгонго чейин) чалуучуга кайтып келет.

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

Модалдын позициясын сыдырма тилкеге ​​каршы туруу үчүн кайра тууралайт, эгерде бирөө пайда болушу керек, бул модалды солго секирип берет.

Модалдын бийиктиги ачык турганда өзгөргөндө гана керек.

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

Окуялар

Bootstrap'тин модалдык классы модалдык функцияга кирүү үчүн бир нече окуяларды ачып берет.

Бардык модалдык окуялар модалдын өзүнө (б.а. ) тартылат <div class="modal">.

Окуя түрү Description
show.bs.modal Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт. Эгерде чыкылдатуу менен шартталган болсо, анда басылган элемент relatedTargetокуянын менчиги катары жеткиликтүү болот.
show.bs.modal Бул окуя модаль колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). Эгерде чыкылдатуу менен шартталган болсо, анда басылган элемент relatedTargetокуянын менчиги катары жеткиликтүү болот.
hide.bs.modal Бул окуя hideинстанция ыкмасы чакырылганда дароо өчүрүлөт.
hidden.bs.modal Бул окуя модаль колдонуучудан жашырылгандан кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт).
loaded.bs.modal Бул окуя модаль remoteпараметрди колдонуп мазмунду жүктөгөндө иштен чыгат.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

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

Navbar ичинде

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

.openМаалымат атрибуттары же JavaScript аркылуу ачылуучу плагин ата-энелик тизмедеги классты которуштуруу менен жашыруун мазмунду (ашылма менюлар) которушат .

Мобилдик түзмөктөрдө, ачылуучу тизмени ачуу .dropdown-backdropменюдан тышкары таптап жатканда ачылуучу менюларды жабуу үчүн таптоо аймагы катары кошумчалайт, бул туура iOS колдоосу үчүн талап. Бул ачык ылдый түшүүчү менюдан башка ылдый түшүүчү менюга өтүү үчүн мобилдик телефонго кошумча таптоо талап кылынат дегенди билдирет.

Эскертүү: data-toggle="dropdown"Атрибут колдонмо деңгээлинде ачылуучу менюларды жабууга таянат, андыктан аны дайыма колдонуу жакшы идея.

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

Шилтемеге кошуңуз data-toggle="dropdown"же ачылуучу тизмени которуштуруу үчүн баскычты басыңыз.

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

Шилтеме баскычтары менен URL'дерди сакташ үчүн, data-targetордуна атрибутун колдонуңуз href="#".

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

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

JavaScript аркылуу

JavaScript аркылуу ачылуучу тизмелерге чалыңыз:

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

data-toggle="dropdown"дагы эле талап кылынат

Сиз JavaScript аркылуу ачылуучу тизмеңизге чалсаңыз же анын ордуна data-api колдонсоңуз да, data-toggle="dropdown"дайыма ачылуучу тизменин триггер элементинде болушу талап кылынат.

Жок

Берилген навигация тилкесинин же өтмөктүү навигациянын ылдый түшүүчү менюну өчүрөт.

Бардык ачылуучу окуялар анын .dropdown-menuнегизги элементинде иштетилет.

Бардык ачылуучу окуялардын relatedTargetкасиети бар, анын мааниси которулуучу анкер элементи.

Окуя түрү Description
show.bs.dropdown Бул окуя шоу инстанция ыкмасы чакырылганда дароо күйөт.
көрсөтүлгөн.bs.ашылма Бул окуя ачылуучу тизме колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү аягына чейин күтөт).
hide.bs.dropdown Жашыруу инстанция ыкмасы чакырылганда бул окуя дароо өчүрүлөт.
hidden.bs.dropdown Бул окуя ачылуучу тизмени колдонуучудан жашырып бүткөндөн кийин иштен чыгарылат (CSS өтүүлөрү бүткүчө күтөт).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Navbarдагы мисал

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

@fat

Жарнама леггинс кейтар, бранч ид искусство кечеси долор эмгек. Айрыкча жыл эним ло-фи алар куи сатыла электе. Tumblr фермадан столго велосипед укугу кандай болбосун. Anim keffiyeh carles кардиган. Velit seitan mcsweeney фото стенд 3 карышкыр ай irure. Косби свитер ломо джинсы шорты, Вильямсбург капюшон миним qui, балким, сиз алар жөнүндө укпасаңыз керек жана кардиган траст фонду culpa biodiesel Уэс Андерсон эстетикалык. Нихил татуировкаланган аккусамус, Cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa мурут скейтборд, adipisicing fugiat velit айры сакал. Фриган сакал аликва купидат Максвини веро. Cupidatat four loko nisi, ea helvetica nulla carles. Татуировкаланган косби свитер тамак-аш ташуучу унаа, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Карлес эстетикалык эмес машыгуу quis gentrify. Brooklyn adipisicing кол өнөрчүлүк сыра вице Кейтар Десерунт.

бир

Occaecat commodo aliqua delectus. Fap кол өнөрчүлүк сыра deserunt скейтборд ea. Lomo велосипед укуктарына ээ болгон, жаналит ea sunt кийинки даражадагы Locavore бир тектүү кофе магна вениамда. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY минимум кабарчы баштык. Cred ex in, iphone фанни пакетин туруктуу тандоо.

эки

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 блог, culpa мессенжер баштык marfa кандай delectus тамак-аш жүк ташуучу унаа. Sapiente synth id assumenda. Locavore sed helvetica клише ирония, күн күркүрөгөн мышыктар, балким, алар жөнүндө укпагандырсыз. Алар сатылып кеткенге чейин эмгек элитинин орду, Терри Ричардсон проидент brunch nesciunt quis cosby свитер париатур keffiyeh ut helvetica artisan. Кардиган кол өнөрчүлүк сыра сейтан даяр велит. VHS chambray laboris tempor veniam. Аним моллит миним коммодо улламко күн күркүрөйт.

Колдонуу

Bootstrap навигациясын талап кылат

Учурда Scrollspy активдүү шилтемелерди туура бөлүп көрсөтүү үчүн Bootstrap nav компонентин колдонууну талап кылат.

Чечилүүчү ID максаттары талап кылынат

Navbar шилтемелеринде чечилүүчү ID максаттары болушу керек. Мисалы, <a href="#home">home</a>DOMдагы бир нерсеге дал келиши керек <div id="home"></div>.

Максаттуу :visibleэмес элементтер этибарга алынбайт

:visiblejQuery'ге ылайык келбеген максаттуу элементтер этибарга алынбайт жана алардын тиешелүү навигация элементтери эч качан баса белгиленбейт.

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

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

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

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

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScript аркылуу

CSS'иңизди кошкондон кийин position: relative;, JavaScript аркылуу scrollspy чакырыңыз:

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

Методдор

.scrollspy('refresh')

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

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

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-offset="".

аты түрү демейки сүрөттөмө
офсет саны 10 Сыдыруунун ордун эсептөөдө жогорудан жылыш үчүн пикселдер.

Окуялар

Окуя түрү Description
activate.bs.scrollspy Бул окуя жылдыруу аркылуу жаңы нерсе жандырылган сайын күйөт.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Которулуучу өтмөктөр tab.js

Мисал өтмөктөр

Жергиликтүү мазмундун панелдеринен өтүү үчүн тез, динамикалык өтмөк функциясын кошуңуз, атүгүл ылдый түшүүчү менюлар аркылуу. Кыстарылган өтмөктөр колдоого алынбайт.

Чийки джинсы, балким, Остин алар жөнүндө уккан эмессиз. Nesciunt tofu Stumptown aliqua, ретро synth мастер тазалоо. Cliche tempor мурут, Williamsburg Carles Vegan helvetica. Reprehenderit касапчы ретро keffiyeh dreamcatcher synth. Косби свитер eu Banh mi, qui irure Терри Ричардсон мурунку кальмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis кардиган америкалык кийим, касапчы 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.

Кыстырмалуу навигацияны кеңейтет

Бул плагин өтмөктүү багыттоо компонентин өтүлүүчү аймактарды кошуу үчүн кеңейтет.

Колдонуу

JavaScript аркылуу табулатура өтмөктөрдү иштетүү (ар бир өтмөк өзүнчө активдештирилиши керек):

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

Сиз жеке өтмөктөрдү бир нече жол менен иштете аласыз:

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

Белгилөө

data-toggle="tab"Сиз жөн гана белгилөө же data-toggle="pill"элемент боюнча эч кандай JavaScript жазбастан өтмөктү же таблетка навигациясын иштете аласыз . Өтмөккө navжана nav-tabsкласстарын кошуу Bootstrap өтмөктүн стилинul колдонот , ал эми класстарды кошуу таблетка стилин колдонот .navnav-pills

<div>

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

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

</div>

Өнүгүү эффекти

Өтмөктөрдү өчүрүү үчүн, .fadeар бирине кошуңуз .tab-pane. Биринчи өтмөк панели да .inбаштапкы мазмунду көрүнө бериши керек.

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

Методдор

$().tab

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

.tab('show')

Берилген өтмөктү тандап, ага байланыштуу мазмунду көрсөтөт. Мурда тандалган башка өтмөктөр тандалбай калат жана ага байланышкан мазмун жашырылат. Өтмөк панели иш жүзүндө көрсөтүлө электе (б.а. shown.bs.tabокуя болгонго чейин) чалуучуга кайтып келет.

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

Окуялар

Жаңы өтмөктү көрсөткөндө, окуялар төмөнкү тартипте күйөт:

  1. hide.bs.tab(учурдагы активдүү өтмөктө)
  2. show.bs.tab(көрсөтүлө турган өтмөктө)
  3. hidden.bs.tab(мурунку активдүү өтмөктө, hide.bs.tabокуяга окшош)
  4. shown.bs.tab(жаңыдан активдүү болгон өтмөктө, show.bs.tabокуяга окшош)

Эгерде эч кандай өтмөк активдүү болбосо, анда hide.bs.tabжана hidden.bs.tabокуялар өчүрүлбөйт.

Окуя түрү Description
show.bs.tab Бул окуя өтмөк көрсөтүүсүндө, бирок жаңы өтмөк көрсөтүлө электе башталат. Тиешелүүлүгүнө жараша активдүү өтмөктү жана мурунку активдүү өтмөктү (эгер бар болсо) максаттуу үчүн event.targetжана колдонуңуз .event.relatedTarget
show.bs.tab Бул окуя өтмөк көрсөтүлгөндөн кийин өтмөк көрсөтүүсүндө күйөт. Тиешелүүлүгүнө жараша активдүү өтмөктү жана мурунку активдүү өтмөктү (эгер бар болсо) максаттуу үчүн event.targetжана колдонуңуз .event.relatedTarget
hide.bs.tab Бул окуя жаңы өтмөк көрсөтүлө турганда (ошондуктан мурунку активдүү өтмөк жашырылганда) күйөт. Учурдагы жигердүү өтмөктү жана жакын арада активдүү боло турган жаңы өтмөктү максаттуу үчүн event.targetжана колдонуңуз .event.relatedTarget
hidden.bs.tab Бул окуя жаңы өтмөк көрсөтүлгөндөн кийин башталат (ошентип мурунку активдүү өтмөк жашырылган). Мурунку активдүү өтмөктү жана жаңы активдүү өтмөктү максаттуу үчүн event.targetжана колдонуңуз .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

Джейсон Фрейм жазган сонун jQuery.tipsy плагининен шыктанган; Куралдар кеңештери жаңыртылган версия, ал сүрөттөргө таянбайт, анимациялар үчүн CSS3 жана жергиликтүү аталыштарды сактоо үчүн маалымат атрибуттары колдонулат.

Узундугу нөлгө барабар болгон кеңештер эч качан көрсөтүлбөйт.

Мисалдар

Куралдар кеңештерин көрүү үчүн төмөнкү шилтемелердин үстүнөн өтүңүз:

Тар шым кийинки деңгээл keffiyeh , балким , алар жөнүндө уккан эмес. Фото кабина сакал чийки джинсы тамга басуу вегетариандык мессенжер баштык Стумптаун. Farm-to-stol seitan, mcsweeney's fixie sustainable quinoa 8-бит америкалык кийимдеринде терри Ричардсон винил камерасы бар . Сакал стмптаун, кардигандар banh mi lomo thundercats. Tofu биодизель Вильямсбург Марфа, төрт Локо Максвининин тазалоочу вегетариандык Чамбрей. Чынында эле ирониялык кол өнөрчү кандай гана keytar , scenester farm-to-table banksy Остин twitter handle freegan cred raw джинсы бир келип чыккан кофе вирусу.

Статикалык кеңеш

Төрт вариант бар: жогорку, оң, ылдый жана сол тегизделген.

Төрт багыт

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

Кирүү функциясы

Иштин майнаптуулугунан улам, Tooltip жана Popover data-apis кошулган, демек сиз аларды өзүңүз инициализациялашыңыз керек .

Барактагы бардык кеңештерди инициализациялоонун бир жолу аларды data-toggleатрибуту боюнча тандоо болот:

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

Колдонуу

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

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

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

Белгилөө

dataКурал кеңеши үчүн талап кылынган белги атрибут гана болуп саналат жана titleHTML элементинде сиз кеңешке ээ болгуңуз келет. Аспаптын генерацияланган белгилөөсү өтө жөнөкөй, бирок ал позицияны талап кылат (демейки боюнча, topплагин тарабынан коюлган).

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

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

Көп линиялуу шилтемелер

Кээде сиз бир нече саптарды ороп турган гипершилтемеге инструментти кошкуңуз келет. Tooltip плагининин демейки жүрүм-туруму аны туурасынан жана вертикалдуу борборлоштуруу болуп саналат. white-space: nowrap;Мунун алдын алуу үчүн анкерлериңизге кошуңуз .

Баскыч топторундагы, киргизүү топторундагы жана таблицалардагы кеңештер атайын орнотууну талап кылат

.btn-groupКуралдар кеңештерин а же ан ичиндеги элементтерде .input-groupже таблицага байланыштуу элементтерде ( <td>, <th>, <tr>, , , , , , , <thead>, <tbody>, ) колдонууда, каалабаган терс таасирлерден (мисалы, элементтин кеңейиши жана/) болбош үчүн <tfoot>опцияны (төмөндө документтештирилген) көрсөтүшүңүз керек болот. container: 'body'же аспап иштетилгенде тегеректелген бурчтарын жоготот).

Жашыруун элементтер боюнча кеңештерди көрсөтүүгө аракет кылбаңыз

$(...).tooltip('show')Максаттуу элемент болгондо чакыруу инструменттин display: none;туура эмес жайгаштырылышына алып келет.

Баскычтоп жана жардамчы технология колдонуучулары үчүн жеткиликтүү кеңештер

tabindex="0"Баскычтоп менен навигациялоочу колдонуучулар үчүн, айрыкча, жардамчы технологияларды колдонуучулар үчүн, шилтемелер, форманы башкаруу элементтери же атрибуттуу каалаган каалаган элемент сыяктуу клавиатурага багытталган элементтерге кеңештерди гана кошушуңуз керек .

Өчүрүлгөн элементтер боюнча кеңештер орогуч элементтерин талап кылат

disabledА же элементке инструментти кошуу үчүн .disabled, элементти а ичине коюп, анын ордуна <div>ага кеңешти колдонуңуз <div>.

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-animation="".

аты Type Демейки Description
анимация логикалык чын Куралдар үчүн CSS өчүп өтүүнү колдонуңуз
контейнер string | жалган жалган

Белгилүү бир элементке инструментти кошот. Мисал: container: 'body'. Бул параметр өзгөчө пайдалуу, анткени ал куралдын кеңешин документтин агымында триггердик элементтин жанында жайгаштырууга мүмкүндүк берет - бул терезенин өлчөмүн өзгөртүү учурунда инструменттин триггер элементинен алыстап кетишине жол бербейт.

кечиктирүү саны | объект 0

Курал кеңешин көрсөтүү жана жашыруу кечигүү (мс) - кол менен триггер түрүнө тиешелүү эмес

Эгерде номер берилсе, кечиктирүү эки жашыруу/көрсөтүү үчүн колдонулат

Объекттин структурасы:delay: { "show": 500, "hide": 100 }

html логикалык жалган Инструментке HTML кыстарыңыз. Эгер жалган болсо, textDOMга мазмунду киргизүү үчүн jQuery ыкмасы колдонулат. XSS чабуулдарынан кооптонуп жатсаңыз, текстти колдонуңуз.
жайгаштыруу string | функция 'жогорку'

Куралды кантип жайгаштыруу керек - жогору | түбү | сол | туура | авто.
"Авто" көрсөтүлгөндө, ал инструменттин кеңешин динамикалык түрдө өзгөртөт. Мисалы, эгерде жайгаштыруу "автоматтык түрдө солго" болсо, инструменттин кеңеши мүмкүн болгондо солго көрсөтүлөт, антпесе оңго көрсөтүлөт.

Функция жайгаштырууну аныктоо үчүн колдонулганда, ал биринчи аргумент катары шаймандык DOM түйүнү жана экинчиси катары триггер элементи DOM түйүнү менен чакырылат. Контекст thisинструменттин үлгүсүнө коюлган.

селектор сап жалган Эгерде селектор камсыз кылынса, инструментарий объекттери көрсөтүлгөн максаттарга өткөрүлүп берилет. Иш жүзүндө, бул динамикалык HTML мазмунуна кеңештерди кошуу үчүн колдонулат. Бул жана маалыматтык мисалды караңыз .
шаблон сап '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Инструментти түзүүдө колдонуу үчүн HTML базасы.

Куралдуу titleкеңештер .tooltip-inner.

.tooltip-arrowкуралдын жебеси болуп калат.

Эң сырткы ороочу элемент .tooltipкласска ээ болушу керек.

аталышы string | функция ''

titleЭгер атрибут жок болсо, демейки аталыш мааниси .

Функция берилсе, ал thisкуралдын кеңеши тиркелген элементке шилтеме топтому менен чакырылат.

триггер сап "фокус" Инструментарий кантип иштетилет - чыкылдатыңыз | hover | фокус | колдонмо. Сиз бир нече триггерлерди өткөрө аласыз; аларды боштук менен ажыратыңыз. manualбашка триггер менен айкалыштыруу мүмкүн эмес.
көрүү порту string | объект | функция { селектор: 'body', толтуруу: 0 }

Куралды бул элементтин чегинде сактайт. Мисалы: viewport: '#viewport'же{ "selector": "#viewport", "padding": 0 }

Функция берилсе, ал жалгыз аргументи катары триггер элементи DOM түйүнү менен чакырылат. Контекст thisинструменттин үлгүсүнө коюлган.

Жеке кеңештер үчүн маалымат атрибуттары

Жеке инструменттердин параметрлери, жогоруда түшүндүрүлгөндөй, маалымат атрибуттарын колдонуу аркылуу альтернатива катары көрсөтүлүшү мүмкүн.

Методдор

$().tooltip(options)

Элементтердин коллекциясына инструментарий иштеткичти тиркейт.

.tooltip('show')

Элементтин кеңешин көрсөтөт. Чалуучуга инструментарий иш жүзүндө көрсөтүлө электе (б.а. shown.bs.tooltipокуя болгонго чейин) кайтып келет. Бул куралдын кеңешин "кол менен" ишке киргизүү деп эсептелет. Узундугу нөлгө барабар болгон кеңештер эч качан көрсөтүлбөйт.

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

.tooltip('hide')

Элементтин кеңешин жашырат. Чалуучуга инструментарий чындап жашырылганга чейин (б.а. hidden.bs.tooltipокуя болгонго чейин) кайтып келет. Бул куралдын кеңешин "кол менен" ишке киргизүү деп эсептелет.

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

.tooltip('toggle')

Элементтин кеңешин которуштуруу. Чалуучуга инструментарий иш жүзүндө көрсөтүлгөнгө же жашырылганга чейин (б.а. shown.bs.tooltipже hidden.bs.tooltipокуя болгонго чейин) кайтып келет. Бул куралдын кеңешин "кол менен" ишке киргизүү деп эсептелет.

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

.tooltip('destroy')

Элементтин кеңештерин жашырат жана жок кылат. Өкүлчүлүктү колдонгон кеңештерди ( опцияны колдонуу мененselector түзүлгөн ) тукум триггер элементтеринде өзүнчө жок кылууга болбойт.

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

Окуялар

Окуя түрү Description
show.bs.tooltip Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт.
көрсөтүлгөн.bs.куралдуу кеңеш Бул окуя куралдын кеңеши колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт).
hide.bs.tooltip Бул окуя hideинстанция ыкмасы чакырылганда дароо өчүрүлөт.
hidden.bs.tooltip Бул окуя куралдын кеңеши колдонуучудан жашырылгандан кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт).
inserted.bs.куралдуу кеңеш Бул окуя show.bs.tooltipокуядан кийин, курал үлгүсү DOMга кошулгандан кийин өчүрүлөт.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Кошумча маалымат үчүн каалаган элементке, iPadдагылар сыяктуу мазмундун кичинекей катмарларын кошуңуз.

Аталышы жана мазмуну нөлгө барабар болгон поповерлер эч качан көрсөтүлбөйт.

Плагинге көз карандылык

Popovers инструменттердин плагининин Bootstrap версияңызга кошулушун талап кылат.

Кирүү функциясы

Иштин майнаптуулугунан улам, Tooltip жана Popover data-apis кошулган, демек сиз аларды өзүңүз инициализациялашыңыз керек .

Барактагы бардык поповерлерди инициализациялоонун бир жолу аларды data-toggleатрибуту боюнча тандоо болот:

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

Баскыч топторундагы, киргизүү топторундагы жана таблицалардагы поповерлер атайын орнотууну талап кылат

.btn-groupa же a ичиндеги элементтерде .input-groupже таблицага байланыштуу элементтерде ( <td>, <th>, <tr>, , <thead>, <tbody>, ) поповерлерди колдонгондо, каалабаган терс таасирлерден (мисалы, элементтин кеңейиши жана/) болбош үчүн <tfoot>параметрди (төмөндө документтештирилген) көрсөтүшүңүз керек болот. container: 'body'же поповер иштетилгенде тегеректелген бурчтарын жоготот).

Жашыруун элементтерде поповерлерди көрсөтүүгө аракет кылбаңыз

$(...).popover('show')Максаттуу элемент болгондо чакыруу поповердин display: none;туура эмес жайгаштырылышына алып келет.

Өчүрүлгөн элементтердеги поповерлер орогуч элементтерин талап кылат

disabledА же элементке поповерди кошуу үчүн .disabled, элементти а ичине коюп, анын ордуна <div>поповерди колдонуңуз <div>.

Көп линиялуу шилтемелер

Кээде бир нече саптарды ороп турган гипершилтемеге поповерди кошкуңуз келет. Popover плагининин демейки жүрүм-туруму аны туурасынан жана вертикалдуу борборлоштуруу болуп саналат. white-space: nowrap;Мунун алдын алуу үчүн анкерлериңизге кошуңуз .

Мисалдар

Static popover

Төрт вариант бар: жогорку, оң, ылдый жана сол тегизделген.

Popover үстү

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

Попов туура

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

Попвер түбү

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

Попов кетти

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

Түз демо

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

Төрт багыт

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

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

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

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

Кийинки чыкылдатууда четке кагуу

focusКолдонуучу кийинки чыкылдатканда поповерлерди четке кагуу үчүн триггерди колдонуңуз .

Кийинки чыкылдатууда өчүрүү үчүн атайын белги талап кылынат

Туура кайчылаш браузер жана кайчылаш платформа жүрүм-туруму үчүн <a>тегди эмес , <button>тегди колдонушуңуз керек жана ошондой эле 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>

Колдонуу

JavaScript аркылуу поповерлерди иштетүү:

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

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-animation="".

аты Type Демейки Description
анимация логикалык чын Калкыма файлга CSS өчүп өтүүнү колдонуңуз
контейнер string | жалган жалган

Белгилүү бир элементке калкыма тиркелет. Мисал: container: 'body'. Бул параметр өзгөчө пайдалуу, анткени ал поповерди документтин агымында триггердик элементтин жанында жайгаштырууга мүмкүндүк берет - бул терезенин өлчөмүн өзгөртүү учурунда поповердин триггер элементинен алыстап кетишине жол бербейт.

мазмун string | функция ''

data-contentЭгер атрибут жок болсо, демейки мазмундун мааниси .

Эгерде функция берилсе, ал thisпоповер тиркелген элементке шилтеме топтому менен чакырылат.

кечиктирүү саны | объект 0

Поповерди көрсөтүү жана жашыруу кечигүү (мс) - кол менен триггер түрүнө тиешелүү эмес

Эгерде номер берилсе, кечиктирүү эки жашыруу/көрсөтүү үчүн колдонулат

Объекттин структурасы:delay: { "show": 500, "hide": 100 }

html логикалык жалган HTMLди калкып чыгуучу жерге кыстарыңыз. Эгер жалган болсо, textDOMга мазмунду киргизүү үчүн jQuery ыкмасы колдонулат. XSS чабуулдарынан кооптонуп жатсаңыз, текстти колдонуңуз.
жайгаштыруу string | функция "туура"

Поповерди кантип жайгаштыруу керек - top | түбү | сол | туура | авто.
"Авто" көрсөтүлгөндө, ал поповерди динамикалык түрдө өзгөртөт. Мисалы, эгер жайгаштыруу "автоматтык сол" болсо, поповер мүмкүн болушунча солго көрсөтүлөт, антпесе оңго көрсөтүлөт.

Функция жайгаштырууну аныктоо үчүн колдонулганда, ал биринчи аргумент катары popover DOM түйүнү жана экинчиси катары триггер элементи DOM түйүнү менен чакырылат. Контекст thispopover инстанциясына коюлган.

селектор сап жалган Эгер селектор берилсе, поповер объекттери көрсөтүлгөн максаттарга өткөрүлүп берилет. Иш жүзүндө, бул динамикалык HTML мазмунун поповерлерди кошууга иштетүү үчүн колдонулат. Бул жана маалыматтык мисалды караңыз .
шаблон сап '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Калкыма түзүүдө колдонула турган негизги HTML.

поповердин titleичине сайылат .popover-title.

поповердин contentичине сайылат .popover-content.

.arrowпоповердин жебеси болуп калат.

Эң сырткы ороочу элемент .popoverкласска ээ болушу керек.

аталышы string | функция ''

titleЭгер атрибут жок болсо, демейки аталыш мааниси .

Эгерде функция берилсе, ал thisпоповер тиркелген элементке шилтеме топтому менен чакырылат.

триггер сап 'басуу' Поповер кантип иштетилет - чыкылдатыңыз | hover | фокус | колдонмо. Сиз бир нече триггерлерди өткөрө аласыз; аларды боштук менен ажыратыңыз. manualбашка триггер менен айкалыштыруу мүмкүн эмес.
көрүү порту string | объект | функция { селектор: 'body', толтуруу: 0 }

Поповерди бул элементтин чегинде сактайт. Мисалы: viewport: '#viewport'же{ "selector": "#viewport", "padding": 0 }

Функция берилсе, ал жалгыз аргументи катары триггер элементи DOM түйүнү менен чакырылат. Контекст thispopover инстанциясына коюлган.

Жеке поповерлер үчүн маалымат атрибуттары

Жеке поповерлердин параметрлери альтернатива катары жогоруда түшүндүрүлгөндөй, маалымат атрибуттарын колдонуу аркылуу көрсөтүлүшү мүмкүн.

Методдор

$().popover(options)

Элементтердин жыйнагы үчүн поповерлерди инициализациялайт.

.popover('show')

Элементтин калкып чыгуусун көрсөтөт. Поповер чындыгында көрсөтүлө электе (б.а. shown.bs.popoverокуя болгонго чейин) чалуучуга кайтат. Бул поповерди "кол менен" ишке киргизүү деп эсептелет. Аталышы жана мазмуну нөлгө барабар болгон поповерлер эч качан көрсөтүлбөйт.

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

.popover('hide')

Элементтин калкып чыгуусун жашырат. Поповер чындыгында жашырылганга чейин (б.а. hidden.bs.popoverокуя болгонго чейин) чалуучуга кайтат. Бул поповерди "кол менен" ишке киргизүү деп эсептелет.

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

.popover('toggle')

Элементтин калкып чыгуусун өчүрөт. Поповер чындыгында көрсөтүлгөнгө же жашырылганга чейин (б.а. shown.bs.popoverже hidden.bs.popoverокуя болгонго чейин) чалуучуга кайтат. Бул поповерди "кол менен" ишке киргизүү деп эсептелет.

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

.popover('destroy')

Элементтин поповерин жашырат жана жок кылат. Делегацияны колдонгон поповерлер ( опцияны колдонуу мененselector түзүлгөн ) тукум триггер элементтеринде өзүнчө жок кылынбайт.

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

Окуялар

Окуя түрү Description
show.bs.popover Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт.
show.bs.popover Бул окуя поповер колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү аяктаганга чейин күтөт).
hide.bs.popover Бул окуя hideинстанция ыкмасы чакырылганда дароо өчүрүлөт.
hidden.bs.popover Бул окуя поповер колдонуучудан жашырылгандан кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт).
inserted.bs.popover Бул окуя show.bs.popoverDOMга popover үлгүсү кошулгандан кийин өчүрүлөт.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Эскертүү билдирүүлөрү alert.js

Мисал эскертүүлөр

Бул плагин менен бардык эскертүү билдирүүлөрүнө четке кагуу функциясын кошуңуз.

Баскычты колдонууда .close, ал биринчи бала болушу керек .alert-dismissibleжана белгилөөдө анын алдына эч кандай тексттик мазмун келбеши керек.

Колдонуу

data-dismiss="alert"Эскертүүнү автоматтык түрдө жабуу функциясын берүү үчүн жөн гана жабуу баскычын кошуңуз . Эскертүүнү жабуу аны DOMдан алып салат.

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

Жабууда эскертүүлөрүңүз анимацияны колдонушу үчүн, аларда .fadeжана бар экенин текшериңиз.in колдонушу үчүн, аларга мурунтан эле колдонулган класстар

Методдор

$().alert()

Атрибуту бар тукум элементтериндеги чыкылдатуу окуяларын угуу үчүн эскертүү берет data-dismiss="alert". (Data-api автоматтык түрдө инициализациясын колдонууда зарыл эмес.)

$().alert('close')

Эскертүүнү DOMдан алып салуу менен жаап салат. Эгер элементте .fadeжана .inкласстары бар болсо, эскертүү ал өчүрүлгөнгө чейин өчүп калат.

Окуялар

Bootstrap'тин эскертүү плагини эскертүү функциясына кирүү үчүн бир нече окуяларды ачып берет.

Окуя түрү Description
close.bs.alert Бул окуя closeинстанция ыкмасы чакырылганда дароо күйөт.
жабык.bs.alert Бул окуя эскертүү жабылгандан кийин өчүрүлөт (CSS өтүүлөрү аяктаганга чейин күтөт).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Buttons button.js

Баскычтар менен көбүрөөк кылыңыз. Башкаруу баскычынын абалы же куралдар панели сыяктуу башка компоненттер үчүн баскычтардын топторун түзүңүз.

Браузердик шайкештик

Firefox баракчаларды жүктөөдө форманын башкаруу абалын (өчүп калуу жана текшерүү) сактайт . Бул үчүн убактылуу чечим колдонуу болуп саналат autocomplete="off". Караңыз Mozilla ката #654072 .

Мамлекеттүү

data-loading-text="Loading..."баскычтагы жүктөө абалын колдонуу үчүн кошуу .

Бул функция v3.3.5тен бери эскирип, v4 версиясында алынып салынган.

Каалаган абалыңызды колдонуңуз!

Бул демонстрация үчүн биз жана колдонуп жатабыз data-loading-text, $().button('loading')бирок бул сиз колдоно турган жалгыз абал эмес. Бул тууралуу төмөндөгү $().button(string)документтерде көбүрөөк караңыз .

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

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

Жалгыз которуштуруу

data-toggle="button"Бир баскыч менен которууну иштетүү үчүн кошуу .

Алдын ала которулган баскычтар керек.active жанаaria-pressed="true"

Алдын ала которулган баскычтар үчүн .activeклассты жана aria-pressed="true"атрибутту buttonөзүңүзгө кошушуңуз керек.

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

Белгилөө кутучасы / Радио

Тиешелүү стилдеринде которуштурууну иштетүү үчүн белгилөө кутучасына же радио киргизүүлөргө data-toggle="buttons"кошуңуз ..btn-group

Алдын ала тандалган параметрлер керек.active

Алдын ала тандалган опциялар үчүн .activeклассты киргизүүгө labelөзүңүз кошушуңуз керек.

Визуалдык текшерүү абалы чыкылдаганда гана жаңыртылады

Белгилөө кутучасынын баскычынын белгиленген абалы баскычтагы clickокуяны күйгүзбөстөн (мисалы , киргизүүнүн касиетин <input type="reset">орнотуу аркылуу же аркылуу ) жаңыртылган болсо, сиз классты киргизүүнүн өзүңүзгө которушуңуз керек болот.checked.activelabel

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

Методдор

$().button('toggle')

Басуу абалын которуштуруу. Баскычка ал иштетилгендей көрүнүштү берет.

$().button('reset')

Баскычтын абалын калыбына келтирет - текстти түпнуска текстке алмаштырат. Бул ыкма асинхрондуу жана баштапкы абалга келтирүү иш жүзүндө аяктаганга чейин кайтарылат.

$().button(string)

Текстти каалаган маалымат аныкталган текст абалына алмаштырат.

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

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

Collapse collapse.js

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

Плагинге көз карандылык

Жыйыштыруу үчүн өтүү плагини сиздин Bootstrap версияңызга киргизилишин талап кылат.

Мисал

Класстын өзгөртүүлөрү аркылуу башка элементти көрсөтүү жана жашыруу үчүн төмөнкү баскычтарды басыңыз:

  • .collapseмазмунду жашырат
  • .collapsingөтүү учурунда колдонулат
  • .collapse.inмазмунду көрсөтөт

hrefСиз атрибуту бар шилтемени же атрибуттуу баскычты колдоно аласыз data-target. Эки учурда тең data-toggle="collapse"талап кылынат.

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>

Аккордеон мисал

Панель компоненти менен аккордеон түзүү үчүн демейки кыйратуу аракетин кеңейтиңиз.

Anim pariatur cliche reprehenderit, enim eiusmod жогорку жашоого айыптоо Терри Ричардсон жана кальмар. 3 карышкыр ай officia aute, non cupidatat скейтборд dolor brunch. Азык-түлүк ташуучу quinoa nesciunt laborum eiusmod. Brunch 3 Wol Moon tempor, sunt aliqua ага куш койду кальмар жалгыз келип чыккан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Ad vegan excepteur касапчы вице-ломо. Легинстер occaecat кол өнөрчүлүк сыра фермасынан столго, чийки джинсы эстетикалык синтетикалык nesciunt, сиз алар жөнүндө accusamus labore туруктуу VHS уккан эмессиз.
Anim pariatur cliche reprehenderit, enim eiusmod жогорку жашоого айыптоо Терри Ричардсон жана кальмар. 3 карышкыр ай officia aute, non cupidatat скейтборд dolor brunch. Азык-түлүк ташуучу quinoa nesciunt laborum eiusmod. Brunch 3 Wol Moon tempor, sunt aliqua ага куш койду кальмар жалгыз келип чыккан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Ad vegan excepteur касапчы вице-ломо. Легинстер occaecat кол өнөрчүлүк сыра фермасынан столго, чийки джинсы эстетикалык синтетикалык nesciunt, сиз алар жөнүндө accusamus labore туруктуу VHS уккан эмессиз.
Anim pariatur cliche reprehenderit, enim eiusmod жогорку жашоого айыптоо Терри Ричардсон жана кальмар. 3 карышкыр ай officia aute, non cupidatat скейтборд dolor brunch. Азык-түлүк ташуучу quinoa nesciunt laborum eiusmod. Brunch 3 Wol Moon tempor, sunt aliqua ага куш койду кальмар жалгыз келип чыккан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Ad vegan excepteur касапчы вице-ломо. Легинстер occaecat кол өнөрчүлүк сыра фермасынан столго, чийки джинсы эстетикалык синтетикалык nesciunt, сиз алар жөнүндө accusamus labore туруктуу 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 менен .list-groups алмаштырса болот.

  • Bootply
  • One itmus ac facilin
  • Экинчи эрос

Кеңейтүү/жыйыштыруу башкаруу элементтерин жеткиликтүү кылыңыз

aria-expandedБашкаруу элементине кошууну унутпаңыз . Бул атрибут экранды окугучтарга жана ушул сыяктуу жардамчы технологияларга жыйыла турган элементтин учурдагы абалын ачык аныктайт. Эгерде жыйыла турган элемент демейки боюнча жабылса, анын мааниси болушу керек aria-expanded="false". Эгерде сиз inкласстын жардамы менен жыйыла турган элементти демейки боюнча ачык кылып койгон болсоңуз, aria-expanded="true"анын ордуна башкарууга орнотуңуз. Плагин жыйыла турган элементтин ачылганына же жабылбаганына жараша бул атрибутту автоматтык түрдө которушат.

Кошумча, эгерде сиздин башкаруу элементиңиз бир жыйыла турган элементке багытталган болсо, башкача айтканда, data-targetатрибут селекторду көрсөтүп жатса, idсиз башкаруу элементине жыйыла турган элементти камтыган кошумча aria-controlsатрибут кошо аласыз id. Заманбап экранды окугучтар жана ушуга окшогон жардамчы технологиялар бул атрибутту пайдалануучуларга жыйылган элементтин өзүнө түздөн-түз өтүү үчүн кошумча жарлыктар менен камсыз кылуу үчүн колдонушат.

Колдонуу

Кыйратуу плагини оор жүктөрдү көтөрүү үчүн бир нече класстарды колдонот:

  • .collapseмазмунун жашырат
  • .collapse.inмазмунун көрсөтөт
  • .collapsingөтүү башталганда кошулат жана ал аяктаганда алынып салынат

Бул класстарды тапса болот component-animations.less.

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

Жыйналма элементти башкарууну автоматтык түрдө дайындоо үчүн жөн гана элементке data-toggle="collapse"жана a кошуңуз . data-targetАтрибут data-targetкыйратууну колдонуу үчүн CSS селекторун кабыл алат. collapseКлассты жыйыла турган элементке кошууну унутпаңыз . Эгер сиз анын демейки түрдө ачылышын кааласаңыз, кошумча классты кошуңузin .

Аккордеон сыяктуу топту башкарууну жыйма башкарууга кошуу үчүн, маалымат атрибутун кошуңуз data-parent="#selector". Муну иш жүзүндө көрүү үчүн демонстрацияга кайрылыңыз.

JavaScript аркылуу

Кол менен иштетүү:

$('.collapse').collapse()

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-parent="".

аты түрү демейки сүрөттөмө
ата-эне селектор жалган Эгерде селектор камсыз кылынса, анда бул жыйыла турган нерсе көрсөтүлгөндө, көрсөтүлгөн ата-эненин астындагы бардык жыйыла турган элементтер жабылат. panel(салттуу аккордеон жүрүм-турумуна окшош - бул класска көз каранды )
которуштуруу логикалык чын Чакыруудагы жыйыла турган элементти которуштуруу

Методдор

.collapse(options)

Мазмунуңузду жыйма элемент катары иштетет. Кошумча варианттарды кабыл алат object.

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

.collapse('toggle')

Жыйналма элементти көрсөтүүгө же жашырууга которот. Жыйналма элемент иш жүзүндө көрсөтүлө электе же жашырылганга чейин (б.а. shown.bs.collapseже hidden.bs.collapseокуя болгонго чейин) чалуучуга кайтып келет.

.collapse('show')

Жыйналма элементти көрсөтөт. Чыгуучу элемент чындыгында көрсөтүлгөнгө чейин (б.а. shown.bs.collapseокуя болгонго чейин) чалуучуга кайтып келет.

.collapse('hide')

Жыйналма элементти жашырат. Жыйналма элемент чындыгында жашырылганга чейин (б.а. hidden.bs.collapseокуя болгонго чейин) чалуучуга кайтып келет.

Окуялар

Bootstrap'тин кыйратуу классы кыйратуу функциясына кирүү үчүн бир нече окуяларды ачып берет.

Окуя түрү Description
show.bs.collapse Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт.
көрсөтүлгөн.bs.кыйрыш Бул окуя кыйратуу элементи колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт).
жашыруу.б.кыйруу Бул окуя hideыкма чакырылганда дароо өчүрүлөт.
hidden.bs.collapse Коллапс элементи колдонуучудан жашырылганда, бул окуя өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Карусель сыяктуу элементтерди тебүү үчүн слайдшоу компоненти. Уюшкан карусельдер колдоого алынбайт.

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

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

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

Кошумча жазуулар

.carousel-captionСлайддарыңызга каалаган элементи менен оңой коштомо жазууларды кошуңуз .item. Болгону каалаган кошумча HTMLди ал жерге жайгаштырсаңыз, ал автоматтык түрдө тегиздеп, форматталат.

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

Бир нече карусель

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

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

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

data-ride="carousel"Атрибуту карусельди бет жүктөлгөндөн баштап анимациялоочу катары белгилөө үчүн колдонулат . Аны бир эле каруселдин ачык-айкын JavaScript инициализациясы менен бирге колдонууга болбойт.

JavaScript аркылуу

Каруселге кол менен чалуу:

$('.carousel').carousel()

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-interval="".

аты түрү демейки сүрөттөмө
интервал саны 5000 Нерсени автоматтык түрдө айлантуунун ортосундагы кечигүү убактысы. Эгер жалган болсо, карусель автоматтык түрдө айланбайт.
тыныгуу string | нөл "коп" Эгер коюлса "hover", каруселдин айлануусун тындырат mouseenterжана карусельди айлантууну кайра улантат mouseleave. деп коюлса null, каруселдин үстүнө меңзеп коюу аны тындырбайт.
ороп логикалык чын Карусель тынымсыз айланышы керекпи же катуу токтошу керекпи.
клавиатура логикалык чын Карусель клавиатурадагы окуяларга жооп бериши керекпи.

Кошумча опциялар менен карусельди инициализациялайт objectжана буюмдарды аралай баштайт.

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

Карусель буюмдарын солдон оңго карай айлантыңыз.

Карусель буюмдарды айланып өтүүнү токтотот.

Карусельди белгилүү бир кадрга айлантат (0 негизинде, массивге окшош).

Мурунку пунктка өтүү.

Кийинки нерсеге өтүү.

Bootstrap'тин карусель классы карусель функциясына кирүү үчүн эки окуяны ачып берет.

Эки окуя тең төмөнкү кошумча касиеттерге ээ:

  • direction: Карусель жылып жаткан багыт (же "left"же "right").
  • relatedTarget: Активдүү нерсе катары ордуна жылдырылып жаткан DOM элементи.

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

Окуя түрү Description
слайд.б.карусель Бул окуя slideинстанция ыкмасы чакырылганда дароо күйөт.
slid.bs.carousel Бул иш-чара карусель слайдды өткөрүп бүткөндөн кийин өчүрүлөт.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

affix.js _

Мисал

Аффикс плагини position: fixed;менен табылган эффектти туурап, күйгүзүп-өчүрүп турат position: sticky;. Оң жактагы субнавигация - бул аффикс плагининин жандуу демосу.


Колдонуу

Аффикс плагинди маалымат атрибуттары аркылуу же өзүңүздүн JavaScript менен кол менен колдонуңуз. Эки кырдаалда тең сиз чапталган мазмунуңуздун жайгашуусу жана туурасы үчүн CSS камсыз кылышыңыз керек.

Эскертүү: Safari рендеринг катасынан улам тартылган же түртүлгөн мамыча сыяктуу салыштырмалуу жайгашкан элементте камтылган элементте аффикс плагинди колдонбоңуз .

CSS аркылуу жайгаштыруу

Аффикс плагини үч класстын ортосунда которулат, алардын ар бири белгилүү бир абалды билдирет: .affix, .affix-top, жана .affix-bottom. Чыныгы позицияларды иштетүү үчүн, сиз бул класстар үчүн (бул плагинден көз каранды эмес) стилдерди, position: fixed;on дан башкасын беришиңиз керек ..affix

Бул жерде аффикс плагини кандай иштейт:

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

Төмөндөгү колдонуу параметрлеринин бирине CSS орнотуу үчүн жогорудагы кадамдарды аткарыңыз.

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

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

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

JavaScript аркылуу

JavaScript аркылуу аффикс плагинине чалыңыз:

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

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-offset-top="200".

аты түрү демейки сүрөттөмө
офсет саны | функция | объект 10 Сыдыруунун ордун эсептөөдө экрандан жылыш үчүн пикселдер. Эгерде бир сан берилсе, офсет жогорку жана төмөнкү багытта колдонулат. Уникалдуу, төмөнкү жана үстүнкү офсетти камсыз кылуу үчүн жөн гана объектти бериңиз offset: { top: 10 }же offset: { top: 10, bottom: 5 }. Офсетти динамикалык эсептөө керек болгондо функцияны колдонуңуз.
максаттуу селектор | түйүн | jQuery элементи windowобъект _ Аффикстин максаттуу элементин белгилейт.

Методдор

.affix(options)

Мазмунуңузду аффикстелген мазмун катары иштетет. Кошумча варианттарды кабыл алат object.

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

.affix('checkPosition')

Тиешелүү элементтердин өлчөмдөрүнө, абалына жана жылдыруу абалына жараша аффикстин абалын кайра эсептейт. , .affix, .affix-topжана .affix-bottomкласстары жаңы абалга ылайык аффикстүү мазмунга кошулат же андан алынып салынат. Бул ыкма аффиксацияланган мазмундун же максаттуу элементтин өлчөмдөрү өзгөргөн сайын чакырылышы керек, бул аффикстелген мазмундун туура жайгашуусун камсыз кылуу үчүн.

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

Окуялар

Bootstrap'тин аффикс плагини аффикс функционалдуулугуна кирүү үчүн бир нече окуяларды ачып берет.

Окуя түрү Description
affix.bs.affiks Бул окуя элемент чапталганга чейин дароо күйөт.
affixed.bs.affiks Бул окуя элемент чапталгандан кийин өчүрүлөт.
affix-top.bs.affiks Бул иш-чара элементтин үстүнө орнотулганга чейин дароо башталат.
affixed-top.bs.affiks Бул иш-чара элементтин үстүнө коюлгандан кийин өчүрүлөт.
affix-bottom.bs.affiks Бул окуя элемент ылдый жагына чапталганга чейин дароо башталат.
affixed-bottom.bs.affiks Бул окуя элемент ылдыйга чапталгандан кийин өчүрүлөт.