A tlangpuiin

Mimal emaw, khawlkhawm emaw a ni thei

Plugins chu pakhat zel (Bootstrap-a *.jsfile pakhat zel hmangin), a nih loh leh vawi khatah (using bootstrap.jsor the minified bootstrap.min.js) dah vek theih a ni.

Data attribute te hi a ni

Bootstrap plugin zawng zawng hi JavaScript line khat pawh ziak lovin markup API hmang chauhvin i hmang thei ang. Hei hi Bootstrap-a first-class API a ni a, plugin i hman hunah i ngaihtuah hmasak ber tur a ni.

Chutiang a nih lai chuan, dinhmun thenkhatah chuan he functionality hi off hi duhthusam a ni thei. Chuvangin, document namespaced-a thil thleng zawng zawng unbind-a data attribute API tihtawp theihna pawh kan pe bawk data-api. Hei hi hetiang hian a lang:

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

A dang pawhin, plugin bik target tur chuan plugin hming chu namespace atan data-api namespace nen hetiang hian dah mai rawh:

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

Programmatic API hmanga siam a ni

Tin, Bootstrap plugin zawng zawng hi JavaScript API hmang chauhvin i hmang thei tur a ni tih kan ring bawk. Public API zawng zawng hi single, chainable method a ni a, collection acted on chu a rawn pe kir vek a ni.

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

Method zawng zawng hian optional options object, method bik target tu string emaw, engmah (default behavior hmanga plugin initiate tu) emaw an pawm tur a ni:

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

Plugin tin hian an raw constructor chu Constructorproperty pakhatah an expose bawk: $.fn.popover.Constructor. Plugin instance bik i hmuh duh chuan element atanga direct-in la chhuak rawh: $('[rel="popover"]').data('popover').

Settings hmasa ber a ni

Plugin pakhat tana default settings chu plugin Constructor.DEFAULTSobject chu siam danglamin i thlak thei ang:

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

Inhnialna a awm lo

A chang chuan Bootstrap plugins te hi UI framework dang nen hman a ngai thin. Hetiang dinhmunah hian namespace collision a awm fo thin. Chutiang a nih chuan i .noConflictvalue revert duh plugin chu i call thei ang.

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

Thil thlengte

Bootstrap hian plugin tam zawkte thiltih danglam bik atan custom event a pe a. A tlangpuiin, hengte hi infinitive leh past participle form-ah an lo kal a - chutah chuan showthilthleng pakhat tan tirh lamah infinitive (ex. ) chu a insiam a, a past participle form (ex. shown) chu thiltih zawh hunah a insiam a ni.

3.0.0 atang khan Bootstrap event zawng zawng hi namespaced vek a ni.

Infinitive event zawng zawng hian preventDefaultfunctionality an pe vek a. Hei hian action pakhat execution chu a tan hmaa tihtawp theihna a pe a ni.

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

Version number te pawh a awm

Bootstrap-a jQuery plugin pakhat zel version chu VERSIONplugin constructor property hmangin a lut thei a ni. Entirnan, tooltip plugin atan chuan:

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

JavaScript tihtawp a nih chuan special fallback a awm lo

Bootstrap-a plugins te hi JavaScript tihtawp a nih chuan a bik takin grace takin an tla leh lo. Hetiang a nih avang hian user experience i ngaih pawimawh a nih chuan, i user-te <noscript>hnena thil awmdan (leh JavaScript re-enable dan tur) hrilhfiah nan hmang la, leh/ emaw, nangmah ngeiin i custom fallback te pawh add rawh.

Transition te chu transition.js a ni

Transition chungchang

Transition effect awlsam tak tak atan chuan transition.jsJS file dangte bulah vawi khat dah tel bawk ang che. Compiled (or minified) i hmang a nih chuan bootstrap.jshei hi dah tel a ngai lo—a awm tawh.

A chhunga awm chu

Transition.js hi event hrang hrang atana puitu bulpui ber a transitionEndnih bakah CSS transition emulator a ni bawk. Plugin dangte chuan CSS transition support a awm leh awm loh enfiah nan leh hanging transition man nan an hmang thin.

Transition te tihtawp

A hnuaia JavaScript snippet hmang hian transition te chu globally disable theih a ni a, chu chu transition.js(or bootstrap.jsor bootstrap.min.js, a nih dan azirin) load hnuah a lo thleng tur a ni:

$.support.transition = false

Modal te chu modal.js a ni

Modal te hi streamlined, mahse flexible, dialog prompts a awm a, functionality mamawh tlem ber leh smart defaults te a awm bawk.

HTML5 hian a semantics a sawifiah dan avang hian autofocusHTML attribute hian Bootstrap modal-ah nghawng a nei lo. Chutiang bawka effect nei tur chuan custom JavaScript thenkhat hmang la:

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

Entirna te

Static entirnan

Footer-a header, body leh action set awmna rendered modal.

<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 a ni ang

JavaScript hmangin modal pakhat toggle la, a hnuaia button hi click la. A hnuai lam a pan ang a, page chunglam atang chuan a fade in ang.

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

A duh duh size te pawh a awm bawk

Modal hian optional size pahnih a nei a, modifier class kaltlangin 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>

Animation chu paih chhuak rawh

En tur fade in ai chuan modal lang mai mai tur tan chuan .fadei modal markup atang khan class chu paih chhuak rawh.

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

Grid system hmangin

Modal chhunga Bootstrap grid system hman tangkai tur chuan .rows chhungah nest mai .modal-bodyla, chutah chuan normal grid system class te hmang rawh.

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

Trigger button hmanga modal content danglam thei

Modal inang vek trigger vek, content hrang hrang tlemte chauh nei, button bunch khat i nei em? Use event.relatedTargetleh HTML data-*attributes ( jQuery kaltlangin pawh ni thei ) hmangin modal chhunga thu awmte chu eng button nge click tih a zirin a danglam thei. relatedTarget, chungchang chipchiar zawka hriat duh chuan Modal Events docs en rawh.

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

Hman dan tur

Modal plugin hian i thup thup chu a mamawh angin a toggle a, data attribute emaw JavaScript hmangin a toggle thei bawk. .modal-openTin , <body>to override default scrolling behavior ah a dah belh bawk a .modal-backdrop, modal pawn lama click hunah shown modals dismiss theihna tur click area a siam bawk.

Data attribute hmangin a ni

JavaScript ziak lovin modal pakhat activate rawh. data-toggle="modal"Controller element, button ang chi, a data-target="#foo"or href="#foo"toggle tur modal bik target tur nen set rawh .

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

JavaScript hmangin

myModalJavaScript line khata id nei modal chu ko rawh :

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

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-backdrop="".

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

Thiltih dan tur

.modal(options)

I content chu modal angin a activate thin. A pawm a, optional options a awm objectbawk .

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

.modal('toggle')

Modal pakhat chu manual in a toggle thin. Modal a lan tak tak hma emaw a thup hma emaw (chu chu shown.bs.modalor hidden.bs.modalevent a thlen hma) caller hnenah a kir leh thin.

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

.modal('show')

Manual takin modal a hawng thin. Modal a lan tak takshown.bs.modal hmain (chu chu event a thlen hmain ) caller hnenah a kir leh thin.

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

.modal('hide')

Manual takin modal a thup thin. Modal a thup tak tak hmain (chu chu hidden.bs.modalevent a thlen hma) caller hnenah a kir leh thin.

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

.modal('handleUpdate')

Scrollbar pakhat a lo lang a nih chuan counter turin modal positioning a siam tha leh a, chu chuan modal chu veilamah a zuang thla ang.

Modal hawn laiin a san zawng a inthlak hunah chauh mamawh a ni.

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

Thil thlengte

Bootstrap-a modal class hian modal functionality-a hooking-na tur event tlemte a pholang a ni.

Modal event zawng zawng hi modal ngeiah (ie at the <div class="modal">).

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

Dropdown te chu dropdown.js ah a awm

Entirna te

He plugin awlsam tak hmang hian engkim deuhthaw-ah dropdown menu dah belh la, navbar, tabs, leh pills te pawh a tel.

Navbar pakhat chhungah

Pills chhungah

Hman dan tur

.openData attribute emaw JavaScript hmangin dropdown plugin hian parent list item-a class toggle-in thup (dropdown menu) a toggle a ni.

Mobile device-ah chuan dropdown hawn hian .dropdown-backdropmenu pawn lama tap i tih hunah dropdown menu khar theihna tur tap area angin a dah belh a, hei hi iOS support dik tak neih a ngai a ni. Hei hian a awmzia chu open dropdown menu atanga dropdown menu dang a switch tur chuan mobile ah extra tap a ngai tihna a ni.

Note: data-toggle="dropdown"Attribute hi application level-a dropdown menu khar nan rintlak a nih avangin hman reng a tha.

Data attribute hmangin a ni

data-toggle="dropdown"Link emaw button emaw ah dah la , dropdown toggle rawh.

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

Link button hmanga URL awm reng tur chuan , data-targettih ai chuan attribute hmang zawk href="#"ang che.

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

JavaScript hmangin

JavaScript hmangin dropdown te chu call la:

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

Thil thlan theih a ni

Pakhatmah

Thiltih dan tur

$().dropdown('toggle')

Navbar emaw tabbed navigation pek tawh dropdown menu chu a toggle thin.

Thil thlengte

Dropdown event zawng zawng chu .dropdown-menu's parent element ah fire vek a ni.

Dropdown event zawng zawng hian relatedTargetproperty an nei vek a, a value chu toggling anchor element a ni.

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

ScrollSpy ah hian a awm a

Entirnan navbar ah

ScrollSpy plugin hi scroll position a zirin nav target te automatic a update theihna tur a ni. Navbar hnuaia area chu scroll la, active class inthlak dan chu en rawh. Dropdown sub items te pawh a rawn lang ang.

Hman dan tur

Relative positioning a ngai a ni

Implementation method eng pawh ni se, scrollspy hian position: relative;i spying element-ah hman a ngai a ni. A tam zawkah chuan hei hi a <body>ni . , tih loh element dang scrollspying i tih hian set nei la, apply <body>ngei ngei tur a ni.heightoverflow-y: scroll;

Data attribute hmangin a ni

I topbar navigation-a awlsam taka scrollspy behavior dah belh data-spy="scroll"tur chuan, i spy duh element-ah dah la (most typically this would be the <body>). Tichuan Bootstrap component data-targeteng pawha parent element ID emaw class emaw nen attribute chu add ang che..nav

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>

JavaScript hmangin

I CSS i dah hnuah position: relative;JavaScript hmangin scrollspy chu ko rawh:

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

Thiltih dan tur

.scrollspy('refresh')

DOM atanga elements dah belh emaw paih emaw nena inzawma scrollspy hman hian refresh method chu hetiang hian i ko a ngai ang:

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

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-offset="".

Thil thlengte

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

Tabs thlak theih tab.js

Entirna tabs te

Local content pane hmanga transition-ah tab functionality rang tak, chak tak dah belh la, dropdown menu hmang pawhin. Nested tab te hi a support lo.

Hman dan tur

JavaScript hmangin tabbable tab te chu enable rawh (tab tin hi a hranin activate a ngai a ni):

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

Tab hrang hrangte chu kawng hrang hrangin i activate thei ang:

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

JavaScript engmah ziak lovin tab emaw pill navigation emaw chu element pakhat specify data-toggle="tab"emaw on emaw mai mai hmangin i activate thei a ni. Tab ah and class te data-toggle="pill"add chuan Bootstrap tab styling a apply ang a , and class te add chuan pill styling a apply bawk ang .navnav-tabsulnavnav-pills

<div>

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

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

</div>

Fade effect a awm bawk

Tabs fade in siam tur chuan, pakhat zel ah add .faderawh .tab-pane. Tab pane hmasa ber pawhin .ina bul tanna thu awm chu hmuh theih turin a siam a ngai bawk.

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

Thiltih dan tur

$().tab

Tab element leh content container pakhat a activate thin. Tab hian DOM ah container node targeting a data-targetemaw a nei tur a ni. hrefA chunga entirnan kan tarlan te hi tab te hi attribute <a>nei s te an ni.data-toggle="tab"

.tab('show')

Tab pek chu thlang la, a kaihhnawih thu awmte chu a rawn tarlang ang. A hmaa tab dang thlan tawh zawng zawng chu thlan loh a ni a, a kaihhnawih thu awmte chu a thup vek a ni. Tab pane a lan tak takshown.bs.tab hmain (chu chu event a thlen hmain ) caller hnenah a kir leh thin.

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

Thil thlengte

Tab thar kan lantir hian events te chu a hnuaia mi ang hian a rawn fire thin:

1. hide.bs.tab(tuna active tab-ah hian)
2. show.bs.tab(to-be-shown tab-ah chuan)
3. hidden.bs.tab(active tab hmasaah khan hide.bs.tabevent atana hman ang chiah kha)
4. shown.bs.tab(active thar-a just-shown tab-ah chuan, show.bs.tabevent atana hman ang chiah kha)

Tab active tawh loh chuan hide.bs.taband hidden.bs.tabevents chu a fire dawn lo.

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

Hmanraw hman dan tur tooltip.js

Jason Frame ziah jQuery.tipsy plugin tha tak atanga infuih thar; Tooltips hi updated version a ni a, image-ah a innghat lo va, animation atan CSS3 a hmang a, local title storage atan data-attribute a hmang bawk.

Zero-length title nei tooltip te hi a lang ngai lo.

Entirna te

A hnuaia link te hi hover la, tooltips i hmu ang:

Static hmanrua tip

Option pali a awm a, chunglam, dinglam, hnuai lam, leh veilam aligned te an ni.

Kawng pali

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

Hman dan tur

Tooltip plugin hian content leh markup on demand a siam a, default-in tooltip te chu an trigger element hnuaiah a dah thin.

JavaScript hmangin tooltip chu trigger la:

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

Markup a ni

Tooltip atana markup mamawh chu dataattribute chauh a ni a title, HTML element-ah chuan tooltip neih i duh a ni. Tooltip pakhata markup siam chu a awlsam deuh a, mahse position (by default-ah topchuan plugin-in a set) a ngai a ni.

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

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-animation="".

Thiltih dan tur

$().tooltip(options)

Element collection pakhatah tooltip handler a attache thin.

.tooltip('show')

Element pakhat tooltip a pholang. Tooltip a lan tak tak hmain (chu chu shown.bs.tooltipevent a thlen hmain) caller hnenah a kir leh thin. Hei hi tooltip "manual" triggering anga ngaih a ni. Zero-length title nei tootip te hi a lang ngai lo.

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

.tooltip('hide')

Element pakhat tooltip a thup thin. Tooltip a thup tak tak hmain (chu chu hidden.bs.tooltipevent a thlen hmain) caller hnenah a kir leh thin. Hei hi tooltip "manual" triggering anga ngaih a ni.

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

.tooltip('toggle')

Element pakhat tooltip a toggle thin. Tooltip a lan tak tak emaw a thup hma emaw (chu chu shown.bs.tooltipor hidden.bs.tooltipevent a thlen hma) caller hnenah a kir leh thin. Hei hi tooltip "manual" triggering anga ngaih a ni.

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

.tooltip('destroy')

Element pakhat tooltip a thup a, a tichhia bawk. Delegation hmanga siam Tooltips ( option hmanga siamselector ) te chu descendant trigger elements ah pakhat zel tihchhiat theih a ni lo.

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

Thil thlengte

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

Popovers chu popover.js a ni

Secondary information dahna tur element eng pawhah iPad-a awm ang chi content overlay te te te dah belh rawh.

Popovers title leh content pahnih zero-length a nih chuan a lang ngai lo.

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

Entirna te

Static popover a ni

Option pali a awm a, chunglam, dinglam, hnuai lam, leh veilam aligned te an ni.

Live demo a ni ang

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

Kawng pali

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

A hnuaia click leh hunah dismiss rawh

focusUser-in a click leh hunah popovers chu dismiss turin trigger hmang rawh .

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

Hman dan tur

JavaScript hmangin popovers te chu enable rawh:

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

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-animation="".

Thiltih dan tur

$().popover(options)

Element collection pakhat atan popovers a initialize thin.

.popover('show')

Element pakhat popover a nihzia a pholang. Popover a lan tak tak hmain (chu chu shown.bs.popoverevent a thlen hmain) caller hnenah a kir leh thin. Hei hi popover triggering "manual" anga ngaih a ni. Popovers title leh content pahnih zero-length a nih chuan a lang ngai lo.

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

.popover('hide')

Element pakhat popover a thup. Popover chu thup tak tak a nih hmain (chu chu hidden.bs.popoverthilthleng a thlen hma) call tu hnenah a kir leh thin. Hei hi popover triggering "manual" anga ngaih a ni.

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

.popover('toggle')

Element pakhat popover a toggle thin. Popover a lan tak tak emaw a thup hma emaw (chu chu shown.bs.popoveror hidden.bs.popoverevent a thlen hma) caller hnenah a kir leh thin. Hei hi popover triggering "manual" anga ngaih a ni.

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

.popover('destroy')

Element pakhat popover chu a thup a, a tichhe vek bawk. Delegation hmanga siam Popovers ( option hmanga siamselector ) te chu descendant trigger element-ah pakhat zel tihchhiat theih a ni lo.

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

Thil thlengte

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

Alert thuchah alert.js

Entirna alerts te

He plugin hmang hian alert message zawng zawngah dismiss functionality add vek ang che.

Button hman hunah chuan a .closefa hmasa ber a ni tur a ni a .alert-dismissible, markup-ah chuan a hmaah text content a awm thei lo vang.

Hman dan tur

I close button ah khan add mai la data-dismiss="alert", automatic in alert close functionality a pe ang. Alert khar hian DOM atangin a paih chhuak thin.

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

I alerts te kha khar hunah animation hmang turin, an chungah .fadeleh .inclass te chu an apply tawh tih chian hmasa phawt ang che.

Thiltih dan tur

$().alert()

data-dismiss="alert"Attribute nei descendant element-a click event awmte chu alert ngaithla turin a siam . (Data-api-a auto-initialization hman hunah a ngai lo.)

$().alert('close')

DOM atanga alert lakchhuah hmangin a khar thin. Element -ah hian .fadeand .inclass a awm chuan alert chu a paih hmain a fade out ang.

Thil thlengte

Bootstrap-a alert plugin hian alert functionality-a hook theihna tur thil thleng tlemte a pholang a ni.

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

Buttons te chu a rawn lang a.js

Button hmangin tam zawk ti rawh. Control button state emaw toolbar ang chi component tam zawk tan button group siam emaw a ni.

Stateful tak a ni

data-loading-text="Loading..."Button pakhata loading state hman tur chuan add rawh .

He feature hi v3.3.5 atang khan hman tawh loh a ni a, v4 ah pawh tihbo a ni tawh bawk.

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

Toggle pakhat chauh a awm

data-toggle="button"Button pakhata toggling activate turin Add rawh .

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

Checkbox / Radio tih a ni

Containing checkbox emaw radio inputs ah te dah la data-toggle="buttons", .btn-groupanmahni style hrang hranga toggling theihna tur.

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

Thiltih dan tur

$().button('toggle')

Push state a tidanglam. Button chu a activate tawh angin a lang.

$().button('reset')

Button state a reset - text chu original text ah a inthlak thin. He method hi asynchronous a ni a, resetting a zawh tak tak hmain a rawn kir leh thin.

$().button(string)

Data defined text state eng pawhah text a swap thin.

<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 tih hi a ni.js

Flexible plugin hmangin class tlemte hmangin toggle behavior awlsam tak a awm thei.

Entirna

A hnuaia button te hi click la, class thlak danglam hmangin element dang a lantir leh thup ang:

• .collapsecontent a thup thin
• .collapsingtransition neih laiin hman a ni
• .collapse.inthupui a lantir

Attribute awmna link i hmang thei a href, attribute awmna button i hmang thei data-targetbawk. Heng pahnihah hian the data-toggle="collapse"is required.

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

Panel component nen accordion siam turin default collapse behavior chu extend rawh.

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

.panel-bodyTin , s leh s swap out theih a .list-groupni bawk.

Hman dan tur

Collapse plugin hian heavy lifting handle turin class tlemte a hmang a:

• .collapsea thupui chu a thup thin
• .collapse.ina thupui chu a entir a
• .collapsingtransition a tan hunah a dah belh a, a zawh chuan a paih leh bawk

Heng class te hi component-animations.less.

Data attribute hmangin a ni

Element ah add data-toggle="collapse"leh a data-targettih mai la, collapsible element control chu automatic in a assign ang. Attribute hian data-targetcollapse apply tur CSS selector a pawm a. collapseCollapsible element ah hian class chu add ngei ngei tur a ni. Default open i duh chuan additional class kha add la in.

Collapsible control-a accordion ang chi group management dah belh tur chuan data attribute data-parent="#selector". Hei hi action-a hmuh theih nan demo en rawh.

JavaScript hmangin

Manual hmangin enable theih a ni:

$('.collapse').collapse()

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-parent="".

Thiltih dan tur

.collapse(options)

I content chu collapsible element angin a activate thin. A pawm a, optional options a awm objectbawk .

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

.collapse('toggle')

Collapsible element chu show emaw hidden emaw ah a toggle thin. Collapsible element chu a takin a lan hma emaw a thup hmain (chu chu shown.bs.collapseor hidden.bs.collapseevent a thlen hmain) caller hnenah a kir leh thin.

.collapse('show')

Collapsible element a lantir. Collapsible element a lan tak tak hmain (chu chu shown.bs.collapseevent a thlen hmain) caller hnenah a kir leh thin.

.collapse('hide')

Collapsible element a thup thei. Collapsible element chu a takin a thup hmain (chu chu hidden.bs.collapseevent a thlen hmain) caller hnenah a kir leh thin.

Thil thlengte

Bootstrap-a collapse class hian collapse functionality-a hook theihna tur event tlemte a pholang a ni.

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

Carousel carousel.js a ni

Element hrang hranga cycle kal theihna tur slideshow component, carousel ang chi. Nested carousel te hi a support lo.

Entirna te

Hma chiah Dawtchiah

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

Optional caption te pawh a awm

I slide-ah awlsam takin caption dah la, .carousel-captionelement awmin any .item. Chutah chuan optional HTML eng pawh dah la, automatic in a align leh format ang.

Slide label hmasa ber

Nulla vitae elit libero, chawhmeh (pharetra augue mollis interdum) tih a ni.

Slide label pahnihna

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Slide label pathumna

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Hma chiah Dawtchiah

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

Hman dan tur

Carousel tam tak a awm

Carousel - te chu carousel control-te a thawh that theih nan idon the outermost container (the ) hman a ngai a ni. .carouselCarousel tam tak i dah belh hunah, emaw, carousel pakhat i thlak hunah emaw, a idkaihhnawih controls te chu update ngei ang che.

Data attribute hmangin a ni

Carousel awmna hmun awlsam taka control turin data attribute hmang rawh. data-slidekeywords prevor next, chu a pawm a, chu chuan slide awmna chu a awmna hmun nen khaikhin chuan a thlak danglam a ni. A dang pawhin, data-slide-toraw slide index chu carousel-ah pass turin hmang la data-slide-to="2", chu chuan slide awmna chu index bik pakhatah a sawn a, chu chu 0.

data-ride="carousel"Attribute hi page load atanga tan carousel chu animating anga mark nan hman a ni . Carousel khata (redundant leh a tul lo) explicit JavaScript initialization nen hman dun theih a ni lo.

JavaScript hmangin

Carousel chu manual-in call la, hetiang hian:

$('.carousel').carousel()

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-interval="".

Thiltih dan tur

.carousel(options)

Carousel chu optional options hmangin a initialize a, objectitem hrang hrang hmangin cycle a kal tan thin.

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

.carousel('cycle')

Carousel thilte chu veilam atanga dinglam thlengin a cycle a.

.carousel('pause')

Carousel chu thil kal tlanga cycle a kal theih loh nan a titawp.

.carousel(number)

Carousel chu frame pakhatah a cycle (0 based, array ang chi).

.carousel('prev')

Item hmasa lam chu a cycle a.

.carousel('next')

Item dang lam pan chuan a cycle a.

Thil thlengte

Bootstrap-a carousel class hian carousel functionality-a hooking-na tur event pahnih a pholang a ni.

Event pahnih hian a hnuaia additional property te hi an nei vek a ni:

• direction: Carousel a tlan chhuahna lam (either "left"or "right").
• relatedTarget: Active item anga a hmuna slid tur DOM element.

Carousel event zawng zawng hi carousel ngeiah (ie at the <div class="carousel">).

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

affix.js tih kha affix rawh

Entirna

Affix plugin position: fixed;hian on leh off a toggle a, position: sticky;. Dinglama subnavigation hi affix plugin live demo a ni.

Hman dan tur

Affix plugin hi data attribute hmangin emaw, mahni JavaScript hmangin manual-in emaw hmang ang che. Chutiang dinhmun pahnihah chuan i affixed content awmna tur leh a zau zawng tur CSS i pe tur a ni.

Note: Safari rendering bug avang hian element awmna element, pulled emaw pushed column ang chi element- ah affix plugin hi hmang suh

CSS hmanga dinhmun siam

Affix plugin hian class pathum a toggle a, pakhatin state bik a entir a: .affix, .affix-top, leh .affix-bottom. Heng class te tan hian style te chu i pe tur a ni a , position: fixed;on tih loh chu .affixnangmah ngeiin (he plugin atanga innghat lovin) position tak tak te chu i handle thei ang.

Affix plugin hnathawh dan chu hetiang hi a ni:

1. A bul tan nan chuan plugin chuan a rawn dah belh leh ang.affix-top element chu a top-most position-ah a awm tih hriattir turin a belh a. Hetih lai hian CSS positioning a ngai lo.
2. Affix duh element kal pelh chuan affixing tak tak chu a tichhuak tur a ni. Hei hi .affixreplace .affix-topleh set position: fixed;(Bootstrap’s CSS atanga pek) awmna hmun a ni.
3. Bottom offset a define a nih chuan a kal pelh chuan a thlak tur .affixa .affix-bottomni. Offsets hi optional a nih avangin pakhat setting chuan CSS dik tak set a ngai a ni. Chutiang a nih position: absolute;chuan a tul hunah add tur a ni. Plugin hian data attribute emaw JavaScript option emaw hmangin chuta tang chuan element chu khawiah nge a dah tur tih a hriat theih a ni.

A chunga kan sawi ang hian i CSS chu a hnuaia usage option pahnih atan set rawh.

Data attribute hmangin a ni

data-spy="affix"Element eng pawha awlsam taka affix behavior dah tur chuan i spy duh element ah khan add mai tur a ni. Element pakhat pinning toggle hun tur sawifiah nan offsets hmang ang che.

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

JavaScript hmangin

JavaScript hmangin affix plugin chu call rawh:

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

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-offset-top="200".

Thiltih dan tur

.affix(options)

I content chu affixed content angin a activate thin. A pawm a, optional options a awm objectbawk .

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

.affix('checkPosition')

Affix dinhmun chu a kaihhnawih element hrang hrangte dimension, position leh scroll position hmangin a chhut nawn leh thin. , .affix, .affix-topleh .affix-bottomclass te chu state thar ang zelin affixed content-ah dah emaw, paih emaw a ni. Hetiang method hi affixed content emaw target element emaw dimensions tihdanglam apiangin koh a ngai a, chu chu affixed content awmna dik tak a nih theih nan a ni.

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

Thil thlengte

Bootstrap-a affix plugin hian affix functionality-a hook theihna tur event tlemte a pholang a ni.