ବଟନ୍ ଗୋଷ୍ଠୀ |

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

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

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

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

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

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

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

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

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

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

<div class = "btn-toolbar" > | 
  <div class = "btn-group" > | 
    ...
  </div>
</div>

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

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

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

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

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

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

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

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

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

<div class = "btn-group" > | 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    କାର୍ଯ୍ୟ
    <span class = "caret" > </span> | 
  </a>
  <ul class = "dropdown-menu" > | 
    <! - ଡ୍ରପଡାଉନ୍ ମେନୁ ଲିଙ୍କ୍ -> |
  </ul>
</div>

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

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

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

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

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

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

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

ଆକାରଗୁଡିକ |

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

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

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

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

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

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

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

<div class = "btn-group dropup" > | 
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ଡ୍ରପ୍ଅପ୍ </button> | 
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn ଡ୍ରପଡାଉନ୍-ଟୋଗଲ୍" ଡାଟା-ଟୋଗଲ୍ = "ଡ୍ରପ୍ ଡାଉନ୍" > |  
    <span class = "caret" > </span> | 
  </button>
  <ul class = "dropdown-menu" > | 
    <! - ଡ୍ରପଡାଉନ୍ ମେନୁ ଲିଙ୍କ୍ -> |
  </ul>
</div>

ଶକ୍ତିଶାଳୀ ବେସ୍ କ୍ଲାସ୍ |

ଏଠାରେ ଥିବା ସମସ୍ତ ନାଭ୍ ଉପାଦାନଗୁଡ଼ିକ - ଟ୍ୟାବ୍, ବଟିକା, ଏବଂ ତାଲିକାଗୁଡ଼ିକ - ଶ୍ରେଣୀ ମାଧ୍ୟମରେ ସମାନ ଆଧାର ମାର୍କଅପ୍ ଏବଂ ଶ yles ଳୀ ଅଂଶୀଦାର କରନ୍ତି.nav |

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

ବିଷୟବସ୍ତୁର ବିଭାଗ କିମ୍ବା ସମ୍ବନ୍ଧୀୟ ବିଷୟବସ୍ତୁର ପୃଷ୍ଠାଗୁଡ଼ିକ ମଧ୍ୟରେ ନେଭିଗେଟ୍ କରିବା ପାଇଁ ଟ୍ୟାବ୍ ଏବଂ ବଟିକା ବହୁତ ଭଲ |

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

ନାଭ୍ ଲିଙ୍କ୍ ଆଲାଇନ୍ କରିବାକୁ, .pull-leftକିମ୍ବା .pull-rightୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ | ଉଭୟ ଶ୍ରେଣୀ ନିର୍ଦ୍ଦିଷ୍ଟ ଦିଗରେ ଏକ CSS ଫ୍ଲୋଟ୍ ଯୋଗ କରିବ |

ମ Basic ଳିକ ଟ୍ୟାବଗୁଡ଼ିକ |

ଏକ ନିୟମିତ <ul>ଲିଙ୍କ୍ ନିଅ ଏବଂ ଯୋଗ କର .nav-tabs:

• ଘର
• ପ୍ରୋଫାଇଲ୍
• ବାର୍ତ୍ତାଗୁଡିକ

<ul class = "nav nav-tabs" > | 
  <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > | 
    <a href = "#"> ଘର </a> _ 
  </ li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

ମ Basic ଳିକ ବଟିକା |

ସେହି ସମାନ HTML ନିଅ, କିନ୍ତୁ .nav-pillsଏହା ବଦଳରେ ବ୍ୟବହାର କର:

• ଘର
• ପ୍ରୋଫାଇଲ୍
• ବାର୍ତ୍ତାଗୁଡିକ

<ul class = "nav nav-pills" > | 
  <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > | 
    <a href = "#"> ଘର </a> _ 
  </ li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

କିପରି ଷ୍ଟକ୍ କରିବେ |

.nav-stackedଯେହେତୁ ଟ୍ୟାବ ଏବଂ ବଟିକା ଡିଫଲ୍ଟ ଭାବରେ ଭୂସମାନ୍ତର, କେବଳ ଭୂଲମ୍ବ ଭାବରେ ଷ୍ଟାକ୍ ଦେଖାଯିବା ପାଇଁ କେବଳ ଦ୍ୱିତୀୟ ଶ୍ରେଣୀ ଯୋଡନ୍ତୁ |

ଷ୍ଟାକ୍ ହୋଇଥିବା ଟ୍ୟାବଗୁଡ଼ିକ |

• ଘର
• ପ୍ରୋଫାଇଲ୍
• ବାର୍ତ୍ତାଗୁଡିକ

<ul class = "nav nav-tabs nav-stacked" > | 
  ...
</ul>

ଷ୍ଟକ୍ ବଟିକା |

• ଘର
• ପ୍ରୋଫାଇଲ୍
• ବାର୍ତ୍ତାଗୁଡିକ

<ul class = "nav nav-pills nav-stacked" > | 
  ...
</ul>

ଧନୀ ମେନୁଗୁଡ଼ିକ ସହଜ ହେଲା |

ବୁଟଷ୍ଟ୍ରାପ୍ ଟ୍ୟାବ୍ ଏବଂ ବଟିକା ରେ ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡିକ ଅତି ସହଜ ଏବଂ କେବଳ ଟିକିଏ ଅତିରିକ୍ତ HTML ଏବଂ ହାଲୁକା jQuery ପ୍ଲଗଇନ୍ ଆବଶ୍ୟକ କରେ |

ବୁଟଷ୍ଟ୍ରାପରେ ଡ୍ରପଡାଉନ୍ ଆରମ୍ଭ କରିବା ଉପରେ ଡକସ୍ ପ read ିବା ପାଇଁ ଜାଭାସ୍କ୍ରିପ୍ଟ ପୃଷ୍ଠାକୁ ଯାଆନ୍ତୁ |

ଡ୍ରପଡାଉନ୍ ସହିତ ଟ୍ୟାବ୍ସ |

• ଘର
• ସାହାଯ୍ୟ
• ଡ୍ରପଡାଉନ୍
  • କାର୍ଯ୍ୟ
  • ଅନ୍ୟ ଏକ କାର୍ଯ୍ୟ |
  • ଏଠାରେ ଆଉ କିଛି |
  • ପୃଥକ ଲିଙ୍କ୍ |

<ul class = "nav nav-tabs" > | 
  <li ଶ୍ରେଣୀ = "ଡ୍ରପଡାଉନ୍" > | 
    <a class = "dropdown-toggle" 
       ଡାଟା-ଟୋଗଲ୍ = "ଡ୍ରପଡାଉନ୍"
       href = "#" >
        ଡ୍ରପଡାଉନ୍
        <b class = "caret" > </b> | 
      </a>
    <ul class = "dropdown-menu" > | 
      <! - ଲିଙ୍କ୍ ->
    </ul>
  </ li>
</ul>

ଡ୍ରପଡାଉନ୍ ସହିତ ବଟିକା |

• ଘର
• ସାହାଯ୍ୟ
• ଡ୍ରପଡାଉନ୍
  • କାର୍ଯ୍ୟ
  • ଅନ୍ୟ ଏକ କାର୍ଯ୍ୟ |
  • ଏଠାରେ ଆଉ କିଛି |
  • ପୃଥକ ଲିଙ୍କ୍ |

<ul class = "nav nav-pills" > | 
  <li ଶ୍ରେଣୀ = "ଡ୍ରପଡାଉନ୍" > | 
    <a class = "dropdown-toggle" 
       ଡାଟା-ଟୋଗଲ୍ = "ଡ୍ରପଡାଉନ୍"
       href = "#" >
        ଡ୍��ପଡାଉନ୍
        <b class = "caret" > </b> | 
      </a>
    <ul class = "dropdown-menu" > | 
      <! - ଲିଙ୍କ୍ ->
    </ul>
  </ li>
</ul>

ପ୍ରୟୋଗ-ଶ style ଳୀ ନାଭିଗେସନ୍ |

ବ list କଳ୍ପିକ ହେଡର୍ ସହିତ ନାଭ୍ ଲିଙ୍କ୍ ଗୋଷ୍ଠୀ ଗଠନ ପାଇଁ ନାଭ୍ ତାଲିକା ଏକ ସରଳ ଏବଂ ସହଜ ଉପାୟ ପ୍ରଦାନ କରେ | ସେଗୁଡିକ OS X ରେ ଫାଇଣ୍ଡର୍ ପରି ସାଇଡ୍ ବାର୍ ରେ ସର୍ବୋତ୍ତମ ଭାବରେ ବ୍ୟବହୃତ |

ଗଠନମୂଳକ ଭାବରେ, ସେମାନେ ଟ୍ୟାବ୍ ଏବଂ ବଟିକା ପରି ସମାନ କୋର ନାଭ ଶ yles ଳୀରେ ନିର୍ମିତ, ତେଣୁ ବ୍ୟବହାର ଏବଂ କଷ୍ଟମାଇଜେସନ୍ ସିଧା ଅଟେ |

ଆଇକନ୍ ସହିତ |

ଆଇକନ୍ ସହିତ ସଜାଇବା ପାଇଁ ନାଭ୍ ତାଲିକା ମଧ୍ୟ ସହଜ | ଶ୍ରେଣୀ ସହିତ ଉପଯୁକ୍ତ <i>ଟ୍ୟାଗ୍ ଯୋଡନ୍ତୁ ଏବଂ ଆପଣ ସେଟ୍ ହୋଇଛନ୍ତି |

ଭୂସମାନ୍ତର ବିଭାଜନକାରୀ |

ଶ୍ରେଣୀ ସହିତ ଏକ ଖାଲି ତାଲିକା ଆଇଟମ୍ ସୃଷ୍ଟି କରି ଏକ ଭୂସମାନ୍ତର ଡିଭାଇଡର୍ ଯୋଡନ୍ତୁ .divider:

<ul class = "nav nav-list" > | 
  ...
  <li class = "divider" > </li> 
  ...
</ul>

ଉଦାହରଣ ନାଭ ତାଲିକା |

ଲିଙ୍କଗୁଡିକର ଏକ ତାଲିକା ନିଅ ଏବଂ ଯୋଗ କର class="nav nav-list":

<ul class = "nav nav-list" > | 
  <li class = "nav-header" > | 
    ଶୀର୍ଷଲେଖ ତାଲିକା କର |
  </ li>
  <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > | 
    <a href = "#"> ଘର </a> _ 
  </ li>
  <li>
    <a href = "#"> ଲାଇବ୍ରେରୀ </a> | 
  </ li>
  ...
</ul>

ଆଇକନ୍ ସହିତ ଉଦାହରଣ |

ସମାନ ଉଦାହରଣ, କିନ୍ତୁ <i>ଆଇକନ୍ ପାଇଁ ଟ୍ୟାଗ୍ ସହିତ |

<ul class = "nav nav-list" > | 
  ...
  <li>
    <a href = "#"> _ 
      <i ଶ୍ରେଣୀ = "ଆଇକନ୍-ବୁକ୍" > </i> | 
      ଲାଇବ୍ରେରୀ |
    </a>
  </ li>
  ...
</ul>

ଯାହା ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି |

ଟ୍ୟାବ ମାଧ୍ୟମରେ ବିଷୟବସ୍ତୁ ମଧ୍ୟରେ ଟୋଗଲ୍ କରିବାକୁ ଏକ ସରଳ ପ୍ଲଗଇନ୍ ସହିତ ଆପଣଙ୍କର ଟ୍ୟାବଗୁଡ଼ିକୁ ଜୀବନ୍ତ କରନ୍ତୁ | ବୁଟଷ୍ଟ୍ରାପ୍ ଟ୍ୟାବଲ୍ ଟ୍ୟାବଗୁଡ଼ିକୁ ଚାରୋଟି ଶ yles ଳୀରେ ସଂଯୋଗ କରେ: ଉପର (ଡିଫଲ୍ଟ), ଡାହାଣ, ତଳ ଏବଂ ବାମ |

ସେମାନଙ୍କ ମଧ୍ୟରେ ପରିବର୍ତ୍ତନ କରିବା ସହଜ ଏବଂ କେବଳ ବହୁତ କମ୍ ମାର୍କଅପ୍ ପରିବର୍ତ୍ତନ ଆବଶ୍ୟକ କରେ |

ଟ୍ୟାବଗୁଡ଼ିକରେ ମଳିନ |

ଟ୍ୟାବଗୁଡିକ ଦୁର୍ବଳ ହେବାକୁ, .fadeପ୍ରତ୍ୟେକରେ ଯୋଗ କରନ୍ତୁ .tab-pane|

JQuery ପ୍ଲଗଇନ୍ ଆବଶ୍ୟକ କରେ |

ସମସ୍ତ ଟ୍ୟାବଲ୍ ଟ୍ୟାବଗୁଡ଼ିକ ଆମର ହାଲୁକା jQuery ପ୍ଲଗଇନ୍ ଦ୍ୱାରା ଚାଳିତ | ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକସ୍ ପୃଷ୍ଠାରେ ଟ୍ୟାବବଲ୍ ଟ୍ୟାବଗୁଡ଼ିକୁ କିପରି ଜୀବନ୍ତ କରିବେ ସେ ବିଷୟରେ ଅଧିକ ପ .଼ନ୍ତୁ |

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

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

ଟ୍ୟାବଗୁଡ଼ିକୁ ଟ୍ୟାବଲ୍ କରିବାକୁ, .tab-paneପ୍ରତ୍ୟେକ ଟ୍ୟାବ୍ ପାଇଁ ଏକ ସ୍ୱତନ୍ତ୍ର ID ସହିତ ସୃଷ୍ଟି କରନ୍ତୁ ଏବଂ ସେଗୁଡ଼ିକୁ ଗୁଡ଼ାଇ ରଖନ୍ତୁ .tab-content|

ଡାହାଣ କିମ୍ବା ବାମ ଆଲାଇନ୍ ଟ୍ୟାବଗୁଡ଼ିକ ପାଇଁ, .nav-tabsଏବଂ .tab-contentଗୁଡ଼ାଇ ରଖନ୍ତୁ .tabbable|

ସିଧା ସଳଖ ମାର୍କଅପ୍ |

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

<div class = "tabbable" > <! - କେବଳ ବାମ / ଡାହାଣ ଟ୍ୟାବଗୁଡ଼ିକ ପାଇଁ ଆବଶ୍ୟକ -> |  
  <ul class = "nav nav-tabs" > | 
    <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > <a href = "#tab1" data-toggle = "tab"> ବିଭାଗ 1 </a> </li >   
    <li> <a href = "#tab2" data-toggle = "tab"> ବିଭାଗ 2 </a> </li> |  
  </ul>
  <div ଶ୍ରେଣୀ = "ଟ୍ୟାବ୍-ବିଷୟବସ୍ତୁ" > | 
    <div class = "tab-pane active" id = "tab1" > |  
      <p> ମୁଁ ବିଭାଗ 1 ରେ ଅଛି </ p>
    </div>
    <div class = "tab-pane" id = "tab2" > |  
      <p> Howdy, ମୁଁ ବିଭାଗ 2 ରେ ଅଛି </ p> |
    </div>
  </div>
</div>

ନିମ୍ନରେ ଟ୍ୟାବ୍ସ |

HTML ର କ୍ରମକୁ ଫ୍ଲିପ୍ କରନ୍ତୁ ଏବଂ ତଳେ ଟ୍ୟାବ୍ ରଖିବା ପାଇଁ ଏକ ଶ୍ରେଣୀ ଯୋଡନ୍ତୁ |

<div class = "ଟ୍ୟାବଲ୍ ଟେବୁଲ୍-ତଳେ" > | 
  <div ଶ୍ରେଣୀ = "ଟ୍ୟାବ୍-ବିଷୟବସ୍ତୁ" > | 
    ...
  </div>
  <ul class = "nav nav-tabs" > | 
    ...
  </ul>
</div>

ବାମ ପାର୍ଶ୍ୱରେ ଟ୍ୟାବ୍ସ |

ବାମରେ ଟ୍ୟାବ୍ ରଖିବା ପାଇଁ କ୍ଲାସ୍ ସ୍ୱାପ୍ କରନ୍ତୁ |

<div class = "ଟ୍ୟାବଲ୍ ଟ୍ୟାବ୍-ବାମ" > | 
  <ul class = "nav nav-tabs" > | 
    ...
  </ul>
  <div ଶ୍ରେଣୀ = "ଟ୍ୟାବ୍-ବିଷୟବସ୍ତୁ" > | 
    ...
  </div>
</div>

ଡାହାଣ ପାର୍ଶ୍ୱରେ ଟ୍ୟାବ୍ସ |

ଡାହାଣରେ ଟ୍ୟାବ୍ ରଖିବା ପାଇଁ କ୍ଲାସ୍ ସ୍ୱାପ୍ କରନ୍ତୁ |

<div class = "ଟ୍ୟାବବଲ୍ ଟ୍ୟାବ୍ସ-ଡାହାଣ" > | 
  <ul class = "nav nav-tabs" > | 
    ...
  </ul>
  <div ଶ୍ରେଣୀ = "ଟ୍ୟାବ୍-ବିଷୟବସ୍ତୁ" > | 
    ...
  </div>
</div>

ନାଭବାର୍ ସ୍କାଫୋଲ୍ଡିଂ |

ଷ୍ଟାଟିକ୍ କିମ୍ବା ଫିକ୍ସଡ୍ ଡିସପ୍ଲେ ପାଇଁ ଏହାକୁ ଭଲ ଭାବରେ ଗଠନ କରିବା ପାଇଁ ନାଭବାର୍ କେବଳ କିଛି ଡିଭ୍ ଆବଶ୍ୟକ କରେ |

<div class = "navbar" > | 
  <div class = "navbar-inner" > | 
    <div class = "ପାତ୍ର" > | 
      ...
    </div>
  </div>
</div>

ସ୍ଥିର ନାଭବାର୍ |

ବାହ୍ୟ ଡିଭରେ ଅତିରିକ୍ତ ଶ୍ରେଣୀ ସହିତ ଭ୍ୟୁପୋର୍ଟର ଉପର କିମ୍ବା ତଳଭାଗରେ ନାଭବାର୍ ଫିକ୍ସ କରନ୍ତୁ , .navbar।

<div class = "navbar navbar-fixed-top" > | 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > | 
  ...
</div>

ଯେତେବେଳେ ଆପଣ ନାଭବାର୍ ଆଫିକ୍ସ କରନ୍ତି, ତଳେ ଥିବା ଲୁକ୍କାୟିତ କ୍ଷେତ୍ର ପାଇଁ ହିସାବ ରଖିବାକୁ ମନେରଖ | ଏଥିରେ 40px କିମ୍ବା ଅଧିକ ପ୍ୟାଡିଂ ଯୋଡନ୍ତୁ <body>| କୋର୍ ବୁଟଷ୍ଟ୍ରାପ୍ CSS ପରେ ଏବଂ ଇଚ୍ଛାଧୀନ ପ୍ରତିକ୍ରିୟାଶୀଳ CSS ପୂର୍ବରୁ ଏହାକୁ ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

ବ୍ରାଣ୍ଡ ନାମ

ତୁମର ବ୍ରାଣ୍ଡ କିମ୍ବା ପ୍ରୋଜେକ୍ଟ ନାମ ଦେଖାଇବାକୁ ଏକ ସରଳ ଲିଙ୍କ୍ କେବଳ ଏକ ଆଙ୍କର୍ ଟ୍ୟାଗ୍ ଆବଶ୍ୟକ କରେ |

<a class = "brand" href = "#"> _  
  ପ୍ରକଳ୍ପ ନାମ
</a>

ନାଭବାର୍ ରେ ଫର୍ମଗୁଡିକ |

ନାଭବାର୍ ମଧ୍ୟରେ ଏକ ଫର୍ମକୁ ସଠିକ୍ ଭାବରେ ଶ style ଳୀ ଏବଂ ଅବସ୍ଥାନ କରିବାକୁ, ନିମ୍ନରେ ଦେଖାଯାଇଥିବା ପରି ଉପଯୁକ୍ତ ଶ୍ରେଣୀଗୁଡିକ ଯୋଡନ୍ତୁ | ଏକ ଡିଫଲ୍ଟ ଫର୍ମ ପାଇଁ, ଏହାକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ କିମ୍ବା .navbar-formସଠିକ୍ ଭାବରେ ଆଲାଇନ୍ କରନ୍ତୁ |.pull-left.pull-right

<form class = "navbar-form pull-left" > | 
  <ଇନପୁଟ୍ ପ୍ରକାର = "ପାଠ୍ୟ" ଶ୍ରେଣୀ = "span2" > |  
</form>

ଅଧିକ କଷ୍ଟୋମାଇଜ୍ ହୋଇଥିବା ସନ୍ଧାନ ଫର୍ମ ପାଇଁ, ନାଭବାରରେ ବିଶେଷ ଶ yles ଳୀ ପାଇଁ ଏବଂ ଇନପୁଟ୍ ସହିତ .navbar-searchଯୋଡନ୍ତୁ form|.search-query

<form class = "navbar-search pull-left" > | 
  <ଇନପୁଟ୍ ପ୍ରକାର = "ପାଠ୍ୟ" ଶ୍ରେଣୀ = "ସନ୍ଧାନ-ଜିଜ୍ଞାସା" ସ୍ଥାନଧାରୀ = "ସନ୍ଧାନ" > |   
</form>

ବ tion କଳ୍ପିକ ପ୍ରତିକ୍ରିୟାଶୀଳ ପରିବର୍ତ୍ତନ |

ତୁମର ଟପ୍ ବାର୍ ରେ ଥିବା ବିଷୟବସ୍ତୁର ପରିମାଣ ଉପରେ ନିର୍ଭର କରି, ଆପଣ ପ୍ରତିକ୍ରିୟାଶୀଳ ବିକଳ୍ପଗୁଡ଼ିକୁ କାର୍ଯ୍ୟକାରୀ କରିବାକୁ ଚାହିଁପାରନ୍ତି | ଏହା କରିବା ପାଇଁ, ଆପଣଙ୍କର ନାଭ୍ ବିଷୟବସ୍ତୁକୁ ଏକ ଡିଭରେ ଧାରଣ .nav-collapse.collapseକରନ୍ତୁ, ଏବଂ ନାଭବାର୍ ଟୋଗଲ୍ ବଟନ୍ ଯୋଡନ୍ତୁ , .btn-navbar।

<div class = "navbar" > | 
  <div class = "navbar-inner" > | 
    <div class = "ପାତ୍ର" > | 
 
      <! - .btn-navbar ନଷ୍ଟ ହୋଇଯାଇଥିବା ନାଭବାର୍ ବିଷୟବସ୍ତୁ ପାଇଁ ଟୋଗଲ୍ ଭାବରେ ବ୍ୟବହୃତ ହୁଏ -> |
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse">   
        <span class = "icon-bar" > </span> | 
        <span class = "icon-bar" > </span> | 
        <span class = "icon-bar" > </span> | 
      </a>
 
      <! - ଯଦି ଆପଣ ଏହା ଦେଖାଇବାକୁ ଚାହାଁନ୍ତି ତେବେ ବ୍ରାଣ୍ଡକୁ ସେଠାରେ ଛାଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
      <a class = "brand" href = "#"> ପ୍ରକଳ୍ପ ନାମ </a>  
 
      <! - ଆପଣ ଚାହୁଁଥିବା ସମସ୍ତ ଜିନିଷ 940px କିମ୍ବା ତା’ଠାରୁ କମ୍, ଏଠାରେ ରଖନ୍ତୁ -> |
      <div class = "nav-collapse" > | 
        <! - .nav, .navbar-search, .navbar-form, ଇତ୍ୟାଦି -> |
      </div>
 
    </div>
  </div>
</div>

ନାଭ୍ ଲିଙ୍କ୍ |

ନାଭ ଆଇଟମଗୁଡିକ ଅଣସଂରକ୍ଷିତ ତାଲିକା ମାଧ୍ୟମରେ ଯୋଡିବା ସରଳ |

<ul class = "nav" > | 
  <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > | 
    <a href = "#"> ଘର </a> _ 
  </ li>
  <li> <a href = "#"> ଲିଙ୍କ୍ </a> </li> | 
  <li> <a href = "#"> ଲିଙ୍କ୍ </a> </li> | 
</ul>

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

<ul class = "nav" > | 
  ...
  <li class = "divider-vertical" > </li> | 
  ...
</ul>

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

ଏକ ନାଭ୍, ସନ୍ଧାନ ଫର୍ମ, କିମ୍ବା ପାଠ୍ୟକୁ ଆଲାଇନ୍ କରିବାକୁ, .pull-leftକିମ୍ବା .pull-rightୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ | ଉଭୟ ଶ୍ରେଣୀ ନିର୍ଦ୍ଦିଷ୍ଟ ଦିଗରେ ଏକ CSS ଫ୍ଲୋଟ୍ ଯୋଗ କରିବ |

ଡ୍ରପଡାଉନ୍ ମେନୁ ଯୋଗକରିବା |

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

<ul class = "nav" > | 
  <li ଶ୍ରେଣୀ = "ଡ୍ରପଡାଉନ୍" > | 
    <a href = "#" 
          ଶ୍ରେଣୀ = "ଡ୍ରପଡାଉନ୍-ଟୋଗଲ୍"
          ଡାଟା-ଟୋଗଲ୍ = "ଡ୍ରପ୍ ଡାଉନ୍" > |
          ଖାତା
          <b class = "caret" > </b> | 
    </a>
    <ul class = "dropdown-menu" > | 
      ...
    </ul>
  </ li>
</ul>

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

ନାଭବାର୍ ରେ ଟେକ୍ସଟ୍ |

ଟେକ୍ସଟ୍ ର ଷ୍ଟ୍ରିଙ୍ଗ୍ ଗୁଡିକ <.navbar-text>ସାଧାରଣତ <p>proper ସଠିକ୍ ଅଗ୍ରଣୀ ଏବଂ ରଙ୍ଗ ପାଇଁ ଏକ ଟ୍ୟାଗ୍ ଉପରେ ଗୁଡ଼ାନ୍ତୁ |

କାହିଁକି ବ୍ୟବହାର କର |

ଉପଭୋକ୍ତାମାନଙ୍କୁ ଦେଖାଇବା ପାଇଁ ବ୍ରେଡ୍କ୍ରମ୍ ନେଭିଗେସନ୍ ଏକ ଉପାୟ ଭାବରେ ବ୍ୟବହୃତ ହୁଏ ଯେଉଁଠାରେ ସେମାନେ ଏକ ଆପ୍ କିମ୍ବା ସାଇଟ୍ ମଧ୍ୟରେ ଅଛନ୍ତି, କିନ୍ତୁ ପ୍ରାଥମିକ ନାଭିଗେସନ୍ ପାଇଁ ନୁହେଁ | ଅଧିକ ପ୍ରଭାବଶାଳୀ ହେବା ପାଇଁ ସେମାନଙ୍କର ବ୍ୟବହାରକୁ ଅଳ୍ପ ଏବଂ ସ୍ୱଚ୍ଛ ରଖନ୍ତୁ |

ଉଦାହରଣଗୁଡିକ

ଏକାଧିକ ପୃଷ୍ଠାରେ ପ୍ରଦର୍ଶିତ ହୋଇପାରେ ପରି ଏକ ଉଦାହରଣ |

• ଘର

• ଘର /
• ଲାଇବ୍ରେରୀ |

• ଘର /
• ଲାଇବ୍ରେରୀ /
• ତଥ୍ୟ

ମାର୍କଅପ୍ |

ଲିଙ୍କ୍ ସହିତ HTML ହେଉଛି ଆପଣଙ୍କର ମାନକ ଅଣସଂରକ୍ଷିତ ତାଲିକା |

<ul ଶ୍ରେଣୀ = "ରୁଟି ଖଣ୍ଡ" > | 
  <li>
    <a href = "#"> ଘର </a> <span class = "divider" > / </span> |   
  </ li>
  <li>
    <a href = "#"> ଲାଇବ୍ରେରୀ </a> <span class = "divider" > / </span> |   
  </ li>
  <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > ତଥ୍ୟ </ li> | 
</ul>

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

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

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

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

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

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

ଉଦାହରଣଗୁଡିକ

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

ମାର୍କଅପ୍ |

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

<div ଶ୍ରେଣୀ = "ପୃଷ୍ଠା" > | 
  <ul>
    <li> <a href = "#"> ପୂର୍ବ </a> </li> | 
    <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > | 
      <a href = "#"> 1 </a> _ 
    </ li>
    <li> <a href = "#"> 2 </a> </li> | 
    <li> <a href = "#"> 3 </a> </li> 
    <li> <a href = "#"> 4 </a> </li> 
    <li> <a href = "#"> ପରବର୍ତ୍ତୀ </a> </li> | 
  </ul>
</div>

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

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

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

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

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

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

• ପୂର୍ବ
• ପରବର୍ତ୍ତୀ

<ul ଶ୍ରେଣୀ = "ପେଜର୍" > | 
  <li>
    <a href = "#"> ପୂର୍ବ </a> _ 
  </ li>
  <li>
    <a href = "#"> ପରବର୍ତ୍ତୀ </a> _ 
  </ li>
</ul>

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

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

• ← ପୁରାତନ
• ନୂତନ →

<ul ଶ୍ରେଣୀ = "ପେଜର୍" > | 
  <li ଶ୍ରେଣୀ = "ପୂର୍ବ" > | 
    <a href = "#"> & larr ; ପୁରୁଣା </a> 
  </ li>
  <li ଶ୍ରେଣୀ = "ପରବର୍ତ୍ତୀ" > | 
    <a href = "#"> ନୂତନ & rarr ; </a> 
  </ li>
</ul>

ବିଷୟରେ

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

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

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

ମାର୍କଅପ୍ |

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

<div class = "ହିରୋ-ୟୁନିଟ୍" > | 
  <h1> ହେଡିଙ୍ଗ୍ </ h1> |
  <p> ଟ୍ୟାଗଲାଇନ୍ </ p> |
  <p>
    <a class = "btn btn-primary btn-large"> 
      ଅଧିକ ସିଖନ୍ତୁ
    </a>
  </p>
</div>

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

<div class = "page-header" > | 
  <h1> ଉଦାହରଣ ପୃଷ୍ଠା ଶୀର୍ଷକ </ h1> |
</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

ମାର୍କଅପ୍ |

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

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

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

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

ଅଧିକ ଉଦାହରଣ |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class = "ଆଲର୍ଟ ଆଲର୍ଟ-ଏରର୍" > | 
  ...
</div>

ସଫଳତା |

<div class = "ଆଲର୍ଟ ଆଲର୍ଟ-ସଫଳତା" > | 
  ...
</div>

ସୂଚନା

<div class = "ଆଲର୍ଟ ଆଲର୍ଟ-ସୂଚନା" > | 
  ...
</div>

ମ Basic ଳିକ

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

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

ଷ୍ଟ୍ରାଇଡ୍

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

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

ଆନିମେଟେଡ୍ |

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

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

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

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

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

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

ବ୍ୟବହାର

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

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

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

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

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

କୂଅ

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

<div ଶ୍ରେଣୀ = "ଭଲ" > | 
  ...
</div>

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

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

×

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

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

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