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

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

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

ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫

ꯑꯅꯤꯃꯛ bootstrap.jsꯑꯃꯁꯨꯡ bootstrap.min.jsꯐꯥꯏꯜ ꯑꯃꯈꯛꯇꯗꯥ ꯄ꯭ꯂꯒꯏꯟ ꯄꯨꯝꯅꯃꯛ ꯌꯥꯑꯣꯔꯤ꯫ ꯑꯃꯈꯛꯇꯃꯛ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ꯫

ꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯗꯤꯄꯦꯟꯗꯦꯟꯁꯁꯤꯡ꯫

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

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

ꯅꯍꯥꯛꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯃꯠꯇꯥ ꯏꯗꯅꯥ ꯃꯥꯔꯀꯑꯥꯞ 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
})

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

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

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

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

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

ꯊꯥꯔꯗ ꯄꯥꯔꯇꯤ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤꯁꯤꯡ꯫

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

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

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

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

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

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

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

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

$.support.transition = false

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

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

ꯃꯜꯇꯤꯄꯜ ꯑꯣꯄꯟ ꯃꯣꯗꯦꯂꯁꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫

ꯑꯇꯣꯞꯄꯥ ꯑꯃꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯎꯕꯥ ꯐꯪꯂꯤꯉꯩꯗꯥ ꯃꯣꯗꯜ ꯑꯃꯥ ꯍꯥꯡꯗꯣꯛꯂꯣꯏꯗꯕꯅꯤ꯫ ꯃꯇꯝ ꯑꯃꯗꯥ ꯃꯣꯗꯜ ꯑꯃꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯎꯠꯄꯗꯥ ꯀꯁ꯭ꯇꯝ ꯀꯣꯗ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯃꯣꯗꯜ ꯃꯥꯔꯀꯑꯥꯞ ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

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

ꯃꯣꯕꯥꯏꯜ ꯗꯤꯚꯥꯏꯁꯀꯤ ꯀꯦꯚꯦꯠꯁꯤꯡ꯫

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

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>

ꯃꯣꯗꯦꯂꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯛꯁꯦꯁꯤꯕꯜ ꯑꯣꯏꯍꯅꯕꯥ꯫

ꯃꯣꯗꯜ ꯇꯥꯏꯇꯜ, , ꯑꯃꯁꯨꯡ ꯃꯁꯥꯃꯛꯇꯗꯥ ꯔꯤꯐꯔꯦꯟꯁ ꯇꯧꯗꯨꯅꯥ ꯑꯃꯁꯨꯡ role="dialog", ꯁꯣꯌꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫aria-labelledby="...".modalrole="document".modal-dialog

ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯃꯣꯗꯦꯜ ꯗꯥꯏꯂꯣꯒꯀꯤ aria-describedbyꯃꯇꯥꯡꯗꯥ ꯑꯣꯟ .modal.

ꯏꯎꯇꯤꯎꯕ ꯚꯤꯗꯤꯑꯣꯁꯤꯡ ꯑꯦꯝꯕꯦꯗ ꯇꯧꯕꯥ꯫

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

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

ꯃꯣꯗꯦꯂꯁꯤꯡ ꯑꯁꯤ ꯑꯣꯄꯁꯅꯦꯜ ꯁꯥꯏꯖ ꯑꯅꯤ ꯂꯩ, ꯃꯁꯤꯗꯥ ꯊꯝꯅꯕꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ .modal-dialogꯐꯪꯒꯅꯤ꯫

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

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

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

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

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

ꯌꯦꯡꯅꯕꯒꯤꯗꯃꯛꯇꯥ ꯐꯦꯗ ꯏꯟ ꯇꯧꯕꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁꯨꯞꯅꯒꯤ ꯊꯣꯀꯄꯥ ꯃꯣꯗꯦꯂꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ, .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="".

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

ꯑꯣꯄꯁꯟ ꯑꯁꯤ v3.3.0 ꯗꯒꯤ ꯍꯧꯅꯥ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤ ꯑꯃꯁꯨꯡ v4ꯗꯥ ꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯀ꯭ꯂꯥꯏꯟꯇ-ꯁꯥꯏꯗ ꯇꯦꯃꯞꯂꯦꯇꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯗꯦꯇꯥ ꯕꯥꯏꯟꯗꯤꯡ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ, ꯅꯠꯠꯔꯒꯥ ꯃꯁꯥꯅꯥ jQuery.load ꯀꯧꯅꯕꯥ ꯄꯥꯎꯇꯥꯛ ꯄꯤꯔꯤ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯔꯤꯃꯣꯠ URL ꯑꯃꯥ ꯄꯤꯔꯕꯗꯤ, ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ jQueryꯒꯤ ꯃꯦꯊꯗꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯂꯣꯗ ꯇꯧꯒꯅꯤ ꯑꯃꯁꯨꯡ div. ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯗꯦꯇꯥ-ꯑꯦꯄꯤ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯑꯇꯣꯞꯄꯥ ꯃꯑꯣꯡ ꯑꯃꯗꯥ ꯔꯤꯃꯣꯠ ꯁꯣꯔꯁ ꯑꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ ꯃꯁꯤꯒꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:load.modal-contenthref

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

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

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

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

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

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

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

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

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

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

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

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

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

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

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

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫ ꯋꯥꯔꯣꯜ
ꯁꯣ.ꯕꯤ.ꯑꯦꯁ.ꯃꯣꯗꯜ ꯇꯧꯕꯥ꯫ showꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀ꯭ꯂꯤꯛ ꯑꯃꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯊꯣꯛꯂꯕꯗꯤ, ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ relatedTargetꯑꯗꯨ ꯊꯧꯗꯣꯛ ꯑꯗꯨꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯣꯏꯅꯥ ꯐꯪꯒꯅꯤ꯫
ꯎꯠꯂꯤꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯃꯣꯗꯜ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯃꯣꯗꯜ ꯑꯗꯨ ꯌꯨꯖꯔꯅꯥ ꯎꯕꯥ ꯐꯪꯍꯅꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀ꯭ꯂꯤꯛ ꯑꯃꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯊꯣꯛꯂꯕꯗꯤ, ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ relatedTargetꯑꯗꯨ ꯊꯧꯗꯣꯛ ꯑꯗꯨꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯣꯏꯅꯥ ꯐꯪꯒꯅꯤ꯫
ꯂꯣꯠꯄꯥ.ꯕꯤ.ꯑꯦꯁ.ꯃꯣꯗꯜ꯫ hideꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯂꯣꯠꯁꯤꯜꯂꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯃꯣꯗꯜ꯫ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯃꯣꯗꯦꯜ ꯑꯗꯨ ꯌꯨꯖꯔꯗꯒꯤ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫
ꯂꯣꯗ ꯇꯧꯔꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯃꯣꯗꯜ remoteꯃꯣꯗꯦꯂꯅꯥ ꯑꯣꯄꯁꯟ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯀꯟꯇꯦꯟꯇ ꯂꯣꯗ ꯇꯧꯔꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
$('#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()

data-toggle="dropdown"ꯍꯧꯖꯤꯀꯁꯨ ꯃꯊꯧ ꯇꯥꯏ꯫

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

ꯑꯃꯠꯇ ꯅꯠꯇꯦ

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

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

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

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫ ꯋꯥꯔꯣꯜ
ꯁꯣ.ꯕꯤ.ꯑꯦꯁ.ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫ ꯁꯣ ꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
shown.bs.ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯗꯨ ꯌꯨꯖꯔꯅꯥ ꯎꯕꯥ ꯐꯪꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯉꯥꯏꯒꯅꯤ, ꯃꯄꯨꯡ ꯐꯥꯍꯟꯅꯕꯥ)꯫
hide.bs.ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫ ꯍꯤꯗ ꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯂꯣꯠꯁꯤꯜꯂꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯗꯨ ꯌꯨꯖꯔꯗꯒꯤ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯉꯥꯏꯒꯅꯤ, ꯃꯄꯨꯡ ꯐꯥꯍꯟꯅꯕꯥ)꯫
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

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

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

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

@ꯑꯅꯣꯏꯕ

ꯑꯦꯗ ꯂꯦꯒꯤꯡꯁ ꯀꯤꯇꯥꯔ, ꯕ꯭ꯔꯟꯆ ꯑꯥꯏꯗꯤ ꯑꯥꯔꯠ ꯄꯥꯔꯇꯤ ꯗꯣꯂꯣꯔ ꯂꯦꯕꯔ꯫ ꯃꯈꯣꯌꯅꯥ ꯀꯨꯏꯅꯥ ꯌꯣꯅꯕꯥ ꯃꯃꯥꯡꯗꯥ ꯄꯤꯆꯐꯣꯔꯛ ꯌꯔ ꯑꯦꯅꯤꯝ ꯂꯣ-ꯐꯥꯏ꯫ ꯇꯝꯕꯂꯔ ꯐꯥꯔꯝ-ꯇꯨ-ꯇꯦꯕꯜ ꯁꯥꯏꯀꯂꯒꯤ ꯍꯀꯁꯤꯡ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯠꯇꯥ꯫ ꯑꯅꯤꯝ ꯀꯦꯐꯤꯌꯦꯍ ꯀꯥꯔꯂꯦꯁ ꯀꯥꯔꯗꯤꯒꯥꯟ꯫ Velit seitan mcsweeney ꯒꯤ ꯐꯣꯇꯣ ꯕꯨꯊ ꯳ ꯋꯨꯜꯐ ꯃꯟ ꯏꯔꯨꯔꯦ꯫ ꯀꯣꯁꯕꯤ ꯁ꯭ꯕꯦꯇꯔ ꯂꯣꯃꯣ ꯖꯤꯟ ꯁꯔꯇꯁ, ꯋꯤꯂꯤꯌꯃꯁꯕꯔꯒ ꯍꯨꯗꯤ ꯃꯤꯅꯤꯝ ꯀꯨꯏ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯃꯔꯃꯗꯥ ꯇꯥꯕꯥ ꯐꯪꯂꯃꯂꯣꯏꯗꯕꯅꯤ ꯑꯦꯠ ꯀꯥꯔꯗꯤꯒꯥꯟ ꯇ꯭ꯔꯁ꯭ꯠ ꯐꯟꯗ ꯀꯨꯂꯄꯥ ꯕꯥꯏꯑꯣꯗꯤꯖꯦꯜ ꯋꯦꯁ ꯑꯦꯟꯗꯔꯁꯟ ꯑꯦꯁ꯭ꯇꯦꯇꯤꯛ꯫ ꯅꯤꯍꯤꯜ ꯇꯦꯇꯨ ꯇꯧꯔꯕꯥ ꯑꯦꯛꯌꯨꯁꯥꯃꯁ, ꯀ꯭ꯔꯦꯗ ꯏꯔꯣꯅꯤ ꯕꯥꯏꯑꯣꯗꯤꯖꯦꯜ ꯀꯦꯐꯤꯌꯦꯍ ꯑꯥꯔꯇꯤꯁꯥꯟ ꯎꯂꯝꯀꯣ ꯀꯟꯁꯦꯛꯌꯨꯠ꯫

@mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫

ꯚꯦꯅꯤꯌꯥꯝ ꯃꯥꯔꯐꯥ ꯃꯁ꯭ꯇꯦꯆ ꯁ꯭ꯀꯦꯠꯕꯣꯔꯗ, ꯑꯦꯗꯤꯄꯤꯁꯤꯁꯤꯡ ꯐꯨꯖꯤꯌꯥꯠ ꯚꯦꯂꯤꯠ ꯄꯤꯆꯐꯣꯔꯛ ꯕꯤꯌꯔ꯫ ꯐ꯭ꯔꯤꯒꯥꯟ ꯗꯥꯗꯤ ꯑꯦꯂꯤꯛꯌꯨꯌꯥ ꯀ꯭ꯌꯨꯄꯤꯗꯥꯠ ꯃꯦꯀꯁꯨꯏꯅꯤꯒꯤ ꯚꯦꯔꯣ꯫ ꯀ꯭ꯌꯨꯄꯤꯗꯥꯠ ꯃꯔꯤ ꯂꯣꯀꯣ ꯅꯤꯁꯤ, ꯏꯑꯦ ꯍꯦꯂꯚꯦꯇꯤꯀꯥ ꯅꯨꯜꯂꯥ ꯀꯥꯔꯂꯦꯁ꯫ ꯇꯦꯇꯨ ꯇꯧꯔꯕꯥ ꯀꯣꯁ꯭ꯕꯤ ꯁ꯭ꯕꯦꯇꯔ ꯐꯨꯗ ꯇ꯭ꯔꯛ, mcsweeney's quis ꯅꯟ ꯐ꯭ꯔꯤꯒꯥꯟ ꯚꯤꯅꯥꯏꯜ꯫ ꯂꯣ-ꯐꯥꯏ ꯋꯦꯁ ꯑꯦꯟꯗꯔꯁꯟ +꯱ ꯁꯥꯔꯇꯣꯔꯤꯑꯦꯜ꯫ ꯀꯥꯔꯂꯁ ꯅꯟ ꯑꯦꯁ꯭ꯇꯦꯇꯤꯛ ꯑꯦꯛꯁꯔꯁꯥꯏꯖ ꯀ꯭ꯕꯤꯁ ꯖꯦꯟꯠꯔꯤꯐꯥꯏ ꯇꯧꯕꯥ꯫ ꯕ꯭ꯔꯨꯀꯂꯤꯟ ꯑꯦꯗꯤꯄꯤꯁꯤꯁꯤꯡ ꯀ꯭ꯔꯥꯐ ꯕꯤꯌꯔ ꯚꯥꯏꯁ ꯀꯦꯇꯥꯔ ꯗꯦꯁꯦꯔꯨꯟꯇ꯫

ꯑꯃ

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

ꯑꯅꯤ

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

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

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯅꯦꯚ ꯃꯊꯧ ꯇꯥꯏ꯫

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

ꯔꯤꯖꯣꯂꯕ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯥꯏ.ꯗꯤ.ꯒꯤ ꯄꯥꯟꯗꯃꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯅꯕꯕꯥꯔ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯗꯥ ꯔꯤꯖꯣꯂꯕ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯥꯏ.ꯗꯤ. ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, a <a href="#home">home</a>ꯑꯁꯤ <div id="home"></div>.

ꯅꯟ- :visibleꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯏꯒꯅꯣꯔ ꯇꯧꯈꯤ꯫

:visiblejQueryꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯣꯏꯗꯕꯥ ꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯌꯦꯡꯁꯤꯅꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯒꯤ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯅꯦꯚ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯑꯁꯤ ꯀꯩꯗꯧꯅꯨꯡꯗꯥ ꯍꯥꯏꯂꯥꯏꯠ ꯇꯧꯔꯣꯏ꯫

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

ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯕꯒꯤ ꯃꯑꯣꯡ ꯑꯗꯨ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯣꯏꯔꯕꯁꯨ, ꯁ꯭ꯛꯔꯣꯂꯁꯄꯤꯅꯥ 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="".

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫ ꯋꯥꯔꯣꯜ
ꯑꯦꯛꯇꯤꯚꯦꯠ ꯇꯧꯕꯥ.bs.scrollspy ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤꯅꯥ ꯑꯅꯧꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

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

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

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

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

ꯇꯦꯕꯜ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯁꯥꯡꯗꯣꯀꯍꯜꯂꯤ꯫

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

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

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

$('#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ꯏꯚꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯐꯥꯏꯔ ꯇꯧꯔꯣꯏ.

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫ ꯋꯥꯔꯣꯜ
ꯁꯣ.ꯕꯤ.ꯑꯦꯁ.ꯇꯦꯕ ꯇꯧꯕꯥ꯫ ꯊꯧꯔꯝ ꯑꯁꯤ ꯇꯦꯕ ꯁꯣꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ, ꯑꯗꯨꯕꯨ ꯑꯅꯧꯕꯥ ꯇꯦꯕ ꯑꯗꯨ ꯎꯠꯂꯕꯥ ꯃꯃꯥꯡꯗꯥ꯫ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯃꯁꯨꯡ ꯃꯃꯥꯡꯒꯤ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ (ꯀꯔꯤꯒꯨꯝꯕꯥ ꯂꯩꯔꯕꯗꯤ) ꯑꯗꯨ ꯃꯊꯪꯁꯤꯠꯅꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯥ event.targetꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫event.relatedTarget
ꯎꯠꯂꯤꯕꯥ.bs.tab ꯇꯦꯕ ꯑꯃꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯇꯦꯕ ꯁꯣꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯃꯁꯨꯡ ꯃꯃꯥꯡꯒꯤ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ (ꯀꯔꯤꯒꯨꯝꯕꯥ ꯂꯩꯔꯕꯗꯤ) ꯑꯗꯨ ꯃꯊꯪꯁꯤꯠꯅꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯥ event.targetꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫event.relatedTarget
ꯂꯣꯠꯁꯤꯜꯂꯨ.ꯕꯤ.ꯑꯦꯁ.ꯇꯦꯕ꯫ ꯑꯅꯧꯕꯥ ꯇꯦꯕ ꯑꯃꯥ ꯎꯠꯄꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯐꯥꯏꯔ ꯇꯧꯏ (ꯑꯗꯨꯒꯥ ꯃꯔꯝ ꯑꯁꯤꯅꯥ ꯃꯃꯥꯡꯒꯤ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯅꯒꯗꯕꯅꯤ)꯫ ꯃꯊꯪꯁꯤꯠꯅꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯃꯁꯨꯡ ꯑꯅꯧꯕꯥ ꯑꯊꯨꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯒꯗꯧꯔꯤꯕꯥ ꯇꯦꯕ ꯑꯗꯨꯗꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯥ event.targetꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫event.relatedTarget
ꯂꯣꯠꯁꯤꯜꯂꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯇꯦꯕ꯫ ꯑꯅꯧꯕꯥ ꯇꯦꯕ ꯑꯃꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯐꯥꯏꯔ ꯇꯧꯏ (ꯑꯗꯨꯒꯥ ꯃꯔꯝ ꯑꯁꯤꯅꯥ ꯃꯃꯥꯡꯒꯤ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯜꯂꯤ)꯫ ꯃꯃꯥꯡꯒꯤ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯃꯁꯨꯡ ꯑꯅꯧꯕꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯗꯨ ꯃꯊꯪꯁꯤꯠꯅꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯥ event.targetꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫event.relatedTarget
$('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>

ꯑꯣꯄꯁꯟ-ꯏꯟ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯂꯩ꯫

ꯄꯔꯐꯣꯃꯦꯟꯁꯀꯤ ꯃꯔꯃꯁꯤꯡꯅꯥ, ꯇꯨꯂꯇꯤꯞ ꯑꯃꯁꯨꯡ ꯄꯣꯄꯣꯚꯔ ꯗꯦꯇꯥ-ꯑꯦꯄꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯣꯄꯁꯟ-ꯏꯅꯅꯤ, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌ ꯃꯁꯥꯅꯥ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯒꯗꯕꯅꯤ .

data-toggleꯄꯦꯖ ꯑꯃꯗꯥ ꯇꯨꯂꯇꯤꯞ ꯄꯨꯝꯅꯃꯛ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯕꯒꯤ ꯃꯑꯣꯡ ꯑꯃꯗꯤ ꯃꯈꯣꯌꯒꯤ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯈꯅꯕꯅꯤ :

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

ꯃꯜꯇꯤꯄꯜ-ꯂꯥꯏꯟ ꯂꯤꯉ꯭ꯀꯁꯤꯡ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯂꯥꯏꯅꯁꯤꯡ ꯔꯦꯞ ꯇꯧꯕꯥ ꯍꯥꯏꯄꯔꯂꯤꯉ꯭ꯛ ꯑꯃꯗꯥ ꯇꯨꯂꯇꯤꯞ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯄꯥꯝꯃꯤ꯫ ꯇꯨꯂꯇꯤꯞ ꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯑꯁꯤ ꯃꯁꯤꯕꯨ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯃꯁꯨꯡ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯅꯤ꯫ white-space: nowrap;ꯃꯁꯤꯗꯒꯤ ꯉꯥꯀꯊꯣꯛꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯑꯦꯉ꯭ꯀꯔꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡ, ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯇꯦꯕꯂꯁꯤꯡꯗꯥ ꯂꯩꯕꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤ ꯑꯈꯟꯅꯕꯥ ꯁꯦꯇꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫

.btn-groupa ꯅꯠꯠꯔꯒꯥ an ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ .input-group, ꯅꯠꯠꯔꯒꯥ ꯇꯦꯕꯂꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), container: 'body'ꯑꯄꯥꯝꯕꯥ ꯁꯥꯏꯗ ꯏꯐꯦꯛꯇꯁꯤꯡ (ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯍꯦꯟꯅꯥ ꯄꯥꯀꯊꯣꯛ ꯆꯥꯎꯊꯣꯀꯍꯅꯕꯥ ꯑꯃꯁꯨꯡ/ ꯅꯠꯠꯔꯒꯥ ꯇꯨꯂꯇꯤꯞ ꯑꯗꯨ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯁꯤꯒꯤ ꯒꯣꯜꯗ ꯀꯣꯟꯅꯥ ꯃꯥꯡꯈꯤꯕꯥ)꯫

ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯎꯠꯅꯕꯥ ꯍꯣꯠꯅꯒꯅꯨ꯫

$(...).tooltip('show')ꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯀꯗꯥꯏꯗꯥ ꯂꯩꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯏꯅꯚꯣꯛ display: none;ꯇꯧꯕꯅꯥ ꯇꯨꯂꯇꯤꯞ ꯑꯗꯨ ꯑꯔꯥꯅꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯊꯝꯂꯒꯅꯤ꯫

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

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

ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡꯗꯥ ꯔꯦꯄꯔ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫

disableda ꯅꯠꯠꯔꯒꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯇꯨꯂꯇꯤꯞ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ .disabled, ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ aꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯝꯃꯨ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ <div>ꯇꯨꯂꯇꯤꯞ ꯑꯗꯨ ꯃꯗꯨꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧ꯫<div>

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

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

ꯃꯤꯡ ꯃꯈꯜ ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ ꯋꯥꯔꯣꯜ
ꯑꯦꯅꯤꯃꯦꯁꯟ ꯇꯧꯕꯥ꯫ ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ ꯑꯆꯨꯝꯕ ꯇꯨꯂꯇꯤꯄꯇꯥ CSS ꯐꯦꯗ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧ꯫
ꯀꯟꯇꯦꯅꯔ ꯑꯃꯥ ꯌꯥꯑꯣꯔꯤ꯫ ꯁ꯭ꯠꯔꯤꯡ | ꯑꯔꯥꯟꯕ ꯑꯔꯥꯟꯕ

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

ꯊꯦꯡꯊꯕ ꯃꯁꯤꯡ | ꯄꯣꯠꯂꯝ

ꯇꯨꯂꯇꯤꯞ (ms) ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯊꯦꯡꯊꯕꯥ - ꯃꯦꯅꯨꯑꯦꯜ ꯇ꯭ꯔꯤꯒꯔ ꯃꯈꯜ ꯑꯗꯨꯗꯥ ꯆꯠꯅꯔꯣꯏ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯝꯕꯔ ꯑꯃꯥ ꯁꯞꯂꯥꯏ ꯇꯧꯔꯕꯗꯤ, ꯂꯣꯠꯄꯥ/ꯁꯣ ꯑꯅꯤꯃꯛꯇꯥ ꯊꯦꯡꯊꯕꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫

ꯑꯣꯕꯖꯦꯛꯇ ꯁ꯭ꯠꯔꯀꯆꯔ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯡꯁꯤꯅꯤ:delay: { "show": 500, "hide": 100 }

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ ꯑꯔꯥꯟꯕ ꯇꯨꯂꯇꯤꯄꯇꯥ HTML ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯔꯥꯅꯕꯥ ꯑꯣꯏꯔꯕꯗꯤ, jQueryꯒꯤ textꯃꯦꯊꯗ ꯑꯁꯤ DOMꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ XSS ꯑꯦꯇꯦꯀꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯋꯥꯈꯜ ꯇꯥꯔꯕꯗꯤ ꯇꯦꯛꯁꯠ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫ ꯁ꯭ꯠꯔꯤꯡ | ꯃꯊꯧ 'ꯃꯊꯛ'

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

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

ꯁꯦꯂꯦꯛꯇꯔ ꯑꯣꯏꯕꯥ꯫ ꯄꯔꯦꯡ ꯑꯔꯥꯟꯕ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯥ ꯄꯤꯔꯕꯗꯤ, ꯇꯨꯂꯇꯤꯞ ꯑꯣꯕꯖꯦꯛꯇꯁꯤꯡ ꯑꯗꯨ ꯑꯀꯛꯅꯕꯥ ꯇꯥꯔꯒꯦꯠꯁꯤꯡꯗꯥ ꯗꯦꯂꯤꯒꯦꯠ ꯇꯧꯒꯅꯤ꯫ ꯆꯠꯅꯕꯤꯗꯥ, ꯃꯁꯤ ꯗꯥꯏꯅꯥꯃꯤꯛ HTML ꯀꯟꯇꯦꯟꯇ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯍꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯃꯁꯤ ꯑꯃꯁꯨꯡ ꯏꯅꯐꯣꯔꯃꯦꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯈꯨꯗꯝ ꯑꯃꯥ ꯌꯦꯡꯕꯤꯌꯨ .
ꯇꯦꯃꯞꯂꯦꯠ ꯑꯃꯥ꯫ ꯄꯔꯦꯡ '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ꯇꯨꯂꯇꯤꯞ ꯁꯦꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ HTML ꯕꯦꯖ ꯇꯧꯕꯥ꯫

ꯇꯨꯂꯇꯤꯞ titleꯑꯁꯤ ꯏꯅꯖꯦꯀꯁꯟ ꯇꯧꯒꯅꯤ .tooltip-inner.

.tooltip-arrowꯇꯨꯂꯇꯤꯄꯀꯤ ꯑꯦꯔꯣ ꯑꯣꯏꯔꯒꯅꯤ꯫

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯄꯥꯟꯗꯥ ꯂꯩꯕꯥ ꯔꯦꯄꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ .tooltipꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯂꯩꯒꯗꯕꯅꯤ꯫

ꯃꯤꯡꯊꯣꯜ ꯁ꯭ꯠꯔꯤꯡ | ꯃꯊꯧ '' .

titleꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯂꯩꯠꯔꯕꯗꯤ ꯗꯤꯐꯣꯜꯇ ꯇꯥꯏꯇꯜ ꯚꯦꯜꯌꯨ .

thisꯀꯔꯤꯒꯨꯝꯕꯥ ꯐꯉ꯭ꯀꯁꯟ ꯑꯃꯥ ꯄꯤꯔꯕꯗꯤ, ꯃꯁꯤ ꯇꯨꯂꯇꯤꯞ ꯑꯗꯨ ꯑꯦꯇꯦꯆ ꯇꯧꯔꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯃꯁꯤꯒꯤ ꯔꯦꯐꯥꯔꯦꯟꯁ ꯁꯦꯠ ꯇꯧꯗꯨꯅꯥ ꯀꯧꯒꯅꯤ꯫

ꯀꯔꯤꯒꯨꯝꯕ ꯑꯃ ꯊꯣꯛꯍꯟꯕ ꯄꯔꯦꯡ ‘ꯍꯣꯚꯔ ꯐꯣꯀꯁ’ ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫ ꯇꯨꯂꯇꯤꯞ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯒꯅꯤ - ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯣ | ꯍꯣꯚꯔ ꯇꯧꯕꯥ | ꯐꯣꯀꯁ ꯇꯧꯕꯥ | ꯏꯁꯥꯅ ꯄꯥꯉꯡꯣꯡꯄ. ꯅꯍꯥꯛꯅꯥ ꯃꯜꯇꯤꯄꯜ ꯇ꯭ꯔꯤꯒꯔꯁꯤꯡ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ; ꯃꯈꯣꯌꯕꯨ ꯁ꯭ꯄꯦꯁ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯣꯈꯥꯌꯅꯥ ꯊꯝꯃꯨ꯫ manualꯑꯇꯣꯞꯄꯥ ꯇ꯭ꯔꯤꯒꯔ ꯑꯃꯒꯥ ꯄꯨꯅꯁꯤꯅꯕꯥ ꯌꯥꯗꯦ꯫
ꯚꯤꯎꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫ ꯁ꯭ꯠꯔꯤꯡ | ꯑꯣꯕꯖꯦꯛꯇ | ꯃꯊꯧ { ꯁꯦꯂꯦꯛꯇꯔ: 'ꯍꯀꯆꯥꯡ', ꯄꯦꯗꯤꯡ: ꯰ }

ꯇꯨꯂꯇꯤꯞ ꯑꯁꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯁꯤꯒꯤ ꯉꯃꯈꯩꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯝꯃꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: viewport: '#viewport'ꯅꯠꯔꯒꯥ꯫{ "selector": "#viewport", "padding": 0 }

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

ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯇꯨꯂꯇꯤꯄꯁꯤꯡꯒꯤꯗꯃꯛ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ꯫

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

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫ ꯋꯥꯔꯣꯜ
show.bs.ꯇꯨꯂꯇꯤꯞ ꯑꯁꯤ ꯌꯦꯡꯕꯤꯌꯨ꯫ showꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
shown.bs.ꯇꯨꯂꯇꯤꯞ ꯑꯁꯤ ꯌꯥꯑꯣꯔꯤ꯫ ꯇꯨꯂꯇꯤꯞ ꯑꯁꯤ ꯌꯨꯖꯔꯅꯥ ꯎꯕꯥ ꯐꯪꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯏꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫
ꯂꯣꯠꯁꯤꯅꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯇꯨꯂꯇꯤꯞ꯫ hideꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯂꯣꯠꯁꯤꯜꯂꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯇꯨꯂꯇꯤꯞ꯫ ꯇꯨꯂꯇꯤꯞ ꯑꯗꯨ ꯌꯨꯖꯔꯗꯒꯤ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫
ꯏꯅꯁꯥꯔꯠ ꯇꯧꯔꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯇꯨꯂꯇꯤꯞ꯫ show.bs.tooltipꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯇꯨꯂꯇꯤꯞ ꯇꯦꯃꯞꯂꯦꯠ ꯑꯗꯨ DOMꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

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

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

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

ꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯃꯈꯥ ꯄꯣꯅꯕꯥ꯫

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

ꯑꯣꯄꯁꯟ-ꯏꯟ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯂꯩ꯫

ꯄꯔꯐꯣꯃꯦꯟꯁꯀꯤ ꯃꯔꯃꯁꯤꯡꯅꯥ, ꯇꯨꯂꯇꯤꯞ ꯑꯃꯁꯨꯡ ꯄꯣꯄꯣꯚꯔ ꯗꯦꯇꯥ-ꯑꯦꯄꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯣꯄꯁꯟ-ꯏꯅꯅꯤ, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌ ꯃꯁꯥꯅꯥ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯒꯗꯕꯅꯤ .

data-toggleꯄꯦꯖ ꯑꯃꯗꯥ ꯄꯣꯄꯣꯚꯔ ꯄꯨꯝꯅꯃꯛ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯕꯒꯤ ꯃꯑꯣꯡ ꯑꯃꯗꯤ ꯃꯈꯣꯌꯒꯤ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯈꯅꯕꯅꯤ :

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

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

.btn-groupa ꯅꯠꯠꯔꯒꯥ an ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ .input-group, ꯅꯠꯠꯔꯒꯥ ꯇꯦꯕꯂꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), container: 'body'ꯑꯄꯥꯝꯕꯥ ꯁꯥꯏꯗ ꯏꯐꯦꯛꯇꯁꯤꯡ (ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯍꯦꯟꯅꯥ ꯄꯥꯀꯊꯣꯛ-ꯆꯥꯎꯊꯣꯀꯍꯅꯕꯥ ꯑꯃꯁꯨꯡ/ ꯅꯠꯠꯔꯒꯥ ꯄꯣꯄꯣꯚꯔ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯗꯨꯒꯤ ꯒꯣꯜꯗ ꯀꯣꯟꯅꯥ ꯃꯥꯡꯈꯤꯕꯥ)꯫

ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯎꯠꯅꯕꯥ ꯍꯣꯠꯅꯒꯅꯨ꯫

$(...).popover('show')ꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯀꯗꯥꯏꯗꯥ ꯂꯩꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯏꯅꯚꯣꯏꯁ display: none;ꯇꯧꯕꯅꯥ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯑꯔꯥꯅꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯊꯝꯂꯒꯅꯤ꯫

ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯄꯣꯄꯊꯣꯀꯄꯁꯤꯡ ꯑꯁꯤ ꯔꯦꯄꯔ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫

disableda ꯅꯠꯠꯔꯒꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯄꯣꯄꯣꯚꯔ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ .disabled, ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ aꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯝꯃꯨ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ <div>ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯃꯗꯨꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧ꯫<div>

ꯃꯜꯇꯤꯄꯜ-ꯂꯥꯏꯟ ꯂꯤꯉ꯭ꯀꯁꯤꯡ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯂꯥꯏꯅꯁꯤꯡ ꯔꯦꯞ ꯇꯧꯕꯥ ꯍꯥꯏꯄꯔꯂꯤꯉ꯭ꯛ ꯑꯃꯗꯥ ꯄꯣꯄꯣꯚꯔ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯄꯥꯝꯃꯤ꯫ ꯄꯣꯄꯑꯣꯚꯔ ꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯑꯁꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯃꯁꯨꯡ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯅꯤ꯫ white-space: nowrap;ꯃꯁꯤꯗꯒꯤ ꯉꯥꯀꯊꯣꯛꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯑꯦꯉ꯭ꯀꯔꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯈꯨꯗꯃꯁꯤꯡ꯫

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

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

ꯄꯣꯄꯣꯚꯔ ꯇꯞꯄꯥ꯫

ꯂꯣꯕꯣꯔꯇꯤꯁꯇꯥ ꯁꯦꯗ ꯄꯣꯁꯨꯑꯦꯔꯦ ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯁ꯭ꯠ꯫ ꯑꯦꯅꯤꯌꯟ ꯏꯎ ꯂꯤꯑꯣ ꯀ꯭ꯕꯥꯝ꯫ ꯄꯦꯂꯦꯟꯇꯦꯁ꯭ꯛ ꯑꯣꯔꯅꯥꯔꯦ ꯁꯦꯝ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀ꯭ꯕꯥꯝ ꯚꯦꯅꯦꯅꯥꯇꯤꯁ ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ꯫

ꯄꯣꯄꯣꯚꯔ ꯔꯥꯏꯠ꯫

ꯂꯣꯕꯣꯔꯇꯤꯁꯇꯥ ꯁꯦꯗ ꯄꯣꯁꯨꯑꯦꯔꯦ ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯁ꯭ꯠ꯫ ꯑꯦꯅꯤꯌꯟ ꯏꯎ ꯂꯤꯑꯣ ꯀ꯭ꯕꯥꯝ꯫ ꯄꯦꯂꯦꯟꯇꯦꯁ꯭ꯛ ꯑꯣꯔꯅꯥꯔꯦ ꯁꯦꯝ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀ꯭ꯕꯥꯝ ꯚꯦꯅꯦꯅꯥꯇꯤꯁ ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ꯫

ꯄꯣꯄꯣꯚꯔ ꯕꯣꯇꯝ꯫

ꯂꯣꯕꯣꯔꯇꯤꯁꯇꯥ ꯁꯦꯗ ꯄꯣꯁꯨꯑꯦꯔꯦ ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯁ꯭ꯠ꯫ ꯑꯦꯅꯤꯌꯟ ꯏꯎ ꯂꯤꯑꯣ ꯀ꯭ꯕꯥꯝ꯫ ꯄꯦꯂꯦꯟꯇꯦꯁ꯭ꯛ ꯑꯣꯔꯅꯥꯔꯦ ꯁꯦꯝ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀ꯭ꯕꯥꯝ ꯚꯦꯅꯦꯅꯥꯇꯤꯁ ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ꯫

ꯄꯣꯄꯣꯚꯔꯅꯥ ꯆꯠꯈꯤ꯫

ꯂꯣꯕꯣꯔꯇꯤꯁꯇꯥ ꯁꯦꯗ ꯄꯣꯁꯨꯑꯦꯔꯦ ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯁ꯭ꯠ꯫ ꯑꯦꯅꯤꯌꯟ ꯏꯎ ꯂꯤꯑꯣ ꯀ꯭ꯕꯥꯝ꯫ ꯄꯦꯂꯦꯟꯇꯦꯁ꯭ꯛ ꯑꯣꯔꯅꯥꯔꯦ ꯁꯦꯝ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀ꯭ꯕꯥꯝ ꯚꯦꯅꯦꯅꯥꯇꯤꯁ ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ꯫

ꯂꯥꯏꯚ ꯗꯦꯃꯣ꯫

<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> ꯁꯤꯖꯤꯟꯅꯒꯗꯕꯅꯤ , ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯁꯨ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ꯫<button>role="button"tabindex

<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="".

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

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

ꯑꯌꯥꯎꯕ ꯁ꯭ꯠꯔꯤꯡ | ꯃꯊꯧ '' .

data-contentꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯂꯩꯠꯔꯕꯗꯤ ꯗꯤꯐꯣꯜꯇ ꯀꯟꯇꯦꯟꯇ ꯚꯦꯜꯌꯨ .

thisꯀꯔꯤꯒꯨꯝꯕꯥ ꯐꯉ꯭ꯀꯁꯟ ꯑꯃꯥ ꯄꯤꯔꯕꯗꯤ, ꯃꯁꯤ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯑꯦꯇꯦꯆ ꯇꯧꯔꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯃꯁꯤꯒꯤ ꯔꯦꯐꯥꯔꯦꯟꯁ ꯁꯦꯠ ꯇꯧꯗꯨꯅꯥ ꯀꯧꯒꯅꯤ꯫

ꯊꯦꯡꯊꯕ ꯃꯁꯤꯡ | ꯄꯣꯠꯂꯝ

ꯄꯣꯄꯣꯚꯔ (ms) ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯊꯦꯡꯊꯕꯥ - ꯃꯦꯅꯨꯑꯦꯜ ꯇ꯭ꯔꯤꯒꯔ ꯃꯈꯜ ꯑꯗꯨꯗꯥ ꯆꯠꯅꯔꯣꯏ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯝꯕꯔ ꯑꯃꯥ ꯁꯞꯂꯥꯏ ꯇꯧꯔꯕꯗꯤ, ꯂꯣꯠꯄꯥ/ꯁꯣ ꯑꯅꯤꯃꯛꯇꯥ ꯊꯦꯡꯊꯕꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫

ꯑꯣꯕꯖꯦꯛꯇ ꯁ꯭ꯠꯔꯀꯆꯔ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯡꯁꯤꯅꯤ:delay: { "show": 500, "hide": 100 }

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ ꯑꯔꯥꯟꯕ ꯄꯣꯄꯣꯚꯔꯗꯥ HTML ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯔꯥꯅꯕꯥ ꯑꯣꯏꯔꯕꯗꯤ, jQueryꯒꯤ textꯃꯦꯊꯗ ꯑꯁꯤ DOMꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ XSS ꯑꯦꯇꯦꯀꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯋꯥꯈꯜ ꯇꯥꯔꯕꯗꯤ ꯇꯦꯛꯁꯠ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫ ꯁ꯭ꯠꯔꯤꯡ | ꯃꯊꯧ 'ꯆꯨꯝꯃꯤ'

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

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

ꯁꯦꯂꯦꯛꯇꯔ ꯑꯣꯏꯕꯥ꯫ ꯄꯔꯦꯡ ꯑꯔꯥꯟꯕ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯥ ꯄꯤꯔꯕꯗꯤ, ꯄꯣꯄꯣꯚꯔ ꯑꯣꯕꯖꯦꯛꯇꯁꯤꯡ ꯑꯗꯨ ꯑꯀꯛꯅꯕꯥ ꯇꯥꯔꯒꯦꯇꯁꯤꯡꯗꯥ ꯁꯤꯟꯅꯒꯅꯤ꯫ ꯆꯠꯅꯕꯤꯗꯥ, ꯃꯁꯤ ꯗꯥꯏꯅꯥꯃꯤꯛ HTML ꯀꯟꯇꯦꯟꯇ ꯄꯣꯄꯑꯣꯚꯔꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯍꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯃꯁꯤ ꯑꯃꯁꯨꯡ ꯏꯅꯐꯣꯔꯃꯦꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯈꯨꯗꯝ ꯑꯃꯥ ꯌꯦꯡꯕꯤꯌꯨ .
ꯇꯦꯃꯞꯂꯦꯠ ꯑꯃꯥ꯫ ꯄꯔꯦꯡ '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

ꯄꯣꯄꯑꯣꯚꯔ ꯁꯦꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ HTML ꯕꯦꯖ ꯇꯧꯕꯥ꯫

ꯄꯣꯄꯣꯚꯔꯁꯤꯡ titleꯑꯁꯤ ꯏꯅꯖꯦꯀꯁꯟ ꯇꯧꯒꯅꯤ .popover-title.

ꯄꯣꯄꯣꯚꯔꯁꯤꯡ contentꯑꯁꯤ ꯏꯅꯖꯦꯀꯁꯟ ꯇꯧꯒꯅꯤ .popover-content.

.arrowꯄꯣꯄꯣꯚꯔꯒꯤ ꯇꯤꯔ ꯑꯣꯏꯔꯒꯅꯤ꯫

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯄꯥꯟꯗꯥ ꯂꯩꯕꯥ ꯔꯦꯄꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ .popoverꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯂꯩꯒꯗꯕꯅꯤ꯫

ꯃꯤꯡꯊꯣꯜ ꯁ꯭ꯠꯔꯤꯡ | ꯃꯊꯧ '' .

titleꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯂꯩꯠꯔꯕꯗꯤ ꯗꯤꯐꯣꯜꯇ ꯇꯥꯏꯇꯜ ꯚꯦꯜꯌꯨ .

thisꯀꯔꯤꯒꯨꯝꯕꯥ ꯐꯉ꯭ꯀꯁꯟ ꯑꯃꯥ ꯄꯤꯔꯕꯗꯤ, ꯃꯁꯤ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯑꯦꯇꯦꯆ ꯇꯧꯔꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯃꯁꯤꯒꯤ ꯔꯦꯐꯥꯔꯦꯟꯁ ꯁꯦꯠ ꯇꯧꯗꯨꯅꯥ ꯀꯧꯒꯅꯤ꯫

ꯀꯔꯤꯒꯨꯝꯕ ꯑꯃ ꯊꯣꯛꯍꯟꯕ ꯄꯔꯦꯡ ‘ꯀ꯭ꯂꯤꯛ’ ꯇꯧꯕꯥ꯫ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯄꯣꯄꯑꯣꯚꯔ ꯑꯁꯤ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯒꯦ - ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯤꯌꯨ | ꯍꯣꯚꯔ ꯇꯧꯕꯥ | ꯐꯣꯀꯁ ꯇꯧꯕꯥ | ꯏꯁꯥꯅ ꯄꯥꯉꯡꯣꯡꯄ. ꯅꯍꯥꯛꯅꯥ ꯃꯜꯇꯤꯄꯜ ꯇ꯭ꯔꯤꯒꯔꯁꯤꯡ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ; ꯃꯈꯣꯌꯕꯨ ꯁ꯭ꯄꯦꯁ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯣꯈꯥꯌꯅꯥ ꯊꯝꯃꯨ꯫ manualꯑꯇꯣꯞꯄꯥ ꯇ꯭ꯔꯤꯒꯔ ꯑꯃꯒꯥ ꯄꯨꯅꯁꯤꯅꯕꯥ ꯌꯥꯗꯦ꯫
ꯚꯤꯎꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫ ꯁ꯭ꯠꯔꯤꯡ | ꯑꯣꯕꯖꯦꯛꯇ | ꯃꯊꯧ { ꯁꯦꯂꯦꯛꯇꯔ: 'ꯍꯀꯆꯥꯡ', ꯄꯦꯗꯤꯡ: ꯰ }

ꯄꯣꯄꯣꯚꯔ ꯑꯁꯤ ꯏꯂꯤꯃꯦꯟꯇ ꯑꯁꯤꯒꯤ ꯉꯃꯈꯩꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯝꯃꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: viewport: '#viewport'ꯅꯠꯔꯒꯥ꯫{ "selector": "#viewport", "padding": 0 }

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

ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔꯁꯤꯡꯒꯤꯗꯃꯛ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ꯫

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

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫ ꯋꯥꯔꯣꯜ
ꯁꯣ.ꯕꯤ.ꯑꯦꯁ.ꯄꯣꯄꯣꯚꯔ ꯇꯧꯕꯥ꯫ showꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯎꯠꯂꯤ.ꯕꯤ.ꯑꯦꯁ.ꯄꯣꯄꯣꯚꯔ꯫ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯄꯣꯄꯑꯣꯚꯔ ꯑꯗꯨ ꯌꯨꯖꯔꯅꯥ ꯎꯕꯥ ꯐꯪꯍꯅꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫
ꯂꯣꯠꯁꯤꯜꯂꯨ꯫ꯕꯤ.ꯑꯦꯁ.ꯄꯣꯄꯣꯚꯔ꯫ hideꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯂꯣꯠꯁꯤꯜꯂꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯄꯣꯄꯣꯚꯔ꯫ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯄꯣꯄꯑꯣꯚꯔ ꯑꯗꯨ ꯌꯨꯖꯔꯗꯒꯤ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫
ꯏꯅꯁꯥꯔꯠ ꯇꯧꯈꯤ꯫ꯕꯤ.ꯑꯦꯁ.ꯄꯣꯄꯣꯚꯔ ꯇꯧꯕꯥ꯫ show.bs.popoverꯊꯧꯔꯝ ꯑꯁꯤ ꯄꯣꯄꯣꯚꯔ ꯇꯦꯃꯞꯂꯦꯠ ꯑꯗꯨ ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
$('#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ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯂꯩꯔꯕꯗꯤ, ꯑꯦꯂꯔꯠ ꯑꯗꯨ ꯂꯧꯊꯣꯛꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯂꯣꯏꯁꯤꯅꯒꯅꯤ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

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

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫ ꯋꯥꯔꯣꯜ
ꯀ꯭ꯂꯣꯖ.ꯕꯤ.ꯑꯦꯁ.ꯑꯦꯂꯔꯠ ꯇꯧꯕꯥ꯫ closeꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯂꯣꯗ.ꯕꯤ.ꯑꯦꯁ.ꯑꯦꯂꯔꯠ ꯇꯧꯕꯥ꯫ ꯑꯦꯂꯔꯠ ꯑꯗꯨ ꯂꯣꯗ ꯇꯧꯔꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

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

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

ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

ꯐꯥꯏꯔꯐꯛꯁꯅꯥ ꯄꯦꯖ ꯂꯣꯗꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯜ ꯁ꯭ꯇꯦꯠꯁꯤꯡ (ꯗꯤꯁꯦꯕꯜ ꯑꯣꯏꯕꯥ ꯑꯃꯁꯨꯡ ꯆꯦꯛ ꯇꯧꯕꯥ) ꯂꯦꯡꯗꯅꯥ ꯂꯩꯍꯜꯂꯤ . ꯃꯁꯤꯒꯤ ꯋꯥꯔꯀꯔꯎꯟꯗ ꯑꯃꯗꯤ ꯁꯤꯖꯤꯟꯅꯕꯅꯤ autocomplete="off". ꯃꯣꯖꯤꯂꯥ ꯕꯥꯒ #654072 ꯌꯦꯡꯕꯤꯌꯨ꯫

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

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

ꯃꯁꯤꯒꯤ ꯐꯤꯆꯔ ꯑꯁꯤ v3.3.5 ꯗꯒꯤ ꯍꯧꯅꯥ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤ ꯑꯃꯁꯨꯡ v4 ꯗꯥ ꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ꯫

ꯅꯍꯥꯛꯅꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯁ꯭ꯇꯦꯠ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ!

ꯃꯁꯤꯒꯤ ꯗꯦꯃꯣꯟꯁꯠꯔꯦꯁꯟ ꯑꯁꯤꯒꯤꯗꯃꯛ ꯑꯩꯈꯣꯌꯅꯥ data-loading-textꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯔꯤ $().button('loading'), ꯑꯗꯨꯕꯨ ꯃꯗꯨ ꯑꯗꯣꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯥ ꯑꯃꯠꯇꯥ ꯉꯥꯏꯔꯕꯥ ꯔꯥꯖ꯭ꯌ ꯅꯠꯇꯦ꯫ ꯃꯁꯤꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯃꯈꯥꯒꯤ $().button(string)ꯗꯣꯀꯨꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯍꯦꯟꯅꯥ ꯌꯦꯡꯕꯤꯌꯨ .

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

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

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

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

ꯄ꯭ꯔꯤ-ꯇꯣꯒꯜ ꯇꯧꯔꯕꯥ ꯕꯇꯅꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫.active ꯑꯃꯁꯨꯡ ...aria-pressed="true"

.activeꯄ꯭ꯔꯤ-ꯇꯣꯒꯜ ꯇꯧꯔꯕꯥ ꯕꯇꯅꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯁꯨꯡ aria-pressed="true"ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ buttonꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯗꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ꯫

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

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

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

ꯃꯃꯥꯡꯗꯥ ꯈꯅꯒꯠꯂꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫.active

.activeꯃꯃꯥꯡꯗꯥ ꯈꯅꯒꯠꯂꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡꯒꯤꯗꯃꯛ, ꯅꯍꯥꯛꯅꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯏꯅꯄꯨꯠ ꯑꯗꯨꯒꯤ labelꯃꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ꯫

ꯚꯤꯖꯨꯑꯦꯜ ꯆꯦꯛ ꯇꯧꯔꯕꯥ ꯁ꯭ꯇꯦꯠ ꯑꯗꯨ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯈꯛꯇꯗꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯏ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯆꯦꯀꯕꯣꯛꯁ ꯕꯇꯟ ꯑꯃꯒꯤ ꯆꯦꯛ ꯇꯧꯔꯕꯥ ꯁ꯭ꯇꯦꯠ ꯑꯗꯨ ꯕꯇꯟ clickꯑꯗꯨꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯃꯥ ꯐꯥꯏꯔ ꯇꯧꯗꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯔꯕꯗꯤ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯏꯅꯄꯨꯠꯀꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯁꯦꯠ ꯇꯧꯕꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ <input type="reset">ꯅꯠꯠꯔꯒꯥ ꯁꯦꯇꯤꯡ ꯇꯧꯕꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ), ꯅꯍꯥꯛꯅꯥ ꯏꯅꯄꯨꯠ ꯑꯗꯨꯒꯤ ꯃꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯇꯣꯒꯜ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯒꯅꯤ꯫checked.activelabel

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

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

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

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

ꯀꯣꯂꯥꯞꯁ.ꯖꯦ.ꯑꯦꯁ _

ꯐꯖꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯕꯥ ꯂꯃꯆꯠ-ꯁꯥꯖꯠꯀꯤꯗꯃꯛ ꯀ꯭ꯂꯥꯁ ꯃꯁꯤꯡ ꯈꯔꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯄ꯭ꯂꯒꯏꯟ꯫

ꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯃꯈꯥ ꯄꯣꯅꯕꯥ꯫

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

ꯈꯨꯗꯝ

ꯀ꯭ꯂꯥꯁ ꯍꯣꯡꯗꯣꯛ-ꯍꯣꯡꯖꯤꯟ ꯇꯧꯕꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯇꯣꯞꯄꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯕꯇꯅꯁꯤꯡ ꯑꯁꯤ ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯣ:

  • .collapseꯀꯟꯇꯦꯟꯇ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫
  • .collapsingꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡꯒꯤ ꯃꯇꯃꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫
  • .collapse.inꯀꯟꯇꯦꯟꯇ ꯎꯠꯂꯤ꯫

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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ꯌꯥꯏ꯫

  • ꯕꯨꯇꯞꯂꯥꯏ ꯇꯧꯕꯥ꯫
  • ꯋꯥꯟ ꯏꯇꯃꯁ ꯑꯦꯁꯤ ꯐꯦꯁꯤꯂꯤꯟ꯫
  • ꯑꯅꯤꯁꯨꯕꯥ ꯏꯔꯣꯁ꯫

ꯑꯦꯛꯁꯄꯥꯟꯗ/ꯀꯣꯂꯥꯞꯁ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯑꯦꯛꯁꯦꯁꯤꯕꯜ ꯑꯣꯏꯍꯅꯕꯥ꯫

aria-expandedꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯁꯤꯅꯥ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇꯀꯤ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯐꯤꯚꯝ ꯑꯗꯨ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯇꯥꯀꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯂꯣꯗ ꯇꯧꯔꯕꯗꯤ, ꯃꯁꯤꯒꯤ ꯚꯦꯜꯌꯨ ꯑꯃꯥ aria-expanded="false". ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ inꯀ꯭ꯂꯥꯁ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯑꯣꯄꯟ ꯇꯧꯅꯕꯥ ꯁꯦꯠ ꯇꯧꯔꯕꯗꯤ, aria-expanded="true"ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯀꯟꯠꯔꯣꯂꯗꯥ ꯁꯦꯠ ꯇꯧꯔꯣ. ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯍꯥꯡꯗꯣꯀꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯊꯤꯡꯖꯤꯅꯈꯤꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯊꯤꯡꯖꯤꯅꯈꯤꯕꯥ ꯑꯗꯨꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯁꯤ ꯑꯣꯇꯣꯃꯦꯇꯦꯗ ꯑꯣꯏꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯒꯅꯤ꯫

ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯅꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯈꯛꯇꯃꯛ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯔꯕꯗꯤ – ꯍꯥꯌꯕꯗꯤ data-targetꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯅꯥ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯗꯥ ꯄꯣꯏꯟꯇ ꯇꯧꯔꯕꯗꯤ – ꯅꯍꯥꯛꯅꯥ ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ idꯑꯍꯦꯅꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ , ꯃꯗꯨꯗꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯗꯨ ꯌꯥꯎꯏ꯫ ꯃꯣꯗꯔꯟ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯅꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯌꯨꯖꯔꯁꯤꯡꯗꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯃꯁꯥꯃꯛꯇꯗꯥ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯆꯠꯅꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯁꯣꯔꯇꯀꯥꯠꯁꯤꯡ ꯄꯤꯔꯤ꯫aria-controlsid

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

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

  • .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="".

ꯃꯤꯡ ꯃꯈꯜ ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ ꯋꯥꯔꯣꯜ
ꯃꯃꯥ-ꯃꯄꯥ ꯑꯣꯏꯕꯥ꯫ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯣꯏꯕꯥ꯫ ꯑꯔꯥꯟꯕ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯥ ꯄꯤꯔꯕꯗꯤ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯀꯛꯅꯕꯥ ꯄꯦꯔꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯄꯨꯝꯅꯃꯛ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯥꯏꯇꯦꯝ ꯑꯁꯤ ꯎꯠꯄꯥ ꯃꯇꯃꯗꯥ ꯂꯣꯗ ꯇꯧꯒꯅꯤ꯫ (ꯇ꯭ꯔꯦꯗꯤꯁ꯭ꯅꯦꯜ ꯑꯦꯀꯣꯔꯗꯟ ꯕꯤꯍꯦꯕꯤꯌꯔꯒꯥ ꯃꯥꯟꯅꯩ - ꯃꯁꯤ panelꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ)
ꯇꯣꯒꯜ ꯇꯧꯕꯥ꯫ ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ ꯑꯆꯨꯝꯕ ꯏꯅꯚꯣꯀꯦꯁꯟꯗꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯣꯒꯜ ꯇꯧꯏ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

.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 ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔꯗꯥ ꯍꯜꯂꯀꯏ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

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

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫ ꯋꯥꯔꯣꯜ
ꯁꯣ.ꯕꯤ.ꯑꯦꯁ.ꯀꯣꯂꯥꯄꯁ ꯇꯧꯕꯥ꯫ showꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
shown.bs.ꯀꯣꯂꯥꯄꯁ ꯇꯧꯕꯥ꯫ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯌꯨꯖꯔꯗꯥ ꯀꯣꯂꯥꯞꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯕꯥ ꯐꯪꯍꯅꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯏꯁꯤꯟꯅꯕꯥ ꯉꯥꯏꯒꯅꯤ)꯫
ꯂꯣꯠꯄꯥ.ꯕꯤ.ꯑꯦꯁ.ꯀꯣꯂꯥꯞꯁ ꯇꯧꯕꯥ꯫ hideꯃꯦꯊꯗ ꯑꯗꯨ ꯀꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯂꯣꯠꯁꯤꯜꯂꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯀꯣꯂꯥꯞꯁ ꯇꯧꯕꯥ꯫ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯌꯨꯖꯔꯗꯒꯤ ꯀꯣꯂꯥꯞꯄꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯏꯁꯤꯟꯅꯕꯥ ꯉꯥꯏꯒꯅꯤ)꯫
$('#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 ꯑꯃꯠꯇꯥ ꯊꯝꯃꯨ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯐꯣꯔꯃꯦꯠ ꯇꯧꯒꯅꯤ꯫

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

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

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

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

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

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

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

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

$('.carousel').carousel()

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

ꯃꯤꯡ ꯃꯈꯜ ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ ꯋꯥꯔꯣꯜ
ꯏꯟꯇꯔꯚꯜ ꯇꯧꯕꯥ꯫ ꯃꯁꯤꯡ ꯵꯰꯰꯰ ꯄꯤꯈꯤ꯫ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯕꯨ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯁꯥꯏꯀꯜ ꯊꯧꯕꯒꯤ ꯃꯔꯛꯇꯥ ꯊꯦꯡꯊꯒꯗꯕꯥ ꯃꯇꯃꯒꯤ ꯆꯥꯡ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯔꯥꯅꯕꯥ ꯑꯣꯏꯔꯕꯗꯤ, ꯀꯦꯔꯣꯁꯤꯜ ꯑꯁꯤ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯔꯣꯏ꯫
ꯉꯩꯍꯥꯛ ꯂꯦꯞꯄ ꯁ꯭ꯠꯔꯤꯡ | ꯑꯃꯠꯇ ꯑꯣꯏꯗꯕ "ꯍꯣꯚꯥꯔ"꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯁꯦꯠ ꯇꯧꯔꯕꯗꯤ "hover", ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯒꯤ ꯁꯥꯏꯛꯂꯤꯡ ꯑꯗꯨ ꯑꯣꯟꯊꯣꯀꯏ mouseenterꯑꯃꯁꯨꯡ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯒꯤ ꯁꯥꯏꯛꯂꯤꯡ ꯑꯗꯨ ꯑꯣꯟ mouseleave. ꯀꯔꯤꯒꯨꯝꯕꯥ ,ꯗꯥ ꯁꯦꯠ ꯇꯧꯔꯕꯗꯤ null, ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯒꯤ ꯃꯊꯛꯇꯥ ꯍꯣꯚꯔ ꯇꯧꯕꯅꯥ ꯃꯗꯨ ꯊꯤꯡꯖꯤꯜꯂꯣꯏ꯫
ꯌꯣꯝꯕ ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ ꯑꯆꯨꯝꯕ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨ ꯂꯦꯞꯇꯅꯥ ꯁꯥꯏꯀꯜ ꯊꯧꯒꯗ꯭ꯔꯥ ꯅꯠꯠꯔꯒꯥ ꯍꯥꯔꯗ ꯁ꯭ꯇꯣꯞ ꯂꯩꯒꯗ꯭ꯔꯥ ꯍꯥꯌꯕꯗꯨ꯫
ꯀꯤꯕꯣꯔꯗ꯫ ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ ꯑꯆꯨꯝꯕ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯅꯥ ꯀꯤꯕꯣꯔꯗꯀꯤ ꯊꯧꯗꯣꯀꯁꯤꯡꯗꯥ ꯔꯤꯑꯦꯛꯇ ꯇꯧꯒꯗ꯭ꯔꯥ ꯍꯥꯌꯕꯗꯨ꯫

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

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

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

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

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

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

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

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

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

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

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

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫ ꯋꯥꯔꯣꯜ
ꯁ꯭ꯂꯥꯏꯗ.ꯕꯤ.ꯑꯦꯁ.ꯀꯦꯔꯣꯁꯤꯜ ꯇꯧꯕꯥ꯫ slideꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯑꯗꯨ ꯏꯅꯚꯣꯛ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯁ꯭ꯂꯥꯏꯗ.ꯕꯤ.ꯑꯦꯁ.ꯀꯦꯔꯣꯁꯤꯜ ꯇꯧꯕꯥ꯫ ꯊꯧꯔꯝ ꯑꯁꯤ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯅꯥ ꯃꯁꯥꯒꯤ ꯁ꯭ꯂꯥꯏꯗ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯗꯨ ꯂꯣꯏꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
$('#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".

ꯃꯤꯡ ꯃꯈꯜ ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ ꯋꯥꯔꯣꯜ
ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ꯫ ꯃꯁꯤꯡ | ꯐꯉ꯭ꯀꯁꯟ ꯇꯧꯕꯥ | ꯄꯣꯠꯂꯝ ꯱꯰ ꯁ꯭ꯛꯔꯣꯂꯒꯤ ꯄꯣꯖꯤꯁꯟ ꯂꯦꯄꯊꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯁ꯭ꯛꯔꯤꯅꯗꯒꯤ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯄꯤꯛꯁꯦꯂꯁꯤꯡ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯝꯕꯔ ꯑꯃꯈꯛꯇꯃꯛ ꯄꯤꯔꯕꯗꯤ ꯑꯣꯐꯁꯦꯠ ꯑꯗꯨ ꯃꯊꯛ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯒꯤ ꯃꯥꯌꯀꯩ ꯑꯅꯤꯃꯛꯇꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯒꯅꯤ꯫ ꯑꯈꯟꯅꯕꯥ ꯑꯃꯥ ꯄꯤꯅꯕꯒꯤꯗꯃꯛ, ꯃꯈꯥ ꯑꯃꯁꯨꯡ ꯃꯊꯛꯀꯤ ꯑꯣꯐꯁꯦꯠ ꯑꯃꯥ ꯄꯤꯕꯈꯛꯇꯅꯥ ꯄꯣꯠꯁꯛ ꯑꯃꯥ offset: { top: 10 }ꯅꯠꯔꯒꯥ offset: { top: 10, bottom: 5 }. ꯑꯣꯐꯁꯦꯠ ꯑꯃꯥ ꯗꯥꯏꯅꯥꯃꯤꯛ ꯑꯣꯏꯅꯥ ꯂꯦꯄꯊꯣꯀꯄꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯉ꯭ꯀꯁꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯄꯥꯟꯗꯝ ꯁꯦꯂꯦꯛꯇꯔ ꯇꯧꯕꯥ | ꯅꯣꯗ | jQuery ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ꯫ windowꯄꯣꯠꯁꯛ ꯑꯗꯨ꯫ ꯑꯦꯐꯤꯛꯁꯀꯤ ꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯥꯀꯏ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

.affix(options)

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

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

.affix('checkPosition')

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

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

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

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫ ꯋꯥꯔꯣꯜ
ꯑꯦꯐꯤꯛꯁ.ꯕꯤ.ꯑꯦꯁ.ꯑꯦꯐꯤꯛꯁ ꯇꯧꯕꯥ꯫ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯑꯦꯐꯤꯛꯁ ꯇꯧꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯈꯨꯗꯛꯇꯥ ꯃꯩ ꯊꯥꯏ꯫
ꯑꯦꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯑꯦꯐꯤꯛꯁ ꯇꯧꯕꯥ꯫ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯑꯦꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯑꯦꯐꯤꯛꯁ-ꯇꯣꯞ.ꯕꯤ.ꯑꯦꯁ.ꯑꯦꯐꯤꯛꯁ ꯇꯧꯕꯥ꯫ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯑꯦꯐꯤꯛꯁ-ꯇꯣꯞ ꯇꯧꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯑꯦꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ-ꯇꯣꯞ.ꯕꯤ.ꯑꯦꯁ.ꯑꯦꯐꯤꯛꯁ ꯇꯧꯕꯥ꯫ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯑꯦꯐꯤꯛꯁ-ꯇꯣꯞ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯑꯦꯐꯤꯛꯁ-ꯕꯣꯇꯝ.ꯕꯤ.ꯑꯦꯁ.ꯑꯦꯐꯤꯛꯁ ꯇꯧꯕꯥ꯫ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯑꯦꯐꯤꯛꯁ-ꯕꯣꯇꯝ ꯇꯧꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯈꯨꯗꯛꯇꯥ ꯃꯩ ꯊꯥꯏ꯫
ꯑꯦꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ-ꯕꯣꯇꯝ.ꯕꯤ.ꯑꯦꯁ.ꯑꯦꯐꯤꯛꯁ ꯇꯧꯕꯥ꯫ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯑꯦꯐꯤꯛꯁ-ꯕꯣꯇꯝ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫