Overview

Singula vel Composuit

Plugins singillatim includi possunt (singulis *.jsfasciculis utens Bootstrap), vel simul (utendo bootstrap.jsvel minuto bootstrap.min.js).

Data attributa

Omnibus Bootstrap plugins pure per notam API uti potes sine scriptura unica JavaScript. Hoc primum genus API Bootstrap est et debet esse prima consideratio cum plugin utens.

Quod dixit, in aliquibus adiunctis exoptandum est ut hanc functionem avertat. Ideo etiam facultatem praebemus ut inactivandi attributum API datam solvendo omnia eventus in documento cum nominato data-api. Hoc simile est:

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

Vel, plugin specificum oppugnare, solum includere nomen plugin in spatio nominali cum electronicis api-spatii ut hoc:

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

Programma API

Credimus etiam te posse omnia Bootstrap plugins pure per JavaScript API uti. APIs publicus omnes simplices sunt, catenabiles modi, et collectio sollicitata redde.

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

Omnes modi accipere debent obiectum optionum libitum, chorda quae modum certo peltat, vel nihil (quod plugin cum defectu agendi) inchoat);

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

Singula plugin etiam suam rudis constructor in Constructorproprietatem exponit: $.fn.popover.Constructor. Si particularem instantiam plugin obtinere velis, eam protinus ab elemento recipe: $('[rel="popover"]').data('popover').

Default occasus

Default occasus mutare potes pro plugin Constructor.DEFAULTSobiecto obiecto modificato:

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

Non conflictus

Aliquando necesse est plugins Bootstrap uti cum aliis UI compagibus. His in adiunctis, spatii spatii nomina interdum fieri possunt. Si hoc accidit, .noConflictplugin vocare voles ad valorem reverti.

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

Events

Mores eventus Bootstrap praebet pro pluribus plugins' singularibus actionibus. Fere hae veniunt in forma participii infinitivi et praeteriti - ubi infinitivus (ex. show) utitur in initio eventus, et forma participii praeteriti (ex. shown) utitur ad complementum actionis.

As 3.0.0, omnes Bootstrap eventus nominantur.

Omnes infinitivi eventus preventDefaultfunctionem praebent. Hoc praebet facultatem ad executionem actionis antequam incipiat prohibere.

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

Numeri versionis

Uniuscuiusque versio scriptoris jQuery plugins Bootstrap accessi potest per VERSIONproprietatem fabricatoris plugin. Exempli gratia, pro tooltip plugin:

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

Nullus specialis fallbacks cum JavaScript est disabled

Plugini Bootstrap non recedunt praecipue lepide cum JavaScript debilis est. Si experientiam usoris in hoc casu curas, utere <noscript>ad explicandam condicionem (et quomodo re-enable JavaScript) ad usores tuos, et/vel lapsus consuetudinem tuam adde.

transitus transitus.js

De transitionibus

Pro simplicibus effectibus transitus, includunt transition.jssemel e regione imaginum reliquarum JS. Si compilato (vel minuto) uteris bootstrap.js, non opus est hoc includere — iam est.

Quid intus?

Transitus.j est praecipuum adiutorium transitionEndeventuum necnon emulatoris transitus CSS. Aliis plugins usus est ad sustentationem transitus CSS reprimendam et transitus pensiles capiendas.

inactivare transitus

Transitiones globally debilitatae esse possunt ut sequens JavaScript PRAECISIO, quae post transition.js(vel bootstrap.js, bootstrap.min.jsut casus fert) venire debet, onerata est:

$.support.transition = false

modal modal.js

Modales turpis, sed flexibiles, dialogum suggerunt minimum functionality et defaltis dolor.

Ob quam HTML5 sua semantica definit, autofocusattributio HTML effectum in modalibus Bootstrap non habet. Ad eundem effectum assequendum, utere aliqua consuetudine JavaScript:

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

Exempla

Static example

Modale redditum cum header, corpore, et actionum in 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 -->

Vivamus demo

Modalis per Toggle JavaScript strepitando puga pyga infra. A summo paginae labatur et deficiet.

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

Moles libitum

Modales duas magnitudinum optionales, promptas per modifier classes, in 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 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>

Aufer animationem

Modales enim, qui simpliciter apparent potius quam in conspectum decident, .fadegenus e charactere modali removent.

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

Ratio utens malesuada euismod

Uti Bootstrap ratio eget euismod intra modalem, iustus nidus .rowintra in .modal-bodyac deinde systematis classes normales utere.

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

Varius contentus modalis secundum felis felis

Habent fasciculum globuli omnes idem felis modales, modo cum contentis leviter diversis? Usus event.relatedTargetet HTML data-*attributa (forte per jQuery ) variare contenta modalis pendentibus quibus pyga premebatur. Modal Events docs for details on 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)
})

Consuetudinem

Plugin modalis toggles tuas absconditas in demanda, per data attributa vel JavaScript. Etiam addit .modal-openad <body>mores scrolling delendi et generat .modal-backdropad providendum strepitam aream ad dimittendum modales ostensos cum extra modales strepitando.

Via data attributa

Modalis eu sine scripto JavaScript. Pone data-toggle="modal"in elementum moderatoris, ut puga pyga, una cum a data-target="#foo"vel href="#foo"ut scopum modalem specificum toggle.

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

Via JavaScript

Id cum modali voca myModaluna linea JavaScript:

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

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-, ut in data-backdrop="".

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

Methodi

.modal(options)

Exagitat tuam contentus modalem. Acceptat optiones libitum object.

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

.modal('toggle')

Manually toggles modalis. Redit ad RECENS antequam modalis actu ostensum est vel absconditum (id est ante shown.bs.modalvel hidden.bs.modaleventum).

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

.modal('show')

Manually modal opens. RECENS REcurrit antequam modalis actu ostensum est (id antequam shown.bs.modalevenit).

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

.modal('hide')

Manually celat modalis. Redit ad RECENS antequam modalis actu absconditus est (id antequam hidden.bs.modalevenit).

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

.modal('handleUpdate')

Legit condicionem modalis contra scrollbarum si quis appareat, qui saltum modalem ad sinistram faceret.

Tantum opus est cum altitudo modalis mutationes dum aperta est.

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

Events

Classis modalis Bootstrap paucas eventus exponit pro hamo in functionem modalem.

Omnes eventus modales accenduntur ad ipsum modalem (id est ad <div class="modal">).

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

Dropdowns dropdown.js

Exempla

Menum stillicidium addere ad aliquid fere cum hoc plugin simplici, incluso navbar, tabs, pills.

Intra navbar

In pilulas

Consuetudinem

Via data attributa vel JavaScript, gutta plugin toggles abscondita (dropdown menus) per toggling .opengenus in indice item parente.

In mobilibus machinis, aperiens guttam addit .dropdown-backdropquasi aream sonum ad claudendum menus destillationis cum extra tabulam percutiens, postulationem ad propriam iOS sustentationem. Hoc significat quod commutatio ex tabula aperta in menu dropdown ad diversum tabulatum dropdown requirit extra sonum in mobili.

Nota: data-toggle="dropdown"attributum est menus occludendi stillicidium in applicationis gradu, sic utilem uti semper est.

Via data attributa

Adde data-toggle="dropdown"nexum vel felis toggle a 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>

URLs integrum servare cum globulis nexus, data-targetloco utere attributo 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

Vocate dropdowns per JavaScript:

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

Optiones

Nullus

Methodi

$().dropdown('toggle')

Toggles menu destillatio navigationis datae navbaris vel tabbed.

Events

Omnes guttae eventus ad .dropdown-menuparentis elementum accensi sunt.

Omnes guttae eventus relatedTargetproprietatem habent, cuius valor est ancora toggling elementum.

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

ScrollSpy scrollspy.js

Exemplum in navbar

Plugin ScrollSpy est pro automatice adaequationis scuta nav e secundum librum positionis. Librum aream sub navbare et mutationem classis activae observa. The dropdown sub items will be highlighted as well.

Consuetudinem

Requirit positioning

Nulla materia exsecutionis modum, scrollspy usum requirit position: relative;elementi quam exploras. In pluribus hoc est <body>. Cum in aliis elementis quam in scrollspying , exaratum et appositum <body>esse scito .heightoverflow-y: scroll;

Via data attributa

Ut facile cartis mores ad navigationem topbaris tuam addas data-spy="scroll", elementum quod vis explorare (plerumque hoc futurum est <body>) adde elementum. Adde data-targetattributum cum ID vel genere elementi parentis alicuius .navcomponentis 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

His additis position: relative;in CSS, vocate scrollspy per JavaScript:

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

Methodi

.scrollspy('refresh')

Cum usu cartis in conjunctione cum addendo vel removendo elementorum e domno, methodum reficiendi similem vocare debes:

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

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-, ut in data-offset="".

Events

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

Togglable tabs tab.js

Exemplum tabs

Adde celeriter, dynamicam tab functionalitatem ad transitionem per panes contentorum localium, etiam per menus dropdown. Tabs nested non praesto est.

Consuetudinem

Admitte tabbable tabs per JavaScript (singulis tab indiget ut singillatim reducitur);

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

Singula tab in pluribus modis movere potes:

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

Potes navigationem tab vel diripio movere sine scripto quodlibet JavaScript simpliciter specificans data-toggle="tab"aut data-toggle="pill"elementum. Addens navet nav-tabsclasses ad tab ulapplicabit styling tab Bootstrap , cum additamentis navet nav-pillsgeneribus pillulationem adhibebit .

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

Pade effectus

Ut tabescas in tabes, addas .fadesingulis .tab-pane. Prima tab pane debet etiam .infacere ut initialis visibiles.

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

Methodi

$().tab

Tab elementum activum ac contentum continens. Tab habere debet vel a data-targetvel hrefnisl continens nodi in dom. In exemplis supra, tabs sunt <a>s cum data-toggle="tab"attributis.

.tab('show')

Tab datam eligit et ostendit eius adiuncti contentum. Quaelibet alia tab, quae antea selecta erat, exsculpta fit et eius adiunctis contentus latet. RECENS prius redit in pane tab indicatus est (id ante shown.bs.tabeventum occurrit).

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

Events

Cum ostendens novam tab, eventus ignis hoc ordine;

1. hide.bs.tab(In current activae tab)
2. show.bs.tab(Per tab-esse ostensum est)
3. hidden.bs.tab(In tab priorem activam, idem est ut hide.bs.tabres)
4. shown.bs.tab(in recenter-activo modo-ostenso tab, idem ac pro show.bs.tabeventu)

Si nulla tab iam activa erat, tunc hide.bs.tabeventus hidden.bs.tabnon accendetur.

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

Tooltips tooltip.js

Animatus ab optimo jQuery.tipsy plugin scripsit Jason Frame; Instrumenta versionis renovationis sunt, quae imaginibus non innituntur, CSS3 animationibus utere, et attributa data pro repositionis titulo locali.

Instrumenta cum titulis zerum-longitudo numquam ostentantur.

Exempla

Volitant super nexus infra videre tooltips:

Static tooltip

Quattuor optiones praesto sunt: ​​summum, dextrum, fundum, ac sinistrum varius.

Quattuor directiones

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

Consuetudinem

Instrumentum plugin contentum et signum in demanda generat, et per default loca instrumenta post elementum felis suum.

Tooltip Trigger per JavaScript:

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

Markup

Signum requisitum pro instrumenti instrumenti dataattributum est tantum et titlein elementum HTML quod tooltip habere vis. Nota notae generatae instrumenti instrumenti magis simplex est, quamquam positione requirit (per default ad topplugin positam).

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

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-, ut in data-animation="".

Methodi

$().tooltip(options)

Applicat tooltip tracto ad collectionem elementi.

.tooltip('show')

Elementum demonstrat tooltip. RECENS prius redit ad instrumentum demonstratum (id est antequam shown.bs.tooltipevenit). Consideratur hoc "manual" excitato instrumenti instrumenti. Instrumenta cum titulis zerum-longitudo numquam ostentantur.

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

.tooltip('hide')

Instrumentum elementum celat. Redit ad RECENS antequam tooltip re vera absconditum (id est antequam hidden.bs.tooltipevenit). Consideratur hoc "manual" excitato instrumenti instrumenti.

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

.tooltip('toggle')

Toggles tooltip elementum est. RECENS redit ad instrumentum ante demonstratum vel absconditum (id est ante shown.bs.tooltipvel hidden.bs.tooltipeventum). Consideratur hoc "manual" excitato instrumenti instrumenti.

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

.tooltip('destroy')

Celat et destruit tooltip elementum. Instrumenta delegationis quae utuntur (quae optione utente creantur ) selectorsingulariter destrui non possunt in elementis felis descendentibus.

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

Events

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

Popover.js _

Addere parvas obduces contentorum, sicut sunt in iPad, cuivis elementi ad informationes secundas habitandas.

Popoveri quorum tam titulus quam res nulla sunt, nulla longitudo numquam ostenditur.

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

Exempla

Static popover

Quattuor optiones praesto sunt: ​​summum, dextrum, fundum, ac sinistrum varius.

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

Quattuor directiones

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

Dimitte in proximo click

Felis utere focusut popovers mittat in proximam cliccum quod usor facit.

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

Consuetudinem

Admitte popovers per JavaScript:

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

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-, ut in data-animation="".

Methodi

$().popover(options)

Initializes popovers collectione pro elemento.

.popover('show')

Elementum aperit popover. RECENS REVERIT ante popover ostensum est (id antequam shown.bs.popoverevenit). Hoc "manuale" excitatum popover consideratur. Popoveri quorum tam titulus quam res nulla sunt, nulla longitudo numquam ostenditur.

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

.popover('hide')

Cras elementum popover. Redit ad salutatorem ante popover occultatum (id ante hidden.bs.popovereventum). Hoc "manuale" excitatum popover consideratur.

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

.popover('toggle')

Toggles popover elementum est. RECENS REcurrit antequam popover re vera aut occulta (id est ante eventum shown.bs.popovervel hidden.bs.popoverevenit). Hoc "manuale" excitatum popover consideratur.

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

.popover('destroy')

Coria et popover elementum destruit. Popoveri qui delegatione utuntur ( quae selectoroptione utente creantur ) singulariter destrui non possunt in elementis felis descendentibus.

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

Events

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

nuntii erecti alert.js

Exemplum summis

Dimitte functionem ad omnes epistulas vigilantes cum hoc plugin adde.

Cum bullam usa .close, necesse est esse primam puerilem .alert-dismissibleet nullum textum contentum antequam in signum venire possit.

Consuetudinem

Modo adde data-dismiss="alert"ad conjunctionem proximam tuam ut automatice ad munus propinquum propensum praebeas. Claudendo erigit a dom.

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

In summis animationibus uti cum clausula habere, fac iam ad eas applicatas .fadeet classes habere..in

Methodi

$().alert()

Intenti audientiam facit per click eventus de elementis descendentibus quae data-dismiss="alert"attributum habent. (Non necesse est cum usura notitia-api scriptoris auto- initializationis).

$().alert('close')

Claudit erectum a dom. Si classes .fadeet partes .ininsunt, intenti deficiant antequam removeatur.

Events

Bootstrap plugin vigilans paucas eventus exponit pro hamo in ad functionem intenti.

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

Bullae button.js

Plus globulis. Button imperium civitatibus vel coetus globulis crea in pluribus componentibus sicut instrumentorum communicationis.

Stateful

Adde data-loading-text="Loading..."ut statum oneratum in puga pyga.

Deprecatur haec factura ab v3.3.5 et remotus est in 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>

una toggle

Adde data-toggle="button"movere toggling in unum deprimendo.

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

Checkbox / Radio

Adde data-toggle="buttons"continens .btn-groupcheckbox vel inputationes radiophonicae ut in suo quisque stylo toggling possint.

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

Methodi

$().button('toggle')

Toggles re publica dis. Dat speciem globuli quam in actum reducitur.

$().button('reset')

Resets bullarum publica - swaps textum ad textum originalem. Haec methodus asynchrona est et redit antequam repositionis effecta est.

$().button(string)

Swaps text to any data definitive text state.

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

collapse.js _

Pluginum flexibile quod paucis classes utetur ad mores faciles toggle.

Exemplum

Preme tesserae infra monstrant et celant aliud elementum per mutationes ordinis:

• .collapsecelat content
• .collapsingapplicatur in transitus
• .collapse.inostendit content

Vinculum uti potes cum hrefattributo, vel globo cum data-targetattributo. Utroque, opus data-toggle="collapse"est.

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

Accordion example

Mores ruinae default extendere ad compositionem cum tabulis componentibus creandi.

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

Etiam .panel-bodys cum .list-groups permutare potest.

Consuetudinem

In ruina plugin paucae classes adhibet ad tractandum elevatio gravis;

• .collapsecelat contentus
• .collapse.inostendit contentus
• .collapsingadditur quando transitus incipit, et quando finitur removetur

Hae classes reperiuntur in component-animations.less.

Via data attributa

Adde data-toggle="collapse"modo et data-targetelemento ut automatice imperium elementum collapsibilis assignet. Attributum data-targetCSS electrix acceptat ut ruinam adhiberet. Adde genus collapseelementi collapsibili. Si vis aperta defaltam facere, additamentum classis adde in.

Accordion-similes coetus administrationem addere ad imperium collapsibile, data attributum addere data-parent="#selector". Hoc in actione refer ad demo.

Via JavaScript

Admitte cum manually:

$('.collapse').collapse()

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-, ut in data-parent="".

Methodi

.collapse(options)

Contentum actuat tuum ut collapsibile elementum. Acceptat optiones libitum object.

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

.collapse('toggle')

Toggles collapsibile elementum est ut vel absconditum ostendatur. RECENS, antequam elementum collapsibile redit, actu ostensum est vel absconditum (id est ante eventum shown.bs.collapsevel hidden.bs.collapseeventum).

.collapse('show')

Elementum collapsibile ostendit. RECENS redit ad elementum collapsibile antequam actu ostensum est (id est antequam shown.bs.collapseevenit).

.collapse('hide')

Cras lacinia elementum consequat. Recurrit ad RECENS antequam elementum collapsibile actu absconditum (id est antequam hidden.bs.collapseevenit).

Events

Classis ruina Bootstrap paucas eventus exponit pro hamo in ruina functionis.

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

Carousel carousel.js

A slideshow component for cycling through element, like a carousel. Nidos carousels non praebetur.

Exempla

Antecedens deinde

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

Captiones ad tuas facile labitur cum .carousel-captionelemento in aliquo .item. Pone solum de quolibet HTML in ibi libitum et sponte varius et formatus erit.

Primum slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Secundus slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tertius slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur ut.

Antecedens deinde

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

Consuetudinem

Multiplex carousels

Carousels usum idvasis extimi (sic .carousel) requirunt pro carousel controls ad recte operandum. Cum multiplices carousels additis vel carouselis mutatis id, scito ad moderamina pertinentes renovare.

Via data attributa

Usus notitia attribuit facilem positionem carousel moderari. keywords vel data-slideacceptat , quae situm lapsus mutat respectu eius positionis currentis. Vel , utere ut index lapsus crudum ad carousel transire , quod positio lapsus transfert ad indicem particularem incipientem .prevnextdata-slide-todata-slide-to="2"0

Proprium data-ride="carousel"carousel notare adhibetur ut in onere paginae incipiens animans. In compositione cum (superfluis et superfluis) adhiberi non potest expressa JavaScript initialization eiusdem carousel.

Via JavaScript

Manually vocate carousel est:

$('.carousel').carousel()

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-, ut in data-interval="".

Methodi

.carousel(options)

Initiat carousel cum optiones ad libitum objectet incipit cyclum per item.

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

.carousel('cycle')

Cycles per carousel res a sinistra in dextram.

.carousel('pause')

Sistit a revolutio per items carousel.

.carousel(number)

Cycles carousel ad figmentum particulare (0 fundatum, similis ordinationi).

.carousel('prev')

Cycli ad priorem item.

.carousel('next')

Cycli ad proximum item.

Events

Classis carousel Bootstrap duos eventus exponit pro hamo in carousel functionality.

Utraque certe proprietates sequentes adiectis habent;

• directionDirectio in qua carousel est inclinatus (vel "left"vel "right").
• relatedTarget: dom elementum quod est lapsus in locum activum item.

Omnes eventus carousel accenduntur ad ipsum carousel (i. e. ad <div class="carousel">).

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

affigere affix.js

Exemplum

Plugin toggles interdum position: fixed;affixa, effectum imitantes cum inveni position: sticky;. Subnavigatio dextra est demo viva plugin affixae.

Consuetudinem

Plugini affixa per data attributa vel manually utere cum JavaScript propriis. In utroque casu providere debetis CSS pro positione et latitudine contentorum appositorum.

Nota: Noli uti plugin affixo in elemento relativo elemento posito contento, ut columna detracta vel eiecta, ob cimex Safari reddens .

Positio per CSS

Plugini toggles affixae inter tres classes, singulae peculiarem statum exhibentes: .affix, .affix-top, et .affix-bottom. Stylos debes praebere, excepto position: fixed;on .affix, ad has classes te (independens ab hoc plugin) positiones ipsas tractandas.

Ecce quomodo sigilla plugin opera:

1. Incipere, plugin addit .affix-toput indicare elementum in summo situ suo est. Hic locus CSS positus non requiritur.
2. Scrolling praeteritum elementum quod vis appensum felis ipsam affixionem debent. Hoc est ubi .affixreponit .affix-topet ponit position: fixed;(provided by Bootstrap's CSS).
3. Si ima cinguli definitur, scrolling praeteritum debet reponere .affixcum .affix-bottom. Cum exsertiones libitum sint, unum te requirit, ut opportunitatem CSS constituas. In hoc casu adde position: absolute;cum necesse est. Plugin utitur data attributo vel JavaScript optione ad determinandum ubi ponat elementum inde.

Gradus superiores sequere ut CSS pone tibi pro alterutro optionum usuum infra.

Via data attributa

Ut facile mores cuivis elementi affixas adiungas, adde data-spy="affix"elementum quod vis explorare. Exsertiones utere ad definiendum cum ad fibulationem elementi toggleas.

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

Via JavaScript

Appellare affixa plugin via JavaScript:

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

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-, ut in data-offset-top="200".

Methodi

.affix(options)

Contentum operatur sicut appositum contentus. Acceptat optiones libitum object.

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

.affix('checkPosition')

Statum affixionis recapitulat ex dimensionibus, positione et libro positionis elementorum pertinentium. The .affix,, .affix-topand .affix-bottomclasses adduntur vel removentur ab appositis secundum novum statum. Haec methodus vocandus est, quoties dimensiones contentorum usorum vel scopo elementorum mutantur, ut rectae positio contenti appositi curet.

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

Events

Bootstrap affixa plugin paucas eventus exponit pro hamo in affixionem functionis.