ଉଦାହରଣ |

ଲିଙ୍କଗୁଡିକର ତାଲିକା ପ୍ରଦର୍ଶନ ପାଇଁ ଟୋଗଲ୍ ଯୋଗ୍ୟ, ପ୍ରସଙ୍ଗଗତ ମେନୁ | ଡ୍ରପଡାଉନ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ଇଣ୍ଟରାକ୍ଟିଭ୍ ତିଆରି |

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li> <a tabindex = "-1" href = "#"> କାର୍ଯ୍ୟ </a> </li> |  
  <li> <a tabindex = "-1" href = "#"> ଅନ୍ୟ ଏକ କାର୍ଯ୍ୟ </a> </li> |  
  <li> <a tabindex = "-1" href = "#"> ଏଠାରେ ଆଉ କିଛି ଅଛି </a> </li>  
  <li class = "divider" > </li> 
  <li> <a tabindex = "-1" href = "#"> ପୃଥକ ଲିଙ୍କ୍ </a> </li> |  
</ul>

ମାର୍କଅପ୍ |

କେବଳ ଡ୍ରପଡାଉନ୍ ମେନୁକୁ ଦେଖିଲେ, ଏଠାରେ ଆବଶ୍ୟକ HTML | ଆପଣଙ୍କୁ ଡ୍ରପଡାଉନ୍ ର ଟ୍ରିଗର ଏବଂ ଡ୍ରପଡାଉନ୍ ମେନୁକୁ ଘୋଡ଼ାଇବାକୁ ପଡିବ .dropdown, କିମ୍ବା ଘୋଷଣା କରୁଥିବା ଅନ୍ୟ ଏକ ଉପାଦାନ position: relative;| ତା’ପରେ କେବଳ ମେନୁ ସୃଷ୍ଟି କରନ୍ତୁ |

<div class = "dropdown" > | 
  <! - ଡ୍ରପଡାଉନ୍ ଟୋଗଲ୍ କରିବାକୁ ଲିଙ୍କ୍ କିମ୍ବା ବଟନ୍ -> |
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li> <a tabindex = "-1" href = "#"> କାର୍ଯ୍ୟ </a> </li> |  
    <li> <a tabindex = "-1" href = "#"> ଅନ୍ୟ ଏକ କାର୍ଯ୍ୟ </a> </li> |  
    <li> <a tabindex = "-1" href = "#"> ଏଠାରେ ଆଉ କିଛି ଅଛି </a> </li>  
    <li class = "divider" > </li> 
    <li> <a tabindex = "-1" href = "#"> ପୃଥକ ଲିଙ୍କ୍ </a> </li> |  
  </ul>
</div>

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

ମେନୁଗୁଡ଼ିକୁ ଡାହାଣକୁ ଆଲାଇନ୍ କରନ୍ତୁ ଏବଂ ଡ୍ରପ୍ ଡାଉନ୍ ର ଅତିରିକ୍ତ ସ୍ତର ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |

ମେନୁଗୁଡ଼ିକୁ ଆଲାଇନ୍ କରିବା |

ଡ୍ରପଡାଉନ୍ ମେନୁକୁ ଡାହାଣକୁ ଆଲାଇନ୍ .pull-rightକରିବାକୁ ଏକ ଯୋଡନ୍ତୁ |.dropdown-menu

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

ଅକ୍ଷମ ମେନୁ ବିକଳ୍ପଗୁଡ଼ିକ |

ଲିଙ୍କ୍ ଅକ୍ଷମ କରିବାକୁ ଡ୍ରପଡାଉନ୍ ରେ .disabledଏକ ଯୋଗ କରନ୍ତୁ |<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li> <a tabindex = "-1" href = "#"> ନିୟମିତ ଲିଙ୍କ୍ </a> </li> |  
  <li ଶ୍ରେଣୀ = "ଅକ୍ଷମ" > <a tabindex = "-1" href = "#"> ଅକ୍ଷମ ଲିଙ୍କ୍ </a> </li> |   
  <li> <a tabindex = "-1" href = "#"> ଅନ୍ୟ ଏକ ଲିଙ୍କ୍ </a> </li> |  
</ul>

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

କିଛି ସରଳ ମାର୍କଅପ୍ ଆଡିଶନ୍ ସହିତ OS X ପରି ହୋଭରରେ ଦେଖାଯାଉଥିବା ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡ଼ିକର ଏକ ଅତିରିକ୍ତ ସ୍ତର ଯୋଡନ୍ତୁ | ସ୍ୱୟଂଚାଳିତ ଷ୍ଟାଇଲିଂ ପାଇଁ ଏକ ବିଦ୍ୟମାନ ଡ୍ରପଡାଉନ୍ ମେନୁରେ ଯେକ .dropdown-submenuany ଣସିକୁ ଯୋଡନ୍ତୁ |li

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > | 
    <a tabindex = "-1" href = "#"> ଅଧିକ ବିକଳ୍ପ </a> |  
    <ul class = "dropdown-menu" > | 
      ...
    </ul>
  </ li>
</ul>

ଉଦାହରଣଗୁଡିକ

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

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

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

<div class = "btn-group" > | 
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ବାମ </button> | 
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ମଧ୍ୟମ </button> | 
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ଡାହାଣ </button> | 
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ଆକାରଗୁଡିକ |

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

<div class = "btn-group" > | 
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-mini" > କାର୍ଯ୍ୟ </button> | 
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <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 |

ମ 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>

ଅକ୍ଷମ ଅବସ୍ଥା |

ଯେକ any ଣସି ନାଭ୍ ଉପାଦାନ ପାଇଁ (ଟ୍ୟାବ୍, ବଟିକା, କିମ୍ବା ତାଲିକା), ଧୂସର ଲିଙ୍କ୍ .disabledପାଇଁ ଯୋଗ କରନ୍ତୁ ଏବଂ କ ho ଣସି ହୋଭର ପ୍ରଭାବ ନାହିଁ | ଲିଙ୍କଗୁଡିକ କ୍ଲିକ୍ ଯୋଗ୍ୟ ରହିବ, ଯଦିଓ, ଆପଣ ଗୁଣବତ୍ତା ଅପସାରଣ ନକରନ୍ତି href| ବ ly କଳ୍ପିକ ଭାବରେ, ସେହି କ୍ଲିକ୍ଗୁଡ଼ିକୁ ରୋକିବା ପାଇଁ ଆପଣ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ କାର୍ଯ୍ୟକାରୀ କରିପାରିବେ |

<ul class = "nav nav-pills" > | 
  ...
  <li ଶ୍ରେଣୀ = "ଅକ୍ଷମ" > <a href = "#"> ଘର </a> </li> |  
  ...
</ul>

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

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

ଷ୍ଟାକେବଲ୍ |

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

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

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

ଷ୍ଟକ୍ ବଟିକା |

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

ଡ୍ରପଡାଉନ୍

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

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

<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>

ନାଭ ତାଲିକା |

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

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

ଲିଙ୍କଗୁଡିକର ଏକ ତାଲିକା ନିଅ ଏବଂ ଯୋଗ କର 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>

ଧ୍ୟାନ ଦିଅନ୍ତୁଏକ ନାଭ ତାଲିକାରେ ବସା ବାନ୍ଧିବା ପାଇଁ, ଯେକ class="nav nav-list"any ଣସି ନାଷ୍ଟରେ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ <ul>|

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

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

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

ଟ୍ୟାବଲ୍ ନେଭ୍ |

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

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

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

<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>

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

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

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

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

ଯେକ direction ଣସି ଦିଗରେ ଟ୍ୟାବଲ୍ |

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

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>

ମ Basic ଳିକ ନାଭବାର୍ |

ଆରମ୍ଭ କରିବାକୁ, ନାଭବର୍ ଗୁଡିକ ସ୍ଥିର (ଶୀର୍ଷରେ ସ୍ଥିର ନୁହେଁ) ଏବଂ ଏକ ପ୍ରୋଜେକ୍ଟ ନାମ ଏବଂ ମ basic ଳିକ ନାଭିଗେସନ୍ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ଗୋଟିଏ ଭିତରେ ଯେକ anywhere ଣସି ସ୍ଥାନରେ ରଖନ୍ତୁ .container, ଯାହା ଆପଣଙ୍କର ସାଇଟ୍ ଏବଂ ବିଷୟବସ୍ତୁର ମୋଟେଇ ସେଟ୍ କରେ |

<div class = "navbar" > | 
  <div class = "navbar-inner" > | 
    <a class = "brand" href = "#"> ଆଖ୍ୟା </a> _  
    <ul class = "nav" > | 
      <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > <a href = "#"> ଘର </a> </li> |  
      <li> <a href = "#"> ଲିଙ୍କ୍ </a> </li> | 
      <li> <a href = "#"> ଲିଙ୍କ୍ </a> </li> | 
    </ul>
  </div>
</div>

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

ବ୍ରାଣ୍ଡ

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

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

ନାଭ୍ ଲିଙ୍କ୍ |

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

<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>

ଫର୍ମଗୁଡିକ

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

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

ସନ୍ଧାନ ଫର୍ମ |

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

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

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

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

ଡ୍ରପଡାଉନ୍ ବ୍ୟବହାର କରି |

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

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

ଅଧିକ ମାର୍କଅପ୍ ଏବଂ ଡ୍ରପ୍ ଡାଉନ୍ କଲ୍ ବିଷୟରେ ସୂଚନା ପାଇଁ ଜାଭାସ୍କ୍ରିପ୍ଟ ଡ୍ରପଡାଉନ୍ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ପରିଦର୍ଶନ କରନ୍ତୁ |

ପାଠ

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

ବ tion କଳ୍ପିକ ପ୍ରଦର୍ଶନ ଭିନ୍ନତା |

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

ଶୀର୍ଷକୁ ସ୍ଥିର କରାଯାଇଛି |

.navbar-fixed-topଏଥିରେ ଅତି କମରେ 40px ଯୋଗ କରି ଏହାର ତଳେ ଥିବା ଲୁକ୍କାୟିତ କ୍ଷେତ୍ର ପାଇଁ ଆକାଉଣ୍ଟ୍ paddingଯୋଡନ୍ତୁ ଏବଂ ମନେରଖନ୍ତୁ <body>| କୋର୍ ବୁଟଷ୍ଟ୍ରାପ୍ CSS ପରେ ଏବଂ ଇଚ୍ଛାଧୀନ ପ୍ରତିକ୍ରିୟାଶୀଳ CSS ପୂର୍ବରୁ ଏହାକୁ ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

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

ତଳ ପର୍ଯ୍ୟନ୍ତ ସ୍ଥିର ହୋଇଛି |

.navbar-fixed-bottomଏହା ବଦଳରେ ଯୋଡନ୍ତୁ |

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

ଷ୍ଟାଟିକ୍ ଟପ୍ ନାଭବାର୍ |

ଏକ ପୂର୍ଣ୍ଣ-ଓସାର ନାଭବାର୍ ସୃଷ୍ଟି କରନ୍ତୁ ଯାହା ଯୋଗ କରି ପୃଷ୍ଠା ସହିତ ସ୍କ୍ରୋଲ୍ କରେ .navbar-static-top| କ୍ଲାସ୍ ପରି .navbar-fixed-top, ଆପଣ କ any ଣସି ପ୍ୟାଡିଂ ପରିବର୍ତ୍ତନ କରିବା ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ body|

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

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

ଏକ ଭୁଶୁଡ଼ୁଥିବା ପ୍ରତିକ୍ରିୟାଶୀଳ ନାଭବାରକୁ କାର୍ଯ୍ୟକାରୀ କରିବା ପାଇଁ, ଆପଣଙ୍କର ନାଭବାର ବିଷୟବସ୍ତୁକୁ ଏକ ଧାରଣ କରିଥିବା ଡିଭରେ ଗୁଡ଼ାଇ ରଖନ୍ତୁ .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>

ଓଲଟା ପରିବର୍ତ୍ତନ |

ଯୋଗ କରି ନାଭବାରର ଲୁକକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ .navbar-inverse|

<div class = "navbar navbar-inverse" > | 
  ...
</div>

ଉଦାହରଣଗୁଡିକ

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

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

ମାନକ ପୃଷ୍ଠା

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

<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 = "#"> 5 </a> </li> 
    <li> <a href = "#"> ପରବର୍ତ୍ତୀ </a> </li> | 
  </ul>
</div>

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

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

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

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

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

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

ଆକାରଗୁଡିକ |

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

<div class = "pagination pagination-large" > | 
  <ul>
    ...
  </ul>
</div>
<div ଶ୍ରେଣୀ = "ପୃଷ୍ଠା" > | 
  <ul>
    ...
  </ul>
</div>
<div class = "ପୃଷ୍ଠା ପୃଷ୍ଠା-ଛୋଟ" > | 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > | 
  <ul>
    ...
  </ul>
</div>

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

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

<div class = "ପୃଷ୍ଠା ପୃଷ୍ଠା-କେନ୍ଦ୍ରିତ" > | 
  ...
</div>

<div class = "ପୃଷ୍ଠା ପୃଷ୍ଠା-ଡାହାଣ" > | 
  ...
</div>

ପେଜର୍ |

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

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

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

<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>

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

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

<ul ଶ୍ରେଣୀ = "ପେଜର୍" > | 
  <li ଶ୍ରେଣୀ = "ପୂର୍ବ ଅକ୍ଷମ" > | 
    <a href = "#"> & larr ; ପୁରୁଣା </a> 
  </ li>
  ...
</ul>

ଲେବଲ୍ |

ବ୍ୟାଜ୍

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

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

ହିରୋ ୟୁନିଟ୍ |

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

<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> ଉଦାହରଣ ପୃଷ୍ଠା ହେଡର୍ <small> ହେଡର୍ ପାଇଁ ସବ୍ ଟେକ୍ସଟ୍ </small> </h1> |
</div>

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

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

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

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

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

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

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

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

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

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

ମାର୍କଅପ୍ |

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

<ul ଶ୍ରେଣୀ = "ଥମ୍ na ନେଲ୍" > | 
  <li ଶ୍ରେଣୀ = "span4" > | 
    <a href = "#" class = "thumbnail"> |  
      <img data-src = "holder.js / 300x200" alt = "" > |  
    </a>
  </ li>
  ...
</ul>

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

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

ଅଧିକ ଉଦାହରଣ |

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class = "ଆଲର୍ଟ ଆଲର୍ଟ-ବ୍ଲକ୍" > | 
  <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "ବନ୍ଦ" ଡାଟା-ଖାରଜ = "ସତର୍କ" > & ସମୟ; </button>   
  <h4> ଚେତାବନୀ! </h4>
  ସର୍ବୋତ୍ତମ ଚେକ୍ ୟୋ ସେଲ୍ଫ, ତୁମେ ନୁହଁ ...
</div>

ପ୍ରସଙ୍ଗଗତ ବିକଳ୍ପ |

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

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

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

ସଫଳତା |

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

ସୂଚନା

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

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

ମ Basic ଳିକ

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

<div ଶ୍ରେଣୀ = "ପ୍ରଗତି" > | 
  <div class = "bar" style = " width : 60 %; " > </div>   
</div>

ଷ୍ଟ୍ରାଇଡ୍

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

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

ଆନିମେଟେଡ୍ |

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

<div class = "ପ୍ରଗତି-ଷ୍ଟ୍ରାଇଡ୍ ସକ୍ରିୟ" > | 
  <div class = "bar" style = " width : 40 %; " > </div>   
</div>

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

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

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

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

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

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

<div ଶ୍ରେଣୀ = "ପ୍ରଗତି ପ୍ରଗତି-ସୂଚନା" > | 
  <div class = "bar" style = " width : 20 % " > </div> |   
</div>
<div ଶ୍ରେଣୀ = "ପ୍ରଗତି-ସଫଳତା" > | 
  <div class = "bar" style = " width : 40 % " > </div> |   
</div>
<div ଶ୍ରେଣୀ = "ପ୍ରଗତି-ଚେତାବନୀ" > | 
  <div class = "bar" style = " width : 60 % " > </div>   
</div>
<div ଶ୍ରେଣୀ = "ପ୍ରଗତି-ବିପଦ" > | 
  <div class = "bar" style = " width : 80 % " > </div> |   
</div>

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

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

<div ଶ୍ରେଣୀ = "ପ୍ରଗତି ପ୍ରଗତି-ସୂଚନା ପ୍ରଗତି-ଷ୍ଟ୍ରାଇଡ୍" > | 
  <div class = "bar" style = " width : 20 % " > </div> |   
</div>
<div ଶ୍ରେଣୀ = "ପ୍ରଗତି-ସଫଳତା ପ୍ରଗତି-ଷ୍ଟ୍ରାଇଡ୍" > | 
  <div class = "bar" style = " width : 40 % " > </div> |   
</div>
<div ଶ୍ରେଣୀ = "ପ୍ରଗତି-ଚେତାବନୀ ପ୍ରଗତି-ଷ୍ଟ୍ରାଇଡ୍" > | 
  <div class = "bar" style = " width : 60 % " > </div>   
</div>
<div ଶ୍ରେଣୀ = "ପ୍ରଗତି-ବିପଦ ପ୍ରଗତି-ଷ୍ଟ୍ରାଇଡ୍" > | 
  <div class = "bar" style = " width : 80 % " > </div> |   
</div>

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

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

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

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

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

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

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

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

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

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

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

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

<div ଶ୍ରେଣୀ = "ମିଡିଆ" > | 
  <a class = "pull-left" href = "#"> _  
    <img class = "media-object" data-src = "holder.js / 64x64" > |  
  </a>
  <div class = "media-body" > | 
    <h4 ଶ୍ରେଣୀ = "ମିଡିଆ-ହେଡିଙ୍ଗ୍" > ମିଡିଆ ହେଡିଙ୍ଗ୍ </ h4> | 
    ...
 
    <! - ନେଷ୍ଟେଡ୍ ମିଡିଆ ବସ୍ତୁ -> |
    <div ଶ୍ରେଣୀ = "ମିଡିଆ" > | 
      ...
    </div>
  </div>
</div>

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

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

<ul class = "ମିଡିଆ-ତାଲିକା" > | 
  <li ଶ୍ରେଣୀ = "ମିଡିଆ" > | 
    <a class = "pull-left" href = "#"> _  
      <img class = "media-object" data-src = "holder.js / 64x64" > |  
    </a>
    <div class = "media-body" > | 
      <h4 ଶ୍ରେଣୀ = "ମିଡିଆ-ହେଡିଙ୍ଗ୍" > ମିଡିଆ ହେଡିଙ୍ଗ୍ </ h4> | 
      ...
 
      <! - ନେଷ୍ଟେଡ୍ ମିଡିଆ ବସ୍ତୁ -> |
      <div ଶ୍ରେଣୀ = "ମିଡିଆ" > | 
        ...
     </div>
    </div>
  </ li>
</ul>

କୂଅ

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

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

ବ tion କଳ୍ପିକ କ୍ଲାସ୍ |

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

<div class = "ଭଲ-ବଡ" > | 
  ...
</div>

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

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

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

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

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

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

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

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

.ପଲ୍-ବାମ

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

ଶ୍ରେଣୀ = "ଟାଣ-ବାମ"

। ଟାଣ - ବାମ {
  ଭାସମାନ : ବାମ ;
}

.ପଲ୍-ଡାହାଣ |

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

ଶ୍ରେଣୀ = "ଟାଣ-ଡାହାଣ"

। ଟାଣ - ଡାହାଣ {
  ଭାସମାନ : ଡାହାଣ ;
}

.ମ୍ୟୁଟେଡ୍

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

ଶ୍ରେଣୀ = "ନିରବ"

। ମ୍ୟୁଟେଡ୍ {
  ରଙ୍ଗ : # 999; 
}

.clearfix

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

class = "clearfix"

। କ୍ଲିୟରଫିକ୍ସ {
  * ଜୁମ୍ : 1 ; 
  &: ପୂର୍ବରୁ ,
  &: ପରେ {
    ପ୍ରଦର୍ଶନ : ଟେବୁଲ୍ ;
    ବିଷୟବସ୍ତୁ : "" ; 
  }
  &: ପରେ {
    ସଫା : ଉଭୟ ;
  }
}