ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

ଉପାଦାନଗୁଡ଼ିକ |

ନାଭିଗେସନ୍, ଆଲର୍ଟ, ପପୋଭର ଏବଂ ଅନେକ କିଛି ଯୋଗାଇବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପରେ ଡଜନେ ପୁନ us ବ୍ୟବହାର ଯୋଗ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ନିର୍ମିତ |

ବଟନ୍ ଗୋଷ୍ଠୀଗୁଡ଼ିକ ଅଧିକ ଟୁଲ୍ ବାର୍ ପରି କାର୍ଯ୍ୟକାରିତା ପାଇଁ ବଟନ୍ଗୁଡ଼ିକରେ ଯୋଗ ଦିଅନ୍ତୁ |

ବଟନ୍ ଗୋଷ୍ଠୀ |

ଏକ ମିଶ୍ରିତ ଉପାଦାନ ଭାବରେ ଏକାଧିକ ବଟନ୍ ଏକତ୍ର ହେବା ପାଇଁ ବଟନ୍ ଗୋଷ୍ଠୀ ବ୍ୟବହାର କରନ୍ତୁ | ସେମାନଙ୍କୁ ଏକ କ୍ରମ <a>ବା <button>ଉପାଦାନ ସହିତ ନିର୍ମାଣ କରନ୍ତୁ |

ସର୍ବୋତ୍ତମ ଅଭ୍ୟାସ |

ବଟନ୍ ଗୋଷ୍ଠୀ ଏବଂ ଟୁଲ୍ ବାର୍ ବ୍ୟବହାର କରିବା ପାଇଁ ଆମେ ନିମ୍ନଲିଖିତ ନିର୍ଦ୍ଦେଶାବଳୀକୁ ସୁପାରିଶ କରୁ:

  • ସର୍ବଦା ଗୋଟିଏ ବଟନ୍ ଗୋଷ୍ଠୀରେ ସମାନ ଉପାଦାନ ବ୍ୟବହାର କରନ୍ତୁ, <a>କିମ୍ବା <button>।
  • ସମାନ ବଟନ୍ ଗ୍ରୁପରେ ବିଭିନ୍ନ ରଙ୍ଗର ବଟନ୍ ମିଶ୍ରଣ କରନ୍ତୁ ନାହିଁ |
  • ପାଠ୍ୟ ସହିତ କିମ୍ବା ଏହା ବଦଳରେ ଆଇକନ୍ ବ୍ୟବହାର କରନ୍ତୁ, କିନ୍ତୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ ଯେ ଉପଯୁକ୍ତ ସ୍ଥାନରେ alt ଏବଂ ଟାଇଟଲ୍ ପାଠ୍ୟ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |

ଡ୍ରପଡାଉନ୍ ସହିତ ସମ୍ପୃକ୍ତ ବଟନ୍ ଗୋଷ୍ଠୀଗୁଡିକ (ନିମ୍ନରେ ଦେଖନ୍ତୁ) ପୃଥକ ଭାବରେ ଡାକିବା ଉଚିତ ଏବଂ ଉଦ୍ଦିଷ୍ଟ ଆଚରଣ ସୂଚାଇବା ପାଇଁ ସର୍ବଦା ଏକ ଡ୍ରପଡାଉନ୍ କ୍ୟାରେଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ |

ଡିଫଲ୍ଟ ଉଦାହରଣ |

ଆଙ୍କର୍ ଟ୍ୟାଗ୍ ବଟନ୍ ସହିତ ନିର୍ମିତ ଏକ ମାନକ ବଟନ୍ ଗୋଷ୍ଠୀ ପାଇଁ HTML କିପରି ଖୋଜେ ତାହା ଏଠାରେ ଅଛି:

ବାମ ମଧ୍ୟମ ଠିକ୍ | 
  1. <div class = "btn-group" > | 
  2.   <a class = "btn" href = "#"> 1 </a> _  
  3.   <a class = "btn" href = "#"> 2 </a> _  
  4.   <a class = "btn" href = "#"> 3 </a> _  
  5. </div>

ଟୁଲ୍ ବାର୍ ଉଦାହରଣ |

ଅଧିକ ଜଟିଳ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ସେଟ୍ ଗୁଡିକୁ ମିଶ୍ରଣ <div class="btn-group">କରନ୍ତୁ |<div class="btn-toolbar">

୧ ୨ 3 4
5 6 7
8 
  1. <div class = "btn-toolbar" > | 
  2.   <div class = "btn-group" > | 
  3.     ...
  4.   </div>
  5. </div>

ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ସ୍ୱାଦ |

ବଟନ୍ ଗୋଷ୍ଠୀଗୁଡ଼ିକ ରେଡିଓ ଭାବରେ ମଧ୍ୟ କାର୍ଯ୍ୟ କରିପାରନ୍ତି, ଯେଉଁଠାରେ କେବଳ ଗୋଟିଏ ବଟନ୍ ସକ୍ରିୟ ହୋଇପାରେ, କିମ୍ବା ଚେକ୍ ବକ୍ସ, ଯେଉଁଠାରେ ଯେକ number ଣସି ସଂଖ୍ୟକ ବଟନ୍ ସକ୍ରିୟ ହୋଇପାରେ | ଏଥିପାଇଁ ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକସ୍ ଦେଖନ୍ତୁ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ପାଆନ୍ତୁ »

ମୁଣ୍ଡ ଉପରକୁ |

ବଟନ୍ ଗୋଷ୍ଠୀଗୁଡ଼ିକ ପାଇଁ CSS ଏକ ପୃଥକ ଫାଇଲ୍, ବଟନ୍-ଗ୍ରୁପ୍ସ ବିନା |

ବଟନ୍ ଡ୍ରପଡାଉନ୍ ବଟନ୍ ଗ୍ରୁପ୍ ଉପରେ ନିର୍ମିତ ବିଷୟବସ୍ତୁ ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡ଼ିକ |

ବଟନ୍ ଡ୍ରପ୍ ଡାଉନ୍ |

ଏକ ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁକୁ ଏକ ଭିତରେ ରଖି .btn-groupଏବଂ ସଠିକ୍ ମେନୁ ମାର୍କଅପ୍ ପ୍ରଦାନ କରି ଯେକ any ଣସି ବଟନ୍ ବ୍ୟବହାର କରନ୍ତୁ |

କାର୍ଯ୍ୟ
କାର୍ଯ୍ୟ
ବିପଦ
ସଫଳତା |
ସୂଚନା

ମୁଣ୍ଡ ଉପରକୁ! ବଟନ୍ ଡ୍ରପ୍ ଡାଉନ୍ ଗୁଡିକ କାର୍ଯ୍ୟ କରିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ଡ୍ରପ୍ ଡାଉନ୍ ପ୍ଲଗଇନ୍ ଆବଶ୍ୟକ କରେ |

ଉଦାହରଣ ମାର୍କଅପ୍ |

ଏକ ବଟନ୍ ଗୋଷ୍ଠୀ ପରି, ଆମର ମାର୍କଅପ୍ ନିୟମିତ ବଟନ୍ ମାର୍କଅପ୍ ବ୍ୟବହାର କରେ, କିନ୍ତୁ ଶ style ଳୀକୁ ବିଶୋଧନ କରିବା ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡ୍ରପ୍ ଡାଉନ୍ jQuery ପ୍ଲଗଇନ୍ କୁ ସମର୍ଥନ କରିବା ପାଇଁ ହାତଗଣତି କିଛି ଯୋଗ ସହିତ |

  1. <div class = "btn-group" > | 
  2.   <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
  3.     କାର୍ଯ୍ୟ
  4.     <span class = "caret" > </span> | 
  5.   </a>
  6.   <ul class = "dropdown-menu" > | 
  7.     <! - ଡ୍ରପଡାଉନ୍ ମେନୁ ଲିଙ୍କ୍ -> |
  8.   </ul>
  9. </div>

ବଟନ୍ ଡ୍ରପଡାଉନ୍ ଗୁଡିକୁ ବିଭାଜନ କର |

ବଟନ୍ ଗ୍ରୁପ୍ ଶ yles ଳୀ ଏବଂ ମାର୍କଅପ୍ ଉପରେ ନିର୍ମାଣ, ଆମେ ସହଜରେ ଏକ ବିଭାଜିତ ବଟନ୍ ସୃଷ୍ଟି କରିପାରିବା | ବିଭାଜିତ ବଟନ୍ଗୁଡ଼ିକ ବାମ ପାର୍ଶ୍ୱରେ ଏକ ମାନକ କାର୍ଯ୍ୟ ଏବଂ ଡାହାଣ ପାର୍ଶ୍ୱରେ ଡ୍ରପଡାଉନ୍ ଟୋଗଲ୍ ବ context ଶିଷ୍ଟ୍ୟ ଅଟେ |

କାର୍ଯ୍ୟ
କାର୍ଯ୍ୟ
ବିପଦ
ସଫଳତା |
ସୂଚନା

ଉଦାହରଣ ମାର୍କଅପ୍ |

ଦ୍ୱିତୀୟ ବଟନ୍ ଆକ୍ସନ୍ ପ୍ରଦାନ କରିବାକୁ ଆମେ ସାଧାରଣ ବଟନ୍ ଡ୍ରପଡାଉନ୍ ଉପରେ ବିସ୍ତାର କରୁ ଯାହା ଏକ ପୃଥକ ଡ୍ରପଡାଉନ୍ ଟ୍ରିଗର ଭାବରେ କାର୍ଯ୍ୟ କରେ |

  1. <div class = "btn-group" > | 
  2.   <a class = "btn" href = "#"> କାର୍ଯ୍ୟ </a> |  
  3.   <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
  4.     <span class = "caret" > </span> | 
  5.   </a>
  6.   <ul class = "dropdown-menu" > | 
  7.     <! - ଡ୍ରପଡାଉନ୍ ମେନୁ ଲିଙ୍କ୍ -> |
  8.   </ul>
  9. </div>

ବିଷୟବସ୍ତୁ ମାଧ୍ୟମରେ ପେଜିଂ ପାଇଁ ଦୁଇଟି ବିକଳ୍ପ |

ମଲ୍ଟିକନ୍-ପୃଷ୍ଠା ପୃଷ୍ଠା |

କେତେବେଳେ ବ୍ୟବହାର କରିବେ |

ଅଲ୍ଟ୍ରା ସରଳୀକୃତ ଏବଂ ସର୍ବନିମ୍ନ ଷ୍ଟାଇଲ୍ ପେଜିନେସନ୍ Rdio ଦ୍ୱାରା ଅନୁପ୍ରାଣିତ, ଆପ୍ ଏବଂ ସନ୍ଧାନ ଫଳାଫଳ ପାଇଁ ଉତ୍ତମ | ବୃହତ ବ୍ଲକକୁ ହରାଇବା କଷ୍ଟକର, ସହଜରେ ମାପନୀୟ, ଏବଂ ବଡ଼ କ୍ଲିକ୍ କ୍ଷେତ୍ରଗୁଡିକ ପ୍ରଦାନ କରେ |

ରାଜ୍ୟ ପୃଷ୍ଠା ଲିଙ୍କ୍ |

ଲିଙ୍କଗୁଡିକ କଷ୍ଟମାଇଜେବଲ୍ ଏବଂ ସଠିକ୍ ଶ୍ରେଣୀ ସହିତ ଅନେକ ପରିସ୍ଥିତିରେ କାର୍ଯ୍ୟ କରେ | .disabledଅନାବଶ୍ୟକ ଲିଙ୍କ୍ .activeପାଇଁ ଏବଂ ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠା ପାଇଁ |

ନମନୀୟ ଆଲାଇନମେଣ୍ଟ୍ |

ପୃଷ୍ଠା ଲିଙ୍କଗୁଡିକର ଆଲାଇନ୍ମେଣ୍ଟ ପରିବର୍ତ୍ତନ କରିବାକୁ ଦୁଇଟି ବ al କଳ୍ପିକ ଶ୍ରେଣୀ ମଧ୍ୟରୁ ଉଭୟକୁ ଯୋଡନ୍ତୁ: .pagination-centeredଏବଂ .pagination-right।

ଉଦାହରଣଗୁଡିକ

ଡିଫଲ୍ଟ ପେଜିନେସନ୍ ଉପାଦାନ ନମନୀୟ ଏବଂ ଅନେକ ପ୍ରକାରରେ କାମ କରେ |

ମାର୍କଅପ୍ |

A ରେ ଆବୃତ <div>, ପୃଷ୍ଠା କେବଳ ଏକ <ul>|

  1. <div ଶ୍ରେଣୀ = "ପୃଷ୍ଠା" > | 
  2.   <ul>
  3.     <li> <a href = "#"> ପୂର୍ବ </a> </li> | 
  4.     <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > | 
  5.       <a href = "#"> 1 </a> _ 
  6.     </ li>
  7.     <li> <a href = "#"> 2 </a> </li> | 
  8.     <li> <a href = "#"> 3 </a> </li> 
  9.     <li> <a href = "#"> 4 </a> </li> 
  10.     <li> <a href = "#"> ପରବର୍ତ୍ତୀ </a> </li> | 
  11.   </ul>
  12. </div>

ଶୀଘ୍ର ପୂର୍ବ ଏବଂ ପରବର୍ତ୍ତୀ ଲିଙ୍କ୍ ପାଇଁ ପେଜର୍ |

ପେଜର୍ ବିଷୟରେ |

ପେଜର୍ ଉପାଦାନ ହେଉଛି ହାଲୁକା ମାର୍କଅପ୍ ଏବଂ ଏପରିକି ହାଲୁକା ଶ yles ଳୀ ସହିତ ସରଳ ପୃଷ୍ଠା ପ୍ରୟୋଗ ପାଇଁ ଲିଙ୍କଗୁଡ଼ିକର ଏକ ସେଟ୍ | ବ୍ଲଗ୍ କିମ୍ବା ପତ୍ରିକା ପରି ସରଳ ସାଇଟ୍ ପାଇଁ ଏହା ବହୁତ ଭଲ |

ଡିଫଲ୍ଟ ଉଦାହରଣ |

ଡିଫଲ୍ଟ ଭାବରେ, ପେଜର୍ ସେଣ୍ଟର୍ ଲିଙ୍କ୍ କରେ |

  1. <ul ଶ୍ରେଣୀ = "ପେଜର୍" > | 
  2.   <li>
  3.     <a href = "#"> ପୂର୍ବ </a> _ 
  4.   </ li>
  5.   <li>
  6.     <a href = "#"> ପରବର୍ତ୍ତୀ </a> _ 
  7.   </ li>
  8. </ul>

ଆଲାଇନ୍ ହୋଇଥିବା ଲିଙ୍କ୍ |

ବ ly କଳ୍ପିକ ଭାବରେ, ଆପଣ ପ୍ରତ୍ୟେକ ଲିଙ୍କ୍କୁ ପାର୍ଶ୍ୱକୁ ଆଲାଇନ୍ କରିପାରିବେ:

  1. <ul ଶ୍ରେଣୀ = "ପେଜର୍" > | 
  2.   <li ଶ୍ରେଣୀ = "ପୂର୍ବ" > | 
  3.     <a href = "#"> & larr ; ପୁରୁଣା </a> 
  4.   </ li>
  5.   <li ଶ୍ରେଣୀ = "ପରବର୍ତ୍ତୀ" > | 
  6.     <a href = "#"> ନୂତନ & rarr ; </a> 
  7.   </ li>
  8. </ul>

ଇନଲାଇନ୍ ଲେବଲ୍ ଲେବଲ୍ ଏବଂ ଟେକ୍ସଟ୍ ଟିପ୍ପଣୀ କରନ୍ତୁ |

ଲେବଲ୍ | ମାର୍କଅପ୍ |
ଡିଫଲ୍ଟ | <span class="label">Default</span>
ସଫଳତା | <span class="label label-success">Success</span>
ଚେତାବନୀ <span class="label label-warning">Warning</span>
ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ | <span class="label label-important">Important</span>
ସୂଚନା <span class="label label-info">Info</span>

ଟାଇଗୋଗ୍ରାଫିକ୍ ଉପାଦାନଗୁଡ଼ିକ ପୃଷ୍ଠା ହେଡର୍ ଏବଂ ସେଗମେଣ୍ଟ୍ ବିଷୟବସ୍ତୁ ପାଇଁ ହିରୋ ୟୁନିଟ୍ |

ହିରୋ ୟୁନିଟ୍ |

ଆପଣଙ୍କ ସାଇଟରେ ବିଷୟବସ୍ତୁ ପ୍ରଦର୍ଶନ କରିବାକୁ ବୁଟଷ୍ଟ୍ରାପ୍ ଏକ ହାଲୁକା, ନମନୀୟ ଉପାଦାନ ପ୍ରଦାନ କରେ | ମାର୍କେଟିଂ ଏବଂ ବିଷୟବସ୍ତୁ-ଭାରୀ ସାଇଟଗୁଡିକରେ ଏହା ଭଲ କାମ କରେ |

ମାର୍କଅପ୍ |

ତୁମର ବିଷୟବସ୍ତୁକୁ ଏହିପରି ଗୁଡ଼ାଇ ରଖ div:

  1. <div class = "ହିରୋ-ୟୁନିଟ୍" > | 
  2.   <h1> ହେଡିଙ୍ଗ୍ </ h1> |
  3.   <p> ଟ୍ୟାଗଲାଇନ୍ </ p> |
  4.   <p>
  5.     <a class = "btn btn-primary btn-large"> 
  6.       ଅଧିକ ସିଖନ୍ତୁ
  7.     </a>
  8.   </p>
  9. </div>

ନମସ୍କାର ବିଶ୍ୱବାସି!

ବ featured ଶିଷ୍ଟ୍ୟଯୁକ୍ତ ବିଷୟବସ୍ତୁ କିମ୍ବା ସୂଚନା ପ୍ରତି ଅତିରିକ୍ତ ଧ୍ୟାନ ଦେବା ପାଇଁ ଏହା ଏକ ସରଳ ହିରୋ ୟୁନିଟ୍, ଏକ ସରଳ ଜମ୍ବୋଟ୍ରନ୍-ଷ୍ଟାଇଲ୍ ଉପାଦାନ |

ଅଧିକ ସିଖନ୍ତୁ

ପୃଷ୍ଠା ଶୀର୍ଷଲେଖ

h1ଏକ ପୃଷ୍ଠାରେ ବିଷୟବସ୍ତୁର ସେଗମେଣ୍ଟ୍ ବିଭାଗଗୁଡିକ ପାଇଁ ଏକ ସରଳ ସେଲ୍ | ଏହା h1ଡିଫଲ୍ଟ small, ଉପାଦାନ ଏବଂ ଅନ୍ୟାନ୍ୟ ଉପାଦାନଗୁଡିକ (ଅତିରିକ୍ତ ଶ yles ଳୀ ସହିତ) ବ୍ୟବହାର କରିପାରିବ |

  1. <div class = "page-haeder" > | 
  2.   <h1> ଉଦାହରଣ ପୃଷ୍ଠା ଶୀର୍ଷକ </ h1> |
  3. </div>

ଚିତ୍ର, ଭିଡିଓ, ପାଠ୍ୟ, ଏବଂ ଅଧିକର ଥମ୍ବନେଲ ଗ୍ରୀଡ୍ |

ଡିଫଲ୍ଟ ଥମ୍ na ନେଲ୍ |

ଡିଫଲ୍ଟ ଭାବରେ, ସର୍ବନିମ୍ନ ଆବଶ୍ୟକ ମାର୍କଅପ୍ ସହିତ ଲିଙ୍କ୍ ହୋଇଥିବା ପ୍ରତିଛବିଗୁଡ଼ିକୁ ପ୍ରଦର୍ଶନ କରିବାକୁ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଥମ୍ବନେଲଗୁଡିକ ଡିଜାଇନ୍ କରାଯାଇଛି |

ଅତ୍ୟଧିକ କଷ୍ଟମାଇଜେବଲ୍ |

ଟିକେ ଅତିରିକ୍ତ ମାର୍କଅପ୍ ସହିତ, ଯେକ any ଣସି ପ୍ରକାରର HTML ବିଷୟବସ୍ତୁ ଯେପରିକି ହେଡିଙ୍ଗ୍, ପାରାଗ୍ରାଫ୍, କିମ୍ବା ବଟନ୍ଗୁଡ଼ିକୁ ଥମ୍ବନେଲରେ ଯୋଡିବା ସମ୍ଭବ |

  • ଥମ୍ବନେଲ୍ ଲେବଲ୍ |

    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।

    କାର୍ଯ୍ୟ କାର୍ଯ୍ୟ

ଥମ୍ବନେଲଗୁଡିକ କାହିଁକି ବ୍ୟବହାର କରନ୍ତୁ |

ଥମ୍ବନେଲଗୁଡିକ (ପୂର୍ବରୁ .media-gridv1.4 ପର୍ଯ୍ୟନ୍ତ) ଫଟୋ କିମ୍ବା ଭିଡିଓ ଗ୍ରୀଡ୍, ପ୍ରତିଛବି ସନ୍ଧାନ ଫଳାଫଳ, ଖୁଚୁରା ଉତ୍ପାଦ, ପୋର୍ଟଫୋଲିଓ ଏବଂ ଆହୁରି ଅନେକ ପାଇଁ ଉତ୍ତମ ଅଟେ | ସେଗୁଡ଼ିକ ଲିଙ୍କ୍ କିମ୍ବା ଷ୍ଟାଟିକ୍ ବିଷୟବସ୍ତୁ ହୋଇପାରେ |

ସରଳ, ନମନୀୟ ମାର୍କଅପ୍ |

ଥମ୍ବନେଲ ମାର୍କଅପ୍ ସରଳ - ଯେକ ulany ଣସି ସଂଖ୍ୟକ liଉପାଦାନ ସହିତ ଯାହା ଆବଶ୍ୟକ | ଏହା ମଧ୍ୟ ସୁପର ଫ୍ଲେକ୍ସିବଲ୍, ଯେକ any ଣସି ପ୍ରକାରର ବିଷୟବସ୍ତୁକୁ କେବଳ ଟିକେ ଅଧିକ ମାର୍କଅପ୍ ସହିତ ତୁମର ବିଷୟବସ୍ତୁକୁ ଗୁଡ଼ାଇ ରଖିବା ପାଇଁ ଅନୁମତି ଦିଏ |

ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ଆକାର ବ୍ୟବହାର କରେ |

ଶେଷରେ, ଥମ୍ na ନେଲ୍ ଉପାଦାନଗୁଡିକ ଥ୍ରିମ୍ନାଲ୍ ଡାଇମେନ୍ସର ନିୟନ୍ତ୍ରଣ ପାଇଁ ବିଦ୍ୟମାନ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ କ୍ଲାସ୍ .span2ବ୍ୟବହାର କରେ |.span3

ମାର୍କଅପ୍ |

ପୂର୍ବରୁ କୁହାଯାଇଥିବା ପରି, ଥମ୍ବନେଲଗୁଡ଼ିକ ପାଇଁ ଆବଶ୍ୟକ ମାର୍କଅପ୍ ହାଲୁକା ଏବଂ ସରଳ ଅଟେ | ଲିଙ୍କ୍ ହୋଇଥିବା ପ୍ରତିଛବିଗୁଡ଼ିକ ପାଇଁ ଡିଫଲ୍ଟ ସେଟଅପ୍ ଉପରେ ଏଠାରେ ଏକ ନଜର ଅଛି :

  1. <ul ଶ୍ରେଣୀ = "ଥମ୍ na ନେଲ୍" > | 
  2.   <li ଶ୍ରେଣୀ = "span3" > | 
  3.     <a href = "#" class = "thumbnail"> |  
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.     </a>
  6.   </ li>
  7.   ...
  8. </ul>

ଥମ୍ na ନେଲରେ କଷ୍ଟମ୍ HTML ବିଷୟବସ୍ତୁ ପାଇଁ, ମାର୍କଅପ୍ ସାମାନ୍ୟ ପରିବର୍ତ୍ତନ ହୁଏ | <a>ଯେକ anywhere ଣସି ସ୍ଥାନରେ ବ୍ଲକ ସ୍ତରର ବିଷୟବସ୍ତୁକୁ ଅନୁମତି ଦେବାକୁ, ଆମେ ସେହି ପରି ଅଦଳବଦଳ କରୁ <div>:

  1. <ul ଶ୍ରେଣୀ = "ଥମ୍ na ନେଲ୍" > | 
  2.   <li ଶ୍ରେଣୀ = "span3" > | 
  3.     <div class = "thumbnail" > | 
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.       <h5> ଥମ୍ବନେଲ୍ ଲେବଲ୍ </ h5> |
  6.       <p> ଥମ୍ବନେଲ୍ କ୍ୟାପସନ୍ ଏଠାରେ ... </p> |
  7.     </div>
  8.   </ li>
  9.   ...
  10. </ul>

ଅଧିକ ଉଦାହରଣ |

ଆପଣଙ୍କ ପାଇଁ ଉପଲବ୍ଧ ବିଭିନ୍ନ ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ସହିତ ଆପଣଙ୍କର ସମସ୍ତ ବିକଳ୍ପଗୁଡିକ ଏକ୍ସପ୍ଲୋର୍ କରନ୍ତୁ | ଆପଣ ବିଭିନ୍ନ ଆକାରର ମିଶ୍ରଣ ଏବଂ ମେଳ ମଧ୍ୟ କରିପାରିବେ |

ସଫଳତା, ଚେତାବନୀ, ଏବଂ ତ୍ରୁଟି ବାର୍ତ୍ତା ପାଇଁ ଶ yles ଳୀଗୁଡିକ |

ହାଲୁକା ଡିଫଲ୍ଟ |

ପୁନ base ଲିଖିତ ବେସ୍ କ୍ଲାସ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ 2 ସହିତ, ଆମେ ବେସ୍ କ୍ଲାସ୍କୁ ସରଳୀକୃତ କରିଛୁ: .alertଏହା ବଦଳରେ .alert-message| ଆମେ ସର୍ବନିମ୍ନ ଆବଶ୍ୟକ ମାର୍କଅପ୍ ମଧ୍ୟ ହ୍ରାସ କରିଛୁ - <p>ଡିଫଲ୍ଟ ଭାବରେ ନା ଆବଶ୍ୟକ, କେବଳ ବାହ୍ୟ <div>|

ଏକକ ସତର୍କ ବାର୍ତ୍ତା |

କମ୍ କୋଡ୍ ସହିତ ଅଧିକ ସ୍ଥାୟୀ ଉପାଦାନ ପାଇଁ, ଆମେ ବ୍ଲକ୍ ଆଲର୍ଟ, ମେସେଜ୍ ଯାହା ଅଧିକ ପ୍ୟାଡିଂ ଏବଂ ସାଧାରଣତ more ଅଧିକ ପାଠ୍ୟ ସହିତ ଭିନ୍ନ ଭିନ୍ନ ଲୁକ୍ ଅପସାରଣ କରିଛୁ | କ୍ଲାସ୍ ମଧ୍ୟ ବଦଳିଛି .alert-block|

ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ ବହୁତ ଭଲ ଯାଏ |

ବୁଟଷ୍ଟ୍ରାପ୍ ଏକ ଉତ୍ତମ jQuery ପ୍ଲଗଇନ୍ ସହିତ ଆସିଥାଏ ଯାହା ସତର୍କ ବାର୍ତ୍ତାଗୁଡ଼ିକୁ ସମର୍ଥନ କରେ, ସେମାନଙ୍କୁ ଶୀଘ୍ର ଏବଂ ସହଜ କରିବା |

ପ୍ଲଗଇନ୍ ପାଆନ୍ତୁ »

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

ସରଳ ଶ୍ରେଣୀ ସହିତ ଏକ ଡିଭରେ ତୁମର ବାର୍ତ୍ତା ଏବଂ ଏକ ଇଚ୍ଛାଧୀନ ବନ୍ଦ ଆଇକନ୍ ଗୁଡ଼ାଇ ରଖ |

× ଚେତାବନୀ! ସର୍ବୋତ୍ତମ ଚେକ୍ ୟୋ ସେଲ୍ଫ୍, ଆପଣ ବହୁତ ଭଲ ଦେଖାଯାଉ ନାହାଁନ୍ତି | 
  1. <div ଶ୍ରେଣୀ = "ସତର୍କ" > | 
  2.   <a class = "close" data-dismiss = "alert"> × </a> _  
  3.   ଚେତାବନୀ ! </ strong> ସର୍ବୋତ୍ତମ ଚେକ୍ ୟୋ, ତୁମେ ବହୁତ ଭଲ ଦେଖାଯାଉ ନାହଁ |
  4. </div>

ଦୁଇଟି ବ al କଳ୍ପିକ ଶ୍ରେଣୀ ସହିତ ସହଜରେ ଷ୍ଟାଣ୍ଡାର୍ଡ ଆଲର୍ଟ ବାର୍ତ୍ତା ବିସ୍ତାର କରନ୍ତୁ: .alert-blockଅଧିକ ପ୍ୟାଡିଂ ଏବଂ ଟେକ୍ସଟ୍ କଣ୍ଟ୍ରୋଲ୍ ଏବଂ .alert-headingଏକ ମେଳକ ହେଡିଙ୍ଗ୍ ପାଇଁ |

×

ଚେତାବନୀ!

ସର୍ବୋତ୍ତମ ଚେକ୍ ୟୋ ସେଲ୍ଫ୍, ଆପଣ ବହୁତ ଭଲ ଦେଖାଯାଉ ନାହାଁନ୍ତି | Nulla vitae elit libero, a pharetra augue। ପ୍ରଶଂସନୀୟ କମୋଡୋ କର୍ସସ୍ ମ୍ୟାଗନା, ଭେଲ ସ୍କେଲେରିସ୍କ ନିସଲ୍ କନସେକ୍ଟେଟର୍ ଇତ୍ୟାଦି |

  1. <div class = "ଆଲର୍ଟ ଆଲର୍ଟ-ବ୍ଲକ୍" > | 
  2.   <a class = "close" data-dismiss = "alert"> × </a> _  
  3.   <h4 class = "ଆଲର୍ଟ-ହେଡିଙ୍ଗ୍" > ଚେତାବନୀ! </h4> 
  4.   ସର୍ବୋତ୍ତମ ଚେକ୍ ୟୋ ସେଲ୍ଫ, ତୁମେ ନୁହଁ ...
  5. </div>

ବିଷୟବସ୍ତୁ ବିକଳ୍ପଗୁଡ଼ିକ ଏକ ଆଲର୍ଟର ସଂଯୋଗ ପରିବର୍ତ୍ତନ କରିବାକୁ ବ al କଳ୍ପିକ ଶ୍ରେଣୀଗୁଡିକ ଯୋଡନ୍ତୁ |

ତ୍ରୁଟି କିମ୍ବା ବିପଦ |

× ହେ ସ୍ନାପ୍! କିଛି ଜିନିଷ ପରିବର୍ତ୍ତନ କରନ୍ତୁ ଏବଂ ପୁନର୍ବାର ଦାଖଲ କରିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ | 
  1. <div class = "ଆଲର୍ଟ ଆଲର୍ଟ-ଏରର୍" > | 
  2.   ...
  3. </div>

ସଫଳତା |

× ବହୁତ ବଢିଆ! ଆପଣ ସଫଳତାର ସହିତ ଏହି ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ଆଲର୍ଟ ବାର୍ତ୍ତା ପ read ନ୍ତି | 
  1. <div class = "ଆଲର୍ଟ ଆଲର୍ଟ-ସଫଳତା" > | 
  2.   ...
  3. </div>

ସୂଚନା

× ମୁଣ୍ଡ ଉପରକୁ! ଏହି ସତର୍କତା ଆପଣଙ୍କ ଧ୍ୟାନ ଆବଶ୍ୟକ କରେ, କିନ୍ତୁ ଏହା ଅତ୍ୟନ୍ତ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ନୁହେଁ | 
  1. <div class = "ଆଲର୍ଟ ଆଲର୍ଟ-ସୂଚନା" > | 
  2.   ...
  3. </div>

ଅଗ୍ରଗତି ଦଣ୍ଡଗୁଡ଼ିକ ଲୋଡିଂ, ପୁନ ir ନିର୍ଦ୍ଦେଶ, କିମ୍ବା କାର୍ଯ୍ୟ ସ୍ଥିତି ପାଇଁ |

ଉଦାହରଣ ଏବଂ ମାର୍କଅପ୍ |

ମ Basic ଳିକ

ଏକ ଭୂଲମ୍ବ ଗ୍ରେଡିଏଣ୍ଟ୍ ସହିତ ଡିଫଲ୍ଟ ପ୍ରଗତି ଦଣ୍ଡିକା |

  1. <div ଶ୍ରେଣୀ = "ପ୍ରଗତି" > | 
  2.   <div ଶ୍ରେଣୀ = "ଦଣ୍ଡିକା" 
  3.        style = " ମୋଟେଇ : 60 %; " > </div> | 
  4. </div>

ଷ୍ଟ୍ରାଇଡ୍

ଏକ ଷ୍ଟ୍ରାଇଡ୍ ଇଫେକ୍ଟ ସୃଷ୍ଟି କରିବାକୁ ଏକ ଗ୍ରେଡିଏଣ୍ଟ୍ ବ୍ୟବହାର କରେ |

  1. <div class = "ପ୍ରଗତି-ସୂଚନା | 
  2.      ପ୍ରଗତି-ଷ୍ଟ୍ରାଇଡ୍ " >
  3.   <div ଶ୍ରେଣୀ = "ଦଣ୍ଡିକା" 
  4.        style = " ମୋଟେଇ : 20 %; " > </div> | 
  5. </div>

ଆନିମେଟେଡ୍ |

ଷ୍ଟ୍ରାଇଡ୍ ଉଦାହରଣ ନେଇ ଏହାକୁ ଆନିମେସନ୍ କରେ |

  1. <div class = "ପ୍ରଗତି-ବିପଦ | 
  2.      ପ୍ରଗତି-ଷ୍ଟ୍ରାଇଡ୍ ସକ୍ରିୟ " > |
  3.   <div ଶ୍ରେଣୀ = "ଦଣ୍ଡିକା" 
  4.        style = " ମୋଟେଇ : 40 %; " > </div> | 
  5. </div>

ବିକଳ୍ପ ଏବଂ ବ୍ରାଉଜର୍ ସମର୍ଥନ |

ଅତିରିକ୍ତ ରଙ୍ଗ |

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

  • .progress-info
  • .progress-success
  • .progress-danger

ବ ly କଳ୍ପିକ ଭାବରେ, ଆପଣ LESS ଫାଇଲଗୁଡ଼ିକୁ କଷ୍ଟମାଇଜ୍ କରିପାରିବେ ଏବଂ ନିଜର ରଙ୍ଗ ଏବଂ ଆକାର ଗୁଡ଼ାଇ ପାରିବେ |

ବ୍ୟବହାର

ପ୍ରଗତି ଦଣ୍ଡଗୁଡ଼ିକ CSS3 ସ୍ଥାନାନ୍ତରଣ ବ୍ୟବହାର କରେ, ତେଣୁ ଯଦି ଆପଣ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ମୋଟେଇକୁ ଗତିଶୀଳ ଭାବରେ ଆଡଜଷ୍ଟ କରନ୍ତି, ତେବେ ଏହା ସହଜରେ ପରିବର୍ତ୍ତନ ହେବ |

ଯଦି ଆପଣ .activeକ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତି, ଆପଣଙ୍କର .progress-stripedପ୍ରଗତି ଦଣ୍ଡଗୁଡିକ ବାମରୁ ଡାହାଣକୁ ଷ୍ଟ୍ରାଇପ୍ କରିବ |

ବ୍ରାଉଜର୍ ସମର୍ଥନ

ପ୍ରଗତି ବାରଗୁଡ଼ିକ ସେମାନଙ୍କର ସମସ୍ତ ପ୍ରଭାବ ହାସଲ କରିବାକୁ CSS3 ଗ୍ରେଡିଏଣ୍ଟ୍, ଟ୍ରାନ୍ସସାଇନ୍ସ ଏବଂ ଆନିମେସନ୍ ବ୍ୟବହାର କରନ୍ତି | ଏହି ବ features ଶିଷ୍ଟ୍ୟଗୁଡିକ IE7-8 କିମ୍ବା ଫାୟାରଫକ୍ସର ପୁରୁଣା ସଂସ୍କରଣରେ ସମର୍ଥିତ ନୁହେଁ |

ଅପେରା ଏହି ସମୟରେ ଆନିମେସନ୍ କୁ ସମର୍ଥନ କରେନାହିଁ |

ବିବିଧ କୂଅ, ବ୍ୟାଜ୍ ଏବଂ ବନ୍ଦ ଆଇକନ୍ |

କୂଅ

ଏହାକୁ ଏକ ଇନସେଟ ଇଫେକ୍ଟ ଦେବା ପାଇଁ ଏକ ଉପାଦାନ ଉପରେ ଏକ ସରଳ ପ୍ରଭାବ ବ୍ୟବହାର କରନ୍ତୁ |

ଦେଖ, ମୁଁ ଏକ କୂଅରେ ଅଛି! 
  1. <div ଶ୍ରେଣୀ = "ଭଲ" > | 
  2.   ...
  3. </div>

ଆଇକନ୍ ବନ୍ଦ କରନ୍ତୁ |

ମୋଡାଲ୍ ଏବଂ ଆଲର୍ଟ ପରି ବିଷୟବସ୍ତୁକୁ ଖାରଜ କରିବା ପାଇଁ ଜେନେରିକ୍ କ୍ଲୋଜ୍ ଆଇକନ୍ ବ୍ୟବହାର କରନ୍ତୁ |

×

  1. <a class = "close"> & times ; </a>