Uhlolojikelele

Ngamunye noma ihlanganiswe

Ama-plugin angafakwa ngawodwana (kusetshenziswa *.jsamafayela angawodwana e-Bootstrap), noma wonke ngesikhathi esisodwa (usebenzisa bootstrap.jsnoma i-minified bootstrap.min.js).

Izibaluli zedatha

Ungasebenzisa wonke ama-plugin e-Bootstrap ngokusebenzisa i-markup API ngaphandle kokubhala umugqa owodwa we-JavaScript. Lena i-API yesigaba sokuqala se-Bootstrap futhi kufanele kube ukucabangela kwakho kokuqala lapho usebenzisa i-plugin.

Sekushiwo lokho, kwezinye izimo kungase kufiseleke ukucisha lokhu kusebenza. Ngakho-ke, sinikeza nekhono lokukhubaza i-API yesibaluli sedatha ngokukhulula yonke imicimbi kudokhumenti enezikhala zamagama data-api. Lokhu kubukeka kanje:

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

Okunye, ukuze uqondise i-plugin ethile, vele ufake igama le-plugin njengendawo yegama kanye nendawo yegama yedatha-api kanje:

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

I-Programmatic API

Sikholelwa futhi ukuthi kufanele ukwazi ukusebenzisa wonke ama-plugin e-Bootstrap nge-JavaScript API. Wonke ama-API asesidlangalaleni ayindlela eyodwa, esebenzisekayo, futhi abuyisela iqoqo osekwenziwe ngalo.

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

Zonke izindlela kufanele zamukele into ongakhetha kuyo, iyunithi yezinhlamvu eqondise indlela ethile, noma lutho (okuqalisa i-plugin ngokuziphatha okuzenzakalelayo):

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

I-plugin ngayinye iphinde iveze umakhi wayo ongahluziwe esakhiweni Constructor: $.fn.popover.Constructor. Uma ungathanda ukuthola isibonelo esithile se-plugin, sithole ngokuqondile entweni: $('[rel="popover"]').data('popover').

Izilungiselelo ezizenzakalelayo

Ungashintsha izilungiselelo ezizenzakalelayo ze-plugin ngokulungisa Constructor.DEFAULTSinto ye-plugin:

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

Akukho ukungqubuzana

Kwesinye isikhathi kuyadingeka ukusebenzisa ama-plugin e-Bootstrap nezinye izinhlaka ze-UI. Kulezi zimo, ukungqubuzana kwendawo yamagama kungenzeka ngezikhathi ezithile. Uma lokhu kwenzeka, ungashayela .noConflicti-plugin ofisa ukubuyisela inani layo.

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

Imicimbi

I-Bootstrap inikeza imicimbi yangokwezifiso yezenzo ezihlukile zama-plugin. Ngokuvamile, lezi ziza ngendlela engapheli kanye nenkathi edlule - lapho okungapheli (isb. show) kuqalwa ekuqaleni komcimbi, futhi isimo saso sokuhlanganyela esidlule (isib. shown) siqaliswa lapho kuqedwa isenzo.

Kusukela ngo-3.0.0, yonke imicimbi ye-Bootstrap inezikhala zamagama.

Yonke imicimbi engapheli inikeza preventDefaultukusebenza. Lokhu kunikeza ikhono lokumisa ukwenziwa kwesenzo ngaphambi kokuthi siqale.

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

I-Sanitizer

Amathuluzi nama-Popovers asebenzisa isicoci esakhelwe ngaphakathi ukuze sihlanze izinketho ezamukela i-HTML.

Inani elizenzakalelayo whiteListlilandelayo:

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

Uma ufuna ukwengeza amanani amasha kulokhu okumisiwe whiteListungenza okulandelayo:

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)

Uma ufuna ukweqa isibulali magciwane sethu ngoba ukhetha ukusebenzisa umtapo wolwazi ozinikele, isibonelo DOMPurify , kufanele wenze okulandelayo:

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

Izinombolo zenguqulo

Inguqulo ye-plugin ngayinye ye-Bootstrap's jQuery ingafinyelelwa ngesakhiwo somakhi VERSIONwe-plugin. Isibonelo, nge-plugin yethiphu yamathuluzi:

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

Akukho okubuyela emuva okukhethekile uma i-JavaScript ivaliwe

Ama-plugin e-Bootstrap awabuyeli kahle ikakhulukazi uma i-JavaScript ivaliwe. Uma unendaba nolwazi lomsebenzisi kulesi simo, sebenzisa <noscript>ukuchaza isimo (nokuthi ungayenza kanjani i-JavaScript isebenze kabusha) kubasebenzisi bakho, kanye/noma wengeze okwakho okubuyela emuva ngokwezifiso.

Izinguquko ze -transition.js

Mayelana noshintsho

Ukuze uthole imiphumela elula yoshintsho, faka transition.jskanye eceleni kwamanye amafayela e-JS. Uma usebenzisa i-comiled (noma minified) bootstrap.js, asikho isidingo sokufaka lokhu—sekuvele kukhona.

Yini engaphakathi

I-Transition.js iwumsizi oyisisekelo transitionEndwemicimbi kanye ne-emulator yenguquko ye-CSS. Isetshenziswa amanye ama-plugin ukuhlola ukwesekwa koshintsho lwe-CSS nokubamba izinguquko ezilengayo.

Ikhubaza izinguquko

Izinguquko zingakhutshazwa emhlabeni jikelele kusetshenziswa amazwibela alandelayo e-JavaScript, okumele eze ngemva kokuthi transition.js(noma bootstrap.js, bootstrap.min.jsnjengoba kungaba njalo) isilayishiwe:

$.support.transition = false

Amamodeli modal.js

Ama-modal ayahlelwa, kodwa aguquguqukayo, imiyalo yengxoxo enobuncane bokusebenza obudingekayo kanye nokuzenzakalelayo okuhlakaniphile.

Ngenxa yokuthi i-HTML5 iyichaza kanjani i-semantics yayo, autofocusisibaluli se-HTML asinawo umthelela kumamodeli we-Bootstrap. Ukuze uthole umphumela ofanayo, sebenzisa i-JavaScript yangokwezifiso:

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

Izibonelo

Isibonelo esiqinile

I-modal enikeziwe enesihloko, umzimba, nesethi yezenzo kunyaweni.

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

Idemo ebukhoma

Guqula i-modal usebenzisa i-JavaScript ngokuchofoza inkinobho engezansi. Izoshelela phansi bese ifiphala kusukela phezulu kwekhasi.

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

Osayizi abazikhethela

Amamodeli anosayizi ababili abazikhethela, atholakala ngamakilasi okulungisa azobekwa ku- .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>

Susa ukugqwayiza

Kumamodeli avele avele kunokuba afiphele ukuze abukwe, susa .fadeikilasi kumakhaphu akho e-modal.

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

Ukusebenzisa isistimu yegridi

Ukuze usebenzise isistimu yegridi ye-Bootstrap ngaphakathi kwe-modal, vele usebenzise i-nest .rows ngaphakathi .modal-bodybese usebenzisa amakilasi esistimu yegridi evamile.

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

Ukushintshashintsha kokuqukethwe kwe-modal ngokusekelwe kunkinobho yokuqalisa

Unenqwaba yezinkinobho zonke ezicupha i-modal efanayo, enokuqukethwe okuhluke kancane nje? Sebenzisa event.relatedTargetkanye nezibaluli ze- HTMLdata-* (mhlawumbe nge-jQuery ) ukuze uguqule okuqukethwe kwe-modal kuye ngokuthi iyiphi inkinobho echofozwe. Bona amadokhumenti e-Modal Events ukuze uthole imininingwane yokuthi 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)
})

Ukusetshenziswa

I-plugin ye-modal iguqula okuqukethwe kwakho okufihliwe ngokufunwa, ngezibaluli zedatha noma i-JavaScript. Iphinde yengeze .modal-openekubhaleni phezu <body>kokuziphatha kokuskrola okuzenzakalelayo futhi ikhiqize .modal-backdropukuhlinzeka ngendawo yokuchofoza yokucashisa amamodeli abonisiwe lapho uchofozwa ngaphandle kwe-modal.

Ngezibaluli zedatha

Yenza kusebenze i-modal ngaphandle kokubhala i-JavaScript. Misa data-toggle="modal"into yesilawuli, njengenkinobho, kanye ne-a data-target="#foo"noma href="#foo"ukuze uqondise i-modal ethile ukuze uyiguqule.

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

Nge-JavaScript

Shayela i-modal ene-id myModalenomugqa owodwa we-JavaScript:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-backdrop="".

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

Izindlela

.modal(options)

Yenza okuqukethwe kwakho kusebenze njengemodeli. Yamukela izinketho ozikhethela object.

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

.modal('toggle')

Iguqula ngokwenza i-modal. Ibuyela kofonayo ngaphambi kokuba imodali ikhonjiswe noma ifihlwe (okungukuthi ngaphambi kokuba kwenzeke shown.bs.modalnoma hidden.bs.modalisigameko).

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

.modal('show')

Ivula mathupha i-modal. Ibuyela kofonayo ngaphambi kokuthi imodali ikhonjiswe (okungukuthi ngaphambi kokuba shown.bs.modalumcimbi wenzeke).

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

.modal('hide')

Ifihla i-modal ngokwenza. Ibuyela kofonayo ngaphambi kokuthi i-modal ifihlekile (okungukuthi ngaphambi kokuthi hidden.bs.modalkwenzeke umcimbi).

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

.modal('handleUpdate')

Ilungisa ukuma kwe-modal ukuze imelane nebha yokuskrola uma kwenzeka umuntu evela, okungenza i-modal igxumele kwesokunxele.

Idingeka kuphela lapho ukuphakama kwe-modal kushintsha ngenkathi ivuliwe.

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

Imicimbi

Ikilasi le-modal ye-Bootstrap lidalula imicimbi embalwa ukuze ixhume ekusebenzeni kwe-modal.

Yonke imicimbi ye-modal ixoshwa ku-modal ngokwayo (okungukuthi ku- <div class="modal">).

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

Okwehliswayo okwehliswayo.js

Izibonelo

Engeza amamenyu okwehlayo cishe kunoma yini enale plugin elula, okuhlanganisa i-navbar, amathebhu, namaphilisi.

Ngaphakathi kwe-navbar

Ngaphakathi kwamaphilisi

Ukusetshenziswa

Ngezibaluli zedatha noma i-JavaScript, i-plugin eyehlayo iguqula okuqukethwe okufihliwe (amamenyu okwehliswayo) ngokuguqula .openikilasi entweni yohlu lwabazali.

Kumadivayisi eselula, ukuvula okwehliswayo kunezela .dropdown-backdropnjengendawo yokuthepha yokuvala amamenyu okwehlayo lapho uthepha ngaphandle kwemenyu, imfuneko yosekelo olufanele lwe-iOS. Lokhu kusho ukuthi ukusuka kumenyu eyehlayo evuliwe uye kwehlukile kumenyu yokudonsela phansi kudinga ukuthepha okwengeziwe kuselula.

Qaphela: data-toggle="dropdown"Isibaluli kuthenjelwe kuso ekuvaleni amamenyu okwehlayo ezingeni lesicelo, ngakho-ke kuwumqondo omuhle ukusisebenzisa njalo.

Ngezibaluli zedatha

Engeza data-toggle="dropdown"kusixhumanisi noma inkinobho ukuze uguqule okwehliswayo.

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

Ukuze ugcine ama-URL eqinile ngezinkinobho zesixhumanisi, sebenzisa data-targetisibaluli esikhundleni se- 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>

Nge-JavaScript

Shayela okwehliswayo nge-JavaScript:

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

Izinketho

Lutho

Izindlela

$().dropdown('toggle')

Iguqula imenyu eyehlayo ye-navbar enikeziwe noma ukuzulazula okunethebhu.

Imicimbi

Yonke imicimbi eyehliswayo ixoshwa engxenyeni .dropdown-menuengumzali.

Yonke imicimbi yokudonsela phansi inendawo relatedTarget, inani layo eliyi-elementi yehange yokuguqula.

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

I-ScrollSpy scrollspy.js

Isibonelo ku-navbar

I-plugin ye-ScrollSpy ingeyokuvuselela ngokuzenzakalelayo okuhlosiwe kwe-nav ngokusekelwe endaweni yokuskrola. Skrola indawo engezansi kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo. Izinto ezincanyana zokwehla zizogqanyiswa nazo.

Ukusetshenziswa

Idinga ukuma okuhlobene

Kungakhathaliseki ukuthi iyiphi indlela yokuqalisa, i-scrollspy idinga ukusetshenziswa position: relative;kwento oyihlolayo. Ezimweni eziningi lokhu kuyi- <body>. Lapho uskrola ezintweni ngaphandle kwe- <body>, qiniseka ukuthi heightunesethi futhi overflow-y: scroll;uyasebenza.

Ngezibaluli zedatha

Ukwengeza kalula impatho ye-scrollspy ekuzulazuleni kwe data-spy="scroll"-topbar yakho, engeza entweni ofuna ukuyihlola (imvamisa lokhu kuzoba yi- <body>). Bese wengeza data-targetisibaluli nge-ID noma isigaba sesici esingumzali sanoma iyiphi .navingxenye ye-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>

Nge-JavaScript

Ngemva kokungeza position: relative;ku-CSS yakho, shayela i-scrollspy nge-JavaScript:

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

Izindlela

.scrollspy('refresh')

Uma usebenzisa i-scrollspy ngokuhambisana nokwengeza noma ukususa izakhi ku-DOM, uzodinga ukushayela indlela yokuvuselela kanje:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-offset="".

Imicimbi

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

Amathebhu aguqulekayo tab.js

Amathebhu ayisibonelo

Engeza ukusebenza kwethebhu esheshayo, eguqukayo ukuze udlule kumafasitelana wokuqukethwe kwasendaweni, ngisho namamenyu okwehlayo. Amathebhu afakwe isidleke awasekelwe.

Ukusetshenziswa

Nika amandla amathebhu aphathekayo nge-JavaScript (ithebhu ngayinye idinga ukwenziwa isebenze ngayodwa):

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

Ungavula amathebhu ngamanye ngezindlela ezimbalwa:

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

Imakhaphu

Ungakwazi ukuvula ithebhu noma ukuzulazula kwephilisi ngaphandle kokubhala noma iyiphi i-JavaScript ngokucacisa data-toggle="tab"noma ngento data-toggle="pill"ethile. Ukwengeza i- navkanye nav-tabsnamakilasi kuthebhu ulkuzosebenzisa isitayela sethebhu ye-Bootstrap , kuyilapho kwengeza ethi navkanye nav-pillsnamakilasi kuzosebenzisa isitayela sephilisi .

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

Ukuze wenze amathebhu afiphale, .fadeengeza .tab-pane. Ifasitelana lethebhu yokuqala kufanele futhi .inlenze okuqukethwe kokuqala kubonakale.

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

Izindlela

$().tab

Yenza i-elementi yethebhu isebenze nesiqukathi sokuqukethwe. Ithebhu kufanele ibe no-a data-targetnoma i href-container node ku-DOM. Kulezi zibonelo ezingenhla, amathebhu angu- <a>s data-toggle="tab"anezibaluli.

.tab('show')

Ikhetha ithebhu enikeziwe futhi ibonise okuqukethwe kwayo okuhlobene. Noma iyiphi enye ithebhu eyayikhethwe ngaphambilini iyayekwa ukukhethwa futhi okuqukethwe kwayo okuhlobene kuyafihlwa. Ibuyela kofonayo ngaphambi kokuba kuboniswe ifasitelana lethebhu (okungukuthi ngaphambi kokuba shown.bs.tabkwenzeke umcimbi).

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

Imicimbi

Uma ubonisa ithebhu entsha, izehlakalo zivutha ngokulandelana okulandelayo:

1. hide.bs.tab(kuthebhu esebenzayo yamanje)
2. show.bs.tab(kuthebhu ezoboniswa)
3. hidden.bs.tab(kuthebhu esebenzayo yangaphambilini, efanayo hide.bs.tabneyomcimbi)
4. shown.bs.tab(kuthebhu esanda kuboniswa, efanayo show.bs.tabneyomcimbi)

Uma ingekho ithebhu ebivele iyasebenza, kuzosho ukuthi i- hide.bs.tabnemicimbi hidden.bs.tabngeke kuxoshwe.

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

Ithulithiphu.js _

Igqugquzelwe i-plugin enhle kakhulu ye-jQuery.tipsy ebhalwe ngu-Jason Frame; Amathuluzi ayinguqulo ebuyekeziwe, engancikile ezithombeni, sebenzisa i-CSS3 ukuze uthole ukugqwayiza, kanye nezibaluli zedatha zokulondoloza isihloko sendawo.

Amathuluzi anezihloko zobude obunguziro awaboniswa.

Izibonelo

Hambisa phezulu kwezixhumanisi ezingezansi ukuze ubone amathuluzi:

Ithulithiphu emile

Kunezinketho ezine ezitholakalayo: kuqondaniswe phezulu, kwesokudla, phansi, nesobunxele.

Izikhombisi-ndlela ezine

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

Ukusetshenziswa

I-plugin yethulithiphu ikhiqiza okuqukethwe kanye nemakhaphu ngokufunwayo, futhi ngokuzenzakalelayo beka izeluleko zamathuluzi ngemva kwesici sokucupha.

Qalisa ithiphu yamathuluzi nge-JavaScript:

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

Imakhaphu

Imakhaphu edingekayo yethiphu yamathuluzi iyisibaluli kuphela datafuthi titleengxenyeni ye-HTML ofisa ukuba nayo ithiphu. Imakhaphu ekhiqiziwe yethiphu yamathuluzi ilula, nakuba idinga indawo (ngokuzenzakalelayo, isethwe topyi-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>

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-animation="".

Izindlela

$().tooltip(options)

Inamathisela isibambi sethulithiphu eqoqweni lesici.

.tooltip('show')

Iveza ithulithiphu yento ethile. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi iboniswe (okungukuthi ngaphambi kokuthi shown.bs.tooltipkwenzeke umcimbi). Lokhu kuthathwa njengokucupha "okuzenzela" kwethiphu yamathuluzi. Amathuluzi anezihloko zobude obunguziro awaboniswa.

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

.tooltip('hide')

Ifihla ithiphu yento ethile. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi ifihlekile (okungukuthi ngaphambi kokuthi hidden.bs.tooltipkwenzeke umcimbi). Lokhu kuthathwa njengokucupha "okuzenzela" kwethiphu yamathuluzi.

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

.tooltip('toggle')

Iguqula ithiphu lethuluzi le-elementi. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi iboniswe noma ifihlwe (okungukuthi ngaphambi kokuthi kwenzeke shown.bs.tooltipnoma hidden.bs.tooltipkwenzeke). Lokhu kuthathwa njengokucupha "okuzenzela" kwethiphu yamathuluzi.

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

.tooltip('destroy')

Ifihla futhi ibhubhise ithiphu yento ethile. Amathuluzi asebenzisa ukuthunyelwa (okudalwe kusetshenziswa inkethoselector ) awakwazi ukucekelwa phansi ngamanye ezintweni ezibangela inzalo .

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

Imicimbi

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

I-Popovers popover.js

Engeza izimbondela ezincane zokuqukethwe, njengalezo eziku-iPad, kunoma iyiphi into ukuze uthole ulwazi lwesibili lwezindlu.

Ama-Popovers kokubili isihloko nokuqukethwe kwawo kunguziro-ubude akukaze kuboniswe.

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

Izibonelo

I-popover emile

Kunezinketho ezine ezitholakalayo: kuqondaniswe phezulu, kwesokudla, phansi, nesobunxele.

Idemo ebukhoma

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

Izikhombisi-ndlela ezine

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

Cashisa ngokuchofoza okulandelayo

Sebenzisa i- focustrigger ukuze ucashise ama-popover ngokuchofoza okulandelayo okwenziwa umsebenzisi.

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

Ukusetshenziswa

Nika amandla ama-popovers nge-JavaScript:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-animation="".

Izindlela

$().popover(options)

Iqalisa ama-popover eqoqo le-elementi.

.popover('show')

Iveza i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover iboniswe (okungukuthi ngaphambi kokuba shown.bs.popoverumcimbi wenzeke). Lokhu kuthathwa "njengokwenza ngesandla" ukucupha kwe-popover. Ama-Popovers kokubili isihloko nokuqukethwe kwawo kunguziro-ubude akukaze kuboniswe.

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

.popover('hide')

Ifihla i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover ifihlekile (okungukuthi ngaphambi kokuba hidden.bs.popoverumcimbi wenzeke). Lokhu kuthathwa "njengokwenza ngesandla" ukucupha kwe-popover.

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

.popover('toggle')

Iguqula i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover iboniswe noma ifihlwe (okungukuthi ngaphambi kokuthi kwenzeke shown.bs.popovernoma hidden.bs.popoverkwenzeke). Lokhu kuthathwa "njengokwenza ngesandla" ukucupha kwe-popover.

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

.popover('destroy')

Ifihla futhi icekele phansi i-popover yento. Ama-Popovers asebenzisa ukuthunyelwa (okudalwe kusetshenziswa inkethoselector ) awakwazi ukucekelwa phansi ngamanye ezintweni ezibangela inzalo .

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

Imicimbi

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

Imiyalezo yokuxwayisa alert.js

Izexwayiso eziyisibonelo

Engeza umsebenzi wokucashisa kuyo yonke imilayezo yesixwayiso enale plugin.

Uma usebenzisa .closeinkinobho, kufanele kube ingane yokuqala .alert-dismissiblefuthi akukho okuqukethwe kombhalo okungafika ngaphambi kwayo kumakhaphu.

Ukusetshenziswa

Vele ungeze data-dismiss="alert"enkinobheni yakho yokuvala ukuze unikeze ngokuzenzakalelayo ukusebenza kwesexwayiso sokuvala. Ukuvala isexwayiso kusisusa ku-DOM.

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

Ukuze izexwayiso zakho zisebenzise ukugqwayiza lapho uvala, qiniseka ukuthi zinayo .fadekanye .innamakilasi asesetshenzisiwe kuzo.

Izindlela

$().alert()

Yenza isixwayiso silalele imicimbi yokuchofoza ezintweni eziphumayo data-dismiss="alert"ezinesibaluli. (Akudingekile uma usebenzisa i-auto-initialization ye-data-api.)

$().alert('close')

Ivala isexwayiso ngokusisusa ku-DOM. Uma i- .fadekanye .innamakilasi ekhona engxenyeni, isexwayiso sizofiphala ngaphambi kokuthi sisuswe.

Imicimbi

I-plugin yesixwayiso ye-Bootstrap iveza imicimbi embalwa ukuze ixhumeke ekusebenzeni kwesixwayiso.

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

Izinkinobho.js _

Yenza okwengeziwe ngezinkinobho. Inkinobho yokulawula ithi noma dala amaqembu ezinkinobho zezingxenye ezengeziwe njengamabha wamathuluzi.

Okushoyo

Engezadata-loading-text="Loading..." ukuze usebenzise isimo sokulayisha enkinobho.

Lesi sici sihoxisiwe kusukela ku-v3.3.5 futhi sikhishiwe ku-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>

Ukuguqula okukodwa

Engeza data-toggle="button"ukuze wenze kusebenze ukuguqula inkinobho eyodwa.

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

Ibhokisi lokuhlola / Umsakazo

Engeza data-toggle="buttons"ebhokisini .btn-grouplokuhlola eliqukethe noma okokufaka kwerediyo ukuze unike amandla ukuguqula izitayela ezilandelanayo.

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

Izindlela

$().button('toggle')

Iguqula isimo sohlelo. Inikeza inkinobho ukubonakala sengathi yenziwe yasebenza.

$().button('reset')

Isetha kabusha isimo senkinobho - ishintsha umbhalo ube umbhalo wokuqala. Le ndlela ayivumelanisi futhi ibuyela ngaphambi kokuthi ukusetha kabusha kuqedwe ngempela.

$().button(string)

Ishintsha umbhalo ube nanoma yisiphi isimo sombhalo esichazwe yidatha.

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

Goqa i- collapse.js

I-plugin eguquguqukayo esebenzisa idlanzana lamakilasi ukuze kube lula ukuguqula ukuziphatha.

Isibonelo

Chofoza izinkinobho ezingezansi ukuze ubonise futhi ufihle enye into ngezinguquko zekilasi:

• .collapseifihla okuqukethwe
• .collapsingisetshenziswa ngesikhathi soshintsho
• .collapse.inikhombisa okuqukethwe

Ungasebenzisa isixhumanisi hrefesinesibaluli, noma inkinobho data-targetenesibaluli. Kuzo zombili izimo, data-toggle="collapse"kuyadingeka.

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

Isibonelo se-accordion

Nweba ukuziphatha kokugoqa okuzenzakalelayo ukuze udale i-accordion nengxenye yephaneli.

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

Kungenzeka futhi ukushintshanisa u- .panel-bodys no- .list-groups.

Ukusetshenziswa

I-plugin yokugoqa isebenzisa amakilasi ambalwa ukuphatha ukuphakamisa okusindayo:

• .collapseifihla okuqukethwe
• .collapse.inikhombisa okuqukethwe
• .collapsingyengezwa lapho inguquko iqala, futhi ikhishwe lapho iqeda

Lawa makilasi angatholakala ku component-animations.less.

Ngezibaluli zedatha

Vele ungeze data-toggle="collapse"futhi u-a entweni data-targetukuze unikeze ngokuzenzakalelayo ukulawula kwento egoqekayo. Isibaluli data-targetsamukela isikhethi se-CSS ongafaka kuso ukugoqa. Qiniseka ukuthi ungeza ikilasi collapseku-elementi egoqekayo. Uma ungathanda ukuthi ivuleke ngokuzenzakalelayo, engeza iklasi elengeziwe in.

Ukuze ungeze ukuphathwa kweqembu okufana ne-accordion kusilawuli esigoqekayo, engeza isibaluli sedatha data-parent="#selector". Bheka idemo ukuze ubone lokhu kusebenza.

Nge-JavaScript

Nika amandla ngokwenza nge:

$('.collapse').collapse()

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-parent="".

Izindlela

.collapse(options)

Yenza okuqukethwe kwakho kusebenze njengento egoqekayo. Yamukela izinketho ozikhethela object.

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

.collapse('toggle')

Iguqula into egoqekayo ukuze iboniswe noma ifihlwe. Ibuyela kofonayo ngaphambi kokuba into egoqekayo iboniswe noma ifihlwe (okungukuthi ngaphambi kokuba kwenzeke shown.bs.collapsenoma hidden.bs.collapseisigameko).

.collapse('show')

Ibonisa into egoqekayo. Ibuyela kofonayo ngaphambi kokuba into egoqekayo iboniswe (okungukuthi ngaphambi kokuba shown.bs.collapsekwenzeke umcimbi).

.collapse('hide')

Ifihla into egoqekayo. Ibuyela kofonayo ngaphambi kokuba into egoqekayo ifihleke (okungukuthi ngaphambi kokuthi hidden.bs.collapsekwenzeke umcimbi).

Imicimbi

Ikilasi lokugoqa le-Bootstrap lidalula imicimbi embalwa ukuze ixhumeke ekusebenzeni kokugoqa.

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

I-carousel carousel.js

Ingxenye yombukiso wesilayidi yokuhamba ngebhayisikili ngokusebenzisa izakhi, njenge-carousel. Ama-carousel anesidleke awasekelwe.

Izibonelo

Ngaphambilini Olandelayo

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

Amazwibela okuzikhethela

Engeza amagama-ncazo kumaslayidi akho kalula nge- .carousel-captionelementi ngaphakathi kwanoma iyiphi .item. Beka cishe noma iyiphi i-HTML ongayikhetha phakathi lapho futhi izoqondaniswa ngokuzenzakalelayo futhi ifomethwe.

Ilebula yesilayidi sokuqala

I-Nulla vitae elit libero, i-pharetra augue mollis interdum.

Ilebula yesilayidi sesibili

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ilebula yesilayidi yesithathu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Ngaphambilini Olandelayo

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

Ukusetshenziswa

Ama-carousels amaningi

Ama-carousel adinga ukusetshenziswa idkwesiqukathi esingaphandle kakhulu (the .carousel) ukuze izilawuli ze-carousel zisebenze kahle. Uma wengeza ama-carousel amaningi, noma uma ushintsha i-carousel's id, qiniseka ukuthi ubuyekeza izilawuli ezifanele.

Ngezibaluli zedatha

Sebenzisa izibaluli zedatha ukuze ulawule kalula ukuma kwe-carousel. data-slideyamukela amagama angukhiye prevnoma next, eshintsha indawo yesilayidi ngokuhlobene nendawo yaso yamanje. Kungenjalo, sebenzisa data-slide-toukudlulisa inkomba yesilayidi eluhlaza ku-carousel data-slide-to="2", eshintsha indawo yesilayidi ibe inkomba ethile eqala ngo- 0.

Isibaluli data-ride="carousel"sisetshenziselwa ukumaka i-carousel njengokugqwayiza kusukela ekulayishweni kwekhasi. Ngeke isetshenziswe kuhlanganiswe (nokungadingeki nokungadingeki) ukuqaliswa okucacile kwe-JavaScript kwe-carousel efanayo.

Nge-JavaScript

Shayela i-carousel ngokwenza:

$('.carousel').carousel()

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-interval="".

Izindlela

.carousel(options)

Iqalisa i-carousel ngezinketho zokuzithandela objectfuthi iqala ukuhamba ngebhayisikili ezintweni.

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

.carousel('cycle')

Izungeza izinto ze-carousel ukusuka kwesokunxele kuye kwesokudla.

.carousel('pause')

Imisa i-carousel ekuhambeni ngebhayisikili ezintweni.

.carousel(number)

Ibiyela i-carousel kuhlaka oluthile (okusekelwe ngo-0, okufana namalungu afanayo).

.carousel('prev')

Imijikelezo eya entweni edlule.

.carousel('next')

Imijikelezo eya entweni elandelayo.

Imicimbi

Ikilasi le-carousel le-Bootstrap lidalula imicimbi emibili yokuxhunywa ekusebenzeni kwe-carousel.

Yomibili imicimbi inezimpawu ezengeziwe ezilandelayo:

• direction: Isiqondiso lapho i-carousel ishelela khona ( "left"noma "right").
• relatedTarget: I-elementi ye-DOM eslayishwa endaweni njengento esebenzayo.

Yonke imicimbi ye-carousel idutshulwa ku-carousel ngokwayo (okungukuthi ku- <div class="carousel">).

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

Faka i-affix.js

Isibonelo

I-plugin ye-affix ishintsha ivule position: fixed;futhi ivale, ilingise umphumela otholakala nge- position: sticky;. Ukuzulazula okungaphansi kwesokudla kuyidemo ebukhoma ye-plugin ye-affix.

Ukusetshenziswa

Sebenzisa i-plugin yokunamathisela usebenzisa izibaluli zedatha noma ngokwenza nge-JavaScript yakho.Kuzo zombili izimo, kufanele unikeze i-CSS yokuma nobubanzi bokuqukethwe kwakho okunamathiselwe.

Qaphela: Ungasebenzisi i-plugin yokunamathisela entweni equkethwe endaweni ebekwe ngokuqhathaniswa, njengekholomu edonsiwe noma ephushiwe, ngenxa yesiphazamisi se-Safari . .

Ukuma nge-CSS

I-plugin yokunamathisela ishintsha phakathi kwamakilasi amathathu, ngalinye limele isimo esithile: .affix, .affix-top, kanye .affix-bottom. Kufanele unikeze izitayela, ngaphandle position: fixed;kokuvula.affix , kulawa makilasi ngokwakho (ozimele kule plugin) ukuze uphathe izikhundla zangempela.

Nansi indlela i-plugin ye-affix esebenza ngayo:

1. Ukuze uqale, i-plugin iyengeza.affix-top ukukhombisa ukuthi i-elementi isendaweni yayo ephezulu kakhulu. Kuleli qophelo akukho ukuma kwe-CSS okudingekayo.
2. Ukuskrola udlule i-elementi ofuna inamathiselwe kufanele kuqalise ukunamathisela kwangempela. Lapha yilapho .affixkungena esikhundleni .affix-topbese kumiswa position: fixed;(kuhlinzekwe yi-Bootstrap's CSS).
3. Uma i-bottom offset ichazwa, ukuskrola udlule kufanele kuthathelwe .affixindawo .affix-bottom. Njengoba ama-offset engokuzithandela, ukusetha okukodwa kudinga ukuthi usethe i-CSS efanele. Kulokhu, engeza position: absolute;uma kunesidingo. I-plugin isebenzisa isibaluli sedatha noma inketho ye-JavaScript ukuze inqume ukuthi ibekwe kuphi i-elementi ukusuka lapho.

Landela lezi zinyathelo ezingenhla ukuze usethe i-CSS yakho kunoma iyiphi yezinketho zokusetshenziswa ezingezansi.

Ngezibaluli zedatha

Ukwengeza kalula impatho yokunamathisela kunoma iyiphi i-elementi, vele ungezedata-spy="affix" ku-elementi ofuna ukuyihlola. Sebenzisa ama-offsets ukuchaza ukuthi uguqula nini ukuphina kwento.

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

Nge-JavaScript

Shayela i-plugin ye-affix nge-JavaScript:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-offset-top="200".

Izindlela

.affix(options)

Yenza okuqukethwe kwakho kusebenze njengokuqukethwe okunamathiselwe. Yamukela izinketho ozikhethela object.

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

.affix('checkPosition')

Ibala kabusha isimo se-affix ngokusekelwe kubukhulu, indawo, kanye nendawo yokuskrola yezinto ezifanele. I- .affix, .affix-top, kanye .affix-bottomnamakilasi engezwa noma asuswa kokuqukethwe okunamathiselwe kuye ngokwesimo esisha. Le ndlela idinga ukubizwa noma nini lapho ubukhulu bokuqukethwe okunamathiselwe noma into eqondiwe ishintshwa, ukuze kuqinisekiswe ukuma okulungile kokuqukethwe okunamathiselwe.

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

Imicimbi

I-plugin yokunamathisela ye-Bootstrap iveza imicimbi embalwa ukuze ixhumeke ekusebenzeni kwe-affix.