දළ විශ්ලේෂණය

තනි හෝ සම්පාදනය කරන ලදී

ප්ලගීන තනි තනිව ඇතුළත් කළ හැක (Bootstrap හි තනි *.jsගොනු භාවිතා කරමින්), හෝ සියල්ල එකවර (භාවිතා bootstrap.jsහෝ minified bootstrap.min.js).

දත්ත ගුණාංග

JavaScript එක පේළියක්වත් ලිවීමෙන් තොරව ඔබට සියලුම Bootstrap ප්ලගීන මාර්ක්අප් API හරහා භාවිතා කළ හැක. මෙය Bootstrap හි පළමු පන්තියේ API වන අතර ප්ලගිනයක් භාවිතා කරන විට ඔබේ පළමු සැලකිල්ල විය යුතුය.

එනම්, සමහර අවස්ථාවලදී මෙම ක්‍රියාකාරිත්වය අක්‍රිය කිරීම යෝග්‍ය විය හැකිය. එම නිසා, සමඟින් ඇති ලේඛනයේ සියලුම සිදුවීම් බන්ධනය කිරීමෙන් දත්ත උපලක්ෂණ API අක්‍රිය කිරීමේ හැකියාව ද අපි ලබා දෙන්නෙමු data-api. මෙය පෙනෙන්නේ මෙසේය.

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

විකල්පයක් ලෙස, නිශ්චිත ප්ලගිනයක් ඉලක්ක කිරීමට, ප්ලගිනයේ නම නාම අවකාශයක් ලෙස දත්ත-api නාම අවකාශය සමඟ ඇතුළත් කරන්න:

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

ක්‍රමලේඛන API

JavaScript API හරහා ඔබට සියලුම Bootstrap ප්ලගීන භාවිතා කිරීමට හැකි වනු ඇතැයි අපි විශ්වාස කරමු. සියලුම පොදු 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 රාමු සමඟ Bootstrap ප්ලගීන භාවිතා කිරීම අවශ්‍ය වේ. මෙම තත්වයන් තුළ, නාම අවකාශයේ ගැටීම් විටින් විට සිදු විය හැක. මෙය සිදුවුවහොත්, ඔබට .noConflictඅගය ආපසු හැරවීමට අවශ්‍ය ප්ලගිනය ඇමතීමට හැකිය.

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

සිදුවීම්

Bootstrap බොහෝ ප්ලගීනවල අද්විතීය ක්‍රියා සඳහා අභිරුචි සිදුවීම් සපයයි. සාමාන්‍යයෙන්, මේවා අසංඛ්‍යාත සහ අතීත කෘදන්ත ස්වරූපයකින් පැමිණේ - showයම් සිදුවීමක ආරම්භයේදී අසංඛ්‍යාත (උදා. ) ක්‍රියාරම්භ කරන අතර, එහි අතීත කෘදන්ත ස්වරූපය (උදා. shown) ක්‍රියාවක් සම්පූර්ණ වූ විට ප්‍රේරණය වේ.

3.0.0 වන විට, සියලුම බූට්ස්ට්‍රැප් සිද්ධීන් නම් පරතරයක් ඇත.

සියලුම අනන්ත සිදුවීම් preventDefaultක්‍රියාකාරීත්වය සපයයි. ක්‍රියාවක් ආරම්භ වීමට පෙර එය ක්‍රියාත්මක කිරීම නැවැත්වීමේ හැකියාව මෙය සපයයි.

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

සනීපාරක්ෂක

HTML පිළිගන්නා විකල්ප සනීපාරක්ෂාව සඳහා මෙවලම් ඉඟි සහ Popovers අපගේ බිල්ට් සනීපාරක්ෂක භාවිතා කරයි.

පෙරනිමි 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)
  }
})

අනුවාද අංක

එක් එක් Bootstrap හි jQuery ප්ලගීන වල අනුවාදය VERSIONප්ලගිනයේ කන්ස්ට්‍රක්ටරයේ දේපල හරහා ප්‍රවේශ විය හැක. උදාහරණයක් ලෙස, මෙවලම් ඉඟි ප්ලගිනය සඳහා:

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

ජාවාස්ක්‍රිප්ට් අක්‍රිය කර ඇති විට විශේෂ පසුබෑමක් නොමැත

ජාවාස්ක්‍රිප්ට් අක්‍රිය කර ඇති විට බූට්ස්ට්‍රැප් ප්ලගීන විශේෂයෙන් අලංකාර ලෙස ආපසු නොවැටේ. ඔබ මෙම අවස්ථාවෙහි පරිශීලක අත්දැකීම ගැන සැලකිලිමත් වන්නේ නම්, <noscript>ඔබගේ පරිශීලකයින්ට තත්වය (සහ JavaScript නැවත සක්‍රිය කරන්නේ කෙසේද) පැහැදිලි කිරීමට භාවිතා කරන්න, සහ/හෝ ඔබේම අභිරුචි පසුබැසීමක් එක් කරන්න.

සංක්‍රාන්ති transition.js

මාරුවීම් ගැන

සරල සංක්‍රාන්ති ප්‍රයෝග සඳහා, transition.jsඅනෙකුත් JS ගොනු සමඟ එක් වරක් ඇතුළත් කරන්න. ඔබ සම්පාදනය කරන ලද (හෝ කුඩා කළ) භාවිතා කරන්නේ නම් bootstrap.js, මෙය ඇතුළත් කිරීමට අවශ්‍ය නැත - එය දැනටමත් තිබේ.

ඇතුලේ මොනවද තියෙන්නේ

Transition.js යනු සිදුවීම් සඳහා මූලික සහායකයක් transitionEndමෙන්ම CSS සංක්‍රාන්ති ඉමුලේටරයකි. එය CSS සංක්‍රාන්ති සහාය සඳහා පරීක්ෂා කිරීමට සහ එල්ලෙන සංක්‍රාන්ති අල්ලා ගැනීමට අනෙකුත් ප්ලගීන විසින් භාවිතා කරයි.

සංක්‍රාන්ති අක්‍රිය කිරීම

පහත ජාවාස්ක්‍රිප්ට් ස්නිපටය භාවිතයෙන් සංක්‍රාන්ති ගෝලීය වශයෙන් අබල කළ හැක, එය පූරණය වූ පසු transition.js(හෝ bootstrap.js, එසේ විය හැකි පරිදි) පැමිණිය යුතුය:bootstrap.min.js

$.support.transition = false

Modals modal.js

මාදිලි විධිමත්, නමුත් නම්‍යශීලී, අවම අවශ්‍ය ක්‍රියාකාරීත්වය සහ ස්මාර්ට් පෙරනිමි සමඟ සංවාද විමසයි.

HTML5 එහි අර්ථ ශාස්ත්‍රය නිර්වචනය කරන ආකාරය හේතුවෙන්, autofocusHTML ගුණාංගය Bootstrap modals තුළ බලපෑමක් නැත. එකම බලපෑම ලබා ගැනීම සඳහා, සමහර අභිරුචි JavaScript භාවිතා කරන්න:

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

සජීවී demo

පහත බොත්තම ක්ලික් කිරීමෙන් JavaScript හරහා මාදිලියක් ටොගල් කරන්න. එය පහළට ලිස්සා ගොස් පිටුවේ ඉහළ සිට මැකී යනු ඇත.

<!-- 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මාදිලියක් තුළ බූට්ස්ට්‍රැප් ජාල පද්ධතියෙන් ප්‍රයෝජන ගැනීමට .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 -->

ප්‍රේරක බොත්තම මත පදනම්ව විවිධ මාදිලියේ අන්තර්ගතය

තරමක් වෙනස් අන්තර්ගතයන් සහිත එකම මාදිලිය ක්‍රියාරම්භ කරන බොත්තම් පොකුරක් තිබේද? ක්ලික් කළ බොත්තම මත පදනම්ව මොඩලයේ අන්තර්ගතය වෙනස් කිරීමට HTML ගුණාංග (සමහර විට jQuery හරහා ) භාවිතා කරන්න event.relatedTarget. විස්තර සඳහා Modal Events docs බලන්න ,data-*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>

JavaScript හරහා

myModalජාවාස්ක්‍රිප්ට් එක පේළියක් සහිත හැඳුනුම්පතක් සහිත මාදිලියක් අමතන්න :

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

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය 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.modalhidden.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')

සිදුවීම්

Bootstrap's modal class මගින් මාදිලියේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

සියලුම මාදිලියේ සිදුවීම් මාදිලියේම (එනම් හිදී <div class="modal">) වෙඩි තබා ඇත.

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

පතන dropdown.js

උදාහරණ

navbar, tabs, සහ pills ඇතුළුව, මෙම සරල ප්ලගිනය සමඟ ඕනෑම දෙයකට පතන මෙනු එක් කරන්න.

නව තීරුවක් තුළ

පෙති ඇතුළත

භාවිතය

දත්ත ගුණාංග හෝ ජාවාස්ක්‍රිප්ට් හරහා, පතන ප්ලගිනය .openමාපිය ලැයිස්තු අයිතමයේ පන්තිය ටොගල් කිරීමෙන් සැඟවුණු අන්තර්ගතය (ඩ්‍රොප් ඩවුන් මෙනු) ටොගල් කරයි.

ජංගම උපාංගවල, පතන විවෘත කිරීම .dropdown-backdropමෙනුවෙන් පිටත තට්ටු කරන විට පතන මෙනු වැසීම සඳහා ටැප් ප්‍රදේශයක් එක් කරයි, නිසි iOS සහාය සඳහා අවශ්‍යතාවයකි. මෙයින් අදහස් කරන්නේ විවෘත පතන මෙනුවක සිට වෙනත් පතන මෙනුවකට මාරුවීම සඳහා ජංගම දුරකථනය මත අමතර තට්ටු කිරීමක් අවශ්‍ය බවයි.

සටහන: 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>

JavaScript හරහා

JavaScript හරහා පතනයන් අමතන්න:

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

විකල්ප

කිසිවක් නැත

ක්රම

$().dropdown('toggle')

දී ඇති navbar හෝ ටැබ් කළ සංචාලනයක පතන මෙනුව ටොගල් කරයි.

සිදුවීම්

.dropdown-menuසියලුම පතන සිදුවීම් ගේ මව් මූලද්‍රව්‍ය වෙත වෙඩි තබා ඇත .

සියලුම පතන සිදුවීම් වලට relatedTargetදේපලක් ඇත, එහි වටිනාකම ටොගල් ඇන්කර් මූලද්‍රව්‍යය වේ.

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

ScrollSpy scrollspy.js

navbar හි උදාහරණය

ScrollSpy ප්ලගිනය අනුචලන ස්ථානය මත පදනම්ව nav ඉලක්ක ස්වයංක්‍රීයව යාවත්කාලීන කිරීම සඳහා වේ. නව තීරුවට පහළින් ප්‍රදේශය අනුචලනය කර සක්‍රිය පන්ති වෙනස නරඹන්න. පතන උප අයිතම ද උද්දීපනය කෙරේ.

භාවිතය

සාපේක්ෂ ස්ථානගත කිරීම අවශ්ය වේ

ක්‍රියාත්මක කිරීමේ ක්‍රමය කුමක් වුවත්, scrollspy සඳහා position: relative;ඔබ ඔත්තු බලන මූලද්‍රව්‍යය භාවිතා කිරීම අවශ්‍ය වේ. බොහෝ අවස්ථාවලදී මෙය වේ <body>. හැර අනෙකුත් මූලද්‍රව්‍ය මත අනුචලන ඔත්තු බැලීමේදී , කට්ටලයක් සහ යෙදවීමට <body>වග බලා ගන්න .heightoverflow-y: scroll;

දත්ත ගුණාංග හරහා

ඔබගේ topbar සංචාලනයට පහසුවෙන් scrollspy හැසිරීම එක් data-spy="scroll"කිරීමට, ඔබට ඔත්තු බැලීමට අවශ්‍ය මූලද්‍රව්‍යයට එක් කරන්න (බොහෝ විට මෙය වනු ඇත <body>). ඉන්පසු ඕනෑම Bootstrap සංරචකයක 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>

JavaScript හරහා

ඔබේ CSS එකතු කිරීමෙන් පසු position: relative;, JavaScript හරහා scrollspy අමතන්න:

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

ක්රම

.scrollspy('refresh')

DOM වෙතින් මූලද්‍රව්‍ය එකතු කිරීම හෝ ඉවත් කිරීම සමඟ සම්බන්ධව scrollspy භාවිතා කරන විට, ඔබට එවැනි නැවුම් කිරීමේ ක්‍රමය ඇමතීමට අවශ්‍ය වනු ඇත:

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

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-offset="".

සිදුවීම්

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

Togglable tabs 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-tabsulnavnav-pills

<div>

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

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

</div>

මැකී යන බලපෑම

ටැබ් මැකී යාමට, එක් .fadeඑක් එක් කරන්න .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
})

මෙවලම් ඉඟි මෙවලම් ඉඟි. js

Jason Frame විසින් ලියන ලද විශිෂ්ට 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()
})

භාවිතය

මෙවලම් ඉඟි ප්ලගිනය ඉල්ලුම මත අන්තර්ගතය සහ සලකුණු උත්පාදනය කරයි, සහ පෙරනිමියෙන් මෙවලම් ඉඟි ඒවායේ ප්‍රේරක මූලද්‍රව්‍යයට පසුව තබයි.

JavaScript හරහා මෙවලම් ඉඟිය ක්‍රියාරම්භ කරන්න:

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

සලකුණු කිරීම

මෙවලම් ඉඟියක් සඳහා අවශ්‍ය සලකුණු කිරීම dataඋපලක්ෂණයක් පමණක් titleවන අතර HTML මූලද්‍රව්‍ය මත ඔබට මෙවලම් ඉඟියක් තිබිය යුතුය. මෙවලම් ඉඟියක උත්පාදනය කරන ලද සලකුණු කිරීම තරමක් සරල ය, නමුත් එයට ස්ථානයක් අවශ්‍ය වුවද (පෙරනිමියෙන්, 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>

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය 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.tooltiphidden.bs.tooltip

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

.tooltip('destroy')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය සඟවා විනාශ කරයි. නියෝජිතායතනය භාවිතා කරන මෙවලම් ඉඟි ( විකල්පය භාවිතයෙන් සාදනු ලැබේ )selector පැවත එන ප්‍රේරක මූලද්‍රව්‍ය මත තනි තනිව විනාශ කළ නොහැක.

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

සිදුවීම්

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

Popovers popover.js

නිවාස ද්විතීයික තොරතුරු සඳහා ඕනෑම මූලද්‍රව්‍යයකට අයිපෑඩ් වැනි අන්තර්ගතවල කුඩා ආවරණ එක් කරන්න.

මාතෘකාව සහ අන්තර්ගතය ශුන්‍ය-දිග යන දෙකම ඇති Popovers කිසි විටෙක සංදර්ශණය නොවේ.

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

උදාහරණ

ස්ථිතික popover

විකල්ප හතරක් තිබේ: ඉහළ, දකුණ, පහළ සහ වමට පෙළගස්වා ඇත.

සජීවී demo

<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පරිශීලකයා කරන ඊළඟ ක්ලික් කිරීම මත popovers ඉවත දැමීමට ප්‍රේරකය භාවිතා කරන්න .

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

භාවිතය

JavaScript හරහා popovers සබල කරන්න:

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

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-animation="".

ක්රම

$().popover(options)

මූලද්‍රව්‍ය එකතුවක් සඳහා popover ආරම්භ කරයි.

.popover('show')

මූලද්‍රව්‍යයක පොපෝවර් හෙළි කරයි. popover ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් shown.bs.popoverසිදුවීම සිදුවීමට පෙර) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" ප්‍රේරකයක් ලෙස සැලකේ. මාතෘකාව සහ අන්තර්ගතය ශුන්‍ය-දිග යන දෙකම ඇති Popovers කිසි විටෙක සංදර්ශණය නොවේ.

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

.popover('hide')

මූලද්‍රව්‍යයක පොපෝවර් සඟවයි. popover සැබවින් ම සැඟවීමට පෙර ඇමතුම්කරු වෙත ආපසු පැමිණේ (එනම්hidden.bs.popover සිදුවීම සිදුවීමට පෙර) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" ප්‍රේරකයක් ලෙස සැලකේ.

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

.popover('toggle')

මූලද්‍රව්‍යයක popover ටොගල් කරයි. popover ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීම shown.bs.popoverහෝ සිදුවීමට පෙර hidden.bs.popover) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" ප්‍රේරකයක් ලෙස සැලකේ.

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

.popover('destroy')

මූලද්‍රව්‍යයක පොපෝවර් සඟවා විනාශ කරයි. නියෝජිතායතනය භාවිතා කරන Popovers ( විකල්පය භාවිතයෙන් සාදනු ලබන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"උපලක්ෂණ ඇති පරම්පරාවේ මූලද්‍රව්‍ය මත ක්ලික් සිදුවීම් සඳහා අනතුරු ඇඟවීමක් සවන් දෙන්න . (data-api's auto-initialization භාවිතා කරන විට අවශ්‍ය නොවේ.)

$().alert('close')

අනතුරු ඇඟවීමක් DOM වෙතින් ඉවත් කිරීමෙන් එය වසා දමයි. නම් .fadeසහ.in , එය ඉවත් කිරීමට පෙර අනතුරු ඇඟවීම මැකී යනු ඇත.

සිදුවීම්

Bootstrap හි අනතුරු ඇඟවීමේ ප්ලගිනය අනතුරු ඇඟවීමේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

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

බොත්තම් button.js

බොත්තම් සමඟ තවත් කරන්න. පාලන බොත්තම සඳහන් කරයි හෝ මෙවලම් තීරු වැනි තවත් සංරචක සඳහා බොත්තම් කණ්ඩායම් සාදන්න.

රාජ්යමය

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>

හැකිලීම කඩා වැටීම .js

පහසු ටොගල් හැසිරීම සඳහා පන්ති අතලොස්සක් භාවිතා කරන නම්‍යශීලී ප්ලගිනය.

උදාහරණයක්

පන්ති වෙනස්කම් හරහා වෙනත් අංගයක් පෙන්වීමට සහ සැඟවීමට පහත බොත්තම් ක්ලික් කරන්න:

• .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-bodys සමඟ s මාරු කිරීමට ද හැකිය .list-group.

භාවිතය

කඩා වැටීමේ ප්ලගිනය බර ඉසිලීම හැසිරවීමට පන්ති කිහිපයක් භාවිතා කරයි:

• .collapseඅන්තර්ගතය සඟවයි
• .collapse.inඅන්තර්ගතය පෙන්වයි
• .collapsingසංක්‍රාන්තිය ආරම්භ වන විට එකතු කරනු ලබන අතර එය අවසන් වූ විට ඉවත් කරනු ලැබේ

මෙම පන්ති සොයාගත හැකියcomponent-animations.less .

දත්ත ගුණාංග හරහා

බිඳ වැටිය හැකි මූලද්‍රව්‍යයක පාලනය ස්වයංක්‍රීයව පැවරීමට මූලද්‍රව්‍යයට එක් කරන්න data-toggle="collapse"සහ a කරන්න. උපලක්ෂණය බිඳවැටීම යෙදීමට CSS තේරීමක් පිළිගනී data-target. කඩා වැටිය හැකි මූලද්‍රව්‍යයට data-targetපන්තිය එක් කිරීමට වග බලා ගන්න . collapseඔබ එය පෙරනිමියෙන් විවෘත කිරීමට කැමති නම්, අමතර පන්තිය එක් කරන්නin .

කඩාහැලෙන පාලනයකට Accordion වැනි කණ්ඩායම් කළමනාකරණය එක් කිරීමට, දත්ත ගුණාංගය එක් කරන්න data-parent="#selector". මෙය ක්‍රියාත්මක වන ආකාරය බැලීමට ආදර්ශනය වෙත යොමු වන්න.

JavaScript හරහා

සමඟ අතින් සබල කරන්න:

$('.collapse').collapse()

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-parent="".

ක්රම

.collapse(options)

ඔබේ අන්තර්ගතය බිඳ වැටිය හැකි මූලද්‍රව්‍යයක් ලෙස සක්‍රිය කරයි. විකල්ප විකල්ප පිළිගනී object.

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

.collapse('toggle')

හකුළ හැකි මූලද්‍රව්‍යයක් පෙන්වීමට හෝ සැඟවීමට ටොගල් කරයි. බිඳ වැටිය හැකි මූලද්‍රව්‍යය ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීම හෝ සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.collapsehidden.bs.collapse

.collapse('show')

කඩා වැටෙන මූලද්‍රව්‍යයක් පෙන්වයි. බිඳ වැටිය හැකි මූලද්‍රව්‍යය ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.collapse

.collapse('hide')

කඩා වැටෙන මූලද්‍රව්‍ය සඟවයි. බිඳ වැටිය හැකි මූලද්‍රව්‍යය ඇත්ත වශයෙන්ම සැඟවීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.hidden.bs.collapse

සිදුවීම්

Bootstrap හි බිඳවැටීමේ පන්තිය බිඳවැටීමේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

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

Carousel carousel.js

කැරොසල් වැනි මූලද්‍රව්‍ය හරහා බයිසිකල් පැදීම සඳහා විනිවිදක දර්ශන සංරචකයකි. කැදලි කැරොසල් සඳහා සහය නොදක්වයි.

උදාහරණ

කලින් ඊළඟ

<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 පමණ තබන්න, එය ස්වයංක්‍රීයව පෙළගස්වා හැඩතල ගන්වනු ඇත.

පළමු විනිවිදක ලේබලය

Nulla vitae elit libero, a pharetra augu mollis interdum.

දෙවන විනිවිදක ලේබලය

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

තුන්වන විනිවිදක ලේබලය

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පිටතම ඇති බහාලුමක් (ද ) භාවිතා කිරීම අවශ්‍ය වේ . .carouselකැරොසල් කිහිපයක් එකතු කරන විට, හෝ කැරොසල් වෙනස් කිරීමේදී id, අදාළ පාලන යාවත්කාලීන කිරීමට වග බලා ගන්න.

දත්ත ගුණාංග හරහා

කැරූසලයේ පිහිටීම පහසුවෙන් පාලනය කිරීමට දත්ත ගුණාංග භාවිතා කරන්න. data-slideමූල පද පිළිගනී prevහෝ next, එහි වත්මන් ස්ථානයට සාපේක්ෂව විනිවිදක ස්ථානය වෙනස් කරයි. විකල්පයක් ලෙස, data-slide-toකැරොසල් වෙත අමු විනිවිදක දර්ශකයක් යැවීමට භාවිතා කරන්න data-slide-to="2", එමඟින් ආරම්භ වන විශේෂිත දර්ශකයකට විනිවිදක ස්ථානය මාරු කරයි.0 .

පිටු data-ride="carousel"පූරණයෙන් ආරම්භ වන කැරොසල් සජීවීකරණයක් ලෙස සලකුණු කිරීමට උපලක්ෂණ භාවිතා වේ. එය එකම කැරූසලයේ (අතිරික්ත සහ අනවශ්‍ය) පැහැදිලි ජාවාස්ක්‍රිප්ට් ආරම්භ කිරීම සමඟ ඒකාබද්ධව භාවිතා කළ නොහැක.

JavaScript හරහා

කැරූසල් හස්තීයව අමතන්න:

$('.carousel').carousel()

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-interval="".

ක්රම

.carousel(options)

විකල්ප විකල්ප සමඟ කැරොසල් objectආරම්භ කර අයිතම හරහා බයිසිකල් පැදීම ආරම්භ කරයි.

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

.carousel('cycle')

වමේ සිට දකුණට කැරොසල් අයිතම හරහා චක්‍රීය කරයි.

.carousel('pause')

අයිතම හරහා බයිසිකල් පැදීමෙන් කැරොසල් නවත්වයි.

.carousel(number)

විශේෂිත රාමුවකට කැරොසල් චක්‍රීය කරයි (0 පදනම්, අරාවකට සමාන).

.carousel('prev')

පෙර අයිතමයට සයිකල්.

.carousel('next')

ඊළඟ අයිතමයට සයිකල්.

සිදුවීම්

Bootstrap's carousel පන්තිය කැරූසල් ක්‍රියාකාරීත්වයට සම්බන්ධ කිරීම සඳහා සිදුවීම් දෙකක් හෙලිදරව් කරයි.

සිදුවීම් දෙකටම පහත අමතර ගුණාංග ඇත:

• direction: කැරොසල් ලිස්සා යන දිශාව (එක්කෝ "left"හෝ "right").
• relatedTarget: DOM මූලද්‍රව්‍යය සක්‍රිය අයිතමය ලෙස ස්ථානගත වෙමින් පවතී.

සියලුම කැරොසල් සිදුවීම් කැරූසල් වෙතම (එනම් හිදී <div class="carousel">) වෙඩි තබා ඇත.

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

affix.js _

උදාහරණයක්

position: fixed;සමඟින් සොයාගත් බලපෑම අනුකරණය කරමින්, affix ප්ලගිනය සක්‍රිය සහ අක්‍රිය position: sticky;වේ. දකුණු පස ඇති උප සංචලනය ඇෆික්ස් ප්ලගිනයේ සජීවී ආදර්ශනයකි.

භාවිතය

දත්ත ගුණාංග හරහා හෝ ඔබේම ජාවාස්ක්‍රිප්ට් සමඟින් affix ප්ලගිනය භාවිතා කරන්න. අවස්ථා දෙකේදීම, ඔබ ඔබේ ඇලවූ අන්තර්ගතයේ ස්ථානගත කිරීම සහ පළල සඳහා CSS සැපයිය යුතුය.

සටහන: Safari විදැහුම්කරණ දෝෂයක් හේතුවෙන්, ඇදගත් හෝ තල්ලු කරන ලද තීරුවක් වැනි සාපේක්ෂ වශයෙන් ස්ථානගත කර ඇති මූලද්‍රව්‍යයක අඩංගු මූලද්‍රව්‍යයක් මත affix ප්ලගිනය භාවිතා නොකරන්න .

CSS හරහා ස්ථානගත කිරීම

ඇෆික්ස් ප්ලගිනය පන්ති තුනක් අතර ටොගල් කරයි, ඒ සෑම එකක්ම විශේෂිත තත්වයක් නියෝජනය කරයි: .affix, .affix-top, සහ .affix-bottom. සත්‍ය තනතුරු හැසිරවීමට ඔබ විසින්ම (මෙම ප්ලගිනයෙන් ස්වාධීනව) මෙම පන්ති සඳහා position: fixed;මත හැර, මෝස්තර සැපයිය යුතුය ..affix

ඇෆික්ස් ප්ලගිනය ක්‍රියා කරන ආකාරය මෙන්න:

1. ආරම්භ කිරීමට, ප්ලගිනය එකතු කරයි.affix-topආරම්භ කිරීමට, මූලද්‍රව්‍යය එහි ඉහළම ස්ථානයේ ඇති බව දැක්වීමටමෙම අවස්ථාවේදී CSS ස්ථානගත කිරීම අවශ්ය නොවේ.
2. ඔබට ඇලවීමට අවශ්‍ය මූලද්‍රව්‍යය පසුකර අනුචලනය කිරීම සත්‍ය ඇලවීම අවුලුවාලිය යුතුය. .affixප්‍රතිස්ථාපන .affix-topසහ කට්ටල position: fixed;(Bootstrap's CSS මගින් සපයනු ලබන්නේ ) මෙහිදීය .
3. පහළ ඕෆ්සෙට් එකක් අර්ථ දක්වා තිබේ නම්, එය පසුකර අනුචලනය කිරීම මගින් ප්‍රතිස්ථාපනය කළ .affixයුතුය .affix-bottom. ඕෆ්සෙට් විකල්ප නොවන බැවින්, එකක් සැකසීමට ඔබට සුදුසු CSS සැකසීම අවශ්‍ය වේ. මෙම අවස්ථාවේදී, position: absolute;අවශ්ය විට එකතු කරන්න. ප්ලගිනය එහි සිට මූලද්‍රව්‍යය ස්ථානගත කළ යුත්තේ කොතැනද යන්න තීරණය කිරීමට දත්ත උපලක්ෂණ හෝ JavaScript විකල්පය භාවිතා කරයි.

පහත භාවිත විකල්ප දෙකෙන් එකක් සඳහා ඔබේ CSS සැකසීමට ඉහත පියවර අනුගමනය කරන්න.

දත්ත ගුණාංග හරහා

ඕනෑම මූලද්‍රව්‍යයකට ඇෆික්ස් හැසිරීම පහසුවෙන් එක් කිරීමට data-spy="affix", ඔබට ඔත්තු බැලීමට අවශ්‍ය මූලද්‍රව්‍යයට එක් කරන්න. මූලද්‍රව්‍යයක ඇමිණීම ටොගල් කළ යුත්තේ කවදාද යන්න නිර්වචනය කිරීමට ඕෆ්සෙට් භාවිත කරන්න.

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

JavaScript හරහා

JavaScript හරහා affix ප්ලගිනය අමතන්න:

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

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-offset-top="200".

ක්රම

.affix(options)

ඔබගේ අන්තර්ගතය ඇලවූ අන්තර්ගතයක් ලෙස සක්‍රිය කරයි. විකල්ප විකල්ප පිළිගනී object.

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

.affix('checkPosition')

අදාළ මූලද්‍රව්‍යවල මානයන්, පිහිටීම සහ අනුචලන ස්ථානය මත පදනම්ව ඇලවීමේ තත්වය නැවත ගණනය කරයි. , .affix, .affix-topසහ .affix-bottomපන්ති නව තත්වයට අනුව අමුණා ඇති අන්තර්ගතයට එකතු කර හෝ ඉවත් කරනු ලැබේ. අමුණා ඇති අන්තර්ගතයේ මානයන් හෝ ඉලක්ක මූලද්‍රව්‍යයේ මානයන් වෙනස් කරන විට, ඇලවූ අන්තර්ගතය නිවැරදිව ස්ථානගත කිරීම සහතික කිරීම සඳහා මෙම ක්‍රමය ඇමතීමට අවශ්‍ය වේ.

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

සිදුවීම්

Bootstrap හි affix ප්ලගිනය affix ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.