Incamake

Umuntu ku giti cye cyangwa yakusanyijwe

Amacomeka arashobora gushyirwamo kugiti cye (ukoresheje *.jsdosiye ya Bootstrap), cyangwa byose icyarimwe (ukoresheje bootstrap.jscyangwa ugabanijwe bootstrap.min.js).

Ibiranga amakuru

Urashobora gukoresha amacomeka ya Bootstrap yose ukoresheje marike API utanditse umurongo umwe wa JavaScript. Nibikorwa bya Bootstrap byo mucyiciro cya mbere API kandi bigomba kuba ibitekerezo byambere mugihe ukoresheje plugin.

Ibyo byavuzwe, mubihe bimwe na bimwe birashobora kuba byiza kuzimya iyi mikorere. Kubwibyo, turatanga kandi ubushobozi bwo guhagarika amakuru ikiranga API muguhuza ibyabaye byose kumazina yinyandiko yashyizwe hamwe data-api. Ibi bisa nkibi:

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

Ubundi, kugirango ugaragaze plugin yihariye, shyiramo gusa izina rya plugin nkumwanya wizina hamwe na data-api izina ryumwanya nkuyu:

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

Gahunda ya API

Turizera kandi ko ugomba gushobora gukoresha amacomeka yose ya Bootstrap ukoresheje JavaScript API. API rusange rusange ni imwe, uburyo bukurikirana, kandi igasubiza icyegeranyo cyakozwe.

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

Uburyo bwose bugomba kwemera ibintu bidahitamo ikintu, umugozi ugamije uburyo runaka, cyangwa ntakintu (gitangiza plugin hamwe nimyitwarire idasanzwe):

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

Buri plugin irerekana kandi ibyubaka byayo ku Constructormutungo : $.fn.popover.Constructor. Niba ushaka kubona plugin runaka urugero, iyikure muburyo butaziguye : $('[rel="popover"]').data('popover').

Igenamiterere risanzwe

Urashobora guhindura igenamiterere risanzwe rya plugin uhindura Constructor.DEFAULTSikintu cya plugin:

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

Nta makimbirane

Rimwe na rimwe, birakenewe gukoresha amacomeka ya Bootstrap hamwe nibindi UI. Muri ibi bihe, umwanya wizina urashobora guhura rimwe na rimwe. Niba ibi bibaye, urashobora guhamagara .noConflictkuri plugin wifuza guhindura agaciro ka.

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

Ibyabaye

Bootstrap itanga ibyabaye kubintu byinshi byacometse kubikorwa byihariye. Mubisanzwe, ibi biza muburyo butagira ingano kandi bwashize - aho infinitive (ex. show) Itangizwa mugitangira ibirori, kandi ifishi yacyo ya kera (ex. shown) Iterwa no kurangiza igikorwa.

Kuva 3.0.0, ibyabaye byose muri Bootstrap ni amazina.

Ibintu byose bitagira ingano bitanga preventDefaultimikorere. Ibi bitanga ubushobozi bwo guhagarika ikorwa ryigikorwa mbere yuko gitangira.

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

Isuku

Ibikoresho na popovers bikoresha ibikoresho byubatswe byubatswe kugirango dusukure amahitamo yemera HTML.

Agaciro whiteListgasanzwe ni ibi bikurikira:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Niba ushaka kongeramo indangagaciro kuriyi isanzwe whiteListurashobora gukora ibi bikurikira:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Niba ushaka kurenga isuku yacu kuko uhisemo gukoresha isomero ryabigenewe, urugero DOMPurify , ugomba gukora ibi bikurikira:

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

Inomero za verisiyo

Verisiyo ya buri pompe ya jQuery ya Bootstrap irashobora kugerwaho hifashishijwe VERSIONumutungo wububiko bwa plugin. Kurugero, kubikoresho bya plugin:

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

Nta gusubira inyuma bidasanzwe iyo JavaScript ihagaritswe

Amacomeka ya Bootstrap ntasubira inyuma cyane cyane mugihe JavaScript ihagaritswe. Niba witaye kuburambe bwabakoresha muriki kibazo, koresha <noscript>kugirango usobanure uko ibintu bimeze (nuburyo bwo kongera gukora JavaScript) kubakoresha, kandi / cyangwa wongereho ibyo wiboneye.

Inzibacyuho.js _

Ibyerekeye inzibacyuho

Kubintu byoroshye byinzibacyuho, shyiramo transition.jsrimwe kuruhande rwizindi dosiye za JS. Niba ukoresha icyegeranyo (cyangwa cyaciwe) bootstrap.js, nta mpamvu yo gushyiramo ibi-birahari.

Ibiri imbere

Inzibacyuho.js numufasha wibanze transitionEndkubyabaye kimwe na CSS yinzibacyuho. Ikoreshwa nandi macomeka kugirango agenzure inkunga ya CSS yinzibacyuho no gufata inzibacyuho.

Guhagarika inzibacyuho

Inzibacyuho irashobora guhagarikwa kwisi yose ukoresheje ibice bikurikira bya JavaScript, bigomba kuza nyuma transition.js(cyangwa bootstrap.js, bootstrap.min.jsnkuko bigenda) byapakiwe:

$.support.transition = false

Uburyo modal.js

Moderi iroroshe, ariko iroroshye, ikiganiro kibaza hamwe nibikorwa byibuze bisabwa nibikorwa byubwenge.

Bitewe nuburyo HTML5 isobanura ibisobanuro byayo, autofocusikiranga HTML nta ngaruka igira muburyo bwa Bootstrap. Kugirango ugere ku ngaruka zimwe, koresha JavaScript imwe yihariye:

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

Ingero

Urugero ruhamye

Byahinduwe modal hamwe numutwe, umubiri, hamwe nibikorwa byumutwe.

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

Kubaho

Hindura modal ukoresheje JavaScript ukanze buto hepfo. Bizanyerera kandi bishire hejuru yurupapuro.

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

Ingano

Moderi ifite ubunini bubiri butandukanye, buraboneka binyuze mumashuri ahindura kugirango ashyirwe kuri a .modal-dialog.

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

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

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

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

Kuraho animasiyo

Kuburyo bugaragara gusa aho gushira kugirango turebe, kura urwego muburyo .fadebwawe.

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

Koresha sisitemu ya gride

Kugirango ukoreshe sisitemu ya Bootstrap ya sisitemu muburyo bwa modal, gusa icyari .rows muri .modal-bodyhanyuma hanyuma ukoreshe urwego rusanzwe rwa sisitemu.

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

Guhindura ibintu muburyo bushingiye kuri buto ya trigger

Ufite buto ya buto yose itera modal imwe, gusa nibirimo bitandukanye? Koresha event.relatedTargetna HTML data-*ibiranga (birashoboka binyuze kuri jQuery ) kugirango uhindure ibiri muri modal ukurikije buto yakanze. Reba Modal Events docs ibisobanuro birambuye kuri 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)
})

Ikoreshwa

Amacomeka ya modal ahinduranya ibintu byihishe kubisabwa, ukoresheje ibiranga data cyangwa JavaScript. Iyongera kandi .modal-openkuri <body>to override imyitwarire idasanzwe yo kuzunguruka kandi ikabyara a .modal-backdropgutanga agace kanda kugirango wirukane moderi yerekanwe mugihe ukanze hanze yuburyo.

Binyuze mu biranga amakuru

Kora modal utanditse JavaScript. Shyira data-toggle="modal"ku kintu kigenzura, nka buto, hamwe na a data-target="#foo"cyangwa href="#foo"ugamije uburyo bwihariye bwo guhinduranya.

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

Binyuze kuri JavaScript

Hamagara modal ifite id myModalifite umurongo umwe wa JavaScript:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-backdrop="".

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

Uburyo

.modal(options)

Koresha ibikubiyemo nkibisanzwe. Emera amahitamo object.

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

.modal('toggle')

Intoki ihinduranya modal. Garuka kumuhamagara mbere yuburyo bwerekanwe cyangwa bwihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.modalcyangwa hidden.bs.modalibyabaye bibaho).

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

.modal('show')

Nintoki ifungura modal. Garuka kumuhamagara mbere yuburyo bwerekanwe (ni ukuvuga mbere yuko shown.bs.modalibyabaye biba).

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

.modal('hide')

Nintoki ihishe modal. Garuka kumuhamagara mbere yuburyo bwihishe (nukuvuga mbere yuko hidden.bs.modalibyabaye bibaho).

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

.modal('handleUpdate')

Ongera uhindure modal ihagaze kugirango uhangane numuzingo mugihe umuntu agomba kugaragara, byatuma modal isimbuka ibumoso.

Gusa birakenewe mugihe uburebure bwa modal buhinduka mugihe burakinguye.

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

Ibyabaye

Icyiciro cya Bootstrap cyerekana ibyabaye bike kugirango bifatanye mubikorwa.

Ibintu byose byabaye birasa kuri modal ubwayo (ni ukuvuga kuri <div class="modal">).

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

Ibitonyanga bitonyanga.js

Ingero

Ongeraho ibimanuka hafi kubintu byose hamwe niyi plugin yoroshye, harimo na navbar, tabs, n'ibinini.

Muri navbar

Mu binini

Ikoreshwa

Binyuze muri data ibiranga cyangwa JavaScript, plugin yamanutse ihinduranya ibintu byihishe (ibimanuka byamanutse) muguhindura .openicyiciro kurutonde rwababyeyi.

Ku bikoresho bigendanwa, gufungura ibitonyanga byongeraho .dropdown-backdropnka kanda yo gufunga ibimanuka mugihe ukanda hanze ya menu, ibisabwa kugirango ubone ubufasha bukwiye bwa iOS. Ibi bivuze ko guhindukira ukava kuri menu yamanutse ukajya kurutonde rutandukanye bisaba gukanda kuri mobile.

Icyitonderwa: data-toggle="dropdown"Ikiranga gishingiye ku gufunga ibimanuka kurutonde rwa porogaramu, nibyiza rero guhora tuyikoresha.

Binyuze mu biranga amakuru

Ongeraho data-toggle="dropdown"kumurongo cyangwa buto kugirango uhindure ibitonyanga.

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

Kugirango URL igumane hamwe na buto ihuza, koresha data-targetikiranga aho 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>

Binyuze kuri JavaScript

Hamagara ibitonyanga ukoresheje JavaScript:

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

Amahitamo

Nta na kimwe

Uburyo

$().dropdown('toggle')

Kuzuza menu yamanutse ya navbar yatanzwe cyangwa kugendagenda.

Ibyabaye

Ibintu byose byamanutse birasa kuri .dropdown-menu's element element.

Ibintu byose byamanutse bifite relatedTargetumutungo, agaciro kayo nikintu gihindagurika.

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

UmuzingoSpy umuzingo.js

Urugero muri navbar

Gucomeka kwa ScrollSpy nuguhita uvugurura intego za nav ukurikije umwanya wizingo. Kuzenguruka agace kari munsi ya navbar hanyuma urebe ibyiciro bikora. Ibitonyanga byamanuka bizagaragazwa kandi.

Ikoreshwa

Irasaba umwanya ugereranije

Ntakibazo cyogushira mubikorwa, umuzingo usaba gukoresha ikoreshwa position: relative;mubintu urimo kuneka. Mu bihe byinshi iyi ni <body>. Mugihe uzunguruka ku bindi bitari u <body>, menya neza ko heightwashyizeho kandi ugashyirwa overflow-y: scroll;mubikorwa.

Binyuze mu biranga amakuru

Kugirango wongere byoroshye imyitwarire ya scrollspy kumurongo wawe wo hejuru, ongera kubintu ushaka kuneka data-spy="scroll"(mubisanzwe ibi byaba aribyo <body>). Noneho ongeraho data-targetikiranga hamwe nindangamuntu cyangwa urwego rwibintu byababyeyi .navbigize Bootstrap.

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>

Binyuze kuri JavaScript

Nyuma yo kongera position: relative;muri CSS yawe, hamagara umuzingo ukoresheje JavaScript:

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

Uburyo

.scrollspy('refresh')

Mugihe ukoresheje umuzingo ufatanije no kongera cyangwa gukuraho ibintu muri DOM, uzakenera guhamagara uburyo bushya nka gutya:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-offset="".

Ibyabaye

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

Togglable tabs tab.js

Urugero

Ongeraho byihuse, imbaraga za tab imikorere kugirango uhindurwe unyuze kumurongo wibirimo byaho, ndetse unyuze kumurongo. Utubuto twashyizwe hamwe ntabwo dushyigikiwe.

Ikoreshwa

Gushoboza imbonerahamwe ya tabs ukoresheje JavaScript (buri tab igomba gukenera kugiti cye):

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

Urashobora gukora ama tabs kugiti cye muburyo butandukanye:

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

Markup

Urashobora gukora tab cyangwa ibinini bigenda utanditse JavaScript iyo ari yo yose ugaragaza gusa data-toggle="tab"cyangwa data-toggle="pill"kubintu. Ongeraho ibyiciro navhamwe nav-tabsnamasomo kuri tab bizashyiraul mubikorwa bya Bootstrap , mugihe wongeyeho ibyiciro bizakoresha ibinini .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>

Ingaruka zashize

Kugirango utume gushira, ongera .fadekuri buri .tab-pane. Urupapuro rwa mbere rwa pane rugomba kandi .ingukora ibintu byambere bigaragara.

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

Uburyo

$().tab

Gukora tab element hamwe nibikoresho birimo. Tab igomba kuba ifite a data-targetcyangwa hrefigamije icyerekezo cya kontineri muri DOM. Mu ngero zavuzwe haruguru, tabs ni <a>s hamwe data-toggle="tab"nibiranga.

.tab('show')

Hitamo tab yatanzwe kandi yerekana ibiyirimo. Iyindi tab yose yatoranijwe mbere iba itatoranijwe kandi ibiyirimo bifitanye isano. Garuka kumuhamagara mbere yuko tab pane yerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.tabibyabaye biba).

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

Ibyabaye

Iyo werekanye tab nshya, ibyabaye birashya muburyo bukurikira:

1. hide.bs.tab(kuri tab ikora)
2. show.bs.tab(kuri to-kwerekanwa tab)
3. hidden.bs.tab(kurupapuro rwibanze rukora, kimwe hide.bs.tabnkicyabaye)
4. shown.bs.tab(ku gishya-gikora gusa-cyerekanwe tab, kimwe kimwe show.bs.tabnicyabaye)

Niba nta tab yari isanzwe ikora, noneho hide.bs.tabibyabaye hidden.bs.tabntibizasezererwa.

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

Ibikoresho by'ibikoresho.js

Ahumekewe na jQuery nziza cyane.ipipsy plugin yanditswe na Jason Frame; Ibikoresho ni verisiyo ivuguruye, idashingiye ku mashusho, koresha CSS3 kuri animasiyo, hamwe na data-ibiranga kubika inyito yaho.

Ibikoresho bifite imitwe ya zeru-ndende ntibigaragara.

Ingero

Hisha hejuru yibi bikurikira kugirango urebe ibikoresho:

Igikoresho gihamye

Amahitamo ane arahari: hejuru, iburyo, hepfo, n'ibumoso.

Ibyerekezo bine

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

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

Ikoreshwa

Ibikoresho bya plugin bitanga ibikubiyemo nibiranga kubisabwa, kandi kubisanzwe byerekana ibikoresho nyuma yibintu byabo.

Koresha ibikoresho ukoresheje JavaScript:

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

Markup

Ikimenyetso gisabwa kubikoresho ni dataikiranga gusa no titlekuri element ya HTML wifuza kugira igikoresho. Ikimenyetso cyakozwe mubikoresho byoroshye biroroshye, nubwo bisaba umwanya (kubisanzwe, byashyizweho topna plugin).

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-animation="".

Uburyo

$().tooltip(options)

Ongeraho ibikoresho byifashishwa mugukusanya ibintu.

.tooltip('show')

Yerekana igikoresho cyibikoresho. Garuka kumuhamagara mbere yuko ibikoresho byerekanwe (ni ukuvuga mbere yuko shown.bs.tooltipibyabaye biba). Ibi bifatwa nk "intoki" itera ibikoresho. Ibikoresho bifite imitwe ya zeru ntigaragara.

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

.tooltip('hide')

Hisha igikoresho cyibikoresho. Garuka kumuhamagara mbere yigikoresho cyihishe mubyukuri (nukuvuga mbere yuko hidden.bs.tooltipibyabaye biba). Ibi bifatwa nk "intoki" itera ibikoresho.

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

.tooltip('toggle')

Kuzuza ibikoresho by'ibikoresho. Garuka kumuhamagara mbere yuko ibikoresho byerekanwe cyangwa byihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.tooltipcyangwa hidden.bs.tooltipibyabaye bibaho). Ibi bifatwa nk "intoki" itera ibikoresho.

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

.tooltip('destroy')

Hisha kandi usenye ibikoresho bya element. Ibikoresho bifashisha intumwa (zakozwe hakoreshejwe amahitamoselector ) ntibishobora gusenywa kugiti cyawe kubintu bikomokaho .

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

Ibyabaye

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

Ibyamamare popover.js

Ongeraho uduce duto twibirimo, nkibiri kuri iPad, kubintu byose byo guturamo amakuru yisumbuye.

Popovers imitwe yombi nibirimo byose ni zeru-ndende ntibigaragara.

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

Ingero

Imiterere ihagaze

Amahitamo ane arahari: hejuru, iburyo, hepfo, n'ibumoso.

Kubaho

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

Ibyerekezo bine

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

Kwirukana gukanda

Koresha focusimbarutso kugirango wirukane popovers kurikurikiraho umukoresha akora.

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

Ikoreshwa

Gushoboza popovers ukoresheje JavaScript:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-animation="".

Uburyo

$().popover(options)

Itangiza popovers yikintu cyo gukusanya.

.popover('show')

Yerekana ikintu cya popover. Garuka kumuhamagara mbere yuko popover yerekanwe (nukuvuga mbere yuko shown.bs.popoveribyabaye biba). Ibi bifatwa nk "intoki" itera popover. Popovers imitwe yombi nibirimo byose ni zeru-ndende ntibigaragara.

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

.popover('hide')

Hisha ikintu cya popover. Garuka kumuhamagaye mbere yuko popover ihishwa mubyukuri (nukuvuga mbere yuko hidden.bs.popoveribyabaye biba). Ibi bifatwa nk "intoki" itera popover.

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

.popover('toggle')

Kuzuza ikintu cya popover. Garuka kumuhamagara mbere yuko popover yerekanwe cyangwa yihishe (nukuvuga mbere yuko ibyabaye shown.bs.popovercyangwa hidden.bs.popoveribyabaye bibaho). Ibi bifatwa nk "intoki" itera popover.

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

.popover('destroy')

Hisha kandi usenye ikintu cya popover. Popovers ikoresha delegasiyo (yashizweho hakoreshejwe amahitamoselector ) ntishobora gusenywa kugiti cye kubintu bikomokaho .

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

Ibyabaye

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

Menyesha ubutumwa bwimenyesha.js

Urugero

Ongeraho imikorere yo kwirukana ubutumwa bwose bwamenyeshejwe hamwe niyi plugin.

Iyo ukoresheje .closebuto, igomba kuba umwana wambere wa .alert-dismissiblekandi ntakintu cyanditse gishobora kuza mbere yacyo muri marike.

Ikoreshwa

Gusa ongeraho data-dismiss="alert"kuri bouton yawe yegeranye kugirango uhite utanga integuza yimikorere. Gufunga integuza bikuraho muri DOM.

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

Kugira ngo imenyesha ryawe ukoreshe animasiyo mugihe ufunze, menya neza ko bafite .fadeamasomo .innamasomo yamaze kubakoreshwa.

Uburyo

$().alert()

Kora integuza yumve gukanda ibyabaye kubintu bikomokaho bifite data-dismiss="alert"ikiranga. (Ntabwo ari ngombwa mugihe ukoresheje data-api yo gutangiza-auto.)

$().alert('close')

Funga integuza uyikuye muri DOM. Niba i .fadehamwe .innamasomo ahari kuri element, integuza izashira mbere yuko ikurwaho.

Ibyabaye

Amacomeka ya Bootstrap yerekana ibintu bike byo guhuza ibikorwa.

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

Akabuto ka buto.js

Kora byinshi hamwe na buto. Kugenzura buto ivuga cyangwa gukora amatsinda ya buto kubindi bikoresho nkibikoresho.

Leta

Ongeraho data-loading-text="Loading..."kugirango ukoreshe ibintu biremereye kuri buto.

Iyi mikorere itaye agaciro kuva v3.3.5 kandi yakuweho muri v4.

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

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

Guhindura umwe

Ongeraho data-toggle="button"kugirango utangire guhinduranya kuri buto imwe.

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

Agasanduku / Radio

Ongeraho data-toggle="buttons"kubisobanuro .btn-groupbirimo agasanduku cyangwa radio yinjiza kugirango ushoboze guhindagurika muburyo bwabo.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

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

Uburyo

$().button('toggle')

Toggles gusunika leta. Itanga buto igaragara ko yakoreshejwe.

$().button('reset')

Kugarura buto leta - guhinduranya inyandiko kumyandiko yumwimerere. Ubu buryo ntibusanzwe kandi bugaruka mbere yuko gusubiramo birangira.

$().button(string)

Hindura inyandiko kumakuru ayo ari yo yose asobanuwe inyandiko.

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

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

Gusenyuka gusenyuka.js

Amacomeka yoroheje akoresha urutonde rwamasomo kugirango byoroshye imyitwarire.

Urugero

Kanda buto hepfo kugirango werekane kandi uhishe ikindi kintu ukoresheje impinduka zamasomo:

• .collapseahisha ibirimo
• .collapsingni Byakoreshejwe Mugihe Cyinzibacyuho
• .collapse.inyerekana ibirimo

Urashobora gukoresha umurongo hamwe hrefnibiranga, cyangwa buto hamwe data-targetnibiranga. Muri ibyo bihe byombi, data-toggle="collapse"urasabwa.

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

Urugero

Ongera imyitwarire isanzwe yo gusenyuka kugirango ukore akanya hamwe nibice bigize ibice.

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

Birashoboka kandi guhinduranya .panel-bodys hamwe na .list-groups.

Ikoreshwa

Gusenyuka plugin ikoresha ibyiciro bike kugirango ikemure ibintu biremereye:

• .collapseahisha ibirimo
• .collapse.inyerekana ibirimo
• .collapsingyongeweho iyo inzibacyuho itangiye, ikanakurwaho iyo irangiye

Aya masomo murayasanga muri component-animations.less.

Binyuze mu biranga amakuru

Gusa ongeraho data-toggle="collapse"na a data-targetkubintu kugirango uhite ugenera kugenzura ikintu gishobora kugwa. Ikiranga data-targetcyakira CSS uhitamo kugirango akoreshe gusenyuka kuri. Wemeze kongeramo urwego collapsekubintu bishobora kugwa. Niba wifuza ko byafungura, ongeraho urwego rwinyongera in.

Kugirango wongere imiyoborere isa nitsinda rishinzwe kugenzura kugabanuka, ongeramo amakuru ikiranga data-parent="#selector". Reba kuri demo kugirango ubone ibi mubikorwa.

Binyuze kuri JavaScript

Gushoboza intoki hamwe na:

$('.collapse').collapse()

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-parent="".

Uburyo

.collapse(options)

Koresha ibikubiyemo nkibintu bishobora gusenyuka. Emera amahitamo object.

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

.collapse('toggle')

Kuzuza ikintu gishobora kugwa kugirango werekane cyangwa uhishe. Garuka kumuhamagara mbere yuko ikintu gishobora kugwa cyerekanwe cyangwa cyihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.collapsecyangwa hidden.bs.collapseibyabaye bibaho).

.collapse('show')

Erekana ikintu gishobora kugwa. Garuka kumuhamagara mbere yuko ikintu kigwa cyerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.collapseibyabaye bibaho).

.collapse('hide')

Hisha ikintu gishobora kugwa. Garuka kumuhamagara mbere yuko ibintu bigwa byihishe mubyukuri (nukuvuga mbere yuko hidden.bs.collapseibyabaye biba).

Ibyabaye

Bootstrap yo gusenyuka ibyiciro byerekana ibintu bike byo guhuza ibikorwa.

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

Carousel carousel.js

Igice cya slideshow yo gusiganwa ku magare binyuze mu bintu, nka karuseli. Carousels yatowe ntabwo ishyigikiwe.

Ingero

Mbere Ibikurikira

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

Ibisobanuro byanditse

Ongeraho ibisobanuro kuri slide yawe byoroshye hamwe .carousel-captionnibintu muri byose .item. Shyira hafi ya HTML iyo ari yo yose itabishaka imbere kandi izahita ihuzwa kandi ihindurwe.

Ikimenyetso cya mbere

Nulla vitae elit libero, pharetra augue mollis interdum.

Ikimenyetso cya kabiri

Lorem ipsum dolor icara amet, consectetur adipiscing elit.

Ikimenyetso cya gatatu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Mbere Ibikurikira

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

Ikoreshwa

Karuseli nyinshi

Carousels isaba gukoresha an idkuri kontineri yo hanze (the .carousel) kugirango karuseli igenzure gukora neza. Mugihe wongeyeho karuseli nyinshi, cyangwa mugihe uhinduye karuseli id, menya neza kugenzura ibyerekeranye.

Binyuze mu biranga amakuru

Koresha ibiranga amakuru kugirango ugenzure byoroshye umwanya wa karuseli. data-slideyemera ijambo ryibanze prevcyangwa next, rihindura umwanya uhagaze ugereranije nubu. Ubundi, koresha data-slide-tokunyuza urutonde rwibanze kuri karuseli data-slide-to="2", ihinduranya umwanya uhagaze kumurongo runaka utangirana na 0.

Ikiranga data-ride="carousel"gikoreshwa mukuranga karuseli nka animasiyo itangirira kurupapuro. Ntishobora gukoreshwa ifatanije na (kurenza kandi bitari ngombwa) JavaScript itangizwa ya karuseli imwe.

Binyuze kuri JavaScript

Hamagara karuseli intoki hamwe na:

$('.carousel').carousel()

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-interval="".

Uburyo

.carousel(options)

Itangiza karuseli hamwe nuburyo bwo guhitamo objecthanyuma igatangira gusiganwa ku magare binyuze mubintu.

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

.carousel('cycle')

Amagare anyuze muri karuseli kuva ibumoso ugana iburyo.

.carousel('pause')

Hagarika karuseli gusiganwa ku magare binyuze mu bintu.

.carousel(number)

Kuzenguruka karuseli kumurongo runaka (0 ishingiye, isa na array).

.carousel('prev')

Amagare ku kintu kibanziriza iki.

.carousel('next')

Amagare ku kintu gikurikira.

Ibyabaye

Bootstrap ya karuseli yerekana ibintu bibiri byo guhuza imikorere ya karuseli.

Ibyabaye byombi bifite imitungo yinyongera ikurikira:

• direction: Icyerekezo karuseli iranyerera (haba "left"cyangwa "right").
• relatedTarget: Ikintu cya DOM kirimo kunyerera ahantu nkibintu bikora.

Ibintu byose bya karuseli birasa kuri karuseli ubwayo (ni ukuvuga kuri <div class="carousel">).

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

Umugereka w'umugereka.js

Urugero

Umugereka plugin uhinduranya position: fixed;no kuzimya, wigana ingaruka zabonetse hamwe position: sticky;. Subnavigation iburyo ni demo nzima ya plugin.

Ikoreshwa

Koresha umugereka wa plugin ukoresheje ibiranga data cyangwa intoki hamwe na JavaScript yawe. Muri ibyo bihe byombi, ugomba gutanga CSS kumwanya hamwe nubugari bwibirimo byometseho.

Icyitonderwa: Ntugakoreshe umugereka wongeyeho kubintu bikubiye mubintu bisa nkaho bihagaze, nkibikururwa cyangwa byasunitswe, kubera Safari yerekana amakosa .

Umwanya ukoresheje CSS

Umugereka plugin uhinduranya hagati yamasomo atatu, buriwese uhagarariye leta runaka : .affix, .affix-topna .affix-bottom. Ugomba gutanga imisusire, usibye position: fixed;kuri .affix, kuri aya masomo wenyine (utitaye kuriyi plugin) kugirango ukore imyanya ifatika.

Dore uko plugin ya affix ikora:

1. Gutangira, plugin yongeyeho.affix-top kugirango yerekane ikintu kiri murwego rwo hejuru-rwinshi. Kuri ubu nta mwanya wa CSS usabwa.
2. Kuzenguruka ushize ikintu ushaka gushyirwaho bigomba gukurura nyirizina. Aha niho .affixhasimburwa .affix-topno gushiraho position: fixed;(bitangwa na CSS ya Bootstrap).
3. Niba igice cyo hasi cyasobanuwe, kuzenguruka byashize bigomba gusimburwa .affixna .affix-bottom. Kubera ko offsets itabishaka, gushiraho imwe igusaba gushyiraho CSS ikwiye. Muri iki kibazo, ongeraho position: absolute;igihe bibaye ngombwa. Gucomeka ikoresha amakuru yikiranga cyangwa JavaScript ihitamo kugirango umenye aho washyira element kuva aho.

Kurikiza intambwe yavuzwe haruguru kugirango ushireho CSS yawe muburyo bumwe bwo gukoresha hepfo.

Binyuze mu biranga amakuru

Kugirango byoroshye kongeramo imyitwarire ya affix kubintu byose, ongera gusa data-spy="affix"kubintu ushaka kuneka. Koresha offsets kugirango usobanure igihe cyo guhinduranya pinning yikintu.

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

Binyuze kuri JavaScript

Hamagara plugin ya affix ukoresheje JavaScript:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-offset-top="200".

Uburyo

.affix(options)

Koresha ibikubiyemo nkibirimo. Emera amahitamo object.

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

.affix('checkPosition')

Ongera usubiremo imiterere yumugereka ukurikije ibipimo, umwanya, hamwe nu muzingo wibintu bijyanye. ,,, .affixNibyiciro byongeweho .affix-topcyangwa .affix-bottombivanwe mubirimo byashyizweho ukurikije leta nshya. Ubu buryo bugomba guhamagarwa igihe cyose ibipimo byibirimo byongeweho cyangwa intego yibintu byahinduwe, kugirango hamenyekane neza neza ibirimo byashyizweho.

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

Ibyabaye

Amacomeka ya Bootstrap yerekana ibintu bike byo guhuza ibikorwa bya affix.