Kakaretso

Motho ka mong kapa a kopantswe

Li-plugins li ka kenyelletsoa ka bonngoe (ho sebelisa *.jslifaele tsa motho ka mong tsa Bootstrap), kapa kaofela ka nako e le 'ngoe (ho sebelisa bootstrap.jskapa minified bootstrap.min.js).

Litšobotsi tsa data

U ka sebelisa li-plugins tsohle tsa Bootstrap feela ka har'a markup API ntle le ho ngola mola o le mong oa JavaScript. Ena ke API ea boemo ba pele ba Bootstrap 'me e lokela ho ba maikutlo a hau a pele ha u sebelisa plugin.

Ho boletse joalo, maemong a mang ho ka ba molemo ho tima ts'ebetso ena. Ka hona, re boetse re fana ka bokhoni ba ho tima API ea tšobotsi ea data ka ho lokolla liketsahalo tsohle tse tokomaneng e nang le sebaka sa mabitso data-api. Sena se shebahala tjena:

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

Ntle le moo, ho lebisa plugin e itseng, kenyelletsa feela lebitso la plugin joalo ka sebaka sa mabitso hammoho le sebaka sa mabitso sa data-api joalo ka:

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

Programmatic API

Hape re lumela hore o lokela ho sebelisa li-plugins tsohle tsa Bootstrap feela ka JavaScript API. Li-API tsohle tsa sechaba ke mekhoa e le 'ngoe, e ka tsamaisoang ka ketane, 'me e khutlisetsa pokello e sebelisitsoeng.

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

Mekhoa eohle e lokela ho amohela ntho ea boikhethelo, khoele e lebisitseng mokhoa o itseng, kapa letho (e qalang plugin ka boits'oaro ba kamehla):

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

Plugin e 'ngoe le e' ngoe e boetse e pepesa sehahi sa eona se tala Constructorsetšeng: $.fn.popover.Constructor. Haeba u batla ho fumana mohlala o itseng oa plugin, e fumane ka kotloloho ho tsoa ho element: $('[rel="popover"]').data('popover').

Litlhophiso tsa kamehla

U ka fetola litlhophiso tsa kamehla tsa plugin ka ho fetola Constructor.DEFAULTSntho ea plugin:

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

Ha ho khohlano

Ka linako tse ling hoa hlokahala ho sebelisa li-plugins tsa Bootstrap tse nang le meralo e meng ea UI. Maemong ana, ka linako tse ling ho ka ba le likhohlano tsa sebaka sa mabitso. Haeba sena se etsahala, u ka bitsa .noConflictplugin u lakatsa ho khutlisetsa boleng ba.

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

Liketsahalo

Bootstrap e fana ka liketsahalo tsa tloaelo bakeng sa liketso tse ikhethang tsa li-plugins. Ka kakaretso, tsena li tla ka mokhoa o sa feleng le oa nako e fetileng - moo lentsoe le sa feleng (mohlala. show) le qalisoang qalong ea ketsahalo, 'me sebopeho sa eona sa nako e fetileng sa karolo (mohl. shown) se hlahisoang ha ketso e phethoa.

Ho tloha ka 3.0.0, liketsahalo tsohle tsa Bootstrap li arotsoe ka mabitso.

Liketsahalo tsohle tse sa feleng li fana ka preventDefaultts'ebetso. Sena se fana ka bokhoni ba ho emisa ts'ebetso ea ketso pele e qala.

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

Sanitizer

Lisebelisoa le li-Popovers li sebelisa sanitizer ea rona e hahelletsoeng ka hare ho hloekisa likhetho tse amohelang HTML.

Boleng ba kamehla whiteListke bo latelang:

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

Haeba u batla ho eketsa boleng bo bocha sebakeng sena sa kamehla whiteListu ka etsa tse latelang:

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)

Haeba u batla ho qoba sanitizer ea rona hobane u khetha ho sebelisa laeborari e inehetseng, mohlala DOMpurify , u lokela ho etsa se latelang:

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

Linomoro tsa phetolelo

Mofuta oa e 'ngoe le e' ngoe ea li-plugins tsa Bootstrap's jQuery e ka fumaneha ka VERSIONthepa ea sehahi sa plugin. Ka mohlala, bakeng sa plugin ea tooltip:

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

Ha ho na liphoso tse ikhethileng ha JavaScript e koetsoe

Li-plugins tsa Bootstrap ha li khutlele morao haholo ha JavaScript e koetsoe. Haeba u tsotella boiphihlelo ba mosebelisi ntlheng ena, sebelisa <noscript>ho hlalosa boemo (le mokhoa oa ho lumella JavaScript hape) ho basebelisi ba hau, le/kapa eketsa liphoso tsa hau tsa tloaelo.

Transitions transition.js

Mabapi le liphetoho

Bakeng sa litlamorao tse bonolo tsa phetoho, kenyelletsa transition.jshang hammoho le lifaele tse ling tsa JS. Haeba u sebelisa compiled (kapa minified) bootstrap.js, ha ho hlokahale ho kenyelletsa sena - se se se ntse se le teng.

Se ka hare

Transition.js ke mothusi oa mantlha oa transitionEndliketsahalo hammoho le emulator ea phetoho ea CSS. E sebelisoa ke li-plugins tse ling ho lekola tšehetso ea phetoho ea CSS le ho ts'oara liphetoho tse leketlileng.

E thibela liphetoho

Liphetoho li ka emisoa lefatšeng ka bophara ho sebelisoa snippet e latelang ea JavaScript, e tlamehang ho tla ka mor'a hore transition.js(kapa bootstrap.js, bootstrap.min.jsjoalo ka ha ho ka ba joalo) e kentsoe:

$.support.transition = false

Mekhoa ea modal.js

Li-modal li hlophisitsoe hantle, empa lia tenyetseha, likeletso tsa lipuisano tse nang le ts'ebetso e nyane e hlokahalang le mefokolo e bohlale.

Ka lebaka la hore na HTML5 e hlalosa semantics ea eona joang, autofocustšobotsi ea HTML ha e na phello ho mekhoa ea Bootstrap. Ho fihlela phello e tšoanang, sebelisa JavaScript e tloaelehileng:

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

Mehlala

Mohlala o tsitsitseng

Mokhoa o hlophisitsoeng o nang le hlooho, 'mele, le sete sa liketso botlaseng.

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

Pontšo e phelang

Fetolela modal ka JavaScript ka ho tobetsa konopo e ka tlase. E tla thellela fatše ebe e nyamela ho tloha holimo leqepheng.

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

Boikhethelo ba boholo

Li-modal li na le mefuta e 'meli ea boikhethelo, e fumanehang ka litlelase tsa ho feto-fetoha tse tla beoa ho .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>

Tlosa animation

Bakeng sa li-modal tse hlahang feela ho e-na le ho nyamela, tlosa .fadesehlopha ho li-modal markup tsa hau.

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

Ho sebelisa sistimi ea grid

Ho nka monyetla ka sistimi ea grid ea Bootstrap ka har'a modal, feela sehlaha .rows ka hare ho .modal-bodyebe o sebelisa litlelase tse tloaelehileng tsa grid system.

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

Likahare tse fapaneng tsa modal ho ipapisitsoe le konopo ea "trigger".

Na u na le lihlopha tsa likonopo tse hlahisang mokhoa o tšoanang, ka litaba tse fapaneng hanyane? Sebelisa event.relatedTargetle litšobotsi tsa HTMLdata-* (mohlomong ka jQuery ) ho fetola litaba tsa modal ho latela hore na konopo e tobetse. Sheba litokomane tsa Modal Events bakeng sa lintlha tse mabapi le 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)
})

Tšebeliso

Modal plugin e fetola litaba tsa hau tse patiloeng ha li batloa, ka likarolo tsa data kapa JavaScript. E boetse e ekelletsa .modal-openho <body>tloleng boits'oaro ba kamehla ba ho phutha 'me e hlahisa .modal-backdropho fana ka sebaka sa ho tobetsa bakeng sa ho leleka mekhoa e bontšitsoeng ha o tobetsa ka ntle ho modal.

Ka litšobotsi tsa data

Kenya modal ntle le ho ngola JavaScript. Beha data-toggle="modal"karolo ea taolo, joalo ka konopo, hammoho le data-target="#foo"kapa href="#foo"ho shebisa mokhoa o itseng oa ho fetola.

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

Ka JavaScript

Letsetsa modal ka id myModalka mola o le mong oa JavaScript:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-backdrop="".

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

Mekhoa

.modal(options)

E kenya tšebetsong litaba tsa hau joalo ka mokhoa. E amohela khetho ea boikhethelo object.

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

.modal('toggle')

E fetola modal ka letsoho. E kgutlela ho motho ya letsetsang pele modal e bontshwa kapa e patilwe (ke hore pele ketsahalo shown.bs.modalkapa hidden.bs.modalketsahalo e etsahala).

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

.modal('show')

E bula modal ka letsoho. E khutlela ho motho ea letselitseng pele mokha o bonts'oa (ke hore pele shown.bs.modalketsahalo e etsahala).

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

.modal('hide')

E pata modal ka letsoho. E khutlela ho motho ea letselitseng pele mohale o patiloe (ke hore pele hidden.bs.modalketsahalo e etsahala).

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

.modal('handleUpdate')

E lokisa boemo ba modal ho hanyetsa scrollbar haeba motho a ka hlaha, e leng se ka etsang hore modal e tlole ka ho le letšehali.

E hlokahala feela ha bophahamo ba modal bo fetoha ha bo ntse bo bulehile.

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

Liketsahalo

Sehlopha sa modal sa Bootstrap se pepesa liketsahalo tse 'maloa tsa ho hokahana le ts'ebetso ea modal.

Liketsahalo tsohle tsa modal li lelekoa ho modal ka boeona (ke hore ho <div class="modal">).

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

Dropdowns dropdown.js

Mehlala

Kenya menyetla ea ho theoha hoo e batlang e le eng kapa eng ka plugin ena e bonolo, ho kenyeletsoa navbar, li-tab le lipilisi.

Ka har'a navbar

Ka har'a lipilisi

Tšebeliso

Ka litšoaneleho tsa data kapa JavaScript, plugin e theohang e fetola litaba tse patiloeng (menu e theohang) ka ho fetola .opensehlopha lethathamong la batsoali.

Ho lisebelisoa tsa mehala, ho bula ho theoha ho eketsa sebaka .dropdown-backdropsa pompo bakeng sa ho koala menyetla ea ho theoha ha o tobetsa ka ntle ho menu, e leng tlhokahalo ea tšehetso e nepahetseng ea iOS. Sena se bolela hore ho tloha ho menu e theohang e bulehileng ho ea ho menu e fapaneng ho hloka pompo e eketsehileng ho mobile.

Tlhokomeliso: Ho data-toggle="dropdown"tšeptjoa tšobotsi bakeng sa ho koala li-menu tse theohang boemong ba ts'ebeliso, kahoo ke mohopolo o motle ho e sebelisa kamehla.

Ka litšobotsi tsa data

Kenya data-toggle="dropdown"sehokelong kapa konopong ho totobetsa ho theoha.

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

Ho boloka li-URL li ntse li le teng ka likonopo tsa lihokelo, sebelisa data-targettšobotsi ho fapana le 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>

Ka JavaScript

Letsetsa li-dropdown ka JavaScript:

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

Dikgetho

Ha ho letho

Mekhoa

$().dropdown('toggle')

E fetola menyetla ea ho theoha ea navbar e fanoeng kapa navigation e nang le li-tabbed.

Liketsahalo

Liketsahalo tsohle tse theohang li lelekoa ho karolo ea .dropdown-menumotsoali.

Liketsahalo tsohle tse theohang li na le relatedTargetthepa, eo boleng ba eona e leng ntho ea toggling ankora.

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

ScrollSpy scrollspy.js

Mohlala ho navbar

The ScrollSpy plugin ke ea ho inchafatsa lipheo tsa nav ka bo eona ho ipapisitse le boemo ba moqolo. Tsamaisetsa sebaka se ka tlase ho navbar 'me u shebelle phetoho ea sehlopha se sebetsang. Lintlha tse tlase li tla totobatsoa hape.

Tšebeliso

E hloka maemo a amanang

Ho sa tsotelehe mokhoa oa ts'ebetsong, scrollspy e hloka ts'ebeliso ea position: relative;ntho eo u ntseng u e hloela. Maemong a mangata sena ke <body>. Ha u scrollspying linthong tse ling ntle le <body>, etsa bonnete ba hore u na le heightsete le overflow-y: scroll;ho sebelisoa.

Ka litšobotsi tsa data

Ho eketsa habonolo boits'oaro ba scrollspy ho navigation ea topbar ea hau, eketsa nthong data-spy="scroll"eo u batlang ho e hloela (haholo-holo ena e tla ba eona <body>). Ebe u eketsa data-targettšobotsi ka ID kapa sehlopha sa karolo ea motsoali ea karolo efe kapa efe ea 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>

Ka JavaScript

Kamora ho kenya position: relative;CSS ea hau, letsetsa scrollspy ka JavaScript:

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

Mekhoa

.scrollspy('refresh')

Ha o sebelisa scrollspy mmoho le ho eketsa kapa ho tlosa likarolo ho tsoa ho DOM, o tla hloka ho letsetsa mokhoa oa ho khatholla joalo ka:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-offset="".

Liketsahalo

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

Togglable tabs tab.js

Li-tab tsa mohlala

Eketsa ts'ebetso ea li-tab e potlakileng, e matla ho fetolela ka har'a liphasejene tsa litaba tsa lehae, esita le ka li-menu tse theohang. Li-tabo tsa Nested ha li tšehetsoe.

Tšebeliso

Lumella li-tab tse ka khonehang ka JavaScript (tabo e 'ngoe le e' ngoe e hloka ho etsoa ka bonngoe):

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

O ka kenya li-tab tsa motho ka mong ka litsela tse 'maloa:

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

Markup

O ka kenya ts'ebetso ea "tabo" kapa "pilisi" ntle le ho ngola JavaScript efe kapa efe ka ho hlakisa feela data-toggle="tab"kapa data-toggle="pill"ka ntho e itseng. Ho kenyelletsa navle nav-tabslitlelase ho tab ho tla sebelisa setaele sa tabul ea Bootstrap , ha u ntse u eketsa le litlelase li tla sebelisa setaele sa lipilisi .navnav-pills

<div>

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

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

</div>

Fade phello

Ho etsa hore li-tab li nyamele, eketsa .fadeho e 'ngoe le e 'ngoe .tab-pane. Letlapa la pele la li-tab le lona le tlameha .inho etsa hore litaba tsa pele li bonahale.

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

Mekhoa

$().tab

E kenya tshebetsong karolo ya tab le setshelo sa dikahare. Tab e lokela ho ba le node ea setshelo data-targetkapa e hreflebisitsoeng ho DOM. Mehlaleng e ka holimo, li-tab ke tsa <a>s tse nang le data-toggle="tab"litšobotsi.

.tab('show')

E khetha tab e fanoeng ebe e bontša litaba tse amanang le eona. Taba efe kapa efe e neng e khethiloe nakong e fetileng e fetoha e sa khethoang, 'me litaba tse amanang le eona lia patoa. E kgutlela ho moletsi pele fenstere ya tab e bontshwa (ke hore pele shown.bs.tabketsahalo e etsahala).

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

Liketsahalo

Ha o hlahisa tab e ncha, liketsahalo li tla ka tatellano e latelang:

1. hide.bs.tab(tabong ea hajoale e sebetsang)
2. show.bs.tab(letlapeng le tlang ho bontšoa)
3. hidden.bs.tab(tabong e fetileng e sebetsang, e ts'oanang le ea hide.bs.tabketsahalo)
4. shown.bs.tab(tabong e sa tsoa hlaha, e ts'oanang le ea show.bs.tabketsahalo)

Haeba ho se tab e neng e se e ntse e sebetsa, joale the hide.bs.table hidden.bs.tabliketsahalo li ke ke tsa lelekoa.

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

Tooltips.js _

E bululetsoe ke plugin e ntle haholo ea jQuery.tipsy e ngotsoeng ke Jason Frame; Litlhahiso ke mofuta o ntlafalitsoeng, o sa itšetleheng ka litšoantšo, sebelisa CSS3 bakeng sa lipopae, le litšobotsi tsa data bakeng sa polokelo ea lihlooho tsa lehae.

Lisebelisoa tse nang le lihlooho tsa bolelele ba zero ha li hlahisoe.

Mehlala

Tsamaea holim'a lihokelo tse ka tlase ho bona lintlha tsa lisebelisoa:

Keletso e tsitsitseng

Ho na le likhetho tse 'nè: holimo, ho le letona, ka tlase, le ho le letšehali.

Litsela tse 'ne

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

Tšebeliso

plugin ea tooltip e hlahisa litaba le markup ha ho hlokahala, 'me ka ho sa feleng e beha malebela ka mor'a ntho ea eona ea ho qala.

Qala sesebelisoa ka JavaScript:

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

Markup

Letšoao le hlokahalang bakeng sa sesebelisoa ke datatšobotsi feela 'me titleho karolo ea HTML u lakatsa ho ba le sesebelisoa. Thepa e hlahisitsoeng ea sesebelisoa e bonolo, leha e hloka boemo (ka kamehla, e behiloeng topke 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>

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-animation="".

Mekhoa

$().tooltip(options)

E hokela sebatli sa lithulusi pokellong ea lintho.

.tooltip('show')

E senola karolo ea lisebelisoa. E kgutlela ho moletsi pele thulusi e bontshwa (ke hore pele shown.bs.tooltipketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa. Lisebelisoa tse nang le lihlooho tsa bolelele ba zero ha li hlahisoe.

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

.tooltip('hide')

E pata ntlha ea lisebelisoa. E khutlela ho ea letsetsang pele sesebelisoa se patiloe (ke hore, pele hohidden.bs.tooltip ketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa.

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

.tooltip('toggle')

E fetola ntlha ea lisebelisoa. E khutlela ho ea letselitseng pele sesebelisoa se bontšoa kapa se patiloe (ke hore pele ketsahalo shown.bs.tooltipkapa hidden.bs.tooltipketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa.

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

.tooltip('destroy')

E pata le ho senya ntlha ea lisebelisoa. Litlhahiso tse sebelisang kemiso (tse entsoeng ho sebelisoa khetho selector) li ke ke tsa senngoa ka bonngoe holima lintho tse qalang.

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

Liketsahalo

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

Popovers popover.js

Eketsa likoahelo tse nyane tsa litaba, joalo ka tse ho iPad, ho karolo efe kapa efe bakeng sa tlhaiso-leseling ea bobeli ea matlo.

Li-Popovers tseo sehlooho le litaba tsa tsona li leng bolelele ba lefela ha ho mohla li hlahisoang.

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

Mehlala

Popover e tsitsitseng

Ho na le likhetho tse 'nè: holimo, ho le letona, ka tlase, le ho le letšehali.

Pontšo e phelang

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

Litsela tse 'ne

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

Tlosa ho tobetsa e latelang

Sebelisa focustrigger ho leleka li-popover ha motho a penya ka lekhetlo le latelang.

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

Tšebeliso

Lumella li-popover ka JavaScript:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-animation="".

Mekhoa

$().popover(options)

E qala popovers bakeng sa pokello ea lintho.

.popover('show')

E hlahisa poover ea element. E khutlela ho ea letselitseng pele popover e bonts'oa (ke hore pele shown.bs.popoverketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo. Li-Popovers tseo sehlooho le litaba tsa tsona li leng bolelele ba lefela ha ho mohla li hlahisoang.

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

.popover('hide')

E pata popo ea lintho. E khutlela ho ea letselitseng pele popover e patiloe (ke hore pele hidden.bs.popoverketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo.

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

.popover('toggle')

E fetola popover ea element. E khutlela ho ea letselitseng pele popover e bonts'oa kapa e patiloe (ke hore pele ketsahalo shown.bs.popoverkapa hidden.bs.popoverketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo.

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

.popover('destroy')

E pata le ho senya popover ea element. Li-Popovers tse sebelisang moifo (tse entsoeng ho sebelisoa khetho selector) li ke ke tsa senngoa ka bonngoe ho latela likarolo tse qalang.

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

Liketsahalo

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

Melaetsa ea tlhokomeliso alert.js

Mehlala ea tlhokomeliso

Kenya ts'ebetso ea ho tlosa melaetsa eohle ea tlhokomeliso ka plugin ena.

Ha o sebelisa .closekonopo, e tlameha ho ba ngoana oa pele .alert-dismissible'me ho se be le sengoloa se ka tlang pele ho eona ka har'a markup.

Tšebeliso

Kenya feela data-dismiss="alert"konopo ea hau ea ho koala ho fana ka ts'ebetso e haufi ea tlhokomeliso. Ho koala tlhokomeliso ho e tlosa ho DOM.

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

Ho etsa hore litemoso tsa hau li sebelise lipopae ha u koala, etsa bonnete ba hore li na .fadele .inlitlelase tse seng li sebelisitsoe ho tsona.

Mekhoa

$().alert()

E fana ka tlhokomeliso bakeng sa diketsahalo tsa ho tobetsa lintho tse hlahang tse nang le data-dismiss="alert"tšobotsi. (Ha ho hlokahale ha o sebelisa data-api's auto-initialization.)

$().alert('close')

E koala tlhokomeliso ka ho e tlosa ho DOM. Haeba li- .fadeclass .inli le teng ho element, tlhokomeliso e tla nyamela pele e tlosoa.

Liketsahalo

Sesebelisoa sa tlhokomeliso sa Bootstrap se pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea tlhokomeliso.

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

Likonopo tsa konopo.js

Etsa ho eketsehileng ka likonopo. Konopo ea ho laola e bolela kapa etsa lihlopha tsa likonopo bakeng sa likarolo tse ling tse kang lithulusi.

E bolelang

Eketsa data-loading-text="Loading..."ho sebelisa boemo ba ho kenya konopo.

Sebopeho sena ha se sa sebetsa ho tloha ka v3.3.5 mme se tlositsoe ho 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>

Phetoho e le 'ngoe

Eketsa data-toggle="button"ho kenya tshebetsong toggling ho konopo e le 'ngoe.

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

Lebokose la ho hlahloba / Radio

Eketsa lebokoseng data-toggle="buttons"le .btn-groupnang le li-checkbox kapa lisebelisoa tsa seea-le-moea ho nolofalletsa ho fetola mekhoa ea bona.

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

Mekhoa

$().button('toggle')

E fetola boemo ba push. E fa konopo ponahalo ea hore e kentsoe tšebetsong.

$().button('reset')

Seta bocha boemo ba konopo - fetola mongolo ho ea ho mongolo oa mantlha. Mokhoa ona ha o asynchronous 'me o khutla pele ho seta ho felile.

$().button(string)

Fetola mongolo ho boemo bofe kapa bofe ba mongolo bo hlalositsoeng.

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

Collapse collapse.js

Flexible plugin e sebelisang lihlopha tse 'maloa bakeng sa boitšoaro bo bonolo ba ho fetola.

Mohlala

Tobetsa likonopo tse ka tlase ho bontša le ho pata ntho e 'ngoe ka liphetoho tsa sehlopha:

• .collapsee pata litaba
• .collapsinge sebelisoa nakong ea liphetoho
• .collapse.ine bontsha dikahare

U ka sebelisa sehokelo se nang le hreftšobotsi, kapa konopo e nang le data-targettšobotsi. Maemong ana ka bobeli, ho data-toggle="collapse"hlokahala.

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

Mohlala oa accordion

Eketsa tloaelo ea ho putlama ho theha accordion ka karolo ea phanele.

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

Hape hoa khoneha ho fapanyetsana .panel-bodys le .list-groups.

Tšebeliso

Plugin ea ho putlama e sebelisa lihlopha tse 'maloa ho sebetsana le ho phahamisa boima:

• .collapsee pata litaba
• .collapse.ine bontsha dikahare
• .collapsinge eketsoa ha phetoho e qala, mme e tlosoe ha e fela

Lihlopha tsena li ka fumanoa ho component-animations.less.

Ka litšobotsi tsa data

Kenya feela data-toggle="collapse"le a data-targetho element ho fana ka taolo ea ntho e putlahang. data-targetTšobotsi e amohela khetho ea CSS eo o ka sebelisang ho putlama ho eona . Etsa bonnete ba hore o kenyelletsa sehlopha collapseho ntho e putlang. Haeba u rata hore e bulehe ka mokhoa o tloaelehileng, eketsa sehlopha sa tlatsetso in.

Ho kenya taolo ea sehlopha se kang accordion taolong e putlang, eketsa tšobotsi ea data data-parent="#selector". Sheba demo ho bona sena se sebetsa.

Ka JavaScript

Lumella ka letsoho ka:

$('.collapse').collapse()

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-parent="".

Mekhoa

.collapse(options)

E kenya tšebetsong litaba tsa hau joalo ka ntho e ka putlamang. E amohela khetho ea boikhethelo object.

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

.collapse('toggle')

E fetolela ntho e putlahang hore e bontšoe kapa e patiloe. E khutlela ho moletsi pele ntho e putlahang e bonts'oa kapa e patiloe (ke hore pele ketsahalo shown.bs.collapsekapa hidden.bs.collapseketsahalo e etsahala).

.collapse('show')

E bonts'a ntho e putlahang. E khutlela ho ea letselitseng pele ntho e putlang e bonts'oa (ke hore pele shown.bs.collapseketsahalo e etsahala).

.collapse('hide')

E pata ntho e putlang. E khutlela ho ea letselitseng pele ntho e putlang e patiloe (ke hore pele hidden.bs.collapseketsahalo e etsahala).

Liketsahalo

Sehlopha sa ho putlama sa Bootstrap se pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea ho putlama.

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

Carousel carousel.js

Karolo ea li-slideshow bakeng sa ho palama libaesekele ho pholletsa le likarolo, joalo ka carousel. Li-carousels tse halikiloeng ha li tšehetsoe.

Mehlala

E fetileng E 'ngoe

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

Litlhaloso tsa boikhethelo

Kenya litlhaloso ho li-slide tsa hau habonolo ka .carousel-captionkarolo e ka har'a .item. Beha hoo e ka bang HTML efe kapa efe ea boikhethelo ka har'a moo 'me e tla ikamahanya le ho hlophisoa ka bo eona.

Leibole ea pele ea li-slide

Nulla vitae elit libero, pharetra augue mollis interdum.

Label ea bobeli ea li-slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Leibole ea boraro ea li-slide

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

E fetileng E 'ngoe

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

Tšebeliso

Li-carousels tse ngata

Li-carousel li hloka ts'ebeliso ea idsets'oants'o se ka ntle (the .carousel) hore litsamaiso tsa carousel li sebetse hantle. Ha u eketsa li-carousel tse ngata, kapa ha u fetola carousel's id, etsa bonnete ba hore u ntlafatsa litsamaiso tse amehang.

Ka litšobotsi tsa data

Sebelisa litšobotsi tsa data ho laola boemo ba carousel habonolo. data-slidee amohela mantsoe a sehlooho prevkapa next, e fetolang boemo ba slide ho ipapisitse le boemo ba hona joale. Ntle le moo, sebelisa data-slide-toho fetisa index ea li-slide e tala ho carousel data-slide-to="2", e fetolang boemo ba li-slide ho index e itseng e qalang ka 0.

Tšobotsi data-ride="carousel"e sebelisoa ho tšoaea carousel e le e phelang ho qala ka palo ea maqephe. E ke ke ea sebelisoa hammoho le (ho sa hlokahale le ho sa hlokahale) ho qalisoa ka ho hlaka ha JavaScript ea carousel e tšoanang.

Ka JavaScript

Letsetsa carousel ka letsoho ka:

$('.carousel').carousel()

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-interval="".

Mekhoa

.carousel(options)

E qala carousel ka khetho ea boikhethelo objectebe e qala ho palama lintho.

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

.carousel('cycle')

E potoloha ka har'a lintho tsa carousel ho tloha ho le letšehali ho ea ho le letona.

.carousel('pause')

E emisa carousel ho palama baesekele ka har'a lintho.

.carousel(number)

E potoloha carousel ho foreime e itseng (0 e thehiloeng, e ts'oanang le lethathamo).

.carousel('prev')

Lipotoloho ho ea nthong e fetileng.

.carousel('next')

Lipotoloho ho ea nthong e latelang.

Liketsahalo

Sehlopha sa carousel sa Bootstrap se pepesa liketsahalo tse peli tsa ho hokahana le ts'ebetso ea carousel.

Liketsahalo tsena ka bobeli li na le litšobotsi tse latelang:

• direction: Tsela eo carousel e thellang ho eona (ebang ke "left"kapa "right").
• relatedTarget: Karolo ea DOM e ntseng e theoleloa sebakeng e le eona ntho e sebetsang.

Liketsahalo tsohle tsa carousel li thunngoa ho carousel ka boeona (ke hore ho <div class="carousel">).

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

Affix.js _

Mohlala

Affix plugin e bulela position: fixed;le ho tima, e etsisa phello e fumanoang ka position: sticky;. Subnavigation e ka ho le letona ke setšoantšo se phelang sa plugin ea affix.

Tšebeliso

Sebelisa plugin ea affix ka litšobotsi tsa data kapa ka letsoho ka JavaScript ea hau. Maemong ana ka bobeli, o tlameha ho fana ka CSS bakeng sa boemo le bophara ba litaba tse khomaretsoeng.

Tlhokomeliso: Se ke oa sebelisa plugin ea affix ho element e fumanehang sebakeng se batlang se eme, joalo ka kholomo e huloang kapa e sutumelitsoeng, ka lebaka la phoso ea Safari rendering bug .

Ho ema ka CSS

Affix plugin e fetoha lipakeng tsa lihlopha tse tharo, e 'ngoe le e 'ngoe e emela boemo bo itseng: .affix, .affix-top, le .affix-bottom. U tlameha ho fana ka litaele, ntle le position: fixed;on .affix, bakeng sa litlelase tsena u le mong (o ikemetseng oa plugin ena) ho sebetsana le maemo a nnete.

Mona ke kamoo plugin ea affix e sebetsang kateng:

1. Ho qala, plugin e eketsa .affix-topho bonts'a hore element e maemong a eona a holimo haholo. Mothating ona ha ho hlokahale boemo ba CSS.
2. Ho tsamaisetsa ho feta ntho eo u batlang ho e hlomathisoa ho lokela ho tsosa sekhomaretsi sa 'nete. Mona ke moo ho .affixnkeloang sebaka .affix-tople ho seta position: fixed;(ho fanoe ke Bootstrap's CSS).
3. Haeba ho hlalositsoe botlaaseng ba offset, ho tsamaisetsa ho feta ho lokela ho nkela sebaka .affixka .affix-bottom. Kaha li-offsets ke tsa boikhethelo, ho beha e 'ngoe ho hloka hore u behe CSS e nepahetseng. Tabeng ena, eketsa position: absolute;ha ho hlokahala. Plugin e sebelisa tšobotsi ea data kapa khetho ea JavaScript ho fumana hore na e beha ntlha hokae ho tloha moo.

Latela mehato e ka holimo ho seta CSS ea hau bakeng sa e 'ngoe ea likhetho tse ka tlase.

Ka litšobotsi tsa data

Ho eketsa habonolo boitšoaro ba affix ho ntho efe kapa efe, eketsa feela data-spy="affix"ntho eo u batlang ho e hloela. Sebelisa li-offsets ho hlalosa nako ea ho fetola pinning ea element.

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

Ka JavaScript

Letsetsa plugin ea affix ka JavaScript:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-offset-top="200".

Mekhoa

.affix(options)

E kenya tšebetsong litaba tsa hau joalo ka litaba tse khomaretsoeng. E amohela khetho ea boikhethelo object.

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

.affix('checkPosition')

E bala bocha boemo ba affix ho ipapisitsoe le boholo, boemo, le boemo ba moqolo ba likarolo tse amehang. The .affix, .affix-top, and .affix-bottomclass li eketsoa kapa li tlosoa ho litaba tse khomaretsoeng ho latela boemo bo bocha. Mokhoa ona o hloka ho bitsoa neng kapa neng ha litekanyo tsa litaba tse khomaretsoeng kapa ntho eo ho shebiloeng e fetoloa, ho netefatsa boemo bo nepahetseng ba litaba tse khomaretsoeng.

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

Liketsahalo

Bootstrap's affix plugin e pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea affix.