Têgihiştinî

Kesane an berhevkirî

Pêvek dikarin bi rengek kesane (bi karanîna *.jspelên kesane yên Bootstrap bikar bînin), an jî bi yekcarî (bikaranîna bootstrap.jsan kêmkirina bootstrap.min.js).

Taybetmendiyên daneyê

Hûn dikarin hemî pêvekên Bootstrap tenê bi navgîniya API-ya nîşankirinê bêyî nivîsandina yek rêzek JavaScript-ê bikar bînin. Ev API-a çîna yekem a Bootstrap-ê ye û dema ku pêvekek bikar tîne divê bala weya yekem be.

Wusa got, di hin rewşan de dibe ku were xwestin ku vê fonksiyonê were qut kirin. Ji ber vê yekê, em di heman demê de şiyana neçalakkirina API-a taybetmendiya daneyê peyda dikin bi veqetandina hemî bûyerên li ser cîhê navên belgeyê bi data-api. Ev bi vî rengî xuya dike:

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

Wekî din, ji bo armanckirina pêvekek taybetî, tenê navê pêvekê wekî navek bi navgîniya daneya-api re bi vî rengî têxin nav:

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

API bername

Em her weha bawer dikin ku hûn dikarin hemî pêvekên Bootstrap bi tenê bi navgîniya JavaScript API-ê bikar bînin. Hemî API-yên gelemperî rêbazên yekane, zincîrbar in, û berhevoka ku li ser hatî kirin vedigerînin.

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

Pêdivî ye ku hemî rêbaz tiştek vebijarkek vebijarkî, rêzek ku rêbazek taybetî armanc dike, an tiştek (ya ku pêvekek bi tevgerek xwerû dest pê dike) qebûl bikin:

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

Her pêvek di heman demê de çêkerê xweya xav li ser Constructortaybetmendiyek eşkere dike: $.fn.popover.Constructor. Heke hûn dixwazin mînakek pêvekek taybetî bistînin, wê rasterast ji hêmanek bistînin: $('[rel="popover"]').data('popover').

Mîhengên xwerû

Hûn dikarin mîhengên xwerû ji bo pêvekê bi guheztina Constructor.DEFAULTStiştê pêvekê biguhezînin:

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

Nakokî tune

Carinan hewce ye ku pêvekên Bootstrap bi çarçoveyên UI yên din re bikar bînin. Di van şertan de, car caran dibe ku pevçûnên navan çêbibin. Ger ev diqewime, hûn dikarin gazî .noConflictpêveka ku hûn dixwazin nirxa wê vegerînin bikin.

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

Events

Bootstrap ji bo çalakiyên yekta yên piraniya pêvekan bûyerên xwerû peyda dike. Bi gelemperî, ev bi rengek nebinavkirî û paşverû têne - ku di destpêka bûyerekê de nefsbiçûk (mînak. show) di destpêka bûyerekê de, û forma wê ya dema borî (mînak. shown) bi qedandina kirdeyekê tê derxistin.

Ji 3.0.0-ê ve, hemî bûyerên Bootstrap bi navan têne navnîş kirin.

Hemî bûyerên bêdawî preventDefaultfonksiyonê peyda dikin. Ev şiyana rawestandina pêkanîna çalakiyek berî ku ew dest pê bike peyda dike.

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

Sanitizer

Tooltips û Popovers paqijkera me ya çêkirî bikar tînin da ku vebijarkên ku HTML-ê qebûl dikin paqij bikin.

Nirxa whiteListxwerû ev e:

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

Heke hûn dixwazin nirxên nû li vê xwerû whiteListzêde bikin, hûn dikarin jêrîn bikin:

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)

Heke hûn dixwazin paqijkerê me derbas bikin ji ber ku hûn tercîh dikin ku pirtûkxaneyek taybetî bikar bînin, mînakî DOMPurify , divê hûn jêrîn bikin:

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

Hejmarên Versiyon

Guhertoya her yek ji pêvekên jQuery yên Bootstrap dikare bi navgîniya avakera VERSIONpêvekê ve were gihîştin. Mînakî, ji bo pêveka tooltip:

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

Dema ku JavaScript neçalak be paşveçûnek taybetî tune

Pêvekên Bootstrap dema ku JavaScript neçalak be bi taybetî bi dilşikestî paşve naçin. Heke hûn di vê rewşê de ji ezmûna bikarhêner eleqedar dibin, bikar bînin <noscript>ku rewşê (û çawa JavaScript-ê ji nû ve çalak bikin) ji bikarhênerên xwe re rave bikin, û/an jî paşverûyên xweyên xwerû lê zêde bikin.

Transitions derbasbûn.js

Der barê veguherînan de

Ji bo bandorên veguherîna hêsan, transition.jscarekê bi pelên JS yên din re têxin nav xwe. Heke hûn berhevkirî (an kêmkirî) bikar tînin bootstrap.js, ne hewce ye ku hûn vê yekê têxin nav xwe - ew jixwe li wir e.

Di hundurê de çi ye

Transition.js ji bo transitionEndbûyeran û hem jî emulatorek veguherîna CSS-ê arîkarek bingehîn e. Ew ji hêla pêvekên din ve tê bikar anîn da ku piştgiriya veguheztina CSS-ê kontrol bike û veguheztinên daleqandî bigire.

Neçalakkirina veguherînan

Veguhastin dikarin li seranserê cîhanê bi karanîna pişka JavaScriptê ya jêrîn, ku divê piştî barkirin transition.js(an bootstrap.jsan jî bootstrap.min.js, li gorî rewşê) were neçalak kirin:

$.support.transition = false

Modals modal.js

Modal rêkûpêk in, lê maqûl in, diyalogê bi fonksiyonên herî hindik ên hewce û pêşnumayên biaqil dişoxilîne.

Ji ber ku HTML5 çawa semantîka xwe diyar dike, autofocustaybetmendiya HTML-ê di modalên Bootstrap de bandorek nake. Ji bo bidestxistina heman bandorê, hin JavaScript-a xwerû bikar bînin:

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

Examples

Mînaka statîk

Modalek çêkirî ya bi sernav, laş û komek çalakiyan di pêlavê de.

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

Modalek bi JavaScript-ê ve bi tikandina bişkoja jêrîn veguhezînin. Ew ê ji jorê rûpelê ve biçe xwarê û têkeve hundur.

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

Mezinahiyên Bijarî

Modal xwedan du mezinahiyên vebijarkî ne, ku bi navgîniya dersên guhêrbar ve têne peyda kirin ku li ser a .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>

Anîmasyonê rakin

Ji bo modalên ku bi hêsanî xuya dikin ne ku di nav dîtinê de biqewimin, polê ji nîşankirina modaliya xwe derxînin .fade.

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

Bikaranîna pergala torê

Ji bo ku hûn ji pergala torê ya Bootstrap-ê di nav modalek de sûd werbigirin, tenê .rowdi hundurê de hêlîn bikin .modal-bodyû dûv re çînên pergala torê ya normal bikar bînin.

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

Naveroka modal a cihêreng li ser bişkoka tetikê

Xwedî komek bişkok hene ku hemî heman modalê, tenê bi naverokên piçûktir cûda vedigirin? Taybetmendiyênevent.relatedTarget HTML û HTML-êdata-* bikar bînin (dibe ku bi riya jQuery ) ve girêdayî naveroka modalê li gorî kîjan bişkojkê hatî klîk kirin biguhezînin. Ji bo hûrgulî li belgeyên Modal Events binêre 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)
})

Bikaranîna

Pêveka modal li gorî daxwazê, bi navgîniya taybetmendiyên daneyê an JavaScript-ê naveroka weya veşartî diguhezîne. Di heman demê de ew li ser guheztina tevgerê gerokê ya xwerû zêde .modal-opendike <body>û ji bo .modal-backdropku deverek klîk peyda bike ji bo rakirina modalên nîşankirî dema ku li derveyî modalê bitikîne peyda dike.

Bi taybetmendiyên daneyê

Bêyî nivîsandina JavaScriptê modalek çalak bikin. Li data-toggle="modal"ser hêmanek kontrolker, mîna bişkokek, bi hev re data-target="#foo"an jî href="#foo"ji bo veguheztina modalek taybetî were danîn.

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

Bi JavaScript

myModalBi yek rêzek JavaScript re modalek bi id re bang bikin :

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-backdrop="".

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

Methods

.modal(options)

Naveroka we wekî modal çalak dike. Vebijarkek vebijarkî qebûl objectdike.

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

.modal('toggle')

Modalek bi destan diguhezîne. Berî ku modal bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.modalan hidden.bs.modalbûyer çêbibe) vedigere bangkerê.

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

.modal('show')

Bi destan modalek vedike. Berî ku modal bi rastî were xuyang kirin (ango berî ku shown.bs.modalbûyer çêbibe) vedigere bangewazî.

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

.modal('hide')

Bi destan modalek vedişêre. Berî ku modal bi rastî veşêre (ango berî ku hidden.bs.modalbûyer çêbibe) vedigere bangewazî.

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

.modal('handleUpdate')

Pozîsyona modalê ji nû ve sererast dike da ku li hember çîçekek gerokek xuya bibe, ev yek dê modalê ber bi çepê ve biçe.

Tenê pêdivî ye ku dema ku bilindahiya modalê dema ku vekirî ye diguhezîne.

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

Events

Dersa modal a Bootstrap çend bûyeran ji bo girêdana fonksiyonên modal eşkere dike.

Hemî bûyerên modal li modal bixwe (ango li <div class="modal">).

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

Dropdowns dropdown.js

Examples

Bi vê pêveka sade, di nav de navbar, tab, û heban, pêşekên dakêşanê li hema hema her tiştî zêde bikin.

Di navbarekê de

Di nav heban de

Bikaranîna

Bi riya taybetmendiyên daneyê an JavaScriptê, pêveka dakêşanê naveroka veşartî (menekên daketî) bi guheztina .openpola li ser xala navnîşa dêûbav diguhezîne.

Li ser cîhazên desta, vekirina peldankek .dropdown-backdropji bo girtina pêşekên dakêşanê dema ku li derveyî menuyê tê tikandin, deverek wekî deverek lêzêde dike, pêdivîyek ji bo piştgirîya rast a iOS. Ev tê vê wateyê ku veguheztina ji pêşekek dakêşanê ya vekirî ji pêşekek dakêşanê ya cihêreng pêvekek zêde li ser mobîl hewce dike.

Nîşe: data-toggle="dropdown"Taybetmendî ji bo girtina pêşekên dakêşanê di astek serîlêdanê de pê ve girêdayî ye, ji ber vê yekê ramanek baş e ku hûn her gav wê bikar bînin.

Bi taybetmendiyên daneyê

Ji data-toggle="dropdown"bo guheztina peldankekê li lînkek an bişkokek zêde bikin.

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

Ji bo ku URLan bi bişkokên lînkê saxlem bihêlin, li data-targetşûna 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>

Bi JavaScript

Bi navgîniya JavaScript-ê ve bang bikin:

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

Vebijêrk

Netû

Methods

$().dropdown('toggle')

Menûya dakêşanê ya navbarek diyarkirî an navîgasyonek tabloyê vedike.

Events

Hemî bûyerên dakêşanê li .dropdown-menuhêmana dêûbavê '' têne avêtin.

Hemî bûyerên dakêşanê xwedan relatedTargettaybetmendiyek e, ku nirxa wê hêmana lengerê ya guhezbar e.

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

ScrollSpy scrollspy.js

Mînak di navbarê de

Pêveka ScrollSpy ji bo nûvekirina bixweber armancên nav li ser bingeha pozîsyona gerokê ye. Li qada li jêr navbarê bigerin û li guhertina çîna çalak temaşe bikin. Dê jêr-tiştên daketî jî werin ronî kirin.

Bikaranîna

Pêdiviya pozîsyona têkildar heye

Rêbaza pêkanînê ferq nake, scrollspy hewce dike ku position: relative;li ser hêmana ku hûn li ser sîxuriyê dikin bikar bînin. Di pir rewşan de ev e <body>. Dema scrollspying li ser hêmanên din ji bilî <body>, bawer bin ku xwedî heightset û overflow-y: scroll;sepandin.

Bi taybetmendiyên daneyê

Ji bo ku bi hêsanî behreya scrollspy li navîgasyona xweya jorîn zêde data-spy="scroll"bikin, li hêmana ku hûn dixwazin bişopînin lê zêde bikin (bi gelemperî ev dê bibe <body>). Dûv re data-targettaybetmendiyê bi ID an pola hêmana dêûbavê ya her .navpêkhateyek Bootstrap ve zêde bikin.

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>

Bi JavaScript

Piştî ku position: relative;CSS-ya xwe zêde kirin, bi JavaScript-ê re bang bikin scrollspy:

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

Methods

.scrollspy('refresh')

Dema ku scrollspy digel lê zêdekirin an rakirina hêmanan ji DOM-ê re bikar bînin, hûn ê hewce bikin ku rêbaza nûvekirinê ya weha bang bikin:

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-offset="".

Events

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

tab.js tab.js

Tabloyên nimûne

Karbidestiya tabê ya bilez û dînamîkî lê zêde bikin da ku di nav paceyên naveroka herêmî de derbas bibin, tewra bi navgîniya pêşekên dakêşanê. Tabên hêlîn nayên piştgirî kirin.

Bikaranîna

Bi JavaScript-ê tabloyên tabloyê çalak bikin (pêdivî ye ku her tabloyek kesane were çalak kirin):

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

Hûn dikarin tabloyên kesane bi çend awayan çalak bikin:

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

Markup

Hûn dikarin navîgasyonek tabloyek an pileyek bêyî nivîsandina JavaScriptê bi tenê diyar kirin data-toggle="tab"an data-toggle="pill"li ser hêmanek çalak bikin. Zêdekirina çînên û li tabloyê dê şêwaza tabloya Bootstrap bicîh bîne , lê zêdekirina çînên û dê şêwaza pileyê bicîh navbîne .nav-tabsulnavnav-pills bîne .

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

Bandora fade

Ji bo ku tabloyan bişewitînin, li her yekê zêde .fadebikin .tab-pane. Pêdivî ye ku tabloya yekem jî pêdivî .inye ku naveroka destpêkê xuya bike.

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

Methods

$().tab

Elementek tabê û konteynir naverokê çalak dike. Tabê pêdivî ye ku di DOM-ê de girêkek konteynerê data-targetan jî armancek hebe. hrefDi mînakên li jor de, tabloyên <a>bi data-toggle="tab"taybetmendiyan in.

.tab('show')

Tabloya diyarkirî hildibijêre û naveroka wê ya têkildar nîşan dide. Tebeke din a ku berê hatibû hilbijartin, nayê hilbijartin û naveroka wê ya têkildar tê veşartin. Berî ku tabloya tabloyê bi rastî were xuyang kirin vedigere bangkerê (ango berî yashown.bs.tab bûyer çêbibe) vedigere bangewazî.

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

Events

Dema ku tabloyek nû nîşan dide, bûyer bi rêza jêrîn dişewitin:

1. hide.bs.tab(li ser tabloya çalak a heyî)
2. show.bs.tab(li ser tabloya ku tê xuyang kirin)
3. hidden.bs.tab(li ser tabloya çalak a berê, heman wekî hide.bs.tabbûyerê)
4. shown.bs.tab(li ser tabloya ku nû-çalak hatî xuyang kirin, heman wekî show.bs.tabbûyerê)

Ger tu tablo jixwe çalak nebûya, wê hingê hide.bs.tabû hidden.bs.tabbûyer nayên avêtin.

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

Tooltips tooltip.js

Ji pêveka hêja ya jQuery.tipsy ku ji hêla Jason Frame ve hatî nivîsandin ve hatî îlhama kirin; Tooltips guhertoyek nûvekirî ye, ku xwe dispêre wêneyan, CSS3 ji bo anîmasyon, û taybetmendiyên daneyan ji bo hilanîna sernavên herêmî bikar tîne.

Sernavên amûran ên bi sernavên zero-dirêj qet nayên xuyang kirin.

Examples

Li ser zencîreyên jêrîn bihêlin ku hûn serişteyên amûran bibînin:

Tîpa amûra statîk

Çar vebijark hene: jor, rast, jêr û çepê rêzkirî.

Çar rê

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

Bikaranîna

Pêveka tooltip li gorî daxwazê ​​naverok û nîşankirinê çêdike, û ji hêla xwerû ve şîretên amûran li dû hêmana wan a tîrêjê bi cîh dike.

Serişteya amûrê bi JavaScriptê vekin:

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

Markup

Nîşana pêdivî ya ji bo serişteyek amûrek tenê datataybetmendiyek e û titleli ser hêmana HTML-ê hûn dixwazin şîreta amûrekê hebe. Nîşana hilberandî ya amûrek pir hêsan e, her çend ew pozîsyonek hewce dike (ji hêla xwerû, ji tophêla pêvekê ve hatî saz kirin).

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-animation="".

Methods

$().tooltip(options)

Pêşkêşkarek amûrek bi berhevokek elementê ve girêdide.

.tooltip('show')

Tîpa amûrek hêmanek eşkere dike. Berî ku şîreta amûrê bi rastî were xuyang kirin (ango berî ku shown.bs.tooltipbûyer çêbibe) vedigere bangewazî. Ev wekî "bi destan" vekêşana amûrê tê hesibandin. Sernavên amûran ên bi sernavên zero-dirêj qet nayên xuyang kirin.

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

.tooltip('hide')

Tîpa amûrekê vedişêre. Berî ku şîreta amûrê bi rastî veşêre (ango berî ku hidden.bs.tooltipbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana amûrê tê hesibandin.

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

.tooltip('toggle')

Destûra amûrek hêmanek vedike. Berî ku şîreta amûrê bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.tooltipan hidden.bs.tooltipbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana amûrê tê hesibandin.

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

.tooltip('destroy')

Tîpa amûrekê vedişêre û hilweşîne. Pêşniyarên amûran ên ku delegasyonê bikar tînin (yên ku bi vebijarkê têne afirandin ) selectornekarin bi rengekî ferdî li ser hêmanên nifûsê werin hilweşandin.

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

Events

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

Popovers popover.js

Ji bo agahdariya duyemîn xanî li her hêmanek naverokê, mîna yên li ser iPad-ê, naverokên piçûk zêde bikin.

Popoverên ku hem sernav û hem jî naveroka wan sifir-dirêj in qet nayên xuyang kirin.

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

Examples

Popover statîk

Çar vebijark hene: jor, rast, jêr û çepê rêzkirî.

Demo zindî

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

Çar rê

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

Li ser klîkek paşîn veqetînin

Tetikê bikar focusbînin da ku popoveran li ser klîkek din a ku bikarhêner çêdike berde.

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

Bikaranîna

Bi JavaScriptê popovers çalak bikin:

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-animation="".

Methods

$().popover(options)

Ji bo berhevokek hêmanan popoveran dide destpêkirin.

.popover('show')

Popovera hêmanek eşkere dike. Berî ku popover bi rastî were xuyang kirin (ango berî ku shown.bs.popoverbûyer çêbibe) vedigere bangewazî. Ev wekî "bi destan" vekêşana popover tê hesibandin. Popoverên ku hem sernav û hem jî naveroka wan sifir-dirêj in qet nayên xuyang kirin.

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

.popover('hide')

Hêmanek popover vedişêre. Berî ku popover bi rastî veşêre (ango berî ku hidden.bs.popoverbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana popover tê hesibandin.

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

.popover('toggle')

Pîvana hêmanekê vedike. Berî ku popover bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.popoveran hidden.bs.popoverbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana popover tê hesibandin.

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

.popover('destroy')

Hêmanek popover vedişêre û hilweşîne. Popoverên ku delegasyonê bikar tînin (yên ku bi karanîna vebijarkê selectortêne afirandin ) nekarin bi rengekî ferdî li ser hêmanên nifûsê werin hilweşandin.

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

Events

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

Alert messages alert.js

Mînak alerts

Bi vê pêvekê re fonksiyona betalkirinê li hemî peyamên hişyariyê zêde bikin.

Dema ku .closebişkokek bikar tîne, divê ew zaroka yekem be .alert-dismissibleû naveroka nivîsê di nîşankirinê de neyê pêşiya wê.

Bikaranîna

Tenê data-dismiss="alert"li bişkoka xweya nêzîk zêde bikin da ku bixweber fonksiyonek girtina hişyariyê bidin. Girtina hişyariyek wê ji DOM-ê derdixe.

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

Ji bo ku hişyariyên we di girtina anîmasyonê de bikar bînin, pê ewle bin ku ew ders .fadeû .indersên berê li wan hatine sepandin.

Methods

$().alert()

Ji bo bûyerên klîk ên li ser hêmanên dûv ku xwedî data-dismiss="alert"taybetmendiyê ne, hişyariyek dike. (Gava ku destpêkirina xweseriya data-api bikar bînin ne hewce ye.)

$().alert('close')

Bi rakirina wê ji DOM-ê hişyariyek digire. Ger çînên .fadeû .inli ser hêmanê hebin, berî ku were rakirin hişyar dê biqede.

Events

Pêveka hişyariya Bootstrap çend bûyeran ji bo girêdana fonksiyona hişyariyê eşkere dike.

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

Bişkokên bişkojk.js

Zêdetir bi bişkokan bikin. Rewşên bişkojka kontrol bikin an jî ji bo hêmanên zêdetir ên mîna darikên amûran komên bişkokan biafirînin.

Dewletî

Zêde data-loading-text="Loading..."bikin ku li ser bişkokek rewşek barkirinê bikar bînin.

Ev taybetmendî ji v3.3.5-ê hatî derxistin û di v4-ê de hatî rakirin.

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

Veguheztina yekane

Zêde data-toggle="button"bikin ku guheztina li ser bişkokek yekane çalak bikin.

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

Qutiya kontrolê / Radyo

Zêde data-toggle="buttons"bikin .btn-groupqutiyek kontrolê an têketinên radyoyê yên tê de hene da ku veguheztina şêwazên wan ên têkildar çalak bikin.

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

Methods

$().button('toggle')

Rewşa pushê vedike. Bişkojk xuya dike ku ew çalak bûye.

$().button('reset')

Rewşa bişkojkê ji nû ve vedike - nivîsê bi nivîsa orîjînal diguhezîne. Ev rêbaz asynkron e û berî ku vesazkirin bi rastî qediya vedigere.

$().button(string)

Nivîsarê li her rewşa nivîsê ya diyarkirî diguhezîne.

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

Hilweşîn hilweşîn.js

Pêveka maqûl a ku ji bo guheztina hêsan çend çîn bikar tîne.

Mînak

Bişkojkên jêrîn bikirtînin da ku elementek din bi guhertinên polê ve nîşan bidin û veşêrin:

• .collapsenaverokê vedişêre
• .collapsingdi dema veguherînan de tê sepandin
• .collapse.innaverokê nîşan dide

Hûn dikarin girêdanek bi hreftaybetmendiyê, an bişkokek bi data-targettaybetmendiyê bikar bînin. Di her du rewşan de, data-toggle="collapse"pêdivî ye.

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

Mînaka Accordion

Tevgera hilweşînê ya xwerû dirêj bikin da ku bi pêkhateya panelê re akordeyonek çêbikin.

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

Di heman demê de gengaz e ku meriv .panel-bodys-yê bi .list-groups-yê veguhezîne.

Bikaranîna

Pêveka hilweşînê ji bo hilgirtina giran çend dersan bikar tîne:

• .collapsenaverokê vedişêre
• .collapse.innaverokê nîşan dide
• .collapsingdema ku veguheztin dest pê dike tê zêdekirin, û dema ku ew qediya tê jêbirin

Van dersan dikarin li component-animations.less.

Bi taybetmendiyên daneyê

Tenê data-toggle="collapse"û a data-targetli hêmanê zêde bikin da ku bixweber kontrola hêmanek hilweşandî destnîşan bikin. Taybetmendî data-targethilbijêrek CSS-ê qebûl dike ku hilweşînê li ser bicîh bike. Bawer bikin ku polê collapseli hêmana hilweşandî zêde bikin. Heke hûn dixwazin ku ew bi xweber vebe, çîna pêvek zêde bikin in.

Ji bo ku rêveberiya komê ya mîna akordeyonê li kontrolek dagirtî zêde bikin, taybetmendiya daneyê zêde bikin data-parent="#selector". Ji bo dîtina vê di çalakiyê de, serî li demo bidin.

Bi JavaScript

Bi destan çalak bike bi:

$('.collapse').collapse()

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-parent="".

Methods

.collapse(options)

Naveroka we wekî hêmanek hilweşandî çalak dike. Vebijarkek vebijarkî qebûl objectdike.

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

.collapse('toggle')

Hêmanek dagirtî ji bo xuyangkirin an veşartinê vedigire. Berî ku hêmana hilavêtinê bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.collapsean hidden.bs.collapsebûyer çêbibe) vedigere bangkerê.

.collapse('show')

Elementeke davekirî nîşan dide. Berî ku hêmana hilavêtinê bi rastî were xuyang kirin (ango berî ku shown.bs.collapsebûyer çêbibe) vedigere bangkerê.

.collapse('hide')

Hêmanek hilweşandî vedişêre. Berî ku hêmana hilweşandî bi rastî were veşartin (ango berî yahidden.bs.collapse bûyer çêbibe) vedigere bangkerê.

Events

Dersa hilweşînê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona hilweşînê eşkere dike.

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

Carousel carousel.js

Parçeyek slideshow ji bo bisiklêtan di nav hêmanan de, mîna karûzek. Karûzelên hêlînkirî nayên piştgirî kirin.

Examples

Pêşî Piştî

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

Sernivîsên Bijarî

.carousel-captionBi hêmanek di nav her yekê de sernavan li slaytên xwe zêde bikin .item. Hema hema hema her HTML-ya vebijarkî li wir bi cîh bikin û ew ê bixweber were rêzkirin û formatkirin.

Labelê slide yekem

Nulla vitae elit libero, a pharetra augue mollis interdum.

Labelê slide duyemîn

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Labelê slide sêyem

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Pêşî Piştî

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

Bikaranîna

Gelek carousels

Ji bo ku kontrolên carousel bi rêkûpêk tevbigerin, pêdivî ye ku idkarûzek li ser konteynera herî derveyî (ya ) were bikar anîn. .carouselDema ku gelek carousel lê zêde dikin, an dema ku carouselek diguhezînin id, pê ewle bin ku kontrolên têkildar nûve bikin.

Bi taybetmendiyên daneyê

Taybetmendiyên daneyê bikar bînin da ku bi hêsanî pozîsyona carouselê kontrol bikin. data-slidekeywords prevan jî qebûl dike next, ku pozîsyona slideyê li gorî pozîsyona wê ya heyî diguhezîne. Alternatîf, bikar bînin data-slide-toku navnîşek slide ya xav bi karûselê re derbas bikin data-slide-to="2", ku pozîsyona slideyê vediguhezîne navnîşek taybetî ya ku bi dest pê dike 0.

Taybetmendî data-ride="carousel"ji bo nîşankirina carouselek wekî anîmasyonek ku di barkirina rûpelê de dest pê dike tê bikar anîn. Ew nikare bi hevberdana bi destpêkirina JavaScriptê ya eşkere ya heman carouselê (zêde û nehewce) re were bikar anîn.

Bi JavaScript

Carousel bi destan bang bikin bi:

$('.carousel').carousel()

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-interval="".

Methods

.carousel(options)

Karûselê bi vebijarkek vebijarkî objectdest pê dike û di nav tiştan de bisiklêtê dest pê dike.

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

.carousel('cycle')

Ji çepê ber bi rastê ve di nav tiştên karûselê re digere.

.carousel('pause')

Karûselê ji bisiklêtan di nav tiştan re rawestîne.

.carousel(number)

Karûselê di çarçoveyek taybetî de (0 bingeh, dişibihe rêzeyekê) digerîne.

.carousel('prev')

Dûv re berbi babeta berê ve diçe.

.carousel('next')

Dûv re ber bi babeta din ve diçe.

Events

Dersa karûselê ya Bootstrap du bûyeran ji bo girêdana fonksiyona karûselê eşkere dike.

Her du bûyer xwedî taybetmendiyên din ên jêrîn in:

• direction: Arasteya ku carousel tê de dizivire (yan yan "left"jî "right").
• relatedTarget: Hêmana DOM-ê ya ku wekî hêmanek çalak di cîhê xwe de tê hilanîn.

Hemû bûyerên carousel li carousel bi xwe (ango li <div class="carousel">).

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

Affix affix.js

Mînak

Pêveka affix -ê vedibe position: fixed;û vedike, bandora ku bi position: sticky;. Subnavîgasyon li milê rastê demoyek zindî ya pêveka affix-ê ye.

Bikaranîna

Pêveka pêvekê bi taybetmendiyên daneyê an bi destê xwe bi JavaScript-a xwe re bikar bînin.Di her du rewşan de, divê hûn ji bo cîh û firehiya naveroka xweya pêvekirî CSS peyda bikin.

Nîşe: Pêveka pêvekirinê li ser hêmanek ku di nav hêmanek bi pozîsyonek nisbeten de cih digire, wekî stûnek kişandî an pêvekirî, ji ber xeletiyek vegotina Safari bikar neynin .

Positioning bi rêya CSS

Pêveka pêvekê di navbera sê çînan de vediguhere, her yek dewletek taybetî temsîl dike: .affix, .affix-top, û .affix-bottom. Pêdivî ye ku hûn şêwazan, ji bilî li position: fixed;ser .affix, ji bo van dersan bi xwe (ji vê pêvekê serbixwe) peyda bikin da ku pozîsyonên rastîn birêve bibin.

Li vir pêveka affix çawa dixebite:

1. Ji bo destpêkirinê, pêvek lê zêde dike.affix-top ku nîşan bide ku hêman di pozîsyona xweya herî jorîn de ye. Di vê nuqteyê de pozîsyona CSS-ê ne hewce ye.
2. Gera li ber hêmana ku hûn dixwazin pêvekirî derbas bibin divê pêvekirina rastîn dest pê bike. Li vir .affixcîh digire .affix-topû saz dike position: fixed;(ji hêla CSS ya Bootstrap ve hatî peyda kirin).
3. Ger guheztinek jêrîn were diyar kirin, pêdivî ye ku meriv berê xwe bide .affixguheztin .affix-bottom. Ji ber ku veqetandin vebijarkî ne, ji bo danîna yekê hewce dike ku hûn CSS-ya guncan saz bikin. Di vê rewşê de, position: absolute;dema ku hewce bike lê zêde bike. Pêvek taybetmendiya daneyê an vebijarka JavaScript-ê bikar tîne da ku diyar bike ku hêman ji wir li ku derê bi cîh bike.

Pêngavên jorîn bişopînin da ku CSS-ya xwe ji bo yek ji vebijarkên karanîna jêrîn saz bikin.

Bi taybetmendiyên daneyê

Ji bo ku bi hêsanî behreya pêvekirinê li her hêmanekê zêde bikin, tenê lê zêde bikindata-spy="affix" bikin, tenê li hêmana ku hûn dixwazin bişopînin lê zêde bikin. Ji bo pênasekirina kengê guheztina pînekirina hêmanekê guheztinan bikar bînin.

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

Bi JavaScript

Bi JavaScriptê re pêveka affix bang bikin:

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-offset-top="200".

Methods

.affix(options)

Naveroka we wekî naveroka pêvekirî çalak dike. Vebijarkek vebijarkî qebûl objectdike.

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

.affix('checkPosition')

Li ser bingeha pîvan, pozîsyon û pozîsyona gerîdeyê ya hêmanên têkildar, rewşa pêvekê ji nû ve hesab dike. Çîn .affix, .affix-top, û .affix-bottomli gorî dewleta nû li naveroka pêvekirî têne zêdekirin an jê têne derxistin. Dema ku pîvanên naveroka pêvekirî an hêmana armanc têne guheztin pêdivî ye ku ev rêbaz were gazî kirin, da ku cîhgirtina rast a naveroka pêvekirî were misoger kirin.

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

Events

Pêveka pêvekirinê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona pêvekirinê eşkere dike.