ଆଧାର CSS

ସ୍କାଫୋଲ୍ଡିଙ୍ଗ୍ ଉପରେ, ମ basic ଳିକ HTML ଉପାଦାନଗୁଡିକ ଏକ ସତେଜ, ସ୍ଥିର ଦୃଶ୍ୟ ଏବଂ ଅନୁଭବ ଯୋଗାଇବା ପାଇଁ ବିସ୍ତାରିତ ଶ୍ରେଣୀଗୁଡ଼ିକ ସହିତ ଷ୍ଟାଇଲ୍ ଏବଂ ବର୍ଦ୍ଧିତ |

ହେଡିଙ୍ଗ୍ ଏବଂ ଶରୀର କପି |

ଟାଇପୋଗ୍ରାଫିକ୍ ସ୍କେଲ୍ |

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

ଆମର ସମସ୍ତ ପ୍ରକାରର ମାର୍ଜିନ, ପ୍ୟାଡିଂ, ଏବଂ ଲାଇନ-ଉଚ୍ଚତା ସୃଷ୍ଟି କରିବାକୁ ଆମେ ସେହି ଭେରିଏବଲ୍, ଏବଂ କିଛି ଗଣିତ ବ୍ୟବହାର କରୁ |

ଶରୀରର ପାଠ୍ୟର ଉଦାହରଣ |

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 ultricies vehicula ut id elit।

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor | ଡୁଇସ୍ ମଲିସ୍, ଇଷ୍ଟ ନନ୍ କମୋଡୋ ଲକ୍ଟସ୍, ନିସି ଏରାଟ ପୋର୍ଟଟିଟର୍ ଲିଗୁଲା, ଇଜେଟ୍ ଲାସିନିଆ ଓଡିଓ ସେମ ନେକ୍ ଏଲିଟ୍ | Donec sed odio dui |

h1 ହେଡିଙ୍ଗ୍ 1

h2। ହେଡିଙ୍ଗ୍ 2

h3। ଶୀର୍ଷଲେଖ 3

h4। ହେଡିଙ୍ଗ୍ 4

h5। ହେଡିଙ୍ଗ୍ 5

h6। ହେଡିଙ୍ଗ୍ 6

ଗୁରୁତ୍ୱ, ଠିକଣା, ଏବଂ ସଂକ୍ଷିପ୍ତକରଣ |

ଉପାଦାନ	ବ୍ୟବହାର	ବ tion କଳ୍ପିକ
`<strong>`	ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ସହିତ ପାଠ୍ୟର ଏକ ସ୍ନିପେଟ୍ ଉପରେ ଗୁରୁତ୍ୱ ଦେବା ପାଇଁ \|	କିଛି ନୁହେଁ \|
`<em>`	ଚାପ ସହିତ ପାଠ୍ୟର ଏକ ସ୍ନିପେଟ୍ ଉପରେ ଗୁରୁତ୍ୱ ଦେବା ପାଇଁ \|	କିଛି ନୁହେଁ \|
`<abbr>`	ହୋଭରରେ ବିସ୍ତାରିତ ସଂସ୍କରଣ ଦେଖାଇବା ପାଇଁ ସଂକ୍ଷିପ୍ତକରଣ ଏବଂ ଆକ୍ଷରିକ ଶବ୍ଦ ଗୁଡ଼ାଏ \|	`title`ବିସ୍ତାରିତ ପାଠ୍ୟ ପାଇଁ ବ al କଳ୍ପିକ ଗୁଣ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ \| `.initialism`ବଡ଼ ଅକ୍ଷର ସଂକ୍ଷିପ୍ତକରଣ ପାଇଁ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ \|
`<address>`	ଏହାର ନିକଟତମ ପିତୃପୁରୁଷ କିମ୍ବା କାର୍ଯ୍ୟର ସମ୍ପୂର୍ଣ୍ଣ ଶରୀର ପାଇଁ ଯୋଗାଯୋଗ ସୂଚନା ପାଇଁ \|	ସମସ୍ତ ରେଖା ସହିତ ସମାପ୍ତ କରି ଫର୍ମାଟିଂ ସଂରକ୍ଷଣ କରନ୍ତୁ \|`<br>`

ଗୁରୁତ୍ୱ ବ୍ୟବହାର କରି |

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus | Maecenas faucibus mollis interdum | Nulla vitae elit libero, a pharetra augue।

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

ଉଦାହରଣ ଠିକଣା

<address>ଟ୍ୟାଗ୍ କିପରି ବ୍ୟବହାର କରାଯାଇପାରିବ ତାହାର ଦୁଇଟି ଉଦାହରଣ ଏଠାରେ ଅଛି :

ଟ୍ୱିଟର , Inc.
_
_

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

ଉଦାହରଣ ସଂକ୍ଷିପ୍ତ

ଏକ ଗୁଣ ସହିତ ସଂକ୍ଷିପ୍ତକରଣଗୁଡ଼ିକରେ titleହାଲୁକା ବିନ୍ଦୁ ତଳ ସୀମା ଏବଂ ହୋଭରରେ ଏକ ହେଲପ୍ କର୍ସର୍ ଅଛି | ଏହା ଉପଭୋକ୍ତାମାନଙ୍କୁ ଅତିରିକ୍ତ ସୂଚକ ଦେଇଥାଏ ଯାହାକି ହୋଭରରେ କିଛି ଦେଖାଯିବ |

initialismଟାଇପୋଗ୍ରାଫିକ୍ ସ harmony ହାର୍ଦ୍ଦ୍ୟକୁ ଟିକେ ଛୋଟ ପାଠ୍ୟ ଆକାର ଦେଇ ଶ୍ରେଣୀକୁ ଏକ ସଂକ୍ଷିପ୍ତରେ ଯୋଡନ୍ତୁ |

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

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

ବ୍ଲକକୋଟସ୍ |

ଉପାଦାନ	ବ୍ୟବହାର	ବ tion କଳ୍ପିକ
`<blockquote>`	ଅନ୍ୟ ଉତ୍ସରୁ ବିଷୟବସ୍ତୁ ଉଦ୍ଧୃତ କରିବା ପାଇଁ ବ୍ଲକ ସ୍ତରୀୟ ଉପାଦାନ \|	`cite`ଉତ୍ସ URL ପାଇଁ ଗୁଣ ଯୋଡନ୍ତୁ \| ଫ୍ଲୋଟେଡ୍ ଅପ୍ସନ୍ ପାଇଁ କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ `.pull-left`\|`.pull-right`
`<small>`	ଏକ ଉପଭୋକ୍ତା ମୁହାଁମୁହିଁ ଯୋଗକରିବା ପାଇଁ ବ element କଳ୍ପିକ ଉପାଦାନ, ସାଧାରଣତ work କାର୍ଯ୍ୟର ଆଖ୍ୟା ବିଶିଷ୍ଟ ଲେଖକ \|	`<cite>`ଉତ୍ସର ଆଖ୍ୟା କିମ୍ବା ନାମର ଚାରିପାଖରେ ରଖନ୍ତୁ \|

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

ତୁମର ଉତ୍ସକୁ ଦର୍ଶାଇବା ପାଇଁ ଏକ ଇଚ୍ଛାଧୀନ ଉପାଦାନ ଅନ୍ତର୍ଭୂକ୍ତ କର ଏବଂ ଷ୍ଟାଇଲିଂ ଉଦ୍ଦେଶ୍ୟରେ <small>ତୁମେ ଏହା ପୂର୍ବରୁ ଏକ ଏମ୍ ଡ୍ୟାସ୍ ପାଇବ |—

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

ଉଦାହରଣ ବ୍ଲକକୋଟ୍ |

ଡିଫଲ୍ଟ ବ୍ଲକକୋଟଗୁଡିକ ଏହିପରି ଷ୍ଟାଇଲ୍ ହୋଇଛି:

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

ଆପଣଙ୍କର ବ୍ଲକକୋଟକୁ ଡାହାଣକୁ ଭାସିବାକୁ, ଯୋଗ କରନ୍ତୁ class="pull-right":

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

ତାଲିକା |

ଅନିୟମିତ |

<ul>

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

ଅଣସଂରକ୍ଷିତ |

<ul class="unstyled">

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

ଅର୍ଡର |

<ol>

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

ବର୍ଣ୍ଣନା

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

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

<dl class="dl-horizontal">

ବର୍ଣ୍ଣନା ତାଲିକା |: ସର୍ତ୍ତାବଳୀ ବ୍ୟାଖ୍ୟା କରିବା ପାଇଁ ଏକ ବର୍ଣ୍ଣନା ତାଲିକା ଉପଯୁକ୍ତ |
ଇଉଜିମୋଡ୍ |: ଭେଷ୍ଟିବୁଲମ୍ 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 |

କ୍ରମରେ

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

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

ମ Basic ଳିକ ବ୍ଲକ

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

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

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

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

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

ଗୁଗୁଲ୍ ସୁନ୍ଦର

ସମାନ <pre>ଉପାଦାନ ନିଅ ଏବଂ ବର୍ଦ୍ଧିତ ରେଣ୍ଡରିଂ ପାଇଁ ଦୁଇଟି ବ al କଳ୍ପିକ ଶ୍ରେଣୀ ଯୋଗ କର |

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

<pre class = "prettyprint 
     linenums " >
  & lt; p & gt; ଏଠାରେ ନମୁନା ପାଠ ... & lt; / p & gt;
</pre>

ଗୁଗୁଲ୍-କୋଡ୍-ପ୍ରିଫାଇଟ୍ ଡାଉନଲୋଡ୍ କରନ୍ତୁ ଏବଂ କିପରି ବ୍ୟବହାର କରାଯିବ ତାହା ପାଇଁ ରିଡମେ ଦେଖନ୍ତୁ |

ଟେବୁଲ୍ ମାର୍କଅପ୍ |

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

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

ସାରଣୀ ବିକଳ୍ପଗୁଡ଼ିକ |

ନାମ	କ୍ଲାସ୍	ବର୍ଣ୍ଣନା
ଡିଫଲ୍ଟ \|	କିଛି ନୁହେଁ \|	କ st ଣସି ଶ yles ଳୀ ନାହିଁ, କେବଳ ସ୍ତମ୍ଭ ଏବଂ ଧାଡି \|
ମ Basic ଳିକ	`.table`	ଧାଡିଗୁଡ଼ିକ ମଧ୍ୟରେ କେବଳ ଭୂସମାନ୍ତର ରେଖା \|
ସୀମାନ୍ତ	`.table-bordered`	ଗୋଲାକାର କୋଣ ଏବଂ ବାହ୍ୟ ସୀମା ଯୋଗ କରେ \|
ଜେବ୍ରା-ଷ୍ଟ୍ରାଇପ୍ \|	`.table-striped`	ଅଦ୍ଭୁତ ଧାଡିରେ ହାଲୁକା ଧୂସର ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ଯୋଗ କରେ (1, 3, 5, ଇତ୍ୟାଦି)
ଘନୀଭୂତ \|	`.table-condensed`	`td`ସମସ୍ତ ଏବଂ `th`ଉପାଦାନ ମଧ୍ୟରେ, 8px ରୁ 4px ପର୍ଯ୍ୟନ୍ତ, ଭର୍ଟିକାଲ୍ ପ୍ୟାଡିଂକୁ ଅଧା କାଟନ୍ତୁ \|

ଉଦାହରଣ ସାରଣୀଗୁଡ଼ିକ |

1. ଡିଫଲ୍ଟ ଟେବୁଲ୍ ଶ yles ଳୀ |

ପଠନୀୟତାକୁ ସୁନିଶ୍ଚିତ କରିବା ଏବଂ ଗଠନକୁ ବଜାୟ ରଖିବା ପାଇଁ ଟେବୁଲଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ କେବଳ କିଛି ସୀମା ସହିତ ଷ୍ଟାଇଲ୍ ହୋଇଛି | 2.0 ସହିତ, .tableକ୍ଲାସ୍ ଆବଶ୍ୟକ |

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

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

2. ଷ୍ଟ୍ରାଇଡ୍ ଟେବୁଲ୍ |

ଜେବ୍ରା-ଷ୍ଟ୍ରିପିଂ ଯୋଗ କରି ତୁମର ଟେବୁଲ ସହିତ ଟିକିଏ କଳ୍ପନା କର - କେବଳ .table-stripedଶ୍ରେଣୀ ଯୋଡ |

ଟିପନ୍ତୁ: ଷ୍ଟ୍ରାଇଡ୍ ଟେବୁଲଗୁଡିକ :nth-childCSS ଚୟନକର୍ତ୍ତା ବ୍ୟବହାର କରନ୍ତି ଏବଂ IE7-IE8 ରେ ଉପଲବ୍ଧ ନୁହେଁ |

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

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

3. ସୀମାନ୍ତ ଟେବୁଲ୍ |

ସ a ନ୍ଦର୍ଯ୍ୟମୂଳକ ଉଦ୍ଦେଶ୍ୟ ପାଇଁ ସମଗ୍ର ଟେବୁଲ୍ ଏବଂ ଗୋଲାକାର କୋଣରେ ସୀମା ଯୋଡନ୍ତୁ |

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

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

4. ଘନୀଭୂତ ଟେବୁଲ୍ |

.table-condensedଟେବୁଲ୍ ସେଲ୍ ପ୍ୟାଡିଂକୁ ଅଧା (8px ରୁ 4px ପର୍ଯ୍ୟନ୍ତ) କାଟିବା ପାଇଁ କ୍ଲାସ୍ ଯୋଗ କରି ଆପଣଙ୍କର ଟେବୁଲଗୁଡ଼ିକୁ ଅଧିକ କମ୍ପାକ୍ଟ କରନ୍ତୁ |

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

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

5. ସେଗୁଡିକୁ ଏକତ୍ର କର!

ଯେକ available ଣସି ଉପଲବ୍ଧ କ୍ଲାସ୍କୁ ବ୍ୟବହାର କରି ଭିନ୍ନ ଚେହେରା ହାସଲ କରିବା ପାଇଁ ଯେକ any ଣସି ଟେବୁଲ୍ କ୍ଲାସଗୁଡିକୁ ଯୋଡ଼ିବାକୁ ମୁକ୍ତ ହୁଅନ୍ତୁ |

<ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ଟେବୁଲ୍ ଟେବୁଲ୍-ଷ୍ଟ୍ରାଇଡ୍ ଟେବୁଲ୍-ସୀମାନ୍ତ ଟେବୁଲ୍-ଘନୀଭୂତ" > | 
  ...
</table>

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

ନମନୀୟ HTML ଏବଂ CSS |

ବୁଟଷ୍ଟ୍ରାପରେ ଫର୍ମଗୁଡିକ ବିଷୟରେ ସର୍ବୋତ୍ତମ ଅଂଶ ହେଉଛି ଯେ ଆପଣଙ୍କର ମାର୍କଅପ୍ ରେ ଆପଣ କିପରି ନିର୍ମାଣ କରନ୍ତି ନା କାହିଁକି ଆପଣଙ୍କର ସମସ୍ତ ଇନପୁଟ୍ ଏବଂ କଣ୍ଟ୍ରୋଲ୍ ବହୁତ ଭଲ ଦେଖାଯାଏ | କ super ଣସି ଅତିରିକ୍ତ HTML ଆବଶ୍ୟକ ନାହିଁ, କିନ୍ତୁ ଯେଉଁମାନେ ଏହା ଆବଶ୍ୟକ କରନ୍ତି ଆମେ ସେମାନଙ୍କ ପାଇଁ s ାଞ୍ଚା ପ୍ରଦାନ କରୁ |

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

ଚାରୋଟି ଲେଆଉଟ୍ ଅନ୍ତର୍ଭୁକ୍ତ |

ଚାରି ପ୍ରକାରର ଫର୍ମ ଲେଆଉଟ୍ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ସମର୍ଥନ ସହିତ ଆସେ:

ଭୂଲମ୍ବ (ଡିଫଲ୍ଟ)
ସନ୍ଧାନ କର |
କ୍ରମରେ
ଭୂସମାନ୍ତର

ବିଭିନ୍ନ ପ୍ରକାରର ଫର୍ମ ଲେଆଉଟ୍ ମାର୍କଅପ୍ ପାଇଁ କିଛି ପରିବର୍ତ୍ତନ ଆବଶ୍ୟକ କରେ, କିନ୍ତୁ ନିୟନ୍ତ୍ରଣ ନିଜେ ରହିଥାଏ ଏବଂ ସମାନ ଆଚରଣ କରେ |

ନିୟନ୍ତ୍ରଣ ସ୍ଥିତି ଏବଂ ଅଧିକ |

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

ପ୍ରତ୍ୟେକ ପ୍ରକାର ଫର୍ମ ନିୟନ୍ତ୍ରଣ ପାଇଁ ତ୍ରୁଟି, ଚେତାବନୀ ଏବଂ ସଫଳତା ପରି ରାଜ୍ୟଗୁଡିକ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି | ଅକ୍ଷମ ନିୟନ୍ତ୍ରଣ ପାଇଁ ଶ yles ଳୀ ମଧ୍ୟ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି |

ଚାରି ପ୍ରକାରର ଫର୍ମ |

ସାଧାରଣ ୱେବ୍ ଫର୍ମର ଚାରୋଟି ଶ yles ଳୀ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ସରଳ ମାର୍କଅପ୍ ଏବଂ ଶ yles ଳୀ ପ୍ରଦାନ କରେ |

ନାମ	କ୍ଲାସ୍	ବର୍ଣ୍ଣନା
ଭୂଲମ୍ବ (ଡିଫଲ୍ଟ)	`.form-vertical` (ଦରକାର ନାହିଁ)	ନିୟନ୍ତ୍ରଣ ଉପରେ ଷ୍ଟାକ୍ ହୋଇଥିବା, ବାମ-ଆଲାଇନ୍ ଲେବଲ୍ \|
କ୍ରମରେ	`.form-inline`	କମ୍ପାକ୍ଟ ଶ style ଳୀ ପାଇଁ ବାମ-ଆଲାଇନ୍ ଲେବଲ୍ ଏବଂ ଇନଲାଇନ-ବ୍ଲକ୍ ନିୟନ୍ତ୍ରଣ \|
ସନ୍ଧାନ କର \|	`.form-search`	ଏକ ସାଧାରଣ ସନ୍ଧାନ ନ est ତିକତା ପାଇଁ ଅତିରିକ୍ତ ଗୋଲାକାର ପାଠ୍ୟ ଇନପୁଟ୍ \|
ଭୂସମାନ୍ତର	`.form-horizontal`	ନିୟନ୍ତ୍ରଣ ସହିତ ସମାନ ଧାଡିରେ ବାମ, ଡାହାଣ-ଆଲାଇନ୍ ଲେବଲ୍ ଭାସନ୍ତୁ \|

କେବଳ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ବ୍ୟବହାର କରି ଉଦାହରଣ ଫର୍ମ , କ extra ଣସି ଅତିରିକ୍ତ ମାର୍କଅପ୍ ନାହିଁ |

ମ Basic ଳିକ ଫର୍ମ |

V2.0 ସହିତ, ଫର୍ମ ଶ yles ଳୀ ପାଇଁ ଆମର ହାଲୁକା ଏବଂ ସ୍ମାର୍ଟ ଡିଫଲ୍ଟ ଅଛି | କ extra ଣସି ଅତିରିକ୍ତ ମାର୍କଅପ୍ ନାହିଁ, କେବଳ ଫର୍ମ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |

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

ସନ୍ଧାନ ଫର୍ମ |

ଡିଫଲ୍ଟ ୱେବ୍ କିଟ୍ ଶ yles ଳୀକୁ ପ୍ରତିଫଳିତ କରି, କେବଳ .form-searchଅତିରିକ୍ତ ଗୋଲାକାର ସନ୍ଧାନ କ୍ଷେତ୍ର ପାଇଁ ଯୋଗ କରନ୍ତୁ |

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

ଇନଲାଇନ ଫର୍ମ |

ଆରମ୍ଭ କରିବାକୁ ଇନପୁଟ୍ ଗୁଡିକ ବ୍ଲକ ସ୍ତର ଅଟେ | .form-inlineଏବଂ , .form-horizontalଆମେ ଇନଲାଇନ-ବ୍ଲକ୍ ବ୍ୟବହାର କରୁ |

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

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

ବୁଟଷ୍ଟ୍ରାପ୍ ସମର୍ଥନକୁ ନିୟନ୍ତ୍ରଣ କରିଥାଏ |

ପାଠ୍ୟ ଇନପୁଟ୍ |

ଫ୍ରିଫର୍ମ ଟେକ୍ସଟ୍ ସହିତ, ଯେକ any ଣସି HTML5 ପାଠ୍ୟ-ଆଧାରିତ ଇନପୁଟ୍ ସେପରି ଦେଖାଯାଏ |

ଚେକ୍ ବକ୍ସ |

ବିକଳ୍ପଟି ହେଉଛି ଏହା ଏବଂ ତାହା - ଏହା କାହିଁକି ଉତ୍ତମ ତାହା ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

ତାଲିକା ଚୟନ କରନ୍ତୁ |

ମଲ୍ଟିକନ୍-ସିଲେକ୍ଟ |

ଫାଇଲ୍ ଇନପୁଟ୍ |

ଟେକ୍ସଟେରିଆ |

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

ଉପରୋକ୍ତ ଉଦାହରଣ ଫର୍ମ ଲେଆଉଟ୍ ପ୍ରଦାନ କରି, ଏଠାରେ ପ୍ରଥମ ଇନପୁଟ୍ ଏବଂ କଣ୍ଟ୍ରୋଲ୍ ଗ୍ରୁପ୍ ସହିତ ଜଡିତ ମାର୍କଅପ୍ ଅଛି | ଷ୍ଟାଇଲ୍ ପାଇଁ .control-group,, .control-labelଏବଂ .controlsକ୍ଲାସ୍ ସବୁ ଆବଶ୍ୟକ |

<ଫର୍ମ ଶ୍ରେଣୀ = "ଫର୍ମ-ଭୂସମାନ୍ତର" > | 
  <ଫିଲ୍ଡସେଟ୍> |
    <legend> କିମ୍ବଦନ୍ତୀ ପାଠ୍ୟ </legend> |
    <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ-ଗୋଷ୍ଠୀ" > | 
      <label class = "control-label" ପାଇଁ = "input01" > ପାଠ୍ୟ ଇନପୁଟ୍ </label> ପାଇଁ |  
      <div ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ" > | 
        <input type = "text" class = "input-xlarge" id = "input01" > |   
        <p class = "help-block" > ସହାୟତା ପାଠ୍ୟକୁ ସମର୍ଥନ </ p> | 
      </div>
    </div>
  </fieldset>
</form>

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

ବାମରେ ପ୍ରଦର୍ଶିତ ହେଉଛି ଆମେ ସମର୍ଥନ କରୁଥିବା ସମସ୍ତ ଡିଫଲ୍ଟ ଫର୍ମ ନିୟନ୍ତ୍ରଣ | ଏଠାରେ ବୁଲେଟେଡ୍ ତାଲିକା ଅଛି:

ପାଠ୍ୟ ଇନପୁଟ୍ (ପାଠ୍ୟ, ପାସୱାର୍ଡ, ଇମେଲ୍, ଇତ୍ୟାଦି)
ଚେକ୍ ବକ୍ସ
ରେଡିଓ
ଚୟନ କରନ୍ତୁ |
ଏକାଧିକ ଚୟନ କରନ୍ତୁ |
ଫାଇଲ୍ ଇନପୁଟ୍ |
ପାଠ୍ୟ

V2.0 ସହିତ ନୂତନ ଡିଫଲ୍ଟ |

V1.4 ପର୍ଯ୍ୟନ୍ତ, ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ଫର୍ମ ଶ yles ଳୀଗୁଡ଼ିକ ଭୂସମାନ୍ତର ଲେଆଉଟ୍ ବ୍ୟବହାର କରିଥିଲେ | ବୁଟଷ୍ଟ୍ରାପ୍ 2 ସହିତ, ଯେକ any ଣସି ଫର୍ମ ପାଇଁ ଅଧିକ ଚତୁର, ଅଧିକ ମାପନୀୟ ଡିଫଲ୍ଟ ରହିବା ପାଇଁ ଆମେ ସେହି ପ୍ରତିବନ୍ଧକକୁ ଅପସାରଣ କରିଛୁ |

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

ଫୋକସ୍ ହୋଇଥିବା ଇନପୁଟ୍ |

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

ଏଠାରେ କିଛି ମୂଲ୍ୟ |

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

ଚେକ୍ ବକ୍ସ ଅକ୍ଷମ କରାଯାଇଛି |

ଏହା ଏକ ଅକ୍ଷମ ଚେକ୍ ବକ୍ସ |

ଚେତାବନୀ ସହିତ ଇନପୁଟ୍ |

କିଛି ଭୁଲ ହୋଇଥାଇପାରେ |

ତ୍ରୁଟି ସହିତ ଇନପୁଟ୍ |

ଦୟାକରି ତ୍ରୁଟି ସଂଶୋଧନ କରନ୍ତୁ |

ସଫଳତା ସହିତ ଇନପୁଟ୍ |

ଓହୋ!

ସଫଳତା ସହିତ ଚୟନ କରନ୍ତୁ |

ଓହୋ!

ପୁନ igned ନିର୍ମିତ ବ୍ରାଉଜର୍ ଦର୍ଶାଏ |

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

ଫର୍ମ ବ valid ଧତା |

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

<ଫିଲ୍ଡସେଟ୍ |
  ଶ୍ରେଣୀ = "ନିୟନ୍ତ୍ରଣ-ଗୋଷ୍ଠୀ ତ୍ରୁଟି" > |
  …
</fieldset>

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

ଗ୍ରୀଡ୍ ଆକାରଗୁଡିକ ଫର୍ମ କରନ୍ତୁ |

.span*ଇନପୁଟ୍ ଆକାର ପାଇଁ ଗ୍ରୀଡ୍ ସିଷ୍ଟମରୁ ସମାନ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ |

ବିକଳ୍ପ ଆକାର |

ଆପଣ ଷ୍ଟାଟିକ୍ କ୍ଲାସ୍ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ ଯାହା ଗ୍ରୀଡ୍ ସହିତ ମାନଚିତ୍ର କରେ ନାହିଁ, ପ୍ରତିକ୍ରିୟାଶୀଳ CSS ଶ yles ଳୀ ସହିତ ଖାପ ଖାଏ, କିମ୍ବା ବିଭିନ୍ନ ପ୍ରକାରର ନିୟନ୍ତ୍ରଣ ପାଇଁ ଆକାଉଣ୍ଟ୍ (ଯଥା, inputବନାମ select) |

ପ୍ରିପେଡ୍ ଟେକ୍ସଟ୍ |

ଏଠାରେ କିଛି ସାହାଯ୍ୟ ପାଠ ଅଛି |

ଯୋଡା ଯାଇଥିବା ପାଠ |

.00

ଏଠାରେ ଅଧିକ ସାହାଯ୍ୟ ପାଠ ଅଛି |

ଯୋଡନ୍ତୁ ଏବଂ ପ୍ରିପେଣ୍ଡ୍ କରନ୍ତୁ |

$ .00

ବଟନ୍ ସହିତ ଯୋଡନ୍ତୁ |

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

୧ ୨ 3

ଚେକ୍ ବକ୍ସଗୁଡିକ |

ବିକଳ୍ପଟି ହେଉଛି ଏହା ଏବଂ ତାହା - ଏହା କାହିଁକି ଉତ୍ତମ ତାହା ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ | ବିକଳ୍ପ ଦୁଇଟି ମଧ୍ୟ ଯାଞ୍ଚ କରାଯାଇପାରିବ ଏବଂ ଫର୍ମ ଫଳାଫଳରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇପାରିବ | ବିକଳ୍ପ ତିନୋଟି ହୋଇପାରେ - ହଁ, ଆପଣ ଏହା ଅନୁମାନ କରିଛନ୍ତି - ଯାଞ୍ଚ କରାଯାଇ ଫର୍ମ ଫଳାଫଳରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇପାରେ |

ଟିପନ୍ତୁ: ଲେବଲ୍ ଗୁଡିକ ବହୁତ ବଡ କ୍ଲିକ୍ କ୍ଷେତ୍ର ଏବଂ ଏକ ଅଧିକ ଉପଯୋଗୀ ଫର୍ମ ପାଇଁ ସମସ୍ତ ବିକଳ୍ପକୁ ଘେରି ରହିଥାଏ |

ରେଡିଓ ବଟନ୍ |

ବିକଳ୍ପଟି ହେଉଛି ଏହା ଏବଂ ତାହା - ଏହା କାହିଁକି ଉତ୍ତମ ତାହା ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ | ଅପ୍ସନ୍ ଦୁଇଟି ଅନ୍ୟ କିଛି ହୋଇପାରେ ଏବଂ ଏହାକୁ ଚୟନ କରିବା ଦ୍ୱାରା ଅପ୍ସନ୍ ଏକକୁ ଡିଲିଟ୍ କରିବ |

ଇନପୁଟ୍ ଗୁଡିକୁ ଯୋଡନ୍ତୁ ଏବଂ ଯୋଡନ୍ତୁ |

ଇନପୁଟ୍ ଗୋଷ୍ଠୀଗୁଡିକ - ସଂଲଗ୍ନିତ କିମ୍ବା ପ୍ରିପେଣ୍ଡେଡ୍ ଟେକ୍ସଟ୍ ସହିତ - ଆପଣଙ୍କ ଇନପୁଟ୍ ପାଇଁ ଅଧିକ ପ୍ରସଙ୍ଗ ଦେବା ପାଇଁ ଏକ ସହଜ ଉପାୟ ପ୍ରଦାନ କରେ | ଉତ୍ତମ ଉଦାହରଣଗୁଡିକ ଟ୍ୱିଟର ବ୍ୟବହାରକାରୀ ନାମ ପାଇଁ @ ଚିହ୍ନ କିମ୍ବା ଆର୍ଥିକ ପାଇଁ $ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |

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

V1.4 ପର୍ଯ୍ୟନ୍ତ, ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ଚାରିପାଖରେ ଅତିରିକ୍ତ ମାର୍କଅପ୍ ଆବଶ୍ୟକ କରେ | <label class="checkbox">ବର୍ତ୍ତମାନ, ଏହାକୁ ପୁନରାବୃତ୍ତି କରିବାର ଏକ ସରଳ ବିଷୟ <input type="checkbox">|

ଇନଲାଇନ୍ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ମଧ୍ୟ ସମର୍ଥିତ | କେବଳ ଯେକ .inlineany ଣସି ସହିତ .checkboxଯୋଡନ୍ତୁ .radioଏବଂ ଆପଣ ସମାପ୍ତ କରିଛନ୍ତି |

ଇନଲାଇନ୍ ଫର୍ମ ଏବଂ ଯୋଡନ୍ତୁ / ପ୍ରିପେଣ୍ଡ୍ କରନ୍ତୁ |

ଏକ ଇନଲାଇନ ଫର୍ମରେ ପ୍ରିପେଣ୍ଡ୍ କିମ୍ବା ଇନପୁଟ୍ ଯୋଡିବାକୁ , ସ୍ପେସ୍ ବିନା .add-onଏବଂ inputସମାନ ଧାଡିରେ ରଖିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

ଫର୍ମ ହେଲପ୍ ଟେକ୍ସଟ୍ |

ଆପଣଙ୍କର ଫର୍ମ ଇନପୁଟ୍ ପାଇଁ ହେଲପ୍ ଟେକ୍ସଟ୍ ଯୋଡିବାକୁ, ଇନପୁଟ୍ ହେଲପ୍ ଟେକ୍ସଟ୍ ସହିତ <span class="help-inline">କିମ୍ବା <p class="help-block">ଇନପୁଟ୍ ଉପାଦାନ ପରେ ଏକ ହେଲପ୍ ଟେକ୍ସଟ୍ ବ୍ଲକ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |

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

କାର୍ଯ୍ୟ ପାଇଁ ବଟନ୍ |

ଏକ ସମ୍ମିଳନୀ ଭାବରେ, ବଟନ୍ ଗୁଡିକ କେବଳ କାର୍ଯ୍ୟ ପାଇଁ ବ୍ୟବହୃତ ହେବା ଉଚିତ୍ ଯେତେବେଳେ ବସ୍ତୁଗୁଡ଼ିକ ପାଇଁ ହାଇପରଲିଙ୍କ୍ ବ୍ୟବହାର କରାଯାଏ | ଉଦାହରଣ ସ୍ୱରୂପ, “ଡାଉନଲୋଡ୍” ଏକ ବଟନ୍ ହେବାବେଳେ “ସାମ୍ପ୍ରତିକ କାର୍ଯ୍ୟକଳାପ” ଏକ ଲିଙ୍କ୍ ହେବା ଉଚିତ |

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

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

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

ଏକାଧିକ ଆକାର |

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

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

ଅକ୍ଷମ ବଟନଗୁଡ଼ିକ ପାଇଁ, .disabledଲିଙ୍କକୁ ଶ୍ରେଣୀ ଏବଂ ଉପାଦାନଗୁଡ଼ିକ disabledପାଇଁ ଗୁଣ ଯୋଗକର <button>|

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

ମୁଣ୍ଡ ଉପରକୁ! ଆମେ .disabledଏଠାରେ ଏକ ୟୁଟିଲିଟି କ୍ଲାସ୍ ଭାବରେ ବ୍ୟବହାର କରୁ, ସାଧାରଣ .activeଶ୍ରେଣୀ ପରି, ତେଣୁ କ pref ଣସି ଉପସର୍ଗ ଆବଶ୍ୟକ ନାହିଁ |

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

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

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

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

ଆଇକନ୍-ଗ୍ଲାସ୍ |
ଆଇକନ୍-ମ୍ୟୁଜିକ୍ |
ଆଇକନ୍-ସନ୍ଧାନ |
ଆଇକନ୍-ଏନଭଲପ୍ |
ଆଇକନ୍-ହୃଦୟ
ଆଇକନ୍-ଷ୍ଟାର୍ |
ଆଇକନ୍-ଷ୍ଟାର୍-ଖାଲି |
ଆଇକନ୍-ୟୁଜର୍ |
ଆଇକନ୍-ଫିଲ୍ମ |
ଆଇକନ୍-ଥ-ବଡ |
ଆଇକନ୍- th
ଆଇକନ୍-ଥ-ତାଲିକା |
ଆଇକନ୍-ଓକେ |
ଆଇକନ୍-ଅପସାରଣ |
ଆଇକନ୍-ଜୁମ୍-ଇନ୍ |
ଆଇକନ୍-ଜୁମ୍-ଆଉଟ୍ |
ଆଇକନ୍ ଅଫ୍ |
ଆଇକନ୍-ସଙ୍କେତ
ଆଇକନ୍-କଗ୍
ଆଇକନ୍-ଆବର୍ଜନା |
ଆଇକନ୍-ହୋମ୍ |
ଆଇକନ୍-ଫାଇଲ୍ |
ଆଇକନ୍-ଟାଇମ୍ |
ଆଇକନ୍-ରୋଡ୍ |
icon-download-alt
ଆଇକନ୍-ଡାଉନଲୋଡ୍ |
ଆଇକନ୍-ଅପଲୋଡ୍ |
ଆଇକନ୍-ଇନବକ୍ସ |
ଆଇକନ୍-ପ୍ଲେ-ସର୍କଲ୍ |
ଆଇକନ୍-ପୁନରାବୃତ୍ତି |

ଆଇକନ୍-ସତେଜ |
icon-list-alt
ଆଇକନ୍-ଲକ୍ |
ଆଇକନ୍-ଫ୍ଲାଗ୍ |
ଆଇକନ୍-ହେଡଫୋନ୍ |
ଆଇକନ୍-ଭଲ୍ୟୁମ୍ ଅଫ୍ |
ଆଇକନ୍-ଭଲ୍ୟୁମ୍-ଡାଉନ୍ |
ଆଇକନ୍-ଭଲ୍ୟୁମ୍-ଅପ୍ |
ଆଇକନ୍- qrcode
ଆଇକନ୍-ବାରକୋଡ୍ |
ଆଇକନ୍-ଟ୍ୟାଗ୍ |
ଆଇକନ୍-ଟ୍ୟାଗ୍ |
ଆଇକନ୍-ବୁକ୍ |
ଆଇକନ୍-ବୁକମାର୍କ |
ଆଇକନ୍-ପ୍ରିଣ୍ଟ୍ |
ଆଇକନ୍-କ୍ୟାମେରା |
ଆଇକନ୍-ଫଣ୍ଟ୍ |
ଆଇକନ୍-ବୋଲ୍ଡ |
ଆଇକନ୍-ଇଟାଲିକ୍ |
ଆଇକନ୍-ଟେକ୍ସଟ୍-ଉଚ୍ଚତା |
ଆଇକନ୍-ଟେକ୍ସଟ୍-ଓସାର |
ଆଇକନ୍-ଆଲାଇନ୍-ବାମ |
ଆଇକନ୍-ଆଲାଇନ୍-ସେଣ୍ଟର୍ |
ଆଇକନ୍-ଆଲାଇନ୍-ଡାହାଣ |
ଆଇକନ୍-ଆଲାଇନ୍-ଯଥାର୍ଥ |
ଆଇକନ୍-ତାଲିକା |
ଆଇକନ୍-ଇଣ୍ଡେଣ୍ଟ-ବାମ
ଆଇକନ୍-ଇଣ୍ଡେଣ୍ଟ-ଡାହାଣ |
ଆଇକନ୍-ଫେସ୍ ଟାଇମ୍-ଭିଡିଓ |
ଆଇକନ୍-ଛବି |

ଆଇକନ୍-ପେନ୍ସିଲ୍ |
ଆଇକନ୍-ମାନଚିତ୍ର-ମାର୍କର |
ଆଇକନ୍-ଆଡଜଷ୍ଟ୍ |
ଆଇକନ୍-ଟିଣ୍ଟ୍ |
ଆଇକନ୍-ଏଡିଟ୍ |
ଆଇକନ୍-ସେୟାର୍ |
ଆଇକନ୍-ଯାଞ୍ଚ |
ଆଇକନ୍-ମୁଭ୍ |
ଆଇକନ୍-ଷ୍ଟେପ୍-ପଛୁଆ |
ଆଇକନ୍-ଦ୍ରୁତ-ପଛୁଆ |
ଆଇକନ୍-ପଛୁଆ
ଆଇକନ୍-ପ୍ଲେ |
ଆଇକନ୍-ବିରାମ |
ଆଇକନ୍-ଷ୍ଟପ୍ |
ଆଇକନ୍-ଫରୱାର୍ଡ |
ଆଇକନ୍-ଦ୍ରୁତ-ଅଗ୍ରଗାମୀ |
ଆଇକନ୍-ଷ୍ଟେପ୍-ଫରୱାର୍ଡ |
ଆଇକନ୍-ନିର୍ଗତ
ଆଇକନ୍-ସେଭ୍ରନ୍-ବାମ |
ଆଇକନ୍-ସେଭ୍ରନ୍-ଡାହାଣ |
ଆଇକନ୍-ପ୍ଲସ୍-ସାଇନ୍ |
ଆଇକନ୍-ମାଇନସ୍-ସାଇନ୍ |
ଆଇକନ୍-ଅପସାରଣ-ଚିହ୍ନ |
ଆଇକନ୍-ଓକେ-ସାଇନ୍ |
ଆଇକନ୍-ପ୍ରଶ୍ନ-ଚିହ୍ନ |
ଆଇକନ୍-ସୂଚନା-ଚିହ୍ନ |
ଆଇକନ୍-ସ୍କ୍ରିନସଟ୍ |
ଆଇକନ୍-ଅପସାରଣ-ବୃତ୍ତ |
ଆଇକନ୍-ଓକ-ସର୍କଲ୍ |
ଆଇକନ୍-ବ୍ୟାନ୍-ସର୍କଲ୍ |

ଆଇକନ୍-ତୀର-ବାମ
ଆଇକନ୍-ତୀର-ଡାହାଣ |
ଆଇକନ୍-ତୀର-ଅପ୍ |
ଆଇକନ୍-ତୀର-ଡାଉନ୍ |
icon-share-alt
ଆଇକନ୍-ଆକାର-ପୂର୍ଣ୍ଣ |
ଆଇକନ୍-ଆକାର-ଛୋଟ |
ଆଇକନ୍-ପ୍ଲସ୍ |
ଆଇକନ୍-ମାଇନସ୍
ଆଇକନ୍-ଆଷ୍ଟେରିସ୍କ |
ଆଇକନ୍-ବିସ୍ମୟ-ଚିହ୍ନ |
ଆଇକନ୍-ଉପହାର
ଆଇକନ୍-ପତ୍ର |
ଆଇକନ୍-ଅଗ୍ନି |
ଆଇକନ୍-ଆଖି ଖୋଲା |
ଆଇକନ୍-ଆଖି ବନ୍ଦ |
ଆଇକନ୍-ଚେତାବନୀ-ଚିହ୍ନ |
ଆଇକନ୍-ପ୍ଲେନ୍ |
ଆଇକନ୍-କ୍ୟାଲେଣ୍ଡର
ଆଇକନ୍-ରାଣ୍ଡମ୍ |
ଆଇକନ୍-ମନ୍ତବ୍ୟ
ଆଇକନ୍-ଚୁମ୍ବକ
ଆଇକନ୍-ସେଭ୍ରନ୍ ଅପ୍ |
ଆଇକନ୍-ସେଭ୍ରନ୍-ଡାଉନ୍ |
ଆଇକନ୍-ରିଟ୍ୱିଟ୍ |
ଆଇକନ୍-ସପିଂ-କାର୍ଟ |
ଆଇକନ୍-ଫୋଲ୍ଡର୍-ବନ୍ଦ |
ଆଇକନ୍-ଫୋଲ୍ଡର୍-ଖୋଲା |
ଆଇକନ୍-ଆକାର-ଭୂଲମ୍ବ |
ଆଇକନ୍-ଆକାର-ଭୂସମାନ୍ତର |

ଏକ ସ୍ପ୍ରିଟ୍ ଭାବରେ ନିର୍ମିତ |

ପ୍ରତ୍ୟେକ ଆଇକନ୍ କୁ ଅତିରିକ୍ତ ଅନୁରୋଧ କରିବା ପରିବର୍ତ୍ତେ, ଆମେ ସେଗୁଡିକୁ ଏକ ସ୍ପ୍ରିଟ୍ ରେ ସଂକଳନ କରିଛୁ - ଗୋଟିଏ ଫାଇଲରେ ପ୍ରତିଛବିଗୁଡ଼ିକର ଏକ ଗୁଣ୍ଡ ଯାହା ପ୍ରତିଛବିଗୁଡ଼ିକୁ ସ୍ଥାନିତ କରିବା ପାଇଁ CSS ବ୍ୟବହାର କରେ background-position| ଟ୍ୱିଟର ଡଟ୍ କମରେ ଆମେ ବ୍ୟବହାର କରୁଥିବା ସମାନ ପଦ୍ଧତି ଏବଂ ଏହା ଆମ ପାଇଁ ଭଲ କାମ କରିଛି |

.icon-ଆମର ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ପରି ସଠିକ୍ ନାମ ସ୍ପେସ୍ ଏବଂ ସ୍କୋପିଂ ପାଇଁ ସମସ୍ତ ଆଇକନ୍ ଶ୍ରେଣୀଗୁଡ଼ିକ ଉପସର୍ଗ ହୋଇଛି | ଏହା ଅନ୍ୟ ଉପକରଣଗୁଡ଼ିକ ସହିତ ଦ୍ୱନ୍ଦ୍ୱକୁ ଏଡ଼ାଇବାରେ ସାହାଯ୍ୟ କରିବ |

ଗ୍ଲାଇଫିକନ୍ସ ଆମ ଖୋଲା ଉତ୍ସ ଟୁଲ୍କିଟରେ ସେଟ୍ ହୋଇଥିବା ହାଫଲିଙ୍ଗଗୁଡିକର ବ୍ୟବହାରକୁ ଅନୁମତି ଦେଇଛନ୍ତି ଯେପର୍ଯ୍ୟନ୍ତ ଆମେ ଡକସ୍ ରେ ଏକ ଲିଙ୍କ୍ ଏବଂ କ୍ରେଡିଟ୍ ପ୍ରଦାନ କରୁ | ଦୟାକରି ତୁମର ପ୍ରୋଜେକ୍ଟରେ ସମାନ କାର୍ଯ୍ୟ କରିବାକୁ ଚିନ୍ତା କର |

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

ସମସ୍ତ ଆଇକନ୍ ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଏକ <i>ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରେ, କିନ୍ତୁ ସେମାନଙ୍କର କ case ଣସି ଶ୍ରେଣୀ ନାହିଁ - କେବଳ ଏକ ଅଂଶୀଦାର ଉପସର୍ଗ | ବ୍ୟବହାର କରିବାକୁ, ନିମ୍ନଲିଖିତ ସଂକେତକୁ ଯେକ anywhere ଣସି ସ୍ଥାନରେ ରଖନ୍ତୁ:

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

ଗୋଟିଏ ଅତିରିକ୍ତ ଶ୍ରେଣୀ ସହିତ ପ୍ରସ୍ତୁତ ଓଲଟା (ଧଳା) ଆଇକନ୍ ପାଇଁ ଶ yles ଳୀ ମଧ୍ୟ ଉପଲବ୍ଧ:

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

ଆପଣଙ୍କ ଆଇକନ୍ ପାଇଁ ଚୟନ କରିବାକୁ 120 ଟି ଶ୍ରେଣୀ ଅଛି | ସଠିକ୍ ଶ୍ରେଣୀ ସହିତ କେବଳ ଏକ ଟ୍ୟାଗ୍ ଯୋଡନ୍ତୁ <i>ଏବଂ ଆପଣ ସେଟ୍ ହୋଇଛନ୍ତି | ଏହି ଡକ୍ୟୁମେଣ୍ଟରେ ଆପଣ sprites.less କିମ୍ବା ଠିକ୍ ଏଠାରେ ସମ୍ପୂର୍ଣ୍ଣ ତାଲିକା ପାଇପାରିବେ |

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

କେସ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ଆଇକନ୍ ଗୁଡିକ ବହୁତ ଭଲ, କିନ୍ତୁ ସେଗୁଡିକ କେଉଁଠାରେ ବ୍ୟବହାର କରିବେ? ଏଠାରେ କିଛି ଧାରଣା ଅଛି:

ତୁମର ପାର୍ଶ୍ୱ ପଟି ନାଭିଗେସନ୍ ପାଇଁ ଭିଜୁଆଲ୍ ଭାବରେ |
ଏକ ସମ୍ପୂର୍ଣ୍ଣ ଆଇକନ୍ ଚାଳିତ ନାଭିଗେସନ୍ ପାଇଁ |
ଏକ କାର୍ଯ୍ୟର ଅର୍ଥ ପହଞ୍ଚାଇବାରେ ସାହାଯ୍ୟ କରିବାକୁ ବଟନ୍ଗୁଡ଼ିକ ପାଇଁ |
ଏକ ଉପଭୋକ୍ତାଙ୍କର ଗନ୍ତବ୍ୟ ସ୍ଥଳରେ ପ୍ରସଙ୍ଗ ଅଂଶୀଦାର କରିବାକୁ ଲିଙ୍କ୍ ସହିତ |

ମୂଳତ।, ଯେକ anywhere ଣସି ସ୍ଥାନରେ ଆପଣ ଏକ <i>ଟ୍ୟାଗ୍ ରଖିପାରିବେ, ଆପଣ ଏକ ଆଇକନ୍ ରଖିପାରିବେ |

ଉଦାହରଣଗୁଡିକ

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

ଉପାଦାନ	ବ୍ୟବହାର	ବ tion କଳ୍ପିକ
`<strong>`	ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ସହିତ ପାଠ୍ୟର ଏକ ସ୍ନିପେଟ୍ ଉପରେ ଗୁରୁତ୍ୱ ଦେବା ପାଇଁ \|	କିଛି ନୁହେଁ \|
`<em>`	ଚାପ ସହିତ ପାଠ୍ୟର ଏକ ସ୍ନିପେଟ୍ ଉପରେ ଗୁରୁତ୍ୱ ଦେବା ପାଇଁ \|	କିଛି ନୁହେଁ \|
`<abbr>`	ହୋଭରରେ ବିସ୍ତାରିତ ସଂସ୍କରଣ ଦେଖାଇବା ପାଇଁ ସଂକ୍ଷିପ୍ତକରଣ ଏବଂ ଆକ୍ଷରିକ ଶବ୍ଦ ଗୁଡ଼ାଏ \|	`title`ବିସ୍ତାରିତ ପାଠ୍ୟ ପାଇଁ ବ al କଳ୍ପିକ ଗୁଣ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ \| `.initialism`ବଡ଼ ଅକ୍ଷର ସଂକ୍ଷିପ୍ତକରଣ ପାଇଁ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ \|
`<address>`	ଏହାର ନିକଟତମ ପିତୃପୁରୁଷ କିମ୍ବା କାର୍ଯ୍ୟର ସମ୍ପୂର୍ଣ୍ଣ ଶରୀର ପାଇଁ ଯୋଗାଯୋଗ ସୂଚନା ପାଇଁ \|	ସମସ୍ତ ରେଖା ସହିତ ସମାପ୍ତ କରି ଫର୍ମାଟିଂ ସଂରକ୍ଷଣ କରନ୍ତୁ \|`<br>`

ଟାଇପୋଗ୍ରାଫି ହେଡିଙ୍ଗ୍, ପାରାଗ୍ରାଫ୍, ତାଲିକା ଏବଂ ଅନ୍ୟାନ୍ୟ ଇନଲାଇନ ପ୍ରକାର ଉପାଦାନଗୁଡିକ |