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

ନାଭିଗେସନ୍, ଆଲର୍ଟ, ପପୋଭର ଏବଂ ଅନେକ କିଛି ଯୋଗାଇବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପରେ ଡଜନେ ପୁନ 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

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

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

ଏକ ବଟନ୍ ଗୋଷ୍ଠୀ ପରି, ଆମର ମାର୍କଅପ୍ ନିୟମିତ ବଟନ୍ ମାର୍କଅପ୍ ବ୍ୟବହାର କରେ, କିନ୍ତୁ ଶ 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>

ବିଷୟରେ

ଏକ ସୂଚକ କିମ୍ବା କିଛି ପ୍ରକାରର ଗଣନା ପାଇଁ ବ୍ୟାଜ୍ ଗୁଡିକ ଛୋଟ, ସରଳ ଉପାଦାନ | ସେଗୁଡିକ ସାଧାରଣତ 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-important">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 class = "thumbnail" > |
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> ଥମ୍ବନେଲ୍ ଲେବଲ୍ </ h5> |
  6. <p> ଥମ୍ବନେଲ୍ କ୍ୟାପସନ୍ ଏଠାରେ ... </p> |
  7. </div>
  8. </ li>
  9. ...
  10. </ul>

ଅଧିକ ଉଦାହରଣ |

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

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

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

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

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

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


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

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

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

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

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

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

ମୁଣ୍ଡ ଉପରକୁ! ଆଇଓଏସ୍ ଡିଭାଇସ୍ href="#"ଆଲର୍ଟ ରଦ୍ଦ ପାଇଁ ଆବଶ୍ୟକ କରେ | ଏହାକୁ ଏବଂ ଆଙ୍କର୍ କ୍ଲୋଜ୍ ଆଇକନ୍ ପାଇଁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ | ବ ly କଳ୍ପିକ ଭାବରେ, ଆପଣ <button>ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ ଏକ ଉପାଦାନ ବ୍ୟବହାର କରିପାରିବେ, ଯାହାକୁ ଆମେ ଆମର ଡକସ୍ ପାଇଁ କରିବାକୁ ପସନ୍ଦ କରିଛୁ | ବ୍ୟବହାର କରିବାବେଳେ <button>, ଆପଣ ନିଶ୍ଚିତ ଭାବରେ ଅନ୍ତର୍ଭୂକ୍ତ type="button"କରିବେ କିମ୍ବା ଆପଣଙ୍କର ଫର୍ମ ଦାଖଲ ହୋଇନପାରେ |

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

ଚେତାବନୀ!

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

  1. <div class = "ଆଲର୍ଟ ଆଲର୍ଟ-ବ୍ଲକ୍" > |
  2. <a class = "close" data-dismiss = "alert" href = "#"> × </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>

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

ମ 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. <ବଟନ୍ ଶ୍ରେଣୀ = "ବନ୍ଦ" > & ସମୟ; </button>

ଯଦି ଆପଣ ଏକ ଆଙ୍କର୍ ବ୍ୟବହାର କରନ୍ତି ତେବେ କ୍ଲିକ୍ ଇଭେଣ୍ଟଗୁଡିକ ପାଇଁ iOS ଉପକରଣଗୁଡ଼ିକ ଏକ href = "#" ଆବଶ୍ୟକ କରେ |

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