ଶିରୋନାମା

ସମସ୍ତ HTML ହେଡିଙ୍ଗ୍, <h1>ମାଧ୍ୟମରେ <h6>ଉପଲବ୍ଧ |

h1 ହେଡିଙ୍ଗ୍ 1

h2। ହେଡିଙ୍ଗ୍ 2

h3। ଶୀର୍ଷଲେଖ 3

h4। ହେଡିଙ୍ଗ୍ 4

h5। ହେଡିଙ୍ଗ୍ 5

h6। ହେଡିଙ୍ଗ୍ 6

ଶରୀର କପି |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଗ୍ଲୋବାଲ୍ ଡିଫଲ୍ଟ font-sizeହେଉଛି 14px , 20pxline-height ସହିତ | ଏହା ଏବଂ ସମସ୍ତ ପାରାଗ୍ରାଫ୍ ପାଇଁ ପ୍ରୟୋଗ କରାଯାଏ | ଏହା ସହିତ, (ପାରାଗ୍ରାଫ୍) ସେମାନଙ୍କର ଲାଇନ୍-ଉଚ୍ଚତାର ଅଧା ମାର୍ଜିନ (ଡିଫଲ୍ଟ ଭାବରେ 10px) ଗ୍ରହଣ କରେ |<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridulus mus। Nullam id dolor id nibh ଅଲଟ୍ରିକସ୍ ଯାନବାହାନ |

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridulus mus। ଡୋନେକ୍ ଉଲାମକର୍ପର୍ ନୁଲା ନନ୍ ମେଟସ୍ ଆକ୍ଟର ଫ୍ରିଙ୍ଗିଲା | ଡୁଇସ୍ ମଲିସ୍, ଇଷ୍ଟ ନନ୍ କମୋଡୋ ଲକ୍ଟସ୍, ନିସି ଏରାଟ ପୋର୍ଟଟିଟର୍ ଲିଗୁଲା, ଇଜେଟ୍ ଲାସିନିଆ ଓଡିଓ ସେମ ନେକ୍ ଏଲିଟ୍ | ଡୋନେକ୍ ଉଲାମକର୍ପର୍ ନୁଲା ନନ୍ ମେଟସ୍ ଆକ୍ଟର ଫ୍ରିଙ୍ଗିଲା |

ମେକେନାସ୍ ସେଡ୍ ହୀରା ରିଜେଟ୍ ଭେରସ୍ ବ୍ଲାଣ୍ଡିଟ୍ ଆମ୍ ନନ୍ ମାଗନା | Eget metus ରେ Donec id elit non mi porta gravida | ଡୁଇସ୍ ମଲିସ୍, ଇଷ୍ଟ ନନ୍ କମୋଡୋ ଲକ୍ଟସ୍, ନିସି ଏରାଟ ପୋର୍ଟଟିଟର୍ ଲିଗୁଲା, ଇଜେଟ୍ ଲାସିନିଆ ଓଡିଓ ସେମ ନେକ୍ ଏଲିଟ୍ |

<p> ... </p>

ଲିଡ୍ ବଡି କପି |

ଯୋଗ କରି ଏକ ପାରାଗ୍ରାଫ୍ ଛିଡା କର .lead|

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor | Duis mollis, est non commodo luctus |

<p class = "lead" > ... </p>

କମ୍ ସହିତ ନିର୍ମିତ |

ଟାଇପୋଗ୍ରାଫିକ୍ ସ୍କେଲ୍ ଭେରିଏବଲ୍.ଲେସ୍ ରେ ଦୁଇଟି LESS ଭେରିଏବଲ୍ @baseFontSizeଉପରେ ଆଧାରିତ @baseLineHeight| ପ୍ରଥମଟି ହେଉଛି ବେସ୍ ଫଣ୍ଟ୍ ସାଇଜ୍ ଏବଂ ଦ୍ୱିତୀୟଟି ହେଉଛି ବେସ୍ ଲାଇନ୍-ଉଚ୍ଚତା | ଆମର ଭେରିଏବଲ୍ ଏବଂ କିଛି ସରଳ ଗଣିତ ବ୍ୟବହାର କରି ଆମର ସମସ୍ତ ପ୍ରକାରର ମାର୍ଜିନ, ପ୍ୟାଡିଂ, ଏବଂ ଲାଇନ-ଉଚ୍ଚତା ସୃଷ୍ଟି କରିବାକୁ | ସେମାନଙ୍କୁ କଷ୍ଟମାଇଜ୍ କରନ୍ତୁ ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ଆଡାପ୍ଟସ୍ |

ଗୁରୁତ୍। |

ହାଲୁକା ଶ yles ଳୀ ସହିତ HTML ର ଡିଫଲ୍ଟ ଗୁରୁତ୍ୱ ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ |

`<small>`

ଇନଲାଇନ କିମ୍ବା ପାଠ୍ୟର ବ୍ଲକଗୁଡିକୁ ଡି-ଜୋର ଦେବା ପାଇଁ , ଛୋଟ ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ପାଠ୍ୟର ଏହି ଧାଡିଟି ସୂକ୍ଷ୍ମ ମୁଦ୍ରଣ ପରି ବ୍ୟବହାର କରାଯିବା ପାଇଁ ଉଦ୍ଦିଷ୍ଟ |

<p> <small> ପାଠ୍ୟର ଏହି ଧାଡିଟି ସୂକ୍ଷ୍ମ ମୁଦ୍ରଣ ପରି ବ୍ୟବହାର କରାଯିବା ପାଇଁ ଉଦ୍ଦିଷ୍ଟ | </small> </p>

ବୋଲ୍ଡ |

ଏକ ଭାରୀ ଫଣ୍ଟ-ଓଜନ ସହିତ ପାଠ୍ୟର ଏକ ସ୍ନିପେଟ୍ ଉପରେ ଗୁରୁତ୍ୱ ଦେବା ପାଇଁ |

ପାଠ୍ୟର ନିମ୍ନ ସ୍ନିପେଟ୍ ବୋଲ୍ଡ ଟେକ୍ସଟ୍ ଭାବରେ ଉପସ୍ଥାପିତ ହୋଇଛି |

<strong> ବୋଲ୍ଡ ଟେକ୍ସଟ୍ </ strong> ଭାବରେ ଉପସ୍ଥାପିତ ହୋଇଛି |

ଇଟାଲିକ୍ |

ଇଟାଲିକ୍ ସହିତ ପାଠ୍ୟର ଏକ ସ୍ନିପେଟ୍ ଉପରେ ଗୁରୁତ୍ୱ ଦେବା ପାଇଁ |

ପାଠ୍ୟର ନିମ୍ନଲିଖିତ ସ୍ନିପେଟ୍ ଇଟାଲାଇଜଡ୍ ଟେକ୍ସଟ୍ ଭାବରେ ଉପସ୍ଥାପିତ ହୋଇଛି |

<em> ଇଟାଲାଇଜଡ୍ ଟେକ୍ସଟ୍ ଭାବରେ ଉପସ୍ଥାପିତ ହୋଇଛି </ em> |

ମୁଣ୍ଡ ଉପରକୁ!HTML5 ରେ <b>ବ୍ୟବହାର କରିବାକୁ ମୁକ୍ତ ହୁଅନ୍ତୁ | ଶବ୍ଦ କିମ୍ବା ବାକ୍ୟାଂଶଗୁଡିକୁ ହାଇଲାଇଟ୍ କରିବା ପାଇଁ ଉଦ୍ଦିଷ୍ଟ ଯେତେବେଳେ ଅତିରିକ୍ତ ଗୁରୁତ୍ୱ ପ୍ରଦାନ ନକରି ଅଧିକାଂଶ ସମୟରେ ସ୍ୱର, ବ technical ଷୟିକ ଶବ୍ଦ ଇତ୍ୟାଦି ପାଇଁ |<i><b><i>

ଶ୍ରେଣୀବଦ୍ଧ ଶ୍ରେଣୀଗୁଡିକ |

ଟେକ୍ସଟ୍ ଆଲାଇନ୍ମେଣ୍ଟ୍ କ୍ଲାସ୍ ସହିତ ଉପାଦାନଗୁଡ଼ିକୁ ସହଜରେ ରିଅଲ୍ କରନ୍ତୁ |

ବାମ ଆଲାଇନ୍ ଟେକ୍ସଟ୍ |

କେନ୍ଦ୍ର ଆଲାଇନ୍ ଟେକ୍ସଟ୍ |

ଡାହାଣ ଆଲାଇନ୍ ଟେକ୍ସଟ୍ |

<p class = "text-left" > ବାମ ଆଲାଇନ୍ ଟେକ୍ସଟ୍ | </p> 
<p class = "text-center" > କେନ୍ଦ୍ର ଆଲାଇନ୍ ଟେକ୍ସଟ୍ | </p> 
<p class = "text-right" > ଡାହାଣ ଆଲାଇନ୍ ଟେକ୍ସଟ୍ | </p>

କ୍ଲାସ୍ ଉପରେ ଗୁରୁତ୍ୱ ଦିଅନ୍ତୁ |

ହାତଗଣତି ଗୁରୁତ୍ୱ ଉପଯୋଗୀ ଶ୍ରେଣୀଗୁଡ଼ିକ ସହିତ ରଙ୍ଗ ମାଧ୍ୟମରେ ଅର୍ଥ ପହଞ୍ଚାନ୍ତୁ |

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh।

Etiam porta sem maleuada magna mollis euismod |

ଡୋନେକ୍ ଉଲାମକର୍ପର୍ ନୁଲା ନନ୍ ମେଟସ୍ ଆକ୍ଟର ଫ୍ରିଙ୍ଗିଲା |

Aenean eu leo quam। ପେଲେଣ୍ଟେସ୍କ୍ ଅର୍ନେର୍ ସେମ୍ ଲାସିନିଆ କ୍ୱାମ୍ ଭେନେନାଟିସ୍ |

Duis mollis, est non commodo luctus, nisi erat porttitor ligula |

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh। </p> 
<p class = "text-warning" > Etiam porta sem maleuada magna mollis euismod | </p> 
<p class = "text-error" > ଡୋନେକ୍ ଉଲାମକର୍ପର୍ ନୁଲା ନନ୍ ମେଟସ୍ ଆକ୍ଟର ଫ୍ରିଙ୍ଗିଲା | </p> 
<p class = "text-info" > ଏନିନ୍ ଇଉ ଲିଓ କ୍ୱାମ | ପେଲେଣ୍ଟେସ୍କ୍ ଅର୍ନେର୍ ସେମ୍ ଲାସିନିଆ କ୍ୱାମ୍ ଭେନେନାଟିସ୍ | </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula | </p>

ସଂକ୍ଷିପ୍ତକରଣ

<abbr>ହୋଭରରେ ବିସ୍ତାରିତ ସଂସ୍କରଣ ଦେଖାଇବା ପାଇଁ ସଂକ୍ଷିପ୍ତକରଣ ଏବଂ ଆକ୍ଷରିକ ଶବ୍ଦ ପାଇଁ HTML ର ଉପାଦାନର ଷ୍ଟାଇଲାଇଜଡ୍ କାର୍ଯ୍ୟକାରିତା | ଏକ ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ ସଂକ୍ଷିପ୍ତକରଣଗୁଡ଼ିକରେ titleହାଲୁକା ବିନ୍ଦୁ ତଳ ସୀମା ଏବଂ ହୋଭରରେ ଏକ ହେଲ୍ପ କର୍ସର୍ ଅଛି, ଯାହା ହୋଭର ଉପରେ ଅତିରିକ୍ତ ପ୍ରସଙ୍ଗ ପ୍ରଦାନ କରିଥାଏ |

`<abbr>`

ଏକ ସଂକ୍ଷିପ୍ତର ଲମ୍ୱା ହୋଭର୍ ଉପରେ ବିସ୍ତାରିତ ପାଠ୍ୟ ପାଇଁ, titleଗୁଣ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |

ଗୁଣଧର୍ମର ଶବ୍ଦର ସଂକ୍ଷିପ୍ତ ହେଉଛି ଆକର୍ଷଣ |

<abbr title = "attribute" > attr </abbr> |

`<abbr class="initialism">`

.initialismଟିକିଏ ଛୋଟ ଫଣ୍ଟ-ସାଇଜ୍ ପାଇଁ ଏକ ସଂକ୍ଷିପ୍ତରେ ଯୋଡନ୍ତୁ |

କଟା ରୁଟି ପରଠାରୁ HTML ହେଉଛି ସର୍ବୋତ୍ତମ ଜିନିଷ |

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr> |

ଠିକଣା

ନିକଟତମ ପିତୃପୁରୁଷ କିମ୍ବା କାର୍ଯ୍ୟର ସମ୍ପୂର୍ଣ୍ଣ ଶରୀର ପାଇଁ ଯୋଗାଯୋଗ ସୂଚନା ଉପସ୍ଥାପନ କରନ୍ତୁ |

`<address>`

ସମସ୍ତ ରେଖା ସହିତ ସମାପ୍ତ କରି ଫର୍ମାଟିଂ ସଂରକ୍ଷଣ କରନ୍ତୁ <br>|

ଟ୍ୱିଟର , Inc.
_
_

ପୂର୍ଣ୍ଣ ନାମ
[email protected]

<ଆଡ୍ରେସ୍> |
  <strong> ଟ୍ୱିଟର, Inc. </ strong> <br>
  795 ଫୋଲ୍ସମ୍ ଆଭି, ସୁଟ୍ 600 <br> |
  ସାନ ଫ୍ରାନ୍ସିସ୍କୋ, CA 94107 <br> |
  <abbr title = "ଫୋନ୍" > P: </abbr> (123) 456-7890 | 
</address>
 
<ଆଡ୍ରେସ୍> |
  <strong> ପୂର୍ଣ୍ଣ ନାମ </ strong> <br>
  <a href = "mailto:#"> [email protected] </a> _ 
</address>

ବ୍ଲକକୋଟସ୍ |

ତୁମର ଡକ୍ୟୁମେଣ୍ଟ୍ ଭିତରେ ଅନ୍ୟ ଉତ୍ସରୁ ବିଷୟବସ୍ତୁର ବ୍ଲକଗୁଡିକ ଉଦ୍ଧୃତ କରିବା ପାଇଁ |

ଡିଫଲ୍ଟ ବ୍ଲକକୋଟ |

କୋଟ ଭାବରେ ଯେକ HTML <blockquote>ଣସି HTML କୁ ଘୋଡ଼ାନ୍ତୁ | ସିଧାସଳଖ ଉଦ୍ଧୃତି ପାଇଁ ଆମେ ସୁପାରିଶ କରୁ <p>|

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ଆମ୍, କନସେକ୍ଟେଟର୍ ଆଡିପିସିଙ୍ଗ୍ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋଜୁରେ ଏକ ଆଣ୍ଟେ ଏରାଟ କରନ୍ତୁ |

<blockquote>
  <p> ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍, କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋଜୁରେ ଏକ ଆଣ୍ଟେ ଏରାଟ କରନ୍ତୁ | </p>
</blockquote>

ବ୍ଲକକୋଟ୍ ବିକଳ୍ପଗୁଡିକ |

ଏକ ମାନକ ବ୍ଲକକୋଟରେ ସରଳ ପରିବର୍ତ୍ତନ ପାଇଁ ଶ Style ଳୀ ଏବଂ ବିଷୟବସ୍ତୁ ପରିବର୍ତ୍ତନ |

ଏକ ଉତ୍ସ ନାମକରଣ |

<small>ଉତ୍ସ ଚିହ୍ନଟ ପାଇଁ ଟ୍ୟାଗ୍ ଯୋଡନ୍ତୁ | ଉତ୍ସ କାର୍ଯ୍ୟର ନାମକୁ ଗୁଡ଼ାଇ ରଖ <cite>|

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

<blockquote>
  <p> ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍, କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋଜୁରେ ଏକ ଆଣ୍ଟେ ଏରାଟ କରନ୍ତୁ | </p>
  <small> କେହି ଜଣେ ପ୍ରସିଦ୍ଧ <cite title = "ଉତ୍ସ ଆଖ୍ୟା" > ଉତ୍ସ ଆଖ୍ୟା </cite> </small> 
</blockquote>

ବ display କଳ୍ପିକ ପ୍ରଦର୍ଶନ

.pull-rightଏକ ଭାସମାନ, ଡାହାଣ-ସଜ୍ଜିତ ବ୍ଲକକୋଟ ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |

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

<blockquote class = "pull-right" > | 
  ...
</blockquote>

ତାଲିକା |

ଅନିୟମିତ |

ଆଇଟମଗୁଡିକର ଏକ ତାଲିକା ଯେଉଁଥିରେ କ୍ରମ ସ୍ପଷ୍ଟ ଭାବରେ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ନୁହେଁ |

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍ |
କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ |
ମାସା ରେ ଇଣ୍ଟିଜର୍ ମୋଲେଷ୍ଟି ଲୋରେମ୍ |
ପ୍ରିଟିୟମ୍ ନିସଲ୍ ଆଲିକେଟ୍ ରେ ଫାସିଲିସ୍ |
Nulla volutpat aliquam velit
- ଫାସେଲସ୍ ଆଇକୁଲିସ୍ ନେକ୍ |
- ପୁରସ୍ ସୋଡାଲ୍ ଅଲଟ୍ରିକସ୍ |
- ଭେଷ୍ଟିବୁଲମ୍ ଲୋରାଇଟ୍ ପୋର୍ଟିଟର୍ ସେମ୍ |
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel |
ଏନିନ୍ ସିଟ୍ ଆମେଟ୍ ଏରାଟ୍ ନନ୍କ୍ |
ପୋର୍ଟିଟର୍ ଲୋରେମ୍ ଇଗେଟ୍ କରନ୍ତୁ |

<ul>
  <li> ... </li>
</ul>

ଅର୍ଡର |

ଆଇଟମଗୁଡିକର ଏକ ତାଲିକା ଯେଉଁଥିରେ କ୍ରମ ସ୍ପଷ୍ଟ ଭାବରେ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ |

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍ |
କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ |
ମାସା ରେ ଇଣ୍ଟିଜର୍ ମୋଲେଷ୍ଟି ଲୋରେମ୍ |
ପ୍ରିଟିୟମ୍ ନିସଲ୍ ଆଲିକେଟ୍ ରେ ଫାସିଲିସ୍ |
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel |
ଏନିନ୍ ସିଟ୍ ଆମେଟ୍ ଏରାଟ୍ ନନ୍କ୍ |
ପୋର୍ଟିଟର୍ ଲୋରେମ୍ ଇଗେଟ୍ କରନ୍ତୁ |

<ol>
  <li> ... </li>
</ol>

ଅଣସଂରକ୍ଷିତ |

ତାଲିକା ଆଇଟମଗୁଡିକରେ ଡିଫଲ୍ଟ list-styleଏବଂ ବାମ ପ୍ୟାଡିଂ ଅପସାରଣ କରନ୍ତୁ (କେବଳ ତୁରନ୍ତ ପିଲାମାନେ) |

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍ |
କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ |
ମାସା ରେ ଇଣ୍ଟିଜର୍ ମୋଲେଷ୍ଟି ଲୋରେମ୍ |
ପ୍ରିଟିୟମ୍ ନିସଲ୍ ଆଲିକେଟ୍ ରେ ଫାସିଲିସ୍ |
Nulla volutpat aliquam velit
- ଫାସେଲସ୍ ଆଇକୁଲିସ୍ ନେକ୍ |
- ପୁରସ୍ ସୋଡାଲ୍ ଅଲଟ୍ରିକସ୍ |
- ଭେଷ୍ଟିବୁଲମ୍ ଲୋରାଇଟ୍ ପୋର୍ଟିଟର୍ ସେମ୍ |
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel |
ଏନିନ୍ ସିଟ୍ ଆମେଟ୍ ଏରାଟ୍ ନନ୍କ୍ |
ପୋର୍ଟିଟର୍ ଲୋରେମ୍ ଇଗେଟ୍ କରନ୍ତୁ |

<ul class = "unstyled" > | 
  <li> ... </li>
</ul>

କ୍ରମରେ

ସମସ୍ତ ତାଲିକା ଆଇଟମ୍ ଗୁଡିକ ଗୋଟିଏ ଲାଇନରେ inline-blockଏବଂ କିଛି ହାଲୁକା ପ୍ୟାଡିଂ ସହିତ ରଖନ୍ତୁ |

ଲୋରେମ୍ ଇପ୍ସମ୍ |
ଫାସେଲସ୍ ଆଇକୁଲିସ୍ |
ନୁଲା ଭଲ୍ୟୁଟପାଟ |

<ul class = "inline" > | 
  <li> ... </li>
</ul>

ବର୍ଣ୍ଣନା

ସେମାନଙ୍କର ସଂପୃକ୍ତ ବର୍ଣ୍ଣନା ସହିତ ଶବ୍ଦର ଏକ ତାଲିକା |

ବର୍ଣ୍ଣନା ତାଲିକା |: ସର୍ତ୍ତାବଳୀ ବ୍ୟାଖ୍ୟା କରିବା ପାଇଁ ଏକ ବର୍ଣ୍ଣନା ତାଲିକା ଉପଯୁକ୍ତ |
ଇଉଜିମୋଡ୍ |: ଭେଷ୍ଟିବୁଲମ୍ id ligula porta felis euismod semper eget lacinia odio sem nec elit।; Eget metus ରେ Donec id elit non mi porta gravida |
ମାଲେସୁଆଡା ପୋର୍ଟା |: Etiam porta sem maleuada magna mollis euismod |

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

ଭୂସମାନ୍ତର ବର୍ଣ୍ଣନା

<dl>ପାର୍ଶ୍ୱରେ ଧାଡିରେ ଶବ୍ଦ ଏବଂ ବର୍ଣ୍ଣନା ପ୍ରସ୍ତୁତ କରନ୍ତୁ |

ବର୍ଣ୍ଣନା ତାଲିକା |: ସର୍ତ୍ତାବଳୀ ବ୍ୟାଖ୍ୟା କରିବା ପାଇଁ ଏକ ବର୍ଣ୍ଣନା ତାଲିକା ଉପଯୁକ୍ତ |
ଇଉଜିମୋଡ୍ |: ଭେଷ୍ଟିବୁଲମ୍ id ligula porta felis euismod semper eget lacinia odio sem nec elit।; Eget metus ରେ Donec id elit non mi porta gravida |
ମାଲେସୁଆଡା ପୋର୍ଟା |: Etiam porta sem maleuada magna mollis euismod |
Felis euismod semper eget lacinia |: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus |

<dl ଶ୍ରେଣୀ = "dl-horizontal" > | 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

ମୁଣ୍ଡ ଉପରକୁ!ଭୂସମାନ୍ତର ବର୍ଣ୍ଣନା ତାଲିକାଗୁଡ଼ିକ ଶବ୍ଦଗୁଡ଼ିକୁ ଛୋଟ କରିଦେବ ଯାହା ବାମ ସ୍ତମ୍ଭ ଫିକ୍ସରେ ଫିଟ୍ ହେବା ପାଇଁ ବହୁତ ଲମ୍ବା ଅଟେ text-overflow| ସଂକୀର୍ଣ୍ଣ ଦୃଶ୍ୟଗୁଡ଼ିକରେ, ସେମାନେ ଡିଫଲ୍ଟ ଷ୍ଟାକ୍ ହୋଇଥିବା ଲେଆଉଟ୍ ରେ ପରିବର୍ତ୍ତନ କରିବେ |

କ୍ରମରେ

ସହିତ କୋଡ୍ ର ଇନଲାଇନ୍ ସ୍ନିପେଟ୍ ଗୁଡ଼ାଇ ଦିଅ <code>|

ଉଦାହରଣ ସ୍ୱରୂପ, <section>ଇନଲାଇନ ଭାବରେ ଗୁଡ଼େଇ ହେବା ଉଚିତ |

ଉଦାହରଣ ସ୍ୱରୂପ , <କୋଡ୍> & lt ; ବିଭାଗ & gt ; </ code > ଇନଲାଇନ ଭାବରେ ଗୁଡ଼ାଯିବା ଉଚିତ |

ମ Basic ଳିକ ବ୍ଲକ

<pre>ଏକାଧିକ ଧାଡି କୋଡ୍ ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ | ସଠିକ୍ ରେଣ୍ଡରିଂ ପାଇଁ କୋଡ୍ ରେ ଯେକ ang ଣସି କୋଣ ବ୍ରାକେଟ୍ ରୁ ରକ୍ଷା ପାଇବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

<p> ଏଠାରେ ନମୁନା ପାଠ ... </p>

<pre>
  & lt; p & gt; ଏଠାରେ ନମୁନା ପାଠ ... & lt; / p & gt;
</pre>

ମୁଣ୍ଡ ଉପରକୁ!<pre>ଟ୍ୟାଗଗୁଡିକ ମଧ୍ୟରେ କୋଡ୍ ଯଥାସମ୍ଭବ ବାମ ପାଖରେ ରଖିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ ; ଏହା ସମସ୍ତ ଟ୍ୟାବ୍ ରେଣ୍ଡର୍ କରିବ |

ଆପଣ ବ ally କଳ୍ପିକ ଭାବରେ .pre-scrollableଶ୍ରେଣୀ ଯୋଗ କରିପାରିବେ ଯାହାକି ସର୍ବାଧିକ 350px ର ଉଚ୍ଚତା ସେଟ୍ କରିବ ଏବଂ ଏକ y-axis ସ୍କ୍ରୋଲ୍ ବାର୍ ପ୍ରଦାନ କରିବ |

ଡିଫଲ୍ଟ ଶ yles ଳୀ |

ମ basic ଳିକ ଶ yl ଳୀ ପାଇଁ - ହାଲୁକା ପ୍ୟାଡିଂ ଏବଂ କେବଳ ଭୂସମାନ୍ତର ଡିଭାଇଡର୍ - ଯେକ .tableany ଣସିରେ ବେସ୍ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ <table>|

#	ପ୍ରଥମ ନାମ	ଶେଷ ନାମ	ଉପଯୋଗକର୍ତ୍ତା ନାମ
୧	ମାର୍କ	Otto	@ ମିଡୋ
୨	ଯାକୁବ	ଥର୍ନଟନ୍ \|	@ ଫାଟ
3	ଲ୍ୟାରି \|	ପକ୍ଷୀ	@ ଟ୍ୱିଟର

<ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ସାରଣୀ" > | 
  …
</table>

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

.tableନିମ୍ନଲିଖିତ ଶ୍ରେଣୀଗୁଡ଼ିକ ମଧ୍ୟରୁ ଯେକ any ଣସିଟି ବେସ୍ ଶ୍ରେଣୀରେ ଯୋଡନ୍ତୁ |

`.table-striped`

CSS ଚୟନକର୍ତ୍ତା (IE7-8 ରେ ଉପଲବ୍ଧ ନୁହେଁ) <tbody>ମାଧ୍ୟମରେ ଯେକ any ଣସି ଟେବୁଲ୍ ଧାଡିରେ ଜେବ୍ରା-ଷ୍ଟ୍ରିପିଂ ଯୋଗ କରେ |:nth-child

#	ପ୍ରଥମ ନାମ	ଶେଷ ନାମ	ଉପଯୋଗକର୍ତ୍ତା ନାମ
୧	ମାର୍କ	Otto	@ ମିଡୋ
୨	ଯାକୁବ	ଥର୍ନଟନ୍ \|	@ ଫାଟ
3	ଲ୍ୟାରି \|	ପକ୍ଷୀ	@ ଟ୍ୱିଟର

<ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ଟେବୁଲ୍ ଟେବୁଲ୍-ଷ୍ଟ୍ରାଇଡ୍" > | 
  …
</table>

`.table-bordered`

ଟେବୁଲରେ ସୀମା ଏବଂ ଗୋଲାକାର କୋଣ ଯୋଡନ୍ତୁ |

#	ପ୍ରଥମ ନାମ	ଶେଷ ନାମ	ଉପଯୋଗକର୍ତ୍ତା ନାମ
୧	ମାର୍କ	Otto	@ ମିଡୋ
୧	ମାର୍କ	Otto	@getbootstrap
୨	ଯାକୁବ	ଥର୍ନଟନ୍ \|	@ ଫାଟ
3	ଲ୍ୟାରି ଦି ବାର୍ଡ \|		@ ଟ୍ୱିଟର

<ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ଟେବୁଲ୍ ଟେବୁଲ୍-ସୀମାନ୍ତ" > | 
  …
</table>

`.table-hover`

A ମଧ୍ୟରେ ଟେବୁଲ୍ ଧାଡିରେ ଏକ ହୋଭର ସ୍ଥିତି ସକ୍ଷମ କରନ୍ତୁ <tbody>|

#	ପ୍ରଥମ ନାମ	ଶେଷ ନାମ	ଉପଯୋଗକର୍ତ୍ତା ନାମ
୧	ମାର୍କ	Otto	@ ମିଡୋ
୨	ଯାକୁବ	ଥର୍ନଟନ୍ \|	@ ଫାଟ
3	ଲ୍ୟାରି ଦି ବାର୍ଡ \|		@ ଟ୍ୱିଟର

<ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ଟେବୁଲ୍ ଟେବୁଲ୍-ହୋଭର" > | 
  …
</table>

`.table-condensed`

ସେଲ୍ ପ୍ୟାଡିଂକୁ ଅଧା କାଟି ଟେବୁଲ୍ଗୁଡ଼ିକୁ ଅଧିକ କମ୍ପାକ୍ଟ କରିଥାଏ |

#	ପ୍ରଥମ ନାମ	ଶେଷ ନାମ	ଉପଯୋଗକର୍ତ୍ତା ନାମ
୧	ମାର୍କ	Otto	@ ମିଡୋ
୨	ଯାକୁବ	ଥର୍ନଟନ୍ \|	@ ଫାଟ
3	ଲ୍ୟାରି ଦି ବାର୍ଡ \|		@ ଟ୍ୱିଟର

<ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ଟେବୁଲ୍ ଟେବୁଲ୍-ଘନୀଭୂତ" > | 
  …
</table>

ବ row କଳ୍ପିକ ଧାଡି ଶ୍ରେଣୀଗୁଡ଼ିକ |

ଟେବୁଲ୍ ଧାଡିଗୁଡିକ ରଙ୍ଗ କରିବା ପାଇଁ ପ୍ରସଙ୍ଗଗତ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |

କ୍ଲାସ୍	ବର୍ଣ୍ଣନା
`.success`	ଏକ ସଫଳ କିମ୍ବା ସକରାତ୍ମକ କାର୍ଯ୍ୟକୁ ସୂଚିତ କରେ \|
`.error`	ଏକ ବିପଜ୍ଜନକ କିମ୍ବା ସମ୍ଭାବ୍ୟ ନକାରାତ୍ମକ କାର୍ଯ୍ୟକୁ ସୂଚାଇଥାଏ \|
`.warning`	ଏକ ଚେତାବନୀ ସୂଚାଇଥାଏ ଯାହା ଧ୍ୟାନ ଆବଶ୍ୟକ କରିପାରନ୍ତି \|
`.info`	ଡିଫଲ୍ଟ ଶ yles ଳୀ ପାଇଁ ଏକ ବିକଳ୍ପ ଭାବରେ ବ୍ୟବହୃତ ହୁଏ \|

#	ଉତ୍ପାଦ	ଦେୟ ନିଆଯାଇଛି \|	ସ୍ଥିତି
୧	ଯକ୍ଷ୍ମା - ମାସିକ \|	01/04/2012	ଅନୁମୋଦିତ \|
୨	ଯକ୍ଷ୍ମା - ମାସିକ \|	02/04/2012	ପ୍ରତ୍ୟାଖ୍ୟାନ
3	ଯକ୍ଷ୍ମା - ମାସିକ \|	03/04/2012	ବିଚାରାଧୀନ ଅଛି
4	ଯକ୍ଷ୍ମା - ମାସିକ \|	04/04/2012	ନିଶ୍ଚିତ କରିବାକୁ କଲ୍ କରନ୍ତୁ \|

...
  < tr ଶ୍ରେଣୀ = "ସଫଳତା" > |
    <td> 1 < / td> |
    <td> TB - ମାସିକ </ td > |
    < td > 01/04/2012 < / td >
    <td> ଅନୁମୋଦିତ </ td > |
  </ tr >
...

ସମର୍ଥିତ ଟେବୁଲ୍ ମାର୍କଅପ୍ |

ସମର୍ଥିତ ଟେବୁଲ୍ HTML ଉପାଦାନଗୁଡ଼ିକର ତାଲିକା ଏବଂ ସେଗୁଡିକ କିପରି ବ୍ୟବହାର କରାଯିବା ଉଚିତ |

ଟ୍ୟାଗ୍ କରନ୍ତୁ \|	ବର୍ଣ୍ଣନା
`<table>`	ଏକ ଟାବୁଲାର୍ ଫର୍ମାଟରେ ଡାଟା ପ୍ରଦର୍ଶନ ପାଇଁ ଉପାଦାନ ରାପିଙ୍ଗ୍ \|
`<thead>`	`<tr>`ଟେବୁଲ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକୁ ଲେବଲ୍ କରିବାକୁ ଟେବୁଲ୍ ହେଡର୍ ଧାଡି () ପାଇଁ ଧାରଣକାରୀ ଉପାଦାନ \|
`<tbody>`	`<tr>`ଟେବୁଲ୍ ଦେହରେ ଟେବୁଲ୍ ଧାଡି () ପାଇଁ ଧାରଣକାରୀ ଉପାଦାନ \|
`<tr>`	`<td>`ଟେବୁଲ୍ ସେଲ୍ ( କିମ୍ବା ) ର ଏକ ସେଟ୍ ପାଇଁ ଧାରଣକାରୀ ଉପାଦାନ `<th>`ଯାହା ଗୋଟିଏ ଧାଡିରେ ଦେଖାଯାଏ \|
`<td>`	ଡିଫଲ୍ଟ ଟେବୁଲ୍ ସେଲ୍ \|
`<th>`	ସ୍ତମ୍ଭ (କିମ୍ବା ଧାଡି, ପରିସର ଏବଂ ସ୍ଥାନ ଉପରେ ନିର୍ଭର କରି) ଲେବଲ୍ ପାଇଁ ସ୍ୱତନ୍ତ୍ର ଟେବୁଲ୍ ସେଲ୍ \|
`<caption>`	ଟେବୁଲ୍ ଯାହା ଧାରଣ କରେ ତାହାର ବର୍ଣ୍ଣନା କିମ୍ବା ସାରାଂଶ, ବିଶେଷତ screen ସ୍କ୍ରିନ୍ ପାଠକମାନଙ୍କ ପାଇଁ ଉପଯୋଗୀ \|

<ଟେବୁଲ୍> |
  <caption> ... </caption>
  <ମୁଣ୍ଡ>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

ଡିଫଲ୍ଟ ଶ yles ଳୀ |

<form>ବ୍ୟକ୍ତିଗତ ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକ ଷ୍ଟାଇଲିଂ ଗ୍ରହଣ କରେ, କିନ୍ତୁ ମାର୍କଅପ୍ ଉପରେ କିମ୍ବା ବଡ଼ ପରିବର୍ତ୍ତନ ଉପରେ କ required ଣସି ଆବଶ୍ୟକୀୟ ବେସ୍ କ୍ଲାସ୍ ବିନା | ଫର୍ମ ନିୟନ୍ତ୍ରଣ ଉପରେ ଉପରେ ଷ୍ଟାକ୍ ହୋଇଥିବା, ବାମ-ଆଲାଇନ୍ ଲେବଲ୍ ରେ ଫଳାଫଳ |

<form>
  <ଫିଲ୍ଡସେଟ୍> |
    <legend> କିମ୍ବଦନ୍ତୀ </legend> |
    <ଲେବଲ୍> ଲେବଲ୍ ନାମ </ ଲେବଲ୍> |
    <input type = "text" placeholder = "କିଛି ଟାଇପ୍ କର ..." > |  
    <span class = "help-block" > ଉଦାହରଣ ବ୍ଲକ ସ୍ତରୀୟ ସହାୟତା ପାଠ୍ୟ ଏଠାରେ | </span> 
    <label class = "checkbox" > | 
      <ଇନପୁଟ୍ ପ୍ରକାର = "ଚେକ୍ ବକ୍ସ" > ମୋତେ ଯାଞ୍ଚ କରନ୍ତୁ | 
    </label>
    <ବଟନ୍ ପ୍ରକାର = "ଦାଖଲ" ଶ୍ରେଣୀ = "btn" > ଦାଖଲ </button> |  
  </fieldset>
</form>

ବ tion କଳ୍ପିକ ଲେଆଉଟ୍ |

ସାଧାରଣ ବ୍ୟବହାର ମାମଲାଗୁଡ଼ିକ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ତିନୋଟି ଇଚ୍ଛାଧୀନ ଫର୍ମ ଲେଆଉଟ୍ ଅଛି |

ସନ୍ଧାନ ଫର୍ମ |

.form-searchଫର୍ମରେ ଏବଂ ଏକ ଅତିରିକ୍ତ ଗୋଲାକାର ପାଠ୍ୟ ଇନପୁଟ୍ ପାଇଁ .search-queryଯୋଡନ୍ତୁ |<input>

<ଫର୍ମ ଶ୍ରେଣୀ = "ଫର୍ମ-ସନ୍ଧାନ" > | 
  <input type = "text" class = "input-medium search-query" > |  
  <ବଟନ୍ ପ୍ରକାର = "ଦାଖଲ" ଶ୍ରେଣୀ = "btn" > ସନ୍ଧାନ </button> |  
</form>

ଇନଲାଇନ ଫର୍ମ |

.form-inlineଏକ କମ୍ପାକ୍ଟ ଲେଆଉଟ୍ ପାଇଁ ବାମ-ଆଲାଇନ୍ ଲେବଲ୍ ଏବଂ ଇନଲାଇନ-ବ୍ଲକ୍ କଣ୍ଟ୍ରୋଲ୍ ପାଇଁ ଯୋଡନ୍ତୁ |

<ଫର୍ମ ଶ୍ରେଣୀ = "ଫର୍ମ-ଇନଲାଇନ" > | 
  <ଇନପୁଟ୍ ପ୍ରକାର = "ପାଠ୍ୟ" ଶ୍ରେଣୀ = "ଇନପୁଟ୍-ଛୋଟ" ସ୍ଥାନଧାରୀ = "ଇମେଲ୍" > |   
  <ଇନପୁଟ୍ ପ୍ରକାର = "ପାସୱାର୍ଡ" ଶ୍ରେଣୀ = "ଇନପୁଟ୍-ଛୋଟ" ସ୍ଥାନଧାରୀ = "ପାସୱାର୍ଡ" > |   
  <label class = "checkbox" > | 
    <input type = "checkbox" > ମୋତେ ମନେରଖ | 
  </label>
  <ବଟନ୍ ପ୍ରକାର = "ଦାଖଲ" ଶ୍ରେଣୀ = "btn" > ସାଇନ୍ ଇନ୍ </button> |  
</form>

ଭୂସମାନ୍ତର ଫର୍ମ |

ନିୟନ୍ତ୍ରଣ ସହିତ ସମାନ ଧାଡିରେ ଦେଖାଯିବା ପାଇଁ ଡାହାଣ ଆଲାଇନ୍ ଲେବଲ୍ ଏବଂ ସେମାନଙ୍କୁ ବାମକୁ ଭାସିବା | ଏକ ଡିଫଲ୍ଟ ଫର୍ମରୁ ସର୍ବାଧିକ ମାର୍କଅପ୍ ପରିବର୍ତ୍ତନ ଆବଶ୍ୟକ କରେ:

.form-horizontalଫର୍ମରେ ଯୋଡନ୍ତୁ |
ଲେବଲ୍ ଗୁଡ଼ିକୁ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |.control-group
.control-labelଲେବଲ୍ ରେ ଯୋଡନ୍ତୁ |
.controlsସଠିକ୍ ଆଲାଇନ୍ମେଣ୍ଟ୍ ପାଇଁ ଯେକ associated ଣସି ସଂପୃକ୍ତ ନିୟନ୍ତ୍ରଣ ଗୁଡ଼ାଇ ରଖନ୍ତୁ |

<ଫର୍ମ ଶ୍ରେଣୀ = "ଫର୍ମ-ଭୂସମାନ୍ତର" > | 
  <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ-ଗୋଷ୍ଠୀ" > | 
    = "ଇନପୁଟ୍ ଇମେଲ୍ " > ଇମେଲ୍ </label> ପାଇଁ <label class = "control-label" |  
    <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ" > | 
      <ଇନପୁଟ୍ ପ୍ରକାର = "ପାଠ୍ୟ" id = "ଇନପୁଟ୍ ଇମେଲ୍ " ସ୍ଥାନଧାରୀ = "ଇମେଲ୍" > |   
    </div>
  </div>
  <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ-ଗୋଷ୍ଠୀ" > | 
    <label class = "control-label" = = " inputPassword " > ପାସୱାର୍ଡ </label> ପାଇଁ |  
    <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ" > | 
      <input type = "password" id = "inputPassword" placeholder = "ପାସୱାର୍ଡ" > |   
    </div>
  </div>
  <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ-ଗୋଷ୍ଠୀ" > | 
    <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ" > | 
      <label class = "checkbox" > | 
        <input type = "checkbox" > ମୋତେ ମନେରଖ | 
      </label>
      <ବଟନ୍ ପ୍ରକାର = "ଦାଖଲ" ଶ୍ରେଣୀ = "btn" > ସାଇନ୍ ଇନ୍ </button> |  
    </div>
  </div>
</form>

ସମର୍ଥିତ ଫର୍ମ ନିୟନ୍ତ୍ରଣ |

ଷ୍ଟାଣ୍ଡାର୍ଡ ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକର ଉଦାହରଣ ଏକ ଉଦାହରଣ ଫର୍ମ ଲେଆଉଟ୍ ରେ ସମର୍ଥିତ |

ଇନପୁଟ୍

ଅଧିକାଂଶ ସାଧାରଣ ଫର୍ମ ନିୟନ୍ତ୍ରଣ, ପାଠ୍ୟ-ଆଧାରିତ ଇନପୁଟ୍ କ୍ଷେତ୍ର | ସମସ୍ତ HTML5 ପ୍ରକାରଗୁଡିକ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ: ପାଠ୍ୟ, ପାସୱାର୍ଡ, ଡାଟାଇମ୍, ଡାଟାଇମ୍-ଲୋକାଲ୍, ତାରିଖ, ମାସ, ସମୟ, ସପ୍ତାହ, ସଂଖ୍ୟା, ଇମେଲ୍, url, ସନ୍ଧାନ, ଟେଲ, ଏବଂ ରଙ୍ଗ |

typeସବୁ ସମୟରେ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ୟବହାର ଆବଶ୍ୟକ କରେ |

<ଇନପୁଟ୍ ପ୍ରକାର = "ପାଠ୍ୟ" ସ୍ଥାନଧାରୀ = "ପାଠ୍ୟ ଇନପୁଟ୍" > |

ଟେକ୍ସଟେରିଆ |

ଫର୍ମ କଣ୍ଟ୍ରୋଲ ଯାହା ପାଠ୍ୟର ଏକାଧିକ ଧାଡିକୁ ସମର୍ଥନ କରେ | rowsଆବଶ୍ୟକ ଅନୁଯାୟୀ ଗୁଣ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

<textarea rows = "3" > </textarea> |

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

ଚେକ୍ ବକ୍ସଗୁଡ଼ିକ ଏକ ତାଲିକାରେ ଗୋଟିଏ କିମ୍ବା ଅନେକ ବିକଳ୍ପ ବାଛିବା ପାଇଁ ଥିବାବେଳେ ରେଡିଓଗୁଡ଼ିକ ଅନେକଙ୍କ ମଧ୍ୟରୁ ଗୋଟିଏ ବିକଳ୍ପ ବାଛିବା ପାଇଁ |

ଡିଫଲ୍ଟ (ଷ୍ଟାକ୍ଡ୍)

<label class = "checkbox" > | 
  <input type = "checkbox" value = "" > |  
  ବିକଳ୍ପଟି ହେଉଛି ଏହା ଏବଂ ତାହା - ଏହା କାହିଁକି ଉତ୍ତମ ତାହା ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
</label>
 
<label class = "radio" > | 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" check >     
  ବିକଳ୍ପଟି ହେଉଛି ଏହା ଏବଂ ତାହା - ଏହା କାହିଁକି ଉତ୍ତମ ତାହା ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
</label>
<label class = "radio" > | 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  ଅପ୍ସନ୍ ଦୁଇଟି ଅନ୍ୟ କିଛି ହୋଇପାରେ ଏବଂ ଏହାକୁ ଚୟନ କରିବା ଦ୍ one ାରା ବିକଳ୍ପଟି ଡିଲିଟ୍ ହେବ |
</label>

ଇନଲାଇନ୍ ଚେକ୍ ବକ୍ସଗୁଡିକ |

.inlineସମାନ ଧାଡିରେ ନିୟନ୍ତ୍ରଣ ପାଇଁ ଚେକ୍ ବକ୍ସ କିମ୍ବା ରେଡିଓର ଏକ କ୍ରମରେ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ |

<label class = "checkbox inline" > | 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1 |   
</label>
<label class = "checkbox inline" > | 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2 |   
</label>
<label class = "checkbox inline" > | 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3 |   
</label>

ଚୟନ କରେ |

ଡିଫଲ୍ଟ ଅପ୍ସନ୍ ବ୍ୟବହାର କରନ୍ତୁ କିମ୍ବା multiple="multiple"ଏକାଥରକେ ଏକାଧିକ ଅପ୍ସନ୍ ଦେଖାଇବାକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ |

<select>
  <option> 1 </option> |
  <option> 2 </option> |
  <option> 3 </option>
  <option> 4 </option> |
  <option> 5 </option> |
</select>
 
< ଏକାଧିକ = "ଏକାଧିକ" > ଚୟନ କରନ୍ତୁ | 
  <option> 1 </option> |
  <option> 2 </option> |
  <option> 3 </option>
  <option> 4 </option> |
  <option> 5 </option> |
</select>

ଫର୍ମ ନିୟନ୍ତ୍ରଣ ବିସ୍ତାର କରିବା |

ବିଦ୍ୟମାନ ବ୍ରାଉଜର୍ କଣ୍ଟ୍ରୋଲ୍ ଉପରେ ଯୋଡିବା, ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଅନ୍ୟାନ୍ୟ ଉପଯୋଗୀ ଫର୍ମ ଉପାଦାନଗୁଡ଼ିକୁ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |

ପ୍ରିପେଡ୍ ଏବଂ ଯୋଡା ଯାଇଥିବା ଇନପୁଟ୍ |

ଯେକ any ଣସି ପାଠ୍ୟ-ଆଧାରିତ ଇନପୁଟ୍ ପୂର୍ବରୁ କିମ୍ବା ପରେ ପାଠ୍ୟ କିମ୍ବା ବଟନ୍ ଯୋଡନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ selectଏଠାରେ ଉପାଦାନଗୁଡିକ ସମର୍ଥିତ ନୁହଁନ୍ତି |

ଡିଫଲ୍ଟ ବିକଳ୍ପଗୁଡ଼ିକ

ଏକ ଇନପୁଟ୍ ସହିତ ଟେକ୍ସଟ୍ ପ୍ରିପେଣ୍ଡ୍ କିମ୍ବା ଯୋଡିବା ପାଇଁ ଦୁଇଟି ଶ୍ରେଣୀ ମଧ୍ୟରୁ ଗୋଟିଏ ସହିତ ଏକ .add-onଏବଂ ଏକ ଗୁଡ଼ାଇ ଦିଅ |input

<div class = "input-prepend" > | 
  <span class = "add-on" > @ </span> | 
  <input class = "span2" id = "prependedInput " type = "text" placeholder = "ଉପଯୋଗକର୍ତ୍ତା ନାମ" >    
</div>
<div class = "input-append" > | 
  <input class = "span2" id = "appendedInput " type = "text" > |   
  <span class = "add-on" > .00 </span> | 
</div>

ମିଶ୍ରିତ |

.add-onଏକ ଇନପୁଟ୍ ପ୍ରସ୍ତୁତ ଏବଂ ଯୋଡିବା ପାଇଁ ଉଭୟ ଶ୍ରେଣୀ ଏବଂ ଦୁଇଟି ଉଦାହରଣ ବ୍ୟବହାର କରନ୍ତୁ |

<div class = "input-prepend input-append" > | 
  <span class = "add-on" > $ </span> | 
  <input class = "span2" id = "appendedPrependedInput " type = "text" > |   
  <span class = "add-on" > .00 </span> | 
</div>

ପାଠ ପରିବର୍ତ୍ତେ ବଟନ୍ |

<span>ପାଠ୍ୟ ସହିତ ଏକ ପାଠ୍ୟ ପରିବର୍ତ୍ତେ, .btnଏକ ଇନପୁଟ୍ ସହିତ ଏକ ବଟନ୍ (କିମ୍ବା ଦୁଇଟି) ସଂଲଗ୍ନ କରିବାକୁ ଏକ ବ୍ୟବହାର କରନ୍ତୁ |

<div class = "input-append" > | 
  <input class = "span2" id = "appendedInputButton " type = "text" > |   
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" ପ୍ରକାର = "ବଟନ୍" > ଯାଅ! </button>  
</div>

<div class = "input-append" > | 
  <input class = "span2" id = "appendedInputButtons " type = "text" > |   
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" ପ୍ରକାର = "ବଟନ୍" > ସନ୍ଧାନ </button> |  
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" ପ୍ରକାର = "ବଟନ୍" > ବିକଳ୍ପଗୁଡିକ </button> |  
</div>

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

<div class = "input-append" > | 
  <input class = "span2" id = "appendedDropdownButton " type = "text" > |   
  <div class = "btn-group" > | 
    <ବଟନ୍ ଶ୍ରେଣୀ = "btn ଡ୍ରପଡାଉନ୍-ଟୋଗଲ୍" ଡାଟା-ଟୋଗଲ୍ = "ଡ୍ରପଡାଉନ୍" > |  
      କାର୍ଯ୍ୟ
      <span class = "caret" > </span> | 
    </button>
    <ul class = "dropdown-menu" > | 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > | 
  <div class = "btn-group" > | 
    <ବଟନ୍ ଶ୍ରେଣୀ = "btn ଡ୍ରପଡାଉନ୍-ଟୋଗଲ୍" ଡାଟା-ଟୋଗଲ୍ = "ଡ୍ରପଡାଉନ୍" > |  
      କାର୍ଯ୍ୟ
      <span class = "caret" > </span> | 
    </button>
    <ul class = "dropdown-menu" > | 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton " type = "text" > |   
</div>

<div class = "input-prepend input-append" > | 
  <div class = "btn-group" > | 
    <ବଟନ୍ ଶ୍ରେଣୀ = "btn ଡ୍ରପଡାଉନ୍-ଟୋଗଲ୍" ଡାଟା-ଟୋଗଲ୍ = "ଡ୍ରପଡାଉନ୍" > |  
      କାର୍ଯ୍ୟ
      <span class = "caret" > </span> | 
    </button>
    <ul class = "dropdown-menu" > | 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  <div class = "btn-group" > | 
    <ବଟନ୍ ଶ୍ରେଣୀ = "btn ଡ୍ରପଡାଉନ୍-ଟୋଗଲ୍" ଡାଟା-ଟୋଗଲ୍ = "ଡ୍ରପଡାଉନ୍" > |  
      କାର୍ଯ୍ୟ
      <span class = "caret" > </span> | 
    </button>
    <ul class = "dropdown-menu" > | 
      ...
    </ul>
  </div>
</div>

ସେଗମେଣ୍ଟେଡ୍ ଡ୍ରପ୍ ଡାଉନ୍ ଗ୍ରୁପ୍ |

<form>
  <div class = "input-prepend" > | 
    <div class = "btn-group" > ... </div> 
    <ଇନପୁଟ୍ ପ୍ରକାର = "ପାଠ୍ୟ" > | 
  </div>
  <div class = "input-append" > | 
    <ଇନପୁଟ୍ ପ୍ରକାର = "ପାଠ୍ୟ" > | 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

ସନ୍ଧାନ ଫର୍ମ |

<ଫର୍ମ ଶ୍ରେଣୀ = "ଫର୍ମ-ସନ୍ଧାନ" > | 
  <div class = "input-append" > | 
    <input type = "text" class = "span2 search-query" > |  
    <ବଟନ୍ ପ୍ରକାର = "ଦାଖଲ" ଶ୍ରେଣୀ = "btn" > ସନ୍ଧାନ </button> |  
  </div>
  <div class = "input-prepend" > | 
    <ବଟନ୍ ପ୍ରକାର = "ଦାଖଲ" ଶ୍ରେଣୀ = "btn" > ସନ୍ଧାନ </button> |  
    <input type = "text" class = "span2 search-query" > |  
  </div>
</form>

ନିୟନ୍ତ୍ରଣ ଆକାର

.input-largeକ୍ଲାସ୍ ବ୍ୟବହାର କରି ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ଆକାର ସହିତ ତୁମର ଇନପୁଟ୍ ସହିତ ଆପେକ୍ଷିକ ସାଇଜ୍ .span*କ୍ଲାସ୍ ବ୍ୟବହାର କର |

ସ୍ତରର ନିବେଶକୁ ଅବରୋଧ କରନ୍ତୁ |

ଯେକ any ଣସି <input>କିମ୍ବା <textarea>ଉପାଦାନକୁ ଏକ ବ୍ଲକ ସ୍ତରର ଉପାଦାନ ପରି ବ୍ୟବହାର କର |

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

ଆପେକ୍ଷିକ ଆକାର

<input class = "input-mini" type = "text" placeholder = ".input-mini" > |   
<input class = "input-small" type = "text" placeholder = ".input-small" > |   
<input class = "input-medium" type = "text" placeholder = ".input-medium" > |   
<input class = "input-large" type = "text" placeholder = ".input-large" > |   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

ମୁଣ୍ଡ ଉପରକୁ!ଭବିଷ୍ୟତ ସଂସ୍କରଣରେ, ଆମେ ଆମର ବଟନ୍ ଆକାର ସହିତ ମେଳ କରିବା ପାଇଁ ଏହି ଆପେକ୍ଷିକ ଇନପୁଟ୍ ଶ୍ରେଣୀର ବ୍ୟବହାର ପରିବର୍ତ୍ତନ କରିବୁ | ଉଦାହରଣ ସ୍ୱରୂପ, .input-largeଏକ ଇନପୁଟ୍ ର ପ୍ୟାଡିଂ ଏବଂ ଫଣ୍ଟ-ସାଇଜ୍ ବୃଦ୍ଧି କରିବ |

ଗ୍ରୀଡ୍ ଆକାର

ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭର ସମାନ ଆକାର ସହିତ ମେଳ ଖାଉଥିବା ଇନପୁଟ୍ ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ .span1|.span12

<input class = "span1" type = "text" placeholder = ".span1" > |   
<input class = "span2" type = "text" placeholder = ".span2" > |   
<input class = "span3" type = "text" placeholder = ".span3" > |   
< ଶ୍ରେଣୀ = "span1" > ଚୟନ କରନ୍ତୁ | 
  ...
</select>
< ଶ୍ରେଣୀ = "span2" > ଚୟନ କରନ୍ତୁ | 
  ...
</select>
< ଶ୍ରେଣୀ = "span3" > ଚୟନ କରନ୍ତୁ | 
  ...
</select>

ପ୍ରତି ଧାଡିରେ ଏକାଧିକ ଗ୍ରୀଡ୍ ଇନପୁଟ୍ ପାଇଁ, ସଠିକ୍ ବ୍ୟବଧାନ ପାଇଁ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ.controls-row | ଧଳା ସ୍ଥାନକୁ ନଷ୍ଟ କରିବା ପାଇଁ ଏହା ଇନପୁଟ୍ଗୁଡ଼ିକୁ ଭାସମାନ କରେ, ସଠିକ୍ ମାର୍ଜିନ ସେଟ୍ କରେ ଏବଂ ଫ୍ଲୋଟ୍ ସଫା କରେ |

<div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ" > | 
  <input class = "span5" type = "text" placeholder = ".span5" > |   
</div>
<div class = "ନିୟନ୍ତ୍ରଣ-ଧାଡି ନିୟନ୍ତ୍ରଣ କରେ" > | 
  <input class = "span4" type = "text" placeholder = ".span4" > |   
  <input class = "span1" type = "text" placeholder = ".span1" > |   
</div>
...

ଅବିଭକ୍ତ ଇନପୁଟ୍ |

ତଥ୍ୟକୁ ଏକ ଫର୍ମରେ ଉପସ୍ଥାପନ କରନ୍ତୁ ଯାହା ପ୍ରକୃତ ଫର୍ମ ମାର୍କଅପ୍ ବ୍ୟବହାର ନକରି ସମ୍ପାଦିତ ନୁହେଁ |

<span class = "input-xlarge uneditable-input" > ଏଠାରେ କିଛି ମୂଲ୍ୟ </ span> |

କାର୍ଯ୍ୟଗୁଡିକ ଫର୍ମ କରନ୍ତୁ |

କ୍ରିୟାଗୁଡ଼ିକର ଏକ ଗୋଷ୍ଠୀ (ବଟନ୍) ସହିତ ଏକ ଫର୍ମ ଶେଷ କର | ଯେତେବେଳେ ଏକ ଭିତରେ ରଖାଯାଏ .form-actions, ବଟନ୍ଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍ ସହିତ ଲାଇନ୍ ହେବା ପାଇଁ ଇଣ୍ଡେଣ୍ଟ ହେବ |

<div class = "form-actions" > | 
  <ବଟନ୍ ପ୍ରକାର = "ଦାଖଲ" ଶ୍ରେଣୀ = "btn btn-primary" > ପରିବର୍ତ୍ତନଗୁଡିକ ସଞ୍ଚୟ କରନ୍ତୁ </button> |  
  <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn" > ବାତିଲ୍ </button> |  
</div>

ସାହାଯ୍ୟ ପାଠ

ଫର୍ମ ପାଠ୍ୟ ନିୟନ୍ତ୍ରଣରେ ଦେଖାଯାଉଥିବା ସହାୟତା ପାଠ୍ୟ ପାଇଁ ଇନଲାଇନ ଏବଂ ବ୍ଲକ ସ୍ତରର ସମର୍ଥନ |

ଇନଲାଇନ୍ ସହାୟତା

<input type = "text" > <span class = "help-inline" > ଇନଲାଇନ ସହାୟତା ପାଠ୍ୟ </span> |

ସହାୟତା ଅବରୋଧ କରନ୍ତୁ |

<input type = "text" > <span class = "help-block" > ଏକ ନୂତନ ଧାଡ଼ିରେ ଭାଙ୍ଗୁଥିବା ହେଲପ୍ ଟେକ୍ସଟ୍ ର ଏକ ଲମ୍ବା ବ୍ଲକ | </span>

ଫର୍ମ ନିୟନ୍ତ୍ରଣ ଅବସ୍ଥା |

ଫର୍ମ ନିୟନ୍ତ୍ରଣ ଏବଂ ଲେବଲ୍ ଉପରେ ମ basic ଳିକ ମତାମତ ସ୍ଥିତି ସହିତ ଉପଭୋକ୍ତା କିମ୍ବା ପରିଦର୍ଶକଙ୍କୁ ମତାମତ ପ୍ରଦାନ କରନ୍ତୁ |

ଇନପୁଟ୍ ଫୋକସ୍ |

ଆମେ outlineକିଛି ଫର୍ମ ନିୟନ୍ତ୍ରଣରେ ଡିଫଲ୍ଟ ଶ yles ଳୀ ଅପସାରଣ କରୁ ଏବଂ box-shadowଏହା ପାଇଁ ଏକ ସ୍ଥାନରେ ପ୍ରୟୋଗ କରୁ :focus|

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "ଏହା ଫୋକସ୍ ହୋଇଛି ..." >

ଅବ val ଧ ନିବେଶ |

ସହିତ ଡିଫଲ୍ଟ ବ୍ରାଉଜର୍ କାର୍ଯ୍ୟକାରିତା ମାଧ୍ୟମରେ ଷ୍ଟାଇଲ୍ ଇନପୁଟ୍ :invalid| ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ type, requiredଯଦି କ୍ଷେତ୍ରଟି ବ al କଳ୍ପିକ ନୁହେଁ, ଏବଂ (ଯଦି ପ୍ରଯୁଜ୍ୟ) ଗୁଣ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ pattern|

CSS ଛଉ ଚୟନକର୍ତ୍ତାଙ୍କ ପାଇଁ ସମର୍ଥନ ଅଭାବ ହେତୁ ଏହା ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର 7-9 ର ସଂସ୍କରଣରେ ଉପଲବ୍ଧ ନୁହେଁ |

<input class = "span3" type = "email" ଆବଶ୍ୟକ > |

ଇନପୁଟ୍ ଅକ୍ଷମ ହୋଇଛି |

disabledଉପଭୋକ୍ତା ଇନପୁଟ୍ କୁ ରୋକିବା ପାଇଁ ଏବଂ ଏକ ଅଲଗା ଲୁକ୍ ଟ୍ରିଗର୍ କରିବାକୁ ଏକ ଇନପୁଟ୍ ଉପରେ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ |

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "ଏଠାରେ ଇନପୁଟ୍ ଅକ୍ଷମ ..." ଅକ୍ଷମ >

ବ id ଧତା ଦର୍ଶାଏ |

ତ୍ରୁଟି, ଚେତାବନୀ, ସୂଚନା, ଏବଂ ସଫଳତା ବାର୍ତ୍ତା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପରେ ବ valid ଧତା ଶ yles ଳୀ ଅନ୍ତର୍ଭୁକ୍ତ | ବ୍ୟବହାର କରିବାକୁ, ଆଖପାଖରେ ଉପଯୁକ୍ତ ଶ୍ରେଣୀ ଯୋଡନ୍ତୁ .control-group|

<div class = "ନିୟନ୍ତ୍ରଣ-ଗୋଷ୍ଠୀ ଚେତାବନୀ" > | 
  <label class = "control-label" for = "inputWarning" > ଚେତାବନୀ ସହିତ ଇନପୁଟ୍ </label> |  
  <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ" > | 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > କିଛି ଭୁଲ ହୋଇଥାଇପାରେ </ span> | 
  </div>
</div>
 
<div class = "ନିୟନ୍ତ୍ରଣ-ଗୋଷ୍ଠୀ ତ୍ରୁଟି" > | 
  <label class = "control-label" = = " inputError " > ତ୍ରୁଟି ସହିତ ଇନପୁଟ୍ </label> |  
  <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ" > | 
    <input type = "text" id = "inputError" > |  
    <span class = "help-inline" > ଦୟାକରି ତ୍ରୁଟି ସଂଶୋଧନ କରନ୍ତୁ </span> | 
  </div>
</div>
 
<div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ-ଗୋଷ୍ଠୀ ସୂଚନା" > | 
  <label class = "control-label" for = "inputInfo" > ସୂଚନା ସହିତ ଇନପୁଟ୍ </label> |  
  <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ" > | 
    <input type = "text" id = "inputInfo" > |  
    <span class = "help-inline" > ଉପଯୋଗକର୍ତ୍ତା ନାମ ପୂର୍ବରୁ ନିଆଯାଇଛି </span> | 
  </div>
</div>
 
<div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ-ଗୋଷ୍ଠୀ ସଫଳତା" > | 
  <label class = "control-label" for = "inputSuccess" > ସଫଳତା ସହିତ ଇନପୁଟ୍ </label> |  
  <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ" > | 
    <input type = "text" id = "inputSuccess" > |  
    <span class = "help-inline" > ୱୋହୋ! </span> 
  </div>
</div>

ଡିଫଲ୍ଟ ବଟନ୍

ପ୍ରୟୋଗ ହୋଇଥିବା ଶ୍ରେଣୀ ସହିତ ଯେକ anything ଣସି ଜିନିଷରେ ବଟନ୍ ଶ yles ଳୀ ପ୍ରୟୋଗ .btnକରାଯାଇପାରିବ | <a>ଯଦିଓ, ସାଧାରଣତ you ଆପଣ ଏହାକୁ କେବଳ ଏବଂ <button>ସର୍ବୋତ୍ତମ ରେଣ୍ଡରିଂ ପାଇଁ ଉପାଦାନଗୁଡ଼ିକରେ ପ୍ରୟୋଗ କରିବାକୁ ଚାହାଁନ୍ତି |

ବଟନ୍	ଶ୍ରେଣୀ = ""	ବର୍ଣ୍ଣନା
	`btn`	ଗ୍ରେଡିଏଣ୍ଟ୍ ସହିତ ଷ୍ଟାଣ୍ଡାର୍ଡ ଧୂସର ବଟନ୍ \|
	`btn btn-primary`	ଅତିରିକ୍ତ ଭିଜୁଆଲ୍ ଓଜନ ପ୍ରଦାନ କରେ ଏବଂ ବଟନ୍ଗୁଡ଼ିକର ଏକ ସେଟ୍ ରେ ପ୍ରାଥମିକ କାର୍ଯ୍ୟକୁ ଚିହ୍ନଟ କରେ \|
	`btn btn-info`	ଡିଫଲ୍ଟ ଶ yles ଳୀ ପାଇଁ ଏକ ବିକଳ୍ପ ଭାବରେ ବ୍ୟବହୃତ ହୁଏ \|
	`btn btn-success`	ଏକ ସଫଳ କିମ୍ବା ସକରାତ୍ମକ କାର୍ଯ୍ୟକୁ ସୂଚିତ କରେ \|
	`btn btn-warning`	ଏହି କାର୍ଯ୍ୟ ସହିତ ସତର୍କତା ଅବଲମ୍ବନ କରାଯିବା ଉଚିତ ବୋଲି ସୂଚିତ କରେ \|
	`btn btn-danger`	ଏକ ବିପଜ୍ଜନକ କିମ୍ବା ସମ୍ଭାବ୍ୟ ନକାରାତ୍ମକ କାର୍ଯ୍ୟକୁ ସୂଚାଇଥାଏ \|
	`btn btn-inverse`	ବିକଳ୍ପ ଗା dark ଧୂସର ବଟନ୍, ଏକ ଅର୍ଥଗତ କାର୍ଯ୍ୟ କିମ୍ବା ବ୍ୟବହାର ସହିତ ବନ୍ଧା ନୁହେଁ \|
	`btn btn-link`	ବଟନ୍ ଆଚରଣକୁ ବଜାୟ ରଖିବାବେଳେ ଏହାକୁ ଏକ ଲିଙ୍କ୍ ପରି ଦେଖାଇ ଏକ ବଟନ୍ କୁ ଡିମାଫାଇଜ୍ କରନ୍ତୁ \|

ବ୍ରାଉଜର୍ ସୁସଙ୍ଗତତା କ୍ରସ୍ କରନ୍ତୁ |

IE9 ଗୋଲାକାର କୋଣରେ ପୃଷ୍ଠଭୂମି ଗ୍ରେଡିଏଣ୍ଟଗୁଡିକ ଫସଲ କରେ ନାହିଁ, ତେଣୁ ଆମେ ଏହାକୁ ଅପସାରଣ କରୁ | ସମ୍ବନ୍ଧିତ, IE9 ଅକ୍ଷମ buttonଉପାଦାନଗୁଡ଼ିକୁ ଜଙ୍କିଫାଏ କରେ, ଏକ ଖରାପ ପାଠ୍ୟ-ଛାୟା ସହିତ ଟେକ୍ସଟ୍ ଧୂସର ରଙ୍ଗ ଦେଇଥାଏ ଯାହାକୁ ଆମେ ଠିକ କରିପାରିବୁ ନାହିଁ |

ବଟନ୍ ଆକାର |

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

<p>
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-large btn-primary" type = "button" > ବଡ଼ ବଟନ୍ </button>  
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-large" ପ୍ରକାର = "ବଟନ୍" > ବଡ଼ ବଟନ୍ </button> |  
</p>
<p>
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn- ପ୍ରାଥମିକ" ପ୍ରକାର = "ବଟନ୍" > ଡିଫଲ୍ଟ ବଟନ୍ </button> |  
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn" ପ୍ରକାର = "ବଟନ୍" > ଡିଫଲ୍ଟ ବଟନ୍ </button> |  
</p>
<p>
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-small btn-primary" type = "button" > ଛୋଟ ବଟନ୍ </button>  
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-small" ପ୍ରକାର = "ବଟନ୍" > ଛୋଟ ବଟନ୍ </button> |  
</p>
<p>
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-mini btn- ପ୍ରାଥମିକ" ପ୍ରକାର = "ବଟନ୍" > ମିନି ବଟନ୍ </button>  
  <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-mini" ପ୍ରକାର = "ବଟନ୍" > ମିନି ବଟନ୍ </button> |  
</p>

ଯୋଗକରି ବ୍ଲକ ସ୍ତରର ବଟନ୍ଗୁଡ଼ିକ ସୃଷ୍ଟି କରନ୍ତୁ - ଯାହା ଏକ ପିତାମାତାଙ୍କର ସମ୍ପୂର୍ଣ୍ଣ ଓସାରକୁ ବିସ୍ତାର କରେ .btn-block|

<ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-large btn-block btn-primary" type = "button" > ବ୍ଲକ ସ୍ତର ବଟନ୍ </button>  
<ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-large btn-block" type = "button" > ବ୍ଲକ ସ୍ତର ବଟନ୍ </button>

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

ବଟନ୍ଗୁଡ଼ିକୁ 50% ଫେଡ୍ କରି ଅନାବଶ୍ୟକ ଦେଖାଯାଉ |

ଆଙ୍କର୍ ଉପାଦାନ |

ବଟନ୍ ଗୁଡିକରେ .disabledକ୍ଲାସ୍ ଯୋଡନ୍ତୁ |<a>

ପ୍ରାଥମିକ ଲିଙ୍କ୍ | ଲିଙ୍କ୍ |

<a href = "#" class = "btn btn-large btn-primary disabled"> ପ୍ରାଥମିକ ଲିଙ୍କ </a>  
<a href = "#" class = "btn btn-large disabled"> ଲିଙ୍କ୍ </a> |

ମୁଣ୍ଡ ଉପରକୁ!ଆମେ .disabledଏଠାରେ ଏକ ୟୁଟିଲିଟି କ୍ଲାସ୍ ଭାବରେ ବ୍ୟବହାର କରୁ, ସାଧାରଣ .activeଶ୍ରେଣୀ ପରି, ତେଣୁ କ pref ଣସି ଉପସର୍ଗ ଆବଶ୍ୟକ ନାହିଁ | ଆହୁରି ମଧ୍ୟ, ଏହି ଶ୍ରେଣୀଟି କେବଳ ସ est ନ୍ଦର୍ଯ୍ୟକରଣ ପାଇଁ ଅଟେ; ଏଠାରେ ଲିଙ୍କ୍ ଅକ୍ଷମ କରିବାକୁ ଆପଣ ନିଶ୍ଚିତ ଭାବରେ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରିବେ |

ବଟନ୍ ଉପାଦାନ |

ବଟନ୍ ରେ disabledଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ |<button>

<ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn btn-large btn- ପ୍ରାଥମିକ ଅକ୍ଷମ" ଅକ୍ଷମ = "ଅକ୍ଷମ" > ପ୍ରାଥମିକ ବଟନ୍ </button>   
<ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn btn-large" ଅକ୍ଷମ > ବଟନ୍ </button>

ଗୋଟିଏ ଶ୍ରେଣୀ, ଏକାଧିକ ଟ୍ୟାଗ୍ |

ଏକ , କିମ୍ବା ଉପାଦାନରେ .btnକ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ |<a><button><input>

<a class = "btn" href = ""> ଲିଙ୍କ୍ </a> |  
<ବଟନ୍ ଶ୍ରେଣୀ = "btn" ପ୍ରକାର = "ଦାଖଲ" > ବଟନ୍ </button> |  
<input class = "btn" type = "button" value = "Input" > |   
<ଇନପୁଟ୍ ଶ୍ରେଣୀ = "btn" ପ୍ରକାର = "ଦାଖଲ" ମୂଲ୍ୟ = "ଦାଖଲ" > |

ଏକ ସର୍ବୋତ୍ତମ ଅଭ୍ୟାସ ଭାବରେ, କ୍ରସ୍ ବ୍ରାଉଜର୍ ରେଣ୍ଡରିଂ ସହିତ ମେଳ ଖାଇବାକୁ ନିଶ୍ଚିତ କରିବାକୁ ତୁମର ପ୍ରସଙ୍ଗ ପାଇଁ ଉପାଦାନ ସହିତ ମେଳ କରିବାକୁ ଚେଷ୍ଟା କର | ଯଦି ଆପଣଙ୍କର ଅଛି , ଆପଣଙ୍କର ବଟନ୍ ପାଇଁ inputଏକ ବ୍ୟବହାର କରନ୍ତୁ |<input type="submit">

<img>ଯେକ any ଣସି ପ୍ରୋଜେକ୍ଟରେ ସହଜରେ ପ୍ରତିଛବି ଶ style ଳୀ କରିବାକୁ ଏକ ଉପାଦାନରେ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ |

<img src = "..." ଶ୍ରେଣୀ = "img-rounded" > |  
<img src = "..." ଶ୍ରେଣୀ = "img-circle" > |  
<img src = "..." ଶ୍ରେଣୀ = "img-polaroid" > |

ମୁଣ୍ଡ ଉପରକୁ! .img-roundedଏବଂ ସମର୍ଥନ .img-circleଅଭାବ ହେତୁ IE7-8 ରେ କାମ କରନ୍ତୁ ନାହିଁ border-radius|

ଆଇକନ୍ ଗ୍ଲାଇଫସ୍ |

ସ୍ପ୍ରିଟ୍ ଫର୍ମରେ 140 ଆଇକନ୍, ଗାଲିଫିକ୍ସ ଦ୍ୱାରା ପ୍ରଦତ୍ତ ଗା dark ଧୂସର (ଡିଫଲ୍ଟ) ଏବଂ ଧଳା ରଙ୍ଗରେ ଉପଲବ୍ଧ |

ଆଇକନ୍-ଗ୍ଲାସ୍ |
ଆଇକନ୍-ମ୍ୟୁଜିକ୍ |
ଆଇକନ୍-ସନ୍ଧାନ |
ଆଇକନ୍-ଏନଭଲପ୍ |
ଆଇକନ୍-ହୃଦୟ
ଆଇକନ୍-ଷ୍ଟାର୍ |
ଆଇକନ୍-ଷ୍ଟାର୍-ଖାଲି |
ଆଇକନ୍-ୟୁଜର୍ |
ଆଇକନ୍-ଫିଲ୍ମ |
ଆଇକନ୍-ଥ-ବଡ |
ଆଇକନ୍- th
ଆଇକନ୍-ଥ-ତାଲିକା |
ଆଇକନ୍-ଓକେ |
ଆଇକନ୍-ଅପସାରଣ |
ଆଇକନ୍-ଜୁମ୍-ଇନ୍ |
ଆଇକନ୍-ଜୁମ୍-ଆଉଟ୍ |
ଆଇକନ୍ ଅଫ୍ |
ଆଇକନ୍-ସଙ୍କେତ
ଆଇକନ୍-କଗ୍
ଆଇକନ୍-ଆବର୍ଜନା |
ଆଇକନ୍-ହୋମ୍ |
ଆଇକନ୍-ଫାଇଲ୍ |
ଆଇକନ୍-ଟାଇମ୍ |
ଆଇକନ୍-ରୋଡ୍ |
icon-download-alt
ଆଇକନ୍-ଡାଉନଲୋଡ୍ |
ଆଇକନ୍-ଅପଲୋଡ୍ |
ଆଇକନ୍-ଇନବକ୍ସ |
ଆଇକନ୍-ପ୍ଲେ-ସର୍କଲ୍ |
ଆଇକନ୍-ପୁନରାବୃତ୍ତି |
ଆଇକନ୍-ସତେଜ |
icon-list-alt
ଆଇକନ୍-ଲକ୍ |
ଆଇକନ୍-ଫ୍ଲାଗ୍ |
ଆଇକନ୍-ହେଡଫୋନ୍ |
ଆଇକନ୍-ଭଲ୍ୟୁମ୍ ଅଫ୍ |
ଆଇକନ୍-ଭଲ୍ୟୁମ୍-ଡାଉନ୍ |
ଆଇକନ୍-ଭଲ୍ୟୁମ୍-ଅପ୍ |
ଆଇକନ୍- qrcode
ଆଇକନ୍-ବାରକୋଡ୍ |
ଆଇକନ୍-ଟ୍ୟାଗ୍ |
ଆଇକନ୍-ଟ୍ୟାଗ୍ |
ଆଇକନ୍-ବୁକ୍ |
ଆଇକନ୍-ବୁକମାର୍କ |
ଆଇକନ୍-ପ୍ରିଣ୍ଟ୍ |
ଆଇକନ୍-କ୍ୟାମେରା |
ଆଇକନ୍-ଫଣ୍ଟ୍ |
ଆଇକନ୍-ବୋଲ୍ଡ |
ଆଇକନ୍-ଇଟାଲିକ୍ |
ଆଇକନ୍-ଟେକ୍ସଟ୍-ଉଚ୍ଚତା |
ଆଇକନ୍-ଟେକ୍ସଟ୍-ଓସାର |
ଆଇକନ୍-ଆଲାଇନ୍-ବାମ |
ଆଇକନ୍-ଆଲାଇନ୍-ସେଣ୍ଟର୍ |
ଆଇକନ୍-ଆଲାଇନ୍-ଡାହାଣ |
ଆଇକନ୍-ଆଲାଇନ୍-ଯଥାର୍ଥ |
ଆଇକନ୍-ତାଲିକା |
ଆଇକନ୍-ଇଣ୍ଡେଣ୍ଟ-ବାମ
ଆଇକନ୍-ଇଣ୍ଡେଣ୍ଟ-ଡାହାଣ |
ଆଇକନ୍-ଫେସ୍ ଟାଇମ୍-ଭିଡିଓ |
ଆଇକନ୍-ଛବି |
ଆଇକନ୍-ପେନ୍ସିଲ୍ |
ଆଇକନ୍-ମାନଚିତ୍ର-ମାର୍କର |
ଆଇକନ୍-ଆଡଜଷ୍ଟ୍ |
ଆଇକନ୍-ଟିଣ୍ଟ୍ |
ଆଇକନ୍-ଏଡିଟ୍ |
ଆଇକନ୍-ସେୟାର୍ |
ଆଇକନ୍-ଯାଞ୍ଚ |
ଆଇକନ୍-ମୁଭ୍ |
ଆଇକନ୍-ଷ୍ଟେପ୍-ପଛୁଆ |
ଆଇକନ୍-ଦ୍ରୁତ-ପଛୁଆ |
ଆଇକନ୍-ପଛୁଆ
ଆଇକନ୍-ପ୍ଲେ |
ଆଇକନ୍-ବିରାମ |
ଆଇକନ୍-ଷ୍ଟପ୍ |
ଆଇକନ୍-ଫରୱାର୍ଡ |
ଆଇକନ୍-ଦ୍ରୁତ-ଅଗ୍ରଗାମୀ |
ଆଇକନ୍-ଷ୍ଟେପ୍-ଫରୱାର୍ଡ |
ଆଇକନ୍-ନିର୍ଗତ
ଆଇକନ୍-ସେଭ୍ରନ୍-ବାମ |
ଆଇକନ୍-ସେଭ୍ରନ୍-ଡାହାଣ |
ଆଇକନ୍-ପ୍ଲସ୍-ସାଇନ୍ |
ଆଇକନ୍-ମାଇନସ୍-ସାଇନ୍ |
ଆଇକନ୍-ଅପସାରଣ-ଚିହ୍ନ |
ଆଇକନ୍-ଓକେ-ସାଇନ୍ |
ଆଇକନ୍-ପ୍ରଶ୍ନ-ଚିହ୍ନ |
ଆଇକନ୍-ସୂଚନା-ଚିହ୍ନ |
ଆଇକନ୍-ସ୍କ୍ରିନସଟ୍ |
ଆଇକନ୍-ଅପସାରଣ-ବୃତ୍ତ |
ଆଇକନ୍-ଓକ-ସର୍କଲ୍ |
ଆଇକନ୍-ବ୍ୟାନ୍-ସର୍କଲ୍ |
ଆଇକନ୍-ତୀର-ବାମ
ଆଇକନ୍-ତୀର-ଡାହାଣ |
ଆଇକନ୍-ତୀର-ଅପ୍ |
ଆଇକନ୍-ତୀର-ଡାଉନ୍ |
icon-share-alt
ଆଇକନ୍-ଆକାର-ପୂର୍ଣ୍ଣ |
ଆଇକନ୍-ଆକାର-ଛୋଟ |
ଆଇକନ୍-ପ୍ଲସ୍ |
ଆଇକନ୍-ମାଇନସ୍
ଆଇକନ୍-ଆଷ୍ଟେରିସ୍କ |
ଆଇକନ୍-ବିସ୍ମୟ-ଚିହ୍ନ |
ଆଇକନ୍-ଉପହାର
ଆଇକନ୍-ପତ୍ର |
ଆଇକନ୍-ଅଗ୍ନି |
ଆଇକନ୍-ଆଖି ଖୋଲା |
ଆଇକନ୍-ଆଖି ବନ୍ଦ |
ଆଇକନ୍-ଚେତାବନୀ-ଚିହ୍ନ |
ଆଇକନ୍-ପ୍ଲେନ୍ |
ଆଇକନ୍-କ୍ୟାଲେଣ୍ଡର
ଆଇକନ୍-ରାଣ୍ଡମ୍ |
ଆଇକନ୍-ମନ୍ତବ୍ୟ
ଆଇକନ୍-ଚୁମ୍ବକ
ଆଇକନ୍-ସେଭ୍ରନ୍ ଅପ୍ |
ଆଇକନ୍-ସେଭ୍ରନ୍-ଡାଉନ୍ |
ଆଇକନ୍-ରିଟ୍ୱିଟ୍ |
ଆଇକନ୍-ସପିଂ-କାର୍ଟ |
ଆଇକନ୍-ଫୋଲ୍ଡର୍-ବନ୍ଦ |
ଆଇକନ୍-ଫୋଲ୍ଡର୍-ଖୋଲା |
ଆଇକନ୍-ଆକାର-ଭୂଲମ୍ବ |
ଆଇକନ୍-ଆକାର-ଭୂସମାନ୍ତର |
ଆଇକନ୍- hdd
ଆଇକନ୍-ଷଣ୍
ଆଇକନ୍-ବେଲ୍ |
ଆଇକନ୍-ସାର୍ଟିଫିକେଟ୍
ଆଇକନ୍-ଥମ୍-ଅପ୍ |
ଆଇକନ୍-ଆଙ୍ଗୁଠି-ଡାଉନ୍ |
ଆଇକନ୍-ହାତ-ଡାହାଣ |
ଆଇକନ୍-ହାତ-ବାମ
ଆଇକନ୍-ହ୍ୟାଣ୍ଡ-ଅପ୍ |
ଆଇକନ୍-ହ୍ୟାଣ୍ଡ-ଡାଉନ୍ |
ଆଇକନ୍-ସର୍କଲ୍-ତୀର-ଡାହାଣ |
ଆଇକନ୍-ସର୍କଲ୍-ତୀର-ବାମ |
ଆଇକନ୍-ସର୍କଲ୍-ତୀର-ଅପ୍ |
ଆଇକନ୍-ସର୍କଲ୍-ତୀର-ଡାଉନ୍ |
ଆଇକନ୍-ଗ୍ଲୋବ |
ଆଇକନ୍-ରେଞ୍ଚ୍ |
ଆଇକନ୍-ଟାସ୍କ |
ଆଇକନ୍-ଫିଲ୍ଟର୍ |
ଆଇକନ୍-ସଂକ୍ଷିପ୍ତ
ଆଇକନ୍-ଫୁଲ୍ ସ୍କ୍ରିନ୍ |

ଗ୍ଲାଇଫିକନ୍ ଗୁଣ

ଗ୍ଲାଇଫିକନ୍ ହାଫଲିଙ୍ଗ ସାଧାରଣତ free ମାଗଣାରେ ଉପଲବ୍ଧ ନୁହେଁ, କିନ୍ତୁ ବୁଟଷ୍ଟ୍ରାପ୍ ଏବଂ ଗ୍ଲାଇଫିକନ୍ ସୃଷ୍ଟିକର୍ତ୍ତାଙ୍କ ମଧ୍ୟରେ ଏକ ବ୍ୟବସ୍ଥା ଏହାକୁ ବିକାଶକାରୀ ଭାବରେ ବିନା ମୂଲ୍ୟରେ ସମ୍ଭବ କରିପାରିଛି | ଧନ୍ୟବାଦ ଭାବରେ, ଯେତେବେଳେ ଆମେ ବ୍ୟବହାରିକ ସେତେବେଳେ ଗ୍ଲାଇଫିକନ୍ସକୁ ଏକ ଇଚ୍ଛାଧୀନ ଲିଙ୍କ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ କହିଥାଉ |

କିପରି ବ୍ୟବହାର କରିବେ |

ସମସ୍ତ ଆଇକନ୍ଗୁଡ଼ିକ <i>ଏକ ସ୍ୱତନ୍ତ୍ର ଶ୍ରେଣୀ ସହିତ ଏକ ଟ୍ୟାଗ୍ ଆବଶ୍ୟକ କରେ, ଯାହା ସହିତ ଉପସର୍ଗ କରାଯାଏ icon-| ବ୍ୟବହାର କରିବାକୁ, ନିମ୍ନଲିଖିତ ସଂକେତକୁ ଯେକ anywhere ଣସି ସ୍ଥାନରେ ରଖନ୍ତୁ:

<i ଶ୍ରେଣୀ = "ଆଇକନ୍-ସନ୍ଧାନ" > </i> |

ଗୋଟିଏ ଅତିରିକ୍ତ ଶ୍ରେଣୀ ସହିତ ପ୍ରସ୍ତୁତ ଓଲଟା (ଧଳା) ଆଇକନ୍ ପାଇଁ ମଧ୍ୟ ଶ yles ଳୀ ଉପଲବ୍ଧ | ନାଭ୍ ଏବଂ ଡ୍ରପ୍ ଡାଉନ୍ ଲିଙ୍କ୍ ପାଇଁ ଆମେ ଏହି ଶ୍ରେଣୀକୁ ହୋଭର ଏବଂ ସକ୍ରିୟ ରାଜ୍ୟ ଉପରେ ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ କାର୍ଯ୍ୟକାରୀ କରିବୁ |

<i ଶ୍ରେଣୀ = "ଆଇକନ୍-ସନ୍ଧାନ ଆଇକନ୍-ଧଳା" > </i> |

ମୁଣ୍ଡ ଉପରକୁ!ବଟନ୍ କିମ୍ବା ନାଭ୍ ଲିଙ୍କ୍ ପରି ପାଠ୍ୟର ଷ୍ଟ୍ରିଙ୍ଗ୍ ପାଖରେ ବ୍ୟବହାର କରିବାବେଳେ, <i>ସଠିକ୍ ବ୍ୟବଧାନ ପାଇଁ ଟ୍ୟାଗ୍ ପରେ ଏକ ସ୍ଥାନ ଛାଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

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

ଏକ ଟୁଲ୍ ବାର୍, ନାଭିଗେସନ୍, କିମ୍ବା ପ୍ରିପେଣ୍ଡେଡ୍ ଫର୍ମ ଇନପୁଟ୍ ପାଇଁ ସେଗୁଡ଼ିକୁ ବଟନ୍, ବଟନ୍ ଗ୍ରୁପ୍ ରେ ବ୍ୟବହାର କରନ୍ତୁ |

ବଟନ୍

ଏକ ବଟନ୍ ଟୁଲ୍ ବାର୍ ରେ ବଟନ୍ ଗୋଷ୍ଠୀ |

<div class = "btn-toolbar" > | 
  <div class = "btn-group" > | 
    <a class = "btn" href = "#"> <i class = "icon-align-left" > </i> </a>   
    <a class = "btn" href = "#"> <i class = "icon-align-center" > </i> </a> |   
    <a class = "btn" href = "#"> <i class = "icon-align-right" > </i> </a> |   
    <a class = "btn" href = "#"> <i class = "icon-align-justify" > </i> </a>   
  </div>
</div>

ଏକ ବଟନ୍ ଗ୍ରୁପ୍ ରେ ଡ୍ରପ୍ ଡାଉନ୍ |

ଉପଯୋଗକର୍ତ୍ତା |

<div class = "btn-group" > | 
  <a class = "btn btn-primary" href = "#"> <i class = "icon-user icon-white" > </i> ବ୍ୟବହାରକାରୀ </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#"> <span class = "caret" > </span> </a>    
  <ul class = "dropdown-menu" > | 
    <li> <a href = "#"> <i class = "icon-pencil" > </i> ସଂପାଦନା </a> </li> |  
    <li> <a href = "#"> <i class = "icon-trash" > </i> ଡିଲିଟ୍ </a> </li> |  
    <li> <a href = "#"> <i class = "ଆଇକନ୍-ବ୍ୟାନ୍-ସର୍କଲ୍" > </i> ବ୍ୟାନ୍ </a> </li> |  
    <li class = "divider" > </li> 
    <li> <a href = "#"> <i class = "i" > </i> ଆଡମିନି ପ୍ରସ୍ତୁତ କରନ୍ତୁ </a> </li>  
  </ul>
</div>

ବଟନ୍ ଆକାର |

ତାରା ତାରା ତାରା

<a class = "btn btn-large" href = "#"> <i class = "icon-star" > </i> ତାରା </a>   
<a class = "btn btn-small" href = "#"> <i class = "icon-star" > </i> ତାରା </a>   
<a class = "btn btn-mini" href = "#"> <i class = "icon-star" > </i> ତାରା </a>

ନାଭିଗେସନ୍

<ul class = "nav nav-list" > | 
  <li class = "active" > <a href = "#"> <i class = "icon-home icon-white" > </i> ଘର </a> </li>   
  <li> <a href = "#"> <i class = "icon-book" > </i> ଲାଇବ୍ରେରୀ </a> </li> |  
  <li> <a href = "#"> <i class = "ଆଇକନ୍-ପେନ୍ସିଲ୍" > </i> ପ୍ରୟୋଗଗୁଡିକ </a> </li> |  
  <li> <a href = "#"> <i class = "i" > </i> ବିବିଧ </a> </li> |  
</ul>

ଫର୍ମ ଫିଲ୍ଡଗୁଡିକ |

<div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ-ଗୋଷ୍ଠୀ" > | 
  = "ଇନପୁଟ୍ ଆଇକନ୍" > ଇମେଲ୍ ଠିକଣା </label> ପାଇଁ <label class = "control-label" |  
  <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ" > | 
    <div class = "input-prepend" > | 
      <span class = "add-on" > <i class = "icon-envelope" > </i> </span> |  
      <input class = "span2" id = "inputIcon" type = "text" > |   
    </div>
  </div>
</div>

ଟାଇପୋଗ୍ରାଫି |

ଶିରୋନାମା

h1 ହେଡିଙ୍ଗ୍ 1

h2। ହେଡିଙ୍ଗ୍ 2

h3। ଶୀର୍ଷଲେଖ 3

h4। ହେଡିଙ୍ଗ୍ 4

h5। ହେଡିଙ୍ଗ୍ 5

h6। ହେଡିଙ୍ଗ୍ 6

ଶରୀର କପି |

ଲିଡ୍ ବଡି କପି |

କମ୍ ସହିତ ନିର୍ମିତ |

ଗୁରୁତ୍। |

<small>

ବୋଲ୍ଡ |

ଇଟାଲିକ୍ |

ଶ୍ରେଣୀବଦ୍ଧ ଶ୍ରେଣୀଗୁଡିକ |

କ୍ଲାସ୍ ଉପରେ ଗୁରୁତ୍ୱ ଦିଅନ୍ତୁ |

ସଂକ୍ଷିପ୍ତକରଣ

<abbr>

<abbr class="initialism">

ଠିକଣା

<address>

ବ୍ଲକକୋଟସ୍ |

ଡିଫଲ୍ଟ ବ୍ଲକକୋଟ |

ବ୍ଲକକୋଟ୍ ବିକଳ୍ପଗୁଡିକ |

ଏକ ଉତ୍ସ ନାମକରଣ |

ବ display କଳ୍ପିକ ପ୍ରଦର୍ଶନ

ତାଲିକା |

ଅନିୟମିତ |

ଅର୍ଡର |

ଅଣସଂରକ୍ଷିତ |

କ୍ରମରେ

ବର୍ଣ୍ଣନା

ଭୂସମାନ୍ତର ବର୍ଣ୍ଣନା

କୋଡ୍

କ୍ରମରେ

ମ Basic ଳିକ ବ୍ଲକ

ଟେବୁଲ୍ |

ଡିଫଲ୍ଟ ଶ yles ଳୀ |

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

.table-striped

.table-bordered

.table-hover

.table-condensed

ବ row କଳ୍ପିକ ଧାଡି ଶ୍ରେଣୀଗୁଡ଼ିକ |

ସମର୍ଥିତ ଟେବୁଲ୍ ମାର୍କଅପ୍ |

ଫର୍ମଗୁଡିକ

ଡିଫଲ୍ଟ ଶ yles ଳୀ |

ବ tion କଳ୍ପିକ ଲେଆଉଟ୍ |

ସନ୍ଧାନ ଫର୍ମ |

ଇନଲାଇନ ଫର୍ମ |

ଭୂସମାନ୍ତର ଫର୍ମ |

ସମର୍ଥିତ ଫର୍ମ ନିୟନ୍ତ୍ରଣ |

ଇନପୁଟ୍

ଟେକ୍ସଟେରିଆ |

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

ଡିଫଲ୍ଟ (ଷ୍ଟାକ୍ଡ୍)

ଇନଲାଇନ୍ ଚେକ୍ ବକ୍ସଗୁଡିକ |

ଚୟନ କରେ |

ଫର୍ମ ନିୟନ୍ତ୍ରଣ ବିସ୍ତାର କରିବା |

ପ୍ରିପେଡ୍ ଏବଂ ଯୋଡା ଯାଇଥିବା ଇନପୁଟ୍ |

ଡିଫଲ୍ଟ ବିକଳ୍ପଗୁଡ଼ିକ

ମିଶ୍ରିତ |

ପାଠ ପରିବର୍ତ୍ତେ ବଟନ୍ |

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

ସେଗମେଣ୍ଟେଡ୍ ଡ୍ରପ୍ ଡାଉନ୍ ଗ୍ରୁପ୍ |

ସନ୍ଧାନ ଫର୍ମ |

ନିୟନ୍ତ୍ରଣ ଆକାର

ସ୍ତରର ନିବେଶକୁ ଅବରୋଧ କରନ୍ତୁ |

ଆପେକ୍ଷିକ ଆକାର

ଗ୍ରୀଡ୍ ଆକାର

ଅବିଭକ୍ତ ଇନପୁଟ୍ |

କାର୍ଯ୍ୟଗୁଡିକ ଫର୍ମ କରନ୍ତୁ |

ସାହାଯ୍ୟ ପାଠ

ଇନଲାଇନ୍ ସହାୟତା

ସହାୟତା ଅବରୋଧ କରନ୍ତୁ |

ଫର୍ମ ନିୟନ୍ତ୍ରଣ ଅବସ୍ଥା |

ଇନପୁଟ୍ ଫୋକସ୍ |

ଅବ val ଧ ନିବେଶ |

ଇନପୁଟ୍ ଅକ୍ଷମ ହୋଇଛି |

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`