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

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

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

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

ବଟନ୍ ଗୋଷ୍ଠୀ |

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

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

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

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

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

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

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

  1. <div class = "btn-group" > | 
  2.   <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > 1 </button> | 
  3.   <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > 2 </button> | 
  4.   <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > 3 </button> | 
  5. </div>

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

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

  1. <div class = "btn-toolbar" > | 
  2.   <div class = "btn-group" > | 
  3.     ...
  4.   </div>
  5. </div>

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

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

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

ବଟନ୍ ଗୋଷ୍ଠୀରେ ଡ୍ରପ୍ ଡାଉନ୍ |

ମୁଣ୍ଡ ଉପରକୁ! ସଠିକ୍ ରେଣ୍ଡରିଂ ପାଇଁ ଡ୍ରପଡାଉନ୍ ସହିତ ବଟନ୍ ଗୁଡିକ ବ୍ୟକ୍ତିଗତ ଭାବରେ ନିଜେ ଗୁଡ଼ାଇ ହେବା ଜରୁରୀ .btn-group|.btn-toolbar

ବଟନ୍ ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁଗୁଡ଼ିକ ବିଷୟବସ୍ତୁ ମେନୁ ଯୋଗାଇବା ପାଇଁ ବଟନ୍ ଗୋଷ୍ଠୀ ଉପରେ ନିର୍ମିତ |

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

ସମୀକ୍ଷା ଏବଂ ଉଦାହରଣ |

ଏକ ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁକୁ ଏକ ଭିତରେ ରଖି .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>

ସମସ୍ତ ବଟନ୍ ଆକାର ସହିତ କାମ କରେ |

ବଟନ୍ ଡ୍ରପଡାଉନ୍ ଯେକ size ଣସି ଆକାରରେ କାମ କରେ | ଆପଣଙ୍କର ବଟନ୍ ଆକାର .btn-large, .btn-smallକିମ୍ବା .btn-mini।

ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରେ |

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

କେତେକ କ୍ଷେତ୍ରରେ, ମୋବାଇଲ୍ ପରି - ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡ଼ିକ ଭ୍ୟୁପୋର୍ଟ ବାହାରେ ବିସ୍ତାର ହେବ | ଆପଣ ଆଲାଇନ୍ମେଣ୍ଟକୁ ହସ୍ତକୃତ କିମ୍ବା କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ ସମାଧାନ କରିବା ଆବଶ୍ୟକ କରନ୍ତି |


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

ସମୀକ୍ଷା ଏବଂ ଉଦାହରଣ |

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

ଆକାରଗୁଡିକ |

ଅତିରିକ୍ତ ବଟନ୍ କ୍ଲାସ୍ .btn-mini, .btn-smallକିମ୍ବା ଆକାର .btn-largeପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |

  1. <div class = "btn-group" > | 
  2.   ...
  3.   <ul class = "dropdown-menu pull-right" > | 
  4.     <! - ଡ୍ରପଡାଉନ୍ ମେନୁ ଲିଙ୍କ୍ -> |
  5.   </ul>
  6. </div>

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

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

  1. <div class = "btn-group" > | 
  2.   <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > କାର୍ଯ୍ୟ </button> | 
  3.   <ବଟନ୍ ଶ୍ରେଣୀ = "btn ଡ୍ରପଡାଉନ୍-ଟୋଗଲ୍" ଡାଟା-ଟୋଗଲ୍ = "ଡ୍ରପ୍ ଡାଉନ୍" > |  
  4.     <span class = "caret" > </span> | 
  5.   </button>
  6.   <ul class = "dropdown-menu" > | 
  7.     <! - ଡ୍ରପଡାଉନ୍ ମେନୁ ଲିଙ୍କ୍ -> |
  8.   </ul>
  9. </div>

ଡ୍ରପ୍ଅପ୍ ମେନୁଗୁଡ଼ିକ

ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡିକ ମଧ୍ୟ ତତକ୍ଷଣାତ୍ ପିତାମାତାଙ୍କୁ ଗୋଟିଏ ଶ୍ରେଣୀ ଯୋଗ କରି ତଳରୁ ଉପର ପର୍ଯ୍ୟନ୍ତ ଟୋଗଲ୍ କରାଯାଇପାରିବ .dropdown-menu| ଏହା ଉପର ଦିଗକୁ .caretତଳୁ ଉପର ଆଡ଼କୁ ଗତି କରିବା ପାଇଁ ମେନୁକୁ ପୁନ osition ସ୍ଥାପିତ କରିବ |

  1. <div class = "btn-group dropup" > | 
  2.   <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ଡ୍ରପ୍ଅପ୍ </button> | 
  3.   <ବଟନ୍ ଶ୍ରେଣୀ = "btn ଡ୍ରପଡାଉନ୍-ଟୋଗଲ୍" ଡାଟା-ଟୋଗଲ୍ = "ଡ୍ରପ୍ ଡାଉନ୍" > |  
  4.     <span class = "caret" > </span> | 
  5.   </button>
  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 ଳୀ ସହିତ ସରଳ ପୃଷ୍ଠା ପ୍ରୟୋଗ ପାଇଁ ଲିଙ୍କଗୁଡ଼ିକର ଏକ ସେଟ୍ | ବ୍ଲଗ୍ କିମ୍ବା ପତ୍ରିକା ପରି ସରଳ ସାଇଟ୍ ପାଇଁ ଏହା ବହୁତ ଭଲ |

ବ tion କଳ୍ପିକ ଅକ୍ଷମ ଅବସ୍ଥା |

ପେଜର୍ ଲିଙ୍କଗୁଡିକ ପେଜିନ୍ ଠାରୁ ସାଧାରଣ .disabledଶ୍ରେଣୀ ମଧ୍ୟ ବ୍ୟବହାର କରେ |

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

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

  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>
ଓଲଟା <span class="label label-inverse">Inverse</span>

ବ୍ୟାଜ୍ ସୂଚକ ଏବଂ ପ read ା ଗଣନା |

ବିଷୟରେ

ଏକ ସୂଚକ କିମ୍ବା କିଛି ପ୍ରକାରର ଗଣନା ପାଇଁ ବ୍ୟାଜ୍ ଗୁଡିକ ଛୋଟ, ସରଳ ଉପାଦାନ | ସେଗୁଡିକ ସାଧାରଣତ Mail ମେଲ୍.ଆପ୍ ପରି ଇମେଲ୍ କ୍ଲାଏଣ୍ଟରେ କିମ୍ବା ପୁସ୍ ବିଜ୍ଞପ୍ତି ପାଇଁ ମୋବାଇଲ୍ ଆପରେ ମିଳିଥାଏ |

ଉପଲବ୍ଧ କ୍ଲାସ୍ |

ନାମ ଉଦାହରଣ | ମାର୍କଅପ୍ |
ଡିଫଲ୍ଟ | ୧ <span class="badge">1</span>
ସଫଳତା | ୨ <span class="badge badge-success">2</span>
ଚେତାବନୀ 4 <span class="badge badge-warning">4</span>
ତ୍ରୁଟି | 6 <span class="badge badge-error">6</span>
ସୂଚନା 8 <span class="badge badge-info">8</span>
ଓଲଟା ୧୦ <span class="badge badge-inverse">10</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-header" > | 
  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 ଶ୍ରେଣୀ = "ଥମ୍ na ନେଲ୍" > | 
  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>

ଷ୍ଟ୍ରାଇଡ୍

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

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

ଆନିମେଟେଡ୍ |

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

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

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

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

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

ଷ୍ଟ୍ରାଇଡ୍ ବାର୍ |

କଠିନ ରଙ୍ଗ ପରି, ଆମେ ବିଭିନ୍ନ ପ୍ରକାରର ଷ୍ଟ୍ରାଇଡ୍ ପ୍ରଗତି ଦଣ୍ଡିକା |

ବ୍ୟବହାର

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

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

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

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

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

ବିବିଧ ହାଲୁକା ଓଜନ ଉପଯୋଗୀ ଉପାଦାନଗୁଡ଼ିକ |

କୂଅ

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

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

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

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

×

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