ꯑꯣꯚꯔꯚꯤꯌꯨ ꯇꯧꯕꯥ꯫

ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯅꯠꯠꯔꯒꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯥ꯫

ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡ ꯑꯁꯤ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯑꯣꯏꯅꯥ (ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ *.jsꯐꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ), ꯅꯠꯠꯔꯒꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ( bootstrap.jsꯁꯤꯖꯤꯟꯗꯨꯅꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯤꯅꯤꯐꯥꯏ ꯇꯧꯔꯕꯥ bootstrap.min.js) ꯌꯥꯑꯣꯍꯅꯕꯥ ꯌꯥꯏ꯫

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ꯫

ꯅꯍꯥꯛꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯃꯠꯇꯥ ꯏꯗꯅꯥ ꯃꯥꯔꯀꯑꯥꯞ APIꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯃꯄꯨꯡꯐꯥꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯄ꯭ꯂꯒꯏꯟ ꯄꯨꯝꯅꯃꯛ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫ ꯃꯁꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯑꯍꯥꯅꯕꯥ ꯊꯥꯛꯀꯤ APIꯅꯤ ꯑꯃꯁꯨꯡ ꯄ꯭ꯂꯒꯏꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯅꯍꯥꯛꯀꯤ ꯑꯍꯥꯅꯕꯥ ꯋꯥꯈꯜꯂꯣꯟ ꯑꯣꯏꯒꯗꯕꯅꯤ꯫

ꯍꯥꯌꯕꯗꯤ, ꯐꯤꯚꯝ ꯈꯔꯗꯥ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯁꯤ ꯑꯣꯐ ꯇꯧꯕꯥ ꯑꯁꯤ ꯄꯥꯝꯅꯔꯀꯄꯥ ꯌꯥꯏ꯫ ꯃꯔꯝ ꯑꯗꯨꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ data-api. ꯃꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯒꯨꯝꯅꯥ ꯎꯕꯥ ꯐꯪꯏ:

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

ꯅꯠꯠꯔꯒꯥ, ꯑꯀꯛꯅꯕꯥ ꯄ꯭ꯂꯒꯏꯟ ꯑꯃꯗꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯥ, ꯄ꯭ꯂꯒꯏꯟ ꯑꯗꯨꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ ꯅꯦꯃꯁ꯭ꯄꯦꯁ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯗꯦꯇꯥ-ꯑꯦꯄꯤꯑꯥꯏ ꯅꯦꯃꯁ꯭ꯄꯦꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯒꯨꯝꯅꯥ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ:

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

ꯄ꯭ꯔꯣꯒ꯭ꯔꯥꯃꯦꯇꯤꯛ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ

ꯑꯩꯈꯣꯌꯅꯥ ꯃꯁꯤꯃꯁꯨ ꯊꯥꯖꯩ ꯃꯗꯨꯗꯤ ꯑꯗꯣꯝꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯄ꯭ꯂꯒꯏꯟ ꯄꯨꯝꯅꯃꯛ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯗꯕꯅꯤ꯫ ꯄꯕ꯭ꯂꯤꯛ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯁꯤꯡ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯁꯤꯉ꯭ꯒꯜ, ꯆꯦꯟ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯃꯦꯊꯗꯁꯤꯡꯅꯤ, ꯑꯃꯁꯨꯡ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯈꯣꯃꯖꯤꯅꯕꯥ ꯑꯗꯨ ꯍꯜꯂꯀꯏ꯫

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

ꯃꯦꯊꯗ ꯄꯨꯝꯅꯃꯛꯅꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯄꯁꯅꯁꯤꯡꯒꯤ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯃꯥ, ꯑꯀꯛꯅꯕꯥ ꯃꯦꯊꯗ ꯑꯃꯗꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯕꯥ ꯁ꯭ꯠꯔꯤꯡ ꯑꯃꯥ, ꯅꯠꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯠꯇꯥ (ꯗꯤꯐꯣꯜꯇ ꯕꯤꯍꯦꯕꯤꯌꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄ꯭ꯂꯒꯏꯟ ꯑꯃꯥ ꯍꯧꯗꯣꯀꯄꯥ) ꯌꯥꯕꯥ ꯇꯥꯏ:

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

Constructorꯄ꯭ꯂꯒꯏꯟ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯔꯣ ꯀꯟꯁꯠꯔꯛꯁꯟ ꯑꯗꯨꯁꯨ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯃꯗꯥ ꯑꯦꯛꯁꯄꯣꯖ ꯇꯧꯏ : $.fn.popover.Constructor. ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯄ꯭ꯂꯒꯏꯟ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯐꯪꯅꯤꯡꯂꯕꯗꯤ, ꯃꯗꯨ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯒꯤ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯂꯧꯊꯣꯀꯎ: $('[rel="popover"]').data('popover').

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯁꯦꯇꯤꯡꯁꯤꯡ꯫

Constructor.DEFAULTSꯄ꯭ꯂꯒꯏꯟ ꯑꯃꯒꯤ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯗꯨ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯄ꯭ꯂꯒꯏꯟ ꯑꯃꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯁꯦꯇꯤꯡꯁꯤꯡ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ :

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

ꯀꯅꯐ꯭ꯂꯤꯛꯇ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯇꯣꯞꯄꯥ UI ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯐꯤꯚꯃꯁꯤꯡ ꯑꯁꯤꯗꯥ, ꯅꯦꯃꯁ꯭ꯄꯦꯁ ꯀꯣꯂꯤꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯃꯇꯝ ꯃꯇꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯊꯣꯀꯄꯥ ꯌꯥꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯁꯤ ꯑꯣꯏꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ .noConflictꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯔꯤꯚꯔꯠ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯄ꯭ꯂꯒꯏꯟ ꯑꯗꯨꯗꯥ ꯀꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤꯅꯥ ꯑꯌꯥꯝꯕꯥ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡꯒꯤ ꯑꯈꯟꯅꯕꯥ ꯑꯦꯛꯁꯅꯁꯤꯡꯒꯤꯗꯃꯛ ꯀꯁ꯭ꯇꯝ ꯏꯚꯦꯟꯇꯁꯤꯡ ꯄꯤꯔꯤ꯫ ꯃꯍꯧꯁꯥꯅꯥ, ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ ꯏꯅꯐꯤꯅꯤꯇꯤꯕ ꯑꯃꯁꯨꯡ ꯄꯥꯁ꯭ꯠ ꯄꯥꯔꯇꯤꯁꯤꯄꯦꯜ ꯃꯑꯣꯡ ꯑꯃꯗꯥ ꯂꯥꯀꯏ - ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯏꯅꯐꯤꯅꯤꯇꯤꯕ (ex. show) ꯑꯁꯤ ꯊꯧꯗꯣꯛ ꯑꯃꯥ ꯍꯧꯕꯗꯥ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯏ, ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯄꯥꯁ꯭ꯠ ꯄꯥꯔꯇꯤꯁꯤꯄꯦꯜ ꯃꯑꯣꯡ (ex. shown) ꯑꯁꯤ ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯂꯣꯏꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯏ꯫

3.0.0ꯗꯒꯤ ꯍꯧꯅꯥ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯏꯚꯦꯟꯇ ꯄꯨꯝꯅꯃꯛ ꯅꯦꯃꯁ꯭ꯄꯦꯁ ꯇꯧꯏ꯫

ꯏꯅꯐꯤꯅꯤꯇꯤꯕ ꯏꯚꯦꯟꯇ ꯄꯨꯝꯅꯃꯛꯅꯥ preventDefaultꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯄꯤꯔꯤ꯫ ꯃꯁꯤꯅꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯍꯧꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯑꯦꯛꯁꯦꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯊꯤꯡꯕꯒꯤ ꯇꯧꯕꯥ ꯉꯝꯕꯗꯨ ꯄꯤ꯫

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

ꯁꯦꯅꯤꯇꯥꯏꯖꯔ ꯇꯧꯕꯥ꯫

ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯣꯄꯣꯚꯔꯁꯤꯡꯅꯥ HTML ꯌꯥꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯁꯦꯅꯤꯇꯥꯏꯖ ꯇꯧꯅꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯕꯤꯜꯇ-ꯏꯟ ꯁꯦꯅꯤꯇꯥꯏꯖꯔ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯗꯤꯐꯣꯜꯇ whiteListꯚꯦꯜꯌꯨ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

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

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯁꯤꯗꯥ ꯑꯅꯧꯕꯥ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ whiteListꯅꯍꯥꯛꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯇꯧꯕꯥ ꯌꯥꯏ:

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)

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯦꯅꯤꯇꯥꯏꯖꯔ ꯑꯁꯤ ꯕꯥꯏꯄꯥꯁ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯀꯠꯊꯣꯛꯂꯕꯥ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ DOMPurify , ꯅꯍꯥꯛꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯇꯧꯒꯗꯕꯅꯤ:

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

ꯚꯔꯖꯟ ꯅꯝꯕꯔꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ jQuery ꯄ꯭ꯂꯒꯏꯟ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯚꯔꯖꯟ ꯑꯁꯤ VERSIONꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯀꯟꯁꯠꯔꯛꯁꯟ ꯑꯗꯨꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯦꯛꯁꯦꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯇꯨꯂꯇꯤꯞ ꯄ꯭ꯂꯒꯏꯅꯒꯤꯗꯃꯛ:

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

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯈꯟꯅꯕꯥ ꯐꯣꯂꯕꯦꯛ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡ ꯑꯁꯤ ꯃꯔꯨꯑꯣꯏꯅꯥ ꯒ꯭ꯔꯦꯁ ꯑꯣꯏꯅꯥ ꯍꯜꯂꯀꯄꯥ ꯉꯃꯗꯦ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯦꯁ ꯑꯁꯤꯗꯥ ꯌꯨꯖꯔ ꯑꯦꯛꯁꯄꯤꯔꯤꯑꯦꯟꯁꯀꯤ ꯃꯇꯥꯡꯗꯥ ꯋꯥꯈꯜ ꯇꯥꯔꯕꯗꯤ, <noscript>ꯐꯤꯚꯝ ꯑꯗꯨ (ꯑꯃꯁꯨꯡ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯒꯗꯒꯦ) ꯑꯗꯨ ꯅꯍꯥꯛꯀꯤ ꯌꯨꯖꯔꯁꯤꯡꯗꯥ ꯁꯟꯗꯣꯛꯅꯥ ꯇꯥꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ, ꯑꯃꯁꯨꯡ/ꯅꯠꯠꯔꯒꯥ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯀꯁ꯭ꯇꯝ ꯐꯣꯂꯕꯦꯀꯁꯤꯡ ꯍꯥꯄꯀꯗꯕꯅꯤ꯫

ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ.ꯖꯦ.ꯑꯦꯁ

ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ꯫

ꯏꯆꯝ ꯆꯝꯕꯥ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯏꯐꯦꯛꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ, transition.jsꯑꯇꯣꯞꯄꯥ JS ꯐꯥꯏꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ (ꯅꯠꯔꯒꯥ ꯃꯤꯅꯤꯐꯥꯏꯗ) ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ bootstrap.js, ꯃꯁꯤ ꯌꯥꯑꯣꯍꯅꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯦ—ꯃꯁꯤ ꯍꯥꯟꯅꯅꯥ ꯂꯩꯔꯦ꯫

ꯃꯅꯨꯡꯗꯥ ꯀꯔꯤ ꯂꯩꯔꯤꯕꯒꯦ꯫

Transition.js ꯑꯁꯤ transitionEndꯊꯧꯗꯣꯀꯁꯤꯡꯒꯤꯗꯃꯛ ꯕꯦꯁꯤꯛ ꯍꯦꯜꯄꯔ ꯑꯃꯅꯤ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯏꯃꯨꯂꯦꯇꯔ ꯑꯃꯅꯤ꯫ ꯃꯁꯤ ꯑꯇꯣꯞꯄꯥ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯁꯄꯣꯔꯠ ꯌꯦꯡꯁꯤꯟꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯍꯦꯟꯖꯤꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯕꯥ꯫

transition.jsꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯃꯁꯤ ꯂꯣꯗ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯅꯠꯠꯔꯒꯥ bootstrap.jsꯅꯠꯠꯔꯒꯥ bootstrap.min.js, ꯀꯦꯁ ꯑꯗꯨꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ) ꯂꯥꯛꯀꯗꯕꯅꯤ :

$.support.transition = false

ꯃꯣꯗꯦꯂꯁꯤꯡ ꯃꯣꯗꯜ.ꯖꯦ.ꯑꯦꯁ

ꯃꯣꯗꯦꯂꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯠꯔꯤꯃꯂꯥꯏꯟ ꯇꯧꯏ, ꯑꯗꯨꯕꯨ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ, ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯦꯝꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯃꯁꯨꯡ ꯁ꯭ꯃꯥꯔꯠ ꯗꯤꯐꯣꯜꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯗꯥꯏꯂꯣꯒ ꯄ꯭ꯔꯣꯃꯞꯇꯁꯤꯡꯅꯤ꯫

HTML5ꯅꯥ ꯃꯁꯤꯒꯤ ꯁꯦꯃꯦꯟꯇꯤꯛꯁ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯗꯤꯐꯥꯏꯟ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ, autofocusHTML ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯁꯤꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯃꯣꯗꯦꯂꯁꯤꯡꯗꯥ ꯏꯐꯦꯛꯇ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯏꯐꯦꯛꯇ ꯑꯗꯨ ꯐꯪꯅꯕꯒꯤꯗꯃꯛ, ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯈꯔꯥ ꯁꯤꯖꯤꯟꯅꯧ:

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

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯁ꯭ꯇꯦꯇꯤꯛ ꯑꯣꯏꯕꯥ ꯈꯨꯗꯝ꯫

ꯐꯨꯇꯔꯗꯥ ꯍꯦꯗ, ꯕꯣꯗꯤ, ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯅꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯌꯥꯑꯣꯕꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯔꯕꯥ ꯃꯣꯗꯜ ꯑꯃꯥ꯫

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

ꯂꯥꯏꯚ ꯗꯦꯃꯣ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯕꯇꯟ ꯑꯗꯨ ꯀ꯭ꯂꯤꯛ ꯇꯧꯗꯨꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯃꯣꯗꯜ ꯑꯃꯥ ꯇꯣꯒꯜ ꯇꯧ꯫ ꯃꯁꯤ ꯃꯈꯥꯗꯥ ꯁ꯭ꯂꯥꯏꯗ ꯇꯧꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯄꯦꯖꯒꯤ ꯃꯊꯛꯇꯒꯤ ꯐꯤꯗ ꯏꯟ ꯇꯧꯒꯅꯤ꯫

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

ꯑꯣꯄꯁꯅꯦꯜ ꯁꯥꯏꯖꯁꯤꯡ꯫

ꯃꯣꯗꯦꯂꯁꯤꯡ ꯑꯁꯤ ꯑꯣꯄꯁꯅꯦꯜ ꯁꯥꯏꯖ ꯑꯅꯤ ꯂꯩ, ꯃꯁꯤꯗꯥ ꯊꯝꯅꯕꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ .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>

ꯑꯦꯅꯤꯃꯦꯁꯟ ꯂꯧꯊꯣꯀꯎ꯫

ꯌꯦꯡꯅꯕꯒꯤꯗꯃꯛꯇꯥ ꯐꯦꯗ ꯏꯟ ꯇꯧꯕꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁꯨꯞꯅꯒꯤ ꯊꯣꯀꯄꯥ ꯃꯣꯗꯦꯂꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ, .fadeꯅꯍꯥꯛꯀꯤ ꯃꯣꯗꯦꯜ ꯃꯥꯔꯀꯑꯄꯇꯒꯤ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯎ꯫

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

ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫

ꯃꯣꯗꯜ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯒꯤ ꯀꯥꯟꯅꯕꯥ ꯂꯧꯅꯕꯒꯤꯗꯃꯛ, .rowꯃꯅꯨꯡꯗꯥ s ꯈꯛꯇꯃꯛ ꯅꯦꯁ꯭ꯠ ꯇꯧ .modal-bodyꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯅꯣꯔꯃꯦꯜ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

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

ꯇ꯭ꯔꯤꯒꯔ ꯕꯇꯅꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯃꯣꯗꯦꯜ ꯀꯟꯇꯦꯟꯇ ꯍꯣꯡꯗꯣꯀꯄꯥ꯫

ꯄꯨꯝꯅꯃꯛꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯃꯣꯗꯜ ꯑꯗꯨ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ, ꯈꯔꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯣꯇꯅꯁꯤꯡꯒꯤ ꯈꯣꯉꯕꯨ ꯑꯃꯥ ꯂꯩꯕ꯭ꯔꯥ? ꯀꯔꯝꯕꯥ ꯕꯇꯟ ꯑꯗꯨ ꯀ꯭ꯂꯤꯛ ꯇꯧꯈꯤꯕꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯣꯗꯦꯂꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ event.relatedTargetꯑꯃꯁꯨꯡ HTML data-*ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ( jQuery ꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯣꯏꯊꯣꯀꯄꯥ ꯌꯥꯕꯥ) ꯁꯤꯖꯤꯟꯅꯧ꯫ 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)
})

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯃꯣꯗꯜ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯗꯤꯃꯥꯟꯗ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ, ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯃꯁꯤꯅꯥ ꯇꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯗꯤꯐꯣꯜꯇ ꯁ꯭ꯛꯔꯣꯂꯤꯡ ꯕꯤꯍꯦꯕꯤꯌꯔꯗꯁꯨ ꯍꯥꯄꯆꯤꯜꯂꯤ .modal-openꯑꯃꯁꯨꯡ <body>ꯃꯣꯗꯦꯂꯒꯤ .modal-backdropꯃꯄꯥꯟꯗꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯃꯣꯗꯦꯂꯁꯤꯡ ꯊꯥꯗꯣꯛꯅꯕꯥ ꯀ꯭ꯂꯤꯛ ꯑꯦꯔꯤꯌꯥ ꯑꯃꯥ ꯄꯤꯅꯕꯥ ꯑꯦ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯏ꯫

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯏꯕꯥ ꯌꯥꯗꯅꯥ ꯃꯣꯗꯜ ꯑꯃꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯧꯔꯣ꯫ data-toggle="modal"ꯀꯟꯠꯔꯣꯂꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ, ꯕꯇꯟ ꯑꯃꯒꯨꯝꯅꯥ, ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ data-target="#foo"ꯅꯠꯠꯔꯒꯥ href="#foo"ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ ꯑꯀꯛꯅꯕꯥ ꯃꯣꯗꯦꯜ ꯑꯃꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯥ ꯁꯦꯠ ꯇꯧ꯫

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

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

myModalꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯃꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ id ꯂꯩꯕꯥ ꯃꯣꯗꯜ ꯑꯃꯥ ꯀꯧꯕꯤꯌꯨ :

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-, data-backdrop="".

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

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

.modal(options)

ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯃꯣꯗꯦꯜ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯧꯏ꯫ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯌꯥꯔꯦ object.

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

.modal('toggle')

ꯃꯣꯗꯜ ꯑꯃꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯃꯣꯗꯜ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.modalꯅꯠꯠꯔꯒꯥ hidden.bs.modalꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫

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

.modal('show')

ꯃꯣꯗꯜ ꯑꯃꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯍꯥꯡꯗꯣꯀꯏ꯫ ꯃꯣꯗꯜ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.modalꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫

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

.modal('hide')

ꯃꯣꯗꯜ ꯑꯃꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯃꯣꯗꯜ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ hidden.bs.modalꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫

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

.modal('handleUpdate')

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ ꯂꯥꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯁ꯭ꯛꯔꯣꯂꯕꯥꯔ ꯑꯃꯥ ꯀꯥꯎꯟꯇꯔ ꯇꯧꯅꯕꯥ ꯃꯣꯗꯦꯂꯒꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯦꯃꯗꯣꯛ-ꯁꯦꯃꯖꯤꯟ ꯇꯧꯏ, ꯃꯁꯤꯅꯥ ꯃꯣꯗꯦꯜ ꯑꯗꯨ ꯂꯦꯡꯗꯅꯥ ꯂꯩꯍꯅꯒꯅꯤ꯫

ꯃꯣꯗꯦꯂꯒꯤ ꯑꯋꯥꯡꯕꯥ ꯑꯗꯨ ꯍꯥꯡꯗꯣꯛꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯍꯣꯡꯂꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯈꯛꯇꯃꯛ ꯃꯊꯧ ꯇꯥꯏ꯫

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯣꯗꯦꯜ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯃꯣꯗꯦꯜ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯗꯥ ꯍꯨꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯊꯧꯗꯣꯛ ꯈꯔꯥ ꯑꯦꯛꯁꯄꯣꯖ ꯇꯧꯏ꯫

ꯃꯣꯗꯦꯂꯒꯤ ꯊꯧꯗꯣꯛ ꯄꯨꯝꯅꯃꯛ ꯃꯣꯗꯦꯜ ꯃꯁꯥꯃꯛꯇꯗꯥ (ꯑꯔꯕꯥꯟ <div class="modal">) ꯐꯥꯏꯔ ꯇꯧꯏ꯫

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

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ.ꯖꯦ.ꯑꯦꯁ

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯅꯦꯚꯕꯥꯔ, ꯇꯦꯕꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯄꯤꯂꯁꯤꯡ ꯌꯥꯑꯣꯅꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯆꯥꯎꯔꯥꯛꯅꯥ ꯄꯣꯠ ꯑꯃꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯅꯕꯕꯔ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ꯫

ꯄꯤꯂꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ꯫

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

.openꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ, ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨꯗꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯇꯣꯒꯜ ꯇꯧꯗꯨꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯀꯟꯇꯦꯟꯇ (ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡ) ꯇꯣꯒꯜ ꯇꯧꯏ꯫

ꯃꯣꯕꯥꯏꯜ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ, ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯃꯥ ꯍꯥꯡꯗꯣꯀꯄꯅꯥ .dropdown-backdropꯃꯦꯅꯨꯒꯤ ꯃꯄꯥꯟꯗꯥ ꯇꯦꯞ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡ ꯂꯣꯗ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯇꯦꯞ ꯑꯦꯔꯤꯌꯥ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ, ꯃꯁꯤ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯑꯥꯏ.ꯑꯣ.ꯑꯦꯁ. ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯑꯣꯄꯟ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯗꯒꯤ ꯇꯣꯉꯥꯅꯕꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯗꯥ ꯍꯣꯡꯗꯣꯀꯄꯗꯥ ꯃꯣꯕꯥꯏꯂꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯇꯦꯞ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯈꯪꯖꯤꯅꯒꯗꯕꯥ: data-toggle="dropdown"ꯑꯦꯞꯂꯤꯀꯦꯁꯅꯒꯤ ꯊꯥꯛ ꯑꯃꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡ ꯂꯣꯗ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯁꯤ ꯊꯥꯖꯕꯥ ꯊꯝꯂꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯍꯥꯌꯕꯁꯤ ꯑꯐꯕꯥ ꯋꯥꯈꯜꯂꯣꯟ ꯑꯃꯅꯤ꯫

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

data-toggle="dropdown"ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯃꯥ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ ꯂꯤꯉ꯭ꯛ ꯅꯠꯠꯔꯒꯥ ꯕꯇꯟ ꯑꯃꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

ꯂꯤꯉ꯭ꯛ ꯕꯇꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ URLꯁꯤꯡ ꯑꯗꯨ ꯂꯦꯡꯗꯅꯥ ꯊꯝꯅꯕꯒꯤꯗꯃꯛ, data-targetꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ 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>

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯀꯜ ꯇꯧꯕꯤꯌꯨ:

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯃꯠꯇ ꯅꯠꯇꯦ

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

$().dropdown('toggle')

ꯑꯄꯤꯕꯥ ꯅꯦꯚꯕꯥꯔ ꯅꯠꯠꯔꯒꯥ ꯇꯦꯕꯜ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯃꯒꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯇꯣꯒꯜ ꯇꯧꯏ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯏꯚꯦꯟꯇ ꯄꯨꯝꯅꯃꯛ .dropdown-menu’ ꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯏꯚꯦꯟꯇ ꯄꯨꯝꯅꯃꯛꯇꯥ relatedTargetꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯃꯥ ꯂꯩ, ꯃꯁꯤꯒꯤ ꯚꯦꯜꯌꯨ ꯑꯁꯤ ꯇꯣꯒꯂꯤꯡ ꯑꯦꯉ꯭ꯀꯔ ꯑꯦꯂꯤꯃꯦꯟꯇꯅꯤ꯫

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

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯥꯏ scrollspy.js

ꯅꯕꯕꯥꯔꯗꯥ ꯈꯨꯗꯝ꯫

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯥꯏ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤ ꯁ꯭ꯛꯔꯣꯜ ꯄꯣꯖꯤꯁꯅꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯅꯦꯚ ꯇꯥꯔꯒꯦꯇꯁꯤꯡ ꯑꯣꯇꯣꯃꯦꯇꯦꯗ ꯑꯣꯏꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯅꯕꯒꯤꯗꯃꯛꯇꯅꯤ꯫ ꯅꯦꯚꯕꯥꯔꯒꯤ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯃꯐꯝ ꯑꯗꯨ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯇꯤꯕ ꯀ꯭ꯂꯥꯁ ꯍꯣꯡꯂꯀꯄꯥ ꯑꯗꯨ ꯌꯦꯡꯎ꯫ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯁꯕ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯁꯨ ꯍꯥꯏꯂꯥꯏꯠ ꯇꯧꯒꯅꯤ꯫

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯔꯤꯂꯦꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯄꯣꯖꯤꯁꯟ ꯄꯤꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯕꯒꯤ ꯃꯑꯣꯡ ꯑꯗꯨ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯣꯏꯔꯕꯁꯨ, ꯁ꯭ꯛꯔꯣꯂꯁꯄꯤꯅꯥ position: relative;ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯄꯥꯏ ꯇꯧꯔꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯑꯌꯥꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯁꯤꯅꯥ <body>. , ꯅꯠꯇꯕꯥ ꯑꯇꯩ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯥꯏ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ , ꯁꯦꯠ <body>ꯑꯃꯥ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯅꯒꯗꯕꯅꯤ ꯑꯃꯁꯨꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯒꯗꯕꯅꯤ꯫heightoverflow-y: scroll;

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯅꯍꯥꯛꯀꯤ ꯇꯣꯄꯕꯥꯔ ꯅꯦꯚꯤꯒꯦꯁꯟꯗꯥ ꯁ꯭ꯛꯔꯣꯂꯁꯄꯤ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯐꯖꯅꯥ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ, data-spy="scroll"ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯄꯥꯏ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ (ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯍꯧꯁꯥꯅꯥ ꯃꯁꯤ ꯑꯣꯏꯒꯅꯤ <body>). ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯀꯝꯄꯣꯅꯦꯟꯇ data-targetꯑꯃꯍꯦꯛꯇꯒꯤ ꯄꯦꯔꯦꯟꯇ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ID ꯅꯠꯠꯔꯒꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.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>

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯅꯍꯥꯛꯀꯤ CSSꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ position: relative;, ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤꯗꯥ ꯀꯧꯕꯤꯌꯨ:

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

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

.scrollspy('refresh')

DOM ꯗꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯧꯊꯣꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯁꯤꯖꯤꯟꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯔꯤꯐ꯭ꯔꯦꯁ ꯃꯦꯊꯗ ꯑꯗꯨ ꯑꯁꯨꯝꯅꯥ ꯀꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ:

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-, data-offset="".

ꯊꯧꯔꯃꯁꯤꯡ꯫

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

ꯇꯣꯒꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯇꯦꯕꯁꯤꯡ tab.js

ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯕꯁꯤꯡ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯁꯨ, ꯂꯣꯀꯦꯜ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯄꯦꯅꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯇꯧꯕꯗꯥ ꯊꯨꯅꯥ, ꯗꯥꯏꯅꯥꯃꯤꯛ ꯇꯦꯕ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯅꯦꯁ꯭ꯇꯦꯗ ꯇꯦꯕꯁꯤꯡ ꯑꯁꯤ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯇꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯇꯦꯕꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ (ꯇꯦꯕ ꯈꯨꯗꯤꯡꯃꯛ ꯑꯃꯃꯃꯗꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯃꯊꯧ ꯇꯥꯏ):

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

ꯅꯍꯥꯛꯅꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯇꯦꯕꯁꯤꯡ ꯑꯁꯤ ꯃꯑꯣꯡ ꯀꯌꯥꯗꯥ ꯑꯦꯛꯇꯤꯚ ꯇꯧꯕꯥ ꯌꯥꯏ:

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

ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯥ꯫

data-toggle="tab"ꯅꯍꯥꯛꯅꯥ ꯁꯨꯞꯅꯒꯤ ꯁ꯭ꯄꯦꯁꯤꯐꯥꯏ ꯇꯧꯗꯨꯅꯥ ꯅꯠꯠꯔꯒꯥ data-toggle="pill"ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯃꯠꯇꯥ ꯏꯗꯅꯥ ꯇꯦꯕ ꯅꯠꯠꯔꯒꯥ ꯄꯤꯜ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯃꯥ ꯑꯦꯛꯇꯤꯚ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ navꯇꯦꯕꯇꯥ ꯑꯃꯁꯨꯡ nav-tabsꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯅꯥ ulꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯇꯦꯕ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯒꯅꯤ , ꯑꯗꯨꯒꯥ navꯑꯃꯁꯨꯡ nav-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ꯇꯧꯅꯕꯥ, ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ .tab-pane. ꯑꯍꯥꯅꯕꯥ ꯇꯦꯕ ꯄꯦꯟ ꯑꯗꯨꯅꯥ .inꯑꯍꯥꯅꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯁꯨ ꯎꯕꯥ ꯐꯪꯍꯅꯒꯗꯕꯅꯤ꯫

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

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

$().tab

ꯇꯦꯕ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯃꯁꯨꯡ ꯀꯟꯇꯦꯟꯇ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯧꯏ꯫ ꯇꯦꯕ ꯑꯗꯨꯗꯥ DOMꯗꯥ ꯀꯟꯇꯦꯅꯔ ꯅꯣꯗ ꯑꯃꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯕꯥ ꯑꯃꯥ data-targetꯅꯠꯠꯔꯒꯥ ꯑꯃꯥ ꯂꯩꯒꯗꯕꯅꯤ꯫ hrefꯃꯊꯛꯀꯤ ꯈꯨꯗꯃꯁꯤꯡ ꯑꯁꯤꯗꯥ, ꯇꯦꯕꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯥ <a>ꯂꯣꯌꯅꯕꯥ sꯅꯤ꯫data-toggle="tab"

.tab('show')

ꯄꯤꯔꯤꯕꯥ ꯇꯦꯕ ꯑꯗꯨ ꯈꯅꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯎꯠꯂꯤ꯫ ꯃꯃꯥꯡꯗꯥ ꯈꯅꯈꯤꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯇꯦꯕ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯈꯅꯒꯠꯂꯕꯥ ꯑꯣꯏꯔꯀꯏ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯇꯦꯕ ꯄꯦꯟ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.tabꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯑꯅꯧꯕꯥ ꯇꯦꯕ ꯑꯃꯥ ꯎꯠꯄꯥ ꯃꯇꯃꯗꯥ, ꯊꯧꯗꯣꯀꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯣꯔꯗꯔ ꯑꯁꯤꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯐꯥꯏꯔ ꯇꯧꯏ:

1. hide.bs.tab(ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯗꯨꯗꯥ)
2. show.bs.tab(ꯌꯦꯡꯒꯗꯕꯥ ꯇꯦꯕ ꯑꯗꯨꯗꯥ)
3. hidden.bs.tab(ꯃꯃꯥꯡꯒꯤ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯗꯨꯗꯥ, ꯊꯧꯗꯣꯛ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯑꯗꯨꯃꯛ hide.bs.tab)
4. shown.bs.tab(ꯅꯧꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯍꯧꯖꯤꯛ ꯎꯠꯂꯤꯕꯥ ꯇꯦꯕ ꯑꯗꯨꯗꯥ, ꯊꯧꯔꯝ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯑꯗꯨꯃꯛ show.bs.tab)

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯇꯦꯕ ꯑꯃꯠꯇꯥ ꯍꯥꯟꯅꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯗ꯭ꯔꯕꯗꯤ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ 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
})

ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯇꯨꯂꯇꯤꯞ.ꯖꯦ.ꯑꯦꯁ

ꯖꯦꯁꯟ ꯐ꯭ꯔꯦꯃꯅꯥ ꯏꯕꯥ ꯑꯐꯕꯥ jQuery.tipsy ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯏꯊꯤꯜ ꯄꯤꯕꯥ; ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤ ꯑꯄꯗꯦꯠ ꯇꯧꯔꯕꯥ ꯚꯔꯖꯟ ꯑꯃꯅꯤ, ꯃꯁꯤꯅꯥ ꯏꯃꯦꯖꯁꯤꯡꯗꯥ ꯊꯥꯖꯕꯥ ꯊꯃꯗꯦ, ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ CSS3 ꯁꯤꯖꯤꯟꯅꯩ, ꯑꯃꯁꯨꯡ ꯂꯣꯀꯦꯜ ꯇꯥꯏꯇꯜ ꯁ꯭ꯇꯣꯔꯦꯖꯒꯤꯗꯃꯛꯇꯥ ꯗꯦꯇꯥ-ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯖꯤꯔꯣ-ꯂꯦꯡꯗꯕꯥ ꯇꯥꯏꯇꯂꯁꯤꯡ ꯂꯩꯕꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯎꯠꯂꯣꯏ꯫

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯌꯦꯡꯅꯕꯒꯤꯗꯃꯛ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯍꯣꯚꯔ ꯇꯧꯕꯤꯌꯨ:

ꯁ꯭ꯇꯦꯇꯤꯛ ꯇꯨꯂꯇꯤꯞ꯫

ꯑꯣꯄꯁꯟ ꯃꯔꯤ ꯂꯩ: ꯃꯊꯛ, ꯑꯔꯣꯏꯕꯥ, ꯃꯈꯥꯗꯥ, ꯑꯃꯁꯨꯡ ꯂꯦꯞꯇꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

ꯃꯥꯏꯀꯩ ꯃꯔꯤ꯫

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

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯇꯨꯂꯇꯤꯞ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯗꯤꯃꯥꯟꯗꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯃꯥꯔꯀꯑꯥꯞ ꯁꯦꯝꯃꯤ, ꯑꯃꯁꯨꯡ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯇ꯭ꯔꯤꯒꯔ ꯑꯦꯂꯤꯃꯦꯟꯇꯀꯤ ꯃꯇꯨꯡꯗꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯊꯝꯃꯤ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯇꯨꯂꯇꯤꯞ ꯑꯁꯤ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯤꯌꯨ:

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

ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯥ꯫

ꯇꯨꯂꯇꯤꯞ ꯑꯃꯒꯤꯗꯃꯛ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯑꯁꯤ dataꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯈꯛꯇꯅꯤ ꯑꯃꯁꯨꯡ titleHTML ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯇꯨꯂꯇꯤꯞ ꯑꯃꯥ ꯂꯩꯕꯥ ꯄꯥꯝꯃꯤ꯫ ꯇꯨꯂꯇꯤꯞ ꯑꯃꯒꯤ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯑꯁꯤ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯑꯣꯏ, ꯃꯁꯤꯗꯥ ꯄꯣꯖꯤꯁꯟ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯕꯁꯨ ꯌꯥꯏ (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, topꯄ꯭ꯂꯒꯏꯅꯅꯥ ꯁꯦꯠ ꯇꯧꯏ)꯫

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-, data-animation="".

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

$().tooltip(options)

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯀꯂꯦꯛꯁꯟ ꯑꯃꯗꯥ ꯇꯨꯂꯇꯤꯞ ꯍꯦꯟꯗꯂꯔ ꯑꯃꯥ ꯑꯦꯇꯦꯆ ꯇꯧꯏ꯫

.tooltip('show')

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯇꯨꯂꯇꯤꯞ ꯑꯃꯥ ꯐꯣꯡꯗꯣꯀꯏ꯫ ꯇꯨꯂꯇꯤꯞ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.tooltipꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫ ꯃꯁꯤ ꯇꯨꯂꯇꯤꯄꯀꯤ "ꯃꯦꯅꯨꯑꯦꯜ" ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯧꯏ꯫ ꯖꯤꯔꯣ-ꯂꯦꯡꯗꯕꯥ ꯇꯥꯏꯇꯂꯁꯤꯡ ꯂꯩꯕꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯎꯠꯂꯣꯏ꯫

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

.tooltip('hide')

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯇꯨꯂꯇꯤꯞ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯇꯨꯂꯇꯤꯞ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ hidden.bs.tooltipꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫ ꯃꯁꯤ ꯇꯨꯂꯇꯤꯄꯀꯤ "ꯃꯦꯅꯨꯑꯦꯜ" ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯧꯏ꯫

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

.tooltip('toggle')

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯇꯨꯂꯇꯤꯞ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯇꯨꯂꯇꯤꯞ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.tooltipꯅꯠꯠꯔꯒꯥ hidden.bs.tooltipꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫ ꯃꯁꯤ ꯇꯨꯂꯇꯤꯄꯀꯤ "ꯃꯦꯅꯨꯑꯦꯜ" ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯧꯏ꯫

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

.tooltip('destroy')

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯇꯨꯂꯇꯤꯞ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ ꯑꯃꯁꯨꯡ ꯃꯥꯡꯍꯜꯂꯤ꯫ ꯗꯦꯂꯤꯒꯦꯁꯟ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ( ꯑꯣꯄꯁꯟ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯁꯦꯃꯈꯤꯕꯥ ) ꯑꯁꯤselector ꯗꯤꯁꯦꯟꯗꯦꯟꯇ ꯇ꯭ꯔꯤꯒꯔ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯃꯥꯡꯍꯅꯕꯥ ꯌꯥꯗꯦ꯫

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

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

ꯄꯣꯄꯣꯚꯥꯔꯁ ꯄꯣꯄꯑꯣꯚꯔ.ꯖꯦ.ꯑꯦꯁ

ꯁꯦꯀꯦꯟꯗꯔꯤ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯍꯥꯎꯖꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯏꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯑꯥꯏꯄꯦꯗꯇꯥ ꯂꯩꯕꯒꯨꯝꯅꯥ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯑꯄꯤꯀꯄꯥ ꯑꯣꯚꯔꯂꯦꯏꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯇꯥꯏꯇꯜ ꯑꯃꯁꯨꯡ ꯀꯟꯇꯦꯟꯇ ꯑꯅꯤꯃꯛ ꯖꯤꯔꯣ-ꯂꯦꯡꯗꯕꯥ ꯑꯣꯏꯕꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯑꯁꯤ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯎꯠꯂꯣꯏ꯫

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

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯁ꯭ꯇꯦꯇꯤꯛ ꯄꯣꯄꯑꯣꯚꯔ꯫

ꯑꯣꯄꯁꯟ ꯃꯔꯤ ꯂꯩ: ꯃꯊꯛ, ꯑꯔꯣꯏꯕꯥ, ꯃꯈꯥꯗꯥ, ꯑꯃꯁꯨꯡ ꯂꯦꯞꯇꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

ꯂꯥꯏꯚ ꯗꯦꯃꯣ꯫

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

ꯃꯥꯏꯀꯩ ꯃꯔꯤ꯫

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

ꯃꯊꯪꯒꯤ ꯀ꯭ꯂꯤꯛ ꯑꯗꯨꯗꯥ ꯗꯤꯁꯃꯤꯁ ꯇꯧꯔꯣ꯫

focusꯌꯨꯖꯔꯅꯥ ꯇꯧꯕꯥ ꯃꯊꯪꯒꯤ ꯀ꯭ꯂꯤꯛ ꯑꯗꯨꯗꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯊꯥꯗꯣꯛꯅꯕꯥ ꯇ꯭ꯔꯤꯒꯔ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

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

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯣꯄꯑꯣꯚꯔꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ:

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-, data-animation="".

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

$().popover(options)

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯀꯂꯦꯛꯁꯟ ꯑꯃꯒꯤꯗꯃꯛ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯏ꯫

.popover('show')

ꯏꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯐꯣꯡꯗꯣꯀꯏ꯫ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.popoverꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫ ꯃꯁꯤ ꯄꯣꯄꯣꯚꯔꯒꯤ "ꯃꯦꯅꯨꯑꯦꯜ" ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯃꯅꯤ ꯍꯥꯌꯅꯥ ꯂꯧꯅꯩ꯫ ꯇꯥꯏꯇꯜ ꯑꯃꯁꯨꯡ ꯀꯟꯇꯦꯟꯇ ꯑꯅꯤꯃꯛ ꯖꯤꯔꯣ-ꯂꯦꯡꯗꯕꯥ ꯑꯣꯏꯕꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯑꯁꯤ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯎꯠꯂꯣꯏ꯫

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

.popover('hide')

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ hidden.bs.popoverꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫ ꯃꯁꯤ ꯄꯣꯄꯣꯚꯔꯒꯤ "ꯃꯦꯅꯨꯑꯦꯜ" ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯃꯅꯤ ꯍꯥꯌꯅꯥ ꯂꯧꯅꯩ꯫

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

.popover('toggle')

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.popoverꯅꯠꯠꯔꯒꯥ hidden.bs.popoverꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫ ꯃꯁꯤ ꯄꯣꯄꯣꯚꯔꯒꯤ "ꯃꯦꯅꯨꯑꯦꯜ" ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯃꯅꯤ ꯍꯥꯌꯅꯥ ꯂꯧꯅꯩ꯫

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

.popover('destroy')

ꯏꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ ꯑꯃꯁꯨꯡ ꯃꯥꯡꯍꯜꯂꯤ꯫ ꯗꯦꯂꯤꯒꯦꯁꯟ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ( ꯑꯣꯄꯁꯟ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯁꯦꯝꯕꯥselector ) ꯑꯁꯤ ꯗꯤꯁꯦꯟꯗꯦꯟꯇ ꯇ꯭ꯔꯤꯒꯔ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯃꯥꯡꯍꯅꯕꯥ ꯌꯥꯗꯦ꯫

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

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

ꯑꯦꯂꯔꯠ ꯃꯦꯁꯦꯖꯁꯤꯡ alert.js

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯑꯦꯂꯔꯇꯁꯤꯡ꯫

ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯂꯔꯠ ꯃꯦꯁꯦꯖ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯗꯤꯁꯃꯤꯁ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯕꯇꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ .close, ꯃꯁꯤ ꯑꯍꯥꯅꯕꯥ ꯑꯉꯥꯡ ꯑꯣꯏꯒꯗꯕꯅꯤ .alert-dismissibleꯑꯃꯁꯨꯡ ꯃꯥꯔꯀꯑꯥꯄꯇꯥ ꯃꯗꯨꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯇꯦꯛꯁꯠ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯠꯇꯥ ꯂꯥꯀꯄꯥ ꯌꯥꯔꯣꯏ꯫

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

data-dismiss="alert"ꯑꯦꯂꯔꯠ ꯀ꯭ꯂꯣꯖ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯃꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯄꯤꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯀ꯭ꯂꯣꯖ ꯕꯇꯟ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯑꯦꯂꯔꯠ ꯑꯃꯥ ꯂꯣꯗ ꯇꯧꯕꯅꯥ ꯃꯗꯨ DOMꯗꯒꯤ ꯂꯧꯊꯣꯀꯏ꯫

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

ꯅꯍꯥꯛꯀꯤ ꯑꯦꯂꯔꯇꯁꯤꯡ ꯑꯗꯨ ꯂꯣꯌꯁꯤꯅꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯦꯅꯤꯃꯦꯁꯟ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ, ꯃꯈꯣꯌꯗꯥ ꯍꯥꯟꯅꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯔꯕꯥ .fadeꯑꯃꯁꯨꯡ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯂꯩꯕ꯭ꯔꯥ ꯍꯥꯌꯕꯗꯨ ꯌꯦꯡꯎ꯫.in

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

$().alert()

data-dismiss="alert"ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯂꯩꯕꯥ ꯗꯤꯁꯦꯟꯗꯦꯟꯇ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯀ꯭ꯂꯤꯛ ꯏꯚꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛ ꯑꯦꯂꯔꯠ ꯑꯃꯥ ꯇꯥꯅꯕꯥ ꯁꯦꯝꯃꯤ꯫ (ꯗꯦꯇꯥ-ꯑꯦꯄꯤꯒꯤ ꯑꯣꯇꯣ-ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖꯦꯁꯟ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯃꯊꯧ ꯇꯥꯗꯦ꯫)

$().alert('close')

DOMꯗꯒꯤ ꯂꯧꯊꯣꯛꯇꯨꯅꯥ ꯑꯦꯂꯔꯠ ꯑꯃꯥ ꯂꯣꯗ ꯇꯧꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ .fadeꯑꯃꯁꯨꯡ .inꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯂꯩꯔꯕꯗꯤ, ꯑꯦꯂꯔꯠ ꯑꯗꯨ ꯂꯧꯊꯣꯛꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯂꯣꯏꯁꯤꯅꯒꯅꯤ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯑꯦꯂꯔꯠ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯑꯦꯂꯔꯠ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯗꯥ ꯍꯨꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯊꯧꯗꯣꯛ ꯈꯔꯥ ꯑꯦꯛꯁꯄꯣꯖ ꯇꯧꯏ꯫

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

ꯕꯇꯅꯁꯤꯡ ꯕꯣꯇꯥꯝ.ꯖꯦ.ꯑꯦꯁ

ꯕꯇꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯦꯟꯅꯥ ꯇꯧ꯫ ꯀꯟꯠꯔꯣꯜ ꯕꯇꯟ ꯁ꯭ꯇꯦꯠ ꯇꯧꯏ ꯅꯠꯠꯔꯒꯥ ꯇꯨꯂꯕꯥꯔꯒꯨꯝꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛ ꯕꯇꯅꯁꯤꯡꯒꯤ ꯀꯥꯡꯂꯨꯄꯁꯤꯡ ꯁꯦꯝꯃꯤ꯫

ꯔꯥꯖ꯭ꯌꯒꯤ ꯑꯣꯏꯕꯥ꯫

data-loading-text="Loading..."ꯕꯇꯟ ꯑꯃꯗꯥ ꯂꯣꯗꯤꯡ ꯁ꯭ꯇꯦꯠ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯃꯁꯤꯒꯤ ꯐꯤꯆꯔ ꯑꯁꯤ v3.3.5 ꯗꯒꯤ ꯍꯧꯅꯥ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤ ꯑꯃꯁꯨꯡ 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>

ꯁꯤꯉ꯭ꯒꯜ ꯇꯣꯒꯜ ꯇꯧꯕꯥ꯫

data-toggle="button"ꯕꯇꯟ ꯑꯃꯈꯛꯇꯗꯥ ꯇꯣꯒꯂꯤꯡ ꯑꯦꯛꯇꯤꯕ ꯇꯧꯅꯕꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

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

ꯆꯦꯀꯕꯣꯛꯁ / ꯔꯦꯗꯤꯑꯣ꯫

ꯃꯈꯣꯌꯒꯤ ꯃꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯗꯥ ꯇꯣꯒꯜ ꯇꯧꯕꯥ ꯌꯥꯍꯟꯅꯕꯥ ꯌꯥꯑꯣꯕꯥ ꯆꯦꯀꯕꯣꯛꯁ data-toggle="buttons"ꯑꯃꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯔꯦꯗꯤꯑꯣ ꯏꯅꯄꯨꯠꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.btn-group

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

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

$().button('toggle')

ꯄꯨꯁ ꯁ꯭ꯇꯦꯠ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯕꯇꯟ ꯑꯗꯨꯗꯥ ꯃꯁꯤ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯔꯦ ꯍꯥꯌꯕꯒꯤ ꯃꯑꯣꯡ ꯑꯗꯨ ꯄꯤꯔꯤ꯫

$().button('reset')

ꯕꯇꯟ ꯁ꯭ꯇꯦꯠ ꯔꯤꯁꯦꯠ ꯇꯧꯏ - ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯑꯣꯔꯤꯖꯤꯅꯦꯜ ꯇꯦꯛꯁꯇꯇꯥ ꯁꯣꯌꯞ ꯇꯧꯏ꯫ ꯃꯁꯤꯒꯤ ꯃꯦꯊꯗ ꯑꯁꯤ ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯔꯤꯁꯦꯠ ꯇꯧꯕꯥ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯂꯣꯌꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯍꯜꯂꯀꯏ꯫

$().button(string)

ꯗꯦꯇꯥ ꯗꯤꯐꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ ꯁ꯭ꯇꯦꯠ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯇꯦꯛꯁꯠ ꯁ꯭ꯕ꯭ꯌꯥꯞ ꯇꯧꯏ꯫

<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ꯀꯟꯇꯦꯟꯇ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫
• .collapsingꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡꯒꯤ ꯃꯇꯃꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫
• .collapse.inꯀꯟꯇꯦꯟꯇ ꯎꯠꯂꯤ꯫

ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯤꯉ꯭ꯛ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ href, ꯅꯠꯠꯔꯒꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯇꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ data-targetꯌꯥꯏ꯫ ꯀꯦꯁ ꯑꯅꯤꯃꯛꯇꯥ, ꯗꯤ data-toggle="collapse"ꯑꯁꯤ ꯃꯊꯧ ꯇꯥꯏ꯫

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

ꯑꯦꯀꯣꯔꯗꯅꯒꯤ ꯈꯨꯗꯝ꯫

ꯄꯦꯅꯦꯜ ꯀꯝꯄꯣꯅꯦꯟꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯀꯣꯔꯗꯟ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯀꯣꯂꯥꯞꯁ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯑꯗꯨ ꯁꯥꯡꯗꯣꯀꯎ.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

.panel-bodyꯑꯦꯁ.ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯕ꯭ꯌꯥꯞ ꯑꯥꯎꯠ ꯇꯧꯕꯁꯨ .list-groupꯌꯥꯏ꯫

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯀꯣꯂꯥꯞꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯍꯦꯚꯤ ꯂꯤꯐꯇꯤꯡ ꯍꯦꯟꯗꯜ ꯇꯧꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯈꯔꯥ ꯁꯤꯖꯤꯟꯅꯩ:

• .collapseꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫
• .collapse.inꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯎꯠꯂꯤ꯫
• .collapsingꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯍꯧꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ, ꯑꯃꯁꯨꯡ ꯂꯣꯏꯔꯕꯥ ꯃꯇꯃꯗꯥ ꯂꯧꯊꯣꯀꯏ꯫

ꯍꯥꯌꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ component-animations.less.

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯀꯟꯠꯔꯣꯜ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯦꯁꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ data-toggle="collapse"ꯑꯃꯁꯨꯡ ꯑꯦ ꯈꯛꯇꯃꯛ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ data-targetꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯅꯥ data-targetꯀꯣꯂꯥꯞꯁ ꯑꯗꯨ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯅꯕꯥ CSS ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯥ ꯌꯥꯔꯦ꯫ collapseꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯍꯥꯡꯗꯣꯀꯄꯥ ꯄꯥꯝꯂꯕꯗꯤ, ꯑꯍꯦꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯍꯥꯄꯆꯤꯜꯂꯨ in.

ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯀꯟꯠꯔꯣꯜ ꯑꯃꯗꯥ ꯑꯦꯀꯣꯔꯗꯅꯒꯨꯝꯕꯥ ꯒ꯭ꯔꯨꯞ ꯃꯦꯅꯦꯖꯃꯦꯟꯇ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ, ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯍꯥꯄꯆꯤꯜꯂꯨ data-parent="#selector". ꯃꯁꯤ ꯊꯕꯛ ꯑꯣꯏꯅꯥ ꯎꯅꯕꯒꯤꯗꯃꯛ ꯗꯦꯃꯣ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯤꯌꯨ:

$('.collapse').collapse()

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-, data-parent="".

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

.collapse(options)

ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯑꯦꯛꯇꯤꯚ ꯇꯧꯏ꯫ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯌꯥꯔꯦ object.

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

.collapse('toggle')

ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.collapseꯅꯠꯠꯔꯒꯥ hidden.bs.collapseꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔꯗꯥ ꯍꯜꯂꯀꯏ꯫

.collapse('show')

ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯂꯤ꯫ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.collapseꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔꯗꯥ ꯍꯜꯂꯀꯏ꯫

.collapse('hide')

ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ hidden.bs.collapseꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔꯗꯥ ꯍꯜꯂꯀꯏ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯀꯣꯂꯥꯄꯁ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯀꯣꯂꯥꯄꯁ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯗꯥ ꯍꯨꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯊꯧꯗꯣꯛ ꯈꯔꯥ ꯑꯦꯛꯁꯄꯣꯖ ꯇꯧꯏ꯫

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

ꯀꯦꯔꯣꯁꯤꯜ ꯀꯦꯔꯣꯁꯤꯜ.ꯖꯦ.ꯑꯦꯁ

ꯀꯦꯔꯣꯁꯦꯂꯒꯨꯝꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯥꯏꯛꯂꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯁ꯭ꯂꯥꯏꯗꯁꯣ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯥ꯫ ꯅꯦꯁ꯭ꯇꯦꯗ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯁꯤ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯃꯃꯥꯡꯒꯤ ꯃꯊꯪ

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

ꯑꯣꯄꯁꯅꯦꯜ ꯀꯦꯄꯁꯅꯁꯤꯡ꯫

.carousel-captionꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯁ꯭ꯂꯥꯏꯗꯁꯤꯡꯗꯥ ꯀꯦꯄꯁꯅꯁꯤꯡ ꯐꯖꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ .item. ꯃꯐꯝ ꯑꯗꯨꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯆꯥꯎꯔꯥꯛꯅꯥ ꯑꯣꯄꯁꯅꯦꯜ HTML ꯑꯃꯠꯇꯥ ꯊꯝꯃꯨ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯐꯣꯔꯃꯦꯠ ꯇꯧꯒꯅꯤ꯫

ꯑꯍꯥꯅꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯅꯨꯜꯂꯥ ꯚꯤꯇꯦ ꯏꯂꯤꯠ ꯂꯤꯕꯦꯔꯣ, ꯑꯦ ꯐꯥꯔꯦꯠꯔꯥ ꯑꯣꯒ ꯃꯣꯂꯤꯁ ꯏꯟꯇꯔꯗꯝ꯫

ꯑꯅꯤꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯂꯣꯔꯦꯝ ꯏꯄꯁꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯦꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫

ꯑꯍꯨꯃꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

ꯃꯃꯥꯡꯒꯤ ꯃꯊꯪ

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

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯀꯦꯔꯣꯁꯤꯜꯁꯤꯡ꯫

ꯀꯦꯔꯣꯁꯤꯜ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯅꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ idꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯄꯥꯟꯗꯥ ꯂꯩꯕꯥ ꯀꯟꯇꯦꯅꯔ (the ) ꯑꯗꯨꯗꯥ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ .carouselꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯃꯇꯃꯗꯥ, ꯅꯠꯠꯔꯒꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯃꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ id, ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯑꯗꯨ ꯁꯣꯏꯗꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯕꯤꯌꯨ꯫

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯀꯦꯔꯣꯁꯦꯂꯒꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ ꯐꯖꯅꯥ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯀꯤ-ꯋꯥꯔꯗꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ , data-slideꯑꯁꯤ ꯌꯥꯔꯦ , ꯃꯁꯤꯅꯥ ꯃꯁꯤꯒꯤ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯣꯖꯤꯁꯟ ꯑꯁꯤꯒꯥ ꯆꯥꯡꯗꯝꯅꯕꯗꯥ ꯁ꯭ꯂꯥꯏꯗꯀꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯏ꯫ ꯅꯠꯠꯔꯒꯥ, ꯀꯦꯔꯣꯁꯦꯂꯗꯥ ꯔꯣ ꯁ꯭ꯂꯥꯏꯗ ꯏꯟꯗꯦꯛꯁ ꯑꯃꯥ ꯄꯥꯁ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ , ꯃꯁꯤꯅꯥ ꯁ꯭ꯂꯥꯏꯗꯀꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ .prevnextdata-slide-todata-slide-to="2"0

ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯁꯤ data-ride="carousel"ꯄꯦꯖ ꯂꯣꯗꯇꯒꯤ ꯍꯧꯔꯒꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯃꯥ ꯑꯦꯅꯤꯃꯦꯇꯦꯗ ꯑꯣꯏꯅꯥ ꯃꯥꯔꯛ ꯇꯧꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯃꯁꯤ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯀꯦꯔꯣꯁꯦꯂꯒꯤ (ꯔꯤꯗꯟꯗꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯃꯊꯧ ꯇꯥꯗꯕꯥ) ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖꯦꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯗꯦ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯀꯦꯔꯣꯁꯤꯜ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯀꯜ ꯇꯧꯕꯤꯌꯨ:

$('.carousel').carousel()

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-, data-interval="".

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

.carousel(options)

ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯄꯁꯟ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯁꯤ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯏ objectꯑꯃꯁꯨꯡ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯕꯥ ꯍꯧꯏ꯫

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

.carousel('cycle')

ꯀꯦꯔꯣꯁꯤꯜ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯑꯗꯨꯗꯒꯤ ꯑꯔꯣꯏꯕꯥ ꯐꯥꯑꯣꯕꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯏ꯫

.carousel('pause')

ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯁꯤ ꯁꯥꯏꯀꯜ ꯊꯧꯕꯗꯒꯤ ꯊꯤꯡꯏ꯫

.carousel(number)

ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨ ꯑꯀꯛꯅꯕꯥ ꯐ꯭ꯔꯦꯝ ꯑꯃꯗꯥ (0ꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ, ꯑꯦꯔꯦ ꯑꯃꯒꯥ ꯃꯥꯟꯅꯕꯥ) ꯁꯥꯏꯀꯜ ꯇꯧꯏ꯫

.carousel('prev')

ꯃꯃꯥꯡꯒꯤ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨꯗꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯏ꯫

.carousel('next')

ꯃꯊꯪꯒꯤ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨꯗꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯏ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯀꯦꯔꯣꯁꯤꯜ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯗꯥ ꯍꯨꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯊꯧꯗꯣꯛ ꯑꯅꯤ ꯐꯣꯡꯗꯣꯛꯂꯤ꯫

ꯊꯧꯔꯝ ꯑꯅꯤꯃꯛꯇꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯃꯒꯨꯅꯁꯤꯡ ꯑꯁꯤ ꯂꯩꯔꯤ:

• direction: ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯅꯥ ꯁ꯭ꯂꯥꯏꯗ ꯇꯧꯔꯤꯕꯥ ꯃꯥꯌꯀꯩ ꯑꯗꯨ (ꯅꯠꯔꯒꯥ "left"ꯅꯠꯠꯔꯒꯥ "right")꯫
• relatedTarget: ꯑꯦꯛꯇꯤꯕ ꯑꯥꯏꯇꯦꯝ ꯑꯣꯏꯅꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯁ꯭ꯂꯥꯏꯗ ꯇꯧꯔꯤꯕꯥ ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.

ꯀꯦꯔꯣꯁꯤꯜ ꯊꯧꯗꯣꯛ ꯄꯨꯝꯅꯃꯛ ꯀꯦꯔꯣꯁꯤꯜ ꯃꯁꯥꯃꯛꯇꯗꯥ (ꯑꯔꯕꯥꯟ <div class="carousel">) ꯐꯥꯏꯔ ꯇꯧꯏ꯫

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

ꯑꯦꯐꯤꯛꯁ.ꯖꯦ.ꯑꯦꯁ _

ꯈꯨꯗꯝ

ꯑꯦꯐꯤꯛꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ position: fixed;ꯑꯣꯟ ꯑꯃꯁꯨꯡ ꯑꯣꯐ ꯇꯣꯒꯜ ꯇꯧꯏ, ꯃꯁꯤꯅꯥ position: sticky;. ꯑꯔꯣꯏꯕꯗꯥ ꯂꯩꯕꯥ ꯁꯕꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯁꯤ ꯑꯦꯐꯤꯛꯁ ꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯂꯥꯏꯚ ꯗꯦꯃꯣ ꯑꯃꯅꯤ꯫

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯑꯦꯐꯤꯛꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯐꯤꯚꯝ ꯑꯅꯤꯃꯛꯇꯥ, ꯅꯍꯥꯛꯀꯤ ꯑꯦꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯃꯁꯨꯡ ꯋꯥꯏꯗꯀꯤꯗꯃꯛ ꯅꯍꯥꯛꯅꯥ CSS ꯄꯤꯒꯗꯕꯅꯤ꯫

ꯈꯪꯖꯤꯅꯒꯗꯕꯥ: ꯁꯥꯐꯥꯔꯤ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯒꯤ ꯕꯥꯒ ꯑꯃꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ, ꯄꯨꯜ ꯅꯠꯠꯔꯒꯥ ꯄꯨꯁꯤꯜꯂꯀꯄꯥ ꯀꯣꯂꯃꯒꯨꯝꯕꯥ ꯔꯤꯂꯦꯇꯤꯚ ꯑꯣꯏꯅꯥ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯌꯥꯎꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯑꯦꯐꯤꯛꯁ ꯄ꯭ꯂꯒꯏꯟ ꯁꯤꯖꯤꯟꯅꯒꯅꯨ .

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯣꯖꯤꯁꯟ ꯄꯤꯕꯥ꯫

ꯑꯦꯐꯤꯛꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯀ꯭ꯂꯥꯁ ꯑꯍꯨꯃꯒꯤ ꯃꯔꯛꯇꯥ ꯇꯣꯒꯜ ꯇꯧꯏ, ꯃꯈꯣꯌ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯁ꯭ꯇꯦꯠ ꯑꯃꯥ ꯔꯤꯞꯔꯖꯦꯟꯇ ꯇꯧꯏ: .affix, .affix-top, ꯑꯃꯁꯨꯡ .affix-bottom. ꯇꯁꯦꯡꯕꯥ ꯄꯣꯖꯤꯁꯅꯁꯤꯡ ꯑꯗꯨ ꯍꯦꯟꯗꯜ ꯇꯧꯅꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯥꯅꯥ (ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯗꯒꯤ ꯃꯅꯤꯡꯇꯝꯕꯥ) ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤꯒꯤꯗꯃꯛꯇꯥ, position: fixed;on ꯒꯤ ꯃꯊꯛꯇꯥ, ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯗꯨ ꯄꯤꯒꯗꯕꯅꯤ꯫.affix

ꯑꯦꯐꯤꯛꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

1. ꯍꯧꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ, ꯄ꯭ꯂꯒꯏꯟ .affix-topꯑꯁꯤꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯃꯗꯨꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯩꯕꯥ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨꯗꯥ ꯂꯩꯔꯦ ꯍꯥꯌꯕꯥ ꯇꯥꯛꯅꯕꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫ ꯃꯇꯝ ꯑꯁꯤꯗꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯃꯠꯇꯥ ꯃꯊꯧ ꯇꯥꯗꯦ꯫
2. ꯅꯍꯥꯛꯅꯥ ꯑꯦꯐꯤꯛꯁ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯅꯥ ꯇꯁꯦꯡꯕꯥ ꯑꯦꯐꯤꯛꯁ ꯇꯧꯕꯥ ꯑꯗꯨ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯒꯗꯕꯅꯤ꯫ ꯃꯁꯤꯗꯥ .affixꯃꯍꯨꯠ ꯁꯤꯅꯕꯥ .affix-topꯑꯃꯁꯨꯡ ꯁꯦꯠ ꯇꯧꯕꯥ ꯃꯐꯝ ꯑꯗꯨꯅꯤ position: fixed;(ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯅꯥ ꯄꯤꯕꯥ)꯫
3. ꯀꯔꯤꯒꯨꯝꯕꯥ ꯕꯣꯠꯇꯝ ꯑꯣꯐꯁꯦꯠ ꯑꯃꯥ ꯗꯤꯐꯥꯏꯟ ꯇꯧꯔꯕꯗꯤ, ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁ꯭ꯛꯔꯣꯜ .affixꯇꯧꯕꯅꯥ .affix-bottom. ꯑꯣꯐꯁꯦꯇꯁꯤꯡ ꯑꯁꯤ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯏꯕꯅꯥ, ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯕꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯥ CSS ꯁꯦꯠ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯃꯁꯤꯒꯤ ꯀꯦꯁ ꯑꯁꯤꯗꯥ, position: absolute;ꯃꯊꯧ ꯇꯥꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯀꯗꯥꯏꯗꯥ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯂꯦꯄꯊꯣꯛꯅꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯣꯄꯁꯟ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯌꯨꯖꯔ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛ ꯅꯍꯥꯛꯀꯤ CSS ꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯃꯊꯛꯀꯤ ꯁ꯭ꯇꯦꯄꯁꯤꯡ ꯑꯁꯤ ꯏꯅꯒꯗꯕꯅꯤ꯫

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯑꯦꯐꯤꯛꯁ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯐꯖꯅꯥ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ, data-spy="affix"ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯄꯥꯏ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯄꯤꯅꯤꯡ ꯑꯗꯨ ꯀꯗꯥꯏꯗꯥ ꯇꯣꯒꯜ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯂꯦꯄꯊꯣꯛꯅꯕꯥ ꯑꯣꯐꯁꯦꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

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

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯦꯐꯤꯛꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯗꯨ ꯀꯜ ꯇꯧꯕꯤꯌꯨ:

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-, data-offset-top="200".

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

.affix(options)

ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯑꯦꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯣꯏꯅꯥ ꯑꯦꯛꯇꯤꯚ ꯇꯧꯏ꯫ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯌꯥꯔꯦ object.

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

.affix('checkPosition')

ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯗꯥꯏꯃꯦꯟꯁꯟ, ꯄꯣꯖꯤꯁꯟ, ꯑꯃꯁꯨꯡ ꯁ꯭ꯛꯔꯣꯜ ꯄꯣꯖꯤꯁꯅꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯦꯐꯤꯛꯁꯀꯤ ꯐꯤꯚꯝ ꯑꯗꯨ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯂꯦꯄꯊꯣꯀꯏ꯫ , .affix, .affix-topꯑꯃꯁꯨꯡ .affix-bottomꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯑꯅꯧꯕꯥ ꯔꯥꯖ꯭ꯌꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯦꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ ꯅꯠꯠꯔꯒꯥ ꯂꯧꯊꯣꯀꯏ꯫ ꯑꯦꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯗꯥꯏꯃꯦꯟꯁꯅꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯃꯇꯝ ꯈꯨꯗꯤꯡꯗꯥ, ꯑꯦꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯨꯝꯕꯥ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯟꯅꯕꯥ, ꯃꯦꯊꯗ ꯑꯁꯤ ꯀꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯑꯦꯐꯤꯛꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯑꯦꯐꯤꯛꯁ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯗꯥ ꯍꯨꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯊꯧꯗꯣꯛ ꯈꯔꯥ ꯑꯦꯛꯁꯄꯣꯖ ꯇꯧꯏ꯫