އޯވަރވިއު

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

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

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

ދެ ޕްލަގިންސް bootstrap.jsއެއް bootstrap.min.jsފައިލެއްގައި ހިމެނޭ ހުރިހާ ޕްލަގިންތަކެކެވެ. އެކަނި ހިމަނާށެވެ.

ޕްލަގިން ޑިޕެންޑެންސީސް

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

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

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

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

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

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

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

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

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

ތިންވަނަ ފަރާތެއްގެ ލައިބްރަރީތަކެވެ

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

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

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

ސާދާ ޓްރާންސިޝަން އިފެކްޓްތަކަށްޓަކައި، 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>

މޮޑަލްތައް ފަސޭހައިން ލިބޭނެ ގޮތް ހަދާށެވެ

role="dialog"އަދި އަދި aria-labelledby="...", މޮޑަލް ސުރުޚީއަށް ރިފަރެންސްކޮށް، އަށް .modal, އަދި ޚުދު role="document"އަށް އިތުރުކުރުން ޔަޤީންކުރައްވާށެވެ ..modal-dialog

aria-describedbyމީގެ އިތުރުން، ތިބާގެ މޮޑަލް ޑައިލޮގްގެ ބަޔާނެއް އޮން އިން ދީފާނެއެވެ .modal.

ޔޫޓިއުބް ވީޑިއޯތައް އެންބެޑް ކުރުން

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

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

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

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

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

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

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

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

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

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

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

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

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

މި އިޚްތިޔާރަކީ v3.3.0 އިން ފެށިގެން ޑިޕްރެކޭޓް ކުރެވިފައިވާ އިޚްތިޔާރަކަށް ވާއިރު، v4 ގައި ނައްތާލެވިފައިވާ އިޚްތިޔާރެކެވެ. އަޅުގަނޑުމެން ލަފާދެނީ އޭގެ ބަދަލުގައި ކްލައިންޓް ސައިޑް ޓެމްޕްލޭޓިންގ ނުވަތަ ޑޭޓާ ބައިންޑިންގ ފްރޭމްވޯކެއް ބޭނުންކުރުމަށާއި، ނުވަތަ އަމިއްލައަށް jQuery.load އަށް ގޮވާލުމަށެވެ .

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

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

ގޮތްތައް

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

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

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

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

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

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

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

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

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

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

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

އިވެންޓްސް

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

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

އިވެންޓް ޓައިޕް ތަފްޞީލު
ޝޯ.ބީއެސް.މޯޑަލް މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ showއިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ. ކްލިކް އެއްގެ ސަބަބުން ދިމާވާނަމަ، ކްލިކް ކުރެވުނު އެލިމެންޓް relatedTargetއިވެންޓްގެ ޕްރޮޕަޓީއެއްގެ ގޮތުގައި ލިބެން ހުންނާނެއެވެ.
ދައްކާފައިވާ.bs.modal މި އިވެންޓް ފަޔަރ ކުރެވެނީ މޮޑަލް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. ކްލިކް އެއްގެ ސަބަބުން ދިމާވާނަމަ، ކްލިކް ކުރެވުނު އެލިމެންޓް relatedTargetއިވެންޓްގެ ޕްރޮޕަޓީއެއްގެ ގޮތުގައި ލިބެން ހުންނާނެއެވެ.
ފޮރުވާ.ބީއެސް.މޮޑަލް މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hideއިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ.
ފޮރުވިފައިވާ.ބީއެސް.މޮޑަލް މި އިވެންޓް ފަޔަރ ކުރެވެނީ މޮޑަލް ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
ލޯޑްޑް.ބީއެސް.މޮޑަލް remoteމި އިވެންޓް ފަޔަރ ކުރެވެނީ މޮޑަލް އިން އޮޕްޝަން ބޭނުންކޮށްގެން ކޮންޓެންޓް ލޯޑް ކޮށްފައި އޮތުމުންނެވެ .
$('#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()

data-toggle="dropdown"އަދިވެސް ބޭނުންވެއެވެ

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޑްރޮޕްޑައުންއަށް ގޮވާލިޔަސް ނުވަތަ އޭގެ ބަދަލުގައި ޑޭޓާ-އޭޕީއައި ބޭނުންކުރިޔަސް، data-toggle="dropdown"އަބަދުވެސް ޑްރޮޕްޑައުންގެ ޓްރިގަރ އެލިމެންޓްގައި ހުންނަން ޖެހެއެވެ.

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

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

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

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

އިވެންޓް ޓައިޕް ތަފްޞީލު
show.bs.ޑްރޮޕްޑައުން މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ ޝޯ އިންސްޓޭންސް މެތޯޑަށް ގޮވާލުމުންނެވެ.
shown.bs.ޑްރޮޕްޑައުން މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޑްރޮޕްޑައުން ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތަކަށް އިންތިޒާރު ކުރާނެ، ފުރިހަމަ ކުރުމަށް) އެވެ.
hide.bs.ޑްރޮޕްޑައުން މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ ހައިޑް އިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ.
ފޮރުވިފައިވާ.ބީއެސް.ޑްރޮޕްޑައުން މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޑްރޮޕްޑައުން ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތަކަށް އިންތިޒާރު ކުރާނެ، ފުރިހަމަ ކުރުމަށް) އެވެ.
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

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

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

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

@ފަލަ

އެޑް ލެގިންސް ކީޓަރ، ބްރަންޗް އައިޑީ އާޓް ޕާޓީ ޑޮލޯރ ލޭބަރ. ޕިޗްފޯކް ޔަރ އެނިމް ލޯ-ފައި ކުރިން އެމީހުން ވިކި ހުސްވީ ކި. ޓަމްބްލަރ ފާމް ޓު ޓޭބަލް ސައިކަލް ރައިޓްސް ކޮންމެ ގޮތެއް ވިޔަސް. އަނިމް ކެފިޔޭ ކާލްސް ކާޑިގަން. ވެލިޓް ސެއިޓަން mcsweeney ގެ ފޮޓޯ ޖަގަހަ 3 ވޯލްފް މޫން irure. ކޮސްބީ ސްވެޓަރ ލޯމޯ ޖީން ޝޯޓްސް، ވިލިއަމްސްބަރގް ހޫޑީ މިނިމް ކުއީ ޔޫ ޕްރޮބަބަލީ ހެވް ނޮޓް ހެއިޑް އޮފް ދިސް އެޓް ކާޑިގަން ޓްރަސްޓް ފަންޑް ކަލްޕާ ބަޔޯޑީސެލް ވޭސް އެންޑަސަން އެސްތެޓިކް. ނިހިލް ޓެޓޫ ޖަހާފައިވާ އެކިއުމަސް، ކްރެޑް އިރޮނީ ބަޔޯޑީސަލް ކެފިޔޭ އާޓިޒަން އުލަމްކޯ ކޮންސެކިއުޓް.

@mdo

ވެނިއަމް މާރފާ މޫނުމަތީގެ ސްކޭޓްބޯޑް، އެޑިޕިސިސިންގ ފުޖިއަޓް ވެލިޓް ޕިޗްފޯކް ތުނބުޅި. ފްރީގަން ތުނބުޅި އަލިކުއާ ކިއުޕިޑޭޓަޓް މެކްސްވީނީގެ ވެރޯ އެވެ. ކިއުޕިޑޭޓަޓް ހަތަރު ލޮކޯ ނިސީ، އީއޭ ހެލްވެޓިކާ ނޫލާ ކާރލްސް. ޓެޓޫ ޖަހާފައިވާ ކޮސްބީ ސްވެޓަރ ފުޑް ޓްރަކް، މެކްސްވީނީގެ ކުއިސް ނޮން ފްރީގަން ވައިނައިލް އެވެ. ލޯ-ފައި ވެސް އެންޑަސަން +1 ސާޓޯރިއަލް. ކާލްސް ނޮން އެސްތެޓިކް އެކްސަސައިޓޭޝަން ކުއިސް ޖެންޓްރިފައި. ބްރޫކްލިން އެޑިޕިސިސިންގ ކްރާފްޓް ބިޔަރު ވައިސް ކީޓަރ ޑެސެރަންޓް.

އެކެއް

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

ދޭއް

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

three

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

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

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

ބޫޓްސްޓްރެޕް ނެވް އަށް ބޭނުންވެއެވެ

ސްކްރޯލްސްޕައިގައި މިވަގުތު އެކްޓިވް ލިންކްތައް ރަނގަޅަށް ހައިލައިޓް ކުރުމަށްޓަކައި ބޫޓްސްޓްރެޕް ނެވް ކޮމްޕޮނެންޓެއް ބޭނުން ކުރަން ޖެހެއެވެ.

ރިޒޮލްވް ކުރެވޭ އައިޑީ ޓާގެޓްތައް ބޭނުންވެއެވެ

ނަވްބާރ ލިންކްތަކުގައި ރިޒޮލްވް ކުރެވޭ އައިޑީ ޓާގެޓްތައް ހުންނަން ޖެހެއެވެ. މިސާލަކަށް <a href="#home">home</a>ޑީއޯއެމްގައި ހުންނަ އެއްޗަކާ ދިމާވާން ޖެހޭނީ <div id="home"></div>.

ނޮން- :visibleޓާގެޓް އެލިމެންޓްތަކަށް އަޅާނުލާށެވެ

:visibleޖީކުއަރީއާ އެއްގޮތަށް ނުވާ ޓާގެޓް އެލިމެންޓްތަކަށް އަޅާނުލާ އެ އެލިމެންޓްތަކާ ގުޅޭ ނެވް އައިޓަމްތައް ދުވަހަކުވެސް ހައިލައިޓް ނުކުރެވޭނެއެވެ.

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

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

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

އިވެންޓްސް

އިވެންޓް ޓައިޕް ތަފްޞީލު
އެކްޓިވޭޓް.ބީއެސް.ސްކްރޯލްސްޕީ މި އިވެންޓް ސްކްރޯލްސްޕީ އިން އާ އެއްޗެއް އެކްޓިވޭޓް ކުރާ ކޮންމެ ފަހަރަކު ފަޔަރ ވެއެވެ.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

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

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

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

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

ޓެބް ކުރެވިފައިވާ ނޭވިގޭޝަން ފުޅާކުރެއެވެ

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

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

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

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

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

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

މާކަޕް

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

<div>

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

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

</div>

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

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

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

ގޮތްތައް

$().tab

ޓެބް އެލިމެންޓަކާއި ކޮންޓެންޓް ކޮންޓެއިނަރ އެއް އެކްޓިވޭޓް ކުރެއެވެ. ޓެބްގައި ޑީއޯއެމްގައި ކޮންޓެއިނަރ ނޯޑަކަށް ޓާގެޓްކުރާ އެއްޗެއް data-targetނުވަތަ އެއްޗެއް ހުންނަންވާނެއެވެ. hrefމަތީގައިވާ މިސާލުތަކުގައި ޓެބްތަކަކީ އެޓްރިބިއުޓްތަކާއެކު <a>s އެވެ .data-toggle="tab"

.tab('show')

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

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

އިވެންޓްސް

އާ ޓެބެއް ދައްކާއިރު، އިވެންޓްތައް ފަޔަރ ކުރަނީ ތިރީގައިވާ ތަރުތީބުންނެވެ.

  1. hide.bs.tab(މިހާރު އެކްޓިވް ޓެބްގައި)
  2. show.bs.tab(ދައްކާނެ ޓެބްގައި)
  3. hidden.bs.tab(ކުރިން އެކްޓިވް ޓެބްގައި، hide.bs.tabއިވެންޓަށް ހެދި ޓެބްގައި)
  4. shown.bs.tab(އަލަށް އެކްޓިވް ވެފައިވާ ދެންމެ ދައްކާފައިވާ ޓެބްގައި، show.bs.tabއިވެންޓަށް ހެދި ޓެބްގައި)

އެއްވެސް ޓެބެއް ކުރިން އެކްޓިވް ނުވާނަމަ، ދެން hide.bs.tabއަދި hidden.bs.tabއިވެންޓްތައް ފަޔަރ ނުކުރެވޭނެއެވެ.

އިވެންޓް ޓައިޕް ތަފްޞީލު
ޝޯ.ބީއެސް.ޓެބް މި އިވެންޓް ފަޔަރ ކުރަނީ ޓެބް ޝޯގައި ނަމަވެސް އާ ޓެބް ދައްކާލުމުގެ ކުރިންނެވެ. އެކްޓިވް ޓެބާއި ކުރީގެ އެކްޓިވް ޓެބަށް (ލިބިފައިވާނަމަ) ޓާގެޓް ކުރުމަށް event.targetއަދި ބޭނުން ކުރާށެވެ .event.relatedTarget
ދައްކާފައިވާ.bs.tab މި އިވެންޓް ޓެބް ޝޯގައި ފަޔަރ ކުރަނީ ޓެބެއް ދެއްކުމަށްފަހުގައެވެ. އެކްޓިވް ޓެބާއި ކުރީގެ އެކްޓިވް ޓެބަށް (ލިބިފައިވާނަމަ) ޓާގެޓް ކުރުމަށް event.targetއަދި ބޭނުން ކުރާށެވެ .event.relatedTarget
hide.bs.tab އަށް ފޮރުވާށެވެ މި އިވެންޓް ފަޔަރ ވާނީ އާ ޓެބެއް ދައްކަން ޖެހޭ ވަގުތު (އަދި މިހެން ވުމުން ކުރީގެ އެކްޓިވް ޓެބް ފޮރުވަން ޖެހޭ ވަގުތު) އެވެ. މިހާރު އެކްޓިވް ޓެބާއި ވަރަށް އަވަހަށް އެކްޓިވް ވާނެ އާ ޓެބަށް އަމާޒު ކުރުމަށް event.targetއަދި ބޭނުން ކުރާށެވެ .event.relatedTarget
ފޮރުވިފައިވާ.ބީއެސް.ޓެބް މި އިވެންޓް ފަޔަރ ކުރަނީ އާ ޓެބެއް ދެއްކުމަށްފަހު (އަދި މިހެން ވުމުން ކުރީގެ އެކްޓިވް ޓެބް ފޮރުވިގެން ދިއުމުންނެވެ). ކުރީގެ އެކްޓިވް ޓެބާއި އާ އެކްޓިވް ޓެބަށް ޓާގެޓް ކުރުމަށް event.targetއަދި ބޭނުން ކުރާށެވެ .event.relatedTarget
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

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

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

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

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

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

ޓައިޓް ޕެންޓްސް ނެކްސްޓް ލެވެލް ކެފިޔޭ ތިޔަބޭފުޅުންނަށް ފަހަރެއްގައި އެތަކެތީގެ ވާހަކައެއް އަޑުއިވިފައެއް ނެތް. ފޮޓޯ ޖަގަހަ ތުނބުޅި ރޯ ޑެނިމް ލެޓަރޕްރެސް ވީގަން މެސެންޖަރ ބެގް ސްޓަމްޕްޓައުން. ފާމް ޓު ޓޭބަލް ސެއިޓަން، އެމްސީއެސްވީނީގެ ފިކްސީ ސަސްޓެއިނަބަލް ކިނޯއާ 8 ބިޓް އެމެރިކަން އެޕަރަލްގައި ޓެރީ ރިޗާޑްސަން ވައިނައިލް ޗެމްބްރޭ އެއް ހުންނާނެ އެވެ. ތުނބުޅި ސްޓަމްޕްޓައުން، ކާޑިގަންސް ބަންހް މި ލޯމޯ ތަންޑަރކެޓްސް. ޓޯފޫ ބަޔޯޑީސަލް ވިލިއަމްސްބަރގް މާރފާ، ހަތަރު ލޮކޯ މެކްސްވީނީގެ ކްލީންސް ވީގަން ޗެމްބްރޭ. A really ironic artisan whatever keytar , ސީންސްޓަރ ފާމް-ޓު-ޓޭބަލް ބޭންކްސީ އޮސްޓިން ޓްވިޓަރ ހެންޑްލް ފްރީގަން ކްރެޑް ރޯ ޑެނިމް ސިންގަލް-އޮރިޖިން ކޮފީ ވައިރަލް.

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

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

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

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

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

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

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

އޮޕްޓް-އިން ފަންކްޝަނަލިޓީ

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

ޕޭޖެއްގައި ހުރި ހުރިހާ ޓޫލްޓިޕްތަކެއް އިނިޝިއަލައިޒް ކުރެވޭނެ އެއް ގޮތަކީ އެ ޓޫލްޓިޕްތަކުގެ data-toggleއެޓްރިބިއުޓް އަށް ބަލައިގެން އެ ޓޫލްޓިޕްތައް ހޮވުމެވެ:

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

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

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

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

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

މާކަޕް

ޓޫލްޓިޕަކަށް ބޭނުންވާ މާކަޕަކީ ހަމައެކަނި dataއެޓްރިބިއުޓެއް ކަމަށާއި 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>

މަލްޓިޕަލް ލައިން ލިންކްތަކެވެ

ބައެއް ފަހަރު ގިނަ ލައިނެއް އޮޅާލާ ހައިޕަރލިންކަކަށް ޓޫލްޓިޕް އެއް އިތުރުކުރަން ބޭނުންވެއެވެ. ޓޫލްޓިޕް ޕްލަގިންގެ ޑިފޯލްޓް ސުލޫކަކީ ހޮރޮޒޮންޓަލީ އަދި ވަރޓިކަލީ ސެންޓަރ ކުރުމެވެ. white-space: nowrap;މިކަމުން ސަލާމަތްވުމަށްޓަކައި ތިމާގެ ނަކަތްތަކަށް އިތުރުކޮށްލާށެވެ .

ބަޓަން ގްރޫޕްތަކާއި، އިންޕުޓް ގްރޫޕްތަކާއި، ޓޭބަލްތަކުގައި ހުންނަ ޓޫލްޓިޕްތަކަށް ޚާއްޞަ ސެޓިންގއެއް ބޭނުންވެއެވެ

.btn-groupa ނުވަތަ an ގެ ތެރޭގައި ހުންނަ އެލިމެންޓްތަކުގައި .input-groupނުވަތަ ޓޭބަލްއާ ގުޅުންހުރި އެލިމެންޓްތަކުގައި ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>) ޓޫލްޓިޕްސް ބޭނުންކުރާއިރު ، container: 'body'ނޭދެވޭ ނޭދެވޭ އަސަރުތަކުން ސަލާމަތްވުމަށްޓަކައި (އެލިމެންޓް ފުޅާވުމާއި/ ނުވަތަ ޓޫލްޓިޕް ޓްރިގަރ ކުރުމުން އޭގެ ވަށައިގެންވާ ކޮޅުތައް ގެއްލިގެން ދިއުން).

ފޮރުވިފައިވާ އުފެއްދުންތަކުގެ މައްޗަށް ޓޫލްޓިޕްސް ދައްކަން މަސައްކަތް ނުކުރާށެވެ

$(...).tooltip('show')ޓާގެޓް އެލިމެންޓް ހުންނައިރު އިންވޯކް ކުރުމުން display: none;ޓޫލްޓިޕް ގޯސްކޮށް ޕޮޒިޝަން ކުރެވޭނެއެވެ.

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

ކީބޯޑަކުން ދަތުރުކުރާ ޔޫޒަރުންނަށް، އަދި ޚާއްޞަކޮށް އެހީތެރި ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް، ކީބޯޑަށް ފޯކަސް ކުރެވޭ ލިންކްތަކާއި، ފޯމް ކޮންޓްރޯލްތަކާއި، ނުވަތަ tabindex="0"އެޓްރިބިއުޓެއް ހުންނަ އެއްވެސް އަމިއްލައަށް އުފެދޭ އެލިމެންޓަކަށް ޓޫލްޓިޕްތައް އިތުރުކުރަންވާނެއެވެ.

ނުކުޅެދުންތެރިކަން ހުންނަ އެލިމެންޓްތަކާ ބެހޭ ޓޫލްޓިޕްސް އަށް ރެޕަރ އެލިމެންޓްތައް ބޭނުންވެއެވެ

disableda ނުވަތަ އެލިމެންޓަކަށް ޓޫލްޓިޕް އިތުރުކުރުމަށްޓަކައި، .disabledއެލިމެންޓް a ގެ އެތެރޭގައި ބަހައްޓައި، އޭގެ ބަދަލުގައި <div>އެއަށް ޓޫލްޓިޕް ޖަހާށެވެ .<div>

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

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

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

ވަކި އެލިމެންޓަކަށް ޓޫލްޓިޕް އިތުރުކުރެއެވެ. މިސާލު: container: 'body'. މި އިޚްތިޔާރަކީ ޚާއްޞަކޮށް ބޭނުންތެރި އިޚްތިޔާރަކީ ޓްރިގަރިންގ އެލިމެންޓް ކައިރީގައި ޑޮކިއުމަންޓްގެ ފްލޯގައި ޓޫލްޓިޕް ބެހެއްޓޭނެ ގޮތް ކަމުގައި ވާތީ - މިއީ ވިންޑޯ ރައިޒް ބަދަލުކުރާއިރު ޓޫލްޓިޕް ޓްރިގަރިންގ އެލިމެންޓާ ދުރަށް ފްލޯޓް ނުކުރެވޭނެ ގޮތެކެވެ.

ލަސްވުން ނަންބަރު | އެއްޗެއް 0

ޓޫލްޓިޕް ދައްކައި ފޮރުވުން ލަސްކުރުން (ms) - މެނުއަލް ޓްރިގަރ ޓައިޕް އަށް ނުހިނގާނެއެވެ

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

އެއްޗެއްގެ އޮނިގަނޑަކީ:delay: { "show": 500, "hide": 100 }

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

ޓޫލްޓިޕް ޕޮޒިޝަން ކުރާނެ ގޮތް - މަތީ | ތިރީގައި | ކަނާތްފަރާތުން | ރަނގަޅަށް | އޮޓޯ.
"އޮޓޯ" ކަނޑައެޅިއްޖެނަމަ، އެއީ ޑައިނަމިކް ގޮތެއްގައި ޓޫލްޓިޕް ރީއޮރިއެންޓް ކުރާނެ އެއްޗެކެވެ. މިސާލަކަށް ޕްލޭސްމަންޓަކީ "އޮޓޯ ލެފްޓް" ނަމަ، ކުރެވެން އޮތް ވަގުތެއްގައި ޓޫލްޓިޕް ކަނާތް ފަރާތަށް ފެންނާނެ، އެހެން ނޫންނަމަ ކަނާތް ފަރާތަށް ފެންނާނެއެވެ.

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

ސެލެކްޓަރ އެވެ ސްޓްރިންގ ރަނގަޅުނޫން ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، ޓޫލްޓިޕް އޮބްޖެކްޓްތައް ކަނޑައެޅިފައިވާ ޓާގެޓްތަކަށް ޑެލިގޭޓް ކުރެވޭނެއެވެ. ޢަމަލީގޮތުން މިއީ ޑައިނަމިކް އެޗްޓީއެމްއެލް ކޮންޓެންޓްގައި ޓޫލްޓިޕްސް އިތުރުކުރެވޭނެ ގޮތް ހެދުމަށް ބޭނުންކުރާ އެއްޗެކެވެ. މިކަމާއި މަޢުލޫމާތު ގިނަ މިސާލެއް ބައްލަވާށެވެ .
ޓެމްޕްލޭޓް ސްޓްރިންގ '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ޓޫލްޓިޕް އުފައްދާއިރު ބޭނުންކުރާނެ އެޗްޓީއެމްއެލް ބޭސްކުރުން.

ޓޫލްޓިޕްގެ titleތެރެއަށް އިންޖެކްޓް ކުރެވޭނެއެވެ .tooltip-inner.

.tooltip-arrowޓޫލްޓިޕްގެ ތިރިއަށް ވެގެންދާނެއެވެ.

އެންމެ ބޭރުގައި ހުންނަ ރެޕަރ އެލިމެންޓްގައި .tooltipކްލާސް ހުންނަންވާނެއެވެ.

މަޤާމު ސްޓްރިންގް | ފަންކްޝަން '' އެވެ.

titleއެޓްރިބިއުޓް ނެތްނަމަ ޑިފޯލްޓް ޓައިޓަލް ވެލިއު .

ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ thisރެފަރެންސް ސެޓްކޮށްގެން ޓޫލްޓިޕް އެޓޭޗްކޮށްފައިވާ އެލިމެންޓަށް ސެޓްކޮށްގެންނެވެ.

ކަމެއްވުމަށް މެދުވެރިވާ ސަބަބު ސްޓްރިންގ 'ހޯވަރ ފޯކަސް'. ޓޫލްޓިޕް ޓްރިގަރ ކުރާ ގޮތް - | ހޯވަރ ކުރާށެވެ | ފޯކަސް | މެނުއަލް. އެތައް ޓްރިގަރެއް ފާސްވެދާނެ؛ އެތަކެތި ވަކިކޮށް ޖާގައެއް ދީގެންނެވެ. manualއެހެން އެއްވެސް ޓްރިގަރަކާ ގުޅުވައި ނުލެވޭނެއެވެ.
ވިއުޕޯޓް ސްޓްރިންގް | އެއްޗެއް | ފަންކްޝަން { ސެލެކްޓަރ: 'ހަށިގަނޑު'، ޕެޑިންގ: 0 }

މި އެލިމެންޓްގެ ޙައްދުތަކުގެ ތެރޭގައި ޓޫލްޓިޕް ބެހެއްޓޭނެއެވެ. މިސާލު: viewport: '#viewport'ނުވަތަ{ "selector": "#viewport", "padding": 0 }

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

ވަކިވަކި ޓޫލްޓިޕްތަކަށް ޑޭޓާ އެޓްރިބިއުޓްސް

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

ގޮތްތައް

$().tooltip(options)

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

.tooltip('show')

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

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

.tooltip('hide')

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

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

.tooltip('toggle')

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

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

.tooltip('destroy')

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

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

އިވެންޓްސް

އިވެންޓް ޓައިޕް ތަފްޞީލު
ޝޯ.ބީއެސް.ޓޫލްޓިޕް މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ showއިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ.
ދައްކާފައިވާ.bs.tooltip މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޫލްޓިޕް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
hide.bs.ޓޫލްޓިޕް މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hideއިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ.
ފޮރުވިފައިވާ.ބީއެސް.ޓޫލްޓިޕް މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޫލްޓިޕް ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
އިންސަރޓެޑް.ބީއެސް.ޓޫލްޓިޕް މި އިވެންޓް ފަޔަރ ކުރެވެނީ show.bs.tooltipއިވެންޓަށްފަހު ޓޫލްޓިޕް ޓެމްޕްލޭޓް ޑީއޯއެމްއަށް އިތުރުކޮށްފައިވުމުންނެވެ.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

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

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

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

ޕްލަގިން ޑިޕެންޑެންސީ

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

އޮޕްޓް-އިން ފަންކްޝަނަލިޓީ

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

ޕޭޖެއްގައި ހުންނަ ހުރިހާ ޕޮޕޯވަރސް އެއް އިނިޝިއަލައިޒް ކުރެވޭނެ އެއް ގޮތަކީ އެ ޕޮޕޯވަރސް data-toggleއެޓްރިބިއުޓް އަށް ބަލައިގެން ހޮވުމެވެ:

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

ބަޓަން ގްރޫޕްތަކާއި، އިންޕުޓް ގްރޫޕްތަކާއި، ޓޭބަލްތަކުގައި ހުންނަ ޕޮޕޯވަރސް އަށް ޚާއްޞަ ސެޓިންގ އެއް ބޭނުންވެއެވެ

.btn-groupa ނުވަތަ an ގެ ތެރޭގައިވާ އުފެއްދުންތަކުގައި ޕޮޕޯވަރސް ބޭނުންކުރާއިރު .input-group، ނުވަތަ ތާވަލާ ގުޅުންހުރި އުފެއްދުންތަކުގައި ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>container: 'body'ނޭދެވޭ ނޭދެވޭ އަސަރުތަކުން ސަލާމަތްވުމަށްޓަކައި (އެލިމެންޓް ފުޅާވުން ފަދަ އަދި/ ނުވަތަ ޕޮޕޯވަރ ޓްރިގަރ ކުރުމުން އޭގެ ވަށައިގެންވާ ކޮޅުތައް ގެއްލިގެން ދިއުން).

ފޮރުވިފައިވާ އުފެއްދުންތަކުގެ މައްޗަށް ޕޮޕޯވަރސް ދައްކަން މަސައްކަތް ނުކުރާށެވެ

$(...).popover('show')ޓާގެޓް އެލިމެންޓް ހުންނަ ވަގުތު އިންވޯކް ކުރުމުން display: none;ޕޮޕޯވަރ ގޯސްކޮށް ޕޮޒިޝަން ކުރެވޭނެއެވެ.

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

ޕޮޕޯވަރ އެއް disabledނުވަތަ .disabledއެލިމެންޓަކަށް އިތުރު ކުރުމަށްޓަކައި، އެ އެލިމެންޓް އޭގެ ތެރެއަށް ލާފައި އޭގެ ބަދަލުގައި <div>އެއަށް ޕޮޕޯވަރ އުނގުޅާށެވެ .<div>

މަލްޓިޕަލް ލައިން ލިންކްތަކެވެ

ބައެއް ފަހަރު ގިނަ ލައިންތަކެއް އޮޅާލާ ހައިޕަރލިންކަކަށް ޕޮޕޯވަރ އެއް އިތުރުކުރަން ބޭނުންވެއެވެ. ޕޮޕޯވަރ ޕްލަގިންގެ ޑިފޯލްޓް ބިހޭވިއަރ އަކީ ހޮރޮޒޮންޓަލީ އަދި ވަރޓިކަލީ ސެންޓަރ ކުރުމެވެ. white-space: nowrap;މިކަމުން ސަލާމަތްވުމަށްޓަކައި ތިމާގެ ނަކަތްތަކަށް އިތުރުކޮށްލާށެވެ .

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

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

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

ޕޮޕޯވަރ ޓޮޕް

ސެޑް ޕޮސުއެރެ ކޮންސެކްޓެޗަރ އެސްޓް އެޓް ލޮބޯޓިސް. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ.

ޕޮޕޯވަރ ތެދެއް

ސެޑް ޕޮސުއެރެ ކޮންސެކްޓެޗަރ އެސްޓް އެޓް ލޮބޯޓިސް. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ.

ޕޮޕޯވަރ ތިރިއަށް

ސެޑް ޕޮސުއެރެ ކޮންސެކްޓެޗަރ އެސްޓް އެޓް ލޮބޯޓިސް. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ.

ޕޮޕޯވަރ ދިޔައީއެވެ

ސެޑް ޕޮސުއެރެ ކޮންސެކްޓެޗަރ އެސްޓް އެޓް ލޮބޯޓިސް. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ.

ލައިވް ޑެމޯ

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

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

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

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

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

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

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

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

ޑިސްމިސް-އޮން-ނެކްސްޓް-ކްލިކް އަށް ވަކި މާކަޕް އެއް ބޭނުންވެއެވެ

ރަނގަޅަށް ކްރޮސް ބްރައުޒަރ އަދި ކްރޮސް ޕްލެޓްފޯމް ސުލޫކަށްޓަކައި، ޓެގް ނޫން ޓެގް ބޭނުން ކުރަން ޖެހޭއިރު ، <a>އަދި އަދި އެޓްރިބިއުޓްސް ވެސް <button>ހިމަނަން ޖެހެއެވެ .role="button"tabindex

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

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

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

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

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

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

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

ވަކި އުނިއިތުރަކަށް ޕޮޕޯވަރ އިތުރުކުރެއެވެ. މިސާލު: container: 'body'. މި އިޚްތިޔާރަކީ ޚާއްޞަކޮށް ބޭނުންތެރި އިޚްތިޔާރަކީ ޓްރިގަރިންގ އެލިމެންޓް ކައިރީގައި ޑޮކިއުމަންޓްގެ ފްލޯގައި ޕޮޕޯވަރ ޕޮޒިޝަން ކުރެވޭނެ ގޮތް ހެދުމެވެ - މިއީ ވިންޑޯ ރީސައިޒް ކުރާއިރު ޕޮޕޯވަރ ޓްރިގަރިންގ އެލިމެންޓާ ދުރަށް ފްލޯޓް ނުކުރެވޭނެ ގޮތެކެވެ.

ކޮންޓެންޓް ސްޓްރިންގް | ފަންކްޝަން '' އެވެ.

data-contentއެޓްރިބިއުޓް ނެތްނަމަ ޑިފޯލްޓް ކޮންޓެންޓް ވެލިއު .

ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ thisރެފަރެންސް ސެޓްކޮށްގެން ޕޮޕޯވަރ އެޓޭޗްކޮށްފައިވާ އެލިމެންޓަށް ސެޓްކޮށްގެންނެވެ.

ލަސްވުން ނަންބަރު | އެއްޗެއް 0

ޕޮޕޯވަރ ދައްކާ ފޮރުވުން ލަސްކުރުން (ms) - މެނުއަލް ޓްރިގަރ ޓައިޕް އަށް ނުހިނގާނެއެވެ

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

އެއްޗެއްގެ އޮނިގަނޑަކީ:delay: { "show": 500, "hide": 100 }

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

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

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

ސެލެކްޓަރ އެވެ ސްޓްރިންގ ރަނގަޅުނޫން ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، ޕޮޕޯވަރ އޮބްޖެކްޓްތައް ކަނޑައެޅިފައިވާ ޓާގެޓްތަކަށް ޑެލިގޭޓް ކުރެވޭނެއެވެ. ޢަމަލީގޮތުން މިއީ ޑައިނަމިކް އެޗްޓީއެމްއެލް ކޮންޓެންޓްގައި ޕޮޕޯވަރސް އިތުރުކުރެވޭނެ ގޮތް ހެދުމަށް ބޭނުންކުރާ އެއްޗެކެވެ. މިކަމާއި މަޢުލޫމާތު ގިނަ މިސާލެއް ބައްލަވާށެވެ .
ޓެމްޕްލޭޓް ސްޓްރިންގ '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

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

އެ ޕޮޕޯވަރސް titleއިންޖެކްޓް ކުރާނީ .popover-title.

އެ ޕޮޕޯވަރސް contentއިންޖެކްޓް ކުރާނީ .popover-content.

.arrowވެގެންދާނީ ޕޮޕޯވަރގެ ތިރިއަށް.

އެންމެ ބޭރުގައި ހުންނަ ރެޕަރ އެލިމެންޓްގައި .popoverކްލާސް ހުންނަންވާނެއެވެ.

މަޤާމު ސްޓްރިންގް | ފަންކްޝަން '' އެވެ.

titleއެޓްރިބިއުޓް ނެތްނަމަ ޑިފޯލްޓް ޓައިޓަލް ވެލިއު .

ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ thisރެފަރެންސް ސެޓްކޮށްގެން ޕޮޕޯވަރ އެޓޭޗްކޮށްފައިވާ އެލިމެންޓަށް ސެޓްކޮށްގެންނެވެ.

ކަމެއްވުމަށް މެދުވެރިވާ ސަބަބު ސްޓްރިންގ 'ކްލިކް' ކޮށްލާށެވެ. ޕޮޕޯވަރ ޓްރިގަރ ވާ ގޮތް - | ހޯވަރ ކުރާށެވެ | ފޯކަސް | މެނުއަލް. އެތައް ޓްރިގަރެއް ފާސްވެދާނެ؛ އެތަކެތި ވަކިކޮށް ޖާގައެއް ދީގެންނެވެ. manualއެހެން އެއްވެސް ޓްރިގަރަކާ ގުޅުވައި ނުލެވޭނެއެވެ.
ވިއުޕޯޓް ސްޓްރިންގް | އެއްޗެއް | ފަންކްޝަން { ސެލެކްޓަރ: 'ހަށިގަނޑު'، ޕެޑިންގ: 0 }

މި އުނިއިތުރުގެ ޙައްދުތަކުގެ ތެރޭގައި ޕޮޕޯވަރ ބެހެއްޓޭނެއެވެ. މިސާލު: viewport: '#viewport'ނުވަތަ{ "selector": "#viewport", "padding": 0 }

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

ވަކިވަކި ޕޮޕޯވަރތަކަށް ޑޭޓާ އެޓްރިބިއުޓްސް

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

ގޮތްތައް

$().popover(options)

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

.popover('show')

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

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

.popover('hide')

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

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

.popover('toggle')

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

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

.popover('destroy')

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

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

އިވެންޓްސް

އިވެންޓް ޓައިޕް ތަފްޞީލު
ޝޯ.ބީއެސް.ޕޮޕޯވަރ އެވެ މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ showއިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ.
ދައްކާފައިވާ.bs.popover މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޕޮޕޯވަރ ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
ފޮރުވާ.ބީ.އެސް.ޕޮޕޯވަރ މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hideއިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ.
ފޮރުވިފައިވާ.bs.popover މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޕޮޕޯވަރ ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
އިންސަރޓް ކޮށްފައި.bs.popover މި އިވެންޓް ފަޔަރ ކުރެވެނީ show.bs.popoverއިވެންޓަށްފަހު ޕޮޕޯވަރ ޓެމްޕްލޭޓް ޑީއޯއެމްއަށް އިތުރުކޮށްފައި އޮތުމުންނެވެ.
$('#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ކްލާސްތައް ހުރިނަމަ ، އެލާޓް ނައްތާލުމުގެ ކުރިން އެލާޓް ފޭޑް އައުޓް ވާނެއެވެ.

އިވެންޓްސް

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

އިވެންޓް ޓައިޕް ތަފްޞީލު
ކްލޯޒް.ބީއެސް.އެލާޓް މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ closeއިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ.
ބަންދުކޮށްފައި.ބީއެސް.އެލާޓް މި އިވެންޓް ފަޔަރ ކުރެވެނީ އެލާޓް ބަންދުކޮށްފައި އޮތުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ބަޓަންތަކެވެ ބަޓަން.ޖޭއެސް

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

ކްރޮސް ބްރައުޒާ ކޮމްޕެޓިބިލިޓީ

ފަޔަރފޮކްސް އިން ޕޭޖް ލޯޑްތަކުގެ ތެރެއިން ފޯމް ކޮންޓްރޯލް ސްޓޭޓްސް (ޑިސެބިލްޑްނެސް އަދި ޗެކްޑްނެސް) ޕަރސިސްޓް ކުރެއެވެ . މިކަމަށް އޮތް ވޯކްއަރައުންޑަކީ ބޭނުން ކުރުމެވެ autocomplete="off". މޮޒިލާ ބަގް #654072 ބައްލަވާށެވެ .

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

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

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

ކަމުދާ ކޮންމެ ސްޓޭޓެއް ބޭނުން ކުރާށެވެ!

މި މުޒާހަރާއަށްޓަކައި އަޅުގަނޑުމެން މި ބޭނުންކުރަނީ data-loading-textއަދި $().button('loading'), އެކަމަކު އެއީ ހަމައެކަނި ތިޔަބޭފުޅުންނަށް ބޭނުންކުރެވޭނެ ދައުލަތެއް ނޫން. މިކަމާ ބެހޭ އިތުރު މަޢުލޫމާތު ތިރީގައި މިވަނީ $().button(string)ލިޔެކިޔުންތަކުންނެވެ .

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

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

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

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

ޕްރީ ޓޮގްލް ކޮށްފައިވާ ބަޓަންތައް ބޭނުންވެއެވެ.active އަދި ...aria-pressed="true"

ޕްރީ ޓޮގްލް ކުރެވިފައިވާ ބަޓަންތަކަށް .activeކްލާހާއި aria-pressed="true"އެޓްރިބިއުޓް buttonއަމިއްލައަށް އިތުރުކުރަން ޖެހެއެވެ.

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

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

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

ކުރިން ހޮވާފައިވާ އިޚްތިޔާރުތައް ބޭނުންވެއެވެ.active

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

ވިޝުއަލް ޗެކްޑް ސްޓޭޓް އަޕްޑޭޓް ކުރެވެނީ ހަމައެކަނި ކްލިކް ކުރުމުންނެވެ

ޗެކްބޮކްސް ބަޓަނެއްގެ ޗެކް ކުރެވިފައިވާ ހާލަތު ބަޓަންގައި clickއިވެންޓެއް ފަޔަރ ނުކޮށް އަޕްޑޭޓް ކުރެވިއްޖެނަމަ (އެބަހީ އިންޕުޓްގެ ޕްރޮޕަޓީ <input type="reset">ސެޓް ކުރުމުން ނުވަތަ މެދުވެރިކޮށް ) އިންޕުޓްގެ ކްލާސް އަމިއްލައަށް checkedޓޮގްލް ކުރަން ޖެހޭނެއެވެ ..activelabel

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

ގޮތްތައް

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

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

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

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

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

ޕްލަގިން ޑިޕެންޑެންސީ

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

މިސާލު

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

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

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

އެނިމް ޕަރިއޭޓަރ ކްލިޝް ރިޕްރެހެންޑެރިޓް، އެނިމް އެއިއުސްމޮޑް ހައި ލައިފް އެކިއުމަސް ޓެރީ ރިޗާޑްސަން އެޑް ސްކިޑް. ނިހިލް އަނިމް ކެފިޔޭ ހެލްވެޓިކާ، ކްރާފްޓް ބިޔަރު ލޭބަރ ވޭސް އެންޑަސަން ކްރެޑް ނެސްސިއުންޓް ސެޕިއެންޓޭ އީއާ ޕްރޮއިޑެންޓް.
<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>

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

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

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

  • ބޫޓްޕްލައި އެވެ
  • އެއް އިޓްމަސް އޭސީ ފެސިލިން
  • ދެވަނަ އެރޯސް

އެކްސްޕެންޑް/ކޮލަޕްސް ކޮންޓްރޯލްތައް އެކްސެސިބަލް ކުރުން

aria-expandedކޮންޓްރޯލް އެލިމެންޓަށް އިތުރުކުރުން ޔަގީން ކުރައްވާށެވެ . މި އެޓްރިބިއުޓް އިން ސްކްރީން ރީޑަރސް އާއި މިފަދަ އެހީތެރި ޓެކްނޮލޮޖީތަކަށް ކޮލެޕްސިބަލް އެލިމެންޓްގެ މިހާރުގެ ހާލަތު ސާފުކޮށް ބަޔާންކޮށްދެއެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ޑިފޯލްޓްކޮށް ބަންދުކޮށްފައިވާނަމަ، އޭގެ އަގު ހުންނަންވާނީ aria-expanded="false". inކްލާސް ބޭނުންކޮށްގެން ޑިފޯލްޓްކޮށް ހުޅުވާލުމަށް ކޮލެޕްސިބަލް އެލިމެންޓް ސެޓްކޮށްފައިވާނަމަ aria-expanded="true"، އޭގެ ބަދަލުގައި ކޮންޓްރޯލްގައި ސެޓް ކުރާށެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ހުޅުވާފައި ނުވަތަ ބަންދުކޮށްފައި ހުރިތޯ ނުވަތަ ނޫންތޯ ބަލައިގެން ޕްލަގިން އޮޓޮމެޓިކުން މި އެޓްރިބިއުޓް ޓޮގްލް ކުރާނެއެވެ.

މީގެ އިތުރުން، ތިބާގެ ކޮންޓްރޯލް އެލިމެންޓް ޓާގެޓް ކުރަނީ އެއް ކޮލެޕްސިބަލް އެލިމެންޓަކަށް ނަމަ – މާނައަކީ data-targetއެޓްރިބިއުޓް އިޝާރާތް ކުރަނީ idސެލެކްޓަރަކަށް ނަމަ – ކޮންޓްރޯލް އެލިމެންޓަށް އިތުރު aria-controlsއެޓްރިބިއުޓެއް އިތުރުކުރެވިދާނެ id، ކޮލެޕްސިބަލް އެލިމެންޓުގެ ގެ ހިމެނޭނެއެވެ. ޒަމާނީ ސްކްރީން ރީޑަރސް އާއި މިފަދަ އެހީތެރި ޓެކްނޮލޮޖީތަކުން މި އެޓްރިބިއުޓްގެ ބޭނުން ހިފައިގެން ސީދާ ކޮލެޕްސިބަލް އެލިމެންޓަށް ޚުދު ދިއުމަށް އިތުރު ޝޯޓްކަޓްތައް ފޯރުކޮށްދެއެވެ.

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

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

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

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

ގޮތްތައް

.collapse(options)

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

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

.collapse('toggle')

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

.collapse('show')

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

.collapse('hide')

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

އިވެންޓްސް

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

އިވެންޓް ޓައިޕް ތަފްޞީލު
ޝޯ.ބީއެސް.ކޮލަޕްސް ކޮށްލާށެވެ މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ showއިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ.
ދައްކާފައި.bs.collapse މި އިވެންޓް ފަޔަރ ކުރެވެނީ ކޮލަޕްސް އެލިމެންޓެއް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
hide.bs.collapse ކޮށްލާށެވެ މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hideމެތޯޑަށް ގޮވާ ނިމުމުންނެވެ.
ފޮރުވިފައިވާ.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. އެތަނުގެ ތެރޭގައި ގާތްގަނޑަކަށް ކޮންމެ އިޚްތިޔާރީ އެޗްޓީއެމްއެލްއެއް ބަހައްޓައިގެން އޮޓޮމެޓިކުން އެލައިންކޮށް ފޯމެޓް ކުރެވޭނެއެވެ.

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

ނަން ވައްތަރު ޑީފޯލްޓް ތަފްޞީލު
އިންޓަވަލް އެވެ ނަންބަރު 5000ރ އެއްޗެއް އޮޓޮމެޓިކުން ސައިކަލް ދުއްވުމާ ދެމެދު ލަސްކުރަންޖެހޭ ވަގުތު. ދޮގު ނަމަ ކެރޮސެލް އޮޓޮމެޓިކުން ސައިކަލް ނުކުރާނެ އެވެ.
މަޑުޖައްސާލުން ސްޓްރިންގް | null އެވެ "ހޯވަރ" އެވެ. އަށް ސެޓްކޮށްފިނަމަ "hover"ކެރޮސެލް އޮން ސައިކަލް ކުރުން މަޑުޖައްސާލައި ކެރޮސެލް އޮން mouseenterސައިކަލް ކުރުން އަލުން ފަށައެވެ mouseleave. އަށް ސެޓްކޮށްފިނަމަ null، ކެރޮސެލްގެ މައްޗަށް ހޯވަރ ކުރުމުން އެކަން މަޑުޖައްސާކަށް ނުޖެހޭނެއެވެ.
އޮޅުން ބޫލިއަން އެވެ ރަނގަޅު ކެރޮސެލް މެދުނުކެނޑި ސައިކަލް ދުއްވަންވީތޯ ނުވަތަ ހަރު ހުއްޓުމެއް ހުންނަންވީތޯއެވެ.
ކީބޯޑެވެ ބޫލިއަން އެވެ ރަނގަޅު ކީބޯޑް އިވެންޓްތަކަށް ކެރޮސެލް ރިއެކްޓް ކުރަންވީތޯ؟

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

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

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

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

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

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

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

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

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

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

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

އިވެންޓް ޓައިޕް ތަފްޞީލު
ސްލައިޑް.ބީއެސް.ކެރޮސެލް މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ slideއިންސްޓޭންސް މެތޯޑް އިންވޮކޭޓް ކުރުމުންނެވެ.
ސްލިޑް.ބީއެސް.ކެރޮސެލް މި އިވެންޓް ފަޔަރ ކުރެވެނީ ކެރޮސެލްގެ ސްލައިޑް ޓްރާންސިޝަން ފުރިހަމަ ކުރުމުންނެވެ.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

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

ނަން ވައްތަރު ޑީފޯލްޓް ތަފްޞީލު
އޮފްސެޓް ކޮށްލާށެވެ ނަންބަރު | ފަންކްޝަން | އެއްޗެއް 10 ސްކްރޯލްގެ މަޤާމު ހިސާބުކުރާއިރު ސްކްރީނުން އޮފްސެޓް ކުރަންޖެހޭ ޕިކްސެލްތައް. އެއް ނަންބަރެއް ފޯރުކޮށްދީފިނަމަ މަތިންނާއި ތިރީ ދިމާލަށް ވެސް އޮފްސެޓް ޖަހާނެ އެވެ. ޔުނިކް، ތިރީ އަދި މަތީ އޮފްސެޓެއް ފޯރުކޮށްދިނުމަށްޓަކައި ހަމައެކަނި އެއްޗެއް offset: { top: 10 }ނުވަތަ offset: { top: 10, bottom: 5 }. އޮފްސެޓެއް ޑައިނަމިކް ގޮތެއްގައި ކަލަންޑަރ ކުރަން ބޭނުންވާ ވަގުތު ފަންކްޝަނެއް ބޭނުން ކުރާށެވެ.
އަމާޒު ސެލެކްޓަރ | ނޯޑް | ޖީކުއަރީ އެލިމެންޓް އެ windowއެއްޗެއް އެފިކްސްގެ ޓާގެޓް އެލިމެންޓް ކަނޑައަޅައެވެ.

ގޮތްތައް

.affix(options)

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

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

.affix('checkPosition')

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

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

އިވެންޓްސް

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

އިވެންޓް ޓައިޕް ތަފްޞީލު
އެފިކްސް.ބީއެސް.އެފިކްސް މި އިވެންޓް ފަޔަރ ކުރަނީ އެލިމެންޓް ޖަހާ ނިމުމުގެ ވަގުތުން ކުރިންނެވެ.
އެފިކްސްޑް.ބީއެސް.އެފިކްސް މި އިވެންޓް ފަޔަރ ކުރެވެނީ އެލިމެންޓް ޖަހާ ނިމުމުންނެވެ.
އެފިކްސް-ޓޮޕް.ބީއެސް.އެފިކްސް މި އިވެންޓް ފަޔަރ ކުރަނީ އެލިމެންޓް އެފިކްސް-ޓޮޕް ކުރުމުގެ ވަގުތުން ކުރިންނެވެ.
އެފިކްސްޑް-ޓޮޕް.ބީއެސް.އެފިކްސް މި އިވެންޓް ފަޔަރ ކުރެވެނީ އެލިމެންޓް އެފިކްސް-ޓޮޕް ކުރުމަށްފަހުގައެވެ.
އެފިކްސް-ބޮޓޮމް.ބީއެސް.އެފިކްސް މި އިވެންޓް ފަޔަރ ކުރަނީ އެލިމެންޓް އެފިކްސް-ބޮޓޮމް ވުމުގެ ކުރިން ވަގުތުންނެވެ.
އެފިކްސްޑް-ބޮޓޮމް.ބީއެސް.އެފިކްސް މި އިވެންޓް ފަޔަރ ކުރެވެނީ އެލިމެންޓް އެފިކްސް-ބޮޓޮމް އަށް ފަހުގައެވެ.