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

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

ଉଦାହରଣଗୁଡିକ

ଦୁଇଟି ମ basic ଳିକ ବିକଳ୍ପ, ଆହୁରି ଦୁଇଟି ନିର୍ଦ୍ଦିଷ୍ଟ ପରିବର୍ତ୍ତନ ସହିତ |

ଏକକ ବଟନ୍ ଗୋଷ୍ଠୀ |

.btnସହିତ ଏକ ବଟନ୍ ଗୁଡ଼ିକୁ ଗୁଡ଼ାଇ ରଖ .btn-group|

  1. <div class = "btn-group" > |
  2. <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ବାମ </button> |
  3. <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ମଧ୍ୟମ </button> |
  4. <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ଡାହାଣ </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>

ଭୂଲମ୍ବ ବଟନ୍ ଗୋଷ୍ଠୀ |

ଭୂସମାନ୍ତରାଳ ପରିବର୍ତ୍ତେ ଭୂଲମ୍ବ ଭାବରେ ଷ୍ଟାକ୍ ହୋଇଥିବା ବଟନ୍ଗୁଡ଼ିକର ଏକ ସେଟ୍ ପ୍ରସ୍ତୁତ କରନ୍ତୁ |

  1. <div class = "btn-group btn-group-vertical" > |
  2. ...
  3. </div>

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

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

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

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

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

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

  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 ଶିଷ୍ଟ୍ୟ କରେ |

  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>

ଆକାରଗୁଡିକ |

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

  1. <div class = "btn-group" > |
  2. <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-mini" > କାର୍ଯ୍ୟ </button> |
  3. <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  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 ଦ୍ୱାରା ଅନୁପ୍ରାଣିତ ସରଳ ପୃଷ୍ଠା, ଆପ୍ ଏବଂ ସନ୍ଧାନ ଫଳାଫଳ ପାଇଁ ଉତ୍ତମ | ବୃହତ ବ୍ଲକକୁ ହରାଇବା କଷ୍ଟକର, ସହଜରେ ମାପନୀୟ, ଏବଂ ବଡ଼ କ୍ଲିକ୍ କ୍ଷେତ୍ରଗୁଡିକ ପ୍ରଦାନ କରେ |

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

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

ଅକ୍ଷମ ଏବଂ ସକ୍ରିୟ ଅବସ୍ଥା |

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

  1. <div ଶ୍ରେଣୀ = "ପୃଷ୍ଠା" > |
  2. <ul>
  3. <li ଶ୍ରେଣୀ = "ଅକ୍ଷମ" > <a href = "#"> & laquo; </a> </li>
  4. <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > <a href = "#"> 1 </a> </li> |
  5. ...
  6. </ul>
  7. </div>

ଉଦ୍ଦିଷ୍ଟ ଶ yles ଳୀଗୁଡିକ ବଜାୟ ରଖିବାବେଳେ କ୍ଲିକ୍ କାର୍ଯ୍ୟକଳାପକୁ ଅପସାରଣ କରିବା ପାଇଁ ଆପଣ ବ ally କଳ୍ପିକ ଭାବରେ ସକ୍ରିୟ କିମ୍ବା ଅକ୍ଷମ ଆଙ୍କର୍ଗୁଡ଼ିକୁ ଅଦଳବଦଳ କରିପାରିବେ |

  1. <div ଶ୍ରେଣୀ = "ପୃଷ୍ଠା" > |
  2. <ul>
  3. <li ଶ୍ରେଣୀ = "ଅକ୍ଷମ" > <ସ୍ପାନ୍> & laquo; </span> </li>
  4. <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > <ସ୍ପାନ୍> 1 </span> </li> |
  5. ...
  6. </ul>
  7. </div>

ଆକାରଗୁଡିକ |

ବଡ଼ ବା ଛୋଟ ପୃଷ୍ଠା କଳ୍ପନା? ଯୋଡନ୍ତୁ .pagination-large, .pagination-smallକିମ୍ବା .pagination-miniଅତିରିକ୍ତ ଆକାର ପାଇଁ |

  1. <div class = "pagination pagination-large" > |
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div ଶ୍ରେଣୀ = "ପୃଷ୍ଠା" > |
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "ପୃଷ୍ଠା ପୃଷ୍ଠା-ଛୋଟ" > |
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" > |
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

ଶ୍ରେଣୀବଦ୍ଧତା |

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

  1. <div class = "ପୃଷ୍ଠା ପୃଷ୍ଠା-କେନ୍ଦ୍ରିତ" > |
  2. ...
  3. </div>
  1. <div class = "ପୃଷ୍ଠା ପୃଷ୍ଠା-ଡାହାଣ" > |
  2. ...
  3. </div>

ପେଜର୍ |

ହାଲୁକା ମାର୍କଅପ୍ ଏବଂ ଶ yles ଳୀ ସହିତ ସରଳ ପୃଷ୍ଠା ପ୍ରୟୋଗ ପାଇଁ ଶୀଘ୍ର ପୂର୍ବ ଏବଂ ପରବର୍ତ୍ତୀ ଲିଙ୍କ୍ | ବ୍ଲଗ୍ କିମ୍ବା ପତ୍ରିକା ପରି ସରଳ ସାଇଟ୍ ପାଇଁ ଏହା ବହୁତ ଭଲ |

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

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

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

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

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

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

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

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

  1. <ul ଶ୍ରେଣୀ = "ପେଜର୍" > |
  2. <li ଶ୍ରେଣୀ = "ପୂର୍ବ ଅକ୍ଷମ" > |
  3. <a href = "#"> & larr ; ପୁରୁଣା </a>
  4. </ li>
  5. ...
  6. </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>

ବ୍ୟାଜ୍

ନାମ ଉଦାହରଣ | ମାର୍କଅପ୍ |
ଡିଫଲ୍ଟ | <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>

ସହଜରେ ଭୁଶୁଡ଼ିବା |

ସହଜ କାର୍ଯ୍ୟାନ୍ୱୟନ ପାଇଁ, ଲେବଲ୍ ଏବଂ ବ୍ୟାଜ୍ କେବଳ (CSS ର :emptyଚୟନକର୍ତ୍ତା ମାଧ୍ୟମରେ) ନଷ୍ଟ ହୋଇଯିବ ଯେତେବେଳେ କ content ଣସି ବିଷୟବସ୍ତୁ ଭିତରେ ନଥାଏ |

ହିରୋ ୟୁନିଟ୍ |

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

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

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

ଅଧିକ ସିଖନ୍ତୁ

  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>

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

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

  1. <div class = "page-header" > |
  2. <h1> ଉଦାହରଣ ପୃଷ୍ଠା ହେଡର୍ <small> ହେଡର୍ ପାଇଁ ସବ୍ ଟେକ୍ସଟ୍ </small> </h1> |
  3. </div>

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

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

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

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

  • 300x200

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

    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।

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

  • 300x200

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

    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।

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

  • 300x200

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

    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 ଶ୍ରେଣୀ = "span4" > |
  3. <a href = "#" class = "thumbnail"> |
  4. <img data-src = "holder.js / 300x200" alt = "" > |
  5. </a>
  6. </ li>
  7. ...
  8. </ul>

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

  1. <ul ଶ୍ରେଣୀ = "ଥମ୍ na ନେଲ୍" > |
  2. <li ଶ୍ରେଣୀ = "span4" > |
  3. <div class = "thumbnail" > |
  4. <img data-src = "holder.js / 300x200" alt = "" > |
  5. <h3> ଥମ୍ବନେଲ୍ ଲେବଲ୍ </ h3> |
  6. <p> ଥମ୍ବନେଲ୍ କ୍ୟାପସନ୍ ... </p> |
  7. </div>
  8. </ li>
  9. ...
  10. </ul>

ଅଧିକ ଉଦାହରଣ |

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

ଡିଫଲ୍ଟ ଆଲର୍ଟ |

.alertଏକ ମ basic ଳିକ ଚେତାବନୀ ଆଲର୍ଟ ବାର୍ତ୍ତା ପାଇଁ ଯେକ any ଣସି ପାଠ୍ୟ ଏବଂ ଏକ ଇଚ୍ଛାଧୀନ ବହିଷ୍କାର ବଟନ୍ ଗୁଡ଼ାଇ ରଖନ୍ତୁ |

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

ବଟନ୍ଗୁଡ଼ିକୁ ବରଖାସ୍ତ କରନ୍ତୁ |

ମୋବାଇଲ୍ ସଫାରି ଏବଂ ମୋବାଇଲ୍ ଅପେରା ବ୍ରାଉଜର୍, data-dismiss="alert"ଗୁଣ ସହିତ, ଏକ ଟ୍ୟାଗ୍ href="#"ବ୍ୟବହାର କରିବା ସମୟରେ ଆଲର୍ଟ ରଦ୍ଦ ପାଇଁ ଏକ ଆବଶ୍ୟକ କରେ |<a>

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

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

  1. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "ବନ୍ଦ" ଡାଟା-ଖାରଜ = "ସତର୍କ" > & ସମୟ; </button>

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଆଲର୍ଟକୁ ବରଖାସ୍ତ କରନ୍ତୁ |

ଆଲର୍ଟଗୁଡିକର ଶୀଘ୍ର ଏବଂ ସହଜ ଖାରଜ ପାଇଁ ଆଲର୍ଟ jQuery ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରନ୍ତୁ |


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

ଅଧିକ ବାର୍ତ୍ତା ପାଇଁ, ଯୋଗ କରି ଆଲର୍ଟ ରାପରର ଉପର ଏବଂ ତଳ ଭାଗରେ ପ୍ୟାଡିଂ ବ increase ାନ୍ତୁ .alert-block|

ଚେତାବନୀ!

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

  1. <div class = "ଆଲର୍ଟ ଆଲର୍ଟ-ବ୍ଲକ୍" > |
  2. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "ବନ୍ଦ" ଡାଟା-ଖାରଜ = "ସତର୍କ" > & ସମୟ; </button>
  3. <h4> ଚେତାବନୀ! </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 class = "bar" style = " width : 60 %; " > </div>
  3. </div>

ଷ୍ଟ୍ରାଇଡ୍

ଏକ ଷ୍ଟ୍ରାଇଡ୍ ଇଫେକ୍ଟ ସୃଷ୍ଟି କରିବାକୁ ଏକ ଗ୍ରେଡିଏଣ୍ଟ୍ ବ୍ୟବହାର କରେ | IE7-8 ରେ ଉପଲବ୍ଧ ନାହିଁ |

  1. <div class = "ପ୍ରଗତି-ଷ୍ଟ୍ରାଇଡ୍" > |
  2. <div class = "bar" style = " width : 20 %; " > </div>
  3. </div>

ଆନିମେଟେଡ୍ |

ଡାହାଣରୁ ବାମକୁ ଷ୍ଟ୍ରାଇପ୍ ଆନିମେସନ୍ କରିବାକୁ .activeଯୋଡନ୍ତୁ | .progress-stripedIE ର ସମସ୍ତ ସଂସ୍କରଣରେ ଉପଲବ୍ଧ ନାହିଁ |

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

ଷ୍ଟାକ୍ ହୋଇଛି |

.progressସେଗୁଡିକୁ ଷ୍ଟକ୍ କରିବା ପାଇଁ ଏକାଧିକ ବାର୍ ସମାନ ସ୍ଥାନରେ ରଖନ୍ତୁ |

  1. <div ଶ୍ରେଣୀ = "ପ୍ରଗତି" > |
  2. <div class = "bar bar-success" style = " width : 35 %; " > </div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " > </div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " > </div>
  5. </div>

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

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

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

  1. <div ଶ୍ରେଣୀ = "ପ୍ରଗତି ପ୍ରଗତି-ସୂଚନା" > |
  2. <div class = "bar" style = " width : 20 % " > </div> |
  3. </div>
  4. <div ଶ୍ରେଣୀ = "ପ୍ରଗତି-ସଫଳତା" > |
  5. <div class = "bar" style = " width : 40 % " > </div> |
  6. </div>
  7. <div ଶ୍ରେଣୀ = "ପ୍ରଗତି-ଚେତାବନୀ" > |
  8. <div class = "bar" style = " width : 60 % " > </div> |
  9. </div>
  10. <div ଶ୍ରେଣୀ = "ପ୍ରଗତି-ବିପଦ" > |
  11. <div class = "bar" style = " width : 80 % " > </div> |
  12. </div>

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

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

  1. <div ଶ୍ରେଣୀ = "ପ୍ରଗତି ପ୍ରଗତି-ସୂଚନା ପ୍ରଗତି-ଷ୍ଟ୍ରାଇଡ୍" > |
  2. <div class = "bar" style = " width : 20 % " > </div> |
  3. </div>
  4. <div ଶ୍ରେଣୀ = "ପ୍ରଗତି-ସଫଳତା ପ୍ରଗତି-ଷ୍ଟ୍ରାଇଡ୍" > |
  5. <div class = "bar" style = " width : 40 % " > </div> |
  6. </div>
  7. <div ଶ୍ରେଣୀ = "ପ୍ରଗତି-ଚେତାବନୀ ପ୍ରଗତି-ଷ୍ଟ୍ରାଇଡ୍" > |
  8. <div class = "bar" style = " width : 60 % " > </div> |
  9. </div>
  10. <div ଶ୍ରେଣୀ = "ପ୍ରଗତି-ବିପଦ ପ୍ରଗତି-ଷ୍ଟ୍ରାଇଡ୍" > |
  11. <div class = "bar" style = " width : 80 % " > </div> |
  12. </div>

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

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

ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 10 ଏବଂ ଅପେରା 12 ଠାରୁ ପୂର୍ବ ସଂସ୍କରଣ ଆନିମେସନ୍ କୁ ସମର୍ଥନ କରେନାହିଁ |

ବିଭିନ୍ନ ପ୍ରକାରର ଉପାଦାନ ଗଠନ ପାଇଁ ବିସ୍ତୃତ ଅବଜେକ୍ଟ ଶ yles ଳୀ (ଯେପରିକି ବ୍ଲଗ୍ ମନ୍ତବ୍ୟ, ଟ୍ୱିଟ୍ ଇତ୍ୟାଦି) ଯାହା ପାଠ୍ୟ ବିଷୟବସ୍ତୁ ସହିତ ଏକ ବାମ କିମ୍ବା ଡାହାଣ-ଆଲାଇନ୍ ଇମେଜ୍ ବ feature ଶିଷ୍ଟ୍ୟ କରେ |

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

ଡିଫଲ୍ଟ ମିଡିଆ ଏକ ବିଷୟବସ୍ତୁ ଅବରୋଧର ବାମ କିମ୍ବା ଡାହାଣକୁ ଏକ ମିଡିଆ ବସ୍ତୁ (ପ୍ରତିଛବି, ଭିଡିଓ, ଅଡିଓ) ଭାସିବାକୁ ଅନୁମତି ଦିଏ |

64x64

ମିଡିଆ ହେଡିଙ୍ଗ୍ |

ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin commodo | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |
64x64

ମିଡିଆ ହେଡିଙ୍ଗ୍ |

ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin commodo | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |
64x64

ମିଡିଆ ହେଡିଙ୍ଗ୍ |

ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin commodo | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |
  1. <div ଶ୍ରେଣୀ = "ମିଡିଆ" > |
  2. <a class = "pull-left" href = "#"> _
  3. <img class = "media-object" data-src = "holder.js / 64x64" > |
  4. </a>
  5. <div class = "media-body" > |
  6. <h4 ଶ୍ରେଣୀ = "ମିଡିଆ-ହେଡିଙ୍ଗ୍" > ମିଡିଆ ହେଡିଙ୍ଗ୍ </ h4> |
  7. ...
  8.  
  9. <! - ନେଷ୍ଟେଡ୍ ମିଡିଆ ବସ୍ତୁ -> |
  10. <div ଶ୍ରେଣୀ = "ମିଡିଆ" > |
  11. ...
  12. </div>
  13. </div>
  14. </div>

ମିଡିଆ ତାଲିକା |

ଟିକିଏ ଅତିରିକ୍ତ ମାର୍କଅପ୍ ସହିତ, ଆପଣ ତାଲିକା ଭିତରେ ମିଡିଆ ବ୍ୟବହାର କରିପାରିବେ (ମନ୍ତବ୍ୟ ସୂତ୍ର କିମ୍ବା ପ୍ରବନ୍ଧ ତାଲିକା ପାଇଁ ଉପଯୋଗୀ) |

  • 64x64

    ମିଡିଆ ହେଡିଙ୍ଗ୍ |

    ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin commodo | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ |

    64x64

    ନେଷ୍ଟେଡ୍ ମିଡିଆ ହେଡିଙ୍ଗ୍ |

    ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin commodo | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ |
    64x64

    ନେଷ୍ଟେଡ୍ ମିଡିଆ ହେଡିଙ୍ଗ୍ |

    ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin commodo | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ |
    64x64

    ନେଷ୍ଟେଡ୍ ମିଡିଆ ହେଡିଙ୍ଗ୍ |

    ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin commodo | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ |
  • 64x64

    ମିଡିଆ ହେଡିଙ୍ଗ୍ |

    ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin commodo | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ |
  1. <ul class = "ମିଡିଆ-ତାଲିକା" > |
  2. <li ଶ୍ରେଣୀ = "ମିଡିଆ" > |
  3. <a class = "pull-left" href = "#"> _
  4. <img class = "media-object" data-src = "holder.js / 64x64" > |
  5. </a>
  6. <div class = "media-body" > |
  7. <h4 ଶ୍ରେଣୀ = "ମିଡିଆ-ହେଡିଙ୍ଗ୍" > ମିଡିଆ ହେଡିଙ୍ଗ୍ </ h4> |
  8. ...
  9.  
  10. <! - ନେଷ୍ଟେଡ୍ ମିଡିଆ ବସ୍ତୁ -> |
  11. <div ଶ୍ରେଣୀ = "ମିଡିଆ" > |
  12. ...
  13. </div>
  14. </div>
  15. </ li>
  16. </ul>

କୂଅ

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

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

ବ classes କଳ୍ପିକ ଶ୍ରେଣୀଗୁଡିକ |

ଦୁଇଟି ଇଚ୍ଛାଧୀନ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ସହିତ ପ୍ୟାଡିଂ ଏବଂ ଗୋଲାକାର କୋଣଗୁଡ଼ିକୁ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |

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

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

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

  1. <ବଟନ୍ ଶ୍ରେଣୀ = "ବନ୍ଦ" > & ସମୟ; </button>

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

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

ହେଲପର କ୍ଲାସ୍ |

ଛୋଟ ପ୍ରଦର୍ଶନ କିମ୍ବା ଆଚରଣ ଟ୍ୱିକ୍ସ ପାଇଁ ସରଳ, ଧ୍ୟାନ ଶ୍ରେଣୀଗୁଡିକ |

.ପଲ୍-ବାମ

ଏକ ଉପାଦାନ ଛାଡିଦିଅ |

  1. ଶ୍ରେଣୀ = "ଟାଣ-ବାମ"
  1. ଟାଣ - ବାମ {
  2. ଭାସମାନ : ବାମ ;
  3. }

.ପଲ୍-ଡାହାଣ |

ଏକ ଉପାଦାନକୁ ଫ୍ଲୋଟ୍ କରନ୍ତୁ |

  1. ଶ୍ରେଣୀ = "ଟାଣ-ଡାହାଣ"
  1. ଟାଣ - ଡାହାଣ {
  2. ଭାସମାନ : ଡାହାଣ ;
  3. }

.ମ୍ୟୁଟେଡ୍

ଏକ ଉପାଦାନର ରଙ୍ଗ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |#999

  1. ଶ୍ରେଣୀ = "ନିରବ"
  1. ମ୍ୟୁଟେଡ୍ {
  2. ରଙ୍ଗ : # 999;
  3. }

.clearfix

ଯେକ floatany ଣସି ଉପାଦାନ ଉପରେ ସଫା କର |

  1. class = "clearfix"
  1. କ୍ଲିୟରଫିକ୍ସ {
  2. * ଜୁମ୍ : 1 ;
  3. &: ପୂର୍ବରୁ ,
  4. &: ପରେ {
  5. ପ୍ରଦର୍ଶନ : ଟେବୁଲ୍ ;
  6. ବିଷୟବସ୍ତୁ : "" ;
  7. }
  8. &: ପରେ {
  9. ସଫା : ଉଭୟ ;
  10. }
  11. }