Шолу

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

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

Сонымен қатар, белгілі бір плагинге мақсат қою үшін, плагиннің атын келесідей деректер-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 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 өту қолдауын тексеру және ілулі ауысуларды ұстау үшін пайдаланады.

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

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

$.support.transition = false

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-describedbyon арқылы бере аласыз .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модальдан тыс басқанда көрсетілген модальдарды алып тастау үшін басу аймағын қамтамасыз ету үшін a жасайды.<body>.modal-backdrop

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

JavaScript жазбай модальды белсендіріңіз. data-toggle="modal"Түймешік сияқты контроллер элементіне data-target="#foo"немесе href="#foo"ауыстырып-қосу үшін белгілі бір модальға мақсат қою үшін орнатыңыз .

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

JavaScript арқылы

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

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

Опциялар

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

Аты түрі әдепкі сипаттамасы
фон логикалық немесе жол'static' рас Модаль-фон элементін қамтиды. Немесе, staticшерткенде модальды жаппайтын фон үшін көрсетіңіз.
пернетақта логикалық рас Escape пернесі басылғанда модальды жабады
көрсету логикалық рас Баптандыру кезінде модальды көрсетеді.
қашықтан жол жалған

Бұл опция v3.3.0 нұсқасынан бері ескірген және v4 нұсқасында жойылған. Оның орнына клиенттік үлгіні немесе деректерді байланыстыру құрылымын пайдалануды немесе jQuery.load файлын өзіңіз шақыруды ұсынамыз.

Қашықтағы URL мекенжайы берілсе, мазмұн jQuery әдісі арқылы бір рет жүктеледі және div loadішіне енгізіледі . .modal-contentData-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">) жіберіледі.

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

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

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

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

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

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

.dropdown-backdropМобильді құрылғыларда ашылмалы тізімді ашу мәзірден тыс түрту кезінде ашылмалы мәзірлерді жабу үшін түрту аймағы ретінде қосады , бұл тиісті iOS қолдауына қойылатын талап. Бұл ашық ашылмалы мәзірден басқа ашылмалы мәзірге ауысу ұялы телефонда қосымша түртуді қажет ететінін білдіреді.

Ескертпе: data-toggle="dropdown"Атрибут қолданба деңгейінде ашылмалы мәзірлерді жабу үшін негізделген, сондықтан оны әрқашан пайдалану жақсы идея.

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

Ашылмалы тізімді ауыстырып қосу data-toggle="dropdown"үшін сілтемеге немесе түймеге қосыңыз.

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

Сілтеме түймелері арқылы URL мекенжайларын сақтау үшін data-targetорнына төлсипатты пайдаланыңыз href="#".

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

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

JavaScript арқылы

JavaScript арқылы ашылмалы тізімдерге қоңырау шалыңыз:

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

data-toggle="dropdown"әлі де қажет

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

Жоқ

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

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

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

Оқиға түрі Сипаттама
show.bs.ашылатын тізім Бұл оқиға шоу данасы әдісі шақырылғанда бірден іске қосылады.
көрсетілген.bs.ашылмалы тізім Бұл оқиға ашылмалы тізім пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді).
жасыру.б. ашылмалы тізім Бұл оқиға жасыру данасы әдісі шақырылған кезде бірден іске қосылады.
жасырын.б. ашылмалы тізім Бұл оқиға ашылмалы тізімнің пайдаланушыдан жасырылуын аяқтаған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

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

@май

Жарнама леггинстер keytar, brunch id art party dolor labore. Пичфорк yr enim lo-fi олар qui сатылғанға дейін. Tumblr фермадан үстелге дейін велосипед құқығы. Anim keffiyeh carles кардиганы. Велит Сейтан Максвинидің фотостенд 3 қасқыр ай irure. Косби жемпір ломо джинсы шорттары, Вильямсбург капюшон минимум, сіз олар туралы естімеген боларсыз және кардиган сенімді қорының culpa biodiesel Уэс Андерсон эстетикалық. Nihil tattooed accusamus, Cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Вениам марфа мұртты скейтборд, майлы фугиат велит айыр сақалы. Фриган сақалы Mcsweeney's Vero. Cupidatat four loko nisi, ea helvetica nulla carles. Татуировкасы бар косби жемпір азық-түлік жүк көлігі, mcsweeney's quis non freegan винил. Ло-фи Вес Андерсон +1 сарториалды. Карлестің эстетикалық емес жаттығулары нәзік емес. Бруклин майсыздандыратын қолөнер сырасы вице Кейтар Десерунт.

бір

Кез-келген басқа нұсқаны пайдаланыңыз. Fap крафт сырасы deserunt скейтборд ea. Lomo велосипед құқықтарын қорғау banh mi, Velit ea Sunt келесі деңгейлі локаварлық бір текті кофе магна вениам. High life идентификаторы винил, жаңғырық саябағы quis aliquip banh mi pitchfork. Vero VHS est adipisicing. 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 messenger bag marfa whatever delectus food truck. Сапиенте синтез идентификаторы. Locavore sed helvetica клише ирония, найзағайлар, бәлкім, сіз олар туралы естімеген боларсыз. Олар сатылып кеткенге дейін жұмыс істейтін таңдаулы орын, Терри Ричардсон керемет таңғы ас. Кардиган қолөнер сырасы сеитан дайын велит. VHS chambray laboris tempor veniam. Аним моллит миним commodo ullamco thundercats.

Қолданылуы

Bootstrap навигациясын қажет етеді

Scrollspy қазіргі уақытта белсенді сілтемелерді дұрыс бөлектеу үшін Bootstrap navigasyon компонентін пайдалануды талап етеді .

Шешілетін идентификатор мақсаттары қажет

Шарлау тақтасының сілтемелерінде шешілетін идентификатор мақсаттары болуы керек. Мысалы, <a href="#home">home</a>міндетті түрде DOM ішіндегі нәрсеге сәйкес келеді <div id="home"></div>.

Мақсатты емес :visibleэлементтер еленбейді

:visiblejQuery-ге сәйкес келмейтін мақсатты элементтер еленбейді және олардың сәйкес шарлау элементтері ешқашан бөлектелмейді.

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

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

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

Үстіңгі тақтадағы шарлауға айналдыру әрекетін оңай қосу data-spy="scroll"үшін, шпиондық жасағыңыз келетін элементке қосыңыз (көбінесе бұл <body>). Содан кейін кез келген Bootstrap компонентінің data-targetнегізгі элементінің идентификаторы немесе сыныбы бар төлсипатты қосыңыз..nav

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

JavaScript арқылы

CSS-ті қосқаннан кейін position: relative;JavaScript арқылы scrollspy-ге қоңырау шалыңыз:

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

Әдістері

.scrollspy('refresh')

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

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

Опциялар

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

Аты түрі әдепкі сипаттамасы
офсет саны 10 Айналдыру орнын есептеу кезінде жоғарыдан ығысу үшін пикселдер.

Оқиғалар

Оқиға түрі Сипаттама
activate.bs.scrollspy Бұл оқиға айналдыру арқылы жаңа элемент белсендірілген сайын іске қосылады.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Ауыстырылатын қойындылар tab.js

Мысал қойындылары

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

Шикі джинсы Остин олар туралы естімеген боларсыз. Nesciunt tofu stumptown aliqua, ретро синтетикалық тазалау шебері. Мұртты клише, Вильямсбург Карлес Вегетариандық Хелветика. Reprehenderit қасапшы ретро keffiyeh dreamcatcher synth. Косби жемпірі eu banh mi, qui irure Терри Ричардсон бұрынғы кальмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, қасапшы nisi qui voluptate.

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"Сіз жай ғана көрсету немесе элементте JavaScript жазбай-ақ қойындыны немесе таблетка шарлауын белсендіре аласыз data-toggle="pill". navҚойындыға және nav-tabsсыныптарын қосу ulBootstrap қойындысының сәндеуін қолданады , ал navжәне nav-pillsсыныптарын қосқанда таблетка стилі қолданылады .

<div>

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

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

</div>

Өшіру әсері

Қойындыларды өшіру .fadeүшін әрқайсысына қосыңыз .tab-pane. Бірінші қойынды тақтасында .inбастапқы мазмұнды көрінетін ету керек.

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

Әдістері

$().tab

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

.tab('show')

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

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

Оқиғалар

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

  1. hide.bs.tab(ағымдағы белсенді қойындыда)
  2. show.bs.tab(көрсетілетін қойындыда)
  3. hidden.bs.tab(алдыңғы белсенді қойындыда hide.bs.tabоқиғамен бірдей)
  4. shown.bs.tab(жаңа ғана көрсетілген қойындыда, оқиға үшін бірдей show.bs.tab)

Ешбір қойынды бұрыннан белсенді болмаса, hide.bs.tabжәне hidden.bs.tabоқиғалары өшірілмейді.

Оқиға түрі Сипаттама
show.bs.tab Бұл оқиға қойындылар көрсетілімінде іске қосылады, бірақ жаңа қойынды көрсетілмей тұрып. Белсенді қойындыны және алдыңғы белсенді қойындыны (егер бар болса) тиісінше бағыттау үшін event.targetжәне пайдаланыңыз .event.relatedTarget
көрсетілген.б.қойындысы Бұл оқиға қойынды көрсетілгеннен кейін қойындылар көрсетілімінде іске қосылады. Белсенді қойындыны және алдыңғы белсенді қойындыны (егер бар болса) тиісінше бағыттау үшін event.targetжәне пайдаланыңыз .event.relatedTarget
жасыру.б.қойындысы Бұл оқиға жаңа қойынды көрсетілетін кезде іске қосылады (және осылайша алдыңғы белсенді қойынды жасырылады). Сәйкесінше ағымдағы белсенді қойындыны және жақында белсенді болатын жаңа қойындыны мақсатты ету үшін event.targetжәне пайдаланыңыз .event.relatedTarget
жасырын.б.қойындысы Бұл оқиға жаң�� қойынды көрсетілгеннен кейін іске қосылады (және осылайша алдыңғы белсенді қойынды жасырылады). Алдыңғы белсенді қойындыны және жаңа белсенді қойындыны тиісінше бағыттау үшін event.targetжәне түймелерін пайдаланыңыз .event.relatedTarget
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

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

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

Ұзындығы нөлдік тақырыптары бар құралдар кеңестері ешқашан көрсетілмейді.

Мысалдар

Көрсеткіштерді көру үшін төмендегі сілтемелердің үстіне апарыңыз:

Тар шалбар келесі деңгейдегі keffiyeh сіз олар туралы естімеген шығарсыз. Фотостенд сақал шикі джинсы баспа вегетариандық хабаршы сөмкесі Stumptown. Фермадан үстелге арналған сейтан, Mcsweeney's fixie sustainable quinoa 8-бит американдық киімінде терри Ричардсон винил камерасы бар . Beard Stumptown, кардигандар banh mi lomo thundercats. Тофу биодизель Вильямсбург Марфа, төрт локо Максвинидің вегетариандық камерасын тазартады. Шынында да ирониялық қолөнерші кез келген 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-toggleтөлсипаты бойынша таңдау болады:

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

Қолданылуы

Құрал кеңесінің плагині сұраныс бойынша мазмұн мен түзетулерді жасайды және әдепкі бойынша құралдар кеңестерін олардың іске қосу элементінен кейін орналастырады.

JavaScript арқылы құралдар кеңесін іске қосыңыз:

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

Белгілеу

Құрал кеңесі үшін қажетті түзету тек dataатрибут болып табылады және titleсізде кеңес алғыңыз келетін HTML элементінде. Құрал кеңесінің жасалған белгілеуі өте қарапайым, бірақ ол позицияны қажет етеді (әдепкі topбойынша, плагин арқылы орнатылған).

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

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

Көп жолды сілтемелер

Кейде бірнеше жолды қосатын гиперсілтемеге кеңес қосқыңыз келеді. Құрал кеңесі плагинінің әдепкі әрекеті оны көлденең және тігінен ортаға қою болып табылады. white-space: nowrap;Бұған жол бермеу үшін зәкірлеріңізге қосыңыз .

Түйме топтарындағы, енгізу топтарындағы және кестелердегі кеңестер арнайы параметрді қажет етеді

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

Жасырын элементтерде құралдар кеңестерін көрсетуге тырыспаңыз

$(...).tooltip('show')Мақсатты элемент болған кезде шақыру құралдар кеңесінің display: none;дұрыс емес орналасуына әкеледі.

Пернетақта және көмекші технология пайдаланушылары үшін қолжетімді кеңестер

tabindex="0"Пернетақтамен шарлайтын пайдаланушылар үшін, атап айтқанда, көмекші технологияларды пайдаланушылар үшін сілтемелер, пішін басқару элементтері немесе төлсипаты бар кез келген ерікті элемент сияқты пернетақтаға бағытталған элементтерге құралдар кеңестерін ғана қосу керек .

Өшірілген элементтерге арналған кеңестер орауыш элементтерін қажет етеді

disabledҚұрал кеңесін немесе элементке қосу үшін .disabledэлементті a ішіне қойып , оның орнына <div>кеңесті <div>қолданыңыз.

Опциялар

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

Аты Түр Әдепкі Сипаттама
анимация логикалық рас Құрал кеңесіне CSS өшіру көшуін қолданыңыз
контейнер жол | жалған жалған

Құрал кеңесін белгілі бір элементке қосады. Мысалы: container: 'body'. Бұл опция әсіресе пайдалы, себебі ол құрал кеңесін құжат ағынында іске қосу элементінің жанында орналастыруға мүмкіндік береді - бұл терезе өлшемін өзгерту кезінде құрал кеңесінің триггер элементінен алыстап кетуіне жол бермейді.

кешіктіру саны | объект 0

Құрал кеңесін көрсету және жасыру кідірісі (мс) - қолмен іске қосу түріне қолданылмайды

Егер нөмір берілсе, кідіріс жасыру/көрсету үшін де қолданылады

Объектінің құрылымы – бұл:delay: { "show": 500, "hide": 100 }

html логикалық жалған Құрал кеңесіне HTML енгізіңіз. Егер жалған болса, jQuery textәдісі мазмұнды DOM ішіне енгізу үшін пайдаланылады. XSS шабуылдары туралы алаңдасаңыз, мәтінді пайдаланыңыз.
орналастыру жол | функциясы 'жоғарғы'

Құрал кеңесін қалай орналастыруға болады - жоғарғы | төменгі | сол жақ | дұрыс | автоматты.
«Авто» көрсетілгенде, ол құралдар кеңесінің бағытын динамикалық түрде өзгертеді. Мысалы, егер орналастыру "автоматты түрде солға" болса, құралдар кеңесі мүмкіндігінше солға көрсетіледі, әйтпесе оңға көрсетіледі.

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

тақырып жол | функциясы ''

titleТөлсипат болмаса, әдепкі тақырып мәні .

thisЕгер функция берілсе, ол құрал кеңесі тіркелген элементке сілтеме жиынымен шақырылады .

триггер жол «Меңзерді жылжыту» Құрал кеңесі қалай іске қосылады - | түймесін басыңыз меңзегіш | фокус | нұсқаулық. Сіз бірнеше триггерлерді өткізе аласыз; оларды бос орынмен бөліңіз. manualбасқа триггермен біріктіру мүмкін емес.
көру алаңы жол | нысан | функциясы { селектор: '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.tooltiphidden.bs.tooltip

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

.tooltip('destroy')

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

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

Оқиғалар

Оқиға түрі Сипаттама
show.bs.көмекші showБұл оқиға дана әдісі шақырылған кезде бірден іске қосылады.
көрсетілген.bs.көмекші Бұл оқиға құралдар кеңесі пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді).
hide.bs.tooltip Бұл оқиға даналық hideәдісі шақырылған кезде бірден іске қосылады.
hidden.bs.tooltip Бұл оқиға құралдар кеңесін пайдаланушыдан жасыруды аяқтаған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді).
кірістірілген.б.көмекші Бұл оқиға құрал show.bs.tooltipкеңес үлгісі DOM файлына қосылған оқиғадан кейін іске қосылады.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

Плагинге тәуелділік

Popovers құралдар кеңесі плагинінің Bootstrap нұсқасына қосылуын талап етеді.

Қосылу функциясы

Өнімділік себептеріне байланысты Tooltip және Popover деректер аписы қосылған, яғни оларды өзіңіз инициализациялауыңыз керек .

Беттегі барлық қалқымалы терезелерді инициализациялаудың бір жолы оларды data-toggleатрибуты бойынша таңдау болады:

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

Түйме топтарындағы, енгізу топтарындағы және кестелердегі қалқымалы терезелер арнайы параметрді қажет етеді

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

Жасырын элементтерде қалқандарды көрсетуге тырыспаңыз

$(...).popover('show')Мақсатты элемент болған кезде шақыру қалқымалы элементтің display: none;дұрыс емес орналасуына әкеледі.

Өшірілген элементтердегі қалқымалы элементтер орауыш элементтерін қажет етеді

disabledҚалқымалы элементті немесе .disabledэлементке қосу үшін элементті a ішіне қойып, оның орнына <div>қалқымалы элементті <div>қолданыңыз.

Көп жолды сілтемелер

Кейде бірнеше жолды қосатын гиперсілтемеге қалқымалы элемент қосқыңыз келеді. Popover плагинінің әдепкі әрекеті оны көлденең және тігінен ортаға қою болып табылады. white-space: nowrap;Бұған жол бермеу үшін зәкірлеріңізге қосыңыз .

Мысалдар

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

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

Попвер үсті

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

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

Опциялар

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

Аты Түр Әдепкі Сипаттама
анимация логикалық рас Қалқымалы файлға CSS өшіру көшуін қолданыңыз
контейнер жол | жалған жалған

Қалқымалы элементті белгілі бір элементке қосады. Мысалы: container: 'body'. Бұл опция әсіресе пайдалы, себебі ол қалқымалы элементті құжат ағынында іске қосу элементінің жанында орналастыруға мүмкіндік береді - бұл терезе өлшемін өзгерту кезінде қалқымалы элементтің іске қосу элементінен алыстап кетуіне жол бермейді.

мазмұны жол | функциясы ''

data-contentТөлсипат болмаса, әдепкі мазмұн мәні .

Егер функция берілсе, ол thisқалқымалы элемент қосылған элементке сілтеме жиынымен шақырылады.

кешіктіру саны | объект 0

Қалқымалы файлды көрсету және жасыру кідірісі (мс) - қолмен триггер түріне қолданылмайды

Егер нөмір берілсе, кідіріс жасыру/көрсету үшін де қолданылады

Объектінің құрылымы – бұл:delay: { "show": 500, "hide": 100 }

html логикалық жалған Қалқымалы файлға HTML енгізіңіз. Егер жалған болса, jQuery textәдісі мазмұнды DOM ішіне енгізу үшін пайдаланылады. XSS шабуылдары туралы алаңдасаңыз, мәтінді пайдаланыңыз.
орналастыру жол | функциясы 'дұрыс'

Қалқымалы терезені қалай орналастыруға болады - жоғарғы | төменгі | сол жақ | дұрыс | автоматты.
"Авто" көрсетілгенде, ол қалқымалы файлды динамикалық түрде өзгертеді. Мысалы, егер орналастыру "автоматты солға" болса, қалқымалы терезе мүмкіндігінше солға қарай көрсетіледі, әйтпесе оңға көрсетіледі.

Орналастыруды анықтау үшін функция пайдаланылған кезде, ол бірінші аргумент ретінде 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сынып болуы керек.

тақырып жол | функциясы ''

titleТөлсипат болмаса, әдепкі тақырып мәні .

Егер функция берілсе, ол thisқалқымалы элемент қосылған элементке сілтеме жиынымен шақырылады.

триггер жол 'басу' Popover қалай іске қосылады - | түймесін басыңыз меңзегіш | фокус | нұсқаулық. Сіз бірнеше триггерлерді өткізе аласыз; оларды бос орынмен бөліңіз. manualбасқа триггермен біріктіру мүмкін емес.
көру алаңы жол | нысан | функциясы { селектор: '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')

Оқиғалар

Оқиға түрі Сипаттама
show.bs.popover showБұл оқиға дана әдісі шақырылған кезде бірден іске қосылады.
көрсетілген.bs.popover Бұл оқиға қалқымалы файл пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді).
hide.bs.popover Бұл оқиға даналық hideәдісі шақырылған кезде бірден іске қосылады.
hidden.bs.popover Бұл оқиға қалқымалы файлды пайдаланушыдан жасыруды аяқтаған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді).
inserted.bs.popover Бұл оқиға show.bs.popoverpopover үлгісі DOM файлына қосылған оқиғадан кейін іске қосылады.
$('#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 ескерту плагині ескерту функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.

Оқиға түрі Сипаттама
жақын.б.ескерту closeБұл оқиға дана әдісі шақырылған кезде бірден іске қосылады.
жабық.б.ескерту Бұл оқиға ескерту жабылған кезде іске қосылады (CSS өтулерінің аяқталуын күтеді).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Түймелер 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.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 kliche reprehenderit, enim eiusmod жоғары өмірді айыптады Терри Ричардсон және кальмар. 3 қасқыр ай officia aute, Cupidatat емес скейтборд dolor brunch. Азық-түлік жүк көлігі quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon tempor, sunt aliqua оған құс қойды кальмар жалғыз шыққан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, қолөнер сыра зертханасы Вес Андерсон Cred Nesciunt Saiente ea proident. Вегетариандық ерекше қасапшы вице-ломо. Leggings occaecat қолөнер сыра фермасынан үстелге, шикі джинсы эстетикалық синтетикалық нессиунт, сіз олар туралы accusamus labore тұрақты VHS естімеген шығарсыз.
Anim pariatur kliche reprehenderit, enim eiusmod жоғары өмірді айыптады Терри Ричардсон және кальмар. 3 қасқыр ай officia aute, Cupidatat емес скейтборд dolor brunch. Азық-түлік жүк көлігі quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon tempor, sunt aliqua оған құс қойды кальмар жалғыз шыққан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, қолөнер сыра зертханасы Вес Андерсон Cred Nesciunt Saiente ea proident. Вегетариандық ерекше қасапшы вице-ломо. Leggings occaecat қолөнер сыра фермасынан үстелге, шикі джинсы эстетикалық синтетикалық нессиунт, сіз олар туралы accusamus labore тұрақты VHS естімеген шығарсыз.
Anim pariatur kliche reprehenderit, enim eiusmod жоғары өмірді айыптады Терри Ричардсон және кальмар. 3 қасқыр ай officia aute, Cupidatat емес скейтборд dolor brunch. Азық-түлік жүк көлігі quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon tempor, sunt aliqua оған құс қойды кальмар жалғыз шыққан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, қолөнер сыра зертханасы Вес Андерсон Cred Nesciunt Saiente ea proident. Вегетариандық ерекше қасапшы вице-ломо. Leggings occaecat қолөнер сыра фермасынан үстелге, шикі джинсы эстетикалық синтетикалық нессиунт, сіз олар туралы 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
  • Бір жеңілдетілген зат
  • Екінші эрос

Кеңейту/тасалау басқару элементтерін қолжетімді етіңіз

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

Сонымен қатар, егер басқару элементі бір жиналатын элементке бағытталса, яғни data-targetтөлсипат селекторды меңзесе – жиынтық элементті қамтитын басқару элементіне idқосымша төлсипатты қосуға болады . Заманауи экранды оқу құрылғылары және ұқсас көмекші технологиялар пайдаланушыларға жиналмалы элементтің өзіне тікелей өту үшін қосымша таңбашалар беру үшін осы атрибутты пайдаланады.aria-controlsid

Қолданылуы

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

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

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

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

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

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

JavaScript арқылы

Қолмен қосу:

$('.collapse').collapse()

Опциялар

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

Аты түрі әдепкі сипаттамасы
ата-ана селектор жалған Егер селектор қамтамасыз етілсе, осы жиналатын элемент көрсетілген кезде көрсетілген тектік астындағы барлық жиналмалы элементтер жабылады. (дәстүрлі аккордеон әрекетіне ұқсас - бұл 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 құлдырау сыныбы құлдырау функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.

Оқиға түрі Сипаттама
show.bs.collapse showБұл оқиға дана әдісі шақырылған кезде бірден іске қосылады.
көрсетілген.bs.collapse Бұл оқиға құлау элементі пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді).
жасыру.б.бұрылыс Бұл оқиға hideәдіс шақырылған кезде бірден іске қосылады.
жасырын.б.құла Бұл оқиға пайдаланушыдан жиырылған элемент жасырылған кезде іске қосылады (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 Элементті автоматты түрде айналдыру арасындағы кідіріс уақыты. Егер жалған болса, карусель автоматты түрде айналмайды.
үзіліс жол | null «меңгілеу» күйіне орнатылса "hover", карусельдің айналуын кідіртеді және айналдыру циклін қосулы mouseenterжалғастырады mouseleave. параметріне орнатылған болса null, меңзерді карусельдің үстіне апару оны кідіртпейді.
орау логикалық рас Карусель үздіксіз айналуы керек пе немесе қатты аялдамалар болуы керек пе.
пернетақта логикалық рас Карусель пернетақта оқиғаларына әрекет ету керек пе.

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

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

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

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

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

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

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

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

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

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

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

Оқиға түрі Сипаттама
слайд.б.карусель slideБұл оқиға дана әдісі шақырылған кезде бірден іске қосылады.
слайд.б.карусель Бұл оқиға карусель слайдты ауыстыруды аяқтаған кезде тоқтатылады.
$('#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 аффикс плагині аффикс функционалдығын қосу үшін бірнеше оқиғаларды көрсетеді.

Оқиға түрі Сипаттама
аффикс.б.аффикс Бұл оқиға элемент бекітілгенге дейін бірден іске қосылады.
аффикс.б.аффикс Бұл оқиға элемент бекітілгеннен кейін іске қосылады.
affix-top.bs.affiks Бұл оқиға элемент жоғарғы жағына жапсырылғанға дейін бірден іске қосылады.
affixed-top.bs.affiks Бұл оқиға элемент жоғарғы жағына бекітілгеннен кейін іске қосылады.
affix-bottom.bs.affiks Бұл оқиға элемент төменгі жағына бекітілгенге дейін бірден іске қосылады.
affixed-bottom.bs.affiks Бұл оқиға элемент төменгі жағына бекітілгеннен кейін іске қосылады.