Overview

Olona tsirairay na natambatra

Ny plugins dia azo ampidirina tsirairay (mampiasa ny *.jsrakitra manokana an'ny Bootstrap), na indray mandeha (mampiasa bootstrap.jsna ny minified bootstrap.min.js).

Data attributes

Azonao atao ny mampiasa ny plugins Bootstrap rehetra amin'ny alàlan'ny API markup nefa tsy manoratra andalana iray amin'ny JavaScript. Ity no API kilasy voalohany an'ny Bootstrap ary tokony hoheverinao voalohany rehefa mampiasa plugin.

Izany hoe, amin'ny toe-javatra sasany dia mety ilaina ny hamono ity fampiasa ity. Noho izany, izahay koa dia manome ny fahafahana manafoana ny data attribute API amin'ny alalan'ny fanafoanana ny hetsika rehetra ao amin'ny antontan-taratasy namespaced amin'ny data-api. Toa izao ity:

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

Raha tsy izany, raha mikendry plugin manokana, ampidiro fotsiny ny anaran'ilay plugin ho toy ny namespace miaraka amin'ny namespace data-api toy izao:

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

Programmatic API

Mino koa izahay fa tokony ho afaka mampiasa ny plugins Bootstrap rehetra ianao amin'ny alàlan'ny JavaScript API. Ny API ho an'ny daholobe rehetra dia fomba tokana, azo fehezina, ary mamerina ny fanangonana natao.

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

Ny fomba rehetra dia tokony hanaiky zavatra safidy azo atao, tady izay mikendry fomba manokana, na tsy misy (izay manomboka plugin miaraka amin'ny fitondran-tena mahazatra):

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

Ny plugin tsirairay ihany koa dia mampiseho ny mpanamboatra manta ao amin'ny Constructorfananana iray: $.fn.popover.Constructor. Raha te hahazo ohatra plugin manokana ianao dia alaivo mivantana avy amin'ny singa iray: $('[rel="popover"]').data('popover').

Fikirana Default

Azonao atao ny manova ny kinova default ho an'ny plugin iray amin'ny fanovana ny Constructor.DEFAULTStanjon'ny plugin:

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

Tsy misy fifandirana

Indraindray dia ilaina ny mampiasa plugins Bootstrap miaraka amin'ny rafitra UI hafa. Amin'ireo toe-javatra ireo dia mety hitranga indraindray ny fifandonan'ny toeran'ny anarana. Raha mitranga izany dia azonao atao ny miantso .noConflictny plugin tianao hamerenana ny sandan'ny.

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

zava-mitranga

Bootstrap dia manome hetsika manokana ho an'ny ankamaroan'ny hetsika tokana ataon'ny plugins. Amin'ny ankapobeny, ireo dia avy amin'ny endrika infinitive sy past participle - izay ny infinitive (ohatra. show) dia mipoitra eo am-piandohan'ny hetsika iray, ary ny endrik'ilay matoanteny lasa (ex. shown) dia mipoitra rehefa vita ny hetsika iray.

Amin'ny 3.0.0, ny hetsika Bootstrap rehetra dia nomena anarana.

Ny hetsika infinitive rehetra dia manome preventDefaultfiasa. Izany dia manome fahafahana hampiato ny fanatanterahana hetsika iray alohan'ny hanombohany.

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

Sanitizer

Ny Tooltips sy Popovers dia mampiasa ny fanadiovan-tenantsika mba hanadiovana ireo safidy manaiky HTML.

Ny whiteListsanda default dia ireto manaraka ireto:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Raha te-hanampy soatoavina vaovao amin'ity default ity whiteListianao dia afaka manao izao manaraka izao:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Raha te hiala amin'ny sanitizer anay ianao satria aleonao mampiasa tranomboky natokana, ohatra DOMPuify , dia tokony hanao izao manaraka izao ianao:

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

Laharana dikan-teny

Ny dikan-teny tsirairay amin'ny plugins jQuery an'ny Bootstrap dia azo idirana amin'ny alàlan'ny VERSIONfananan'ny mpamorona ny plugin. Ohatra, ho an'ny plugin tooltip:

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

Tsy misy fiatoana manokana rehefa tsy mandeha ny JavaScript

Ny plugins Bootstrap dia tsy miverina amin'ny fomba tsara indrindra rehefa tsy mandeha ny JavaScript. Raha miraharaha ny traikefan'ny mpampiasa amin'ity tranga ity ianao dia ampiasao <noscript>ny manazava ny toe-javatra (sy ny fomba famelomana indray ny JavaScript) amin'ny mpampiasa anao, ary/na ampio ny fianjeranao manokana.

Transitions transition.js

Momba ny tetezamita

Ho an'ny vokatry ny tetezamita tsotra, ampidiro transition.jsindray mandeha miaraka amin'ireo rakitra JS hafa. Raha mampiasa ny compiled (na minified) bootstrap.jsianao, dia tsy ilaina ny mampiditra an'ity - efa misy izany.

Inona no ao anatiny

Transition.js dia mpanampy fototra amin'ny transitionEndhetsika ary koa emulator tetezamita CSS. Ampiasain'ny plugins hafa izy io mba hijerena ny fanohanan'ny tetezamita CSS sy hisambotra ny fifindrana mihantona.

Mamono ny tetezamita

Ny Tetezamita dia mety ho kilemaina maneran-tany amin'ny fampiasana ity snippet JavaScript manaraka ity, izay tsy maintsy ho avy aorian'ny fampidirana transition.js( bootstrap.jsna bootstrap.min.js, araka ny mety ho zava-misy):

$.support.transition = false

Modals modal.js

Ny maodely dia mirindra, saingy mora azo, ny fifanakalozan-dresaka miaraka amin'ny fampiasa kely indrindra ilaina sy ny default.

Noho ny fomba famaritan'ny HTML5 ny semantikany, ny autofocustoetra HTML dia tsy misy fiantraikany amin'ny modals Bootstrap. Mba hahazoana vokatra mitovy amin'izany, ampiasao JavaScript manokana:

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

OHATRA

Ohatra static

Mody adika miaraka amin'ny lohapejy, vatana, ary andiana hetsika ao amin'ny tongo-tongony.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Demo mivantana

Ampifamadiho ny modal amin'ny alàlan'ny JavaScript amin'ny fipihana ny bokotra etsy ambany. Hivezivezy midina izy io ary hanjavona avy any an-tampon'ny pejy.

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

Habe azo atao

Ny modely dia manana habe roa azo atao, azo alaina amin'ny alàlan'ny kilasy modifier hapetraka amin'ny .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Esory ny animation

Ho an'ny modals izay miseho fotsiny fa tsy manjavona ho jerena, esory ny .fadekilasy amin'ny marika modal anao.

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

Mampiasa ny rafitra grid

Mba hanararaotra ny rafitra grid Bootstrap ao anatin'ny modal iray, dia asio akany .rowao anaty .modal-bodyary ampiasao ny kilasin'ny rafitra grid mahazatra.

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

Manova ny atiny modal mifototra amin'ny bokotra trigger

Manana bokotra maromaro izay miteraka mody iray ihany, miaraka amin'ny atiny hafa kely fotsiny? Ampiasao event.relatedTargetsy HTML data-*toetra (mety ho amin'ny alalan'ny jQuery ) mba hanova ny votoatin'ny ny modal miankina amin'ny bokotra izay no kitihina. Jereo ny doka Modal Events ho an'ny antsipiriany momba ny 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)
})

Fampiasana

Ny plugin modal dia manova ny atiny miafina amin'ny fangatahana, amin'ny alàlan'ny toetran'ny data na JavaScript. Izy io koa dia manampy .modal-openamin'ny <body>fanafoanana ny fitondran-tena scrolling default ary miteraka a .modal-backdropmanome faritra kitiho hanesorana ireo modals aseho rehefa manindry ivelan'ny modal.

Amin'ny alàlan'ny data attributes

Ampidiro modal iray tsy manoratra JavaScript. Apetraho data-toggle="modal"eo amin'ny singa mpanara-maso, toy ny bokotra iray, miaraka amin'ny data-target="#foo"na href="#foo"hikendry mody iray manokana hivezivezy.

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

Amin'ny JavaScript

Miantso modal miaraka amin'ny id myModalmisy andalana tokana amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-backdrop="".

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

fomba

.modal(options)

Mampihetsika ny atiny ho toy ny modal. Manaiky safidy azo atao object.

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

.modal('toggle')

Manova fomba tanana iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny modal (izany hoe alohan'ny nitrangan'ny shown.bs.modalna hidden.bs.modalhetsika).

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

.modal('show')

Manokatra modal amin'ny tanana. Miverina any amin'ny mpiantso alohan'ny tena naseho ny modal (izany hoe alohan'ny shown.bs.modalnitrangan'ny hetsika).

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

.modal('hide')

Manafina modal iray amin'ny tanana. Miverina any amin'ny mpiantso alohan'ny tena nafenina ny modal (izany hoe alohan'ny hidden.bs.modalnitrangan'ny hetsika).

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

.modal('handleUpdate')

Manitsy ny toeran'ny modal mba hanohitra ny scrollbar raha sendra misy miseho, izay hahatonga ny modal hitsambikina miankavia.

Ilaina ihany rehefa miova ny haavon'ny modal rehefa misokatra.

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

zava-mitranga

Ny kilasy modal an'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa modal.

Ny hetsika modal rehetra dia alefa amin'ny modal mihitsy (izany hoe ao amin'ny <div class="modal">).

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

Dropdowns dropdown.js

OHATRA

Ampio ny menio midina amin'ny zavatra rehetra miaraka amin'ity plugin tsotra ity, ao anatin'izany ny navbar, tabilao ary pilina.

Ao anaty navbar

Ao anaty pilina

Fampiasana

Amin'ny alàlan'ny toetran'ny data na JavaScript, ny plugin fidinana dia mamadika votoaty miafina (meno midina) amin'ny alàlan'ny fanodina ny .openkilasy amin'ny lisitry ny ray aman-dreny.

Amin'ny fitaovana finday, ny fanokafana dropdown dia manampy .dropdown-backdropfaritra fanidiana ho an'ny fanakatonana ny menio midina rehefa manindry ivelan'ny sakafo, fepetra takiana amin'ny fanohanana iOS mety. Midika izany fa mila paompy fanampiny amin'ny finday ny fifindrana avy amin'ny menio midina mivelatra mankany amin'ny menio midina hafa.

Fanamarihana: data-toggle="dropdown"Miantehitra amin'ny fanakatonana ny menio midina amin'ny ambaratonga fampiharana ilay toetra, ka tsara ny mampiasa azy foana.

Amin'ny alàlan'ny data attributes

Ampio data-toggle="dropdown"amin'ny rohy na bokotra iray mba hivezivezena ny fidina.

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

Mba hitazonana ny URL tsy misy ifandraisany amin'ny bokotra rohy dia ampiasao ny data-targettoetra fa tsy 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>

Amin'ny JavaScript

Antsoy amin'ny alalan'ny JavaScript ny dropdowns:

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

FANDIKANA

tsy misy

fomba

$().dropdown('toggle')

Manova ny menio fidinan'ny navbar nomena na navigateur misy tabilao.

zava-mitranga

Ny hetsika fidinana rehetra dia alefa amin'ny .dropdown-menusingan'ny ray aman-dreny.

Ny hetsika fidinana rehetra dia manana relatedTargetfananana, ny sandany dia ny singa vatofantsika mifamadika.

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

ScrollSpy scrollspy.js

Ohatra amin'ny navbar

Ny plugin ScrollSpy dia natao hanavao ho azy ireo tanjona nav mifototra amin'ny toeran'ny horonam-boky. Soraty eo ambanin'ny navbar ny faritra ary jereo ny fiovan'ny kilasy mavitrika. Hasongadina ihany koa ireo singa ambany midina.

Fampiasana

Mitaky toerana mifanila

Na inona na inona fomba fampiharana, scrollspy dia mitaky ny fampiasana position: relative;amin'ny singa tsikilovanao. Amin'ny ankamaroan'ny tranga dia ity no <body>. Rehefa scrollspy amin'ny singa hafa ankoatry ny <body>, ataovy azo antoka fa manana heightnapetraka sy overflow-y: scroll;ampiharina.

Amin'ny alàlan'ny data attributes

Raha te hampiditra mora foana ny fihetsika scrollspy amin'ny navigateur topbar dia ampio data-spy="scroll"amin'ny singa tianao hitsikilo (matetika dia ity no <body>). Avy eo dia ampio ny data-targettoetra miaraka amin'ny ID na kilasy amin'ny singa ray amin'ny singa Bootstrap rehetra .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>

Amin'ny JavaScript

Rehefa avy nampidirina position: relative;tao amin'ny CSS-nao, antsoy ny scrollspy amin'ny alàlan'ny JavaScript:

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

fomba

.scrollspy('refresh')

Rehefa mampiasa scrollspy miaraka amin'ny fanampiana na fanesorana singa ao amin'ny DOM ianao dia mila miantso ny fomba fanavaozana toy izao:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-offset="".

zava-mitranga

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

Tabs azo togglable tab.js

Ohatra tabilao

Manampia fampiasa kiheba haingana sy mavitrika amin'ny fifindrana amin'ny alàlan'ny tontonana amin'ny atiny eo an-toerana, na dia amin'ny alàlan'ny menio midina. Tsy tohana ny kiheba nested.

Fampiasana

Alefaso amin'ny alalan'ny JavaScript ny kiheba azo vakiana (mila ampihetsika tsirairay ny tabilao tsirairay):

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

Azonao atao ny manetsika ny tabilao tsirairay amin'ny fomba maro:

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

fanamarihana

Azonao atao ny manetsika kiheba na pilule navigation nefa tsy manoratra JavaScript amin'ny alalan'ny famaritana fotsiny data-toggle="tab"na data-toggle="pill"amin'ny singa iray. Ny fampidirana ny navsy ny nav-tabskilasy amin'ny tabilao uldia hampihatra ny bootstrap tab styling , raha ampiana ny navand nav-pillsclasses dia hampihatra pill styling .

<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

Mba hahatonga ny tabilao ho levona, ampio .fadeny tsirairay .tab-pane. Ny takelaka tabilao voalohany dia tsy maintsy .inmanao ny atiny voalohany ho hita ihany koa.

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

fomba

$().tab

Mampihetsika singa kiheba sy fitoeran'ny atiny. Ny tabilao dia tokony hanana na data-targetkendrena hrefny node container ao amin'ny DOM. Amin'ireo ohatra etsy ambony ireo, ny tabilao dia ny <a>s misy data-toggle="tab"toetra.

.tab('show')

Mifidy ny tabilao nomena ary mampiseho ny atiny mifandray aminy. Izay kiheba hafa nofantenana teo aloha dia lasa tsy voafantina ary nafenina ny atiny mifandray aminy. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny takelaka tabilao (izany hoe alohan'ny shown.bs.tabnitrangan'ny hetsika).

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

zava-mitranga

Rehefa mampiseho kiheba vaovao dia miredareda toy izao manaraka izao ny hetsika:

1. hide.bs.tab(amin'ny tabilao mavitrika ankehitriny)
2. show.bs.tab(eo amin'ny tabilao haseho)
3. hidden.bs.tab(eo amin'ny tabilao mavitrika teo aloha, mitovy amin'ny an'ny hide.bs.tabhetsika)
4. shown.bs.tab(eo amin'ny tabilao vao naseho vao mavitrika, mitovy amin'ny an'ny show.bs.tabhetsika)

Raha tsy misy kiheba efa navitrika dia tsy ho voaroaka ny hetsika ary hide.bs.tab.hidden.bs.tab

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

Tooltips tooltip.js

Nahazo aingam-panahy avy amin'ny plugin jQuery.tipsy tena tsara nosoratan'i Jason Frame; Tooltips dia kinova nohavaozina, izay tsy miankina amin'ny sary, mampiasa CSS3 ho an'ny sary mihetsika, ary angona-attributes ho an'ny fitahirizana lohateny eo an-toerana.

Tsy aseho mihitsy ny toro-lalana misy lohateny tsy misy halavany.

OHATRA

Mitsangàna eo amin'ny rohy etsy ambany raha te hahita fitaovana:

Fitaovana static

Misy safidy efatra: ambony, havanana, ambany ary havia.

Lalana efatra

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

Fampiasana

Ny plugin tooltip dia mamorona votoaty sy marika amin'ny fangatahana, ary amin'ny alàlan'ny default dia mametraka ny toro-hevitra aorian'ny singa trigger.

Alefaso amin'ny alalan'ny JavaScript ny toro-hevitra:

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

fanamarihana

Ny mari-pamantarana ilaina ho an'ny tondro-fitaovana dia datatoetra iray ihany ary titleamin'ny singa HTML tianao hananana tondro-fitaovana. Ny mari-pamantarana vokarina amin'ny tondro-fitaovana dia tsotra, na dia mitaky toerana aza izany (amin'ny alàlan'ny default, napetraky topny plugin).

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

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-animation="".

fomba

$().tooltip(options)

Ampifandraiso amin'ny fanangonana singa iray ny mpitantana fitaovana.

.tooltip('show')

Maneho ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny nanehoana ny tondro-fitaovana (izany hoe alohan'ny shown.bs.tooltipnitrangan'ny hetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip. Ny toro-hevitra momba ny fitaovana misy lohateny tsy misy halavany dia tsy aseho mihitsy.

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

.tooltip('hide')

Manafina ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny nafenina ny tondro-fitaovana (izany hoe alohan'ny hidden.bs.tooltipnitrangan'ny hetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip.

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

.tooltip('toggle')

Manova ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny tondro-fitaovana (izany hoe talohan'ny nitrangan'ny hetsika shown.bs.tooltipna hidden.bs.tooltip). Ity dia raisina ho toy ny "manual" triggering ny tooltip.

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

.tooltip('destroy')

Manafina sy manimba ny tondro-fitaovan'ny singa iray. Ireo toro-lalana izay mampiasa ny delegasiona (izay noforonina amin'ny alalan'ny safidy selector) dia tsy azo ravana tsirairay amin'ny singa trigger.

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

zava-mitranga

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

Popovers popover.js

Manampia votoaty mipetaka kely, toy ny ao amin'ny iPad, amin'ny singa rehetra ho an'ny fampahalalam-baovao faharoa.

Popovers ny lohateniny sy ny atiny dia aotra ny halavany dia tsy aseho mihitsy.

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

OHATRA

static popover

Misy safidy efatra: ambony, havanana, ambany ary havia.

Demo mivantana

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

Lalana efatra

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

Alefaso amin'ny tsindrio manaraka

Ampiasao ny focustrigger hanilika popovers amin'ny tsindry manaraka ataon'ny mpampiasa.

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

Fampiasana

Alefaso ny popovers amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-animation="".

fomba

$().popover(options)

Manomboha popover ho an'ny fanangonana singa.

.popover('show')

Mampiseho popover singa iray. Miverina any amin'ny mpiantso alohan'ny tena naseho ny popover (izany hoe alohan'ny shown.bs.popovernitrangan'ny hetsika). Izany dia heverina ho "manual" triggering ny popover. Popovers ny lohateniny sy ny atiny dia aotra ny halavany dia tsy aseho mihitsy.

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

.popover('hide')

Manafina ny popover an'ny singa iray. Miverina amin'ny mpiantso alohan'ny nafenina ny popover (izany hoe talohan'nyhidden.bs.popover nitrangan'ny hetsika). Izany dia heverina ho "manual" triggering ny popover.

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

.popover('toggle')

Manova ny popover an'ny singa iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny popover (izany hoe talohan'ny nitrangan'ny shown.bs.popoverna hidden.bs.popoverhetsika). Izany dia heverina ho "manual" triggering ny popover.

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

.popover('destroy')

Manafina sy manimba ny popover singa iray. Popovers izay mampiasa delegasiona (izay noforonina amin'ny alalan'ny safidy selector) dia tsy azo ravana tsirairay amin'ny singa trigger taranaka.

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

zava-mitranga

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

Hafatra fanairana alert.js

Fampandrenesana ohatra

Ampio fampiasa fandroahana ny hafatra fanairana rehetra miaraka amin'ity plugin ity.

Rehefa mampiasa .closebokotra iray dia tsy maintsy ho zanaka voalohany amin'ny .alert-dismissibleary tsy misy atiny lahatsoratra mety ho eo alohan'ny marika.

Fampiasana

Ampio fotsiny data-dismiss="alert"amin'ny bokotra akaiky anao mba hanomezana fampiasa akaiky fanairana ho azy. Ny fanakatonana fanairana dia manala azy amin'ny DOM.

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

Raha te hampiasa sary mihetsika ny fanairanao rehefa mihidy dia ataovy azo antoka fa manana ny .fadesy .inkilasy efa mihatra aminy izy ireo.

fomba

$().alert()

Manao fanairana amin'ny fihainoana hetsika kitiho amin'ny singa taranaka manana ny data-dismiss="alert"toetra. (Tsy ilaina amin'ny fampiasana ny fanombohana mandeha ho azy ny data-api.)

$().alert('close')

Manakatona fanairana amin'ny fanesorana azy amin'ny DOM. Raha ny .fadeary.in classes ao amin'ilay singa, dia hanjavona ny fanairana alohan'ny hanesorana azy.

zava-mitranga

Ny plugin fanairana an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampiasa mailo.

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

Buttons button.js

Manaova bebe kokoa amin'ny bokotra. Ny bokotra fanaraha-maso dia manambara na mamorona vondrona bokotra ho an'ny singa maro kokoa toy ny barazy.

Stateful

Ampio data-loading-text="Loading..."mba hampiasa ny toetry ny entana amin'ny bokotra iray.

Ity endri-javatra ity dia tsy ampiasaina hatramin'ny v3.3.5 ary nesorina tamin'ny v4.

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

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

Toggle tokana

Ampio data-toggle="button"mba hampavitrika ny famadihana amin'ny bokotra tokana.

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

Checkbox / Radio

Ampio data-toggle="buttons"amin'ny .btn-groupboaty fisavana misy ny fampidiran-dresaka na radio mba ahafahana manova ny fomba fiasany.

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

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

fomba

$().button('toggle')

Manova ny toetry ny fanosehana. Manome ny bokotra ny endrika fa efa navitrika.

$().button('reset')

Mamerina ny toetry ny bokotra - manova lahatsoratra amin'ny lahatsoratra tany am-boalohany. Ity fomba ity dia asynchronous ary miverina alohan'ny fahavitan'ny famerenana.

$().button(string)

Manova lahatsoratra amin'ny toe-tsoratra voafaritra voafaritra.

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

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

Collapse collapse.js

Plugin flexible izay mampiasa kilasy vitsivitsy ho an'ny fihetsika mora miova.

OHATRA

Kitiho ny bokotra etsy ambany mba hampisehoana sy hanafenana singa hafa amin'ny alàlan'ny fanovana kilasy:

• .collapsemanafina votoaty
• .collapsingdia ampiharina mandritra ny tetezamita
• .collapse.inmampiseho votoaty

Azonao atao ny mampiasa rohy misy ilay hreftoetra, na bokotra misy ilay data-targettoetra. Amin'ireo tranga roa ireo, data-toggle="collapse"dia ilaina ny.

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

Ohatra accordion

Ampitomboy ny fitondran-tena firodana mahazatra mba hamoronana akorandriaka miaraka amin'ny singa tontonana.

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

Azo atao koa ny manakalo .panel-bodys amin'ny .list-groups.

Fampiasana

Ny plugin collapse dia mampiasa kilasy vitsivitsy hifehezana ny fampiakarana mavesatra:

• .collapsemanafina ny votoatiny
• .collapse.inmampiseho ny votoatiny
• .collapsingampiana rehefa manomboka ny tetezamita, ary esorina rehefa tapitra

Ireo kilasy ireo dia azo jerena aocomponent-animations.less .

Amin'ny alàlan'ny data attributes

Ampio fotsiny data-toggle="collapse"ary a data-targetamin'ny singa mba hanendry ho azy ny fanaraha-maso ny singa azo rava. Ny data-targettoetra dia manaiky mpifidy CSS hampiharana ny fianjerana. Ataovy azo antoka ny manampy ny kilasy collapseamin'ny singa azo rava. Raha tianao ny hisokatra ho default dia ampio ny kilasy fanampinyin .

Mba hanampiana ny fitantanana vondrona mitovy amin'ny akorandriaka amin'ny fanaraha-maso azo harodana, ampio ny toetra angona data-parent="#selector". Jereo ny demo raha te hahita izany amin'ny hetsika.

Amin'ny JavaScript

Alefa tanana amin'ny:

$('.collapse').collapse()

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-parent="".

fomba

.collapse(options)

Manetsika ny atiny ho singa azo harodana. Manaiky safidy azo atao object.

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

.collapse('toggle')

Manova singa azo harodana ho aseho na afenina. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny singa azo rava (izany hoe talohan'ny nitrangan'ny shown.bs.collapsena hidden.bs.collapsehetsika).

.collapse('show')

Mampiseho singa azo harodana. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny singa azo harodana (izany hoe alohan'ny shown.bs.collapsenitrangan'ny hetsika).

.collapse('hide')

Manafina singa azo harodana. Miverina any amin'ny mpiantso alohan'ny tena nafenina ny singa azo harodana (izany hoe alohan'ny hidden.bs.collapsenitrangan'ny hetsika).

zava-mitranga

Ny kilasin'ny firodanan'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampandehanana mirodana.

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

Carousel carousel.js

Singa sary mihetsika ho an'ny fitetezana singa, toy ny carousel. Tsy tohanana ny carousels voatokana.

OHATRA

Teo aloha Manaraka

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

Ampio caption amin'ny slide-nao mora foana miaraka amin'ny .carousel-captionsinga ao anatin'ny .item. Apetraho ao anatin'izany ny HTML rehetra azo atao ary halamina sy halamina ho azy izany.

Etikety slide voalohany

Nulla vitae elit libero, a pharetra augue mollis interdum.

Etikety kisary faharoa

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etikety slide fahatelo

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Teo aloha Manaraka

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

Fampiasana

Carousels maro

Ny carousels dia mitaky ny fampiasana ny ideny amin'ny kaontenera ivelany indrindra (ny .carousel) mba hifehezana ny carousel miasa tsara. Rehefa manampy carousels maromaro, na rehefa manova carousel id, dia ataovy izay hanavao ny fanaraha-maso mifandraika.

Amin'ny alàlan'ny data attributes

Mampiasà toetra angona mba hifehezana mora foana ny toerana misy ny carousel. data-slidemanaiky ny teny fanalahidy prevna next, izay manova ny toeran'ny slide mifandraika amin'ny toerana misy azy ankehitriny. Raha tsy izany, ampiasao data-slide-tony fampitaovana fanondroana misesy manta mankany amin'ny carousel data-slide-to="2", izay mamindra ny toeran'ny kisendrasendra mankany amina fanondroana manokana manomboka amin'ny0 .

Ny data-ride="carousel"toetra dia ampiasaina hanamarihana carousel ho toy ny animating manomboka amin'ny entana pejy. Tsy azo ampiasaina miaraka amin'ny fanombohana JavaScript mibaribary (mihemotra sy tsy ilaina) amin'ny carousel mitovy.

Amin'ny JavaScript

Antsoy amin'ny tanana ny carousel amin'ny:

$('.carousel').carousel()

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-interval="".

fomba

.carousel(options)

Manomboka ny carousel miaraka amin'ny safidy azo atao objectary manomboka mandehandeha amin'ny entana.

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

.carousel('cycle')

Mihodikodina amin'ireo singa carousel miankavia miankavanana.

.carousel('pause')

Manakana ny carousel tsy hivezivezy amin'ny entana.

.carousel(number)

Mihodina ny carousel mankany amin'ny frame manokana (mifototra amin'ny 0, mitovy amin'ny array).

.carousel('prev')

Mihodina mankany amin'ilay singa teo aloha.

.carousel('next')

Mihodina mankany amin'ny singa manaraka.

zava-mitranga

Ny kilasin'ny carousel an'ny Bootstrap dia mampiseho fisehoan-javatra roa ho an'ny fampidiran-dresaka amin'ny fiasa carousel.

Samy manana ireto toetra fanampiny ireto ny hetsika roa:

• direction: Lalana mikoriana ny carousel (na "left"na "right").
• relatedTarget: Ny singa DOM izay apetraka amin'ny toerany ho singa mavitrika.

Ny hetsika carousel rehetra dia alefa amin'ny carousel mihitsy (izany hoe ao amin'ny <div class="carousel">).

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

Affix affix.js

OHATRA

Ny plugin affix dia mihodina position: fixed;sy miala, maka tahaka ny vokatra hita miaraka amin'ny position: sticky;. Ny subnavigation eo ankavanana dia demo mivantana amin'ny plugin affix.

Fampiasana

Ampiasao ny plugin affix amin'ny alàlan'ny toetran'ny data na amin'ny tananao miaraka amin'ny JavaScript anao manokana.Amin'ireo toe-javatra roa ireo dia tsy maintsy manome CSS ianao amin'ny fametrahana sy ny sakan'ny atiny affixed anao.

Fanamarihana: Aza mampiasa ny plugin affix amin'ny singa iray ao anatin'ny singa iray somary mipetrapetraka, toy ny tsanganana voasintona na atosika, noho ny tsy fahampian'ny Safari rendering .

Fametrahana amin'ny alàlan'ny CSS

Ny plugin affix dia mifamadika eo anelanelan'ny kilasy telo, izay samy maneho fanjakana manokana: .affix, .affix-top, ary .affix-bottom. Tsy maintsy manome ny styles ianao, ankoatra ny position: fixed;on .affix, ho an'ireo kilasy ireo ny tenanao (tsy miankina amin'ity plugin ity) mba hikarakarana ny toerana tena izy.

Toy izao ny fomba fiasan'ny plugin affix:

1. Hanombohana, manampy ny plugin.affix-top manondro fa ny singa dia eo amin'ny toerana ambony indrindra. Amin'izao fotoana izao dia tsy ilaina ny fametrahana CSS.
2. Ny fandehanana mandalo ny singa tianao hasiana dia tokony hiteraka ny tena affixing. Eto no .affixmanolo .affix-topsy mametraka position: fixed;(nomen'ny Bootstrap's CSS).
3. Raha voafaritra ny offset ambany dia tokony .affixhosoloina .affix-bottom. Satria tsy voatery ny offsets, ny fametrahana iray dia mitaky anao hametraka ny CSS mety. Amin'ity tranga ity, ampio position: absolute;raha ilaina. Ny plugin dia mampiasa ny toetra angon-drakitra na safidy JavaScript hamaritana ny toerana hametrahana ilay singa avy any.

Araho ireo dingana etsy ambony mba hametrahana ny CSS-nao ho an'ny iray amin'ireo safidy fampiasana etsy ambany.

Amin'ny alàlan'ny data attributes

Mba hanampiana mora foana ny fitondran-tena affix amin'ny singa rehetra, ampio fotsinydata-spy="affix" amin'ny singa tianao hitsikilo. Mampiasà offset mba hamaritana hoe rahoviana no hanodina ny fanindriana singa iray.

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

Amin'ny JavaScript

Antsoy ny plugin affix amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-offset-top="200".

fomba

.affix(options)

Mampihetsika ny atiny ho votoaty apetaka. Manaiky safidy azo atao object.

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

.affix('checkPosition')

Mamerina kajy ny toetry ny affix mifototra amin'ny refy, ny toerana ary ny toeran'ny horonam-boky misy ireo singa mifandraika amin'izany. Ny .affix, .affix-top, ary ny .affix-bottomkilasy dia ampiana na esorina amin'ny atiny mipetaka araka ny fanjakana vaovao. Mila antsoina io fomba io isaky ny miova ny refin'ny atiny apetaka na ny singa kendrena, mba hahazoana antoka ny fipetrahan'ny atiny mipetaka marina.

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

zava-mitranga

Ny plugin affix an'ny Bootstrap dia mampiseho hetsika vitsivitsy amin'ny fampifandraisana amin'ny fiasa affix.