Ħarsa ġenerali

Individwali jew miġbura

Il-plugins jistgħu jiġu inklużi individwalment (bl-użu tal- *.jsfajls individwali ta 'Bootstrap), jew kollha f'daqqa (bl-użu bootstrap.jsjew il-minifikat bootstrap.min.js).

Attributi tad-dejta

Tista 'tuża l-plugins Bootstrap kollha purament permezz tal-API tal-markup mingħajr ma tikteb linja waħda ta' JavaScript. Din hija l-API tal-ewwel klassi ta' Bootstrap u għandha tkun l-ewwel konsiderazzjoni tiegħek meta tuża plugin.

Cela dit, f'xi sitwazzjonijiet jista 'jkun mixtieq li titfi din il-funzjonalità. Għalhekk, aħna nipprovdu wkoll il-ħila li tiddiżattiva l-API tal-attribut tad-dejta billi torbot l-avvenimenti kollha fuq id-dokument namespaced bi data-api. Dan jidher bħal dan:

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

Inkella, biex timmira plugin speċifiku, inkludi biss l-isem tal-plugin bħala spazju tal-isem flimkien mal-ispazju tal-isem tad-data-api bħal dan:

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

API programmatiku

Aħna nemmnu wkoll li għandek tkun tista' tuża l-plugins Bootstrap kollha purament permezz tal-API JavaScript. L-APIs pubbliċi kollha huma metodi singoli, li jistgħu jiġu kkatinati, u jirritornaw il-ġbir li ttieħed azzjoni fuqhom.

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

Il-metodi kollha għandhom jaċċettaw oġġett ta' għażliet fakultattivi, string li jimmira metodu partikolari, jew xejn (li jibda plugin b'imġieba default):

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

Kull plugin jesponi wkoll il-kostruttur mhux maħdum tiegħu fuq Constructorproprjetà: $.fn.popover.Constructor. Jekk tixtieq tikseb każ partikolari ta' plugin, irkupraha direttament minn element: $('[rel="popover"]').data('popover').

Settings default

Tista' tibdel is-settings default għal plugin billi timmodifika l- Constructor.DEFAULTSoġġett tal-plugin:

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

L-ebda kunflitt

Xi drabi huwa meħtieġ li tuża plugins Bootstrap ma 'oqfsa UI oħra. F'dawn iċ-ċirkostanzi, ħabtiet tal-ispazji tal-isem jistgħu jseħħu okkażjonalment. Jekk jiġri dan, tista' ċċempel .noConflictfuq il-plugin li tixtieq ireġġa' lura l-valur tiegħu.

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

Avvenimenti

Bootstrap jipprovdi avvenimenti personalizzati għall-biċċa l-kbira tal-azzjonijiet uniċi tal-plugins. Ġeneralment, dawn jiġu f'forma ta 'partiċipju infinitiv u passat - fejn l-infinittiv (eż. show) jiġi attivat fil-bidu ta' avveniment, u l-forma ta 'partiċipju passat tiegħu (eż. shown) tiġi attivata mat-tlestija ta' azzjoni.

Minn 3.0.0, l-avvenimenti kollha Bootstrap huma namespaced.

L-avvenimenti infiniti kollha jipprovdu preventDefaultfunzjonalità. Dan jipprovdi l-abbiltà li twaqqaf l-eżekuzzjoni ta 'azzjoni qabel ma tibda.

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

Sanitizer

Tooltips u Popovers jużaw is-sanitizer inkorporat tagħna biex sanitizzaw għażliet li jaċċettaw HTML.

Il-valur default whiteListhuwa dan li ġej:

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

Jekk trid iżżid valuri ġodda ma' dan default whiteListtista' tagħmel dan li ġej:

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)

Jekk trid taqbeż is-sanitizer tagħna għaliex tippreferi tuża librerija ddedikata, pereżempju DOMPurify , għandek tagħmel dan li ġej:

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

Numri tal-verżjoni

Il-verżjoni ta' kull plugin jQuery ta' Bootstrap tista' tiġi aċċessata permezz tal- VERSIONproprjetà tal-kostruttur tal-plugin. Per eżempju, għall-plugin tooltip:

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

Ebda fallbacks speċjali meta JavaScript huwa diżattivat

Il-plugins tal-Bootstrap ma jaqgħux lura partikolarment b'mod grazzjuż meta JavaScript huwa diżattivat. Jekk inti jimpurtak mill-esperjenza tal-utent f'dan il-każ, uża <noscript>biex tispjega s-sitwazzjoni (u kif terġa 'tippermetti l-JavaScript) lill-utenti tiegħek, u/jew iżżid id-drawwiet tiegħek stess.

Transizzjonijiet transition.js

Dwar transizzjonijiet

Għal effetti ta 'tranżizzjoni sempliċi, inkludi transition.jsdarba flimkien mal-fajls JS l-oħra. Jekk qed tuża l-ikkumpilat (jew imminifikat) bootstrap.js, m'hemmx għalfejn tinkludi dan—diġà qiegħed hemm.

X'hemm ġewwa

Transition.js huwa helper bażiku għall- transitionEndavvenimenti kif ukoll emulatur ta 'transizzjoni CSS. Jintuża mill-plugins l-oħra biex jiċċekkja l-appoġġ tat-tranżizzjoni CSS u biex jaqbad transizzjonijiet imdendlin.

It-tranżizzjonijiet ta' diżabilitazzjoni

It-tranżizzjonijiet jistgħu jiġu diżattivati ​​globalment billi tuża s-snippet JavaScript li ġej, li għandu jiġi wara li transition.js(jew bootstrap.js, bootstrap.min.jsskont il-każ) ikun tagħbija:

$.support.transition = false

Modali modal.js

Il-modali huma ssimplifikati, iżda flessibbli, iqajjem djalogu bil-funzjonalità minima meħtieġa u nuqqasijiet intelliġenti.

Minħabba kif HTML5 jiddefinixxi s-semantika tiegħu, l- autofocusattribut HTML m'għandu l-ebda effett fil-modali Bootstrap. Biex tikseb l-istess effett, uża xi JavaScript personalizzat:

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

Eżempji

Eżempju statiku

Modali mogħtija b'header, korp, u sett ta' azzjonijiet fil-footer.

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

Aqleb modal permezz ta' JavaScript billi tikklikkja l-buttuna hawn taħt. Jiżżerżaq 'l isfel u jisparixxi mill-parti ta' fuq tal-paġna.

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

Daqsijiet fakultattivi

Il-modali għandhom żewġ daqsijiet fakultattivi, disponibbli permezz ta' klassijiet ta' modifikatur biex jitqiegħdu fuq .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>

Neħħi l-animazzjoni

Għal modals li sempliċiment jidhru aktar milli fade biex tarahom, neħħi l- .fadeklassi mill-markup modali tiegħek.

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

Bl-użu tas-sistema tal-grilja

Biex tieħu vantaġġ mis-sistema tal-grilja Bootstrap fi ħdan modali, bejta .rows fi ħdan il- .modal-bodyu mbagħad uża l-klassijiet tas-sistema tal-grilja normali.

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

Kontenut modali li jvarja bbażat fuq il-buttuna tal-grillu

Għandek mazz ta 'buttuni li kollha jibdew l-istess modali, biss b'kontenut kemmxejn differenti? Uża event.relatedTargetu attributi HTMLdata-* (possibilment permezz ta' jQuery ) biex tvarja l-kontenut tal-modal skont liema buttuna ġiet ikklikkjata. Ara d-dokumenti tal-Avvenimenti Modali għal dettalji dwar 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)
})

Użu

Il-plugin modali jibdel il-kontenut moħbi tiegħek fuq talba, permezz ta' attributi tad-dejta jew JavaScript. Iżżid ukoll .modal-openmal- <body>imġieba ta' scrolling predefinita biex tissostitwixxi u tiġġenera .modal-backdropbiex tipprovdi żona tal-ikklikkja biex tiċħad il-modali murija meta tikklikkja barra l-modal.

Via attributi tad-data

Attiva modali mingħajr ma tikteb JavaScript. Issettja data-toggle="modal"fuq element ta 'kontrollur, bħal buttuna, flimkien ma' data-target="#foo"jew href="#foo"biex timmira modal speċifiku biex toggle.

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

Via JavaScript

Sejħa modal b'id myModalb'linja waħda ta' JavaScript:

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

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-backdrop="".

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

Metodi

.modal(options)

Jattiva l-kontenut tiegħek bħala modal. Jaċċetta għażliet fakultattivi object.

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

.modal('toggle')

Manwalment toggles modali. Jirritorna lil min iċempel qabel ma l-modal ikun fil-fatt intwera jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.modaljew ).hidden.bs.modal

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

.modal('show')

Manwalment tiftaħ modali. Jirritorna lil min iċempel qabel ma l-modal ikun fil-fatt intwera (jiġifieri qabel ma shown.bs.modaljseħħ l-avveniment).

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

.modal('hide')

Manwalment jaħbi modali. Jirritorna lil min iċempel qabel ma l-modal fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.modaljseħħ l-avveniment).

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

.modal('handleUpdate')

Jaġġusta mill-ġdid il-pożizzjonament tal-modal biex jikkumbatti scrollbar f'każ li wieħed għandu jidher, li jagħmel il-modal jaqbeż lejn ix-xellug.

Huwa meħtieġ biss meta l-għoli tal-modal jinbidel waqt li jkun miftuħ.

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

Avvenimenti

Il-klassi modali ta 'Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità modali.

L-avvenimenti modali kollha jiġu sparati lejn il-modal innifsu (jiġifieri fil- <div class="modal">).

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

Dropdowns dropdown.js

Eżempji

Żid menus dropdown għal kważi kull ħaġa b'dan il-plugin sempliċi, inklużi n-navbar, tabs, u pilloli.

Fi ħdan navbar

Fi ħdan pilloli

Użu

Permezz ta 'attributi tad-dejta jew JavaScript, il-plugin dropdown jibdel kontenut moħbi (menus dropdown) billi taqleb il- .openklassi fuq l-oġġett tal-lista prinċipali.

Fuq apparat mobbli, il-ftuħ ta 'dropdown iżid .dropdown-backdropbħala żona tal-vit għall-għeluq tal-menus dropdown meta ttektek barra l-menu, rekwiżit għal appoġġ xieraq tal-iOS. Dan ifisser li l-bidla minn menu dropdown miftuħ għal menu dropdown differenti teħtieġ vit żejda fuq il-mowbajl.

Nota: L- data-toggle="dropdown"attribut huwa bbażat fuqu għall-għeluq tal-menus dropdown f'livell ta 'applikazzjoni, għalhekk hija idea tajba li dejjem tużah.

Via attributi tad-data

Żid data-toggle="dropdown"ma' link jew buttuna biex taqleb 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>

Biex iżżomm l-URLs intatti mal-buttuni tal-link, uża l- data-targetattribut minflok 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>

Via JavaScript

Ċempel il-dropdowns permezz ta' JavaScript:

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

Għażliet

Xejn

Metodi

$().dropdown('toggle')

Jiddawwar il-menu dropdown ta' navbar partikolari jew ta' navigazzjoni bit-tabbed.

Avvenimenti

L-avvenimenti kollha dropdown jiġu sparati fuq l .dropdown-menu-element ġenitur ta '.

L-avvenimenti kollha dropdown għandhom relatedTargetproprjetà, li l-valur tagħha huwa l-element tal-ankra li toggling.

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

ScrollSpy scrollspy.js

Eżempju fin-navbar

Il-plugin ScrollSpy huwa għall-aġġornament awtomatiku tal-miri tan-nav ibbażati fuq il-pożizzjoni tal-iscroll. Skrollja ż-żona taħt in-navbar u ara l-bidla fil-klassi attiva. Is-sub-oġġetti dropdown se jiġu enfasizzati wkoll.

Użu

Jeħtieġ pożizzjonament relattiv

Ma jimpurtax mill-metodu ta 'implimentazzjoni, scrollspy teħtieġ l-użu ta' position: relative;fuq l-element li qed spying fuq. F'ħafna każijiet dan huwa l- <body>. Meta scrollspying fuq elementi minbarra l- <body>, kun żgur li jkollok heightsett u overflow-y: scroll;applikati.

Via attributi tad-data

Biex iżżid faċilment l-imġieba scrollspy man-navigazzjoni topbar tiegħek, żid data-spy="scroll"mal-element li trid tispija fuqu (l-aktar tipikament dan ikun il- <body>). Imbagħad żid l- data-targetattribut bl-ID jew il-klassi tal-element ġenitur ta 'kwalunkwe .navkomponent 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>

Via JavaScript

Wara li żżid position: relative;fis-CSS tiegħek, ċempel l-iscrollspy permezz ta' JavaScript:

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

Metodi

.scrollspy('refresh')

Meta tuża scrollspy flimkien maż-żieda jew it-tneħħija ta 'elementi mid-DOM, ikollok bżonn issejjaħ il-metodu ta' aġġornar hekk:

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

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-offset="".

Avvenimenti

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

Tabs li jistgħu jinqalbu tab.js

Eżempji tabs

Żid il-funzjonalità ta' tab rapida u dinamika biex tgħaddi minn panewijiet ta' kontenut lokali, anke permezz ta' menus dropdown. Tabs imnaqqxa mhumiex appoġġjati.

Użu

Ippermetti tabs tabbable permezz ta' JavaScript (kull tab trid tiġi attivata individwalment):

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

Tista' tattiva tabs individwali b'diversi modi:

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

Tista' tattiva tab jew navigazzjoni ta' pillola mingħajr ma tikteb JavaScript billi sempliċement tispeċifika data-toggle="tab"jew data-toggle="pill"fuq element. Iż-żieda tal- klassijiet navu mat-tab se tapplika l- grafika tat-tab Bootstrap , filwaqt li żżid il- klassijiet u se tapplika l -grafika tal-pilloli .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>

Effett fade

Biex tagħmel it-tabs fade, żid .fadema 'kull .tab-pane. L-ewwel pannell tat-tab irid ikollu wkoll .injagħmel il-kontenut inizjali viżibbli.

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

Metodi

$().tab

Jattiva element tab u kontenitur tal-kontenut. Tab għandu jkollha jew a data-targetjew hrefnode ta 'kontenitur fil-mira fid-DOM. Fl-eżempji ta 'hawn fuq, it-tabs huma l- <a>i data-toggle="tab"b'attributi.

.tab('show')

Jagħżel it-tab mogħtija u juri l-kontenut assoċjat tagħha. Kwalunkwe tab oħra li kienet magħżula qabel issir mhux magħżula u l-kontenut assoċjat tagħha huwa moħbi. Jirritorna lil min iċempel qabel ma l-panew tat-tab fil-fatt intwera (jiġifieri qabel ma shown.bs.tabjseħħ l-avveniment).

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

Avvenimenti

Meta turi tab ġdida, l-avvenimenti jisparaw fl-ordni li ġejja:

1. hide.bs.tab(fuq it-tab attiva attwali)
2. show.bs.tab(fuq it-tab li trid tintwera)
3. hidden.bs.tab(fuq it-tab attiva preċedenti, l-istess bħal għall- hide.bs.tabavveniment)
4. shown.bs.tab(fuq it-tab li għadha kif intwera, l-istess bħal dik tal- show.bs.tabavveniment)

Jekk l-ebda tab ma kienet diġà attiva, allura l- hide.bs.tabu hidden.bs.tabavvenimenti mhux se jiġu sparati.

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

Tooltips tooltip.js

Ispirat mill-plugin eċċellenti jQuery.tipsy miktub minn Jason Frame; Tooltips huma verżjoni aġġornata, li ma jiddependux fuq immaġini, jużaw CSS3 għall-animazzjonijiet, u data-attributi għall-ħażna tat-titlu lokali.

Tooltips b'titli ta' tul żero qatt ma jintwerew.

Eżempji

Passa fuq il-links hawn taħt biex tara l-għodda:

Tooltip statiku

Erba' għażliet huma disponibbli: fuq, lemin, qiegħ, u xellug allinjat.

Erba' direzzjonijiet

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

Użu

Il-plugin tooltip jiġġenera kontenut u markup fuq talba, u awtomatikament iqiegħed tooltips wara l-element grillu tagħhom.

Agħmel it-tooltip permezz ta' JavaScript:

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

Markup

Il-markup meħtieġ għal tooltip huwa biss dataattribut u titlefuq l-element HTML tixtieq li jkollok tooltip. Il-markup iġġenerat ta' tooltip huwa pjuttost sempliċi, għalkemm jeħtieġ pożizzjoni (b'mod awtomatiku, issettjat topmill-plugin).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-animation="".

Metodi

$().tooltip(options)

Jwaħħal tooltip handler ma' kollezzjoni ta' elementi.

.tooltip('show')

Tiżvela tooltip ta' element. Jirritorna lil min iċempel qabel ma jkun intwera l-għodda (jiġifieri qabel ma shown.bs.tooltipjseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-tooltip. Tooltips b'titli ta' tul żero qatt ma jintwerew.

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

.tooltip('hide')

Jaħbi tooltip ta' element. Jirritorna lil min iċempel qabel ma l-għodda tkun ġiet moħbija (jiġifieri qabel ma hidden.bs.tooltipjseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-tooltip.

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

.tooltip('toggle')

Jiddawwar l-għodda ta' element. Jirritorna lil min iċempel qabel ma l-għodda tkun intweriet jew moħbija (jiġifieri qabel ma jseħħ l-avveniment shown.bs.tooltipjew ). hidden.bs.tooltipDan huwa meqjus bħala attivazzjoni "manwali" tal-tooltip.

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

.tooltip('destroy')

Jaħbi u jeqred it-tooltip ta' element. Tooltips li jużaw id-delega (li huma maħluqa bl -użu tal - selectorgħażla ) ma jistgħux jinqerdu individwalment fuq elementi ta 'grillu dixxendenti.

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

Avvenimenti

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

Popovers popover.js

Żid overlays żgħar ta 'kontenut, bħal dawk fuq l-iPad, ma' kwalunkwe element għall-akkomodazzjoni ta 'informazzjoni sekondarja.

Popovers li kemm it-titlu kif ukoll il-kontenut tagħhom huma ta' tul żero qatt ma jintwerew.

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

Eżempji

Popover statiku

Erba' għażliet huma disponibbli: fuq, lemin, qiegħ, u xellug allinjat.

Demo live

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

Erba' direzzjonijiet

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

Tkeċċi fuq ikklikkja li jmiss

Uża l- focusgrillu biex tkeċċi popovers fuq il-klikk li jmiss li jagħmel l-utent.

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

Użu

Ippermetti popovers permezz ta' JavaScript:

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

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-animation="".

Metodi

$().popover(options)

Inizjalizza popovers għal ġabra ta' elementi.

.popover('show')

Tiżvela popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt intwera (jiġifieri qabel ma shown.bs.popoverjseħħ l-avveniment). Dan huwa meqjus bħala "manwal" triggering tal-popover. Popovers li kemm it-titlu kif ukoll il-kontenut tagħhom huma ta' tul żero qatt ma jintwerew.

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

.popover('hide')

Jaħbi popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt ġie moħbi (jiġifieri qabel il-hidden.bs.popover jseħħ l-avveniment). Dan huwa meqjus bħala "manwal" triggering tal-popover.

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

.popover('toggle')

Jiddawwar il-popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt intwera jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.popoverjew ). hidden.bs.popoverDan huwa meqjus bħala "manwal" triggering tal-popover.

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

.popover('destroy')

Jaħbi u jeqred il-popover ta' element. Popovers li jużaw id-delega (li huma maħluqa bl -użu tal - selectorgħażla ) ma jistgħux jinqerdu individwalment fuq elementi trigger dixxendenti.

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

Avvenimenti

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

Messaġġi ta' twissija alert.js

Eżempji ta' twissijiet

Żid il-funzjonalità tat-tkeċċija mal-messaġġi kollha ta' twissija b'dan il-plugin.

Meta tuża .closebuttuna, għandha tkun l-ewwel tifel tal- .alert-dismissibleu l-ebda kontenut tat-test ma jista' jiġi quddiemha fil-markup.

Użu

Żid biss data-dismiss="alert"mal-buttuna ta 'qrib tiegħek biex awtomatikament tagħti funzjonalità ta' twissija mill-qrib. L-għeluq ta' allert ineħħiha mid-DOM.

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

Biex it-twissijiet tiegħek jużaw animazzjoni meta tagħlaq, kun żgur li għandhom il- klassijiet .fadeu .indiġà applikati għalihom.

Metodi

$().alert()

Jagħmel twissija tisma 'għal avvenimenti ikklikkja fuq elementi dixxendenti li għandhom l- data-dismiss="alert"attribut. (Mhux meħtieġ meta tuża l-awto-inizjalizzazzjoni tad-data-api.)

$().alert('close')

Jagħlaq twissija billi tneħħiha mid-DOM. Jekk il- .fadeu.in huma preżenti fuq l-element, it-twissija tisparixxi qabel ma titneħħa.

Avvenimenti

Il-plugin ta' twissija ta' Bootstrap jesponi ftit avvenimenti biex jaqbel mal-funzjonalità ta' twissija.

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

Buttuni button.js

Agħmel aktar bil-buttuni. Ikkontrolla l-istati tal-buttuna jew toħloq gruppi ta 'buttuni għal aktar komponenti bħal toolbars.

Stateful

Żid data-loading-text="Loading..."biex tuża stat tat-tagħbija fuq buttuna.

Din il-karatteristika hija deprecata mill-v3.3.5 u tneħħiet fil-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 wieħed

Żid data-toggle="button"biex tattiva t-toggling fuq buttuna waħda.

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

Checkbox / Radju

Żid data-toggle="buttons"ma' .btn-groupkaxxa ta' kontroll jew inputs tar-radju li jkun fih biex tippermetti t-toggling fl-istili rispettivi tagħhom.

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

Metodi

$().button('toggle')

Toggles push state. Jagħti lill-buttuna id-dehra li ġiet attivata.

$().button('reset')

Irrisettja l-istat tal-buttuna - tbiddel it-test mat-test oriġinali. Dan il-metodu huwa asinkronu u jirritorna qabel ma r-resetting fil-fatt tlesta.

$().button(string)

Tibdel it-test għal kwalunkwe stat tat-test definit tad-dejta.

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

Kollass collapse.js

Plugin flessibbli li juża numru żgħir ta 'klassijiet għal imġieba ta' toggle faċli.

Eżempju

Ikklikkja l-buttuni hawn taħt biex turi u taħbi element ieħor permezz ta' bidliet fil-klassi:

• .collapsejaħbi l-kontenut
• .collapsinghija applikata waqt transizzjonijiet
• .collapse.injuri kontenut

Tista' tuża link bl- hrefattribut, jew buttuna bl- data-targetattribut. Fiż-żewġ każijiet, data-toggle="collapse"huwa meħtieġ.

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

Eżempju tal-akkordju

Estendi l-imġieba tal-kollass default biex toħloq accordion mal-komponent tal-pannell.

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

Huwa wkoll possibbli li tpartit .panel-bodys ma .list-groups.

Użu

Il-plugin tal-kollass juża ftit klassijiet biex jimmaniġġja l-irfigħ tqil:

• .collapsejaħbi l-kontenut
• .collapse.injuri l-kontenut
• .collapsingtiżdied meta tibda t-tranżizzjoni, u titneħħa meta tispiċċa

Dawn il-klassijiet jistgħu jinstabu fi component-animations.less.

Via attributi tad-data

Żid biss data-toggle="collapse"u a data-targetmal-element biex awtomatikament tassenja l-kontroll ta 'element kollassabbli. L- data-targetattribut jaċċetta selettur CSS biex japplika l-kollass għalih. Kun żgur li żżid il-klassi collapsemal-element kollassabbli. Jekk tixtieq li tiftaħ awtomatikament, żid il-klassi addizzjonali in.

Biex iżżid ġestjoni tal-gruppi bħal accordion ma 'kontroll kollassabbli, żid l-attribut tad-data data-parent="#selector". Irreferi għad-demo biex tara dan fl-azzjoni.

Via JavaScript

Ippermetti manwalment ma':

$('.collapse').collapse()

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-parent="".

Metodi

.collapse(options)

Jattiva l-kontenut tiegħek bħala element kollassabbli. Jaċċetta għażliet fakultattivi object.

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

.collapse('toggle')

Jitbiddel element kollassabbli biex jintwera jew moħbi. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie muri jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.collapsejew ).hidden.bs.collapse

.collapse('show')

Juri element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli jkun fil-fatt intwera (jiġifieri qabel ma shown.bs.collapsejseħħ l-avveniment).

.collapse('hide')

Jaħbi element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.collapsejseħħ l-avveniment).

Avvenimenti

Il-klassi tal-kollass ta 'Bootstrap tesponi ftit avvenimenti għall-ganċ fil-funzjonalità tal-kollass.

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

Carousel carousel.js

Komponent ta 'slideshow għaċ-ċikliżmu minn elementi, bħal karużell. Il-karużelli mgħaqqda mhumiex appoġġjati.

Eżempji

Preċedenti Li jmiss

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

Captions fakultattivi

Żid captions mal-pjastri tiegħek faċilment bl- .carousel-captionelement fi kwalunkwe .item. Poġġi kważi kwalunkwe HTML fakultattiv hemmhekk u se jkun allinjat u fformattjat awtomatikament.

L-ewwel tikketta slide

Nulla vitae elit libero, a pharetra augue mollis interdum.

It-tieni slide tikketta

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

It-tielet slide tikketta

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Preċedenti Li jmiss

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

Użu

Karużelli multipli

Il-karużelli jeħtieġu l-użu ta' idkontenitur fuq l-aktar 'il barra (il- .carousel) biex il-kontrolli tal-karużell jiffunzjonaw kif suppost. Meta żżid karużelli multipli, jew meta tbiddel karużell id, kun żgur li taġġorna l-kontrolli rilevanti.

Via attributi tad-data

Uża l-attributi tad-dejta biex tikkontrolla faċilment il-pożizzjoni tal-karużell. data-slidejaċċetta l-kliem kjavi prevjew next, li jibdel il-pożizzjoni slide relattiva għall-pożizzjoni attwali tagħha. Inkella, uża data-slide-tobiex tgħaddi indiċi ta' slide mhux ipproċessat lill-karużell data-slide-to="2", li jbiddel il-pożizzjoni tal-islajd għal indiċi partikolari li jibda b' 0.

L- data-ride="carousel"attribut jintuża biex jimmarka karużell bħala animazzjoni li jibda mat-tagħbija tal-paġna. Ma jistax jintuża flimkien ma 'inizjalizzazzjoni JavaScript espliċita (superjuri u mhux meħtieġa) tal-istess carousel.

Via JavaScript

Ċempel il-karużell manwalment bi:

$('.carousel').carousel()

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-interval="".

Metodi

.carousel(options)

Inizjalizza l-karużell b'għażliet fakultattivi objectu jibda jiċċirkola permezz ta 'oġġetti.

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

.carousel('cycle')

Ċikli permezz tal-oġġetti tal-karużell mix-xellug għal-lemin.

.carousel('pause')

Jwaqqaf il-karużell milli jiċċirkola permezz ta' oġġetti.

.carousel(number)

Iċċekkja l-karużell għal qafas partikolari (ibbażat fuq 0, simili għal firxa).

.carousel('prev')

Ċikli għall-oġġett preċedenti.

.carousel('next')

Ċikli għall-oġġett li jmiss.

Avvenimenti

Il-klassi tal-karużell tal-Bootstrap tesponi żewġ avvenimenti biex tgħaqqad il-funzjonalità tal-karużell.

Iż-żewġ avvenimenti għandhom il-proprjetajiet addizzjonali li ġejjin:

• direction: Id-direzzjoni li fiha l-karużell qed jiżżerżaq ( "left"jew "right").
• relatedTarget: L-element DOM li qed jiżżerżaq fil-post bħala l-oġġett attiv.

L-avvenimenti kollha tal-karużell jiġu sparati lejn il-karużell innifsu (jiġifieri fil- <div class="carousel">).

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

Waħħal affix.js

Eżempju

Il-plugin tat-twaħħil jinxtegħel position: fixed;u jitfi, u jimita l-effett misjub b' position: sticky;. Is-subnavigazzjoni fuq il-lemin hija demo ħaj tal-plugin affix.

Użu

Uża l-plugin tat-twaħħil permezz tal-attributi tad-dejta jew manwalment bil-JavaScript tiegħek stess. Fiż-żewġ sitwazzjonijiet, trid tipprovdi CSS għall-pożizzjonament u l-wisa 'tal-kontenut imwaħħal tiegħek.

Nota: Tużax il-plugin tat-twaħħil fuq element li jinsab f'element relattivament pożizzjonat, bħal kolonna miġbuda jew imbuttata, minħabba bug ta' rendering ta' Safari .

Pożizzjonament permezz CSS

Il-plugin tat-twaħħil jaqleb bejn tliet klassijiet, kull waħda tirrappreżenta stat partikolari: .affix, .affix-top, u .affix-bottom. Int trid tipprovdi l-istili, bl-eċċezzjoni ta ' position: fixed;on .affix, għal dawn il-klassijiet lilek innifsek (indipendenti minn dan il-plugin) biex timmaniġġja l-pożizzjonijiet attwali.

Hawn kif jaħdem il-plugin tal-affiss:

1. Biex tibda, il-plugin iżid .affix-topbiex jindika li l-element jinsab fl-ogħla pożizzjoni tiegħu. F'dan il-punt l-ebda pożizzjonament CSS mhu meħtieġ.
2. L-iskrolljar mill-element li trid jitwaħħal għandu jwassal għat-twaħħil attwali. Dan huwa fejn .affixjissostitwixxi .affix-topu jissettja position: fixed;(provdut mis-CSS ta 'Bootstrap).
3. Jekk jiġi definit offset tal-qiegħ, l-iskrolljar tal-passat għandu jissostitwixxi .affixb' .affix-bottom. Peress li l-kumpensi huma fakultattivi, l-issettjar wieħed jeħtieġ li tissettja s-CSS xierqa. F'dan il-każ, żid position: absolute;meta meħtieġ. Il-plugin juża l-attribut tad-dejta jew l-għażla JavaScript biex jiddetermina fejn għandu jpoġġi l-element minn hemm.

Segwi l-passi ta 'hawn fuq biex issettja s-CSS tiegħek għal waħda mill-għażliet ta' użu hawn taħt.

Via attributi tad-data

Biex iżżid faċilment l-imġieba tat-twaħħil ma 'kwalunkwe element, żid biss data-spy="affix"mal-element li trid tispija fuqu. Uża offsets biex tiddefinixxi meta toggle l-pinning ta 'element.

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

Via JavaScript

Ċempel il-plugin tal-affiss permezz ta' JavaScript:

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

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-offset-top="200".

Metodi

.affix(options)

Jattiva l-kontenut tiegħek bħala kontenut imwaħħal. Jaċċetta għażliet fakultattivi object.

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

.affix('checkPosition')

Jikkalkula mill-ġdid l-istat tat-twaħħil ibbażat fuq id-dimensjonijiet, il-pożizzjoni, u l-pożizzjoni tal-iscroll tal-elementi rilevanti. Il -klassijiet .affix, .affix-top, u .affix-bottomhuma miżjuda jew imneħħija mill-kontenut imwaħħal skont l-istat il-ġdid. Dan il-metodu jeħtieġ li jissejjaħ kull meta jinbidlu d-dimensjonijiet tal-kontenut imwaħħal jew l-element fil-mira, biex jiġi żgurat pożizzjoni korretta tal-kontenut imwaħħal.

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

Avvenimenti

Il-plugin tat-twaħħil ta 'Bootstrap jesponi ftit avvenimenti għall-ganċ fil-funzjonalità tat-twaħħil.