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

ସମଗ୍ର ଟାଇପୋଗ୍ରାଫିକ୍ ଗ୍ରୀଡ୍ ଆମର ଭେରିଏବଲ୍.ଲେସ୍ ଫାଇଲ୍ ରେ ଦୁଇଟି କମ୍ ଭେରିଏବଲ୍ ଉପରେ @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 ଯାନବାହାନ |

ଲିଡ୍ ବଡି କପି |

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

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

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

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 ହେଉଛି ସର୍ବୋତ୍ତମ ଜିନିଷ |

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

ଏକ ବ୍ଲକ୍କୋଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ , କୋଟ୍ ଭାବରେ ଯେକ 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>

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

ବର୍ଣ୍ଣନା

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

Felis euismod semper eget lacinia |

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus |

---

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

କ୍ରମରେ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ନମନୀୟ HTML ଏବଂ CSS |

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

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

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

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

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

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

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

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

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

ମ Basic ଳିକ ଫର୍ମ |

ଅତିରିକ୍ତ ମାର୍କଅପ୍ ବିନା ସ୍ମାର୍ଟ ଏବଂ ହାଲୁକା ଡିଫଲ୍ଟ |

ଲେବଲ୍ ନାମ

ଉଦାହରଣ ବ୍ଲକ ସ୍ତରୀୟ ସହାୟତା ପାଠ୍ୟ ଏଠାରେ |

ମୋତେ ଯାଞ୍ଚ କରନ୍ତୁ | ଦାଖଲ କରନ୍ତୁ |

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

ସନ୍ଧାନ ଫର୍ମ |

ଫର୍ମରେ .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>

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

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

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

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

ଚେକ୍ ବକ୍ସ |

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

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

କିଛି ୨ 3 4 5

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

୧ ୨ 3 4 5

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

ଟେକ୍ସଟେରିଆ |

ପରିବର୍ତ୍ତନଗୁଡିକ ସଞ୍ଚୟ କରନ୍ତୁ | ବାତିଲ୍ କରନ୍ତୁ |

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

ଉପରୋକ୍ତ ଉଦାହରଣ ଫର୍ମ ଲେଆଉଟ୍ ପ୍ରଦାନ କରି, ଏଠାରେ ପ୍ରଥମ ଇନପୁଟ୍ ଏବଂ କଣ୍ଟ୍ରୋଲ୍ ଗ୍ରୁପ୍ ସହିତ ଜଡିତ ମାର୍କଅପ୍ ଅଛି | ଷ୍ଟାଇଲ୍ ପାଇଁ .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>

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

---

ଫର୍ମ ବ valid ଧତା |

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

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

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

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

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

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

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

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

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

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

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

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

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

ଓହୋ!

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

୧ ୨ 3 4 5 ଓହୋ!

ପରିବର୍ତ୍ତନଗୁଡିକ ସଞ୍ଚୟ କରନ୍ତୁ | ବାତିଲ୍ କରନ୍ତୁ |

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

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

---

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

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

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

---

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

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

---

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

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

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

୧ ୨ 3 4 5 ୧ ୨ 3 4 5 ୧ ୨ 3 4 5

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

ବିକଳ୍ପ ଆକାର |

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

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

@

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

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

.00

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

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

$ .00

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

ଯାଅ!

ଦୁଇ-ବଟନ୍ ଯୋଡନ୍ତୁ |

ସନ୍ଧାନ କର | ବିକଳ୍ପଗୁଡ଼ିକ

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

୧ ୨ 3

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

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

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

ରେଡିଓ ବଟନ୍ |

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

ପରିବର୍ତ୍ତନଗୁଡିକ ସଞ୍ଚୟ କରନ୍ତୁ | ବାତିଲ୍ କରନ୍ତୁ |

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

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

ପ୍ରୟୋଗ ହୋଇଥିବା ଶ୍ରେଣୀ ସହିତ ଯେକ 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
• ଆଇକନ୍-ଆକାର-ପୂର୍ଣ୍ଣ |
• ଆଇକନ୍-ଆକାର-ଛୋଟ |
• ଆଇକନ୍-ପ୍ଲସ୍ |
• ଆଇକନ୍-ମାଇନସ୍
• ଆଇକନ୍-ଆଷ୍ଟେରିସ୍କ |
• ଆଇକନ୍-ବିସ୍ମୟ-ଚିହ୍ନ |
• ଆଇକନ୍-ଉପହାର
• ଆଇକନ୍-ପତ୍ର |
• ଆଇକନ୍-ଅଗ୍ନି |
• ଆଇକନ୍-ଆଖି ଖୋଲା |

• ଆଇକନ୍-ଆଖି ବନ୍ଦ |
• ଆଇକନ୍-ଚେତାବନୀ-ଚିହ୍ନ |
• ଆଇକନ୍-ପ୍ଲେନ୍ |
• ଆଇକନ୍-କ୍ୟାଲେଣ୍ଡର
• ଆଇକନ୍-ରାଣ୍ଡମ୍ |
• ଆଇକନ୍-ମନ୍ତବ୍ୟ
• ଆଇକନ୍-ଚୁମ୍ବକ
• ଆଇକନ୍-ସେଭ୍ରନ୍ ଅପ୍ |
• ଆଇକନ୍-ସେଭ୍ରନ୍-ଡାଉନ୍ |
• ଆଇକନ୍-ରିଟ୍ୱିଟ୍ |
• ଆଇକନ୍-ସପିଂ-କାର୍ଟ |
• ଆଇକନ୍-ଫୋଲ୍ଡର୍-ବନ୍ଦ |
• ଆଇକନ୍-ଫୋଲ୍ଡର୍-ଖୋଲା |
• ଆଇକନ୍-ଆକାର-ଭୂଲମ୍ବ |
• ଆଇକନ୍-ଆକାର-ଭୂସମାନ୍ତର |
• ଆଇକନ୍- hdd
• ଆଇକନ୍-ଷଣ୍
• ଆଇକନ୍-ବେଲ୍ |
• ଆଇକନ୍-ସାର୍ଟିଫିକେଟ୍
• ଆଇକନ୍-ଥମ୍-ଅପ୍ |
• ଆଇକନ୍-ଆଙ୍ଗୁଠି-ଡାଉନ୍ |
• ଆଇକନ୍-ହାତ-ଡାହାଣ |
• ଆଇକନ୍-ହାତ-ବାମ
• ଆଇକନ୍-ହ୍ୟାଣ୍ଡ-ଅପ୍ |
• ଆଇକନ୍-ହ୍ୟାଣ୍ଡ-ଡାଉନ୍ |
• ଆଇକନ୍-ସର୍କଲ୍-ତୀର-ଡାହାଣ |
• ଆଇକନ୍-ସର୍କଲ୍-ତୀର-ବାମ |
• ଆଇକନ୍-ସର୍କଲ୍-ତୀର-ଅପ୍ |
• ଆଇକନ୍-ସର୍କଲ୍-ତୀର-ଡାଉନ୍ |
• ଆଇକନ୍-ଗ୍ଲୋବ |
• ଆଇକନ୍-ରେଞ୍ଚ୍ |
• ଆଇକନ୍-ଟାସ୍କ |
• ଆଇକନ୍-ଫିଲ୍ଟର୍ |
• ଆଇକନ୍-ସଂକ୍ଷିପ୍ତ
• ଆଇକନ୍-ଫୁଲ୍ ସ୍କ୍ରିନ୍ |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ସତେଜ କରନ୍ତୁ | ଚେକଆଉଟ୍ | ବିଲୋପ କରନ୍ତୁ |

ମନ୍ତବ୍ୟ ଦିଅନ୍ତୁ | ସେଟିଂସମୂହ ଅଧିକ ସୂଚନା

ଈମୈଲ ଠିକଣା