މޮޑަލްތަކާ ބެހޭގޮތުން

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

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

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

ލައިވް ޑެމޯ

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

ބޫޓްސްޓްރެޕް-މޯޑަލް ބޭނުންކޮށްގެންނެވެ

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

$ ( '#މައިމޮޑަލް' ). މޮޑަލް ( އިޚްތިޔާރުތައް ) .

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

މާކަޕް

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

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

<a class = "btn" data-toggle = "މޮޑަލް" href = "#myModal" > މޮޑަލް ލޯންޗްކުރުން </a>    

<div ކްލާސް = "މޯޑަލް" id = "މައިމޮޑަލް" >  
  <div ކްލާސް = "މޮޑަލް-ހެޑަރ" > 
    <ބަޓަން ކްލާސް = "ބަންދުކުރުން" data-dismiss = "މޮޑަލް" > × </button>  
    <h3> މޮޑަލް ހެޑަރ </h3>
  </div> އެވެ
  <div ކްލާސް = "މޯޑަލް-ބޮޑީ" > 
    <p> އެއް ރީތި ހަށިގަނޑެއް... </p>
  </div> އެވެ
  <div class = "މޯޑަލް-ފޫޓަރ" > 
    <a href = "#" class = "btn" > ބަންދުކުރުން </a>  
    <a href = "#" class = "btn btn-primary" > ބަދަލުތައް ރައްކާކުރުން </a>  
  </div> އެވެ
</div> އެވެ

ގޮތްތައް

.މޮޑަލް(އޮޕްޝަންސް)

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

$ ( '#މައިމޮޑަލް' ). މޮޑަލް ({
  ކީބޯޑް : ދޮގު 
}) އެވެ.

.މޮޑަލް('ޓޮގްލް')

މެނުއަލްކޮށް މޮޑަލް އެއް ޓޮގްލް ކުރެއެވެ.

$ ( '#މައިމޮޑަލް' ). modal ( 'ޓޮގްލް' )

.މޮޑަލް('ދައްކާ')

މެނުއަލްކޮށް މޮޑަލްއެއް ހުޅުވާލައެވެ.

$ ( '#މައިމޮޑަލް' ). modal ( 'ދައްކާ' )

.މޮޑަލް('ފޮރުވުން')

މެނުއަލްކޮށް މޮޑަލް އެއް ފޮރުވައެވެ.

$ ( '#މައިމޮޑަލް' ). މޮޑަލް ( 'ފޮރުވުން' )

އިވެންޓްސް

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

$ ( '#މައިމޮޑަލް' ). on ( 'ފޮރުވިފައި' , ފަންކްޝަން () {   
  // ކަމެއް ކުރާށެވެ...
}) އެވެ.

ޑްރޮޕްޑައުންތަކާ ބެހޭގޮތުން

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

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

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

• ގަވާއިދުން ލިންކެއް
• ޑްރޮޕްޑައުން
  • Action
  • Another action
  • Something else here
  • Separated link
• ޑްރޮޕްޑައުން 2
  • Action
  • Another action
  • Something else here
  • Separated link
• ޑްރޮޕްޑައުން 3
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.js ބޭނުންކޮށްގެންނެވެ

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

$ ( '.ޑްރޮޕްޑައުން-ޓޮގްލް' ). ޑްރޮޕްޑައުން ()

މާކަޕް

އެއްވެސް އެލިމެންޓަކަށް އަވަހަށް ޑްރޮޕްޑައުން ފަންކްޝަނަލިޓީ އިތުރު ކުރުމަށްޓަކައި ހަމައެކަނި އެޑް data-toggle="dropdown"ކޮށްލުމުން އެއްވެސް ސައްހަ ބޫޓްސްޓްރެޕް ޑްރޮޕްޑައުންއެއް އޮޓޮމެޓިކުން އެކްޓިވޭޓް ވާނެއެވެ.

<ul class = "ނަވް ނަވް-ޕިލްސް" > 
  <li class = "active" ><a href = "#" > ގަވާއިދުން ލިންކް </a></li>  
  <li ކްލާސް = "ޑްރޮޕްޑައުން" id = "މެނޫ1" >  
    <a class = "ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" href = "#މެނޫ1" >   
      ޑްރޮޕްޑައުން
      <b ކްލާސް = "ކެރެޓް" ></b> 
    </a> އެވެ
    <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
      <li><a href = "#" > ފިޔަވަޅު </a></li> 
      <li><a href = "#" > އަނެއް ޢަމަލެއް </a></li> 
      <li><a href = "#" > މިތަނުގައި އެހެން އެއްޗެއް </a></li> 
      <li ކްލާސް = "ޑިވައިޑަރ" </li> 
      <li><a href = "#" > ވަކިކޮށްފައިވާ ލިންކެއް </a></li> 
    </ul> އެވެ
  </li> އެވެ
  ...
</ul> އެވެ

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

<ul class = "ނަވް ނަވް-ޕިލްސް" > 
  <li class = "ޑްރޮޕްޑައުން" > 
    <a class = "ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" ޑޭޓާ-ޓާގެޓް = "#" href = "މަގު/އަށް/ޞަފްޙާ.html" >    
      ޑްރޮޕްޑައުން
      <b ކްލާސް = "ކެރެޓް" ></b> 
    </a> އެވެ
    <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
      ...
    </ul> އެވެ
  </li> އެވެ
</ul> އެވެ

ގޮތްތައް

$().ޑްރޮޕްޑައުން()

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

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

މިސާލު ސްކްރޯލްސްޕީ އާއި އެކު ނަވްބާރ

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

bootstrap-scrollspy.js ބޭނުންކޮށްގެންނެވެ

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

$ ( '#ނަވްބާރ' ). ސްކްރޯލްސްޕައި ()

މާކަޕް

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

<body data-spy = "ސްކްރޯލް" > ... </body>  

ގޮތްތައް

.scrollspy('ރިފްރެޝް')

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

$ ( '[ޑޭޓާ-ސްޕައި="ސްކްރޯލް"]' ). ކޮންމެ ( ފަންކްޝަން () {  
  var $spy = $ ( މިއީ ). scrollspy ( 'ރިފްރެޝް' )
});

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

އިވެންޓްސް

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

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

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

• ގެ
• ޕްރޮފައިލް
• ޑްރޮޕްޑައުން
  • @fat
  • @mdo

bootstrap-tab.js ބޭނުންކޮށްގެންނެވެ

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

$ ( '#މައިޓެބް އަ' ). ކްލިކް ކުރާށެވެ ( ފަންކްޝަން ( އީ ) {  
  އީ . ޕްރިވެންޓްޑިފޯލްޓް ();
  $ ( މި ). tab ( 'ދައްކާ' );
}) އެވެ.

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

$ ( '#މައިޓެބް a[href="#profile"]' ). tab ( 'ދައްކާ' ); // ނަމުން ޓެބް ހޮވާށެވެ 
$ ( '#މައިޓެބް އަ:ފުރަތަމަ' ). tab ( 'ދައްކާ' ); // ފުރަތަމަ ޓެބް ހޮވާށެވެ 
$ ( '#މައިޓެބް އަ:ލަސްޓް' ). tab ( 'ދައްކާ' ); // އެންމެ ފަހު ޓެބް ހޮވާށެވެ 
$ ( '#މައިޓެބް ލި:އެކިއު(2) އޭ' ). tab ( 'ދައްކާ' ); // ތިންވަނަ ޓެބް ހޮވުން (0-އިންޑެކްސް ކުރެވިފައިވާ) 

މާކަޕް

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

<ul ކްލާސް = "ނަވް ނަވް-ޓެބްސް" > 
  <li><a href = "#home" data-toggle = "ޓެބް" > ގެ </a> </li>  
  <li><a href = "#ޕްރޮފައިލް" data-toggle = "ޓެބް" > ޕްރޮފައިލް </a></li>  
  <li><a href = "#messages" data-toggle = "ޓެބް" > މެސެޖުތައް </a></li>  
  <li><a href = "#settings" data-toggle = "ޓެބް" > ސެޓިންގސް </a></li>  
</ul> އެވެ

ގޮތްތައް

$().ޓެބް

ޓެބް އެލިމެންޓަކާއި ކޮންޓެންޓް ކޮންޓެއިނަރ އެއް އެކްޓިވޭޓް ކުރެއެވެ. ޓެބްގައި ޑީއޯއެމްގައި ކޮންޓެއިނަރ ނޯޑަކަށް ޓާގެޓްކުރާ އެއްޗެއް data-targetނުވަތަ އެއްޗެއް ހުންނަންވާނެއެވެ.href

<ul ކްލާސް = "ނަވް ނަވް-ޓެބްސް" id = "މައިޓެބް" >  
  <li class = "އެކްޓިވް" ><a href = "#home" > ގެ </a> </li>  
  <li><a href = "#ޕްރޮފައިލް" > ޕްރޮފައިލް </a></li> 
  <li><a href = "#messages" > މެސެޖުތައް </a></li> 
  <li><a href = "#settings" > ސެޓިންގސް </a></li> 
</ul> އެވެ
 
<div class = "ޓެބް-ކޮންޓެންޓް" > 
  <div class = "ޓެބް-ޕޭން އެކްޓިވް" id = "ހޯމް" > ... </div>  
  <div class = "ޓެބް-ޕޭން" id = "ޕްރޮފައިލް" > ... </div>  
  <div class = "ޓެބް-ޕޭން" id = "މެސެޖްތައް" > ... </div>  
  <div class = "ޓެބް-ޕޭން" id = "ސެޓިންގސް" > ... </div>  
</div> އެވެ
 
<ސްކްރިޕްޓް> އެވެ
  $ ( ފަންކްޝަން () {  
    $ ( '#މައިޓެބް އަ:ލަސްޓް' ). tab ( 'ދައްކާ' );
  }) އެވެ.
</script> އެވެ

އިވެންޓްސް

$ ( 'a[ޑޭޓާ-ޓޮގްލް="ޓެބް"]' ). on ( 'ދައްކާފައި' , ފަންކްޝަން ( އީ ) {   
  އީ . ޓާގެޓް // އެކްޓިވޭޓް ކޮށްފައިވާ ޓެބް
  އީ . relatedTarget // ކުރީގެ ޓެބް
}) އެވެ.

ޓޫލްޓިޕްސް އާއި ބެހޭގޮތުން

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

މިސާލަކަށް ޓޫލްޓިޕްސް ބޭނުންކުރުން

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

bootstrap-tooltip.js ބޭނުންކޮށްގެންނެވެ

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

$ ( '#މިސާލު' ). ޓޫލްޓިޕް ( އިޚްތިޔާރުތައް ) .

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

މާކަޕް

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

<a href = "#" rel = "ޓޫލްޓިޕް" title = "ފުރަތަމަ ޓޫލްޓިޕް" > އަހަރެންގެ މައްޗަށް ހޯވަރ ކުރާށެވެ </a>   

ގޮތްތައް

$().ޓޫލްޓިޕް(އޮޕްޝަންސް)

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

.tooltip('ދައްކާ')

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ހާމަކުރެއެވެ.

$ ( '#އެލިމެންޓް' ). ޓޫލްޓިޕް ( 'ދައްކާ' )

.tooltip('ފޮރުވުން')

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ފޮރުވައެވެ.

$ ( '#އެލިމެންޓް' ). ޓޫލްޓިޕް ( 'ފޮރުވުން' )

.ޓޫލްޓިޕް('ޓޮގްލް')

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ޓޮގްލް ކުރެއެވެ.

$ ( '#އެލިމެންޓް' ). ޓޫލްޓިޕް ( 'ޓޮގްލް' )

ޕޮޕޯވަރސް އާއި ބެހޭގޮތުން

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

* ޓޫލްޓިޕް ހިމަނަން ޖެހެއެވެ

މިސާލު ހޯވަރ ޕޮޕޯވަރ އެވެ

ޕޮޕޯވަރ ޓްރިގަރ ކުރުމަށް ބަޓަންގެ މައްޗަށް ހޯވަރ ކޮށްލާށެވެ.

bootstrap-popover.js ބޭނުންކޮށްގެންނެވެ

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

$ ( '#މިސާލު' ). popover ( އިޚްތިޔާރުތައް ) .

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

މާކަޕް

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

ގޮތްތައް

$().popover(އޮޕްޝަންސް)

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

.ޕޮޕޯވަރ('ދައްކާ')

ރިވީލްސް އެން އެލިމެންޓްސް ޕޮޕޮވަރ.

$ ( '#އެލިމެންޓް' ). popover ( 'ދައްކާ' )

.ޕޮޕޯވަރ('ފޮރުވުން')

ފޮރުވަނީ އެލިމެންޓްސް ޕޮޕޯވަރ އެއް.

$ ( '#އެލިމެންޓް' ). popover ( 'ފޮރުވުން' )

.popover('ޓޮގްލް')

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

$ ( '#އެލިމެންޓް' ). popover ( 'ޓޮގްލް' ) .

އެލާޓްތަކާ ބެހޭ ގޮތުން

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

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

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

bootstrap-alert.js ބޭނުންކޮށްގެންނެވެ

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

$ ( ".އެލާޓް" ). އެލާޓް ()

މާކަޕް

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

<a class = "ބަންދުކުރުން" data-dismiss = "އެލާޓް" href = "#" > × </a> އެވެ   

ގޮތްތައް

$().އެލާޓް()

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

.alert('ބަންދު')

އެލާޓެއް ބަންދުކުރެއެވެ.

$ ( ".އެލާޓް" ). alert ( 'ބަންދުކުރުން' )

އިވެންޓްސް

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

$ ( '#އަހަރެންގެ-އެލާޓް' ). bind ( 'ބަންދުކޮށްފައި' , ފަންކްޝަން () {   
  // ކަމެއް ކުރާށެވެ...
}) އެވެ.

ގުޅިގެން

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

މިސާލު ބޭނުން ކުރެއެވެ

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

bootstrap-button.js ބޭނުންކޮށްގެންނެވެ

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

$ ( '.nav-tabs' ). ބަޓަން ()

މާކަޕް

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

<!-- އެއް ބަޓަނެއްގައި ޓޮގްލިންގ އެކްޓިވޭޓް ކުރުމަށް data-toggle="button" އިތުރުކުރުން -->
<button class = "btn" data- toggle = "ބަޓަން" > އެއް ޓޮގްލް </button>  
 
<!-- btn-group ގައި ޗެކްބޮކްސް ސްޓައިލް ޓޮގްލިންގ އަށް data-toggle="buttons-checkbox" އިތުރުކުރުން -->
<div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" ޑޭޓާ-ޓޮގްލް = "ބަޓަންސް-ޗެކްބޮކްސް" >  
  <ބަޓަން ކްލާސް = "btn" > ކަނާތް </button> 
  <button class = "btn" > މެދު </button> 
  <button class = "btn" > ކަނާތް </button> 
</div> އެވެ
 
<!-- btn-group ގައި ރޭޑިއޯ ސްޓައިލް ޓޮގްލް ކުރުމަށް data-toggle="buttons-radio" އިތުރުކުރުން -->
<div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" ޑޭޓާ-ޓޮގްލް = "ބަޓަންސް-ރޭޑިއޯ" >  
  <ބަޓަން ކްލާސް = "btn" > ކަނާތް </button> 
  <button class = "btn" > މެދު </button> 
  <button class = "btn" > ކަނާތް </button> 
</div> އެވެ

ގޮތްތައް

$().ބަޓަން('ޓޮގްލް')

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

<ބަޓަން ކްލާސް = "ބީޓީއެން" ޑޭޓާ-ޓޮގްލް = "ބަޓަން" > ... </ބަޓަން>   

$().button('ލޯޑިންގ')

ބަޓަން ސްޓޭޓް ލޯޑިންގ އަށް ސެޓްކުރެއެވެ - ބަޓަން ޑިސެބިލްކޮށް ޓެކްސްޓް ލޯޑިންގ އަށް ޓެކްސްޓް ބަދަލުކުރެއެވެ. ލޯޑިންގ ޓެކްސްޓް ޑެފިނިޝް ކުރަންވާނީ ޑޭޓާ އެޓްރިބިއުޓް ބޭނުންކޮށްގެން ބަޓަން އެލިމެންޓް ގައެވެ data-loading-text.

<button class = "btn" data-loading-text = "ތަކެތި ލޯޑްކުރަނީ..." > ... </button>   

$().ބަޓަން('ރީސެޓް')

ބަޓަން ސްޓޭޓް ރީސެޓް ކުރަނީ - ޓެކްސްޓް އަސްލު ޓެކްސްޓަށް ބަދަލުކުރެއެވެ.

$().ބަޓަން(ސްޓްރިންގް)

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

<button class = "btn" ޑޭޓާ-ކޮމްޕްލީޓް-ޓެކްސްޓް = "ނިމިއްޖެ!" > ... </ބަޓަން> އެވެ   
<ސްކްރިޕްޓް> އެވެ
  $ ( '.ބީޓީއެން' ). ބަޓަން ( 'ފުރިހަމަ' )
</script> އެވެ

ގުޅިގެން

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

* ޓްރާންސިޝަންސް ޕްލަގިން ހިމަނަން ޖެހެއެވެ.

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

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

bootstrap-collapse.js ބޭނުންކޮށްގެންނެވެ

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

$ ( ".ކޮލަޕްސް" ). ކޮލަޕްސް () .

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

މާކަޕް

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

<button class = "btn btn-danger" data-toggle = "ކޮލަޕްސް" ޑޭޓާ-ޓާގެޓް = "#ޑެމޯ" >   
  ސާދާ ކޮލެޕްސިބަލް އެވެ
</ބަޓަން> އެވެ
 
<div id = "ޑެމޯ" class = "ކޮލަޕްސް އިން" > ... </div>  

ގޮތްތައް

.ކޮލަޕްސް(އޮޕްޝަންސް)

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

$ ( '#މައިކޮލަޕްސިބަލް' ). ކޮލަޕްސް ({
  ޓޮގްލް : ދޮގު 
}) އެވެ.

.collapse('ޓޮގްލް')

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

.collapse('ދައްކާ')

ކޮލެޕްސިބަލް އެލިމެންޓެއް ދައްކައެވެ.

.collapse('ފޮރުވުން')

ކޮލެޕްސިބަލް އެލިމެންޓެއް ފޮރުވައެވެ.

އިވެންޓްސް

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

$ ( '#މައިކޮލަޕްސިބަލް' ). on ( 'ފޮރުވިފައި' , ފަންކްޝަން () {   
  // ކަމެއް ކުރާށެވެ...
}) އެވެ.

ގުޅިގެން

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

މިސާލު ކެރޮސެލް އެވެ

ތިރީގައިވާ ސްލައިޑްޝޯ ބައްލަވާށެވެ.

ފުރަތަމަ ތަމްބްނެއިލް ލޭބަލް

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

ދެވަނަ ތަމްބްނެއިލް ލޭބަލް

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

ތިންވަނަ ތަމްބްނެއިލް ލޭބަލް

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

‹ ›

bootstrap-carousel.js ބޭނުންކޮށްގެންނެވެ

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

$ ( '.ކެރޮސެލް' ). ކެރޮސެލް () .

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

މާކަޕް

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

<div id = "މައިކެރޮސެލް" ކްލާސް = "ކެރޮސެލް" >  
  <!-- ކެރޮސެލް ތަކެތި -->
  <div class = "ކެރޮސެލް-އެތެރޭ" > 
    <div class = "އެކްޓިވް އައިޓަމް" > ... </div> 
    <div ކްލާސް = "އައިޓަމް" > ... </div> 
    <div ކްލާސް = "އައިޓަމް" > ... </div> 
  </div> އެވެ
  <!-- ކެރޮސެލް ނަވް -->
  <a class = "ކެރޮސެލް-ކޮންޓްރޯލް ލެފްޓް" href = "#myCarousel" data-slide = "ކުރިން" > ‹ </a> އެވެ   
  <a class = "ކެރޮސެލް-ކޮންޓްރޯލް ރައިޓް" href = "#myCarousel" data-slide = "ދެން" > › </a> އެވެ   
</div> އެވެ

ގޮތްތައް

.ކެރޮސެލް(އޮޕްޝަންސް)

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

$ ( '.ކެރޮސެލް' ). ކެރޮސެލް ({
  އިންޓަވަލް : 2000 
}) އެވެ.

.ކެރޮސެލް('ސައިކަލް')

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

.ކެރޮސެލް('ޕޮޒް')

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

.ކެރޮސެލް(ނަންބަރު) .

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

.ކެރޮސެލް('ކުރިން')

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

.ކެރޮސެލް('ކުރިއަށް')

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

އިވެންޓްސް

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

ގުޅިގެން

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

މިސާލު

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

bootstrap-typeahead.js ބޭނުންކޮށްގެންނެވެ

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

$ ( '.ޓައިޕްއެހެޑް' ). ޓައިޕްއެހެޑް ()

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

މާކަޕް

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

<އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ޑޭޓާ-ޕްރޮވައިޑް = "ޓައިޕްއެހެޑް" >  

ގޮތްތައް

.ޓައިޕްއެހެޑް(އޮޕްޝަންސް)

ޓައިޕްއެހެޑް އެއް އެކުލެވޭ އިންޕުޓެއް އިނިޝިއަލައިޒް ކުރެއެވެ.