Kuma bɛɛ lajɛlen

Mɔgɔ kelen-kelen walima a lajɛlen

Plugins bɛ se ka don u kelen-kelen na (ka baara kɛ ni Bootstrap ka *.jsfile kelen-kelenw ye), walima u bɛɛ bɛ se ka don a kɔnɔ siɲɛ kelen (ka baara kɛ ni bootstrap.jswalima ni minified bootstrap.min.js).

Donanw ka fɛnw

I bɛ se ka baara kɛ ni Bootstrap plugins bɛɛ ye dɔrɔn markup API fɛ k’a sɔrɔ i ma JavaScript sɛrɛ kelen sɛbɛn. Nin ye Bootstrap ka API fɔlɔ ye wa a ka kan ka kɛ i ka jateminɛ fɔlɔ ye ni i bɛ baara kɛ ni plugin ye.

O fɔlen, ko dɔw la, a bɛ se ka kɛ ko a ka ɲi ka nin baarakɛcogo in faga. O la, an bɛ se fana Di ka data attribut API bali ni ko kɛlenw bɛɛ sirili ye sɛbɛn tɔgɔladonni kan ni data-api. Nin bɛ i n’a fɔ nin cogo in na:

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

O cogo kelen na, walasa ka fɛn kɛrɛnkɛrɛnnen dɔ Laɲini, i bɛ fɛn in tɔgɔ Dòn dɔrɔn i n’a fɔ tɔgɔda-yɔrɔ ka Fàra data-api tɔgɔda-yɔrɔ kan i n’a fɔ nin:

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

API porogaramulen

An dalen b’a la fana ko i ka kan ka se ka baara kɛ ni Bootstrap plugins bɛɛ ye JavaScript API dɔrɔn fɛ. Foroba APIw bɛɛ ye fɛɛrɛ kelenw ye, minnu bɛ se ka siri ni cakɛda ye, ani ka segin dalajɛlen kan min waleyara.

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

Fɛɛrɛ bɛɛ ka kan ka sɔn sugandili fɛn dɔ ma, sɛrɛ min bɛ fɛɛrɛ kɛrɛnkɛrɛnnen dɔ laɲini, walima foyi tɛ (min bɛ fɛn dɔ daminɛ ni kɛcogo kɔrɔ ye):

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

Plugin kelen-kelen bɛɛ fana b’a ka raw constructor jira Constructornafolo dɔ kan: $.fn.popover.Constructor. N’i ​​b’a fɛ ka plugin instance kɛrɛnkɛrɛnnen dɔ sɔrɔ, i k’a sɔrɔ k’a ɲɛsin element dɔ ma: $('[rel="popover"]').data('popover').

Settings (Labɛnw) minnu bɛ daminɛ

Aw bɛ se ka fɛn dɔ labɛncogo kɔrɔw Changer ni aw ye fɛn dɔ sɛmɛntiya Constructor.DEFAULTS:

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

Kɛlɛ si tɛ yen

Tuma dɔw la, a ka kan ka baara kɛ ni Bootstrap plugins ye ni UI framework wɛrɛw ye. O cogoyaw la, tɔgɔda-yɔrɔ-ko bɛ Se ka Kɛ tuma dɔw la. N'o Kɛra, i .noConflictb'a fɛ ka plugin min nafa Lasegin, i bɛ Se k'o Weele.

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

Ko minnu kɛra

Bootstrap bɛ ko kɛlenw di minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye, ka ɲɛsin plugins fanba ka wale kɛrɛnkɛrɛnnenw ma. A ka c’a la, ninnu bɛ Nà daɲɛ-dafalen ni daɲɛ tɛmɛnen cogo la - daɲɛ-dafalen (ex. show) bɛ Daminɛ yɔrɔ min na ko dɔ daminɛ na, wa a daɲɛ tɛmɛnen cogoya (ex. shown) bɛ Daminɛ wale dɔ dafalen na.

Kabini 3.0.0, Bootstrap ko kɛlenw bɛɛ bɛ tɔgɔda-yɔrɔ la.

Ko minnu tɛ dantigɛ, olu bɛɛ bɛ preventDefaultbaarakɛcogo Di. O bɛ se di ka wale dɔ waleyali jɔ sani a ka daminɛ.

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

Sanitizer ye

Baarakɛminɛnw ni Popovers bɛ baara Kɛ ni an ka saniyalan jɔlen ye walasa ka sugandiliw saniya minnu bɛ Sɔn HTML ma.

A whiteListnafa fɔlɔ ye nin ye:

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

N’i ​​b’a fɛ ka nafa kuraw Fàra nin default in kan whiteListi bɛ Se ka nin wale ninnu Kɛ:

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)

N’aw b’a fɛ ka tɛmɛ an ka saniyalan kan bawo aw b’a fɛ ka baara kɛ ni gafemarayɔrɔ kɛrɛnkɛrɛnnen ye, misali la DOMPurify , aw ka kan ka nin wale ninnu kɛ:

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

Version nimɔrɔw

Bootstrap ka jQuery 'kɔnɔfɛn kelen-kelen bɛɛ 'sèn bɛ Se ka Sɔrɔ 'sènfɛ-sɛbɛnni-minɛn in 'kɔnɔ 'fɛn fɛ VERSION. Misali la, baarakɛminɛnw ɲɛfɔli dakun na:

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

Fallback kɛrɛnkɛrɛnnen si tɛ yen ni JavaScript ma baara kɛ

Bootstrap ka plugins tɛ bin kɔfɛ kɛrɛnkɛrɛnnenya la gracefully ni JavaScript bɛ baara la. N’i ​​b’i janto baarakɛlaw ka ko kɛlenw na nin ko in na, i ka baara kɛ ni <noscript>u ye walasa ka ko in ɲɛfɔ (ani JavaScript daminɛcogo kura) i ka baarakɛlaw ye, ani/walima ka i yɛrɛ ka ladamu fallbacks fara a kan.

Tɛmɛsiraw transition.js

Tɛmɛsira ko la

Walasa ka tɛmɛsira nɔgɔmanw sɔrɔ, aw bɛ transition.jssiɲɛ kelen don JS filen tɔw kɛrɛfɛ. N’i ​​bɛ baara Kɛ ni compiled (walima minified) bootstrap.jsye , kun t’a la k’o Dòn a la—a bɛ yen kaban.

Fɛn min bɛ a kɔnɔ

Transition.js ye dɛmɛn jɔnjɔn ye transitionEndko kɛlenw na ka fara CSS transition emulator kan. A bɛ Kɛ ni 'plugin tɔw ye walasa ka CSS 'tɛmɛsira dɛmɛni Lajɛ ani ka 'tɛmɛsira jɛgɛlenw Minɛ.

Tɛmɛsiraw balili

Tɛmɛsira bɛ se ka bali diɲɛ kɔnɔ ni nin JavaScript yɔrɔ in ye, min ka kan ka na transition.js(walima bootstrap.jswalima bootstrap.min.js, i n’a fɔ a bɛ se ka kɛ cogo min na) doni kɔfɛ:

$.support.transition = false

Modalw ye modal.js ye

Modalw bɛ nɔgɔya, nka u bɛ se ka wuli ka bɔ u nɔ na, ​​kumaɲɔgɔnya ɲininkaliw ni baarakɛcogo fitinin wajibiyalenw ani defaults hakilitigiw.

K’a sababu Kɛ HTML5 b’a kɔrɔfɔcogo ɲɛfɔ cogo min na, autofocusHTML fɛnɲɛnɛma tɛ nɔ Blà Bootstrap modaliw la. Walasa ka o nɔ kelen sɔrɔ, baara kɛ ni JavaScript dɔw ye minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye:

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

Misaliw

Misali jɔlen

Modal rendered min bɛ ni kuncɛ, farikolo ani walew kulu ye jukɔrɔla la.

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

Modal dɔ wuli ka bɔ JavaScript fɛ ni i ye butɔni digi min bɛ duguma. A bɛna sɛgɛn ka jigin ka tunun ka bɔ ɲɛ sanfɛ.

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

Hakɛw minnu bɛ se ka kɛ i yɛrɛ sago ye

Modalw bɛ ni hakɛ fila ye minnu bɛ se ka sugandi, minnu bɛ sɔrɔ modifier classes fɛ ka bila a kan .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>

Animatɛriw bɔ yen

Ni modaliw bɛ bɔ dɔrɔn sanni u ka fade in ka lajɛ, i ka .fadekalasi bɔ i ka modali taamasiyɛn na.

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

Baara kɛ ni grid system ye

Walasa ka nafa sɔrɔ Bootstrap grid system la modal kɔnɔ, i bɛ nest .rows dɔrɔn de kɛ .modal-bodyka sɔrɔ ka baara kɛ ni normal grid system classes ye.

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

Modal kɔnɔkow caman ɲɔgɔnnabɔli ka da trigger button kan

Yala butɔni kulu dɔ bɛ aw bolo minnu bɛɛ bɛ modɛli kelen daminɛ, dɔrɔn ni kɔnɔkow tɛ kelen ye dɔɔnin wa? Baara kɛ event.relatedTargetni HTML data-*fɛnw ye (a bɛ se ka kɛ jQuery fɛ ) walasa ka modal kɔnɔkow caman ɲɔgɔn falen ka kɛɲɛ ni butɔni min digilen don. Aw ye Modal Events sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ 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)
})

Baarakɛcogo

Modal plugin bɛ i ka kunnafoni dogolenw sɛgɛsɛgɛ ni ɲinini kɛra, data attributes walima JavaScript fɛ. A fana bɛ dɔ Fàra o kan .modal-openka ' <body>sèn Bɔ 'sènfɛ-sɛbɛnni kɛcogo kɔrɔ la ani ka a Lawuli .modal-backdropwalasa ka 'kùnkolo-yɔrɔ Di walasa ka modɛli jiralenw Labɔ ni 'kὲlɛ Kɛ modal kɔkan.

Donanw ka fɛnɲɛnɛmaw fɛ

Modal dɔ baara k’a sɔrɔ i ma JavaScript sɛbɛn. Set data-toggle="modal"on controleur element, i n’a fɔ butɔni, ka fara a kan data-target="#foo"walima href="#foo"ka target modal kɛrɛnkɛrɛnnen dɔ toggle.

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

JavaScript fɛ

Modal dɔ wele ni id myModalye ni JavaScript sɛrɛ kelen ye:

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

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-backdrop="".

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

Fɛɛrɛw

.modal(options)

A bɛ i ka kɔnɔkow baara i n’a fɔ modal. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.

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

.modal('toggle')

A bɛ modal dɔ wuli ni bolo ye. A bɛ Segin welebaga ma sani modal ka jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.modalwalima hidden.bs.modalko kɛlen ka Kɛ).

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

.modal('show')

A bɛ modal dɔ da wuli ni bolo ye. A bɛ Segin welebaga ma sani modal ka jira tiɲɛ na (o kɔrɔ ye ko sanni ko shown.bs.modalin ka Kɛ).

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

.modal('hide')

A bɛ modal dɔ dogo ni bolo ye. A bɛ Segin welebaga ma sani modɛli ka dogo tiɲɛ na (o kɔrɔ ye ko sanni ko hidden.bs.modalin ka Kɛ).

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

.modal('handleUpdate')

A bɛ modɛli jɔyɔrɔ ladilan kokura walasa ka sɛrɛkili dɔ kɛlɛ ni dɔ ka kan ka bɔ, o min bɛna kɛ sababu ye ka modali ka pan ka taa kinin fɛ.

A mago bɛ dɔrɔn ni modal janya bɛ Changé ka a sɔrɔ a dabɔlen don.

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

Ko minnu kɛra

Bootstrap ka modal class bɛ ko damadɔw jira kɛnɛ kan walasa ka hooking kɛ modal baarakɛcogo la.

Modal ko kɛlenw bɛɛ bɛ tasuma don modali yɛrɛ la (o kɔrɔ ye ko <div class="modal">).

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

Dropdowns (Donkiliw) dropdown.js

Misaliw

Aw bɛ fɛnw fara fɛn o fɛn kan ni nin fɛn nɔgɔman in ye, i n’a fɔ navbar, tabs ani furakisɛw.

Navbar dɔ kɔnɔ

Furakisɛw kɔnɔ

Baarakɛcogo

Data attributes walima JavaScript fɛ, fɛn min bɛ fɛnw jira, o bɛ kunnafoni dogolenw (menuw) wuli ka bɔ a nɔ na ni .openkalan ye min bɛ bangebagaw ka lisi yɔrɔ kan.

Telefɔni selilɛriw kan, ka fɛn dɔ da wuli, o bɛ dɔ fara a kan .dropdown-backdropi n’a fɔ yɔrɔ min bɛ fɛnw digi walasa ka fɛn dɔw datugu ni i ye fɛnw digi menu kɔkan, o ye wajibi ye iOS dɛmɛni ɲuman na. O kɔrɔ ye ko n’i bɛ bɔ yɔrɔ dafalen na ka taa yɔrɔ wɛrɛ la, o bɛ ɲini ka dɔ fara i ka telefɔni selilɛri kan.

Kɔlɔsili: O data-toggle="dropdown"fɛn in bɛ da a kan walasa ka fɛnw datugu minnu bɛ bɔ baarakɛminɛnw na, o la, a ka ɲi ka baara kɛ n’a ye tuma bɛɛ.

Donanw ka fɛnɲɛnɛmaw fɛ

A fara a kan data-toggle="dropdown"ka kɛ lien walima butɔni dɔ ye walasa ka fɛn dɔ wuli ka bɔ a nɔ na.

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

Walasa ka URLw to u cogo la ni jɛgɛnsira butɔni ye, i ka baara kɛ ni o data-targetfɛnsɛbɛn ye 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>

JavaScript fɛ

Aw bɛ fɛnw wele JavaScript fɛ:

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

Sugandili minnu bɛ kɛ

Foɲisi

Fɛɛrɛw

$().dropdown('toggle')

A bɛ navbar walima navigation tabbed dilen dɔ ka menu dropdown wuli.

Ko minnu kɛra

Fɛn minnu bɛ Dòn 'kɔnɔ, olu bɛɛ bɛ Fɔ .dropdown-menu's parent element ('s parent element) la.

Ko kɛlenw bɛɛ bɛ ni relatedTargetnafolo ye, min nafa ye toggling anchor element ye.

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

ScrollSpy ye sɛgɛsɛgɛli kɛ.js

Misali la navbar kɔnɔ

ScrollSpy plugin ye nav laɲiniw ladamuni ye a yɛrɛma ka da scroll jɔyɔrɔ kan. I ka yɔrɔ lajɛ min bɛ navbar jukɔrɔ ani ka kalansen min bɛ baara kɛ, o fɛn caman Changement lajɛ. Fɛn fitinin minnu bɛ jigin, olu fana bɛna jira.

Baarakɛcogo

A bɛ jɔyɔrɔko danfaralen de wajibiya

A kɛcogo mana kɛ min o min ye, scrollspy bɛ baara kɛ ni position: relative;o ye i bɛ ka fɛn min sɛgɛsɛgɛ. A ka c' a la nin ye <body>. Ni i bɛ scrollspying kɛ fɛn wɛrɛw kan minnu tɛ <body>, i jija ka heightset sɔrɔ ani ka overflow-y: scroll;baara kɛ.

Donanw ka fɛnɲɛnɛmaw fɛ

Walasa ka scrollspy kɛcogo fara nɔgɔya la i ka topbar navigation kan, data-spy="scroll"i b’a fɛ ka spy min kɛ, i ka fara o kan (a ka c’a la nin bɛna kɛ <body>). O kɔ fɛ, i bɛ fɛn in Fàra a kan data-targetni Bootstrap .navyɔrɔ o yɔrɔ bangebaga-yɔrɔ ID walima a kalasi ye.

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

I kɛlen kɔ ka fara position: relative;i ka CSS kan, i ka scrollspy wele JavaScript fɛ:

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

Fɛɛrɛw

.scrollspy('refresh')

Ni aw bɛ baara kɛ ni scrollspy ye ka fara fɛnw farali walima u bɔli kan DOM kɔnɔ, aw bɛna a ɲini ka refresh fɛɛrɛ wele i n’a fɔ:

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

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-offset="".

Ko minnu kɛra

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

Tablo minnu bɛ se ka wuli ka bɔ u nɔ na tab.js

Misali tablɛtiw

Tab baarakɛcogo teliyalen, fangama dɔ fara a kan walasa ka tɛmɛ ni sigida kɔnɔkow pannew ye, hali ni fɛnw ye minnu bɛ jigin. Tablo nested tɛ dɛmɛn.

Baarakɛcogo

Tabable tabs daminɛ JavaScript fɛ (tab kelen-kelen bɛɛ ka kan ka baara kɛ kelen-kelen):

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

Aw bɛ se ka tablo kelen-kelen bɛɛ baara cogo caman na:

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

I bɛ se ka tab walima pill navigation dɔ baara k’a sɔrɔ i ma JavaScript si sɛbɛn ni i ye element dɔ jira dɔrɔn data-toggle="tab"walima a kan. ni kalansenw data-toggle="pill"farala tablo kan , o bɛna Bootstrap tab cogoya waleya , ka sɔrɔ ka kalansenw fara a kan , o bɛna furakisɛw cogoya kɛ .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 nɔ ye

Walasa ka tablow kɛ u ka fade in na, i ka dɔ fara .fadeu kelen-kelen bɛɛ .tab-panekan . Tablo fɔlɔ fana ka kan .inka kɛ sababu ye ka fɔlɔ kɔnɔkow kɛ fɛn ye min bɛ ye.

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

Fɛɛrɛw

$().tab

A bɛ tab element ni kɔnɔkow minɛn dɔ baara. Tab ka kan ka kɛ ni a ye data-targetwalima ni hreftargeting a container node ye DOM kɔnɔ. Misali minnu fɔra sanfɛ, tablow ye <a>s ye minnu bɛ ni data-toggle="tab"fɛnɲɛnɛmaw ye.

.tab('show')

A bɛ tablo dilen sugandi ani k’a kɔnɔkow jira minnu bɛ tali kɛ a la. Tab wɛrɛ o wɛrɛ min tun sugandira ka tɛmɛ, o bɛ kɛ sugandibali ye ani a kɔnɔkow bɛ dogo. A bɛ Segin welebaga ma sanni tab pane ka jira tiɲɛ na (o kɔrɔ ye ko sanni ko shown.bs.tabin ka Kɛ).

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

Ko minnu kɛra

Ni tab kura jira, ko kɛlenw bɛ tasuma don nin cogo la:

1. hide.bs.tab(tab min bɛ baara la sisan)
2. show.bs.tab(tabu min bɛna jira, o kan)
3. hidden.bs.tab(tab active tɛmɛnen kan, o ni hide.bs.tabko kɛlen ta ye kelen ye)
4. shown.bs.tab(tab min jiralen don sisan, o min bɛ baara kura kɛ, o ni show.bs.tabko kɛlen ta ye kelen ye)

Ni tab si tun tɛ baara la kaban, o tuma na hide.bs.tabani hidden.bs.tabko kɛlenw tɛna ci.

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

Baarakɛminɛnw ladilikanw tooltip.js

A lawulilen don ni jQuery.tipsy plugin ɲumanba ye min sɛbɛnna Jason Frame fɛ; Baarakɛminɛnw ye sɛgɛsɛgɛli kura ye, minnu tɛ u jigi da jaw kan, u bɛ baara kɛ ni CSS3 ye animationw kama, ani data-attributes sigida tɔgɔw marali kama.

Baarakɛminɛn minnu tɔgɔw janya ye zeru ye, olu tɛ jira abada.

Misaliw

I bolo digi jukɔrɔla yɔrɔw kan walasa ka baarakɛminɛnw lajɛ:

Baarakɛminɛnw tilatilali statiki

Sugandili naani bɛ yen: sanfɛ, kinin fɛ, duguma ani numan fɛ.

Sira naani

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

Baarakɛcogo

Baarakɛminɛnw-kumasenw bɛ kɔnɔkow ni taamasiyɛnw Bɔ ɲinini na, wa a bɛ baarakɛminɛnw bila u ka trigger element kɔfɛ.

Baarakɛminɛn in daminɛ JavaScript fɛ:

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

Markup (Marka) ye

Taamaʃyɛn wajibiyalen min bɛ Kɛ baarakɛminɛn dɔ la o ye datafɛnɲɛnɛma dɔrɔn de ye wa titleHTML yɔrɔ kan i b’a fɛ ka baarakɛminɛnw Sɔrɔ. Baarakɛminɛn dɔ taamasiyɛn min Sɔrɔla o ka nɔgɔn kosɛbɛ, hali n’a bɛ jɔyɔrɔ dɔ de wajibiya (a daminɛ na, a bɛ Blà ‘sèn na topni ‘plugin ye).

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

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-animation="".

Fɛɛrɛw

$().tooltip(options)

A bɛ baarakɛminɛn dɔ nɔrɔ fɛnw lajɛlen dɔ la.

.tooltip('show')

A bɛ element dɔ ka baarakɛminɛnw jira. A bɛ Segin welebaga ma sani baarakɛminɛn in ka jira tiɲɛ na (o kɔrɔ ye ko sani ko shown.bs.tooltipin ka Kɛ). O bɛ jate "manuel" triggering ye baarakɛminɛnw ɲɛfɔli la. Baarakɛminɛn minnu tɔgɔw ye zeru janya ye, olu tɛ jira abada.

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

.tooltip('hide')

A bɛ fɛn dɔ ka baarakɛminɛn dɔ dogo. A bɛ Segin welebaga ma sani baarakɛminɛn in ka dogo tiɲɛ na (o kɔrɔ ye ko sani ko hidden.bs.tooltipin ka Kɛ). O bɛ jate "manuel" triggering ye baarakɛminɛnw ɲɛfɔli la.

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

.tooltip('toggle')

A bɛ fɛn dɔ ka baarakɛminɛnw sɛgɛsɛgɛli wuli. A bɛ Segin welebaga ma sani baarakɛminɛn in ka jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.tooltipwalima hidden.bs.tooltipko kɛlen ka Kɛ). O bɛ jate "manuel" triggering ye baarakɛminɛnw ɲɛfɔli la.

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

.tooltip('destroy')

A bɛ fɛn dɔ ka baarakɛminɛn dɔ dogo ani k’a Tiɲɛ. Baarakɛminɛn minnu bɛ baara Kɛ ni delegation ye (minnu bɛ Dabɔ ni option selectorye ) tɛ Se ka Tiɲɛ kelen-kelen bɔnsɔn trigger elements kan.

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

Ko minnu kɛra

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

Popovers ye popover.js ye

Aw bɛ kɔnɔkow dacogo misɛnninw fara ɲɔgɔn kan, i n’a fɔ iPad kan, fɛn o fɛn na walasa ka kunnafoni filananw sigi.

Popovers minnu tɔgɔ ni u kɔnɔkow bɛɛ ye zeru-janya ye, olu tɛ jira abada.

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

Misaliw

Popover statique ye

Sugandili naani bɛ yen: sanfɛ, kinin fɛ, duguma ani numan fɛ.

Demo en direct

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

Sira naani

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

Dismiss kan nata digi

Baara kɛ ni focustrigger ye walasa ka popovers (popovers) bɔ kɛnɛ kan baarakɛla bɛ min kɛ digi nata la.

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

Baarakɛcogo

Popovers baara kɛ JavaScript fɛ:

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

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-animation="".

Fɛɛrɛw

$().popover(options)

A bɛ popovers daminɛ ka ɲɛsin element collection dɔ ma.

.popover('show')

A bɛ element dɔ ka popover jira. A bɛ Segin welebaga ma sani popover ka jira tiɲɛ na (o kɔrɔ ye ko sanni ko shown.bs.popoverin ka Kɛ). O bɛ jate "manuel" triggering ye popover la. Popovers minnu tɔgɔ ni u kɔnɔkow bɛɛ ye zeru-janya ye, olu tɛ jira abada.

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

.popover('hide')

A bɛ element dɔ ka popover dogo. A bɛ Segin welebaga ma sani popover ka dogo tiɲɛ na (o kɔrɔ ye ko sanni ko hidden.bs.popoverin ka Kɛ). O bɛ jate "manuel" triggering ye popover la.

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

.popover('toggle')

A bɛ fɛn dɔ ka popover wuli. A bɛ Segin welebaga ma sani popover ka jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.popoverwalima hidden.bs.popoverko kɛlen ka Kɛ). O bɛ jate "manuel" triggering ye popover la.

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

.popover('destroy')

A bɛ element dɔ ka popover dogo ani k’a tiɲɛ. Popovers minnu bɛ baara Kɛ ni delegation ye (minnu bɛ Dabɔ ni option selectorye ) tɛ Se ka Tiɲɛ kelen-kelen na descendant trigger elements kan.

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

Ko minnu kɛra

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

Kɔlɔsili cikanw alert.js

Misali lasɔminiw

Aw bɛ dismiss baarakɛcogo fara lasɔmini cikanw bɛɛ kan ni nin plugin in ye.

Ni baara bɛ Kɛ ni .closebutɔni ye, a ka kan ka Kɛ den fɔlɔ ye .alert-dismissiblewa sɛbɛnni kɔnɔko si tɛ Se ka Nà a ɲɛfɛ taamasiyɛn na.

Baarakɛcogo

Dɔrɔn dɔ fara data-dismiss="alert"i ka dadon butɔni kan walasa ka a yɛrɛma ka alert close functionality di. Ni i ye lasɔmini dɔ datugu, o b’a bɔ DOM kɔnɔ.

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

Walasa i ka lasɔminiw ka baara kɛ ni animation ye ni u bɛ dadon, i k’a lajɛ .fadeni ani .inkalanw bɛ u la kaban minnu bɛ tali kɛ u la.

Fɛɛrɛw

$().alert()

A bɛ lasɔmini Kɛ ka 'kùnnafoni-cimago-ko kɛlenw Lamɛ bɔnsɔn fɛnw kan minnu bɛ ni data-dismiss="alert"fɛnɲɛnɛma ye. (A man kan ni baara bɛ kɛ ni data-api ka auto-initialisation ye.)

$().alert('close')

A bɛ lasɔmini dɔ datugu ni a bɔli ye DOM kɔnɔ. Ni .fadeand .inclasses bɛ element kan, alert bɛ ban sani a ka bɔ.

Ko minnu kɛra

Bootstrap ka lasɔmini-plugin bɛ ko damadɔw Bɔ kɛnɛ kan walasa ka jɛgɛn ka Kɛ lasɔmini baarakɛcogo la.

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

Butɔnw butɔni.js

Aw bɛ dɔ fara a kan ni butɔni ye. Kontrɔli butɔni bɛ fɔ walima ka butɔni kuluw Dabɔ yɔrɔ caman kama i n’a fɔ baarakɛminɛnw.

Jamanatigi

Fàra o kan data-loading-text="Loading..."walasa ka baara Kɛ ni doni cogoya ye butɔni dɔ kan.

O fɛɛrɛ in ma Kɛ fɔlɔ kabini v3.3.5 wa a Bɔra v4 kɔnɔ.

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

A fara a kan data-toggle="button"walasa ka toggling baara kɛ butɔni kelen kan.

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

Checkbox / Arajo lajɛ

Aw bɛ fara jatebɔyɔrɔ data-toggle="buttons"dɔ kan .btn-groupmin kɔnɔ walima arajo dontaw bɛ yen walasa ka se ka fɛnw sɛgɛsɛgɛli kɛ u ka cogoyaw la.

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

Fɛɛrɛw

$().button('toggle')

Toggles push jamana. A bɛ butɔni di i n’a fɔ a bɛ baara la.

$().button('reset')

A bɛ butɔni cogoya lasegin - a bɛ sɛbɛnniw falen-falen ka kɛ sɛbɛn fɔlɔ ye. O fɛɛrɛ in ye asynchrone ye wa a bɛ Segin ka Sɔrɔ resetting (labɛnni kura) ka Ban tiɲɛ na.

$().button(string)

A bɛ sɛbɛnniw ɲɔgɔn falen-falen ka kɛɲɛ ni sɛbɛnni cogoya o data ɲɛfɔlen ye.

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

A ye collapse.js sɔrɔ

Plugin flexible min bɛ baara Kɛ ni kalasi damadɔ ye walasa ka toggle kɛcogo nɔgɔn.

Misaliya

Butɔn minnu bɛ duguma, olu digi walasa ka fɛn wɛrɛ jira ani k’a dogo kalanso caman yeli fɛ:

• .collapsekɔnɔkow bɛ dogo
• .collapsingbɛ waleya fɛn caman tigɛli waatiw la
• .collapse.inbɛ kɔnɔkow jira

Aw bɛ se ka baara kɛ ni jɛgɛnsira ye ni o fɛn hrefye, walima ni butɔni ye min bɛ ni o fɛn data-targetye. O ko fila bɛɛ la, a data-toggle="collapse"wajibiyalen don.

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

A’ ye collapse behavior default janya walasa ka accordion dɔ dilan ni panneau component ye.

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

A fana bɛ se ka swap out .panel-bodys ni .list-groups.

Baarakɛcogo

Collapse plugin bɛ baara Kɛ ni kala damadɔ ye walasa ka girinmanw kɔrɔtacogo ɲɛnabɔ:

• .collapsebɛ kɔnɔkow dogo
• .collapse.inbɛ kɔnɔkow jira
• .collapsingbɛ fara a kan ni tɛmɛsira daminɛna, ka bɔ ni a banna

O kalanw bɛ se ka sɔrɔ component-animations.less.

Donanw ka fɛnɲɛnɛmaw fɛ

Dɔrɔn ka fara data-toggle="collapse"ani a data-targetkan element (fɛn) kan walasa ka automatiquement assign control de un collapsible element. Attribut data-targetbɛ sɔn CSS sugandili dɔ ma walasa ka collapse (dakun) in waleya. Aw ye aw jija ka kalasi fara fɛn dɔ kan min bɛ collapsese ka wuli. N'i b'a fɛ a ka da wuli, i ka kalansen wɛrɛ fara a kan in.

Walasa ka kulu ɲɛnabɔli min bɛ i n’a fɔ akordeyɔn, o fara kunnafoni-falen-falen-falen-falen-falen kan, i ka kunnafoni-falen-falen-falen-falen-falen-falen fara a kan data-parent="#selector". Aw ye demo lajɛ walasa ka nin ye wale la.

JavaScript fɛ

A bɛ se ka baara kɛ ni bolo ye ni:

$('.collapse').collapse()

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-parent="".

Fɛɛrɛw

.collapse(options)

A bɛ i ka kɔnɔkow baara i n’a fɔ fɛn min bɛ se ka da ɲɔgɔn kan. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.

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

.collapse('toggle')

A bɛ fɛn dɔ wuli ka bɔ a nɔ na ka taa jira walima ka dogo. A bɛ Segin welebaga ma sani fɛn min bɛ Se ka Dabɔ o ka Jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.collapsewalima hidden.bs.collapseko kɛlen ka Kɛ).

.collapse('show')

A bɛ fɛn dɔ jira min bɛ se ka wuli. A bɛ Segin welebaga ma sani fɛn min bɛ Se ka Dabɔ o ka Jira tiɲɛ na (o kɔrɔ ye ko sani ko shown.bs.collapsein ka Kɛ).

.collapse('hide')

A bɛ fɛn dɔ dogo min bɛ Se ka Dabɔ. A bɛ Segin welebaga ma sani fɛn min bɛ Se ka Dabɔ o ka dogo tiɲɛ na (o kɔrɔ ye ko sani ko hidden.bs.collapsein ka Kɛ).

Ko minnu kɛra

Bootstrap ka collapse class bɛ ko damadɔw bɔ kɛnɛ kan ka ɲɛsin hooking into collapse functionality ma.

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

Carrusel karosel.js

Slide jiracogo yɔrɔ dɔ min bɛ kɛ ka bisikili kɛ fɛnw fɛ, i n’a fɔ carousel. Nested carousels tɛ dɛmɛ sɔrɔ.

Misaliw

Tɛmɛnen Nata

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

Sɛbɛn minnu bɛ se ka kɛ i yɛrɛ sago ye

aw bɛ sɛbɛnniw fara aw ka slayidiw kan nɔgɔya la ni .carousel-captionfɛn ye min bɛ fɛn o fɛn kɔnɔ .item. HTML sugandilen o fɛn bɛ Se ka Kɛ, o bɛɛ Blà yen k'a Labɛn a yɛrɛma ani k'a Labɛn.

Slide labeli fɔlɔ

Nulla vitae elit libero, o ye furakisɛ ye min bɛ wele ko pharetra augue mollis interdum.

Slide label filanan

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit.

Slide label sabanan

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Tɛmɛnen Nata

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

Baarakɛcogo

Carousel caman bɛ sɔrɔ

Carousels bɛ baara kɛ ni an ye min idbɛ kɛnɛma minɛn kan (the .carousel) walasa carousel controls ka baara kɛ ka ɲɛ. Ni aw bɛ carousel caman fara a kan, walima ni aw bɛ carousel dɔ Changer id, aw ye aw jija ka kunnafoni kuraw sɔrɔ minnu bɛ tali kɛ o ko la.

Donanw ka fɛnɲɛnɛmaw fɛ

Baara kɛ ni data attributes ye walasa ka carousel jɔyɔrɔ kɔlɔsi nɔgɔya la. data-slidebɛ sɔn daɲɛ kolomaw ma prevwalima next, o min bɛ slide jɔyɔrɔ Changer ka kɛɲɛ n’a jɔyɔrɔ ye sisan. O cogo kelen na, baara kɛ ni data-slide-toka slide index raw tɛmɛ ka taa carousel data-slide-to="2", o bɛ slide jɔyɔrɔ wuli ka taa index kɛrɛnkɛrɛnnen dɔ la min bɛ daminɛ ni0 .

O data-ride="carousel"jogo bɛ Kɛ ka carousel dɔ taamaʃyɛn Kɛ i n'a fɔ animation (ɲɛnamaya) k'a Daminɛ ɲɛ doni na. A tɛ se ka baara kɛ ni (redundant ani unnecessary) JavaScript daminɛcogo jɛlen ye carousel kelen na.

JavaScript fɛ

Aw bɛ carousel wele ni bolo ye ni:

$('.carousel').carousel()

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-interval="".

Fɛɛrɛw

.carousel(options)

A bɛ carousel daminɛ ni options options ye objectani ka cycle daminɛ fɛnw fɛ.

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

.carousel('cycle')

A bɛ cycle kɛ carousel fɛnw kɔnɔ ka bɔ numan fɛ ka taa kinin fɛ.

.carousel('pause')

A bɛ carousel bali ka boli ka tɛmɛ fɛnw fɛ.

.carousel(number)

A bɛ carousel cycle kɛ ka taa frame kɛrɛnkɛrɛnnen dɔ la (0 basigilen, a bɛ tali kɛ array dɔ la).

.carousel('prev')

Sikiliw bɛ taa fɛn tɛmɛnen na.

.carousel('next')

Sikiliw bɛ taa fɛn nata la.

Ko minnu kɛra

Bootstrap ka carousel kalan bɛ ko fila jira ka ɲɛsin hooking ka carousel baarakɛcogo ma.

O ko fla bɛɛ bɛ ni nin nafa wɛrɛw ye:

• direction: Karɔsi bɛ sɛgɛn sira min fɛ (o "left"walima "right").
• relatedTarget: DOM yɔrɔ min bɛ ka sɛgɛn ka don a nɔ na i n’a fɔ fɛn min bɛ baara kɛ.

Karosel ko k��lenw bɛɛ bɛ Fɔ karɔsi yɛrɛ la (o kɔrɔ ye ko <div class="carousel">).

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

Affix.js bɛ fara a kan

Misaliya

Affix plugin position: fixed;bɛ wuli ka bɔ, ka nɔ min sɔrɔ ni position: sticky;. Subnavigation min bɛ kinin fɛ, o ye affix plugin jiracogo ɲɛnama ye.

Baarakɛcogo

Baara kɛ ni affix plugin ye data attributes fɛ walima i yɛrɛ bolo ni i yɛrɛ ka JavaScript ye. O ko fila bɛɛ la, i ka kan ka CSS di i ka kɔnɔkow nɔrɔlenw jɔyɔrɔ n’u bonya kama.

Kɔlɔsili: Aw kana baara kɛ ni affix plugin ye fɛn dɔ kan min bɛ fɛn dɔ kɔnɔ min jɔyɔrɔ ka bon kosɛbɛ, i n’a fɔ koloma min bɛ sama walima min bɛ gɛlɛya, k’a sababu kɛ Safari jiracogo bug ye .

Posisiyɔn sɔrɔli CSS fɛ

Affix plugin bɛ wuli ka bɔ kala saba cɛ, u kelen-kelen bɛɛ bɛ cogoya kɛrɛnkɛrɛnnen dɔ jira: .affix, .affix-top, ani .affix-bottom. Aw ka kan ka cogoyaw di, fo ni position: fixed;on ye.affix , walasa o kàlan ninnu i yɛrɛ (min yɛrɛmahɔrɔnyalen don nin 'plugin in na) walasa ka jɔyɔrɔ yɛrɛyɛrɛw Labɛn.

Affix plugin bɛ baara kɛ cogo min na, o filɛ nin ye:

1. Walasa ka daminɛ, plugin bɛ dɔ fara a kan.affix-top k’a Jira ko fɛn in bɛ a jɔyɔrɔ sanfɛla la. Nin waati in na, CSS jɔyɔrɔko si tɛ wajibiya.
2. I b’a fɛ ka fɛn min nɔrɔ o yɔrɔ la, n’i y’o tɛmɛ, o ka kan ka nɔrɔli yɛrɛ daminɛ. Nin ye yɔrɔ ye min bɛ fɛnw falen- .affixfalen .affix-topani ka sigi position: fixed;(min bɛ di Bootstrap ka CSS fɛ).
3. Ni duguma-dakun dɔ ɲɛfɔra, n’i bɛ tɛmɛ a kan, o ka kan ka bila a nɔ na .affixni .affix-bottom. Ikomi ofisiw ye ŋaniyataama ye, kelen sigili b’a ɲini i fɛ i ka CSS bɛnnen sigi. O cogo la, aw bɛ dɔ fara a kan position: absolute;ni a mago bɛ a la. Plugin bɛ baara Kɛ ni data attribute walima JavaScript sugandilen ye walasa k’a Dɔn a bɛ Se ka fɛn in Blà yɔrɔ min na ka Bɔ yen.

Aw bɛ sanfɛla fɛɛrɛw labato walasa k’aw ka CSS sigi baarakɛcogo sugandilenw dɔ la kelen na min bɛ duguma.

Donanw ka fɛnɲɛnɛmaw fɛ

Walasa ka affix kɛcogo fara nɔgɔya la fɛn o fɛn kan, data-spy="affix"i b’a fɛ ka fɛn min sɛgɛsɛgɛ dɔrɔn, i ka o fara a kan. Baara kɛ ni offsets ye walasa ka a ɲɛfɔ waati min na i ka kan ka fɛn dɔ pinɛ toggle.

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

JavaScript fɛ

Affix plugin wele JavaScript fɛ:

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

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-offset-top="200".

Fɛɛrɛw

.affix(options)

A bɛ i ka kɔnɔkow baara i n’a fɔ kɔnɔkow faralen ɲɔgɔn kan. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.

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

.affix('checkPosition')

A bɛ farankan cogoya jatebɔ kokura ka da fɛnw hakɛw, u jɔyɔrɔ ani u sɛrɛkili jɔyɔrɔ kan minnu bɛ tali kɛ o ko la. , .affix, .affix-topani .affix-bottomkalansenw bɛ Fàra walima ka Bɔ kɔnɔko nɔrɔlenw kan ka Kɛɲɛ ni cogoya kura ye. O fɛɛrɛ in ka kan ka wele tuma o tuma ni kɔnɔko nɔrɔlen hakɛw walima fɛn laɲininen hakɛw b’a la ka Changé, walasa ka kɔnɔko nɔrɔlenw jɔyɔrɔ ɲuman sɔrɔ.

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

Ko minnu kɛra

Bootstrap ka affix plugin bɛ ko damadɔw Bɔ kɛnɛ kan ka ɲɛsin affix baarakɛcogo ma.