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

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

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

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	ଲ୍ୟାରି ଦି ବାର୍ଡ |		@ ଟ୍ୱିଟର

ଉପଲବ୍ଧ ଶ୍ରେଣୀର ଯେକ using ଣସି ଉପଯୋଗ କରି ବିଭିନ୍ନ ଚେହେରା ହାସଲ କରିବାକୁ ଯେକ any ଣସି ଟେବୁଲ୍ କ୍ଲାସ୍କୁ ମିଶ୍ରଣ କରିବାକୁ ମୁକ୍ତ ମନେ କର |

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

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

ନମନୀୟ HTML ଏବଂ CSS |

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

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

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

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

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

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

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

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଫର୍ମଗୁଡିକ ଇନପୁଟ୍, ଟେକ୍ସଟେରିଆ ପରି ସମସ୍ତ ବେସ୍ ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍ ପାଇଁ ଶ 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ଭର୍ଟିକାଲ୍ ଆଲାଇନ୍ମେଣ୍ଟ୍ ଏବଂ ଫର୍ମ କଣ୍ଟ୍ରୋଲର ବ୍ୟବଧାନକୁ ସ iness ନ୍ଦର୍ଯ୍ୟରେ ଯୋଡନ୍ତୁ |

ମୋତେ ମନେ ରଖିବେ ଚୁକ୍ତି କରିବା

<ଫର୍ମ ଶ୍ରେଣୀ = "ଭଲ ଫର୍ମ-ଇନଲାଇନ" > | 
  <ଇନପୁଟ୍ ପ୍ରକାର = "ପାଠ୍ୟ" ଶ୍ରେଣୀ = "ଇନପୁଟ୍-ଛୋଟ" ସ୍ଥାନଧାରୀ = "ଇମେଲ୍" > |   
  <ଇନପୁଟ୍ ପ୍ରକାର = "ପାସୱାର୍ଡ" ଶ୍ରେଣୀ = "ଇନପୁଟ୍-ଛୋଟ" ସ୍ଥାନଧାରୀ = "ପାସୱାର୍ଡ" > |   
  <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

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

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

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

ରେଡିଓ ବଟନ୍ |

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

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

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

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

ପ୍ରୟୋଗ ହୋଇଥିବା ଶ୍ରେଣୀ ସହିତ ଯେକ 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> | 

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

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

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

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

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

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

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

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

ଈମୈଲ ଠିକଣା