Nkatsakanyo

Hi munhu hi xiyexe kumbe leyi hlengeletiweke

Ti-plugin ti nga katsiwa hi toxe (hi ku tirhisa *.jstifayela ta Bootstrap ha yin’we-yin’we), kumbe hinkwato hi nkarhi wun’we (hi ku tirhisa bootstrap.jskumbe leti hungutiweke bootstrap.min.js).

Swihlawulekisi swa datha

U nga tirhisa ti-plugin hinkwato ta Bootstrap ntsena hi ku tirhisa API ya markup handle ko tsala layini yin’we ya JavaScript. Leyi i API ya xiyimo xo sungula ya Bootstrap naswona yi fanele ku va mhaka ya wena yo sungula loko u tirhisa plugin.

Loko swi vuriwa sweswo, eka swiyimo swin’wana swi nga ha navela ku tima ntirho lowu. Hikwalaho, hi tlhela hi nyika vuswikoti byo tshikisa API ya xihlawulekisi xa datha hi ku susa swiendlakalo hinkwaswo eka tsalwa leri nga na ndhawu ya mavito hi data-api. Leswi swi languteka hi ndlela leyi:

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

Handle ka sweswo, ku kongomisa eka xiengetelo xo karhi, katsa ntsena vito ra xiengetelo tanihi ndhawu ya mavito swin’we ni ndhawu ya mavito ya data-api yo fana ni leyi:

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

API ya minongonoko

Hi tlhela hi tshemba leswaku u fanele ku kota ku tirhisa ti-plugin hinkwato ta Bootstrap ntsena hi ku tirhisa JavaScript API. Ti-API hinkwato ta mani na mani i tindlela tin’we, leti nga ni tinketana, naswona ti vuyisa nhlengeleto lowu endliweke hi wona.

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

Maendlelo hinkwawo ya fanele ku amukela nchumu wa swihlawulekisi swa ku hlawula, ntambhu leyi kongomisaka eka ndlela yo karhi, kumbe ku nga ri na nchumu (leyi sungulaka xiengetelo hi mahanyelo ya xiviri):

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

Plugin yin’wana na yin’wana yi tlhela yi paluxa muaki wa yona wa raw eka Constructornhundzu: $.fn.popover.Constructor. Loko u lava ku kuma xikombiso xo karhi xa plugin, xi vuyise hi ku kongoma eka elemente: $('[rel="popover"]').data('popover').

Switirhisiwa swa ntolovelo

U nga cinca swiletelo swa xiviri swa xiengetelo hi ku cinca Constructor.DEFAULTSnchumu wa xiengetelo:

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

Ku hava ku lwisana

Minkarhi yin’wana swa laveka ku tirhisa ti-plugin ta Bootstrap ni swivumbeko swin’wana swa UI. Eka swiyimo leswi, ku tlumbana ka ndhawu ya mavito ku nga humelela nkarhi wun’wana. Loko leswi swi humelela, u nga ha vitana .noConflicteka plugin leyi u lavaka ku tlherisela nkoka wa yona.

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

Swiendlakalo

Bootstrap yi nyika swiendlakalo swa ntolovelo eka swiendlo swo hlawuleka swa ti-plugin to tala. Hi ntolovelo, leswi swi ta hi xivumbeko xa xiendliwa lexi nga heriki na xiendliwa lexi hundzeke - laha xiendliwa lexi nga heriki (ex. show) xi pfuriwaka eku sunguleni ka xiendlakalo, naswona xivumbeko xa xona xa xiendliwa lexi hundzeke (ex. shown) xi pfuriwa loko xiendlo xi hetisisiwa.

Ku sukela eka 3.0.0, swiendlakalo hinkwaswo swa Bootstrap swi hambanisiwile hi mavito.

Swiendlakalo hinkwaswo leswi nga heriki swi nyika preventDefaultntirho. Leswi swi nyika vuswikoti byo yimisa ku hetisisiwa ka xiendlo xi nga si sungula.

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

Xihlantswi xo basisa

Tooltips na Popovers swi tirhisa sanitizer ya hina leyi akiweke ku sanitize swihlawulekisi leswi amukelaka HTML.

Nhlayo ya xiviri whiteListhi leyi landzelaka:

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

Loko u lava ku engetela mimpimo leyintshwa eka default leyi whiteListu nga endla leswi landzelaka:

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)

Loko u lava ku hundza eka sanitizer ya hina hikuva u tsakela ku tirhisa layiburari leyi tinyiketeleke, xikombiso DOMPurify , u fanele ku endla leswi landzelaka:

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

Tinomboro ta vuhundzuluxeri

Vuhundzuluxi bya yin’wana na yin’wana ya ti-plugin ta jQuery ta Bootstrap byi nga nghenisiwa hi ku tirhisa VERSIONnhundzu ya muaki wa xiengetelo. Xikombiso, eka xiengetelo xa xitsundzuxo xa switirhisiwa:

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

Ku hava ti fallback to hlawuleka loko JavaScript yi nga tirhi

Ti-plugin ta Bootstrap a ti tlheleli endzhaku hi ndlela yo hlawuleka loko JavaScript yi nga tirhi. Loko u khathala hi ntokoto wa mutirhisi eka mhaka leyi, tirhisa <noscript>ku hlamusela xiyimo (na ndlela yo tlhela u pfumelela JavaScript) eka vatirhisi va wena, na/kumbe ku engetela ti-fallback ta wena ta ntolovelo.

Ku cinca ka ku cinca.js

Malunghana ni ku cinca-cinca

Ku kuma switandzhaku swo olova swa ku cinca, katsa transition.jskan’we etlhelo ka tifayela tin’wana ta JS. Loko u tirhisa leyi hlengeletiweke (kumbe leyi hungutiweke) bootstrap.js, a ku na xilaveko xo katsa leswi—se swi kona.

Leswi nga endzeni

Transition.js i mupfuni wa xisekelo wa transitionEndswiendlakalo xikan’we na xifaniso xa ku cinca xa CSS. Yi tirhisiwa hi ti-plugin tin’wana ku kambela nseketelo wa ku cinca ka CSS ni ku khoma ku cinca loku lenga-lengaka.

Ku tshikisa ku cinca-cinca

Ku cinca ku nga tshikiwa emisaveni hinkwayo hi ku tirhisa xiphemu xa JavaScript lexi landzelaka, lexi faneleke ku ta endzhaku ka loko transition.js(kumbe bootstrap.jskumbe bootstrap.min.js, tanihilaha swi nga ha vaka hakona) xi layichiwile:

$.support.transition = false

Timodali ta modal.js

Timodali ti olovisiwile, kambe ti cinca-cinca, switsundzuxo swa mbulavurisano leswi nga na ntirho wa le hansi lowu lavekaka na swihlawulekisi swo tlhariha.

Hikwalaho ka ndlela leyi HTML5 yi hlamuselaka semantiki ya yona ha yona, autofocusxihlawulekisi xa HTML a xi na vuyelo eka timodali ta Bootstrap. Leswaku u fikelela vuyelo lebyi fanaka, tirhisa JavaScript yin’wana leyi endleriweke wena:

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

Swikombiso

Xikombiso xa xiyimo xa le henhla

Modal leyi humesiweke leyi nga na nhlokomhaka, miri, na sete ya swiendlo eka xiphemu xa le hansi.

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

Demo leyi hanyaka

Cinca modal hi ku tirhisa JavaScript hi ku tikhoma buti leyi nga laha hansi. Yi ta rhetela ehansi yi tlhela yi nyamalala ku suka ehenhla ka tluka.

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

Tisayizi leti nga hlawuriwa

Timodali ti na tisayizi timbirhi to hlawula, leti kumekaka hi ku tirhisa titlilasi ta mucinci leti nga ta vekiwa eka .modal-dialog.

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

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

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

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

Susa swifaniso leswi hanyaka

Eka ti-modal leti humelelaka ntsena ematshan’weni yo nyamalala leswaku ti ta languta, susa .fadetlilasi eka mfungho wa wena wa modal.

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

Hi ku tirhisa endlelo ra gridi

Ku tirhisa sisiteme ya giridi ya Bootstrap endzeni ka modal, ntsena nest .rows endzeni ka .modal-bodyivi u tirhisa titlilasi ta sisiteme ya gridi ya ntolovelo.

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

Ku cinca-cinca ka modal content hi ku ya hi trigger button

Xana u na ntlhambi wa swikomba-nkarhi leswi hinkwaswo swi pfuxaka modal yin’we, ntsena hi swilo leswi hambaneke nyana? Tirhisa event.relatedTargetna swihlawulekisi swa HTMLdata-* (swi nga endleka hi ku tirhisa jQuery ) ku cinca-cinca leswi nga endzeni ka modal ku ya hi leswaku i buti yihi leyi tsindziyeleke. Vona ti docs ta Modal Events ku kuma vuxokoxoko eka 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)
})

Matirhiselo

Plugin ya modal yi cinca-cinca swilo swa wena leswi fihliweke loko swi laviwa, hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Yi tlhela yi engetela .modal-openeka <body>ku tlula mahanyelo ya ku rhendzeleka ka xiviri naswona yi humesa a .modal-backdropku nyika ndhawu yo tsindziyela yo hlongola timodali leti kombisiweke loko u tsindziyela ehandle ka modali.

Hi ku tirhisa swihlawulekisi swa data

Endla leswaku modal yi tirha handle ko tsala JavaScript. Seta data-toggle="modal"eka elemente ya controller, ku fana na button, xikan’we na a data-target="#foo"kumbe href="#foo"ku kongomisa modal yo karhi ku toggle.

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

Hi ku tirhisa JavaScript

Fonela modal hi id myModalhi layini yin’we ya JavaScript:

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-backdrop="".

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

Maendlelo

.modal(options)

Ku endla leswaku nhundzu ya wena yi tirha tanihi modal. Ku amukela swihlawulekisi swa ku hlawula object.

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

.modal('toggle')

Hi voko u cinca-cinca modal. Ku tlhelela eka mufoyini loko modal yi nga si kombisiwa kumbe ku tumbetiwa hakunene (i.e. emahlweni ka ku humelela shown.bs.modalkumbe hidden.bs.modalxiendlakalo).

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

.modal('show')

Hi voko u pfula modal. Ku tlhelela eka mufoyini loko modal yi nga si kombisiwa hakunene (i.e. shown.bs.modalxiendlakalo xi nga si humelela).

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

.modal('hide')

Hi voko u tumbeta modal. Ku tlhelela eka mufoyini loko modal yi nga si fihliwa hakunene (i.e. hidden.bs.modalxiendlakalo xi nga si humelela).

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

.modal('handleUpdate')

Yi lulamisa nakambe xiyimo xa modal ku lwisana na scrollbar loko ko tshuka ku humelela yin’we, leswi nga ta endla leswaku modal yi tlula yi ya eximatsini.

Swi laveka ntsena loko ku tlakuka ka modal ku cinca loko yi pfulekile.

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

Swiendlakalo

Tlilasi ya modal ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa modal.

Swiendlakalo hinkwaswo swa modal swi duvuriwa eka modal hi yoxe (i.e. eka <div class="modal">).

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

Swilo leswi nga ehansi ka dropdown.js

Swikombiso

Engetela timenyu leti nga ehansi eka kwalomu ka xin’wana ni xin’wana hi xiengetelo lexi xo olova, ku katsa ni navbar, tithebhu ni tiphilisi.

Endzeni ka navbar

Endzeni ka tiphilisi

Matirhiselo

Hi ku tirhisa swihlawulekisi swa datha kumbe JavaScript, xiengetelo lexi nga ehansi xi cinca-cinca nhundzu leyi fihliweke (timenyu leyi nga ehansi) hi ku cinca-cinca .opentlilasi eka nchumu wa nxaxamelo wa mutswari.

Eka switirhisiwa swa tiselfoni, ku pfula dropdown swi engetela .dropdown-backdropas a tap area for closing dropdown menus loko u ba ehandle ka menu, xilaveko xa nseketelo lowu faneleke wa iOS. Leswi swi vula leswaku ku cinca ku suka eka menyu leyi pfulekeke leyi nga ehansi ku ya eka menyu leyi hambaneke leyi nga ehansi swi lava ku pompa loku engetelekeke eka movha.

Xiya: data-toggle="dropdown"Xihlawulekisi xi titshege hi xona ku pfala timenyu leti rhetaka eka xiyimo xa xitirhisiwa, hikwalaho i mhaka ya kahle ku tshama u xi tirhisa.

Hi ku tirhisa swihlawulekisi swa data

Engetela data-toggle="dropdown"eka link kumbe button ku cinca-cinca dropdown.

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

Ku hlayisa ti-URL ti nga onhakanga hi swikomba-ndlela swa swihlanganisi, tirhisa data-targetxihlawulekisi ematshan’weni ya 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>

Hi ku tirhisa JavaScript

Fonela swilo leswi nga ehansi hi ku tirhisa JavaScript:

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

Swihlawulekisi

Hava

Maendlelo

$().dropdown('toggle')

Ku cinca-cinca menyu leyi nga ehansi ya navbar leyi nyikiweke kumbe ku famba-famba loku nga ni tithebhu.

Swiendlakalo

Swiendlakalo hinkwaswo swa dropdown swi duvuriwa eka .dropdown-menu's parent element.

Swiendlakalo hinkwaswo swa dropdown swi na relatedTargetnhundzu, leyi nkoka wa yona ku nga elemente ya anchor leyi cinca-cincaka.

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

ScrollSpy xifaniso xa xirhendzevutani.js

Xikombiso eka navbar

Plugin ya ScrollSpy i ya ku pfuxeta hi ku tisungulela swikongomelo swa nav hi ku ya hi xiyimo xa scroll. Skrolela ndhawu leyi nga ehansi ka navbar ivi u hlalela ku cinca ka tlilasi leyi tirhaka. Swilo leswitsongo leswi nga ehansi swi ta kombisiwa na swona.

Matirhiselo

Swi lava ku vekiwa eka xiyimo lexi ringaniseriweke

Ku nga khathariseki ndlela yo tirhisa, scrollspy yi lava ku tirhisiwa position: relative;eka elemente leyi u yi hlotaka. Eka swiyimo swo tala leswi i <body>. Loko u scrollspying eka swiaki swin’wana handle ka <body>, tiyisisa leswaku u na heightsete na ku overflow-y: scroll;tirhisiwa.

Hi ku tirhisa swihlawulekisi swa data

Ku engetela hi ku olova mahanyelo ya scrollspy eka ku famba-famba ka wena ka topbar, engetela data-spy="scroll"eka elemente leyi u lavaka ku hlota eka yona (hi ntolovelo leswi swi ta va swi ri <body>). Kutani engetela data-targetxihlawulekisi hi ID kumbe tlilasi ya elemente ya mutswari ya xiphemu xihi na xihi .navxa Bootstrap.

body {
  position: relative;
}

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

Hi ku tirhisa JavaScript

Endzhaku ko engetela position: relative;eka CSS ya wena, vitana scrollspy hi ku tirhisa JavaScript:

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

Maendlelo

.scrollspy('refresh')

Loko u tirhisa scrollspy hi ku fambisana na ku engetela kumbe ku susa swiaki eka DOM, u ta lava ku vitana ndlela yo pfuxeta ku fana na sweswo:

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-offset="".

Swiendlakalo

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

Tithebhu leti cinca- cincaka tab.js

Xikombiso xa tithebhu

Engetela ntirho wa thebhu wa xihatla, lowu cinca-cincaka ku cinca hi ku tirhisa tipheni ta swilo swa laha kaya, hambi ku ri hi ku tirhisa timenyu leti nga ehansi. Tithebhu leti pfaleriweke a ti seketeriwi.

Matirhiselo

Endla leswaku tithebhu ta tithebhu ti tirha hi ku tirhisa JavaScript (thebhu yin’wana ni yin’wana yi lava ku tirhisiwa hi yoxe):

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

U nga tirhisa tithebhu ha yin’we-yin’we hi tindlela to hlayanyana:

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

Ku fungha swilo

U nga tirhisa ku famba-famba ka thebhu kumbe philisi handle ko tsala JavaScript yihi na yihi hi ku boxa ntsena data-toggle="tab"kumbe data-toggle="pill"eka elemente. Ku engetela titlilasi ta na eka thebhu navswi ta tirhisa xitayili xa thebhu ya Bootstrap , kasi ku engetela titlilasi ta na swi ta tirhisa xitayili xa tiphilisi .nav-tabsulnavnav-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 effect

Ku endla leswaku tithebhu ti nyamalala, engetela .fadeeka yin’wana ni yin’wana .tab-pane. Phejini yo sungula ya thebhu yi fanele ku tlhela yi va na .inku endla leswaku nhundzu yo sungula yi vonaka.

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

Maendlelo

$().tab

Ku tirhisa xiaki xa thebhu na xigwitsirisi xa nhundzu. Tab yi fanele ku va na a data-targetkumbe ku hrefkongomisa eka node ya xikhomela eka DOM. Eka swikombiso leswi nga laha henhla, tithebhu i ti <a>s leti nga na data-toggle="tab"swihlawulekisi.

.tab('show')

Hlawula thebhu leyi nyikiweke ivi yi kombisa leswi fambisanaka na yona. Thebhu yin’wana ni yin’wana leyi a yi hlawuriwile khale yi va leyi nga hlawuriwa naswona swilo leswi fambisanaka na yona swa tumbetiwa.Ku tlhelela eka mufoyini loko phejini ya thebhu yi nga si kombisiwa hakunene (i.e. shown.bs.tabxiendlakalo xi nga si humelela).

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

Swiendlakalo

Loko u kombisa thebhu leyintshwa, swiendlakalo swi pfurha hi ku landzelelana loku landzelaka:

1. hide.bs.tab(eka thebhu leyi tirhaka sweswi)
2. show.bs.tab(eka thebhu leyi nga ta kombisiwa)
3. hidden.bs.tab(eka thebhu leyi tirhaka leyi hundzeke, leyi fanaka ni ya...hide.bs.tab xiendlakalo)
4. shown.bs.tab(eka thebhu leyi nga ha ku kombisiwaka leyi tirhaka leyintshwa, leyi fanaka ni ya...show.bs.tab xiendlakalo)

Loko ku nga ri na thebhu leyi se a yi tirha, kutani hide.bs.tabswiendlakalo swa na hidden.bs.taba swi nge tirhisiwi.

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

Switsundzuxo swa switirhisiwa tooltip.js

Ku hlohloteriwa hi jQuery.tipsy plugin ya kahle swinene leyi tsariweke hi Jason Frame; Switirhisiwa i vuhundzuluxeri lebyi pfuxetiweke, lebyi nga titshegangiki hi swifaniso, byi tirhisa CSS3 eka swifaniso leswi hanyaka, na data-attributes eka vuhlayiselo bya swihloko swa laha kaya.

Switsundzuxo swa switirhisiwa leswi nga ni swihloko swa ku leha ka zero a swi si tshama swi kombisiwa.

Swikombiso

Hover ehenhla ka swihlanganisi leswi nga laha hansi ku vona switsundzuxo swa switirhisiwa:

Xitsundzuxo xa xitirhisiwa xa static

Ku ni swilo swa mune leswi u nga swi hlawulaka: leswi ringanisiweke ehenhla, exineneni, ehansi ni le ximatsi.

Tindlela ta mune

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

Matirhiselo

Plugin ya xitsundzuxo xa switirhisiwa yi humesa nhundzu na ku fungha hi ku landza xilaveko, naswona hi ku tiyimisela yi veka switsundzuxo endzhaku ka elemente ya swona ya xihlohloteri.

Pfuxeta xitsundzuxo xa xitirhisiwa hi ku tirhisa JavaScript:

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

Ku fungha swilo

Ximaki lexi lavekaka xa xitsundzuxo xa xitirhisiwa i dataxihlawulekisi ntsena naswona titleeka elemente ya HTML u navela ku va na xitsundzuxo xa xitirhisiwa. Ku fungha loku endliweke ka xitsundzuxo xa xitirhisiwa ku olovile swinene, hambi leswi ku lavaka xiyimo (hi ku tiyimisela, ku vekiwile eka tophi xiengetelo).

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-animation="".

Maendlelo

$().tooltip(options)

Ku khomanisa xitirhisiwa xa xitirhisiwa eka nhlengeleto wa swiaki.

.tooltip('show')

Ku paluxa xitsundzuxo xa xitirhisiwa xa elemente. Ku tlhelela eka mufoyini xitsundzuxo xa xitirhisiwa xi nga si kombisiwa hakunene (i.e. shown.bs.tooltipxiendlakalo xi nga si humelela). Leswi swi tekiwa tanihi "manual" triggering ya xitirhisiwa. Switsundzuxo swa switirhisiwa leswi nga ni swihloko swa ku leha ka zero a swi si tshama swi kombisiwa.

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

.tooltip('hide')

Ku fihla xitsundzuxo xa xitirhisiwa xa elemente. Ku tlhelela eka mufoyini xitsundzuxo xa xitirhisiwa xi nga si fihliwa hakunene (i.e. hidden.bs.tooltipxiendlakalo xi nga si humelela). Leswi swi tekiwa tanihi "manual" triggering ya xitirhisiwa.

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

.tooltip('toggle')

Ku cinca-cinca xitsundzuxo xa xitirhisiwa xa elemente. Ku tlhelela eka mufoyini xitsundzuxo xa xitirhisiwa xi nga si kombisiwa hakunene kumbe ku fihliwa (i.e. emahlweni ka ku humelela shown.bs.tooltipkumbe hidden.bs.tooltipxiendlakalo). Leswi swi tekiwa tanihi "manual" triggering ya xitirhisiwa.

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

.tooltip('destroy')

Ku tumbeta no herisa xitirhisiwa xa elemente. Switirhisiwa leswi tirhisaka ku rhumeriwa (leswi endliwaka hi ku tirhisa selectornhlawulo ) a swi nge herisiwi hi swoxe eka swiaki swa xihlohloteri swa vatukulu.

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

Swiendlakalo

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

Swivumbiwa swa popover.js

Engetelani swifunengeto leswitsongo swa swilo leswi nga endzeni, ku fana ni leswi nga eka iPad, eka elemente yihi na yihi yo veka rungula ra vumbirhi.

Ti-popover leti nhloko-mhaka ya tona ni leswi nga endzeni ka tona swi nga zero-length a swi si tshama swi kombisiwa.

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

Swikombiso

Popover ya xiyimo xa le henhla

Ku ni swilo swa mune leswi u nga swi hlawulaka: leswi ringanisiweke ehenhla, exineneni, ehansi ni le ximatsi.

Demo leyi hanyaka

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

Tindlela ta mune

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

Dismiss eka ku click loku landzelaka

Tirhisa focustrigger ku hlongola ti popovers eka click leyi landzelaka leyi mutirhisi a yi endlaka.

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

Matirhiselo

Endla leswaku ti-popovers ti tirha hi ku tirhisa JavaScript:

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-animation="".

Maendlelo

$().popover(options)

Ku sungula ti-popovers ta nhlengeleto wa swiaki.

.popover('show')

Ku paluxa popover ya elemente. Ku tlhelela eka mufoyini loko popover yi nga si kombisiwa hakunene (i.e. shown.bs.popoverxiendlakalo xi nga si humelela). Leswi swi tekiwa tani hi "manual" triggering ya popover. Ti-popover leti nhloko-mhaka ya tona ni leswi nga endzeni ka tona swi nga zero-length a swi si tshama swi kombisiwa.

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

.popover('hide')

Ku tumbeta popover ya elemente. Ku tlhelela eka mufoyini loko popover yi nga si fihliwa hakunene (i.e. hidden.bs.popoverxiendlakalo xi nga si humelela). Leswi swi tekiwa tani hi "manual" triggering ya popover.

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

.popover('toggle')

Ku cinca-cinca popover ya elemente. Ku tlhelela eka mufoyini loko popover yi nga si kombisiwa hakunene kumbe ku tumbetiwa (i.e. emahlweni ka ku humelela shown.bs.popoverkumbe hidden.bs.popoverxiendlakalo). Leswi swi tekiwa tani hi "manual" triggering ya popover.

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

.popover('destroy')

Ku tumbeta no herisa popover ya element. Popovers leyi tirhisaka delegation (leswi endliwaka hi ku tirhisa selectoroption ) a yi nge herisiwi hi yoxe eka ti descendant trigger elements.

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

Swiendlakalo

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

Mahungu ya xitsundzuxo alert.js

Xikombiso xa switsundzuxo

Engetela ntirho wo hlongola eka marungula hinkwawo ya xitsundzuxo hi xiengetelo lexi.

Loko u tirhisa .closebuti, yi fanele ku va n’wana wo sungula wa .alert-dismissiblenaswona ku hava nhundzu ya tsalwa leyi nga ta emahlweni ka yona eka ku fungha.

Matirhiselo

Ntsena engetela data-dismiss="alert"eka buti ya wena yo pfala ku nyika hi ku tisungulela ntirho wa ku pfala wa xitsundzuxo. Ku pfala xitsundzuxo swi xi susa eka DOM.

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

Ku endla leswaku switsundzuxo swa wena swi tirhisa animation loko u pfala, tiyisisa leswaku swi na .fadena .intitlilasi leti se ti tirhisiweke eka swona.

Maendlelo

$().alert()

Endla leswaku xitsundzuxo xi yingisela swiendlakalo swa ku tsindziyela eka swiaki swa vatukulu leswi nga na data-dismiss="alert"xihlawulekisi. (A swi bohi loko u tirhisa ku sungula ka data-api hi ku tisungulela.)

$().alert('close')

Ku pfala xitsundzuxo hi ku xi susa eka DOM. Loko titlilasi ta .fadena .inti ri kona eka elemente, xitsundzuxo xi ta nyamalala xi nga si susiwa.

Swiendlakalo

Plugin ya xitsundzuxo ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa xitsundzuxo.

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

Swikomba-nkarhi swa button.js

Endla swo tala hi swikomba-nkarhi. Vulawuri bya swikomba-nkarhi kumbe ku tumbuluxa mintlawa ya swikomba-nkarhi swa swiphemu swo tala swo fana na tibarhi ta switirhisiwa.

Stateful

Engetela data-loading-text="Loading..."ku tirhisa xiyimo xo layicha eka buti.

Xivumbeko lexi xi nga ha tirhisiwi ku sukela eka v3.3.5 naswona xi susiwile eka 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>

Toggle yin’we

Engetela data-toggle="button"ku endla leswaku ku cinca-cinca ku tirha eka buti yin’we.

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

Bokisi ro kambela / Xiya-ni-moya

Engetelani data-toggle="buttons"eka .btn-groupbokisi ro kambela leri nga na kumbe swingheniso swa xiya-ni-moya ku endla leswaku ku cinca-cinca eka switayele swa swona hi ku hambana ka swona.

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

Maendlelo

$().button('toggle')

Ku cinca-cinca xiyimo xa push. Yi nyika button xivumbeko xa leswaku yi tirhisiwile.

$().button('reset')

Ku tlherisela xiyimo xa buti - ku cincana tsalwa eka tsalwa ra masungulo. Endlelo leri i ra asynchronous naswona ri vuya ku nga si hela ku tlhela ku hetiwa hakunene.

$().button(string)

Swi cinca tsalwa eka xiyimo xihi kumbe xihi xa tsalwa leri hlamuseriweke hi datha.

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

Ku wisa collapse.js

Plugin leyi cinca-cincaka leyi tirhisaka titlilasi ti nga ri tingani eka mahanyelo yo olova yo cinca-cinca.

Xikombiso

Click ti buttons leti nga laha hansi ku kombisa no fihla element yin’wana hi ku tirhisa ku cinca ka class:

• .collapseyi fihla leswi nga endzeni
• .collapsingyi tirhisiwa hi nkarhi wa ku cinca
• .collapse.inyi kombisa leswi nga endzeni

U nga tirhisa xihlanganisi lexi nga ni hrefxihlawulekisi, kumbe buti leyi nga ni data-targetxihlawulekisi. Eka swiyimo leswimbirhi, ku data-toggle="collapse"laveka the.

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

Xikombiso xa accordion

Andlala mahanyelo ya ku wisa ya ntolovelo ku tumbuluxa accordion na xiphemu xa 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>

Swi tlhela swi koteka ku cincana ehandle .panel-bodys na .list-groups.

Matirhiselo

Plugin ya ku wa yi tirhisa titlilasi ti nga ri tingani ku khoma ku tlakusa swilo swo tika:

• .collapseyi fihla leswi nga endzeni
• .collapse.inyi kombisa leswi nga endzeni
• .collapsingyi engeteriwa loko ku cinca ku sungula, naswona yi susiwa loko ku herile

Titlilasi leti ti nga kumeka eka component-animations.less.

Hi ku tirhisa swihlawulekisi swa data

Ntsena engetela data-toggle="collapse"na a data-targeteka elemente ku avela hi ku tisungulela vulawuri bya elemente leyi nga pfaleriwaka. Xihlawulekisi data-targetxi amukela xihlawulekisi xa CSS ku tirhisa ku wisa eka xona. Tiyiseka leswaku u engetela tlilasi collapseeka xiaki lexi nga pfaleriwaka. Loko u lava leswaku yi pfuleka hi ku tiyimisela, engetela tlilasi leyi engetelekeke in.

Ku engetela vulawuri bya ntlawa byo fana na accordion eka vulawuri lebyi pfalekaka, engetela xihlawulekisi xa data data-parent="#selector". Languta eka demo ku vona leswi swi ri karhi swi tirha.

Hi ku tirhisa JavaScript

Endla leswaku swi tirha hi voko hi:

$('.collapse').collapse()

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-parent="".

Maendlelo

.collapse(options)

Ku endla leswaku nhundzu ya wena yi tirha tanihi xiaki lexi nga pfaleriwaka. Ku amukela swihlawulekisi swa ku hlawula object.

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

.collapse('toggle')

Ku cinca-cinca xiaki lexi nga pfaleriwaka ku ya eka lexi kombisiweke kumbe lexi fihliweke. Ku tlhelela eka mufoyini xiaki lexi nga pfaleriwaka xi nga si kombisiwa hakunene kumbe ku fihliwa (i.e. emahlweni ka ku humelela shown.bs.collapsekumbe hidden.bs.collapsexiendlakalo).

.collapse('show')

Ku kombisa xiaki lexi nga tshovekaka. Ku tlhelela eka mufoyini xiaki lexi nga pfaleriwaka xi nga si kombisiwa hakunene (i.e. shown.bs.collapsexiendlakalo xi nga si humelela).

.collapse('hide')

Ku tumbeta xiaki lexi nga tshovekaka. Ku tlhelela eka mufoyini xiaki lexi nga pfaleriwaka xi nga si fihliwa hakunene (i.e. hidden.bs.collapsexiendlakalo xi nga si humelela).

Swiendlakalo

Tlilasi ya ku wa ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa ku wa.

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

Xitirhisiwa xa carousel.js

Xiphemu xa nkombiso wa swilayidi xo rhendzeleka hi swiaki, ku fana na carousel. Ti carousel leti nga ni swisaka a ti seketeriwi.

Swikombiso

Endzhaku Landzelaka

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

Switlhokovetselo leswi nga hlawuriwa

Engetelani switlhokovetselo eka swilayidi swa wena hi ku olova hi .carousel-captionelemente leyi nga endzeni ka .item. Veka ntsena kwalomu ka HTML yin’wana na yin’wana yo hlawula endzeni kwalaho naswona yi ta ringanisiwa hi ku tisungulela no fomatiwa.

Lebula yo sungula ya xilayidi

Nulla vitae elit libero, ku nga pharetra leyi vuriwaka pharetra leyi vuriwaka pharetra augue mollis leyi nga exikarhi ka yona.

Lebula ya vumbirhi ya xilayidi

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla.

Lebula ya xilayidi ya vunharhu

Praesent commodo cursus magna, xihlala xa xirhendzevutani xa xirhendzevutani.

Endzhaku Landzelaka

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

Matirhiselo

Ti- carousel to tala

Ti carousels ti lava ku tirhisiwa ka idon the outermost container (the .carousel) leswaku vulawuri bya carousel byi tirha kahle. Loko u engetela ti- carousel to tala, kumbe loko u cinca carousel’s id, tiyiseka leswaku u pfuxeta swilawuri leswi faneleke.

Hi ku tirhisa swihlawulekisi swa data

Tirhisa swihlawulekisi swa data ku lawula hi ku olova xiyimo xa carousel. data-slideamukela marito ya nkoka prevkumbe next, leswi cincaka xiyimo xa xilayidi loko xi pimanisiwa ni xiyimo xa xona xa sweswi. Handle ka sweswo, tirhisa data-slide-toku hundzisela xikombo xa swilayidi lexi nga si swekiwaka eka carousel data-slide-to="2", lexi cincaka ndhawu ya xilayidi ku ya eka xikombo xo karhi lexi sungulaka hi 0.

Xihlawulekisi data-ride="carousel"xi tirhisiwa ku fungha carousel tanihi animating ku sukela eka ku layicha pheji. A yi nge tirhisiwi yi hlanganisiwa na (ku nga laveki na loku nga lavekiki) ku sungula ka JavaScript loku nga erivaleni ka carousel yin’we.

Hi ku tirhisa JavaScript

Fonela carousel hi voko hi:

$('.carousel').carousel()

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-interval="".

Maendlelo

.carousel(options)

Ku sungula carousel hi swihlawulekisi swo hlawula objectivi a sungula ku khandziya xikanyakanya hi swilo.

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

.carousel('cycle')

Ku rhendzeleka hi swilo swa carousel ku suka eximatsini ku ya exineneni.

.carousel('pause')

Swi yimisa carousel ku famba hi xikanyakanya hi swilo.

.carousel(number)

Yi rhendzeleka na carousel eka furemu yo karhi (0 based, ku fana na array).

.carousel('prev')

Swirhendzevutana ku ya eka nchumu lowu hundzeke.

.carousel('next')

Swirhendzevutana swi ya eka nchumu lowu landzelaka.

Swiendlakalo

Tlilasi ya carousel ya Bootstrap yi paluxa swiendlakalo swimbirhi swo khoma eka ntirho wa carousel.

Swiendlakalo leswi haswimbirhi swi na swihlawulekisi leswi landzelaka leswi engetelekeke:

• direction: Ndlela leyi carousel yi rhetaka ha yona (kumbe "left"kumbe "right").
• relatedTarget: Xiphemu xa DOM lexi nga eku rheleriweni endhawini ya xona tanihi nchumu lowu tirhaka.

Swiendlakalo hinkwaswo swa carousel swi duvuriwa eka carousel hi yoxe (i.e. eka <div class="carousel">).

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

Xiengetelo xa affix.js

Xikombiso

Xiengetelo xa xiengetelo xi cinca -cinca position: fixed;ku pfula ni ku tima, xi tekelela vuyelo lebyi kumiweke hi position: sticky;. Subnavigation leyi nga exineneni i demo leyi hanyaka ya plugin ya affix.

Matirhiselo

Tirhisa xiengetelo xa xiengetelo hi ku tirhisa swihlawulekisi swa data kumbe hi voko hi JavaScript ya wena.Eka swiyimo leswimbirhi, u fanele ku nyika CSS ya xiyimo na ku anama ka nhundzu ya wena leyi namarhetiwe.

Xiya: U nga tirhisi xiengetelo xa xiengetelo eka xiaki lexi nga eka xiaki lexi nga eka xiyimo xo karhi, xo tanihi kholomo leyi hoxiweke kumbe leyi susumetiweke, hikwalaho ka xihoxo xa ku hundzuluxela ka Safari .

Ku veka xiyimo hi ku tirhisa CSS

Xiengetelo xa xiengetelo xi cinca-cinca exikarhi ka titlilasi tinharhu, yin’wana ni yin’wana yi yimela xiyimo xo karhi: .affix, .affix-top, na .affix-bottom. U fanele ku nyika switayele, handle ka position: fixed;on .affix, eka titlilasi leti hi wexe (ku tiyimela hi yoxe eka xiengetelo lexi) ku khoma swiyimo swa xiviri.

Hi leyi ndlela leyi xiengetelo xa xiengetelo xi tirhaka ha yona:

1. Ku sungula, plugin yi engetela .affix-topku kombisa leswaku elemente yi le ka xiyimo xa yona xa le henhla swinene. Eka xiyimo lexi ku hava ku vekiwa ka CSS loku lavekaka.
2. Ku rhendzeleka u hundza eka elemente leyi u lavaka ku yi namarheta swi fanele ku pfuxa ku namarhetiwa ka xiviri. Laha hi laha ku .affixsivaka .affix-topna ku veka position: fixed;(leswi nyikiweke hi CSS ya Bootstrap).
3. Loko ku hlamuseriwa offset ya le hansi, ku rhendzeleka u hundza eka yona swi fanele ku siva .affixhi .affix-bottom. Tanihi leswi ti-offset ti nga tihlawulelaka, ku veka yin’we swi lava leswaku u veka CSS leyi faneleke. Eka xiyimo lexi, engetela position: absolute;loko swi laveka. Plugin yi tirhisa xihlawulekisi xa data kumbe nhlawulo wa JavaScript ku kumisisa laha u nga vekaka elemente kona ku suka kwalaho.

Landzelela magoza lama nga laha henhla ku veka CSS ya wena eka yin’wana ya tindlela ta matirhiselo leti nga laha hansi.

Hi ku tirhisa swihlawulekisi swa data

Ku engetela mahanyelo ya affix hi ku olova eka elemente yihi na yihi, engetela ntsena data-spy="affix"eka elemente leyi u lavaka ku yi hlota. Tirhisa ti-offset ku hlamusela rini ku cinca-cinca ku pini ka elemente.

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

Hi ku tirhisa JavaScript

Fonela xiengetelo xa xiengetelo hi ku tirhisa JavaScript:

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-offset-top="200".

Maendlelo

.affix(options)

Ku endla leswaku swilo swa wena swi tirha tanihi swilo leswi namarhetiwe. Ku amukela swihlawulekisi swa ku hlawula object.

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

.affix('checkPosition')

Yi hlayela nakambe xiyimo xa xiengetelo hi ku ya hi tidimenxini, xiyimo, na xiyimo xa ku rhendzeleka ka swiaki leswi faneleke. Titlilasi ta .affix, .affix-top, na .affix-bottomti engeteriwa kumbe ti susiwa eka swilo leswi namarhetiwe ku ya hi xiyimo lexintshwa. Endlelo leri ri lava ku vitaniwa nkarhi wun’wana na wun’wana loko ku cinciwa tidimenxini ta nhundzu leyi namarhetiwe kumbe xiphemu lexi kongomisiweke, ku tiyisisa ku vekiwa lokunene ka nhundzu leyi namarhetiwe.

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

Swiendlakalo

Plugin ya affix ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa affix.