ମୋଡାଲ୍ ବିଷୟରେ |

ଏକ ଶୃଙ୍ଖଳିତ, କିନ୍ତୁ ନମନୀୟ, ପାରମ୍ପାରିକ ଜାଭାସ୍କ୍ରିପ୍ଟ ମୋଡାଲ ପ୍ଲଗଇନକୁ କେବଳ ସର୍ବନିମ୍ନ ଆବଶ୍ୟକୀୟ କାର୍ଯ୍ୟକାରିତା ଏବଂ ସ୍ମାର୍ଟ ଡିଫଲ୍ଟ ସହିତ ନିଅ |

ସ୍ଥିର ଉଦାହରଣ |

ନିମ୍ନରେ ଏକ ଷ୍ଟାଟିକାଲ୍ ରେଣ୍ଡେଡ୍ ମୋଡାଲ୍ ଅଛି |

ଲାଇଭ୍ ଡେମୋ |

ନିମ୍ନରେ ଥିବା ବଟନ୍ କ୍ଲିକ୍ କରି ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଏକ ମୋଡାଲ୍ ଟୋଗଲ୍ କରନ୍ତୁ | ଏହା ପୃଷ୍ଠାର ଉପରୁ ତଳକୁ ଖସିଯିବ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍-ମୋଡାଲ୍ ବ୍ୟବହାର କରି |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ମୋଡାଲକୁ କଲ୍ କରନ୍ତୁ:

$ ( '# ମୋଡାଲ୍' ) | ମୋଡାଲ୍ ( ବିକଳ୍ପ )

ବିକଳ୍ପଗୁଡ଼ିକ

ମାର୍କଅପ୍ |

ଜାଭାସ୍କ୍ରିପ୍ଟର ଗୋଟିଏ ଧାଡ଼ି ଲେଖିବା ବିନା ତୁମେ ତୁମର ପୃଷ୍ଠାରେ ମୋଡାଲଗୁଡ଼ିକୁ ସହଜରେ ସକ୍ରିୟ କରିପାରିବ | data-toggle="modal"କେବଳ ଏକ ନିୟନ୍ତ୍ରକ ଉପାଦାନ ଉପରେ ସେଟ୍ କରନ୍ତୁ data-target="#foo"କିମ୍ବା href="#foo"ଯାହା ଏକ ମୋଡାଲ୍ ଉପାଦାନ id ସହିତ ଅନୁରୂପ ଅଟେ, ଏବଂ କ୍ଲିକ୍ ହେବାବେଳେ ଏହା ଆପଣଙ୍କ ମୋଡାଲ୍ ଲଞ୍ଚ କରିବ |

ଆହୁରି ମଧ୍ୟ, ଆପଣଙ୍କର ମୋଡାଲ୍ ଇନଷ୍ଟାଣ୍ଟରେ ବିକଳ୍ପ ଯୋଡିବାକୁ, କେବଳ କଣ୍ଟ୍ରୋଲ୍ ଉପାଦାନ କିମ୍ବା ମୋଡାଲ୍ ମାର୍କଅପ୍ ଉପରେ ଅତିରିକ୍ତ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ଭାବରେ ସେମାନଙ୍କୁ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |

<a class = "btn" data-toggle = "modal" href = "#myModal"> ମୋଡାଲ୍ ଲଞ୍ଚ କରନ୍ତୁ </a>    

<div ଶ୍ରେଣୀ = "ମୋଡାଲ୍" > | 
  <div class = "modal-header" > | 
    <a class = "close" data-dismiss = "modal"> × </a> _  
    <h3> ମୋଡାଲ୍ ହେଡର୍ </ h3> |
  </div>
  <div class = "modal-body" > | 
    <p> ଗୋଟିଏ ଭଲ ଶରୀର… </p> |
  </div>
  <div ଶ୍ରେଣୀ = "ମୋଡାଲ୍-ଫୁଟର୍" > | 
    <a href = "#" class = "btn btn-primary"> ପରିବର୍ତ୍ତନଗୁଡିକ ସଂରକ୍ଷଣ କରନ୍ତୁ </a>  
    <a href = "#" class = "btn"> ବନ୍ଦ </a> |  
  </div>
</div>

ପ୍ରଣାଳୀ

.ମୋଡାଲ୍ (ବିକଳ୍ପ)

ତୁମର ବିଷୟବସ୍ତୁକୁ ଏକ ମୋଡାଲ୍ ଭାବରେ ସକ୍ରିୟ କରେ | ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ଗ୍ରହଣ କରେ object|

$ ( '# ମୋଡାଲ୍' ) | ମୋଡାଲ୍ ({
  କୀବୋର୍ଡ୍ : ମିଥ୍ୟା | 
})

.modal ('ଟୋଗଲ୍')

ମାନୁଆଲ୍ ଏକ ମୋଡାଲ୍ ଟୋଗଲ୍ କରେ |

$ ( '# ମୋଡାଲ୍' ) | ମୋଡାଲ୍ ( 'ଟୋଗଲ୍' )

.ମୋଡାଲ୍ ('ଶୋ')

ମାନୁଆଲ୍ ଏକ ମୋଡାଲ୍ ଖୋଲିବ |

$ ( '# ମୋଡାଲ୍' ) | ମୋଡାଲ୍ ( 'ଶୋ' )

.modal ('ଲୁଚାନ୍ତୁ')

ମାନୁଆଲ୍ ଏକ ମୋଡାଲ୍ ଲୁଚାଇଥାଏ |

$ ( '# ମୋଡାଲ୍' ) | ମୋଡାଲ୍ ( 'ଲୁଚାନ୍ତୁ' )

ଘଟଣା

ବୁଟଷ୍ଟ୍ରାପ୍ ର ମୋଡାଲ୍ କ୍ଲାସ୍ ମୋଡାଲ୍ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଇଭେଣ୍ଟକୁ ପ୍ରକାଶ କରେ |

$ ( '# ମୋଡାଲ୍' ) | ଉପରେ ( 'ଲୁକ୍କାୟିତ' , କାର୍ଯ୍ୟ () {   
  // କିଛି କର…
})

ଡ୍ରପଡାଉନ୍ ବିଷୟରେ |

ଏହି ସରଳ ପ୍ଲଗଇନ୍ ସହିତ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ପ୍ରାୟ କ anything ଣସି ଜିନିଷରେ ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ ଯୋଡନ୍ତୁ | ବୁଟଷ୍ଟ୍ରାପ୍ ନାଭବାର୍, ଟ୍ୟାବ୍ ଏବଂ ବଟିକା ଉପରେ ସମ୍ପୂର୍ଣ୍ଣ ଡ୍ରପଡାଉନ୍ ମେନୁ ସମର୍ଥନ ବ features ଶିଷ୍ଟ୍ୟ କରେ |

ଉଦାହରଣଗୁଡିକ

ଡ୍ରପଡାଉନ୍ ପରୀକ୍ଷା କରିବାକୁ ନାଭବାରରେ ଥିବା ଡ୍ରପ୍ ଡାଉନ୍ ନାଭ୍ ଲିଙ୍କ୍ ଏବଂ ନିମ୍ନରେ ଥିବା ବଟିକା ଉପରେ କ୍ଲିକ୍ କରନ୍ତୁ |

• ନିୟମିତ ଲିଙ୍କ୍ |
• ଡ୍ରପଡାଉନ୍
  • କାର୍ଯ୍ୟ
  • ଅନ୍ୟ ଏକ କାର୍ଯ୍ୟ |
  • ଏଠାରେ ଆଉ କିଛି |
  • ପୃଥକ ଲିଙ୍କ୍ |
• ଡ୍ରପ୍ ଡାଉନ୍ 2
  • କାର୍ଯ୍ୟ
  • ଅନ୍ୟ ଏକ କାର୍ଯ୍ୟ |
  • ଏଠାରେ ଆଉ କିଛି |
  • ପୃଥକ ଲିଙ୍କ୍ |
• ଡ୍ରପଡାଉନ୍ 3
  • କାର୍ଯ୍ୟ
  • ଅନ୍ୟ ଏକ କାର୍ଯ୍ୟ |
  • ଏଠାରେ ଆଉ କିଛି |
  • ପୃଥକ ଲିଙ୍କ୍ |

Bootstrap-dropdown.js ବ୍ୟବହାର କରି |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଡ୍ରପଡାଉନ୍ କୁ କଲ୍ କରନ୍ତୁ:

$ ( '.dropdown-toggle' ) | ଡ୍ରପଡାଉନ୍ ()

ମାର୍କଅପ୍ |

ଯେକ any ଣସି ଉପାଦାନରେ ଶୀଘ୍ର ଡ୍ରପଡାଉନ୍ କାର୍ଯ୍ୟକାରିତା ଯୋଡିବା ପାଇଁ କେବଳ ଯୋଡନ୍ତୁ data-toggle="dropdown"ଏବଂ ଯେକ valid ଣସି ବ valid ଧ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଡ୍ରପଡାଉନ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ସକ୍ରିୟ ହେବ |

<ul class = "nav pills" > | 
  <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > <a href = "#"> ନିୟମିତ ଲିଙ୍କ୍ </a> </li> |  
  <li class = "dropdown" id = "menu1" > |  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _   
      ଡ୍ରପଡାଉନ୍
      <b class = "caret" > </b> | 
    </a>
    <ul class = "dropdown-menu" > | 
      <li> <a href = "#"> କାର୍ଯ୍ୟ </a> </li> 
      <li> <a href = "#"> ଅନ୍ୟ ଏକ କାର୍ଯ୍ୟ </a> </li> | 
      <li> <a href = "#"> ଏଠାରେ ଆଉ କିଛି </a> </li> 
      <li class = "divider" > </li> 
      <li> <a href = "#"> ପୃଥକ ଲିଙ୍କ୍ </a> </li> | 
    </ul>
  </ li>
  ...
</ul>

ପ୍ରଣାଳୀ

$ () ଡ୍ରପଡାଉନ୍ ()

ପ୍ରଦତ୍ତ ନାଭବାର୍ କିମ୍ବା ଟ୍ୟାବଡ୍ ନେଭିଗେସନ୍ ପାଇଁ ମେନୁଗୁଡ଼ିକୁ ସକ୍ରିୟ କରିବା ପାଇଁ ଏକ ପ୍ରୋଗ୍ରାମେଟିକ୍ ଆପି |

ସ୍କ୍ରୋଲ୍ ପୋଜି ପ୍ଲଗଇନ୍ ସ୍କ୍ରୋଲ୍ ପୋଜିସନ୍ ଉପରେ ଆଧାର କରି ନାଭ୍ ଟାର୍ଗେଟ୍ଗୁଡ଼ିକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଅପଡେଟ୍ କରିବା ପାଇଁ |

ସ୍କ୍ରୋଲ୍ସପି ସହିତ ନାଭବାରର ଉଦାହରଣ |

ନିମ୍ନରେ ଥିବା କ୍ଷେତ୍ରକୁ ସ୍କ୍ରୋଲ୍ କରନ୍ତୁ ଏବଂ ନାଭିଗେସନ୍ ଅପଡେଟ୍ ଦେଖନ୍ତୁ | ଡ୍ରପଡାଉନ୍ ସବ୍ ଆଇଟମ୍ ଗୁଡିକ ମଧ୍ୟ ହାଇଲାଇଟ୍ ହେବ | ଏହାକୁ ଚେଷ୍ଟା କର!

Bootstrap-scrollspy.js ବ୍ୟବହାର କରି |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ସ୍କ୍ରୋଲ୍ସପି କୁ କଲ୍ କରନ୍ତୁ:

$ ( '# ନାଭବାର୍' ) | scrollspy ()

ମାର୍କଅପ୍ |

ତୁମର ଟପ୍ ବାର୍ ନେଭିଗେସନ୍ରେ ସ୍କ୍ରୋଲ୍ସି ଆଚରଣକୁ ସହଜରେ ଯୋଡିବାକୁ, data-spy="scroll"ତୁମେ ଗୁପ୍ତଚର କରିବାକୁ ଚାହୁଁଥିବା ଉପାଦାନକୁ ଯୋଗ କର (ସାଧାରଣତ this ଏହା ଶରୀର ହେବ) |

<body data-spy = "ସ୍କ୍ରୋଲ୍" > ... </body> |  

ବିକଳ୍ପଗୁଡ଼ିକ

ଏହି ପ୍ଲଗଇନ୍ ସ୍ଥାନୀୟ ବିଷୟବସ୍ତୁ ମାଧ୍ୟମରେ ସ୍ଥାନାନ୍ତର ପାଇଁ ଶୀଘ୍ର, ଗତିଶୀଳ ଟ୍ୟାବ୍ ଏବଂ ବଟିକା କାର୍ଯ୍ୟକାରିତା ଯୋଗ କରେ |

ଉଦାହରଣ ଟ୍ୟାବଗୁଡ଼ିକ |

ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ ମାଧ୍ୟମରେ ମଧ୍ୟ ଲୁକ୍କାୟିତ ପ୍ୟାନ୍ ମଧ୍ୟରେ ଟୋଗଲ୍ କରିବାକୁ ନିମ୍ନରେ ଥିବା ଟ୍ୟାବଗୁଡିକ କ୍ଲିକ୍ କରନ୍ତୁ |

• ଘର
• ପ୍ରୋଫାଇଲ୍
• ଡ୍ରପଡାଉନ୍
  • @ ଫାଟ
  • @ ମିଡୋ

Bootstrap-tab.js ବ୍ୟବହାର କରି |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଟ୍ୟାବ ଟେବୁଲ୍ ଟ୍ୟାବ୍ ସକ୍ଷମ କରନ୍ତୁ:

$ ( '#myTab' ) | ଟ୍ୟାବ୍ ( 'ଶୋ' )

ମାର୍କଅପ୍ |

data-toggle="tab"ଆପଣ କେବଳ ନିର୍ଦ୍ଦିଷ୍ଟ କିମ୍ବା data-toggle="pill"ଏକ ଉପାଦାନ ଉପରେ କ jav ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟ ଲେଖି ବିନା ଏକ ଟ୍ୟାବ୍ କିମ୍ବା ବଟିକା ନାଭିଗେସନ୍ ସକ୍ରିୟ କରିପାରିବେ |

<ul class = "tabs" > | 
  <li> <a href = "#home" data-toggle = "tab"> ଘର </a> </li> |  
  <li> <a href = "#profile" data-toggle = "tab"> ପ୍ରୋଫାଇଲ୍ </a> </li> |  
  <li> <a href = "#messages" data-toggle = "tab"> ବାର୍ତ୍ତା </a> </a> |  
  <li> <a href = "#ettings" data-toggle = "tab"> ସେଟିଂସମୂହ </a> </li> |  
</ul>

ପ୍ରଣାଳୀ

$ () ଟ୍ୟାବ୍ |

ଏକ ଟ୍ୟାବ୍ ଉପାଦାନ ଏବଂ ବିଷୟବସ୍ତୁ ପାତ୍ରକୁ ସକ୍ରିୟ କରିଥାଏ | ଟ୍ୟାବରେ ଏକ “ଡାଟା-ଟାର୍ଗେଟ୍” କିମ୍ବା ଡୋମରେ ଏକ କଣ୍ଟେନର ନୋଡକୁ ଟାର୍ଗେଟ କରୁଥିବା ଏକ “href” ରହିବା ଉଚିତ |

<ul class = "tabs" > | 
  <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > <a href = "#home"> ଘର </a> </li> |  
  <li> <a href = "#profile"> ପ୍ରୋଫାଇଲ୍ </a> </li> | 
  <li> <a href = "#messages"> ବାର୍ତ୍ତାଗୁଡିକ </a> </li> | 
  <li> <a href = "#settings"> ସେଟିଂସମୂହ </a> </li> | 
</ul>
 
<div ଶ୍ରେଣୀ = "ଟ୍ୟାବ୍-ବିଷୟବସ୍ତୁ" > | 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<ସ୍କ୍ରିପ୍ଟ> |
  $ ( କାର୍ଯ୍ୟ () {  
    $ ( '.tabs a: last' ) | ଟ୍ୟାବ୍ ( 'ଶୋ' )
  })
</script>

ଘଟଣା

$ ( 'a [ଡାଟା-ଟୋଗଲ୍ = "ଟ୍ୟାବ୍"]' ) | ଉପରେ ( 'ଦେଖାଯାଇଛି' , ଫଙ୍କସନ୍ ( ଇ ) {   
  ଇ । ଲକ୍ଷ୍ୟ // ସକ୍ରିୟ ଟ୍ୟାବ୍ |
  ଇ । ସମ୍ବନ୍ଧୀୟ ଟାର୍ଗେଟ୍ // ପୂର୍ବ ଟ୍ୟାବ୍ |
})

ଟୁଲ୍ ଟିପ୍ସ ବିଷୟରେ |

ଜାସନ୍ ଫ୍ରେମ୍ ଦ୍ୱାରା ଲିଖିତ ଉତ୍କୃଷ୍ଟ jQuery.tipsy ପ୍ଲଗଇନ୍ ଦ୍ୱାରା ଅନୁପ୍ରାଣିତ; ଟୁଲ୍ ଟିପ୍ସ ହେଉଛି ଏକ ଅପଡେଟ୍ ସଂସ୍କରଣ, ଯାହା ପ୍ରତିଛବି ଉପରେ ନିର୍ଭର କରେ ନାହିଁ, ଆନିମେସନ୍ ପାଇଁ uss css3, ଏବଂ ସ୍ଥାନୀୟ ଟାଇଟଲ୍ ଷ୍ଟୋରେଜ୍ ପାଇଁ ଡାଟା-ଆଟ୍ରିବ୍ୟୁଟ୍ |

ସାଧନଗୁଡ଼ିକର ଉଦାହରଣ ବ୍ୟବହାର |

ଟୁଲ୍ ଟିପ୍ସ ଦେଖିବାକୁ ନିମ୍ନ ଲିଙ୍କଗୁଡିକ ଉପରେ ଚଲାନ୍ତୁ:

Bootstrap-tooltip.js ବ୍ୟବହାର କରି |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଟୁଲ୍ ଟିପ୍ ଟ୍ରିଗର୍ କରନ୍ତୁ:

$ ( '# ଉଦାହରଣ' ) | ଟୁଲ୍ ଟିପ୍ ( ବିକଳ୍ପ )

ବିକଳ୍ପଗୁଡ଼ିକ

ମାର୍କଅପ୍ |

କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ, ଟୁଲଟିପ୍ ଏବଂ ପପୋଭର ଡାଟା-ଆପିସ୍ ଅପ୍ଟ ଇନ୍ ଅଟେ | ଯଦି ଆପଣ ସେଗୁଡିକ ବ୍ୟବହାର କରିବାକୁ ଚାହୁଁଛନ୍ତି ତେବେ କେବଳ ଏକ ଚୟନକର୍ତ୍ତା ବିକଳ୍ପ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ |

ପ୍ରଣାଳୀ

ଟୁଲ୍ ଟିପ୍ (ବିକଳ୍ପ)

ଏକ ଉପାଦାନ ସଂଗ୍ରହରେ ଏକ ଟୁଲ୍ ଟିପ୍ ହ୍ୟାଣ୍ଡେଲର୍ ସଂଲଗ୍ନ କରେ |

.tooltip ('show')

ଏକ ଉପାଦାନ ଟୁଲ୍ ଟିପ୍ ପ୍ରକାଶ କରେ |

$ ( '# ଉପାଦାନ' ) | ଟୁଲ୍ ଟିପ୍ ( 'ଶୋ' )

.tooltip ('ଲୁଚାନ୍ତୁ')

ଏକ ଉପାଦାନ ଟୁଲ୍ ଟିପ୍ ଲୁଚାଏ |

$ ( '# ଉପାଦାନ' ) | ଟୁଲ୍ ଟିପ୍ ( 'ଲୁଚାନ୍ତୁ' )

.tooltip ('ଟୋଗଲ୍')

ଏକ ଉପାଦାନ ଟୁଲ୍ ଟିପ୍ ଟୋଗଲ୍ କରେ |

$ ( '# ଉପାଦାନ' ) | ଟୁଲ୍ ଟିପ୍ ( 'ଟୋଗଲ୍' )

ପପୋଭର ବିଷୟରେ |

ଦ୍ secondary ିତୀୟ ସୂଚନା ପାଇଁ ଯେକ element ଣସି ଉପାଦାନରେ, ଆଇପ୍ୟାଡରେ ଥିବା ପରି ବିଷୟବସ୍ତୁର ଛୋଟ ଓଭରଲେଜ୍ ଯୋଡନ୍ତୁ |

* ଟୁଲଟିପ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ଆବଶ୍ୟକ କରେ |

ଉଦାହରଣ ହୋଭର୍ ପପ୍ ଓଭର |

ପପ୍ ଓଭର ଟ୍ରିଗର କରିବାକୁ ବଟନ୍ ଉପରେ ଚଲାନ୍ତୁ |

Bootstrap-popover.js ବ୍ୟବହାର କରି |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ପପୋଭରଗୁଡିକ ସକ୍ଷମ କରନ୍ତୁ:

$ ( '# ଉଦାହରଣ' ) | ପପ୍ ଓଭର ( ବିକଳ୍ପ )

ବିକଳ୍ପଗୁଡ଼ିକ

ମାର୍କଅପ୍ |

କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ, ଟୁଲଟିପ୍ ଏବଂ ପପୋଭର ଡାଟା-ଆପିସ୍ ଅପ୍ଟ ଇନ୍ ଅଟେ | ଯଦି ଆପଣ ସେଗୁଡିକ ବ୍ୟବହାର କରିବାକୁ ଚାହାଁନ୍ତି ତେବେ କେବଳ ଏକ ଚୟନକର୍ତ୍ତା ବିକଳ୍ପ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ |

ପ୍ରଣାଳୀ

ପପୋଭର (ବିକଳ୍ପ)

ଏକ ଉପାଦାନ ସଂଗ୍ରହ ପାଇଁ ପପୋଭର ଆରମ୍ଭ କରେ |

.ପୋଭର ('ଶୋ')

ଏକ ଉପାଦାନ ପପଓଭର ପ୍ରକାଶ କରେ |

$ ( '# ଉପାଦାନ' ) | popover ( 'show' )

.ପୋଭର ('ଲୁଚାନ୍ତୁ')

ଏକ ଉପାଦାନ ପପଓଭର ଲୁଚାଏ |

$ ( '# ଉପାଦାନ' ) | popover ( 'ଲୁଚାନ୍ତୁ' )

.ପୋପୋଭର ('ଟୋଗଲ୍')

ଏକ ଉପାଦାନ ପପଓଭର ଟୋଗଲ୍ କରେ |

$ ( '# ଉପାଦାନ' ) | popover ( 'ଟୋଗଲ୍' )

ସତର୍କ ବିଷୟରେ

ଆଲର୍ଟରେ ଘନିଷ୍ଠ କାର୍ଯ୍ୟକାରିତା ଯୋଡିବା ପାଇଁ ଆଲର୍ଟ ପ୍ଲଗଇନ୍ ଏକ କ୍ଷୁଦ୍ର ଶ୍ରେଣୀ ଅଟେ |

ଉଦାହରଣ ଆଲର୍ଟ |

ଆଲର୍ଟ ପ୍ଲଗଇନ୍ ନିୟମିତ ଆଲର୍ଟ ମେସେଜ୍ ଏବଂ ବ୍ଲକ୍ ମେସେଜ୍ ଉପରେ କାମ କରେ |

Bootstrap-alerts.js ବ୍ୟବହାର କରି |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଏକ ଆଲର୍ଟ ରଦ୍ଦ କରିବାକୁ ସକ୍ଷମ କରନ୍ତୁ:

$ ( ".alert-message" ) | ସତର୍କ ()

ମାର୍କଅପ୍ |

data-dismiss="alert"ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏକ ଆଲର୍ଟ ବନ୍ଦ କାର୍ଯ୍ୟକାରିତା ଦେବା ପାଇଁ କେବଳ ଆପଣଙ୍କର ବନ୍ଦ ବଟନ୍ ସହିତ ଯୋଡନ୍ତୁ |

<a class = "close" data-dismiss = "alert" href = "#"> & times ; </a>   

ପ୍ରଣାଳୀ

$ ()। ସତର୍କ ()

ଘନିଷ୍ଠ କାର୍ଯ୍ୟକାରିତା ସହିତ ସମସ୍ତ ଆଲର୍ଟ ଗୁଡ଼ାଏ | ବନ୍ଦ ହେବାବେଳେ ଆପଣଙ୍କର ଆଲର୍ଟଗୁଡିକ ଆନିମେଟ କରିବାକୁ, ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ସେମାନଙ୍କ ପାଇଁ ଶ୍ରେଣୀ .fadeଏବଂ .inଶ୍ରେଣୀ ପୂର୍ବରୁ ପ୍ରୟୋଗ ହୋଇଛି |

ଆଲର୍ଟ ('ବନ୍ଦ')

ଏକ ଆଲର୍ଟ ବନ୍ଦ କରେ |

$ ( ".alert-message" ) | ସତର୍କ ( 'ବନ୍ଦ' )

ଘଟଣା

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଆଲର୍ଟ କ୍ଲାସ୍ ଆଲର୍ଟ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଘଟଣା ପ୍ରକାଶ କରେ |

$ ( '# ମୋ ଆଲର୍ଟ' ) | ବାନ୍ଧ ( 'ବନ୍ଦ' , କାର୍ଯ୍ୟ () {   
  // କିଛି କର…
})

ବିଷୟରେ

ବଟନ୍ ସହିତ ଅଧିକ କରନ୍ତୁ | ଟୁଲ୍ ବାର୍ ପରି ଅଧିକ ଉପାଦାନ ପାଇଁ କଣ୍ଟ୍ରୋଲ୍ ବଟନ୍ ଷ୍ଟେଟସ୍ କିମ୍ବା ବଟନ୍ ଗୋଷ୍ଠୀ ସୃଷ୍ଟି କରେ |

ଉଦାହରଣ ବ୍ୟବହାର କରେ |

ରାଜ୍ୟ ଏବଂ ଟୋଗଲ୍ ପାଇଁ ବଟନ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରନ୍ତୁ |

Bootstrap-button.js ବ୍ୟବହାର କରି |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବଟନ୍ ସକ୍ଷମ କରନ୍ତୁ:

$ ( '.tabs' ) | ବଟନ୍ ()

ମାର୍କଅପ୍ |

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବଟନ୍ ପ୍ଲଗଇନ୍ ପାଇଁ ଅବିଚ୍ଛେଦ୍ୟ | ବିଭିନ୍ନ ମାର୍କଅପ୍ ପ୍ରକାର ପାଇଁ ନିମ୍ନରେ ଥିବା ଉଦାହରଣ କୋଡ୍ ଦେଖନ୍ତୁ |

<! - ଗୋଟିଏ ବଟନ୍ ଉପରେ ଟୋଗଲ୍ ସକ୍ରିୟ କରିବାକୁ ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍" ଯୋଡନ୍ତୁ -> |
<ବଟନ୍ ଶ୍ରେଣୀ = "btn" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍" > ଏକକ ଟୋଗଲ୍ </button>  
 
B!
<div class = "btn-group" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍-ଚେକ୍ ବକ୍ସ" > |  
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ବାମ </button> | 
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ମଧ୍ୟମ </button> | 
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ଡାହାଣ </button> | 
</div>
 
<! - btn-group ରେ ରେଡିଓ ଶ style ଳୀ ଟୋଗଲ୍ କରିବା ପାଇଁ ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍-ରେଡିଓ" ଯୋଡନ୍ତୁ ->
<div class = "btn-group" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍-ରେଡିଓ" > |  
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ବାମ </button> | 
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ମଧ୍ୟମ </button> | 
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ଡାହାଣ </button> | 
</div>

ପ୍ରଣାଳୀ

$ ()। ବଟନ୍ ('ଟୋଗଲ୍')

ଟୋଗଲ୍ ସ୍ଥିତିକୁ ଠେଲିଦିଏ | Btn ଲୁକ୍ ଦେଇଥାଏ ଯେ ଏହା ସକ୍ରିୟ ହୋଇଛି |

<ବଟନ୍ ଶ୍ରେଣୀ = "btn" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍" > … </button> |   

$ ()। ବଟନ୍ ('ଲୋଡିଂ')

ଲୋଡିଂ ପାଇଁ ବଟନ୍ ସ୍ଥିତି ସେଟ୍ କରେ - ବଟନ୍ ଅକ୍ଷମ କରେ ଏବଂ ଟେକ୍ସଟ୍ ଲୋଡିଙ୍ଗ୍ ପାଇଁ ଟେକ୍ସଟ୍ ସ୍ୱାପ୍ କରେ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରି ବଟନ୍ ଉପାଦାନରେ ଟେକ୍ସଟ୍ ଲୋଡିଙ୍ଗ୍ ବ୍ୟାଖ୍ୟା କରାଯିବା ଉଚିତ data-loading-text|

<ବଟନ୍ ଶ୍ରେଣୀ = "btn" ଡାଟା-ଲୋଡିଂ-ଟେକ୍ସଟ୍ = "ଷ୍ଟଫ୍ ଲୋଡିଂ ..." > ... </button> |   

$ ()। ବଟନ୍ ('ପୁନ et ସେଟ୍')

ବଟନ୍ ସ୍ଥିତିକୁ ପୁନ ets ସେଟ୍ କରେ - ପାଠ୍ୟକୁ ମୂଳ ପାଠ୍ୟକୁ ସ୍ୱାପ୍ କରେ |

$ ()। ବଟନ୍ (ଷ୍ଟ୍ରିଙ୍ଗ୍)

ବଟନ୍ ସ୍ଥିତିକୁ ପୁନ ets ସେଟ୍ କରେ - ଯେକ any ଣସି ତଥ୍ୟ ପରିଭାଷିତ ପାଠ୍ୟ ସ୍ଥିତିକୁ ପାଠ୍ୟ ସ୍ୱାପ୍ କରେ |

<ବଟନ୍ ଶ୍ରେଣୀ = "btn" ଡାଟା-ସଂପୂର୍ଣ୍ଣ-ପାଠ୍ୟ = "ସମାପ୍ତ!" > ... </button>   
<ସ୍କ୍ରିପ୍ଟ> |
  $ ( '.btn' ) | ବଟନ୍ ( 'ସଂପୂର୍ଣ୍ଣ' )
</script>

ବିଷୟରେ

ଆକର୍ଡିଅନ୍ ଏବଂ ନେଭିଗେସନ୍ ପରି ଭୁଶୁଡ଼ିପାରୁଥିବା ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ବେସ୍ ଷ୍ଟାଇଲ୍ ଏବଂ ନମନୀୟ ସମର୍ଥନ ପ୍ରାପ୍ତ କରନ୍ତୁ |

ଉଦାହରଣ ଆକର୍ଡିଅନ୍ |

କ୍ଲାସ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରି, ଆମେ ଏକ ସରଳ ଆକର୍ଡିଅନ୍ ଷ୍ଟାଇଲ୍ ୱିଜେଟ୍ ନିର୍ମାଣ କରିଛୁ:

Bootstrap-collapse.js ବ୍ୟବହାର କରି |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ସକ୍ଷମ କରନ୍ତୁ:

$ ( ".collapse" ) ଭୁଶୁଡ଼ିବା ()

ବିକଳ୍ପଗୁଡ଼ିକ

ମାର୍କଅପ୍ |

data-toggle="collapse"ଏକ ସଂପୃକ୍ତ ଉପାଦାନର ନିୟନ୍ତ୍ରଣକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ନ୍ୟସ୍ତ କରିବାକୁ କେବଳ ଏକ data-targetଉପାଦାନକୁ ଯୋଡନ୍ତୁ | ସଂପୃକ୍ତିକୁ ପ୍ରୟୋଗ କରିବାକୁ data-targetଆଟ୍ରିବ୍ୟୁଟ୍ ଏକ css ଚୟନକର୍ତ୍ତା ଗ୍ରହଣ କରେ | collapseକ୍ଲାସ୍ସିବଲ୍ ଉପାଦାନରେ କ୍ଲାସ୍ ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ | ଯଦି ଆପଣ ଏହାକୁ ଡିଫଲ୍ଟ ଖୋଲିବାକୁ ଚାହାଁନ୍ତି, ଅତିରିକ୍ତ ଶ୍ରେଣୀ ଯୋଡନ୍ତୁ in|

<ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  ସରଳ ଭୁଶୁଡ଼ିବା |
</button>
 
<div id = "ଡେମୋ" ଶ୍ରେଣୀ = "ଭୁଶୁଡ଼ିବା" > … </div> |  

ପ୍ରଣାଳୀ

.collapse (ବିକଳ୍ପ)

ତୁମର ବିଷୟବସ୍ତୁକୁ ଏକ ସଂପୃକ୍ତ ଉପାଦାନ ଭାବରେ ସକ୍ରିୟ କରିଥାଏ | ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ଗ୍ରହଣ କରେ object|

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

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

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

About

A generic plugin for cycling through elements. A merry-go-round.

Example carousel

Watch the slideshow below.

First Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Using bootstrap-carousel.js

Call via javascript:

$('.carousel').carousel()

Options

Markup

Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.

<div class="carousel">
  <!-- Carousel items -->
  <div class="carousel-inner">
    ...
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

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

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

About

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

Example

Start typing in the field below to show the typeahead results.

Using bootstrap-typeahead.js

Call the typeahead via javascript:

$('.typeahead').typeahead()

Options

Markup

Add data attributes to register an element with typeahead functionality.

<input type="text" data-provide="typeahead">

Methods

.typeahead(options)

Initializes an input with a typahead.