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

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

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

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

ଲାଇଭ୍ ଡେମୋ |

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

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

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

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

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

ମାର୍କଅପ୍ |

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

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

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

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

ପ୍ରଣାଳୀ

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

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

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

.modal ('ଟୋଗଲ୍')

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

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

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

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

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

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

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

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

ଘଟଣା

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

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

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

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

ଉଦାହରଣଗୁଡିକ

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

• ନିୟମିତ ଲିଙ୍କ୍ |
• ଡ୍ରପଡାଉନ୍
  • 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 ବ୍ୟବହାର କରି |

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

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

ମାର୍କଅପ୍ |

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

<ul class = "nav 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> |  

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

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

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

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

• ଘର
• ପ୍ରୋଫାଇଲ୍
• ଡ୍ରପଡାଉନ୍
  • @fat
  • @mdo

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

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

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

ମାର୍କଅପ୍ |

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

<ul class = "nav nav-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 = "#settings" data-toggle = "tab"> ସେଟିଂସମୂହ </a> </li> |  
</ul>

ପ୍ରଣାଳୀ

$ () ଟ୍ୟାବ୍ |

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

<ul class = "nav nav-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 ପ୍ଲଗଇନ୍ ଦ୍ୱାରା ଅନୁପ୍ରାଣିତ; ଟୁଲ୍ ଟିପ୍ସ ହେଉଛି ଏକ ଅପଡେଟ୍ ସଂସ୍କରଣ, ଯାହା ପ୍ରତିଛବି ଉପରେ ନିର୍ଭର କରେ ନାହିଁ, ଆନିମେସନ୍ ପାଇଁ css3 ବ୍ୟବହାର କରେ, ଏବଂ ସ୍ଥାନୀୟ ଟାଇଟଲ୍ ଷ୍ଟୋରେଜ୍ ପାଇଁ ଡାଟା-ଆଟ୍ରିବ୍ୟୁଟ୍ |

ଟୁଲଟିପ୍ସର ଉଦାହରଣ ବ୍ୟବହାର |

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

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

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

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

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

ମାର୍କଅପ୍ |

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

<a href = "#" rel = "tooltip" title = "ପ୍ରଥମ ଟୁଲ୍ ଟିପ୍"> ମୋ ଉପରେ ଚଲାନ୍ତୁ </a>   

ପ୍ରଣାଳୀ

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

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

.tooltip ('show')

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

$ ( '#element' ) ଟୁଲ୍ ଟିପ୍ ( 'ଶୋ' )

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

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

$ ( '#element' ) ଟୁଲ୍ ଟିପ୍ ( 'ଲୁଚାନ୍ତୁ' )

.tooltip ('ଟୋଗଲ୍')

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

$ ( '#element' ) ଟୁଲ୍ ଟିପ୍ ( 'ଟୋଗଲ୍' )

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

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

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

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

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

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

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

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

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

ମାର୍କଅପ୍ |

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

ପ୍ରଣାଳୀ

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

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

.ପୋଭର ('ଶୋ')

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

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

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

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

$ ( '#element' ) popover ( 'ଲୁଚାନ୍ତୁ' )

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

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

$ ( '#element' ) popover ( 'ଟୋଗଲ୍' )

ସତର୍କ ବିଷୟରେ

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

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

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

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

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

$ ( ".alert" ) ସତର୍କ ()

ମାର୍କ��ପ୍ |

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

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

ପ୍ରଣାଳୀ

$ ()। ସତର୍କ ()

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

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

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

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

ଘଟଣା

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

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

ବିଷୟରେ

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

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

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

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" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍" > … </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 ('ଟୋଗଲ୍')

ଦେଖାଯାଇଥିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପାଇଁ ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନକୁ ଟୋଗଲ୍ କରେ |

.collapse ('show')

ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନ ଦେଖାଏ |

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

ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନକୁ ଲୁଚାଇଥାଏ |

ଘଟଣା

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

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

ବିଷୟରେ

ଉପାଦାନ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ପାଇଁ ଏକ ଜେନେରିକ୍ ପ୍ଲଗଇନ୍ | ଏକ ଆନନ୍ଦ-ଗୋଲାକାର |

ଉଦାହରଣ କାରୁସେଲ୍ |

ନିମ୍ନରେ ଥିବା ସ୍ଲାଇଡ୍ ଶୋକୁ ଦେଖନ୍ତୁ |

ପ୍ରଥମ ଥମ୍ବନେଲ୍ ଲେବଲ୍ |

Cras justo odio, dapibus ac facilisis in, egestas eget quam। Eget metus ରେ Donec id elit non mi porta gravida | Nullam id dolor id nibh ultricies vehicula ut id elit।

ଦ୍ୱିତୀୟ ଥମ୍ବନେଲ୍ ଲେବଲ୍ |

Cras justo odio, dapibus ac facilisis in, egestas eget quam। Eget metus ରେ Donec id elit non mi porta gravida | Nullam id dolor id nibh ultricies vehicula ut id elit।

ତୃତୀୟ ଥମ୍ବନେଲ୍ ଲେବଲ୍ |

Cras justo odio, dapibus ac facilisis in, egestas eget quam। Eget metus ରେ Donec id elit non mi porta gravida | Nullam id dolor id nibh ultricies vehicula ut id elit।

‹ ›

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

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

$ ( '.carousel' ) | କାରୁସେଲ ()

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

ମାର୍କଅପ୍ |

ପୂର୍ବ ଏବଂ ପରବର୍ତ୍ତୀ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକ ପାଇଁ ଡାଟା ଗୁଣଗୁଡ଼ିକ ବ୍ୟବହୃତ ହୁଏ | ନିମ୍ନରେ ଉଦାହରଣ ମାର୍କଅପ୍ ଦେଖନ୍ତୁ |

<div id = "myCarousel" ଶ୍ରେଣୀ = "କାରୁସେଲ" > |  
  <! - କାରୁସେଲ୍ ଆଇଟମ୍ -> |
  <div class = "carousel-inner" > | 
    <div class = "ସକ୍ରିୟ ଆଇଟମ୍" > … </div> | 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <! - କାରୁସେଲ୍ ନାଭ -> |
  <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>

ପ୍ରଣାଳୀ

.carousel (ବିକଳ୍ପ)

ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ସହିତ କାରୁସେଲ୍ ଆରମ୍ଭ କରେ objectଏବଂ ଆଇଟମ୍ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ଆରମ୍ଭ କରେ |

$ ( '.carousel' ) | କାରୁସେଲ ({
  ବ୍ୟବଧାନ : 2000 
})

.କାରୋସେଲ୍ ('ଚକ୍ର')

ବାମରୁ ଡାହାଣକୁ କାରୁସେଲ ଆଇଟମ୍ ମାଧ୍ୟମରେ ଚକ୍ର |

.carousel ('ବିରତି')

ଆଇଟମ୍ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ଠାରୁ କାରୁସେଲକୁ ବନ୍ଦ କରିଦିଏ |

.କାରୋସେଲ୍ (ସଂଖ୍ୟା)

କାରୁସେଲକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଫ୍ରେମ୍ (0 ଆଧାରିତ, ଏକ ଆରେ ପରି) ଚକ୍ର କରେ |

.carousel ('ପୂର୍ବ')

ପୂର୍ବ ଆଇଟମ୍ କୁ ଚକ୍ର |

.carousel ('ପରବର୍ତ୍ତୀ')

ପରବର୍ତ୍ତୀ ଆଇଟମ୍ ପାଇଁ ଚକ୍ର |

ଘଟଣା

ବୁଟଷ୍ଟ୍ରାପର କାରୁସେଲ ଶ୍ରେଣୀ କାରୁସେଲ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ ପାଇଁ ଦୁଇଟି ଇଭେଣ୍ଟକୁ ପ୍ରକାଶ କରିଥାଏ |

ବିଷୟରେ

ଯେକ any ଣସି ଫର୍ମ ପାଠ୍ୟ ଇନପୁଟ୍ ସହିତ ଶୀଘ୍ର ଚମତ୍କାର ଟାଇପ୍ହେଡ୍ ସୃଷ୍ଟି କରିବା ପାଇଁ ଏକ ମ basic ଳିକ, ସହଜରେ ବିସ୍ତାରିତ ପ୍ଲଗଇନ୍ |

ଉଦାହରଣ |

ଟାଇପ୍ହେଡ୍ ଫଳାଫଳ ଦେଖାଇବାକୁ ନିମ୍ନରେ ଫିଲ୍ଡରେ ଟାଇପ୍ କରିବା ଆରମ୍ଭ କରନ୍ତୁ |

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

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

$ ( '.typeahead' ) | typeahead ()

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

ମାର୍କଅପ୍ |

ଟାଇପ୍ହେଡ୍ କାର୍ଯ୍ୟକାରିତା ସହିତ ଏକ ଉପାଦାନକୁ ପଞ୍ଜିକରଣ କରିବାକୁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ସ ଯୋଡନ୍ତୁ |

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

ପ୍ରଣାଳୀ

.ପ୍ରକାର (ବିକଳ୍ପ)

ଏକ ଟାଇପ୍ ହେଡ୍ ସହିତ ଏକ ଇନପୁଟ୍ ଆରମ୍ଭ କରେ |