Isishwankathelo

Umntu ngamnye okanye uqokelelwe

Iiplagi zingabandakanywa ngabanye (usebenzisa iifayile zomntu ngamnye *.jszeBootstrap), okanye zonke ngaxeshanye (usebenzisa bootstrap.jsokanye iminified bootstrap.min.js).

Iimpawu zedatha

Ungasebenzisa zonke iiplagi ze-Bootstrap ngaphandle kwe-API yokuphawula ngaphandle kokubhala umgca omnye weJavaScript. Le yiBootstrap yodidi lokuqala lwe-API kwaye kufuneka ibe yingqwalasela yakho yokuqala xa usebenzisa iplagi.

Oko kwathiwa, kwezinye iimeko kunokunqweneleka ukucima lo msebenzi. Ngoko ke, sikwabonelela ngokukwazi ukukhubaza uphawu loyelelwano lwedatha ye-API ngokukhulula zonke iziganeko kuxwebhu olunezithuba zamagama data-api. Oku kukhangeleka ngolu hlobo:

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

Kungenjalo, ukujolisa iplagin ethile, faka nje igama leplagi njengendawo yegama kunye ne-data-api namespace efana nale:

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

Programmatic API

Sikwakholelwa ukuba kufuneka ukwazi ukusebenzisa zonke iiplagi zeBootstrap ngeJavaScript API. Zonke ii-API zikawonke-wonke zinye, iindlela ezibolekwayo, kwaye zibuyisela ingqokelela eyenziwayo.

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

Zonke iindlela kufuneka zamkele into ekhethiweyo yeenketho, umtya ojolise kwindlela ethile, okanye akukho nto (eqalisa iplagin ngokuziphatha okungagqibekanga):

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

I-plugin nganye iphinda iveze umakhi wayo ekrwada Constructorkwipropati: $.fn.popover.Constructor. Ukuba ungathanda ukufumana umzekelo othile weplagi, yifumane ngokuthe ngqo kwinto: $('[rel="popover"]').data('popover').

Useto oluhlala lukhona

Ungatshintsha useto olungagqibekanga lweplagi ngokulungisa Constructor.DEFAULTSinto yeplagin:

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

Akukho ngquzulwano

Ngamanye amaxesha kuyimfuneko ukusebenzisa iiplagi ze-Bootstrap kunye nezinye izikhokelo ze-UI. Kwezi meko, ukungqubana kwesithuba segama kunokwenzeka ngamanye amaxesha. Ukuba oku kuyenzeka, .noConflictungafowunela iplagin onqwenela ukubuyisela ixabiso layo.

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

Iziganeko

I-Bootstrap ibonelela ngeziganeko zesiko kwiintshukumo ezininzi ezizodwa zeeplagi. Ngokuqhelekileyo, ezi ziza ngendlela engapheliyo kunye neyexesha elidlulileyo - apho i-infinitive (umz. show) iqaliswa ekuqaleni kwesiganeko, kwaye imo yaso yexesha elidlulileyo ye-participle (umz. shown) ivuselelwe ekugqityweni kwesenzo.

Ukusukela nge-3.0.0, zonke iziganeko ze-Bootstrap zinezithuba zamagama.

Zonke iziganeko ezingapheliyo zibonelela preventDefaultngokusebenza. Oku kubonelela ukukwazi ukumisa ukuphunyezwa kwesenzo phambi kokuba siqale.

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

Isicoci

Iingcebiso zezixhobo kunye neePopovers zisebenzisa isicoci esakhelwe ngaphakathi ukucoca iinketho ezamkela iHTML.

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

Ukuba ufuna ukongeza amaxabiso amatsha koku kungagqibekanga whiteListungenza oku kulandelayo:

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)

Ukuba ufuna ukudlula kwi-sanitizer yethu kuba ukhetha ukusebenzisa ithala leencwadi elizinikeleyo, umzekelo DOMpurify , kuya kufuneka wenze oku kulandelayo:

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

Amanani enguqulelo

Uguqulelo lweplagi nganye yeBootstrap's jQuery inokufikelelwa VERSIONngepropati yomakhi weplagi. Umzekelo, kwi-plugin yengcebiso yesixhobo:

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

Akukho mpazamo zikhethekileyo xa iJavaScript ivaliwe

Iiplagi zeBootstrap azibuyeli ngasemva ngokukodwa xa iJavaScript ivaliwe. Ukuba unenkathalo ngamava omsebenzisi kule meko, sebenzisa <noscript>ukuchaza imeko (kunye nendlela yokwenza kwakhona iJavaScript) kubasebenzisi bakho, kunye/okanye ukongeza okwakho ukusilela.

Iinguqu zenguqu.js

Malunga neenguqu

Ngeziphumo ezilula zotshintsho, bandakanya transition.jskanye ecaleni kwezinye iifayile zeJS. Ukuba usebenzisa i compiled (okanye minified) bootstrap.js, akukho mfuneko yokubandakanya oku-sele kukho.

Yintoni ngaphakathi

I-Transition.js ingumncedi osisiseko wemisitho transitionEndkunye ne-emulator yenguqu ye-CSS. Isetyenziswa zezinye iiplagi ukukhangela inkxaso yenguqu yeCSS nokubamba iinguqu ezijingayo.

Ikhubaza utshintsho

Utshintsho lunokuvalwa kwihlabathi jikelele kusetyenziswa le JavaScript ilandelayo ya snippet, ekufuneka ize emva kokuba transition.js(okanye bootstrap.js, bootstrap.min.jsnjengoko kusenokuba njalo) ilayishiwe:

$.support.transition = false

Iimodeli zemodal.js

Iimodyuli zilungelelanisiwe, kodwa zibhetyebhetye, iingxoxo zencoko yababini ezinobuncinci obufunekayo obufunekayo kunye nokungagqibekanga okuhlakaniphile.

Ngenxa yendlela i-HTML5 eyichaza ngayo i-semantics yayo, uphawu lwe- autofocusHTML alunampembelelo kwiimodyuli zeBootstrap. Ukufezekisa umphumo ofanayo, sebenzisa iJavaScript yesiko:

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

Imizekelo

Umzekelo omileyo

Imodali enikezelweyo enesihloko, umzimba, kunye neseti yezenzo kumbhalo osemazantsi.

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

Guqula imodal usebenzisa iJavaScript ngokucofa iqhosha elingezantsi. Iza kutyibilika ezantsi kwaye iphele ukusuka phezulu ephepheni.

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

Iisayizi ozikhethelayo

Iimodyuli zineesayizi ezimbini ozikhethelayo, ezifumaneka ngeeklasi zesilungisi eziza kubekwa kwi .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 oopopayi

Kwiimodyuli ezibonakala ngokulula kunokuba ziphele ukubonwa, susa .fadeiklasi kuphawu lwakho lwemodal.

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

Ukusebenzisa inkqubo yegridi

Ukuthatha ithuba lendlela yendlela yeBootstrap ngaphakathi kwemodal, indlwane nje .rows ngaphakathi .modal-bodykwaye emva koko usebenzise iiklasi zendlela yegridi eqhelekileyo.

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

Ukwahluka komxholo wemodyuli esekwe kwiqhosha letrigger

Unenqwaba yamaqhosha athi onke avuse indlela enye, enemixholo eyahlukileyo nje kancinane? Sebenzisa event.relatedTargetkunye neempawu zeHTML (data-* ngokunokwenzeka ngejQuery ) ukwahlula imixholo yemodal ngokuxhomekeke ekubeni leliphi iqhosha elicofiweyo. Bona amaxwebhu eMisitho yeModal ngeenkcukacha 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)
})

Ukusetyenziswa

I-plugin ye-modal iguqula umxholo wakho ofihliweyo kwimfuno, ngeempawu zedatha okanye iJavaScript. Yongeza kwakhona .modal-openkwi- <body>override default scrolling behavior kwaye yenza i- .modal-backdropa ukunika indawo yokucofa ukugxotha iimodyuli ezibonisiweyo xa ucofa ngaphandle kwemodali.

Ngeempawu zedatha

Vula imodali ngaphandle kokubhala iJavaScript. Cwangcisa data-toggle="modal"isiqalelo somlawuli, njengeqhosha, kunye ne data-target="#foo"okanye href="#foo"ukujolisa kwindlela ethile yokuguqula.

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

NgeJavaScript

Fowunela i-modal ene-id myModalngomgca omnye weJavaScript:

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

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-backdrop="".

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

Iindlela

.modal(options)

Yenza umxholo wakho ube yimodali. Yamkela iinketho ozikhethelayo object.

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

.modal('toggle')

Yenza imodal ngesandla. Ubuyela kumnxeba phambi kokuba imodali iboniswe okanye ifihliwe (okt phambi kokuba isiganeko shown.bs.modalokanye hidden.bs.modalisiganeko senzeke).

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

.modal('show')

Ivula imodali ngesandla. Ubuyela kumnxeba phambi kokuba imodali iboniswe (okt phambi kokuba shown.bs.modalisiganeko senzeke).

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

.modal('hide')

Ufihla imodali ngesandla. Ibuyisela kumnxebi phambi kokuba imodali ifihlwe (okt phambi kokuba hidden.bs.modalisiganeko senzeke).

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

.modal('handleUpdate')

Lungisa ukuma kwemodali ukuchasana nebar yokuskrola ukuba kunokwenzeka umntu avele, nto leyo enokwenza ukuba imodali itsibe ekhohlo.

Ifuneka kuphela xa ukuphakama kwemodal kutshintsha ngelixa ivuliwe.

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

Iziganeko

Iklasi ye-modal ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa ekusebenzeni kwe-modal.

Zonke iziganeko zemodal ziyagxothwa kwimodali ngokwayo (okt kwi <div class="modal">).

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

Iidropdowns dropdown.js

Imizekelo

Yongeza imenyu eyehlayo phantse kuyo yonke into eneplagi elula, kubandakanya i-navbar, iithebhu, kunye neepilisi.

Ngaphakathi kwenavbar

Ngaphakathi kweepilisi

Ukusetyenziswa

Ngeempawu zedatha okanye iJavaScript, iplagin eyehlayo iguqula umxholo ofihliweyo (imenyu eyehlayo) ngokuguqula .openiklasi kwizinto zoluhlu lwabazali.

Kwizixhobo eziphathwayo, ukuvula i-dropdown yongeza .dropdown-backdropnjengendawo yempompo yokuvala imenyu eyehlayo xa ucofa ngaphandle kwemenyu, imfuneko yenkxaso efanelekileyo ye-iOS. Oku kuthetha ukuba ukutshintshela kwimenyu eyehlayo evulekileyo uye kwimenyu eyehlayo eyahlukileyo kufuna impompo eyongezelelweyo kwiselfowuni.

Qaphela: Uphawu data-toggle="dropdown"loyelelwano kuxhomekeke kulo ukuvala imenyu eyehlayo kwinqanaba lesicelo, ngoko luluvo oluhle ukusoloko uyisebenzisa.

Ngeempawu zedatha

Yongeza data-toggle="dropdown"kwikhonkco okanye iqhosha ukuguqula ukwehla.

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

Ukugcina ii-URL zicocekile ngamaqhosha ekhonkco, sebenzisa data-targetuphawu loyelelwano endaweni ye 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>

NgeJavaScript

Fowunela ukwehla ngeJavaScript:

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

Iinketho

Akukho nanye

Iindlela

$().dropdown('toggle')

Qwalasela imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed.

Iziganeko

Zonke iziganeko ezihlayo zigxothwa .dropdown-menukumzali we element.

Zonke iziganeko eziya kuhla zinepropati relatedTarget, ezixabiso layo lisisiqalelo seankile eshukumayo.

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

I-ScrollSpy scrollspy.js

Umzekelo kwi-navbar

I-plugin yeScrollSpy yeyokuhlaziya ngokuzenzekelayo iithagethi ze-nav ngokusekelwe kwindawo yokuskrola. Skrolela indawo engezantsi kwe-navbar kwaye ubukele utshintsho lweklasi esebenzayo. Imiba esezantsi eyehlayo nayo iya kuphawulwa.

Ukusetyenziswa

Ifuna indawo ehambelanayo

Nokuba yeyiphi na indlela yokuphunyezwa, iscrollspy ifuna ukusetyenziswa position: relative;kwento oyihlolayo. Kwiimeko ezininzi le <body>. Xa scrollspying kwizinto ngaphandle <body>, qiniseka ukuba ube heightiseti kwaye overflow-y: scroll;isetyenziswe.

Ngeempawu zedatha

Ukongeza ngokulula isimilo sokuskrola kulawulo lwakho lwebar engaphezulu, yongeza data-spy="scroll"kwinto ofuna ukuyihlola (ubukhulu becala le iya kuba yi <body>). Emva koko yongeza data-targetuphawu kunye ne-ID okanye udidi lwelungu lomzali walo naliphi na ilungu le-Bootstrap .nav.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

NgeJavaScript

Emva kokongeza position: relative;kwiCSS yakho, fowunela i-scrollspy ngeJavaScript:

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

Iindlela

.scrollspy('refresh')

Xa usebenzisa i-scrollspy ngokudibanisa okanye ukususa izinto kwi-DOM, kuya kufuneka ufowunele indlela yokuhlaziya ngolu hlobo:

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

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-offset="".

Iziganeko

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

Iithebhu ezitshintshekayo tab.js

Iithebhu zemizekelo

Yongeza ngokukhawuleza, ukusebenza kwethebhu eguquguqukayo kwinguqu kwiipaneli zomxholo wasekhaya, nangeemenyu ezihlayo. Iithebhu ezifakwe kwindlwane azixhaswanga.

Ukusetyenziswa

Yenza iithebhu ezinokubakho ngeJavaScript (ithebhu nganye kufuneka ivulwe ngokwayo):

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

Unokwenza ithebhu nganye isebenze ngeendlela ezininzi:

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

IMarkup

Unokwenza ithebhu okanye ukukhangela iipilisi ngaphandle kokubhala nayiphi na iJavaScript ngokuchaza ngokulula data-toggle="tab"okanye data-toggle="pill"kwinto. Ukongeza i navkunye nav-tabsneeklasi kwisithuba ulkuya kusebenzisa i-Bootstrap yesimbo sesithuba , ngelixa udibanisa navkunye nav-pillsneeklasi ziyakusebenzisa isitayile sepilisi .

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

Ukwenza iithebhu ziphelelwe, yongeza .fadekuyo nganye .tab-pane. Ipheyini yethebhu yokuqala kufuneka kwakhona .inyenze umxholo wokuqala ubonakale.

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

Iindlela

$().tab

Yenza isiqalelo sethebhu kunye nesiqulatho sisebenze. Isithuba kufuneka sibenendawo data-targetokanye indawo hrefyesikhongozeli kwiDOM. Kule mizekelo ingasentla, ii-tab ngu- <a>s kunye data-toggle="tab"neempawu.

.tab('show')

Ikhetha ithebhu enikiweyo kwaye ibonisa umxholo wayo ohambelanayo. Nayiphi na enye ithebhu ebikhe yakhethwa ngaphambili ayikhethwa kwaye umxholo wayo uyafihlwa. Ibuyisela kumnxebi phambi kokuba ipayini yethebhu iboniswe ngokwenene (okt phambi kokuba shown.bs.tabisiganeko senzeke).

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

Iziganeko

Xa ubonisa ithebhu entsha, iziganeko zivutha ngolu hlobo lulandelayo:

1. hide.bs.tab(kwithebhu esebenzayo yangoku)
2. show.bs.tab(kwi-eza kuboniswa thebhu)
3. hidden.bs.tab(kwithebhu esebenzayo yangaphambili, efanayo nale hide.bs.tabyesiganeko)
4. shown.bs.tab(kwisithuba esandula ukusebenza esivele sibonise ithebhu, efanayo show.bs.tabnesesiganeko)

Ukuba akukho thebhu ibisele iyasebenza, ngoko i hide.bs.tabkunye hidden.bs.tabneziganeko aziyi kugxothwa.

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

Iingcebiso zezixhobo zesixhobo.js

Ikhuthazwe yeyona plugin igqwesileyo ye-jQuery.tipsy ebhalwe nguJason Frame; Iingcebiso zesixhobo luguqulelo oluhlaziyiweyo, olungathembekanga kwimifanekiso, sebenzisa i-CSS3 yoopopayi, kunye neempawu zedatha zogcino lwesihloko sasekuhlaleni.

Iingcebiso zezixhobo ezinezihloko ezibude buziro aziboniswa.

Imizekelo

Hambisa ngaphezulu kwezi linki zingezantsi ukuze ubone iingcebiso zesixhobo:

Isixhobo esimileyo

Zine iinketho ezikhoyo: phezulu, ekunene, ezantsi, nasekhohlo zilungelelanisiwe.

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

Ukusetyenziswa

Isixhobo se-plugin se-tooltip sivelisa umxholo kunye ne-markup kwimfuno, kwaye ngokungagqibekanga iindawo zeengcebiso zesixhobo emva kwento yazo yokuqalisa.

Qalisa ingcebiso yesixhobo ngeJavaScript:

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

IMarkup

Uphawu olufunekayo lwencam yesixhobo luphawu kuphela datakwaye titlekwisiqalelo se-HTML unqwenela ukuba nencam yesixhobo. Uphawu oluveliswayo lwencam yesixhobo lulula, nangona lufuna indawo (ngokungagqibekanga, toplumiselwe yiplagi).

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

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-animation="".

Iindlela

$().tooltip(options)

Iqhoboshela isibambi sesixhobo kwingqokelela yesiqalelo.

.tooltip('show')

Ityhila inqaku lesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo iboniswe (okt phambi kokuba shown.bs.tooltipisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa isixhobo. Iingcebiso zezixhobo ezinezihloko ezibude buziro aziboniswa.

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

.tooltip('hide')

Ifihla incam yesixhobo. Ibuyisela kumnxeba phambi kokuba incam yesixhobo ifihliwe (okt phambi kokuba hidden.bs.tooltipisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa isixhobo.

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

.tooltip('toggle')

Itshintshela incam yesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo iboniswe okanye ifihlwe (okt phambi kokuba isiganeko shown.bs.tooltipokanye hidden.bs.tooltipisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa isixhobo.

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

.tooltip('destroy')

Ifihla kwaye itshabalalise isixhobo sesixhobo. Iingcebiso zesixhobo ezisebenzisa unikezelo (ezenziwe ngokusetyenziswa kokhethoselector ) azinakutshatyalaliswa zizodwa kwiziqalelo zokubangela ukuvela .

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

Iziganeko

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

IiPopovers popover.js

Yongeza imixholo emincinci, njengaleyo ikwi-iPad, kuyo nayiphi na into yolwazi lwesibini lwezindlu.

Iipopovers ezinesihloko kunye nomxholo onguziro-ubude azizange ziboniswe.

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

Imizekelo

Ipopover engatshintshiyo

Zine iinketho ezikhoyo: phezulu, ekunene, ezantsi, nasekhohlo zilungelelanisiwe.

Idemo ephilayo

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

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

Lahla ngokucofa okulandelayo

Sebenzisa i- focustrigger ukugxotha iipopovers kunqakrazo olulandelayo olwenziwa ngumsebenzisi.

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

Ukusetyenziswa

Vumela iipopovers ngeJavaScript:

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

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-animation="".

Iindlela

$().popover(options)

Uqalisa iipopovers zengqokelela yezinto.

.popover('show')

Ityhila ukuvela kwento ethile. Ibuyisela kumnxeba phambi kokuba i-popover iboniswe (okt phambi kokuba shown.bs.popoverisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-popover. Iipopovers ezinesihloko kunye nomxholo onguziro-ubude azizange ziboniswe.

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

.popover('hide')

Ifihla imvelaphi yento. Ibuyisela kumnxeba phambi kokuba i-popover ifihliwe (okt phambi kwehidden.bs.popover isiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-popover.

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

.popover('toggle')

Itshintsha ipopover yesiqalelo. Ibuyisela kumnxeba phambi kokuba i-popover iboniswe okanye ifihliwe (okt phambi kokuba isiganeko shown.bs.popoverokanye hidden.bs.popoverisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-popover.

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

.popover('destroy')

Ifihla kwaye itshabalalise i-element's popover. Iipopovers ezisebenzisa unikezelo (eziyilwe kusetyenziswa ukhetho selector) azinakutshatyalaliswa zizodwa kwinzala yezinto ezibangelayo.

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

Iziganeko

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

Imiyalezo yesivuseleli alert.js

Izaziso zemizekelo

Yongeza umsebenzi wokugxotha kuyo yonke imiyalezo yesivuseleli ngale plugin.

Xa usebenzisa .closeiqhosha, kufuneka ibe ngumntwana wokuqala .alert-dismissiblekwaye akukho mxholo wombhalo unokuza phambi kwawo kuphawulo.

Ukusetyenziswa

Yongeza data-dismiss="alert"nje kwiqhosha lakho lokuvala ukunika ngokuzenzekelayo umsebenzi okufutshane wesilumkiso. Ukuvala isilumkiso kuyasisusa kwiDOM.

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

Ukuze izilumkiso zakho zisebenzise oopopayi xa uvala, qiniseka ukuba banazo .fadekunye .inneeklasi esele zisetyenziswe kuzo.

Iindlela

$().alert()

Yenza isivuseleli imamele ukwenzela unqakrazo lweziganeko kwizinto eziphumayo data-dismiss="alert"ezinophawu. (Akuyomfuneko xa usebenzisa idatha-api's auto-initialization.)

$().alert('close')

Ivala isilumkiso ngokusisusa kwiDOM. Ukuba .fadekunye.in neeklasi zikhona kwinto, isivuseleli siya kuphelelwa phambi kokuba sisuswe.

Iziganeko

Iplagi yesilumkiso ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa kusetyenziso lwesilumkiso.

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

Amaqhosha amaqhosha.js

Yenza ngakumbi ngamaqhosha. Iqhosha lokulawula lixela okanye wenze amaqela amaqhosha amalungu amaninzi njengebar yesixhobo.

Inyanisile

Yongeza data-loading-text="Loading..."ukusebenzisa imeko yokulayisha kwiqhosha.

Olu phawu luyehliswa ukusukela kwi-v3.3.5 kwaye lususiwe kwi-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>

Uguqulelo olunye

Yongeza data-toggle="button"ukuze uvule iqhosha elinye.

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

Ibhokisi yokujonga / irediyo

Yongeza data-toggle="buttons"kwibhokisi .btn-groupyokukhangela equlathe okanye amagalelo erediyo ukwenza uguqulelo lwezimbo ezahlukeneyo.

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

Iindlela

$().button('toggle')

Itshintsha imeko yokutyhala. Inika iqhosha inkangeleko yokuba livuliwe.

$().button('reset')

Seta kwakhona imeko yeqhosha-tshintshanisa umbhalo ukuya kumbhalo wokuqala. Le ndlela ayihambelani kwaye ibuyisela phambi kokuba ukusetha kwakhona kugqitywe.

$().button(string)

Utshintshanisa umbhalo kuyo nayiphi na idatha echaziweyo yokubhaliweyo.

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

Colapse.js _

Iplagi eguquguqukayo esebenzisa iiklasi ezimbalwa zokuziphatha ngokulula.

Umzekelo

Cofa amaqhosha angezantsi ukuze ubonise kwaye ufihle enye into ngotshintsho lweklasi:

• .collapseifihla umxholo
• .collapsingisetyenziswa ngexesha lotshintsho
• .collapse.inibonisa umxholo

Ungasebenzisa ikhonkco kunye hrefnophawu, okanye iqhosha elinophawu data-targetloyelelwano. Kuzo zombini ezi meko, data-toggle="collapse"kuyafuneka.

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

Umzekelo weAccordion

Yandisa indlela yokuziphatha yokudilika okumiselweyo ukwenza iaccordion kunye necandelo lendawo yolawulo.

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

Kuyenzeka kwakhona ukutshintsha .panel-bodys kunye .list-groups.

Ukusetyenziswa

Iplagin yokudilika isebenzisa iiklasi ezimbalwa ukuphatha ukuphakamisa okunzima:

• .collapseifihla umxholo
• .collapse.inibonisa umxholo
• .collapsingyongezwa xa inguqu iqala, kwaye isuswe xa igqibile

Ezi klasi zinokufumaneka kwi component-animations.less.

Ngeempawu zedatha

Yongeza nje data-toggle="collapse"kwaye a data-targetkwisiqalelo ukwabela ngokuzenzekelayo ulawulo lwento eqengqelekayo. Uphawu data-targetloyelelwano lwamkela umkhethi we-CSS ukuze kufakwe ukutshitshiswa. Qinisekisa ukuba wongeza iklasi collapsekwinto eqengqelekayo. Ukuba ungathanda ukuba ivuleke ngokungagqibekanga, yongeza udidi olongezelelweyo in.

Ukongeza ulawulo lweqela olufana ne-accordion kulawulo oluqengqelekayo, yongeza uphawu loyelelwano lwedatha data-parent="#selector". Jonga kwidemo ukuze ubone oku kusebenza.

NgeJavaScript

Vula ngesandla nge:

$('.collapse').collapse()

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-parent="".

Iindlela

.collapse(options)

Yenza umxholo wakho ube yinto eqengqelekayo. Yamkela iinketho ozikhethelayo object.

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

.collapse('toggle')

Iguqulela into eqengqelekayo ukuze iboniswe okanye ifihliwe. Ibuyisela kumnxeba phambi kokuba into eqengqelekayo iboniswe okanye ifihliwe (okt phambi kokuba isiganeko shown.bs.collapseokanye hidden.bs.collapseisiganeko senzeke).

.collapse('show')

Ibonisa into eqengqelekayo. Ibuyisela kumnxeba phambi kokuba into eqengqelekayo iboniswe (okt phambi kokuba shown.bs.collapseisiganeko senzeke).

.collapse('hide')

Ifihla into eqengqelekayo. Ibuyisela kumnxebi phambi kokuba into eqengqelekayo ifihlwe (okt phambi kokuba hidden.bs.collapseisiganeko senzeke).

Iziganeko

Iklasi yokuwa yeBootstrap iveza iminyhadala embalwa yokuhuka ekusebenzeni kokuwa.

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

Carousel carousel.js

Ilungu lomboniso wesilayidi sokuhamba ngebhayisekile kwizinto, njengecarousel. Iicarousels ezifakwe kwindlwane azixhaswanga.

Imizekelo

Ngaphambili Okulandelayo

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

Iinkcazelo ozikhethayo

Yongeza ii-captions kwizilayidi zakho ngokulula ngento .carousel-captionengaphakathi kuyo nayiphi na .item. Beka malunga nayo nayiphi na i-HTML ekhethiweyo phakathi apho kwaye iya kulungelelaniswa ngokuzenzekelayo kwaye ifomathwe.

Ileyibhile yesilayidi sokuqala

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

Ileyibhile yesilayidi sesibini

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ileyibhile yesithathu yesilayidi

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Ngaphambili Okulandelayo

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

Ukusetyenziswa

Iicarousels ezininzi

Iicarousels zifuna ukusetyenziswa idkwesikhongozeli esingaphandle (the .carousel) ukuze ulawulo lwecarousel lusebenze kakuhle. Xa ufaka iicarousel ezininzi, okanye xa utshintsha i-carousel's id, qiniseka ukuba uhlaziya ulawulo olufanelekileyo.

Ngeempawu zedatha

Sebenzisa iimpawu zedatha ukulawula ngokulula indawo ye-carousel. data-slideyamkela amagama angundoqo prevokanye next, eguqula indawo yesilayidi ngokunxulumene nendawo yaso yangoku. Kungenjalo, sebenzisa data-slide-toukudlulisa isalathiso sesilayidi ekrwada kwicarousel data-slide-to="2", etshintsha indawo yesilayidi kwisalathiso esithile esiqala nge 0.

Uphawu data-ride="carousel"loyelelwano lusetyenziselwa ukuphawula i-carousel njengento ephilayo ukuqala kumthwalo wephepha. Ayinakusetyenziswa ngokudityaniswa ne (ingafunekiyo nengafunekiyo) iJavaScript ecacileyo yokuqaliswa kwecarousel enye.

NgeJavaScript

Fowunela i-carousel ngesandla nge:

$('.carousel').carousel()

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-interval="".

Iindlela

.carousel(options)

Uqalisa i-carousel ngeendlela ozikhethelayo objectkwaye uqalise ukukhwela ibhayisekile kwizinto.

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

.carousel('cycle')

Ujikeleza izinto zecarousel ukusuka ekhohlo ukuya ekunene.

.carousel('pause')

Imisa ikhareshi ekukhweleni ibhayisekile kwizinto.

.carousel(number)

Ujikelezisa i-carousel kwisakhelo esithile (i-0 esekelwe, efana noluhlu).

.carousel('prev')

Imijikelo ukuya kwinto yangaphambili.

.carousel('next')

Biyela ukuya kwinto elandelayo.

Iziganeko

Iklasi ye-carousel ye-Bootstrap iveza iminyhadala emibini yokuhuka ekusebenzeni kwecarousel.

Zombini ezi ziganeko zineempawu ezongezelelweyo zilandelayo:

• direction: Isalathiso apho i-carousel ishelela khona (okanye "left"okanye "right").
• relatedTarget: Isiqalelo seDOM esityibilikiswa kwindawo njengomba osebenzayo.

Zonke iziganeko zecarousel zikhutshwa kwicarousel ngokwayo (okt kwi <div class="carousel">).

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

Faka i- affix.js

Umzekelo

Iplagi ye-affix iguqulela position: fixed;kwaye icime, ilinganisa isiphumo esifunyenwe nge position: sticky;. Ukuhanjiswa ngasekunene yidemo ephilayo ye-affix plugin.

Ukusetyenziswa

Sebenzisa i-affix plugin usebenzisa iimpawu zedatha okanye ngesandla ngeJavaScript yakho. Kuzo zombini ezi meko, kufuneka unikeze iCSS yokuma kunye nobubanzi bomxholo wakho ogxunyekiweyo.

Qaphela: Sukusebenzisa iplagi ye-affix kwinto equlathwe kwindawo ebekwe ngokwentelekiso, njengoluhlu olutsaliweyo okanye olutyhiliweyo, ngenxa yeSafari unikezelo bug .

Ukubekwa ngeCSS

Iplagi ye-affix itshintsha phakathi kweeklasi ezintathu, nganye imele imo ethile: .affix, .affix-top, kunye .affix-bottom. Kufuneka unikeze izimbo, ngaphandle kwe position: fixed;, .affixkwezi klasi ngokwakho (ezizimeleyo kule plugin) ukuphatha ezona zikhundla.

Nantsi indlela esebenza ngayo iplagi ye-affix:

1. Ukuqala, iplagin yongeza .affix-topukubonisa into ekwindawo yayo ephezulu kakhulu. Kweli nqanaba akukho kubekwa kweCSS kuyadingeka.
2. Ukuskrola ngaphaya kwento ofuna incamatheliswe kufuneka iqalise olona luncamatheliso. Apha kulapho .affixkungena endaweni .affix-topkunye neseti position: fixed;(ezinikezelwe yiBootstrap's CSS).
3. Ukuba umgca osezantsi uchaziwe, ukuskrola udlule kufuneka endaweni .affixyawo .affix-bottom. Kuba ii-offsets zinokuzikhethela, ukuseta enye kufuna ukuba usete i-CSS efanelekileyo. Kule meko, yongeza position: absolute;xa kuyimfuneko. Iplagin isebenzisa uphawu lwedatha okanye ukhetho lweJavaScript ukumisela indawo yokubeka into ukusuka apho.

Landela la manyathelo angasentla ukuseta i-CSS yakho nokuba yeyiphi kwezi ndlela zokusebenzisa ezingezantsi.

Ngeempawu zedatha

Ukongeza ngokulula i-affix isimilo kuyo nayiphi na into, yongeza data-spy="affix"nje kwinto ofuna ukuyihlola. Sebenzisa i-offsets ukucacisa ukuba uguqulelwa nini ukuphina into.

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

NgeJavaScript

Fowunela i-affix plugin usebenzisa iJavaScript:

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

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-offset-top="200".

Iindlela

.affix(options)

Yenza umxholo wakho ube ngumxholo ogxunyekiweyo. Yamkela iinketho ozikhethelayo object.

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

.affix('checkPosition')

Bala kwakhona ubume be-affix ngokusekelwe kwimilinganiselo, indawo, kunye nendawo yokuskrola yezinto ezifanelekileyo. I .affix, .affix-top, kunye .affix-bottomneeklasi zongezwa okanye zisuswe kumxholo oqhotyoshelweyo ngokwemeko entsha. Le ndlela kufuneka ibizwe nanini na xa imilinganiselo yesiqulatho esigxunyekiweyo okanye into ekujoliswe kuyo itshintshiwe, ukuqinisekisa ukubekwa okuchanekileyo komxholo ogxunyekiweyo.

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

Iziganeko

Iplagi ye-affix ye-Bootstrap iveza iziganeko ezimbalwa zokuqhagamshelwa ekusebenzeni kwe-affix.