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

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

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

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

କଟା ରୁଟି ପରଠାରୁ 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 |

କ୍ରମରେ

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

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

ମ Basic ଳିକ ବ୍ଲକ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ନମନୀୟ HTML ଏବଂ CSS |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ଫର୍ମ ବ valid ଧତା |

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

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

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

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

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

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

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

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

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

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

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

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

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

ଆଙ୍କର୍ ଏବଂ ଫର୍ମ ପାଇଁ |

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

ଟିପନ୍ତୁ: ସମସ୍ତ ବଟନ୍ ଗୁଡିକ .btnଶ୍ରେଣୀ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଜରୁରୀ | ବଟନ୍ ଶ yles ଳୀଗୁଡିକ ପ୍ରୟୋଗ କରାଯିବା ଉଚିତ <button>ଏବଂ <a>ସ୍ଥିରତା ପାଇଁ ଉପାଦାନଗୁଡିକ |

ଏକାଧିକ ଆକାର |

ବଡ଼ କିମ୍ବା ଛୋଟ ବଟନ୍ କଳ୍ପନା? ଏଥିରେ ଅଛି!

ପ୍ରାଥମିକ କାର୍ଯ୍ୟ କାର୍ଯ୍ୟ

ପ୍ରାଥମିକ କାର୍ଯ୍ୟ କାର୍ଯ୍ୟ

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

ଅକ୍ଷମ ବଟନ୍ ପାଇଁ, .btn-disabledଲିଙ୍କ୍ ଏବଂ ଉପାଦାନ :disabledପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ <button>|

ପ୍ରାଥମିକ କାର୍ଯ୍ୟ କାର୍ଯ୍ୟ

ପ୍ରାଥମିକ କାର୍ଯ୍ୟ କାର୍ଯ୍ୟ

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

IE9 ରେ, ଆମେ ଗୋଲାକାର କୋଣ ସପକ୍ଷରେ ସମସ୍ତ ବଟନ୍ ଉପରେ ଗ୍ରେଡିଏଣ୍ଟ୍ ପକାଇଥାଉ କାରଣ IE9 କୋଣରେ ପୃଷ୍ଠଭୂମି ଗ୍ରେଡିଏଣ୍ଟ୍ କ୍ରପ୍ କରେ ନାହିଁ |

ସମ୍ବନ୍ଧିତ, IE9 ଅକ୍ଷମ buttonଉପାଦାନଗୁଡ଼ିକୁ ଜଙ୍କିଫାଏ କରେ, ଏକ ଖରାପ ପାଠ୍ୟ-ଛାୟା ସହିତ ପାଠ୍ୟ ଧୂସର ରଙ୍ଗ ପ୍ରଦାନ କରେ - ଦୁର୍ଭାଗ୍ୟବଶତ we ଆମେ ଏହାକୁ ଠିକ୍ କରିପାରିବୁ ନାହିଁ |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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