އޯވަރވިއު

ވަކިވަކިން ނުވަތަ އެކުލަވާލާފައި

ޕްލަގިންތައް ވަކިވަކިން (ބޫޓްސްޓްރެޕްގެ ވަކިވަކި *.jsފައިލްތައް ބޭނުންކޮށްގެން)، ނުވަތަ އެއްފަހަރާ ( ބޭނުންކޮށްގެން bootstrap.jsނުވަތަ މިނިފައިޑް bootstrap.min.js) ޕްލަގިންތައް ހިމަނާލެވިދާނެއެވެ.

ޑޭޓާ އެޓްރިބިއުޓްސް

ޖާވާސްކްރިޕްޓްގެ އެންމެ ލައިނެއް ނުލިޔެ ޚުދު މާކަޕް އެޕީއައި މެދުވެރިކޮށް ހުރިހާ ބޫޓްސްޓްރެޕް ޕްލަގިންސް ބޭނުންކުރެވޭނެއެވެ. މިއީ ބޫޓްސްޓްރެޕްގެ ފުރަތަމަ ދަރަޖައިގެ އެޕީއައި ކަމަށާއި، މިއީ ޕްލަގިން ބޭނުންކުރާއިރު ފުރަތަމަ ވިސްނަންޖެހޭ ކަމެއް ކަމަށް ވެސް ވިދާޅުވި އެވެ.

އެހެން ނަމަވެސް، ބައެއް ހާލަތްތަކުގައި މި ފަންކްޝަނަލިޓީ ނިއްވާލުމަކީ އެދެވޭ ކަމެއް ކަމަށް ވެދާނެއެވެ. އެހެންކަމުން، ޑޮކިއުމަންޓް ނަންސްޕޭސް ކޮށްފައިވާ ހުރިހާ އިވެންޓްތަކެއް އަންބައިންޑްކޮށްގެން ޑޭޓާ އެޓްރިބިއުޓް އެޕީއައި ޑިސެބިލް ކުރުމުގެ ޤާބިލުކަން ވެސް އަޅުގަނޑުމެން ފޯރުކޮށްދެމެވެ 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

އެއްވެސް ފުށުއެރުމެއް ނެތެވެ

ބައެއް ފަހަރު ބޫޓްސްޓްރެޕް ޕްލަގިންސްތައް އެހެން ޔޫއައި ފްރޭމްވޯކްތަކާއެކު ބޭނުންކުރަން ޖެހެއެވެ. މި ހާލަތްތަކުގައި ދޭތެރެ ދޭތެރެއިން ނޭމްސްޕޭސް ކޮލިޝަންތައް ދިމާވެދާނެ އެވެ. .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
})

ސެނިޓައިޒާ އެވެ

ޓޫލްޓިޕްސް އަދި ޕޮޕޯވަރސް އިން އަޅުގަނޑުމެންގެ ބިލްޓް-އިން ސެނިޓައިޒާ ބޭނުންކޮށްގެން އެޗްޓީއެމްއެލް ބަލައިގަންނަ އޮޕްޝަންތައް ސެނިޓައިޒް ކުރެއެވެ.

ޑިފޯލްޓް 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)
  }
})

ވަރޝަން ނަންބަރުތަކެވެ

VERSIONބޫޓްސްޓްރެޕްގެ ކޮންމެ ޖީކުއަރީ ޕްލަގިންއެއްގެ ވަރޝަނަށް ޕްލަގިންގެ ކޮންސްޓްރަކްޓަރުގެ ޕްރޮޕަޓީ މެދުވެރިކޮށް ވަދެވޭނެއެވެ . މިސާލަކަށް ޓޫލްޓިޕް ޕްލަގިން އަށް:

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

ޖާވާސްކްރިޕްޓް ޑިސެބިލް ކޮށްފައި ހުންނައިރު ޚާއްޞަ ފޯލްބެކެއް ނެތެވެ

ޖާވާސްކްރިޕްޓް ޑިސެބިލް ކޮށްފައި ހުންނައިރު ބޫޓްސްޓްރެޕްގެ ޕްލަގިންސްތައް ވަކިން ޝަރަފުވެރިކަމާއެކު ފަހަތަށް ނުޖެހެ އެވެ. މި ހާލަތުގައި ޔޫޒަރ އެކްސްޕީރިއަންސްއަށް ފަރުވާތެރިވާނަމަ، ޔޫޒަރުންނަށް <noscript>ހާލަތު ބަޔާންކޮށްދިނުމަށް (އަދި ޖާވާސްކްރިޕްޓް އަލުން އެނެބަލް ކުރާނެ ގޮތް) ބޭނުންކޮށް، އަދި/ނުވަތަ އަމިއްލަ ކަސްޓަމް ފޯލްބެކްތައް އިތުރުކޮށްލާށެވެ.

ޓްރާންސިޝަންސް ޓްރާންސިޝަން.ޖޭއެސް

ޓްރާންސިޝަންތަކާ ބެހޭގޮތުން

ސާދާ ޓްރާންސިޝަން އިފެކްޓްތަކަށްޓަކައި، transition.jsއެހެން ޖޭއެސް ފައިލްތަކާ އެކު އެއްފަހަރު ހިމަނާށެވެ. ކޮމްޕައިލްޑް (ނުވަތަ މިނިފައިޑް) ބޭނުންކުރާނަމަ bootstrap.js، މިކަން ހިމަނަން ނުޖެހޭނެ—މިހާރުވެސް އެބައޮތެވެ.

އެތެރޭގައި ހުރި އެއްޗެއް

Transition.js އަކީ transitionEndއިވެންޓްތަކަށް ބޭނުންވާ އަސާސީ އެހީތެރިއެއްގެ އިތުރުން ސީއެސްއެސް ޓްރާންސިޝަން އެމިއުލޭޓަރެކެވެ. އެއީ އެހެން ޕްލަގިންތަކުން ސީއެސްއެސް ޓްރާންސިޝަން ސަޕޯޓް ހުރިތޯ ބެލުމަށާއި ހެންގް ޓްރާންސިޝަންތައް ހިފެހެއްޓުމަށް ބޭނުންކުރާ އެއްޗެކެވެ.

ޓްރާންސިޝަންތައް ނުކުޅެދުންތެރިކުރުން

ތިރީގައިވާ ޖާވާސްކްރިޕްޓް ސްނިޕެޓް ބޭނުންކޮށްގެން ޓްރާންސިޝަންތައް ގްލޯބަލްކޮށް ޑިސެބިލް ކުރެވޭނެ، މިއީ ލޯޑް ވުމަށްފަހު transition.js(ނުވަތަ bootstrap.jsނުވަތަ bootstrap.min.js, ހާލަތަށް ބަލާއިރު) އަންނަން ޖެހޭ އެއްޗެކެވެ:

$.support.transition = false

މޮޑަލްސް މޮޑަލް.ޖޭއެސް

މޮޑަލްސް އަކީ ސްޓްރީމްލައިންޑް، އެކަމަކު ފްލެކްސިބަލް، ޑައިލޮގް ޕްރޮމްޕްޓްސް އާއި އެކު އެންމެ ކުޑަމިނުން ބޭނުންވާ ފަންކްޝަނަލިޓީ އާއި ސްމާޓް ޑިފޯލްޓްސް އެވެ.

އެޗްޓީއެމްއެލް5 އިން އޭގެ ސެމެންޓިކްސް މާނަކުރާ ގޮތުގެ ސަބަބުން، autofocusއެޗްޓީއެމްއެލް އެޓްރިބިއުޓް އަށް ބޫޓްސްޓްރެޕް މޮޑަލްތަކުގައި އެއްވެސް އަސަރެއް ނުކުރެއެވެ. ހަމަ އެ އަސަރު ހާސިލް ކުރުމަށްޓަކައި، ކޮންމެވެސް ކަސްޓަމް ޖާވާސްކްރިޕްޓެއް ބޭނުން ކުރާށެވެ:

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

މިސާލުތަކެވެ

ސްޓޭޓިކް މިސާލެވެ

ފޫޓަރގައި ހެޑަރ، ބޮޑީ، އަދި އެކްޝަންތަކުގެ ސެޓާއެކު ރެންޑަރ ކުރެވިފައިވާ މޮޑަލްއެކެވެ.

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

ލައިވް ޑެމޯ

ތިރީގައިވާ ބަޓަންއަށް ފިތާލުމުން ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް މޮޑަލްއެއް ޓޮގްލް ކުރާށެވެ. އެއީ ތިރިއަށް ސްލައިޑްކޮށް ޕޭޖުގެ މަތިން ފޭޑް އިން ވާނެ އެއްޗެކެވެ.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

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

އިޚްތިޔާރީ ސައިޒްތަކެވެ

މޮޑަލްތަކުގައި އިޚްތިޔާރީ ދެ ސައިޒެއް ހުންނައިރު، މޮޑިފައި ކްލާސްތައް މެދުވެރިކޮށް ލިބެން ހުންނަނީ އެއް .modal-dialog.

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

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

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

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

އެނިމޭޝަން ނައްތާލާށެވެ

ބަލާލުމަށް ފޭޑް އިން ވުމުގެ ބަދަލުގައި ފަސޭހައިން ފެންނަ މޮޑަލްތަކަށް، .fadeތިބާގެ މޮޑަލް މާކަޕް އިން ކްލާސް ނައްތާލާށެވެ.

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

ގްރިޑް ސިސްޓަމް ބޭނުންކޮށްގެންނެވެ

މޮޑަލްއެއްގެ ތެރޭގައި ބޫޓްސްޓްރެޕް ގްރިޑް ސިސްޓަމްގެ ފައިދާ ނަގަން، ހަމައެކަނި ނެސްޓް .rows ގެ ތެރޭގައި .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އަދި އެޗްޓީއެމްއެލް 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)
})

ބޭނުން ކުރުން

މޮޑަލް ޕްލަގިން އިން ޑިމާންޑް ކުރުމުން ފޮރުވިފައިވާ ކޮންޓެންޓް ޓޮގްލް ކޮށްދެނީ، ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށެވެ. އަދި ޓޫ އޮވަރރައިޑް ޑިފޯލްޓް ސްކްރޯލިންގ ބިހޭވިއަރ އަށް އިތުރުކޮށް، މޮޑަލްގެ ބޭރުން ކްލިކް ކުރާއިރު ދައްކާފައިވާ މޮޑަލްތައް ޑިސްމިސް ކުރުމަށް ކްލިކް އޭރިއާއެއް ފޯރުކޮށްދިނުމަށް a ޖެނެރޭޓް .modal-openކުރެއެވެ .<body>.modal-backdrop

ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް

ޖާވާސްކްރިޕްޓް ނުލިޔެ މޮޑަލްއެއް އެކްޓިވޭޓް ކުރާށެވެ. data-toggle="modal"ކޮންޓްރޯލަރ އެލިމެންޓެއްގައި، ބަޓަންއެއް ފަދައިން، އެއް data-target="#foo"ނުވަތަ href="#foo"ޓޮގްލް ކުރުމަށް ވަކި މޮޑަލަކަށް އަމާޒު ކުރުމަށް ސެޓް ކުރާށެވެ .

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

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް

myModalޖާވާސްކްރިޕްޓްގެ އެއް ލައިނަކާއެކު id އާއެކު މޮޑަލް އަކަށް ގޮވާލާށެވެ :

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

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-backdrop="".

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

ގޮތްތައް

.modal(options)

މޮޑަލްއެއްގެ ގޮތުގައި ތިމާގެ ކޮންޓެންޓް އެކްޓިވޭޓް ކުރެއެވެ. އިޚްތިޔާރީ އިޚްތިޔާރުތަކެއް ބަލައިގަންނަނީ object.

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

.modal('toggle')

މެނުއަލްކޮށް މޮޑަލް އެއް ޓޮގްލް ކުރެއެވެ. މޮޑަލް ހަގީގަތުގައި ދައްކާ ނުވަތަ ފޮރުވުމުގެ ކުރިން (އެބަހީ ނުވަތަ އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ .shown.bs.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')

އިވެންޓްސް

ބޫޓްސްޓްރެޕްގެ މޮޑަލް ކްލާހުގައި މޯޑަލް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް މަދު އިވެންޓްތަކެއް ހާމަކޮށްދެ އެވެ.

ހުރިހާ މޮޑަލް އިވެންޓްތަކެއް ފަޔަރ ކުރެވެނީ ޚުދު މޮޑަލް އަށް (އެބަހީ <div class="modal">) އަށް.

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

ޑްރޮޕްޑައުންސް dropdown.js

މިސާލުތަކެވެ

މި ސާދާ ޕްލަގިން އިން ގާތްގަނޑަކަށް ކޮންމެ އެއްޗަކަށް ޑްރޮޕްޑައުން މެނޫތައް އިތުރުކޮށްލާއިރު، އޭގެ ތެރޭގައި ނެވްބާރ، ޓެބްސް، އަދި ގިތެޔޮ ހިމެނެއެވެ.

ނަވްބާރެއްގެ ތެރޭގައެވެ

ގިތެޔޮ ގިރާތަކުގެ ތެރޭގައި

ބޭނުން ކުރުން

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

ލިންކް ބަޓަންތަކުން ޔޫ.އާރ.އެލްތައް އެއްގޮތަކަށްވެސް ނުގެއްލޭ ގޮތަށް ބެހެއްޓުމަށްޓަކައި، ގެ data-targetބަދަލުގައި އެޓްރިބިއުޓް ބޭނުންކުރާށެވެ href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޑްރޮޕްޑައުންތަކަށް ގުޅާލާ:

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

އިޚްތިޔާރުތައް

އެއްޗެއްނޫން

ގޮތްތައް

$().dropdown('toggle')

ދީފައިވާ ނެވްބާރެއް ނުވަތަ ޓެބް ކުރެވިފައިވާ ނެވިގޭޝަނެއްގެ ޑްރޮޕްޑައުން މެނޫ ޓޮގްލް ކުރެއެވެ.

އިވެންޓްސް

ހުރިހާ ޑްރޮޕްޑައުން އިވެންޓްތަކެއް ފަޔަރ ކުރެވެނީ .dropdown-menu's ޕޭރެންޓް އެލިމެންޓަށެވެ.

ހުރިހާ ޑްރޮޕްޑައުން އިވެންޓްތަކެއްގައި relatedTargetޕްރޮޕަޓީއެއް ހުންނައިރު، އޭގެ އަގަކީ ޓޮގްލިންގ އެންކަރ އެލިމެންޓެވެ.

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

ސްކްރޯލްސްޕައި scrollspy.js

ނަވްބާރުގައި މިސާލެވެ

ސްކްރޯލްސްޕައި ޕްލަގިން އަކީ ސްކްރޯލް ޕޮޒިޝަނަށް ބަލައިގެން އޮޓޮމެޓިކުން ނެވް ޓާގެޓްތައް އަޕްޑޭޓް ކުރުމަށް ބޭނުންކުރާ ޕްލަގިންއެކެވެ. ނަވްބާގެ ތިރީގައިވާ ސަރަހައްދު ސްކްރޯލްކޮށް އެކްޓިވް ކްލާސް ބަދަލުވާތަން ބަލާށެވެ. އަދި ޑްރޮޕްޑައުން ސަބް އައިޓަމްތައް ވެސް ހައިލައިޓް ކުރެވޭނެ އެވެ.

ބޭނުން ކުރުން

ރިލޭޓިވް ޕޮޒިޝަނިންގ އަށް ބޭނުންވެއެވެ

އިމްޕްލިމެންޓޭޝަން މެތޯޑަކަށް ވިޔަސް، ސްކްރޯލްސްޕީ އަށް ބޭނުން ކުރަން ޖެހެނީ position: relative;ތިބާ ޖާސޫސް ކުރަމުންދާ އެލިމެންޓްގެ މައްޗަށެވެ. ގިނަ ހާލަތްތަކުގައި މިއީ <body>. ގެ ފިޔަވައި އެހެން އެލިމެންޓްތަކުގައި ސްކްރޯލްސްޕައި ކުރާއިރު ، ސެޓެއް އޮވެގެން އެޕްލައި <body>ކޮށްފައި ހުރިކަން ޔަގީން ކުރައްވާށެވެ .heightoverflow-y: scroll;

ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް

ޓޮޕްބާ ނެވިގޭޝަނަށް ފަސޭހައިން ސްކްރޯލްސްޕީ ބިހޭވިއަރ އިތުރު data-spy="scroll"ކުރުމަށްޓަކައި، ސްޕައި ކުރަން ބޭނުންވާ އެލިމެންޓަށް އިތުރު ކުރާށެވެ (ގިނައިން އާންމުކޮށް މިއީ ވާނީ <body>). ދެން ކޮންމެ ބޫޓްސްޓްރެޕް ކޮމްޕޮނެންޓެއްގެ data-targetޕޭރެންޓް އެލިމެންޓްގެ އައިޑީ ނުވަތަ ކްލާސް އާއި އެކު އެޓްރިބިއުޓް އިތުރު ކުރާށެވެ..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>

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް

ސީއެސްއެސް އަށް އެޑް position: relative;ކުރުމަށްފަހު ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ސްކްރޯލްސްޕައި އަށް ގުޅާލާށެވެ:

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

ގޮތްތައް

.scrollspy('refresh')

ޑޮމް އިން އެލިމެންޓްތައް އިތުރުކުރުމާއި ނުވަތަ ނައްތާލުމާ ގުޅިގެން ސްކްރޯލްސްޕީ ބޭނުންކުރާއިރު، ރިފްރެޝް މެތޯޑަށް ގޮވާލަން ޖެހޭނީ މިގޮތަށެވެ:

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

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-offset="".

އިވެންޓްސް

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

ޓޮގްލް ކުރެވޭ ޓެބްތައް tab.js

މިސާލު ޓެބްތަކެވެ

ޑްރޮޕްޑައުން މެނޫތަކުގެ ތެރެއިން ވެސް ލޯކަލް ކޮންޓެންޓްގެ ޕޭންތަކުގެ ތެރެއިން ޓްރާންސިޝަން ކުރުމަށް އަވަސް، ޑައިނަމިކް ޓެބް ފަންކްޝަނަލިޓީ އިތުރުކުރުން. ނެސްޓް ޓެބްތަކަށް ސަޕޯޓް ނުކުރެއެވެ.

ބޭނުން ކުރުން

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޓެބް ކުރެވޭ ޓެބްތައް އެނެބަލް ކުރުން (ކޮންމެ ޓެބެއް ވަކިވަކިން އެކްޓިވޭޓް ކުރަން ޖެހޭނެ):

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

ވަކިވަކި ޓެބްތައް އެތައް ގޮތަކުން އެކްޓިވޭޓް ކުރެވިދާނެއެވެ:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

މާކަޕް

އެއްވެސް ޖާވާސްކްރިޕްޓެއް ނުލިޔެ ޓެބް ނުވަތަ ޕިލް ނެވިގޭޝަން އެކްޓިވޭޓް ކުރެވޭނީ ފަސޭހައިން އެލިމެންޓެއް ކަނޑައަޅައިގެން data-toggle="tab"ނުވަތަ data-toggle="pill"އެލިމެންޓެއްގެ މައްޗަށް ޖަހައިގެންނެވެ. navޓެބަށް އަދި nav-tabsކްލާސްތައް އިތުރުކުރުމުން ulބޫޓްސްޓްރެޕް ޓެބް ސްޓައިލިންގnav އަށް އަމަލުކުރެވޭނެ ކަމަށާއި އަދި އަދި nav-pillsކްލާސްތައް އިތުރުކުރުމުން ޕިލް ސްޓައިލިންގ އަށް އަމަލުކުރާނެ ކަމަށް ވެސް ވިދާޅުވިއެވެ .

<div>

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

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

</div>

ފޭޑް އިފެކްޓް

ޓެބްތައް ފޭޑް އިން ކޮށްލުމަށްޓަކައި، .fadeކޮންމެ ޓެބް އަކަށް އިތުރު ކުރާށެވެ .tab-pane. އަދި ފުރަތަމަ ޓެބް ޕޭންގައި ވެސް .inފުރަތަމަ ކޮންޓެންޓް ފެންނަން ހުންނަން ޖެހެ އެވެ.

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

ގޮތްތައް

$().tab

ޓެބް އެލިމެންޓަކާއި ކޮންޓެންޓް ކޮންޓެއިނަރ އެއް އެކްޓިވޭޓް ކުރެއެވެ. ޓެބްގައި ޑީއޯއެމްގައި ކޮންޓެއިނަރ ނޯޑަކަށް ޓާގެޓްކުރާ އެއްޗެއް 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
})

ޓޫލްޓިޕްސް tooltip.js

ޖޭސަން ފްރޭމް ލިޔެފައިވާ މޮޅު jQuery.tipsy ޕްލަގިން އިން އިންސްޕަޔަރ ކޮށްގެން؛ ޓޫލްޓިޕްސް އަކީ އަޕްޑޭޓް ކުރެވިފައިވާ ވަރޝަނެއް ކަމަށާއި، މިއީ ތަސްވީރުތަކަށް ބަރޯސާ ނުވާ، އެނިމޭޝަންތަކަށް ސީއެސްއެސް3 ބޭނުންކުރާ، އަދި ލޯކަލް ޓައިޓަލް ސްޓޯރޭޖަށް ޑޭޓާ-އެޓްރިބިއުޓްސް ބޭނުންކުރާ ވަރޝަނެކެވެ.

ޒީރޯ ދިގުމިނުގެ ސުރުޚީތައް ހުންނަ ޓޫލްޓިޕްތައް ދުވަހަކުވެސް ނުފެނެއެވެ.

މިސާލުތަކެވެ

ޓޫލްޓިޕްސް ބަލާލުމަށް ތިރީގައިވާ ލިންކްތަކުގެ މައްޗަށް ހޯވަރ ކޮށްލައްވާ:

ސްޓޭޓިކް ޓޫލްޓިޕް

ހަތަރު ގޮތެއް ލިބެން ހުރެއެވެ: މަތީ، ވާތް، ތިރީ، އަދި ކަނާތް ފަރާތް އެއްވަރުކޮށްފައި.

ހަތަރު ދިމާލަށެވެ

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

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

ބޭނުން ކުރުން

ޓޫލްޓިޕް ޕްލަގިން އިން ޑިމާންޑް ކުރުމުން ކޮންޓެންޓާއި މާކަޕް އުފައްދާއިރު، ޑިފޯލްޓްކޮށް ޓޫލްޓިޕްތައް އެމީހުންގެ ޓްރިގަރ އެލިމެންޓްގެ ފަހަތުގައި ބެހެއްޓޭނެއެވެ.

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޓޫލްޓިޕް ޓްރިގަރ ކުރާށެވެ:

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

މާކަޕް

ޓޫލްޓިޕަކަށް ބޭނުންވާ މާކަޕަކީ ހަމައެކަނި dataއެޓްރިބިއުޓެއް ކަމަށާއި titleއެޗްޓީއެމްއެލް އެލިމެންޓްގައި ޓޫލްޓިޕް އެއް ހުންނަން ބޭނުންވާ ކަމަށް ވެސް ވިދާޅުވި އެވެ. ޓޫލްޓިޕްގެ ޖެނެރޭޓް ކުރެވޭ މާކަޕް އަކީ ތަންކޮޅެއް ސާދާ އެއްޗެއް ނަމަވެސް، އެއަށް ޕޮޒިޝަނެއް ބޭނުންވާ ނަމަވެސް (ޑިފޯލްޓްކޮށް، topޕްލަގިން އިން ސެޓް ކޮށްފައި ހުންނަނީ) އެވެ.

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

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

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-animation="".

ގޮތްތައް

$().tooltip(options)

އެލިމެންޓް ކަލެކްޝަނަކަށް ޓޫލްޓިޕް ހެންޑްލަރ އެއް އެޓޭޗް ކުރެއެވެ.

.tooltip('show')

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ހާމަކުރެއެވެ. ޓޫލްޓިޕް ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ shown.bs.tooltipއިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ. މިއީ ޓޫލްޓިޕްގެ "މެނުއަލް" ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ. ޒީރޯ ދިގުމިނުގެ ސުރުޚީތައް ހުންނަ ޓޫލްޓިޕްތައް ދުވަހަކުވެސް ނުފެނެއެވެ.

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

.tooltip('hide')

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ފޮރުވައެވެ. ޓޫލްޓިޕް ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ hidden.bs.tooltipއިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ. މިއީ ޓޫލްޓިޕްގެ "މެނުއަލް" ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ.

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

.tooltip('toggle')

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ޓޮގްލް ކުރެއެވެ. ޓޫލްޓިޕް ހަގީގަތުގައި ދައްކާ ނުވަތަ ފޮރުވުމުގެ ކުރިން (އެބަހީ shown.bs.tooltipނުވަތަ hidden.bs.tooltipއިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ. މިއީ ޓޫލްޓިޕްގެ "މެނުއަލް" ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ.

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

.tooltip('destroy')

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ފޮރުވައި ހަލާކުކޮށްލައެވެ. ޑެލިގޭޝަން ބޭނުންކުރާ ޓޫލްޓިޕްތައް (އެއީ އޮޕްޝަން ބޭނުންކޮށްގެން އުފައްދާފައިވާ ތަކެތިselector ) ޑެސެންޑެންޓް ޓްރިގަރ އެލިމެންޓްތަކުގައި ވަކިވަކިން ނައްތާލެވޭކަށް ނެތެވެ.

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

އިވެންޓްސް

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

ޕޮޕޯވަރސް ޕޮޕޯވަރ.ޖޭއެސް

އައިޕެޑްގައި ހުންނަ ފަދައިން ކޮންޓެންޓްގެ ކުދިކުދި އޯވަރލޭތައް، ސެކަންޑަރީ މައުލޫމާތު ގެދޮރު ބެހެއްޓުމަށްޓަކައި ކޮންމެ އެލިމެންޓަކަށް އިތުރުކުރުން.

ސުރުޚީއާއި ކޮންޓެންޓް ވެސް ސުމެއް ދިގުމިނުގައި ހުންނަ ޕޮޕޯވަރސް ދުވަހަކުވެސް ނުދައްކާނެއެވެ.

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

މިސާލުތަކެވެ

ސްޓޭޓިކް ޕޮޕޯވަރ އެވެ

ހަތަރު ގޮތެއް ލިބެން ހުރެއެވެ: މަތީ، ވާތް، ތިރީ، އަދި ކަނާތް ފަރާތް އެއްވަރުކޮށްފައި.

ލައިވް ޑެމޯ

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

ހަތަރު ދިމާލަށެވެ

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

ދެން ކްލިކް ކުރުމުން ޑިސްމިސް ކުރާށެވެ

focusޔޫޒަރ ދެން ކުރާ ކްލިކް ކުރުމުން ޕޮޕޯވަރސް ޑިސްމިސް ކުރުމަށް ޓްރިގަރ ބޭނުން ކުރާށެވެ .

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

ބޭނުން ކުރުން

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޕޮޕޯވަރސް އެނެބަލް ކުރުން:

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

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-animation="".

ގޮތްތައް

$().popover(options)

އެލިމެންޓް ކަލެކްޝަނަކަށް ޕޮޕޯވަރސް އިނިޝިއަލައިޒް ކުރެއެވެ.

.popover('show')

އެލިމެންޓެއްގެ ޕޮޕޯވަރ ހާމަކޮށްދެއެވެ. ޕޮޕޯވަރ ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ shown.bs.popoverއިވެންޓް ހިނގުމުގެ ކުރިން) ގުޅާ މީހާއަށް އެނބުރިދެއެވެ. މިއީ ޕޮޕޯވަރ ގެ "މެނުއަލް" ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ. ސުރުޚީއާއި ކޮންޓެންޓް ވެސް ސުމެއް ދިގުމިނުގައި ހުންނަ ޕޮޕޯވަރސް ދުވަހަކުވެސް ނުދައްކާނެއެވެ.

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

.popover('hide')

އެލިމެންޓެއްގެ ޕޮޕޯވަރ ފޮރުވައެވެ. ޕޮޕޯވަރ ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ އޭގެ ކުރިން ...hidden.bs.popover އިވެންޓް ހިނގުމުގެ ކުރިން) ގުޅާ މީހާއަށް އެނބުރިދެއެވެ. މިއީ ޕޮޕޯވަރ ގެ "މެނުއަލް" ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ.

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

.popover('toggle')

އެލިމެންޓެއްގެ ޕޮޕޯވަރ ޓޮގްލް ކުރެއެވެ. ޕޮޕޯވަރ ހަގީގަތުގައި ދައްކާ ނުވަތަ ފޮރުވުމުގެ ކުރިން (އެބަހީ shown.bs.popoverނުވަތަ hidden.bs.popoverއިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ. މިއީ ޕޮޕޯވަރ ގެ "މެނުއަލް" ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ.

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

.popover('destroy')

އުނިއިތުރެއްގެ ޕޮޕޮވަރ ފޮރުވައި ހަލާކުކޮށްލައެވެ. ޑެލިގޭޝަން ބޭނުންކުރާ ޕޮޕޯވަރސް (އެއީ އޮޕްޝަން ބޭނުންކޮށްގެން އުފައްދާފައިވާ ތަކެތިselector ) ޑެސްސެންޑެންޓް ޓްރިގަރ އެލިމެންޓްތަކުގައި ވަކިވަކިން ނައްތާލެވޭކަށް ނެތެވެ.

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

އިވެންޓްސް

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

އެލާޓް މެސެޖުތައް alert.js

މިސާލު އެލާޓްތަކެވެ

މި ޕްލަގިން އާއި އެކު ހުރިހާ އެލާޓް މެސެޖުތަކަށް ޑިސްމިސް ފަންކްޝަނަލިޓީ އިތުރުކުރުން.

ބަޓަނެއް ބޭނުންކުރާއިރު .close، އެއީ ފުރަތަމަ ދަރިއަކަށް ވާންޖެހޭނެ ކަމަށާއި، .alert-dismissibleމާކަޕްގައި އޭގެ ކުރިން އެއްވެސް ޓެކްސްޓް ކޮންޓެންޓެއް އައިސްގެން ނުވާނެއެވެ.

ބޭނުން ކުރުން

ހަމައެކަނި ތިބާގެ ކްލޯޒް ބަޓަންއަށް އެޑްކޮށްގެން data-dismiss="alert"އޮޓޮމެޓިކުން އެލާޓް ކްލޯޒް ފަންކްޝަނަލިޓީއެއް ލިބޭނެއެވެ. އެލާޓެއް ބަންދުކުރުމުން އެލާޓް ޑީއޯއެމް އިން ނައްތާލައެވެ.

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

އެލާޓެއް ޑީއޯއެމް އިން ނައްތާލައިގެން ބަންދުކުރެއެވެ. .fadeއެލިމެންޓްގައި އަދި .inކްލާސްތައް ހުރިނަމަ ، އެލާޓް ނައްތާލުމުގެ ކުރިން އެލާޓް ފޭޑް އައުޓް ވާނެއެވެ.

އިވެންޓްސް

ބޫޓްސްޓްރެޕްގެ އެލާޓް ޕްލަގިން އިން އެލާޓް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް ދިމާވާ މަދު ހާދިސާތަކެއް ހާމަކޮށްދެ އެވެ.

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

ބަޓަންސް ބަޓަން.ޖޭއެސް

ބަޓަންތަކުން އިތުރަށް ކުރާށެވެ. ކޮންޓ��ރޯލް ބަޓަން ސްޓޭޓްސް ނުވަތަ ޓޫލްބާ ފަދަ އިތުރު ކޮމްޕޯނެންޓްތަކަށް ބަޓަންތަކުގެ ގްރޫޕްތައް އުފެއްދުން.

ސްޓޭޓްފުލް އެވެ

data-loading-text="Loading..."ބަޓަނެއްގައި ލޯޑިންގ ސްޓޭޓެއް ބޭނުން ކުރުމަށް އިތުރުކުރުން .

މި ފީޗާއަކީ v3.3.5 އިން ފެށިގެން ޑިޕްރެކޭޓެޑް ފީޗާއެއް ކަމަށާއި، v4 ގައި ނައްތާލާފައިވާ ފީޗާއެކެވެ.

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

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

ސިންގަލް ޓޮގްލް އެވެ

data-toggle="button"އެއް ބަޓަނެއްގައި ޓޮގްލިންގ އެކްޓިވޭޓް ކުރުމަށް އެޑް ކުރާށެވެ.

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

ޗެކްބޮކްސް / ރޭޑިއޯ

data-toggle="buttons"އެއިން ޗެކްބޮކްސްއަކަށް ނުވަތަ ރޭޑިއޯ އިންޕުޓްތަކަށް އިތުރުކޮށް .btn-groupއެމީހުންގެ ސްޓައިލްތަކުގައި ޓޮގްލް ކުރެވޭނެ ގޮތް ހެދުން.

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

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

ގޮތްތައް

$().button('toggle')

ޓޮގްލްސް ޕުޝް ސްޓޭޓް. ބަޓަން އެކްޓިވޭޓް ކޮށްފައިވާ ކަމުގެ ސިފަ ލިބެއެވެ.

$().button('reset')

ބަޓަން ސްޓޭޓް ރީސެޓް ކުރަނީ - ޓެކްސްޓް އަސްލު ޓެކްސްޓަށް ބަދަލުކުރެއެވެ. މި މެތޯޑަކީ އެސިންކްރޮނަސް މެތޯޑަކަށް ވާއިރު، ރީސެޓް ކުރުން ހަގީގަތުގައި ނިމުމުގެ ކުރިން ރިޓަރން ވެއެވެ.

$().button(string)

އެއްވެސް ޑޭޓާ ޑެފިނޭޓް ކުރެވިފައިވާ ޓެކްސްޓް ސްޓޭޓަކަށް ޓެކްސްޓް ބަދަލުކުރެއެވެ.

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

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

ކޮލަޕްސް ކޮލަޕްސް.ޖޭއެސް

ފަސޭހައިން ޓޮގްލް ބިހޭވިއަރ އަށް އަތްމަތި ދަތި ކްލާސްތަކެއް ބޭނުންކުރާ ފްލެކްސިބަލް ޕްލަގިންއެކެވެ.

މިސާލު

ކްލާސް ބަދަލުތަކުގެ ތެރެއިން އެހެން އެލިމެންޓެއް ދައްކައި ފޮރުވުމަށް ތިރީގައިވާ ބަޓަންތަކަށް ފިތާލާށެވެ:

• .collapseކޮންޓެންޓް ފޮރުވައެވެ
• .collapsingޓްރާންސިޝަންތަކުގެ ތެރޭގައި އަމަލުކުރެއެވެ
• .collapse.inކޮންޓެންޓް ދައްކައެވެ

hrefއެޓްރިބިއުޓް އާއި އެކު ލިންކެއް ، ނުވަތަ އެޓްރިބިއުޓް އާއި އެކު ބަޓަން ބޭނުން ކުރެވިދާނެއެވެ data-target. ދެ ހާލަތުގައި ވެސް data-toggle="collapse"ލާޒިމްވެ އެވެ.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

އެކޯޑިއަން މިސާލެވެ

ޕެނަލް ކޮމްޕޮނެންޓާއެކު އެކޯޑިއަން އެއް އުފެއްދުމަށްޓަކައި ޑިފޯލްޓް ކޮލަޕްސް ބިހޭވިއަރ ދިގުކޮށްލާށެވެ.

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

.panel-bodyއަދި s އާއި s ސްވޮޕް އައުޓް ކުރުމަކީ ވެސް ކުރެވިދާނެ ކަމެކެވެ .list-group.

ބޭނުން ކުރުން

ކޮލަޕްސް ޕްލަގިން އިން ހެވީ ލިފްޓިންގ ހެންޑްލް ކުރުމަށް މަދު ކްލާސްތަކެއް ބޭނުން ކުރެއެވެ:

• .collapseކޮންޓެންޓް ފޮރުވައެވެ
• .collapse.inކޮންޓެންޓް ދައްކައެވެ
• .collapsingޓްރާންސިޝަން ފެށުމުން އިތުރުކޮށް، ނިމުމުން ނައްތާލެވޭނެއެވެ

މި ކްލާސްތައް 1 އިން ފެނިވަޑައިގަންނަވާނެއެވެ component-animations.less.

ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް

ހަމައެކަނި ކޮލެޕްސިބަލް އެލިމެންޓެއްގެ ކޮންޓްރޯލް އޮޓޮމެޓިކުން ޙަވާލުކުރުމަށްޓަކައި އެލިމެންޓަށް data-toggle="collapse"އަދި އޭ އިތުރުކޮށްލާށެވެ. data-targetއެޓްރިބިއުޓް ބަލައިގަންނަނީ data-targetކޮލެޕްސް އެޕްލައި ކުރުމަށް ސީއެސްއެސް ސެލެކްޓަރެކެވެ. collapseކޮލެޕްސިބަލް އެލިމެންޓަށް ކްލާސް އިތުރުކުރުން ޔަގީން ކުރައްވާށެވެ . ޑިފޯލްޓްކޮށް ހުޅުވާލަން ބޭނުންނަމަ، އިތުރު ކްލާސް އިތުރުކުރައްވާށެވެ in.

ކޮލެޕްސިބަލް ކޮންޓްރޯލަކަށް އެކޯޑިއަން ކަހަލަ ގްރޫޕް މެނޭޖްމަންޓް އިތުރުކުރުމަށްޓަކައި، ޑޭޓާ އެޓްރިބިއުޓް އިތުރުކުރުން data-parent="#selector". މިކަން ޢަމަލީ ގޮތުން ބަލާލުމަށް ޑެމޯއަށް ރިފަރ ކުރާށެވެ.

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް

މެނުއަލްކޮށް އެނެބަލް ކުރާނީ:

$('.collapse').collapse()

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-parent="".

ގޮތްތައް

.collapse(options)

ކޮލެޕްސިބަލް އެލިމެންޓެއްގެ ގޮތުގައި ތިބާގެ ކޮންޓެންޓް އެކްޓިވޭޓް ކުރެއެވެ. އިޚްތިޔާރީ އިޚްތިޔާރުތަކެއް ބަލައިގަންނަނީ object.

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

.collapse('toggle')

ކޮލެޕްސިބަލް އެލިމެންޓެއް ދައްކާ ނުވަތަ ފޮރުވުމަށް ޓޮގްލް ކުރެއެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ހަގީގަތުގައި ދައްކާ ނުވަތަ ފޮރުވުމުގެ ކުރިން (އެބަހީ shown.bs.collapseނުވަތަ hidden.bs.collapseއިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ.

.collapse('show')

ކޮލެޕްސިބަލް އެލިމެންޓެއް ދައްކައެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ shown.bs.collapseއިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ.

.collapse('hide')

ކޮލެޕްސިބަލް އެލިމެންޓެއް ފޮރުވައެވެ.ކޮލެޕްސިބަލް އެލިމެންޓް ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ hidden.bs.collapseއިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ.

އިވެންޓްސް

ބޫޓްސްޓްރެޕްގެ ކޮލަޕްސް ކްލާސް އިން ކޮލަޕްސް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް މަދު އިވެންޓްތަކެއް ހާމަކޮށްދެ އެވެ.

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

ކެރޮސެލް ކެރޮސެލް.ޖޭއެސް

ކެރޮސެލް ފަދަ އުފެއްދުންތަކުގެ ތެރެއިން ސައިކަލް ދުއްވުމަށް ބޭނުންކުރާ ސްލައިޑްޝޯ ކޮމްޕޮނެންޓެކެވެ.ނެސްޓް ކެރޮސެލްތަކަށް ސަޕޯޓް ނުކުރެއެވެ.

މިސާލުތަކެވެ

ކުރީގެ ދެން

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

އިޚްތިޔާރީ ކެޕްޝަންތަކެވެ

.carousel-captionއެއްވެސް އެއްޗެއްގެ ތެރޭގައި ހުންނަ އެލިމެންޓާއެކު ފަސޭހައިން ސްލައިޑްތަކަށް ކެޕްޝަންތައް އިތުރުކުރުން .item. އެތަނުގެ ތެރޭގައި ގާތްގަނޑަކަށް ކޮންމެ އިޚްތިޔާރީ އެޗްޓީއެމްއެލްއެއް ބަހައްޓައިގެން އޮޓޮމެޓިކުން އެލައިންކޮށް ފޯމެޓް ކުރެވޭނެއެވެ.

ފުރަތަމަ ސްލައިޑް ލޭބަލް

ނޫލާ ވިޓޭ އެލިޓް ލިބަރޯ، އަ ފަރެޓްރާ އޮގް މޮލިސް އިންޓަރޑަމް އެވެ.

ދެވަނަ ސްލައިޑް ލޭބަލް

ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް، ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް.

ތިންވަނަ ސްލައިޑް ލޭބަލް

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

ކުރީގެ ދެން

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

ބޭނުން ކުރުން

އެތައް ކެރޮސެލްއެއް

ކެރޮސެލް ކޮންޓްރޯލްތައް ރަނގަޅަށް މަސައްކަތް ކުރުމަށްޓަކައި idއެންމެ ބޭރު ކޮންޓެއިނަރުގައި ހުންނަ ކޮންޓެއިނަރ (the ) ބޭނުންކުރަން ޖެހެއެވެ. .carouselއެތައް ކެރޮސެލްއެއް އިތުރުކުރާއިރު، ނުވަތަ ކެރޮސެލް ބަދަލުކުރާއިރު، idކަމާބެހޭ ކޮންޓްރޯލްތައް އަޕްޑޭޓްކުރުން ޔަގީންކުރައްވާށެވެ.

ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް

ކެރޮސެލްގެ މަޤާމު ފަސޭހައިން ކޮންޓްރޯލް ކުރުމަށް ޑޭޓާ އެޓްރިބިއުޓްސް ބޭނުން ކުރާށެވެ. data-slideކީވޯޑްތައް ބަލައިގަންނަ prevނުވަތަ next, މިއީ މިހާރު ހުރި މަޤާމަށް ނިސްބަތްކޮށް ސްލައިޑްގެ މަޤާމު ބަދަލުކޮށްދޭ ކަމެކެވެ. ނުވަތަ، data-slide-toކެރޮސެލް އަށް ރޯ ސްލައިޑް އިންޑެކްސް އެއް ފާސްކުރުމަށް ބޭނުންކުރާށެވެ data-slide-to="2", މިއީ ސްލައިޑްގެ މަޤާމު ވަކި އިންޑެކްސްއަކަށް ބަދަލުކޮށްދޭ އެއްޗެކެވެ0 .

މި data-ride="carousel"އެޓްރިބިއުޓް ބޭނުންކުރަނީ ޕޭޖް ލޯޑް ކުރާއިރު ފެށިގެން އެނިމޭޓިންގ ގެ ގޮތުގައި ކެރޮސެލް އެއް ފާހަގަކުރުމަށެވެ. އެއީ އެއް ކެރޮސެލްއެއްގެ (ރިޑަންޑަންޓް އަދި ކޮންމެހެން ބޭނުން ނުވާ) ސާފު ޖާވާސްކްރިޕްޓް އިނިޝިއަލައިޒޭޝަން އާއި ގުޅިގެން ބޭނުން ނުކުރެވޭނެ އެއްޗެކެވެ.

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް

ކެރޮސެލްއަށް މެނުއަލްކޮށް ގުޅާނީ:

$('.carousel').carousel()

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-interval="".

ގޮތްތައް

.carousel(options)

އިޚްތިޔާރީ އޮޕްޝަންތަކަކާއެކު ކެރޮސެލް އިނިޝިއަލައިޒްކޮށް objectތަކެތި މެދުވެރިކޮށް ސައިކަލް ދުއްވަން ފަށައެވެ.

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

.carousel('cycle')

ކެރޮސެލް ތަކެތީގެ ތެރެއިން ކަނާތުން ވާތްފަރާތަށް ސައިކަލް ދުއްވައެވެ.

.carousel('pause')

ތަކެތި މެދުވެރިކޮށް ކެރޮސެލް ސައިކަލް ދުއްވުން ހުއްޓުވައެވެ.

.carousel(number)

ކެރޮސެލް ވަކި ފްރޭމަކަށް ސައިކަލް ކުރެއެވެ (0 އަށް ބިނާކޮށް، އެރޭއަކާ އެއްގޮތް).

.carousel('prev')

ކުރީގެ އައިޓަމަށް ސައިކަލް ކުރެއެވެ.

.carousel('next')

ދެން އޮތް އެއްޗަކަށް ސައިކަލް ކުރެއެވެ.

އިވެންޓްސް

ބޫޓްސްޓްރެޕްގެ ކެރޮސެލް ކްލާހުގައި ކެރޮސެލް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް ދެ އިވެންޓެއް ހާމަކޮށްދެ އެވެ.

ދެ އިވެންޓުގައި ވެސް ތިރީގައިވާ އިތުރު ޕްރޮޕަޓީތައް ހުރެއެވެ.

• direction: ކެރޮސެލް ސްލައިޑް ވަމުންދާ މިސްރާބު (އެއީ "left"ނުވަތަ "right") އެވެ.
• relatedTarget: އެކްޓިވް އައިޓަމްގެ ގޮތުގައި ތަނަށް ސްލައިޑް ކުރަމުންދާ ޑީއޯއެމް އެލިމެންޓް.

ހުރިހާ ކެރޮސެލް އިވެންޓްތަކެއް ފަޔަރ ކުރަނީ ޚުދު ކެރޮސެލް އަށް (އެބަހީ އެ <div class="carousel">) އެވެ.

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

affix.js ޖަހާށެވެ

މިސާލު

އެފިކްސް ޕްލަގިން position: fixed;އޮން އެންޑް އޮފް ޓޮގްލްކޮށް، އިން ފެންނަ އިފެކްޓް އެމިއުލޭޓް ކުރެއެވެ position: sticky;. ކަނާތްފަރާތުގައިވާ ސަބްނެވިގޭޝަނަކީ އެފިކްސް ޕްލަގިންގެ ލައިވް ޑެމޯއެކެވެ.

ބޭނުން ކުރުން

ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް ނުވަތަ އަމިއްލަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް މެނުއަލްކޮށް އެފިކްސް ޕްލަގިން ބޭނުން ކުރާށެވެ. ދެ ހާލަތުގައި ވެސް ތިބާ ޖަހާފައިވާ ކޮންޓެންޓްގެ ޕޮޒިޝަނާއި ފުޅާމިނަށް ސީއެސްއެސް ފޯރުކޮށްދޭން ޖެހެ އެވެ.

ނޯޓް: ސަފާރީ ރެންޑަރިންގ ބަގެއްގެ ސަބަބުން ނިސްބަތުން ޕޮޒިޝަން ކުރެވިފައިވާ އެލިމެންޓެއްގައި ހިމެނޭ އެލިމެންޓެއްގައި، ދަމައިގަނެވޭ ނުވަތަ ކޮއްޕާލާފައިވާ ކޮލަމެއް ފަދަ އެއްޗެއްގައި އެފިކްސް ޕްލަގިން ބޭނުން ނުކުރައްވާށެވެ .

ސީއެސްއެސް މެދުވެރިކޮށް ޕޮޒިޝަން ކުރުން

އެފިކްސް ޕްލަގިން ތިން ކްލާހެއްގެ މެދުގައި ޓޮގްލް ކުރާއިރު، ކޮންމެ ކްލާހެއް ތަމްސީލުކުރަނީ ވަކި ސްޓޭޓެއް: .affix, .affix-top, އަދި .affix-bottom. މި ކްލާސްތަކަށް އަމިއްލައަށް (މި ޕްލަގިން އިން މިނިވަންކޮށް) ސްޓައިލްތައް ފޯރުކޮށްދޭން ޖެހޭނެ، position: fixed;on ފިޔަވައި، ހަގީގީ މަގާމުތައް ބެލެހެއްޓުމަށްޓަކައެވެ..affix

މިއީ އެފިކްސް ޕްލަގިން މަސައްކަތްކުރާ ގޮތެވެ:

1. ފެށުމަށްޓަކައި ޕްލަގިން އިތުރުކުރެއެވެ.affix-top އެލިމެންޓް އޭގެ އެންމެ މަތީ މަޤާމުގައި ހުރިކަން އަންގައިދިނުމަށެވެ. މި ހިސާބުން ސީއެސްއެސް ޕޮޒިޝަނިންގ އެއް ބޭނުން ނުވާނެއެވެ.
2. އެފިކްސް ކުރަން ބޭނުންވާ އެލިމެންޓް ކައިރިން ސްކްރޯލް ކުރުމުން ހަގީގީ އެފިކްސް ކުރުން ޓްރިގަރ ކުރަން ޖެހެއެވެ. މިއީ .affixބަދަލުކޮށް .affix-topސެޓްކުރާ ތަން position: fixed;(ބޫޓްސްޓްރެޕްގެ ސީއެސްއެސް އިން ފޯރުކޮށްދޭ) އެވެ.
3. .affixތިރީ އޮފްސެޓެއް ކަނޑައެޅިފައިވާނަމަ، އޭގެ ފަހަތުން ސްކްރޯލް ކުރުމުން އޭގެ ބަދަލުގައި .affix-bottom. އޮފްސެޓްތަކަކީ އިޚްތިޔާރީ އެއްޗަކަށް ވާތީ، އެއްޗެއް ސެޓް ކުރުމަށްޓަކައި އެކަށީގެންވާ ސީއެސްއެސް ސެޓް ކުރަން ޖެހެއެވެ. މި ހާލަތުގައި position: absolute;ބޭނުންވާ ވަގުތު އިތުރު ކުރާށެވެ. އެތަނުން އެލިމެންޓް ޕޮޒިޝަން ކުރާނެ ތަނެއް ކަނޑައެޅުމަށް ޕްލަގިން އިން ޑޭޓާ އެޓްރިބިއުޓް ނުވަތަ ޖާވާސްކްރިޕްޓް އޮޕްޝަން ބޭނުން ކުރެ އެވެ.

ތިރީގައިވާ އެއްވެސް ޔޫސޭޖް އޮޕްޝަނަކަށް ސީއެސްއެސް ސެޓް ކުރުމަށް މަތީގައިވާ ފިޔަވަޅުތަކަށް އަމަލު ކުރައްވާށެވެ.

ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް

ކޮންމެ އެލިމެންޓަކަށް ވެސް ފަސޭހައިން އެފިކްސް ބިހޭވިއަރ އިތުރު ކުރުމަށްޓަކައި، ހަމައެކަނި data-spy="affix"ސްޕައި ކުރަން ބޭނުންވާ އެލިމެންޓަށް އެޑް ކޮށްލާށެވެ. އެލިމެންޓެއްގެ ޕިނިންގ ޓޮގްލް ކުރަންވީ ވަގުތު ކަނޑައެޅުމަށް އޮފްސެޓްތައް ބޭނުން ކުރާށެވެ.

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

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އެފިކްސް ޕްލަގިން އަށް ގުޅާލާ:

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

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-offset-top="200".

ގޮތްތައް

.affix(options)

އެފިކްސްޑް ކޮންޓެންޓެއްގެ ގޮތުގައި ތިމާގެ ކޮންޓެންޓް އެކްޓިވޭޓް ކުރެއެވެ. އިޚްތިޔާރީ އިޚްތިޔާރުތަކެއް ބަލައިގަންނަނީ object.

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

.affix('checkPosition')

ކަމާބެހޭ އުފެއްދުންތަކުގެ ޑިމައިންސްތަކާއި، މަޤާމާއި، ސްކްރޯލް މަޤާމަށް ބަލައިގެން އެފިކްސްގެ ޙާލަތު އަލުން ހިސާބުކުރެއެވެ. .affix, .affix-top, އަދި ކްލާސްތައް .affix-bottomއާ ހާލަތަށް ބަލާފައި ޖަހާފައިވާ ކޮންޓެންޓަށް އިތުރުކޮށް ނުވަތަ އުނިކުރެއެވެ. މި އުސޫލަށް ގޮވާލަން ޖެހެނީ އެފިކްސް ކުރެވިފައިވާ ކޮންޓެންޓް ނުވަތަ ޓާގެޓް އެލިމެންޓްގެ ޑިމައިންސްތަކަށް ބަދަލު އަންނަ ކޮންމެ ފަހަރަކު، އެފިކްސް ކުރެވިފައިވާ ކޮންޓެންޓް ރަނގަޅަށް ޕޮޒިޝަން ކުރެވޭތޯއެވެ.

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

އިވެންޓްސް

ބޫޓްސްޓްރެޕްގެ އެފިކްސް ޕްލަގިން އިން އެފިކްސް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް މަދު އިވެންޓްތަކެއް ހާމަކޮށްދެއެވެ.