Apèsi sou lekòl la

Endividyèl oswa konpile

Plugins yo ka enkli endividyèlman (lè l sèvi avèk *.jsdosye endividyèl Bootstrap a), oswa tout nan yon fwa (itilize bootstrap.jsoswa minified la bootstrap.min.js).

Done atribi

Ou ka sèvi ak tout grefon Bootstrap piman atravè API a make san ekri yon sèl liy JavaScript. Sa a se premye klas API Bootstrap a epi li ta dwe premye konsiderasyon ou lè w ap itilize yon Plugin.

Sa te di, nan kèk sitiyasyon li ka dezirab fèmen fonksyonalite sa a. Se poutèt sa, nou bay tou kapasite pou enfim API atribi done yo lè nou dekonekte tout evènman sou dokiman an ki gen espas non ak data-api. Sa a sanble tankou sa a:

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

Altènativman, vize yon plugin espesifik, jis enkli non plugin a kòm yon espas non ansanm ak espas non done-api tankou sa a:

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

Pwogram API

Nou kwè tou ou ta dwe kapab itilize tout grefon Bootstrap sèlman atravè API JavaScript. Tout API piblik yo se yon sèl, metòd chèn, epi retounen koleksyon an aji sou.

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

Tout metòd yo ta dwe aksepte yon opsyon opsyon opsyon, yon kòd ki vize yon metòd patikilye, oswa pa gen anyen (ki inisye yon plugin ak konpòtman default):

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

Chak Plugin tou ekspoze konstrukteur anvan tout koreksyon li yo sou yon Constructorpwopriyete: $.fn.popover.Constructor. Si ou ta renmen jwenn yon egzanp plugin patikilye, rekipere li dirèkteman nan yon eleman: $('[rel="popover"]').data('popover').

Anviwònman defo

Ou ka chanje paramèt defo pou yon plugin lè w modifye Constructor.DEFAULTSobjè plugin a:

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

Pa gen konfli

Pafwa li nesesè pou itilize grefon Bootstrap ak lòt kad UI. Nan sikonstans sa yo, kolizyon espas non ka detanzantan rive. Si sa rive, ou ka rele .noConflictsou Plugin ou vle retounen valè a.

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

Evènman

Bootstrap bay evènman koutim pou aksyon inik pifò grefon yo. Anjeneral, sa yo vini nan yon fòm enfinitif ak patisipan sot pase yo - kote infinitif la (egzanp show) deklanche nan kòmansman yon evènman, ak fòm patisipasyon sot pase li yo (egzanp shown) deklanche sou fini yon aksyon.

Apati 3.0.0, tout evènman Bootstrap yo gen espas non.

Tout evènman infinitif bay preventDefaultfonksyonalite. Sa a bay kapasite pou sispann ekzekisyon yon aksyon anvan li kòmanse.

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

Nimewo vèsyon yo

Ou ka jwenn vèsyon an nan chak grefon jQuery Bootstrap la atravè VERSIONpwopriyete a nan konstrukteur plugin a. Pa egzanp, pou plugin tooltip la:

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

Pa gen bak espesyal lè JavaScript enfim

Plugins Bootstrap yo pa tonbe patikilyèman avèk gras lè JavaScript enfim. Si ou pran swen eksperyans itilizatè a nan ka sa a, sèvi ak <noscript>yo eksplike sitiyasyon an (ak ki jan yo re-aktive JavaScript) itilizatè ou yo, epi/oswa ajoute pwòp repwodiksyon koutim ou yo.

Tranzisyon transition.js

Konsènan tranzisyon yo

Pou efè tranzisyon senp, enkli transition.jsyon fwa ansanm ak lòt dosye JS yo. Si w ap itilize konpile a (oswa minified) bootstrap.js, pa gen okenn nesesite pou mete sa a—li deja la.

Ki sa ki anndan an

Transition.js se yon asistan debaz pou transitionEndevènman ak yon Emulation tranzisyon CSS. Lòt grefon yo itilize li pou tcheke sipò tranzisyon CSS ak pou trape tranzisyon pandye yo.

Enfimite tranzisyon yo

Tranzisyon yo ka dezaktive globalman lè l sèvi avèk snippet JavaScript sa a, ki dwe vini apre transition.js(oswa bootstrap.js, bootstrap.min.jsselon ka a) te chaje:

$.support.transition = false

Modal modal.js

Modèl yo rasyonalize, men fleksib, envit dyalòg ak fonksyonalite minimòm ki nesesè yo ak default entelijan.

Akòz fason HTML5 defini semantik li yo, autofocusatribi HTML la pa gen okenn efè nan modal Bootstrap. Pou reyalize menm efè a, sèvi ak kèk JavaScript koutim:

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

Egzanp yo

Egzanp estatik

Yon modal rann ak header, kò, ak seri aksyon nan pye a.

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

Live Demo

Aktive yon modal atravè JavaScript lè w klike sou bouton ki anba a. Li pral glise desann ak fennen soti nan tèt paj la.

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

Gwosè si ou vle

Modal yo gen de gwosè opsyonèl, ki disponib atravè klas modifye yo dwe mete sou yon .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 bs-example-modal-lg" 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 bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Retire animasyon

Pou modal ki tou senpleman parèt olye ke fennen nan yo wè, retire .fadeklas la nan maketing modal ou a.

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

Sèvi ak sistèm kadriyaj la

Pou pran avantaj de sistèm kadriyaj Bootstrap la nan yon modal, jis nich .rowyo nan .modal-bodyak Lè sa a, sèvi ak klas sistèm kadriyaj nòmal yo.

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

Varye kontni modal ki baze sou bouton deklanche

Gen yon pakèt bouton ki tout deklanche menm modal la, jis ak kontni yon ti kras diferan? Sèvi event.relatedTargetak ak HTML data-*atribi (petèt atravè jQuery ) yo varye sa ki nan modal la depann sou ki bouton yo te klike. Gade dokiman Evènman Modal yo pou plis detay sou 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)
})

Itilizasyon

Plugin modal la chanje kontni kache ou sou demann, atravè atribi done oswa JavaScript. Li ajoute tou .modal-openpou <body>pase sou konpòtman defile default ak jenere yon .modal-backdroppou bay yon zòn klike sou pou ranvwaye modal yo montre lè klike deyò modal la.

Via atribi done yo

Aktive yon modal san w pa ekri JavaScript. Mete data-toggle="modal"sou yon eleman kontwolè, tankou yon bouton, ansanm ak yon data-target="#foo"oswa href="#foo"pou vize yon modal espesifik pou activer.

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

Via JavaScript

Rele yon modal ak id myModalak yon sèl liy JavaScript:

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

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-backdrop="".

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

Metòd

.modal(options)

Aktive kontni ou kòm yon modal. Aksepte yon opsyon opsyonèl object.

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

.modal('toggle')

Manyèlman aktive yon modal. Retounen bay moun kap rele a anvan modal la aktyèlman te montre oswa kache (sa vle di anvan evènman shown.bs.modalan hidden.bs.modalrive).

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

.modal('show')

Manyèlman ouvè yon modal. Retounen bay moun k ap rele a anvan yo montre modal la (sa vle di anvan shown.bs.modalevènman an rive).

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

.modal('hide')

Manyèlman kache yon modal. Retounen bay moun kap rele a anvan modal la te kache (sa vle di anvan hidden.bs.modalevènman an rive).

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

.modal('handleUpdate')

Rejiste pozisyon modal la pou kontrekare yon defile nan ka youn ta parèt, ki ta fè so modal la sou bò gòch la.

Sèlman nesesè lè wotè modal la chanje pandan li louvri.

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

Evènman

Klas modal Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite modal.

Tout evènman modal yo tire sou modal la li menm (sa vle di nan la <div class="modal">).

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

Dropdowns dropdown.js

Egzanp yo

Ajoute meni deroulan nan prèske nenpòt bagay ak senp plugin sa a, ki gen ladan navbar la, onglè, ak grenn.

Nan yon navbar

Nan grenn

Itilizasyon

Atravè atribi done oswa JavaScript, Plugin deroule a chanje kontni kache (meni deroulant) lè w chanje .openklas la sou atik lis paran an.

Sou aparèy mobil, ouvèti yon dropdown ajoute yon .dropdown-backdropkòm yon zòn tiyo pou fèmen meni dropdown lè frape deyò meni an, yon kondisyon pou sipò iOS apwopriye. Sa vle di ke chanje soti nan yon meni deroule louvri nan yon meni deroule diferan mande pou yon tiyo siplemantè sou mobil.

Remak: Se data-toggle="dropdown"atribi a konte sou pou fèmen meni deroulan nan yon nivo aplikasyon, kidonk li se yon bon lide pou toujou sèvi ak li.

Via atribi done yo

Ajoute data-toggle="dropdown"nan yon lyen oswa bouton pou aktive yon deroulan.

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

Pou kenbe URL yo entak ak bouton lyen, sèvi ak data-targetatribi a olye pou yo 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

Rele dropdowns yo atravè JavaScript:

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

Opsyon

Okenn

Metòd

$().dropdown('toggle')

Aktive meni dewoulman yon ba nav oswa navigasyon onglet yo bay.

Evènman

Tout evènman dropdown yo tire nan .dropdown-menueleman paran '.

Tout evènman dropdown gen yon relatedTargetpwopriyete, ki gen valè se eleman jete lank baskile.

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

ScrollSpy scrollspy.js

Egzanp nan navbar

Plugin ScrollSpy a se pou mete ajou otomatikman sib navigasyon ki baze sou pozisyon woulo liv la. Scroll zòn ki anba a navbar epi gade chanjman nan klas aktif. Sou atik yo deroule yo pral make tou.

Itilizasyon

Egzije pozisyon relatif

Pa gen pwoblèm metòd aplikasyon an, scrollspy mande pou itilize position: relative;sou eleman w ap espyonaj sou. Nan pifò ka sa a se <body>. Lè scrollspying sou eleman lòt pase <body>, asire w ke ou gen yon heightseri ak overflow-y: scroll;aplike.

Via atribi done yo

Pou ajoute fasilman konpòtman scrollspy nan navigasyon topbar ou a, ajoute data-spy="scroll"nan eleman ou vle al rekonèt (pi tipikman sa a ta dwe <body>). Lè sa a, ajoute data-targetatribi a ak ID oswa klas eleman paran nenpòt .naveleman 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

Apre w fin ajoute position: relative;CSS ou a, rele scrollspy via JavaScript:

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

Metòd

.scrollspy('refresh')

Lè w ap itilize scrollspy ansanm ak ajoute oswa retire eleman nan DOM, w ap bezwen rele metòd rafrechisman an konsa:

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

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-offset="".

Evènman

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

Tab.js ki ka chanje

Onglet egzanp

Ajoute fonksyonalite rapid, dinamik tab pou tranzisyon atravè fenèt kontni lokal yo, menm atravè meni dewoulan. Onglet anbrike yo pa sipòte.

Itilizasyon

Pèmèt onglè tabulab yo atravè JavaScript (yo bezwen chak tab aktive endividyèlman):

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

Ou ka aktive onglè endividyèl yo nan plizyè fason:

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

Marke

Ou ka aktive yon tab oswa navigasyon grenn san yo pa ekri okenn JavaScript pa senpleman espesifye data-toggle="tab"oswa data-toggle="pill"sou yon eleman. Ajoute navak nav-tabsklas yo nan tab la pral aplike style tabul la Bootstrap , pandan y ap ajoute klas yo ak yo pral aplike stil grenn .navnav-pills

<div>

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

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

</div>

Efè fennen

Pou fè onglet fennen nan, ajoute .fadenan chak .tab-pane. Premye volet tab la dwe genyen tou .inpou fè kontni inisyal la vizib.

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

Metòd

$().tab

Aktive yon eleman tab ak yon veso kontni. Tab ta dwe gen swa yon data-targetoswa yon hrefvize yon ne veso nan DOM la. Nan egzanp ki anwo yo, onglè yo se <a>s yo ak data-toggle="tab"atribi.

.tab('show')

Chwazi tab la bay epi montre kontni ki asosye li yo. Nenpòt lòt tab ki te chwazi deja vin pa seleksyone epi kontni ki asosye li yo kache. Retounen bay moun kap rele a anvan yo te montre volet tab la (sa vle di anvan shown.bs.tabevènman an rive).

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

Evènman

Lè w ap montre yon nouvo tab, evènman yo pran dife nan lòd sa a:

1. hide.bs.tab(sou onglet aktif aktyèl la)
2. show.bs.tab(sou onglet ki dwe montre)
3. hidden.bs.tab(sou onglet aktif anvan an, menm jan ak hide.bs.tabevènman an)
4. shown.bs.tab(sou onglet ki fèk parèt aktif la, menm bagay la tou pou show.bs.tabevènman an)

Si pa gen okenn tab te deja aktif, Lè sa a, hide.bs.tabak hidden.bs.tabevènman yo pa pral revoke.

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

Ti konsèy tooltip.js

Enspire pa ekselan plugin jQuery.tipsy ekri pa Jason Frame; Ti konsèy yo se yon vèsyon mete ajou, ki pa konte sou imaj, sèvi ak CSS3 pou animasyon, ak done-atribi pou estokaj tit lokal yo.

Konsèy zouti ak tit zewo-longè pa janm parèt.

Egzanp yo

Pase sou lyen ki anba yo pou wè konsèy sou zouti:

Konsèy estatik

Gen kat opsyon ki disponib: anwo, adwat, anba, ak aliye agoch.

Kat direksyon

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

Itilizasyon

Plugin konsèy zouti a jenere kontni ak mak sou demann, epi pa default mete konsèy zouti apre eleman deklanche yo.

Deklanche konsèy zouti a atravè JavaScript:

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

Marke

Marke ki nesesè pou yon konsèy zouti se sèlman yon dataatribi epi titlesou eleman HTML ou vle gen yon konsèy. Markup pwodwi a nan yon konsèy zouti se pito senp, menm si li mande pou yon pozisyon (pa default, mete nan toppa Plugin la).

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

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-animation="".

Metòd

$().tooltip(options)

Tache yon moun ki okipe enfòmasyon sou yon koleksyon eleman.

.tooltip('show')

Revele konsèy zouti yon eleman. Retounen bay moun kap rele a anvan yo te montre enfòmasyon an (sa vle di anvan shown.bs.tooltipevènman an rive). Sa a konsidere kòm yon "manyèl" deklanche nan konsèy la. Konsèy zouti ak tit zewo-longè pa janm parèt.

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

.tooltip('hide')

Kache konsèy yon eleman. Retounen bay moun kap rele a anvan enfòmasyon an te kache (sa vle di anvan hidden.bs.tooltipevènman an rive). Sa a konsidere kòm yon "manyèl" deklanche nan konsèy la.

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

.tooltip('toggle')

Aktivite konsèy zouti yon eleman. Retounen bay moun kap rele a anvan yo te montre enfòmasyon an aktyèlman oswa kache (sa vle di anvan evènman shown.bs.tooltipan hidden.bs.tooltiprive). Sa a konsidere kòm yon "manyèl" deklanche nan konsèy la.

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

.tooltip('destroy')

Kache epi detwi ti konsèy yon eleman. Konsèy zouti ki sèvi ak delegasyon (ki kreye lè l sèvi avèk opsyon selectoran ) pa ka detwi endividyèlman sou eleman deklanche desandan yo.

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

Evènman

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

Popovers popover.js

Ajoute ti kouvri kontni, tankou sa yo sou iPad a, nan nenpòt eleman pou lojman segondè enfòmasyon.

Popovers ki gen tou de tit ak kontni se zewo longè yo pa janm parèt.

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

Egzanp yo

Popover estatik

Gen kat opsyon ki disponib: anwo, adwat, anba, ak aliye agoch.

Live Demo

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

Kat direksyon

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

Rejte sou pwochen klike sou

Sèvi ak focusdeklanche a pou ranvwaye popovers sou pwochen klik itilizatè a fè.

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

Itilizasyon

Pèmèt popovers via JavaScript:

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

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-animation="".

Metòd

$().popover(options)

Inisyalize popovers pou yon koleksyon eleman.

.popover('show')

Revele popover yon eleman. Retounen bay moun kap rele a anvan popover a aktyèlman te montre (sa vle di anvan shown.bs.popoverevènman an rive). Sa a konsidere kòm yon "manyèl" deklanche popover la. Popovers ki gen tou de tit ak kontni se zewo longè yo pa janm parèt.

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

.popover('hide')

Kache popover yon eleman. Retounen bay moun kap rele a anvan popover a aktyèlman kache (sa vle di anvan hidden.bs.popoverevènman an rive). Sa a konsidere kòm yon "manyèl" deklanche popover la.

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

.popover('toggle')

Aktivite popover yon eleman. Retounen bay moun kap rele a anvan popover a aktyèlman te montre oswa kache (sa vle di anvan evènman shown.bs.popoveran hidden.bs.popoverrive). Sa a konsidere kòm yon "manyèl" deklanche popover la.

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

.popover('destroy')

Kache epi detwi popover yon eleman. Popovers ki itilize delegasyon (ki kreye lè l sèvi avèk opsyon selectoran ) pa ka detwi endividyèlman sou eleman deklanche desandan yo.

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

Evènman

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

Mesaj alèt alert.js

Egzanp alèt

Ajoute fonksyonalite ranvwaye nan tout mesaj alèt ak plugin sa a.

Lè w ap itilize yon .closebouton, li dwe premye pitit la .alert-dismissibleepi pa gen okenn kontni tèks ki ka vin devan li nan maketing la.

Itilizasyon

Jis ajoute data-dismiss="alert"nan bouton fèmen ou a otomatikman bay yon fonksyonalite fèmen alèt. Fèmen yon alèt retire li nan DOM la.

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

Pou gen alèt ou yo sèvi ak animasyon lè yo fèmen, asire w ke yo gen .fadeak.in yo deja aplike pou yo.

Metòd

$().alert()

Fè yon alèt koute pou evènman klike sou eleman desandan ki gen data-dismiss="alert"atribi a. (Pa nesesè lè w ap itilize oto-inisyalizasyon done-api a.)

$().alert('close')

Fèmen yon alèt lè w retire li nan DOM la. Si klas yo .fadeak .inyo prezan sou eleman an, alèt la ap disparèt anvan li retire li.

Evènman

Plugin alèt Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite alèt.

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

Bouton button.js

Fè plis ak bouton. Kontwole eta bouton oswa kreye gwoup bouton pou plis konpozan tankou ba zouti.

Stateful

Ajoute data-loading-text="Loading..."pou itilize yon eta chaje sou yon bouton.

Karakteristik sa a demode depi v3.3.5 e li te retire nan v4.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Single baskile

Ajoute data-toggle="button"pou aktive baskile sou yon sèl bouton.

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

Case / Radyo

Ajoute data-toggle="buttons"nan yon .btn-groupkaz ki gen ladann oswa entrées radyo pou pèmèt baskile nan estil respektif yo.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Metòd

$().button('toggle')

Baskile pouse eta a. Bay bouton an aparans ke li te aktive.

$().button('reset')

Reyajiste eta bouton - chanje tèks nan tèks orijinal la. Metòd sa a se asenkron epi li retounen anvan reset la fini.

$().button(string)

Boukante tèks nan nenpòt eta done defini tèks.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Efondre collapse.js

Plugin fleksib ki itilize yon ti ponyen klas pou yon konpòtman fasil.

Egzanp

Klike sou bouton ki anba yo pou montre ak kache yon lòt eleman atravè chanjman klas yo:

• .collapsekache kontni
• .collapsingyo aplike pandan tranzisyon yo
• .collapse.inmontre kontni

Ou ka itilize yon lyen ak hrefatribi a, oswa yon bouton ak data-targetatribi a. Nan de ka yo, data-toggle="collapse"li nesesè.

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

Egzanp akòdeyon

Pwolonje konpòtman efondreman default la pou kreye yon akòdeyon ak eleman panèl la.

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

Li posib tou pou swap soti .panel-bodys ak .list-groups.

Itilizasyon

Plugin efondreman an itilize kèk klas pou okipe leve lou:

• .collapsekache kontni an
• .collapse.inmontre kontni an
• .collapsingyo ajoute lè tranzisyon an kòmanse, epi li retire lè li fini

Ou ka jwenn klas sa yo nan component-animations.less.

Via atribi done yo

Jis ajoute data-toggle="collapse"ak yon data-targetnan eleman nan otomatikman bay kontwòl nan yon eleman pliable. Atribi a data-targetaksepte yon seleksyon CSS pou aplike efondreman an. Asire ou ke ou ajoute klas collapsela nan eleman ki rabat. Si ou ta renmen li louvri defo, ajoute klas adisyonèl la in.

Pou ajoute jesyon gwoup ki sanble ak akòdeyon nan yon kontwòl ki kapab retire, ajoute atribi done yo data-parent="#selector". Al gade nan Demo a pou wè sa a an aksyon.

Via JavaScript

Pèmèt manyèlman ak:

$('.collapse').collapse()

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-parent="".

Metòd

.collapse(options)

Aktive kontni ou kòm yon eleman plim. Aksepte yon opsyon opsyonèl object.

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

.collapse('toggle')

Baskile yon eleman ki rabat pou montre oswa kache. Retounen bay moun k ap rele a anvan yo te montre oswa kache eleman ki rabat (sa vle di anvan evènman shown.bs.collapsean hidden.bs.collapserive).

.collapse('show')

Montre yon eleman rabat. Retounen bay moun k ap rele a anvan yo te montre eleman ki rabat la (sa vle di anvan shown.bs.collapseevènman an rive).

.collapse('hide')

Kache yon eleman ki rabat. Retounen bay moun k ap rele a anvan yo te kache eleman ki rabat (sa vle di anvan hidden.bs.collapseevènman an rive).

Evènman

Klas efondreman Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite efondreman.

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

Carousel carousel.js

Yon eleman diaporama pou monte bisiklèt nan eleman, tankou yon Carousel. Kawozèl anbrike yo pa sipòte.

Egzanp yo

Previous Next

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

Titre si ou vle

Ajoute ti tit nan diapositives ou yo fasil ak .carousel-captioneleman ki nan nenpòt ki .item. Mete jis sou nenpòt HTML opsyonèl nan la epi li pral otomatikman aliyen ak fòma.

Premye etikèt glise

Nulla vitae elit libero, a pharetra augue mollis interdum.

Dezyèm etikèt glise

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Twazyèm etikèt glise

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Next

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

Itilizasyon

Carousel miltip

Carousels mande pou yo sèvi ak yon idsou veso ki pi eksteryè a (la .carousel) pou kontwòl Carousel yo fonksyone byen. Lè w ajoute plizyè karousèl, oswa lè w ap chanje yon karousèl id, asire w ou mete ajou kontwòl ki enpòtan yo.

Via atribi done yo

Sèvi ak atribi done yo fasil kontwole pozisyon nan Carousel la. data-slideaksepte mo kle yo prevoswa next, ki chanje pozisyon glise an parapò ak pozisyon aktyèl li. Altènativman, sèvi ak data-slide-toyo pase yon endèks glise anvan tout koreksyon nan Carousel la data-slide-to="2", ki chanjman pozisyon glise nan yon endèks patikilye kòmanse ak 0.

Yo data-ride="carousel"itilize atribi a pou make yon Carousel kòm animasyon apati chaj paj la. Li pa ka itilize nan konbinezon ak (redondan ak nesesè) inisyalizasyon JavaScript eksplisit nan menm Carousel la.

Via JavaScript

Rele Carousel manyèlman ak:

$('.carousel').carousel()

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-interval="".

Metòd

.carousel(options)

Inisyalize Carousel la ak yon opsyon opsyonèl objectepi kòmanse monte bisiklèt nan atik yo.

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

.carousel('cycle')

Fè sik nan atik yo Carousel de goch a dwat.

.carousel('pause')

Sispann Carousel la soti nan monte bisiklèt nan atik yo.

.carousel(number)

Cycles Carousel la nan yon ankadreman patikilye (0 ki baze sou, menm jan ak yon etalaj).

.carousel('prev')

Cycles pou atik anvan an.

.carousel('next')

Cycles pou atik kap vini an.

Evènman

Klas Carousel Bootstrap la ekspoze de evènman pou branche nan fonksyonalite Carousel.

Tou de evènman yo gen pwopriyete adisyonèl sa yo:

• direction: Direksyon kote kawozèl la ap glise (swa "left"oswa "right").
• relatedTarget: Eleman DOM ke yo te glise an plas kòm atik aktif la.

Tout evènman Carousel yo tire sou Carousel la li menm (sa vle di nan la <div class="carousel">).

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

Afiche affix.js

Egzanp

Plugin afiks la active position: fixed;ak koupe, imite efè yo jwenn ak position: sticky;. Subnavigation sou bò dwat la se yon demonstrasyon ap viv nan plugin afiks la.

Itilizasyon

Sèvi ak Plugin afiks la atravè atribi done oswa manyèlman ak pwòp JavaScript ou. Nan tou de sitiyasyon, ou dwe bay CSS pou pwezante ak lajè kontni ou apoze.

Remak: Pa itilize plugin afiks la sou yon eleman ki nan yon eleman relativman pozisyone, tankou yon kolòn rale oswa pouse, akòz yon ensèk rann Safari .

Pozisyon atravè CSS

Plugin afiks la chanje ant twa klas, chak reprezante yon eta patikilye: .affix, .affix-top, ak .affix-bottom. Ou dwe bay estil yo, eksepte position: fixed;sou .affix, pou klas sa yo tèt ou (endepandan de plugin sa a) pou okipe pozisyon aktyèl yo.

Men ki jan plugin afiks la ap travay:

1. Pou kòmanse, plugin a ajoute .affix-toppou endike eleman an nan pozisyon ki pi wo a. Nan pwen sa a pa gen okenn pozisyon CSS obligatwa.
2. Scrolling pase eleman ou vle apoze a ta dwe deklanche apoze aktyèl la. Sa a se kote .affixranplase .affix-topak mete position: fixed;(ki bay pa CSS Bootstrap a).
3. Si yo defini yon konpanse anba, defile pase li ta dwe ranplase .affixak .affix-bottom. Depi konpansasyon yo opsyonèl, mete youn mande pou ou mete CSS ki apwopriye a. Nan ka sa a, ajoute position: absolute;lè sa nesesè. Plugin a sèvi ak atribi done oswa opsyon JavaScript pou detèmine ki kote yo pozisyone eleman nan la.

Swiv etap ki anwo yo pou mete CSS ou pou youn nan opsyon itilizasyon ki anba yo.

Via atribi done yo

Pou fasilman ajoute konpòtman apoze nan nenpòt eleman, jis ajoute data-spy="affix"nan eleman ou vle al rekonèt sou. Sèvi ak konpansasyon pou defini ki lè pou aktive pinning yon eleman.

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

Via JavaScript

Rele plugin afiks la atravè JavaScript:

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

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-offset-top="200".

Metòd

.affix(options)

Aktive kontni ou kòm kontni apoze. Aksepte yon opsyon opsyonèl object.

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

.affix('checkPosition')

Rekalkile eta afiks la baze sou dimansyon, pozisyon, ak pozisyon woulo liv eleman ki enpòtan yo. , .affix, .affix-topak .affix-bottomklas yo ajoute oswa retire nan kontni apoze selon nouvo eta a. Metòd sa a bezwen yo dwe rele chak fwa dimansyon yo nan kontni apoze a oswa eleman sib la chanje, asire pozisyon kòrèk nan kontni an apoze.

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

Evènman

Plugin afiks Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite afiks.