Nchịkọta

Onye ma ọ bụ chịkọtara

Enwere ike itinye ngwa mgbakwunye n'otu n'otu (iji *.jsfaịlụ Bootstrap n'otu n'otu), ma ọ bụ ha niile n'otu oge (iji bootstrap.jsma ọ bụ nke pere mpe bootstrap.min.js).

Njirimara data

Ị nwere ike iji plugins Bootstrap niile naanị site na API akara na-edeghị otu ahịrị Javascript. Nke a bụ API klas mbụ Bootstrap ma kwesịrị ịbụ ihe mbụ ị ga-echebara mgbe ị na-eji ngwa mgbakwunye.

Nke ahụ kwuru, n'ọnọdụ ụfọdụ ọ nwere ike ịdị mma ka gbanyụọ ọrụ a. Ya mere, anyị na-enyekwa ikike iji gbanyụọ njirimara data API site n'iwepụ ihe omume niile dị na akwụkwọ aha ya na data-api. Nke a dị ka nke a:

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

N'aka nke ọzọ, iji kwado ngwa mgbakwunye a kapịrị ọnụ, tinye naanị aha ngwa mgbakwunye dị ka oghere aha yana data-api namespace dị ka nke a:

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

API mmemme

Anyị kwenyekwara na ị ga-enwe ike iji plugins Bootstrap naanị site na API Javascript. API ọhaneze niile bụ otu, ụzọ enwere ike ịgbanye, wee weghachi mkpokọta emere.

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

Ụzọ niile kwesịrị ịnakwere ihe nhọrọ nhọrọ, eriri nke lekwasịrị anya otu usoro, ma ọ bụ ihe ọ bụla (nke na-amalite ngwa mgbakwunye nwere omume ndabara):

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

Ngwa mgbakwunye ọ bụla na-ekpughekwa ihe nrụpụta akụrụngwa ya na akụrụngwa Constructor: $.fn.popover.Constructor. Ọ bụrụ na ị ga-achọ ịnweta otu ngwa mgbakwunye ihe atụ, weghachite ya ozugbo na mmewere: $('[rel="popover"]').data('popover').

Ntọala mbụ

Ị nwere ike ịgbanwe ntọala ndabara maka ngwa mgbakwunye site n'ịgbanwe ihe ngwa mgbakwunye Constructor.DEFAULTS:

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

Enweghị esemokwu

Mgbe ụfọdụ, ọ dị mkpa iji plugins Bootstrap nwere usoro UI ndị ọzọ. N'ọnọdụ ndị a, ndakọrịta oghere aha nwere ike ime mgbe ụfọdụ. Ọ bụrụ na nke a emee, ị nwere ike ịkpọ .noConflictna ngwa mgbakwunye ịchọrọ iweghachi uru nke.

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

Ihe omume

Bootstrap na-enye mmemme omenala maka ọtụtụ omume pụrụ iche nke plugins. N'ozuzu, ndị a na-abịa n'ụdị njedebe na nke gara aga - ebe njedebe (dịka show) na-akpalite na mmalite nke mmemme, na ụdị nsonye ya gara aga (dịka shown) na-akpalite na mmecha nke omume.

Dịka nke 3.0.0, a na-enye aha mmemme Bootstrap niile.

Ihe omume enweghị ngwụcha na-enye preventDefaultọrụ. Nke a na-enye ikike ịkwụsị mmezu nke ihe tupu ya amalite.

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

Sanitizer

Ntuziaka ngwaọrụ na Popovers na-eji sanitizer arụnyere n'ime anyị iji kpochapụ nhọrọ ndị na-anabata HTML.

whiteListUru ndabara bụ nke a:

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

Ọ bụrụ na ịchọrọ ịgbakwunye ụkpụrụ ọhụrụ na ndabara a whiteListị nwere ike ime ihe ndị a:

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)

Ọ bụrụ na ịchọrọ ịgafe sanitizer anyị n'ihi na ịchọrọ iji ọbá akwụkwọ raara onwe ya nye, dịka ọmụmaatụ DOMPurify , ị ga-eme ihe ndị a:

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

Nọmba ụdị

Enwere ike ịnweta ụdị nke ọ bụla nke Bootstrap's jQuery plugins site na VERSIONakụrụngwa nke ihe nrụpụta ngwa mgbakwunye. Dịka ọmụmaatụ, maka ngwa mgbakwunye ngwa ngwa:

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

Enweghị ndaghachi azụ pụrụ iche mgbe Javascript nwere nkwarụ

Ihe mgbakwunye Bootstrap anaghị ada azụ n'ọmarịcha mgbe Javascript nwere nkwarụ. Ọ bụrụ na ị na-eche banyere ahụmahụ onye ọrụ na nke a, jiri <noscript>kọwaa ọnọdụ ahụ (na otu esi eme ka Javascript dịghachi) nye ndị ọrụ gị, na / ma ọ bụ gbakwunye ọdịda omenala nke gị.

Mgbanwe mgbanwe.js

Banyere mgbanwe

Maka mmetụta mgbanwe dị mfe, tinye transition.jsotu ugboro n'akụkụ faịlụ JS ndị ọzọ. Ọ bụrụ na ị na-eji nke achịkọtara (ma ọ bụ miniified) bootstrap.js, ọ dịghị mkpa itinye nke a-ọ dịlarị ebe ahụ.

Kedu ihe dị n'ime

Transition.js bụ ihe enyemaka bụ isi maka transitionEndmmemme yana emulator mgbanwe CSS. Ndị plugins ndị ọzọ na-eji ya iji lelee nkwado mgbanwe CSS yana ijide mgbanwe nkwudo.

Ịgbanyụọ ntụgharị

Enwere ike gbanyụọ mgbanwe n'ụwa niile site na iji snippet Javascript na-esote, nke ga-abịarịrị mgbe transition.js(ma bootstrap.jsọ bụ bootstrap.min.js, dị ka ọ dị) kwajuru:

$.support.transition = false

Ụdị modal.js

A na-ahazi usoro, mana na-agbanwe agbanwe, na-akpalite mkparịta ụka na arụrụ ọrụ kacha nta achọrọ yana ndabara smart.

N'ihi ka HTML5 si akọwa semantics ya, autofocusàgwà HTML enweghị mmetụta na Bootstrap modals. Iji nweta otu mmetụta ahụ, jiri ụfọdụ Javascript omenala:

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

Ihe atụ

Ihe atụ kwụ ọtọ

Modal emepụtara nwere nkụnye eji isi mee, ahụ, na usoro omume n'okpuru ụkwụ.

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

Ihe ngosi dị ndụ

Gbanwee modal site na JavaScript site na ịpị bọtịnụ dị n'okpuru. Ọ ga-adaba ma daa site n'elu ibe ahụ.

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

Nha nhọrọ

Modal nwere nha nhọrọ abụọ, dị site na klaasị modifier ka etinye ya na .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>

Wepu ihe nkiri

Maka ụdịdị ndị na-apụta karịa ka ị ga-adaba ka ilele, wepụ .fadeklaasị na akara modal gị.

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

Iji usoro grid

Iji nweta uru nke usoro grid Bootstrap n'ime modal, naanị akwụ .rown'ime .modal-bodywee jiri klaasị sistemu grid nkịtị.

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

Ọdịnaya modal dị iche iche dabere na bọtịnụ mkpata

Nwee ụyọkọ bọtịnụ niile na-akpalite otu modal, naanị nwere ọdịnaya dịtụ iche? Jiri event.relatedTargetna njirimara HTMLdata-* (ikekwe site na jQuery ) iji gbanwee ọdịnaya nke modal dabere na bọtịnụ a pịrị. Hụ docs Modal Events maka nkọwa na 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)
})

Ojiji

Ngwa mgbakwunye modal na-agbanwe ọdịnaya gị zoro ezo na ọchịchọ, site na njirimara data ma ọ bụ Javascript. Ọ na-agbakwụnye .modal-openna <body>ịkagbu omume mpịakọta ndabara ma na-ebute a .modal-backdropiji nye mpaghara ọpịpị maka ịchụpụ modals egosiri mgbe ịpị na mpụga modal.

Site na njirimara data

Mee modal rụọ ọrụ na-edeghị Javascript. Tọọ data-toggle="modal"na ihe njikwa, dị ka bọtịnụ, yana otu data-target="#foo"ma ọ bụ href="#foo"iji lekwasịrị anya otu modal ka ị gbanwee.

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

Site JavaScript

Kpọọ modal nwere id myModalnwere otu ahịrị Javascript:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-backdrop="".

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

Ụzọ

.modal(options)

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka modal. Nabata nhọrọ nhọrọ object.

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

.modal('toggle')

Iji aka na-atụgharị modal. Na-alaghachikwute onye na-akpọ oku tupu egosiri modal ma ọ bụ zoo (ya bụ tupu ihe omume shown.bs.modalma ọ bụ hidden.bs.modalihe emee).

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

.modal('show')

Iji aka na-emepe modal. Na-alaghachikwute onye na-akpọ oku tupu egosiri modal n'ezie (ya bụ tupu shown.bs.modalmmemme emee).

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

.modal('hide')

Iji aka na-ezobe modal. Na-alaghachikwute onye na-akpọ oku tupu ezobe modal ahụ (ya bụ tupu hidden.bs.modalmmemme emee).

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

.modal('handleUpdate')

Na-emezi ọnọdụ modal ahụ ka ọ ghara imechi akwụkwọ mpịakọta ma ọ bụrụ na otu ga-apụta, nke ga-eme ka modal wulie elu n'aka ekpe.

Naanị achọrọ mgbe ịdị elu nke modal gbanwere mgbe ọ na-emeghe.

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

Ihe omume

Klas modal Bootstrap na-ekpughe ihe omume ole na ole maka ịbanye n'ime ọrụ modal.

A na-achụpụ ihe omume modal na modal n'onwe ya (ya bụ na <div class="modal">).

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

Mbudata.js _

Ihe atụ

Tinye menu ndọda n'ihe fọrọ nke nta ka ọ bụrụ ihe ọ bụla nwere ngwa mgbakwunye a dị mfe, gụnyere navbar, taabụ, na ọgwụ.

N'ime navbar

N'ime ọgwụ

Ojiji

Site na njirimara data ma ọ bụ Javascript, ngwa mgbakwunye na-atụgharị ọdịnaya zoro ezo (nchịkọta mkpọda) site na ịtụgharị .openklaasị na ihe ndepụta nne na nna.

Na ngwaọrụ mkpanaaka, imepe ndọda na-agbakwunye .dropdown-backdropdị ka mpaghara mgbata maka imechi menu ndetu mgbe ị na-akụ na mpụga menu, ihe achọrọ maka nkwado iOS kwesịrị ekwesị. Nke a pụtara na ịgbanwee site na menu ndọpụta mepere emepe gaa na menu ndetu dị iche chọrọ mgbakwunye mgbakwunye na mkpanaka.

Mara: A data-toggle="dropdown"na-adabere na njirimara a maka imechi menus dropdown na ọkwa ngwa, yabụ ọ dị mma iji ya mgbe niile.

Site na njirimara data

Tinye data-toggle="dropdown"na njikọ ma ọ bụ bọtịnụ ka ịgbanwee mkpọda.

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

Iji mee ka URL ghara ịdị na ya na bọtịnụ njikọ, jiri data-targetnjirimara kama 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>

Site JavaScript

Kpọọ dropdowns site na Javascript:

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

Nhọrọ

Ọ dịghị

Ụzọ

$().dropdown('toggle')

Na-atụgharị menu mwụda nke navbar enyere ma ọ bụ igodo taabụ.

Ihe omume

A na-achụpụ mmemme ndakpọ niile na .dropdown-menummewere nne na nna.

Ihe mwụda niile nwere relatedTargetakụrụngwa, nke uru ya bụ mmewere arịlịka na-atụgharị.

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

ScrollSpy scrollspy.js

Ọmụmaatụ na navbar

Ihe mgbakwunye ScrollSpy bụ maka imelite ebumnuche nav na-akpaghị aka dabere na ọnọdụ mpịakọta. Pịgharịa mpaghara n'okpuru ebe ịnya ụgbọ mmiri wee lelee klaasị na-agbanwe agbanwe. A ga-eme ka ọ pụta ìhè nke obere ihe ndọpụta.

Ojiji

Na-achọ ndokwa nke ikwu

N'agbanyeghị usoro mmejuputa atumatu, scrollspy chọrọ iji position: relative;na mmewere ị na-enyocha. N'ọtụtụ ọnọdụ, nke a bụ <body>. Mgbe ị na-atụgharị na ihe ndị ọzọ na-abụghị nke <body>, jide n'aka na ị nwere heightnhazi ma overflow-y: scroll;tinye ya.

Site na njirimara data

Ka ịtinye omume scrollspy ngwa ngwa na igodo topbar gị, gbakwunye data-spy="scroll"na mmewere ịchọrọ iledo (kacha nke a ga-abụ <body>). Wee tinye data-targetnjirimara na ID ma ọ bụ klas nke ihe nne na nna nke .navakụrụngwa Bootstrap ọ bụla.

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>

Site JavaScript

Ka ịgbakwunye position: relative;na CSS gị, kpọọ scrollspy site na Javascript:

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

Ụzọ

.scrollspy('refresh')

Mgbe ị na-eji scrollspy yana mgbakwunye ma ọ bụ wepụ ihe ndị sitere na DOM, ị ga-akpọ usoro ume ọhụrụ dị ka:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-offset="".

Ihe omume

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

Taabụ enwere ike ịtụgharị.js

Ihe atụ taabụ

Tinye ngwa ngwa taabụ arụ ọrụ ike ka ị gbanwee site na pane nke ọdịnaya mpaghara, ọbụlagodi site na nchịkọta nhọrọ. Anaghị akwado taabụ akwụ akwụrụ.

Ojiji

Kwado taabụ tabbable site na Javascript (taabụ ọ bụla kwesịrị ịgbalite n'otu n'otu):

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

Ị nwere ike ịgbalite taabụ n'otu n'otu n'ụzọ dị iche iche:

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

Akara akara

Ị nwere ike ịgbalite taabụ ma ọ bụ pill navigation na-edeghị Javascript ọ bụla site na ịkọwapụta data-toggle="tab"ma ọ bụ data-toggle="pill"na mmewere. Ịgbakwunye navna nav-tabsklaasị na taabụ ga-etinye aka na nhazi taabụul Bootstrap , ebe ị na-agbakwunye na klaasị ga-etinye ụdị pill .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>

Mbelata mmetụta

Iji mee ka taabụ daa, tinye .fadena nke ọ bụla .tab-pane. Iberibe taabụ nke mbụ ga-enwerịrịrịrị .inime ka a hụ ọdịnaya mbụ.

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

Ụzọ

$().tab

Na-arụ ọrụ mmemme taabụ na akpa ọdịnaya. Tab kwesịrị inwe ma ọ data-targetbụ ihe hrefezubere iche maka ọnụ akpa na DOM. N'ihe atụ ndị dị n'elu, taabụ bụ <a>s nwere data-toggle="tab"njirimara.

.tab('show')

Họrọ taabụ enyere wee gosi ọdịnaya metụtara ya. Taabụ ọ bụla ahọpụtara na mbụ na-aghọ nke anaghị ahọpụtara yana ọdịnaya metụtara ya zoro ezo. Na-alaghachi na onye na-akpọ oku tupu egosiri pane taabụ n'ezie (ya bụ tupu shown.bs.tabmmemme emee).

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

Ihe omume

Mgbe ị na-egosi taabụ ọhụrụ, mmemme ahụ na-agba ọkụ n'usoro a:

1. hide.bs.tab(na taabụ na-arụ ọrụ ugbu a)
2. show.bs.tab(na taabụ a ga-egosi)
3. hidden.bs.tab(na taabụ arụ ọrụ gara aga, otu maka mmemme hide.bs.tabahụ)
4. shown.bs.tab(na taabụ egosiri ọhụrụ na-arụ ọrụ, otu maka mmemme show.bs.tabahụ)

Ọ bụrụ na ọ nweghị taabụ na-arụ ọrụ, mgbe ahụ, agaghị achụpụ ihe omume hide.bs.tabna mmemme.hidden.bs.tab

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

Ntuziaka Tooltip.js

Site na ngwa mgbakwunye jQuery.tipsy mara mma nke Jason Frame dere; Ntuziaka ngwaọrụ bụ ụdị emelitere, nke anaghị adabere na onyonyo, jiri CSS3 maka eserese, yana njirimara data maka nchekwa aha mpaghara.

Agaghị egosipụta ndụmọdụ ndụmọdụ nwere aha ogologo efu.

Ihe atụ

Gaa na njikọ dị n'okpuru ka ịhụ ndụmọdụ ndụmọdụ:

Ntụpọ ngwaọrụ kwụ ọtọ

Nhọrọ anọ dị: n'elu, aka nri, ala na aka ekpe kwadoro.

Ụzọ anọ

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

Ojiji

Ngwa mgbakwunye Tooltip na-ewepụta ọdịnaya na akara n'ọchịchọ, yana site na ndabara na-etinye ndụmọdụ ngwaọrụ mgbe ihe mkpalite ha gasịrị.

Kpalite ntụnye aka site na Javascript:

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

Akara akara

Ihe nrịbama achọrọ maka ngwa ọrụ bụ naanị njiri mara datayana titlena mmewere HTML ịchọrọ ịnwe ntụnye aka. Ihe nrịbama emepụtara nke ngwa ọrụ dị mfe, n'agbanyeghị na ọ chọrọ ọnọdụ (site na ndabara, topnke ngwa mgbakwunye setịpụrụ).

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-animation="".

Ụzọ

$().tooltip(options)

Na-ejikọta onye na-ahụ maka ndụmọdụ ngwaọrụ na mkpokọta mmewere.

.tooltip('show')

Na-ekpughe ngwa ọrụ mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosipụta ngwa ọrụ (ya bụ tupu shown.bs.tooltipmmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-akpalite ntụpọ ngwá ọrụ. Agaghị egosipụta ndụmọdụ ndụmọdụ nwere aha ogologo efu.

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

.tooltip('hide')

Na-ezobe ntụaka ngwa ọrụ mmewere. Na-alaghachikwute onye na-akpọ oku tupu ezobe ngwa ọrụ (ya bụ tupuhidden.bs.tooltip mmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-akpalite ntụpọ ngwá ọrụ.

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

.tooltip('toggle')

Na-atụgharị ihe ntụnye aka nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosipụta ma ọ bụ ezoro ezo emetụ aka (ya bụ tupu ihe shown.bs.tooltipomume hidden.bs.tooltipahụ emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-akpalite ntụpọ ngwá ọrụ.

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

.tooltip('destroy')

Na-ezo ma na-ebibi ngwa ọrụ mmewere. Enweghị ike ibibi ndụmọdụ ndị na-eji ndị nnọchi anya (nke emepụtara site na iji selectornhọrọ ) n'otu n'otu na ihe na-akpali akpali.

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

Ihe omume

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

Popovers popover.js

Tinye obere ihe machie nke ọdịnaya, dị ka ndị dị na iPad, na ihe ọ bụla maka ozi nke abụọ nke ụlọ.

Popovers nke aha ha na ọdịnaya ha bụ ogologo efu anaghị egosipụta.

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

Ihe atụ

Popover kwụ ọtọ

Nhọrọ anọ dị: n'elu, aka nri, ala na aka ekpe kwadoro.

Ihe ngosi dị ndụ

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

Ụzọ anọ

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

Wepụ na ịpị ọzọ

Jiri focusmkpalite ka ịchụpụ popovers na ịpị na-esote nke onye ọrụ na-eme.

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

Ojiji

Kwado popovers site na Javascript:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-animation="".

Ụzọ

$().popover(options)

Na-ebute popovers maka mkpokọta mmewere.

.popover('show')

Na-ekpughe popover nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosiri popover (ya bụ, tupu shown.bs.popovermmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-ebute popover. Popovers nke aha ha na ọdịnaya ha bụ ogologo efu anaghị egosipụta.

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

.popover('hide')

Na-ezobe popover nke mmewere. Na-alaghachikwuru onye na-akpọ oku tupu ezobe popover (ya bụ tupuhidden.bs.popover mmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-ebute popover.

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

.popover('toggle')

Na-atụgharị popover nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosiri ma ọ bụ zoo popover (ya bụ tupu ihe omume shown.bs.popoverma ọ bụ hidden.bs.popoverihe emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-ebute popover.

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

.popover('destroy')

Na-ezo ma na-ebibi popover nke mmewere. Popovers na-eji nnọchiteanya (nke a na-emepụta site na iji selectornhọrọ ) enweghị ike ibibi n'otu n'otu na ihe na-akpali akpali.

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

Ihe omume

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

Ozi mkpu mkpu.js

Ngosipụta ihe atụ

Tinye ọrụ achụpụ na ozi njikere niile na ngwa mgbakwunye a.

Mgbe ị na-eji .closebọtịnụ, ọ ga-abụrịrị nwa mbụ nke .alert-dismissiblena ọ nweghị ọdịnaya ederede nwere ike ịbịa n'ihu ya na akara ngosi.

Ojiji

Naanị tinyedata-dismiss="alert" na bọtịnụ mmechi gị iji nye ọrụ nso nsonye na-akpaghị aka. Imechi mkpu na-ewepụ ya na DOM.

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

Iji mee ka ngosi gị jiri animation mgbe emechiri, hụ na ha nwere .fadena.in klaasị etinyegoro na ha.

Ụzọ

$().alert()

Na-eme ka anya na-ege ntị maka ihe omume pịa na ihe ndị sitere na nke nwere data-dismiss="alert"njirimara. (Ọ dịghị mkpa mgbe ị na-eji data-api's auto-mmalite.)

$().alert('close')

Na-emechi mkpu site na iwepu ya na DOM. Ọ bụrụ na .fadena.in klaasị dị na mmewere, njikere ga-apụ apụ tupu ewepụ ya.

Ihe omume

Ngwa mgbakwunye njikere Bootstrap na-ekpughere ihe omume ole na ole maka itinye aka n'ime ọrụ njikere.

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

bọtịnụ bọtịnụ.js

Jiri bọtịnụ mee ihe ndị ọzọ. Bọtịnụ njikwa na-ekwu ma ọ bụ mepụta otu bọtịnụ maka ihe ndị ọzọ dị ka ogwe ngwaọrụ.

Ọchịchị

Tinye data-loading-text="Loading..."ka iji ọnọdụ nbudata na bọtịnụ.

Akwụsịla atụmatụ a kemgbe v3.3.5 ma wepụrụ ya na 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>

Otu ngbanwe

Tinye data-toggle="button"ka ịgbalite toggling n'otu bọtịnụ.

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

Igbe nbanye / Redio

Tinye data-toggle="buttons"na .btn-groupigbe nrịbama ma ọ bụ ntinye redio nwere ka ị nwee ike ịtụgharị n'ụdị ha.

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

Ụzọ

$().button('toggle')

Tụgharịa steeti. Na-enye bọtịnụ ka ọ dị ka agbanyere ya.

$().button('reset')

Tọgharịa steeti bọtịnụ - gbanwee ederede na ederede izizi. Usoro a enweghị isi wee laghachi tupu ntọgharị ahụ agwụcha.

$().button(string)

Na-agbanwe ederede na ọnọdụ ederede akọwapụtara data ọ bụla.

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

Ndakpọ ala.js

Ngwa mgbakwunye na-agbanwe agbanwe nke na-eji obere klaasị mee mgbanwe omume dị mfe.

Ọmụmaatụ

Pịa bọtịnụ dị n'okpuru iji gosi ma zoo ihe ọzọ site na mgbanwe klaasị:

• .collapsena-ezochi ọdịnaya
• .collapsingetinyere n'oge mgbanwe
• .collapse.inna-egosi ọdịnaya

Ị nwere ike iji njikọ nwere hrefnjirimara, ma ọ bụ bọtịnụ nwere data-targetàgwà ahụ. N'okwu abụọ a, data-toggle="collapse"achọrọ ya.

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

Ihe atụ Accordion

Gbatịkwuo omume ndakpọ ndabara iji mepụta accordion na akụkụ panel.

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

Ọ dịkwa ike iji s gbanwee .panel-bodys .list-group.

Ojiji

Ngwa mgbakwunye ndakpọ na-eji klaasị ole na ole iji jikwaa ibuli elu:

• .collapsena-ezochi ọdịnaya
• .collapse.inna-egosi ọdịnaya
• .collapsinga na-agbakwụnye mgbe mgbanwe ahụ malitere, ma wepụ ya mgbe ọ gwụchara

Enwere ike ịchọta klas ndị a na component-animations.less.

Site na njirimara data

Naanị tinye data-toggle="collapse"na a data-targetna mmewere iji nye njikwa nke mmewere nwere ike ịdaba na-akpaghị aka. Àgwà ahụ data-targetna-anabata onye nhọpụta CSS iji tinye ọdịda ahụ. Jide n'aka na ịtinye klas collapseahụ na mmewere nwere ike ịdaba. Ọ bụrụ na ị ga-achọ ka ọ meghee, tinye klaasị agbakwunyere in.

Ka ịgbakwunye njikwa otu accordion dị ka njikwa nwere ike imebi, tinye njirimara data data-parent="#selector". Rụtụ aka na ngosi ngosi ka ịhụ nke a na-arụ ọrụ.

Site JavaScript

Jiri aka jiri:

$('.collapse').collapse()

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-parent="".

Ụzọ

.collapse(options)

Na-eme ka ọdịnaya gị rụọ ọrụ ka ihe nwere ike imebi. Nabata nhọrọ nhọrọ object.

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

.collapse('toggle')

Na-atụgharị ihe nwere ike ịdaba ka egosiri ma ọ bụ zoo. Na-alaghachikwute onye na-akpọ oku tupu egosiri ma ọ bụ zoo ihe nwere ike ịdaba (ya bụ tupu ihe omume shown.bs.collapsema ọ bụ hidden.bs.collapseemee).

.collapse('show')

Na-egosi mmewere nwere ike ịdaba. Na-alaghachikwute onye na-akpọ oku tupu egosipụta mmewere nwere ike ịdaba (ya bụ tupu shown.bs.collapsemmemme emee).

.collapse('hide')

Na-ezobe mmewere nwere ike ịdaba. Na-alaghachikwute onye na-akpọ oku tupu ezobe ihe omume nwere ike ịdaba (ya bụ, tupu ihe hidden.bs.collapseomume emee).

Ihe omume

Klas ndakpọ Bootstrap na-ekpughe ihe omume ole na ole maka itinye aka n'ọrụ ọdịda.

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

Carousel carousel.js

Ngwa ihe ngosi mmịfe maka ịgba ígwè site na ihe ndị dị ka carousel. A naghị akwado carousels akwụkwụ.

Ihe atụ

Nke gara aga Osote

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

Nkọwa okwu nhọrọ

Tinye nkọwa okwu na slide gị n'ụzọ dị mfe na .carousel-captionmmewere dị n'ime nke ọ bụla .item. Debe naanị HTML nhọrọ ọ bụla n'ime ebe ahụ, a ga-ahazi ya ozugbo wee hazie ya.

Akara slide mbụ

Nulla vitae elit libero, a pharetra augue mollis interdum.

Akara slide nke abụọ

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Akara ngosi mmịfe nke atọ

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Nke gara aga Osote

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

Ojiji

Ọtụtụ carousels

Carousels na-achọ ka iji ihe iddị n'elu akpa (nke .carousel) maka njikwa carousel na-arụ ọrụ nke ọma. Mgbe ị na-agbakwunye ọtụtụ carousels, ma ọ bụ mgbe ị na-agbanwe carousel's id, jide n'aka na imelite njikwa ndị dị mkpa.

Site na njirimara data

Jiri njirimara data iji jikwaa ọnọdụ carousel ngwa ngwa. data-slidena-anabata mkpụrụokwu prevma ọ bụ next, nke na-agbanwe ọnọdụ slide dabere na ọnọdụ ya ugbu a. N'aka nke ọzọ, jiri data-slide-toiji nyefee akara ngosi mmịfe raw na carousel data-slide-to="2", nke na-atụgharị ọnọdụ mmịfe ahụ gaa n'otu ndeksi malite na 0.

A data-ride="carousel"na-eji njirimara ahụ akara carousel ka ọ na-amalite na ibu ibe. Enweghị ike iji ya na (nke na-adịghị mkpa na enweghị isi) mmalite Javascript doro anya nke otu carousel.

Site JavaScript

Jiri aka kpọọ carousel:

$('.carousel').carousel()

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-interval="".

Ụzọ

.carousel(options)

Na-ebute carousel na nhọrọ nhọrọ objectwee malite ịnya igwe site na ihe.

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

.carousel('cycle')

Na-agagharị na ihe carousel site n'aka ekpe gaa n'aka nri.

.carousel('pause')

Na-akwụsị carousel site n'ịgba ígwè na ihe.

.carousel(number)

Na-eme okirikiri carousel gaa n'otu etiti (0 dabere, yiri n'usoro).

.carousel('prev')

Ọkpụkpụ gaa na ihe gara aga.

.carousel('next')

Chọgharịa gaa na ihe na-esote.

Ihe omume

Klas carousel Bootstrap na-ekpughe ihe omume abụọ maka itinye aka na ọrụ carousel.

Ihe omume abụọ a nwere ihe mgbakwunye ndị a:

• direction: Ntuziaka nke carousel na-amị amị (ma "left"ọ bụ "right").
• relatedTarget: Ihe DOM nke a na-agbanye n'ime ebe dị ka ihe na-arụ ọrụ.

A na-agbapụ ihe omume carousel niile na carousel n'onwe ya (ya bụ na <div class="carousel">).

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

Mgbakwunye affix.js

Ọmụmaatụ

Ihe mgbakwunye affix position: fixed;na-agbanye ma gbanyụọ, na-eṅomi mmetụta ahụrụ na position: sticky;. The subnavigation n'aka nri bụ a ndụ ngosi nke affix plugin.

Ojiji

Jiri ngwa mgbakwunye affix site na njirimara data ma ọ bụ jiri aka gị jiri Javascript nke gị. N'ọnọdụ abụọ a, ị ga-enwerịrị CSS maka ndowe na obosara nke ọdịnaya gị etinyere.

Mara: Ejila ngwa mgbakwunye affix na mmewere dị n'ime ihe nwere ọnọdụ dịtụ, dị ka kọlụm dọtara ma ọ bụ kpalie, n'ihi ahụhụ na-enye Safari .

Ndokwa site na CSS

Ngwa mgbakwunye a na-atụgharị n'etiti klaasị atọ, nke ọ bụla na-anọchi anya otu steeti: .affix, .affix-top, na .affix-bottom. Ị ga-enyerịrị ụdị ahụ, ewezuga position: fixed;na .affix, maka klaasị ndị a n'onwe gị (na-adabere na ngwa mgbakwunye a) iji jikwaa ọnọdụ ndị ahụ.

Nke a bụ ka ngwa mgbakwunye affix si arụ ọrụ:

1. Iji malite, ngwa mgbakwunye na-agbakwụnye .affix-topiji gosi mmewere nọ n'ọnọdụ ya kachasị elu. N'ebe a, ọ dịghị mkpa idowe CSS.
2. Ịgafe mmewere nke ịchọrọ ka etinye ya kwesịrị ịkpalite ntinye n'ezie. Nke a bụ ebe .affixedochiri .affix-topna ịtọọ position: fixed;(nke Bootstrap's CSS nyere).
3. Ọ bụrụ na akọwapụtara nkwụghachi nke ala, ịpịgharịa gafe ya kwesịrị .affixiji .affix-bottom. Ebe ọ bụ na akwụghị ụgwọ bụ nhọrọ, ịtọ otu chọrọ ka ịtọọ CSS kwesịrị ekwesị. N'okwu a, gbakwunye position: absolute;mgbe ọ dị mkpa. Ngwa mgbakwunye ahụ na-eji njirimara data ma ọ bụ nhọrọ Javascript iji chọpụta ebe a ga-etinye mmemme site na ebe ahụ.

Soro usoro ndị a dị n'elu ka ịtọọ CSS gị maka otu nhọrọ ojiji dị n'okpuru.

Site na njirimara data

Ka ịgbakwunye omume affix ngwa ngwa na mmewere ọ bụla, tinye naanị data-spy="affix"na mmewere ịchọrọ iledo. Jiri nkwụghachi iji kọwaa mgbe ị ga-atụgharị pinning nke mmewere.

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

Site JavaScript

Kpọọ ngwa mgbakwunye affix site na Javascript:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-offset-top="200".

Ụzọ

.affix(options)

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka ọdịnaya etinyere. Nabata nhọrọ nhọrọ object.

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

.affix('checkPosition')

Na-atụgharị ọnọdụ nke affix dabere na nha, ọnọdụ, na ọnọdụ mpịakọta nke ihe ndị dị mkpa. A na-agbakwunye .affix, .affix-top, na .affix-bottomklaasị na ma ọ bụ wepụ ya na ọdịnaya etinyere dịka steeti ọhụrụ ahụ siri dị. Ekwesịrị ịkpọ usoro a mgbe ọ bụla agbanwere akụkụ nke ọdịnaya etinyere ma ọ bụ ihe ebumnuche, iji hụ na edobere ọdịnaya etinyere nke ọma.

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

Ihe omume

Ngwa mgbakwunye Bootstrap na-ekpughe ihe omume ole na ole maka itinye aka na arụ ọrụ mgbakwunye.