ଟ୍ୱିଟର ବୁଟଷ୍ଟ୍ରାପ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ ହେଉଛି ଟ୍ୱିଟରରୁ ଏକ ଟୁଲ୍କିଟ୍ ଯାହା ୱେବ୍ ଆପ୍ ଏବଂ ସାଇଟଗୁଡିକର କିକଷ୍ଟାର୍ଟ ବିକାଶ ପାଇଁ ଡିଜାଇନ୍ ହୋଇଛି |
ଟାଇପୋଗ୍ରାଫି, ଫର୍ମ, ବଟନ୍, ଟେବୁଲ୍, ଗ୍ରୀଡ୍, ନାଭିଗେସନ୍ ଏବଂ ଅଧିକ ପାଇଁ ଏଥିରେ ଆଧାର CSS ଏବଂ HTML ଅନ୍ତର୍ଭୁକ୍ତ |

ନର୍ଡ ଆଲର୍ଟ: ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ କମ୍ ସହିତ ନିର୍ମିତ ଏବଂ କେବଳ ଆଧୁନିକ ବ୍ରାଉଜରକୁ ଦୃଷ୍ଟିରେ ରଖି ଗେଟ୍ ବାହାରେ କାମ କରିବା ପାଇଁ ଡିଜାଇନ୍ କରାଯାଇଥିଲା |

CSS କୁ ହଟଲିଙ୍କ୍ କରନ୍ତୁ |

ଶୀଘ୍ର ଏବଂ ସହଜ ଆରମ୍ଭ ପାଇଁ, କେବଳ ଏହି ୱେବପେଜରେ ଏହି ସ୍ନିପେଟ୍ କପି କରନ୍ତୁ |

ଏହାକୁ କମ୍ ସହିତ ବ୍ୟବହାର କରନ୍ତୁ |

କମ୍ ବ୍ୟବହାର କରିବାର ପ୍ରଶଂସକ? କ problem ଣସି ଅସୁବିଧା ନାହିଁ, କେବଳ ରେପୋକୁ କ୍ଲୋନ କରନ୍ତୁ ଏବଂ ଏହି ରେଖାଗୁଡ଼ିକୁ ଯୋଡନ୍ତୁ:

GitHub ରେ ଫର୍କ |

Github ରେ ଅଫିସିଆଲ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ରେପୋ ସହିତ ଡାଉନଲୋଡ୍, ଫଙ୍କ୍, ଟାଣ, ଫାଇଲ୍ ଇସୁ, ଏବଂ ଅଧିକ |

GitHub ରେ ବୁଟଷ୍ଟ୍ରାପ୍ »

ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଅଂଶ ଭାବରେ ପ୍ରଦାନ କରାଯାଇଥିବା ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ହେଉଛି ଏକ 940px ଚଉଡା 16 ସ୍ତମ୍ଭ ଗ୍ରୀଡ୍ | ଏହା ଲୋକପ୍ରିୟ 960 ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ସ୍ୱାଦ, କିନ୍ତୁ ବାମ ଏବଂ ଡାହାଣ ପାର୍ଶ୍ୱରେ ଅତିରିକ୍ତ ମାର୍ଜିନ୍ / ପ୍ୟାଡିଂ ବିନା |

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

ଏଠାରେ ଦେଖାଯାଇଥିବା ପରି, ଦୁଇଟି "ସ୍ତମ୍ଭ" ସହିତ ଏକ ମ basic ଳିକ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରାଯାଇପାରିବ, ପ୍ରତ୍ୟେକଟି 16 ଟି ମୂଳଦୁଆ ସ୍ତମ୍ଭକୁ ବିସ୍ତାର କରେ ଯାହାକୁ ଆମେ ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ଅଂଶ ଭାବରେ ବ୍ୟାଖ୍ୟା କରିଥିଲୁ | ଅଧିକ ପରିବର୍ତ୍ତନ ପାଇଁ ନିମ୍ନରେ ଥିବା ଉଦାହରଣଗୁଡିକ ଦେଖନ୍ତୁ |

  1. <div ଶ୍ରେଣୀ = "ଧାଡି"> |
  2. <div ଶ୍ରେଣୀ = "span6 ଗଜାନ" > | |
  3. ...
  4. </div>
  5. <div ଶ୍ରେଣୀ = "span10 ଗଜାନ" > | |
  6. ...
  7. </div>
  8. </div>
3
3
3
3
3
4
4
4
4
4
6
6
8
8
5
11
16

ସ୍ତମ୍ଭଗୁଡିକ ଅଫସେଟ୍ କରିବା |

4
8 ଅଫସେଟ୍ 4
4 ଅଫସେଟ୍ 4
4 ଅଫସେଟ୍ 4
5 ଅଫସେଟ୍ 3
5 ଅଫସେଟ୍ 3
10 ଅଫସେଟ୍ 6

ସ୍ଥିର ଲେଆଉଟ୍ |

ପ୍ରାୟ ଯେକ site ଣସି ସାଇଟ୍ କିମ୍ବା ପୃଷ୍ଠା ପାଇଁ ଏକ ମ basic ଳିକ 940px ଚଉଡା, କେନ୍ଦ୍ରିତ କଣ୍ଟେନର୍ ଲେଆଉଟ୍ |

  1. <body>
  2. <div class = "ପାତ୍ର" > |
  3. ...
  4. </div>
  5. </body>

ଫ୍ଲୁଇଡ୍ ଲେଆଉଟ୍ |

ମିନି- ଏବଂ ସର୍ବାଧିକ ଓସାର ଏବଂ ଏକ ବାମ ପାର୍ଶ୍ୱ ପାର୍ଶ୍ୱ ଦଣ୍ଡ ସହିତ ଏକ ନମନୀୟ ତରଳ ବା ତରଳ ପୃଷ୍ଠା ଗଠନ | ଆପ୍ସ ପାଇଁ ବହୁତ ଭଲ |

  1. <body>
  2. <div class = "ପାତ୍ର-ତରଳ" > |
  3. <div class = "sidebar" > |
  4. ...
  5. </div>
  6. <div ଶ୍ରେଣୀ = "ବିଷୟବସ୍ତୁ" > |
  7. ...
  8. </div>
  9. </div>
  10. </body>

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

ଆପଣଙ୍କର ୱେବପୃଷ୍ଠାଗୁଡ଼ିକର ସଂରଚନା ପାଇଁ ଏକ ମାନକ ଟାଇପୋଗ୍ରାଫିକ୍ ହାଇରାର୍କି |

h1 ହେଡିଙ୍ଗ୍ 1

h2। ହେଡିଙ୍ଗ୍ 2

h3। ଶୀର୍ଷଲେଖ 3

h4। ହେଡିଙ୍ଗ୍ 4

h5। ହେଡିଙ୍ଗ୍ 5
h6। ହେଡିଙ୍ଗ୍ 6

ଉଦାହରଣ ଅନୁଚ୍ଛେଦ |

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।

ଉଦାହରଣ ହେଡିଙ୍ଗ୍ ସବ୍-ହେଡିଙ୍ଗ୍ ଅଛି ...

<strong>ଆପଣ ଏବଂ ସହିତ ଉପ ହେଡିଙ୍ଗ୍ ମଧ୍ୟ ଯୋଡିପାରିବେ |<em>

ବିବିଧ ଉପାଦାନଗୁଡିକ

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

<strong> <em> <address> <abbr>

କେତେବେଳେ ବ୍ୟବହାର କରିବେ |

ଏକ ଶବ୍ଦ ବା ବାକ୍ୟାଂଶ ଏବଂ ଏହାର ଆଖପାଖ କପି ମଧ୍ୟରେ ଭିଜୁଆଲ୍ ପାର୍ଥକ୍ୟ ଯୋଡିବା ପାଇଁ ଗୁରୁତ୍ୱ ଟ୍ୟାଗ୍ ( <strong>ଏବଂ <em>) ବ୍ୟବହାର କରାଯିବା ଉଚିତ | <strong>ସାମାନ୍ୟ ପୁରୁଣା ଧ୍ୟାନ ଏବଂ ସ୍ଲିକ୍ ଧ୍ୟାନ ଏବଂ ଆଖ୍ୟା <em>ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |

ଏକ ଅନୁଚ୍ଛେଦରେ ଗୁରୁତ୍ୱ |

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।

ଠିକଣା

addressଉପାଦାନଟି ବ୍ୟବହୃତ ହୋଇଛି - ଆପଣ ଏହା ଅନୁମାନ କରିଛନ୍ତି! - ଆଡ୍ରେସ୍ | ଏହା କିପରି ଦେଖାଯାଉଛି ତାହା ଏଠାରେ ଅଛି:

ଟ୍ୱିଟର , Inc.
_
_

ଟିପନ୍ତୁ:address ବିଷୟବସ୍ତୁକୁ ସଠିକ୍ ଭାବରେ ଗଠନ କରିବା ପାଇଁ ଏକ ଲାଇନ୍-ବ୍ରେକ୍ () ସହିତ ପ୍ରତ୍ୟେକ ଧାଡି ଶେଷ ହେବା ଆବଶ୍ୟକ <br />, ଯେହେତୁ ଏହା କ real ଣସି ଶ yles ଳୀ ପ୍ରୟୋଗ ନକରି ବାସ୍ତବ ଜୀବନରେ ପ read ାଯାଏ |

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

ସଂକ୍ଷିପ୍ତକରଣ ଏବଂ ସଂକ୍ଷିପ୍ତ ଶବ୍ଦଗୁଡ଼ିକ ପାଇଁ, abbrଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ ( HTML5acronym ରେ ପୁରୁଣା ହୋଇଛି ) | ଟ୍ୟାଗ୍ ଭିତରେ ଶୋର୍ଥାଣ୍ଡ୍ ଫର୍ମ ରଖନ୍ତୁ ଏବଂ ସମ୍ପୂର୍ଣ୍ଣ ନାମ ପାଇଁ ଏକ ଟାଇଟଲ୍ ସେଟ୍ କରନ୍ତୁ |

ବ୍ଲକକୋଟସ୍ |

<blockquote> <p> <cite>

blockquoteତୁମର ଚାରିପାଖରେ paragraphଏବଂ citeଟ୍ୟାଗ୍ ଗୁଡ଼ାଇବାକୁ ନିଶ୍ଚିତ ହୁଅ | ଏକ ଉତ୍ସ ଉଲ୍ଲେଖ କରିବାବେଳେ, citeଉପାଦାନ ବ୍ୟବହାର କରନ୍ତୁ | CSS ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏକ ଏମ୍ ଡ୍ୟାସ୍ (& mdash;) ସହିତ ଏକ ନାମ ଉପସ୍ଥାପନ କରିବ |

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍, କନସେକ୍ଟୁର ଆଡିପିସିସିଙ୍ଗ୍ ଏଲିଟ୍, ସେଡ୍ ଡୋ ଇୟୁସମୋଡ୍ ଟେମ୍ପୋର ଇନସିଡିଡଣ୍ଟ ୟୁ ଲାବୋର୍ ଏବଂ ଡୋଲୋର ମ୍ୟାଗନା ଆଲିକା ...

ଜୁଲିୟସ୍ ହାଇବର୍ଟ ଡ

ତାଲିକା |

ଅନିୟମିତ |<ul>

  • ଜେରେମି ବିକ୍ସବି |
  • ରୋବର୍ଟ ଡିଜୁର୍ |
  • ଜୋସ୍ ୱାଶିଂଟନ୍ |
  • ଆଣ୍ଟନ୍ କାପ୍ରେସି |
  • ମୋର ଟିମ୍ ସାଥୀ
    • ଜର୍ଜ କାଷ୍ଟାନଜା |
    • ଜେରୀ ସେନ୍ଫେଲ୍ଡ |
    • କସମୋ କ୍ରାମର |
    • ଏଲେନ୍ ବେନିସ୍ |
    • ନ୍ୟୁମ୍ୟାନ୍
  • ଜନ୍ ଯାକୁବ |
  • ପଲ୍ ପିରେସ୍ |
  • କେଭିନ ଗାର୍ନେଟ |

ଅଣସଂରକ୍ଷିତ |<ul.unstyled>

  • ଜେରେମି ବିକ୍ସବି |
  • ରୋବର୍ଟ ଡିଜୁର୍ |
  • ଜୋସ୍ ୱାଶିଂଟନ୍ |
  • ଆଣ୍ଟନ୍ କାପ୍ରେସି |
  • ମୋର ଟିମ୍ ସାଥୀ
    • ଜର୍ଜ କାଷ୍ଟାନଜା |
    • ଜେରୀ ସେନ୍ଫେଲ୍ଡ |
    • କସମୋ କ୍ରାମର |
    • ଏଲେନ୍ ବେନିସ୍ |
    • ନ୍ୟୁମ୍ୟାନ୍
  • ଜନ୍ ଯାକୁବ |
  • ପଲ୍ ପିରେସ୍ |
  • କେଭିନ ଗାର୍ନେଟ |

ଅର୍ଡର |<ol>

  1. ଜେରେମି ବିକ୍ସବି |
  2. ରୋବର୍ଟ ଡିଜୁର୍ |
  3. ଜୋସ୍ ୱାଶିଂଟନ୍ |
  4. ଆଣ୍ଟନ୍ କାପ୍ରେସି |
  5. ମୋର ଟିମ୍ ସାଥୀ
    1. ଜର୍ଜ କାଷ୍ଟାନଜା |
    2. ଜେରୀ ସେନ୍ଫେଲ୍ଡ |
    3. କସମୋ କ୍ରାମର |
    4. ଏଲେନ୍ ବେନିସ୍ |
    5. ନ୍ୟୁମ୍ୟାନ୍
  6. ଜନ୍ ଯାକୁବ |
  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 |

ନିର୍ମାଣ ଟେବୁଲ୍ |

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

ଅନେକ ଜିନିଷ ପାଇଁ ଟେବୁଲ୍ ବହୁତ ଭଲ | ଉତ୍ତମ ସାରଣୀଗୁଡ଼ିକ, ଉପଯୋଗୀ, ମାପନୀୟ ଏବଂ ପଠନୀୟ (କୋଡ୍ ସ୍ତରରେ) ହେବା ପାଇଁ ଟିକେ ମାର୍କଅପ୍ ପ୍ରେମ ଆବଶ୍ୟକ କରେ | ସାହାଯ୍ୟ କରିବାକୁ ଏଠାରେ କିଛି ଟିପ୍ସ |

ସର୍ବଦା ତୁମର ସ୍ତମ୍ଭ ହେଡର୍ ଗୁଡ଼ିକୁ ଏପରି ଭାବରେ ଗୁଡ଼ାଇ ରଖ theadଯେ ହାଇରାର୍କି thead>> |trth

ସ୍ତମ୍ଭ ହେଡର୍ ସହିତ ସମାନ, ଆପଣଙ୍କର ସମସ୍ତ ଟେବୁଲ୍ ର ଶରୀର ବିଷୟବସ୍ତୁକୁ ଗୁଡ଼ାଇ ରଖିବା ଉଚିତ ଯାହା ଦ୍ tbodyyour ାରା ଆପଣଙ୍କର ହାଇରାର୍କି >> tbodyଅଟେ |trtd

ଉଦାହରଣ: ଡିଫଲ୍ଟ ଟେବୁଲ୍ ଶ yles ଳୀ |

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

# ପ୍ରଥମ ନାମ ଶେଷ ନାମ ଭାଷା
କେତେକ ଗୋଟିଏ | ଇଂରାଜୀ |
ଜୋ ସିକ୍ସପ୍ୟାକ୍ | ଇଂରାଜୀ |
3 ଷ୍ଟୁ | ଦନ୍ତ କୋଡ୍
  1. <ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ସାଧାରଣ-ସାରଣୀ"> | ଶ୍ରେଣୀ = "ସାଧାରଣ-ସାରଣୀ" > |
  2. ...
  3. </table>

ଉଦାହରଣ: ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍ |

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

# ପ୍ରଥମ ନାମ ଶେଷ ନାମ ଭାଷା
କେତେକ ଗୋଟିଏ | ଇଂରାଜୀ |
ଜୋ ସିକ୍ସପ୍ୟାକ୍ | ଇଂରାଜୀ |
3 ଷ୍ଟ�� | ଦନ୍ତ କୋଡ୍
  1. <ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ସାଧାରଣ-ଟେବୁଲ୍ ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍"> | ଶ୍ରେଣୀ = "ସାଧାରଣ-ଟେବୁଲ୍ ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍" > |
  2. ...
  3. </table>

ଉଦାହରଣ: ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍ w / TableSorter.js |

ପୂର୍ବ ଉଦାହରଣକୁ ନେଇ, jQuery ଏବଂ ଟେବୁଲସର୍ଟ ପ୍ଲଗଇନ୍ ମାଧ୍ୟମରେ ସର୍ଟିଂ କାର୍ଯ୍ୟକାରିତା ପ୍ରଦାନ କରି ଆମେ ଆମର ଟେବୁଲଗୁଡିକର ଉପଯୋଗିତାକୁ ଉନ୍ନତ କରୁ | ସର୍ଟ ପରିବର୍ତ୍ତନ କରିବାକୁ ଯେକ any ଣସି ସ୍ତମ୍ଭର ହେଡର୍ କ୍ଲିକ୍ କରନ୍ତୁ |

# ପ୍ରଥମ ନାମ ଶେଷ ନାମ ଭାଷା
ତୁମର ଗୋଟିଏ | ଇଂରାଜୀ |
ଜୋ ସିକ୍ସପ୍ୟାକ୍ | ଇଂରାଜୀ |
3 ଷ୍ଟୁ | ଦନ୍ତ କୋଡ୍
  1. <ସ୍କ୍ରିପ୍ଟ ପ୍ରକାର = "ପାଠ୍ୟ / ଜାଭାସ୍କ୍ରିପ୍ଟ" src = "js / jquery / jquery.tablesorter.min.js"> </script> type = "text / javascript" src = "js / jquery / jquery.tablesorter.min.js" > </script>
  2. <ସ୍କ୍ରିପ୍ଟ ପ୍ରକାର = "ପାଠ୍ୟ / ଜାଭାସ୍କ୍ରିପ୍ଟ" > |
  3. $ ( ଡକ୍ୟୁମେଣ୍ଟ୍ ) | ପ୍ରସ୍ତୁତ ( କାର୍ଯ୍ୟ () {
  4. $ ( "ଟେବୁଲ୍ # ସର୍ଟ ଟେବୁଲ୍ ଉଦାହରଣ" ) | ଟେବୁଲସର୍ ( { sortList : [[ 1 , 0 ]]} );
  5. });
  6. </script>
  7. <ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ସାଧାରଣ-ଟେବୁଲ୍ ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍" > |
  8. ...
  9. </table>

ଡିଫଲ୍ଟ ଶ yles ଳୀ |

ସମସ୍ତ ଫର୍ମଗୁଡ଼ିକୁ ଏକ ପଠନୀୟ ଏବଂ ମାପନୀୟ ଉପାୟରେ ଉପସ୍ଥାପନ କରିବାକୁ ଡିଫଲ୍ଟ ଶ yles ଳୀ ଦିଆଯାଏ | ଟେକ୍ସଟ୍ ଇନପୁଟ୍, ସିଲେକ୍ଟ ତାଲିକା, ଟେକ୍ସଟେରିଆ, ରେଡିଓ ବଟନ୍ ଏବଂ ଚେକ୍ ବକ୍ସ, ଏବଂ ବଟନ୍ ପାଇଁ ଶ yles ଳୀ ପ୍ରଦାନ କରାଯାଇଛି |

ଉଦାହରଣ ଫର୍ମ କିମ୍ବଦନ୍ତୀ |
ଏଠାରେ କିଛି ମୂଲ୍ୟ
ସାହାଯ୍ୟ ପାଠ୍ୟର ଛୋଟ ସ୍ନିପେଟ୍ |
ଉଦାହରଣ ଫର୍ମ କିମ୍ବଦନ୍ତୀ |
@
ଉଦାହରଣ ଫର୍ମ କିମ୍ବଦନ୍ତୀ |
ଟିପନ୍ତୁ: ଲେବଲ୍ ଗୁଡିକ ବହୁତ ବଡ କ୍ଲିକ୍ କ୍ଷେତ୍ର ଏବଂ ଏକ ଅଧିକ ଉପଯୋଗୀ ଫର୍ମ ପାଇଁ ସମସ୍ତ ବିକଳ୍ପକୁ ଘେରି ରହିଥାଏ |
କୁ ସମସ୍ତ ସମୟ ପ୍ରଶାନ୍ତ ମାନକ ସମୟ (GMT -08: 00) ଭାବରେ ଦେଖାଯାଏ |
ଯଦି ଆବଶ୍ୟକ ହୁଏ ଉପରୋକ୍ତ କ୍ଷେତ୍ରକୁ ବର୍ଣ୍ଣନା କରିବାକୁ ସହାୟତା ପାଠ୍ୟର ବ୍ଲକ |

ଷ୍ଟାକ୍ ହୋଇଥିବା ଫର୍ମଗୁଡିକ |

ତୁମର ଫର୍ମର HTML ରେ ଯୋଡ .form-stackedଏବଂ ତୁମର ବାମ ପରିବର୍ତ୍ତେ ସେମାନଙ୍କ କ୍ଷେତ୍ର ଉପରେ ଲେବଲ୍ ରହିବ | ଯଦି ଆପଣଙ୍କର ଫର୍ମଗୁଡିକ ଛୋଟ ଥାଏ କିମ୍ବା ଭାରୀ ଫର୍ମଗୁଡିକ ପାଇଁ ଆପଣଙ୍କର ଦୁଇଟି ସ୍ତମ୍ଭ ଅଛି ତେବେ ଏହା ବହୁତ ଭଲ କାମ କରେ |

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

ବଟନ୍

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

ସମସ୍ତ ବଟନ୍ ଗୁଡିକ ହାଲୁକା ଧୂସର ଶ style ଳୀରେ ଡିଫଲ୍ଟ, କିନ୍ତୁ ଏକ ନୀଳ .primaryଶ୍ରେଣୀ ଉପଲବ୍ଧ | ଏଥିସହ, ଆପଣଙ୍କର ନିଜ ଶ yles ଳୀ ଗଡ଼ିବା ସହଜ ମଟର ଅଟେ |

ଉଦାହରଣ ବଟନ୍ |

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

ବିକଳ୍ପ ଆକାର |

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

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

ବଟନ୍ଗୁଡ଼ିକ ପାଇଁ ଯାହା ସକ୍ରିୟ ନୁହେଁ କିମ୍ବା ଗୋଟିଏ କାରଣ ପାଇଁ ଆପ୍ ଦ୍ୱାରା ଅକ୍ଷମ ହୋଇଛି, ଅକ୍ଷମ ଅବସ୍ଥା ବ୍ୟବହାର କରନ୍ତୁ | ତାହା .disabledଲିଙ୍କ୍ ଏବଂ ଉପାଦାନଗୁଡ଼ିକ :disabledପାଇଁ |button

ଲିଙ୍କ୍

ବଟନ୍

ମ Basic ଳିକ ସତର୍କତା |

ବିଫଳତା, ସମ୍ଭାବ୍ୟ ବିଫଳତା, କିମ୍ବା କାର୍ଯ୍ୟର ସଫଳତାକୁ ଆଲୋକିତ କରିବା ପାଇଁ ଏକ ଧାଡ଼ି ବାର୍ତ୍ତା | ଫର୍ମ ପାଇଁ ବିଶେଷ ଭାବରେ ଉପଯୋଗୀ |

×

ହେ ସ୍ନାପ୍! ଏହାକୁ ଏବଂ ତାହା ପରିବର୍ତ୍ତନ କରନ୍ତୁ ଏବଂ ପୁନର୍ବାର ଚେଷ୍ଟା କରନ୍ତୁ |

×

ପବିତ୍ର ଗାଉକାମୋଲ୍! ସର୍ବୋତ୍ତମ ଚେକ୍ ୟୋ ସେଲ୍ଫ୍, ଆପଣ ବହୁତ ଭଲ ଦେଖାଯାଉ ନାହାଁନ୍ତି |

×

ବହୁତ ବଢିଆ! ଆପଣ ସଫଳତାର ସହିତ ଏହି ସତର୍କ ବାର୍ତ୍ତା ପ read ନ୍ତି |

×

ମୁଣ୍ଡ ଉପରକୁ! ଏହା ଏକ ସତର୍କତା ଯାହା ଆପଣଙ୍କର ଧ୍ୟାନ ଆବଶ୍ୟକ କରେ, କିନ୍ତୁ ଏପର୍ଯ୍ୟନ୍ତ ଏହା ଏକ ବୃହତ ପ୍ରାଥମିକତା ନୁହେଁ |

ସନ୍ଦେଶଗୁଡ଼ିକୁ ଅବରୋଧ କରନ୍ତୁ |

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

×

ହେ ସ୍ନାପ୍! ତୁମେ ଏକ ତ୍ରୁଟି ପାଇଛ!ଏହାକୁ ଏବଂ ତାହା ପରିବର୍ତ୍ତନ କରନ୍ତୁ ଏବଂ ପୁନର୍ବାର ଚେଷ୍ଟା କରନ୍ତୁ | ଡୁଇସ୍ ମଲିସ୍, ଇଷ୍ଟ ନନ୍ କମୋଡୋ ଲକ୍ଟସ୍, ନିସି ଏରାଟ ପୋର୍ଟଟିଟର୍ ଲିଗୁଲା, ଇଜେଟ୍ ଲାସିନିଆ ଓଡିଓ ସେମ ନେକ୍ ଏଲିଟ୍ | Cras mattis consectetur purus sit amet fermentum |

ଏହି କାର୍ଯ୍ୟ ନିଅନ୍ତୁ | କିମ୍ବା ଏହା କରନ୍ତୁ |

×

ପବିତ୍ର ଗାଉକାମୋଲ୍! ଏହା ଏକ ଚେତାବନୀ!ସର୍ବୋତ୍ତମ ଚେକ୍ ୟୋ ସେଲ୍ଫ୍, ଆପଣ ବହୁତ ଭଲ ଦେଖାଯାଉ ନାହାଁନ୍ତି | Nulla vitae elit libero, a pharetra augue। ପ୍ରିଜେଣ୍ଟ୍ କମୋଡୋ କର୍ସସ୍ ମ୍ୟାଗନା, ଭେଲ୍ ସ୍କେଲେରିସ୍କ ନିସ୍ କନସେକ୍ଟେଟର୍ ଇତ୍ୟାଦି |

ଏହି କାର୍ଯ୍ୟ ନିଅନ୍ତୁ | କିମ୍ବା ଏହା କରନ୍ତୁ |

×

ବହୁତ ବଢିଆ!ଆପଣ ସଫଳତାର ସହିତ ଏହି ସତର୍କ ବାର୍ତ୍ତା ପ read ନ୍ତି | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridulus mus। Maecenas faucibus mollis interdum |

ଏହି କାର୍ଯ୍ୟ ନିଅନ୍ତୁ | କିମ୍ବା ଏହା କରନ୍ତୁ |

×

ମୁଣ୍ଡ ଉପରକୁ!ଏହା ଏକ ସତର୍କତା ଯାହା ଆପଣଙ୍କର ଧ୍ୟାନ ଆବଶ୍ୟକ କରେ, କିନ୍ତୁ ଏପର୍ଯ୍ୟନ୍ତ ଏହା ଏକ ବୃହତ ପ୍ରାଥମିକତା ନୁହେଁ |

ଏହି କାର୍ଯ୍ୟ ନିଅନ୍ତୁ | କିମ୍ବା ଏହା କରନ୍ତୁ |

ମୋଡାଲ୍ |

ମୋଡାଲ୍ - ଡାୟଲଗ୍ କିମ୍ବା ଲାଇଟ୍ ବକ୍ସ - ପରିସ୍ଥିତିରେ ପ୍ରସଙ୍ଗଗତ କାର୍ଯ୍ୟ ପାଇଁ ଉତ୍ତମ ଅଟେ ଯେଉଁଠାରେ ପୃଷ୍ଠଭୂମି ପ୍ରସଙ୍ଗକୁ ବଜାୟ ରଖିବା ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ |

ସାଧନ ଟିପ୍ସ |

ଦ୍ୱନ୍ଦ୍ୱରେ ଥିବା ଉପଭୋକ୍ତାଙ୍କୁ ସାହାଯ୍ୟ କରିବା ଏବଂ ସେମାନଙ୍କୁ ସଠିକ୍ ଦିଗରେ ସୂଚାଇବା ପାଇଁ ଟ୍ୱିପିସ୍ ଅତ୍ୟନ୍ତ ଉପଯୋଗୀ |

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲାର୍ ସିଟ୍ ଆମେଟ୍ ଇଲୋ ଏରର୍ ଇପ୍ସମ୍ ଭେରିଟାଟିସ୍ ଅଟୋ ଇଷ୍ଟେ ପର୍ପସିସିଆଟିସ୍ ଇଷ୍ଟ ଭୋଲୁପଟାସ୍ ନାଟସ୍ ଇଲୋ କ୍ୱାସି ଓଡିଟ୍ ଅଟୋ ନାଟସ୍ ଫଳାଫଳ ଫଳାଫଳ, ଅଟୋ ନାଟସ୍ ଇଲୋ ଭୋଲୁପେଟେମ୍ ଓଡିଟ୍ ପର୍ପସିଏଟିସ୍ ଲାଉଡାଣ୍ଟିମ୍ ରିମ୍ ଡୋଲୋରେମ୍କ ଟୋଟାମ୍ ଭଲ୍ୟୁପଟାସ୍ | Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam archito explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas nemo volu

ନିମ୍ନରେ!
ଠିକ୍!
ବାମ!
ଉପରେ!

ପପୋଭର୍ସ |

ଲେଆଉଟ୍ ପ୍ରଭାବ ନକରି ଏକ ପୃଷ୍ଠାକୁ ସବଟେକ୍ସୁଆଲ୍ ସୂଚନା ପ୍ରଦାନ କରିବାକୁ ପପୋଭର ବ୍ୟବହାର କରନ୍ତୁ |

ପପୋଭର ଆଖ୍ୟା |

Etiam porta sem maleuada magna mollis euismod | Maecenas faucibus mollis interdum | ମୋର୍ବି ଲିଓ ରିସସ୍, ପୋର୍ଟା ଏସି କନସେକ୍ଟେଟର୍ ଏସି, ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରିବୁଟ୍ ସହିତ ନିର୍ମିତ ହୋଇଥିଲା , ମିଶ୍ରଣ ଏବଂ ଭେରିଏବଲ୍ସର ଏକ ମୁକ୍ତ ଉତ୍ସ ପ୍ୟାକ୍ , ଦ୍ରୁତ ଏବଂ ସହଜ ୱେବ୍ ବିକାଶ ପାଇଁ ଏକ CSS ପ୍ରିପ୍ରୋସେସର୍ ସହିତ କମ୍ ସହିତ ବ୍ୟବହୃତ ହେବ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ରେ ଆମେ କିପରି ପ୍ରିବୁଟ୍ ବ୍ୟବହାର କଲୁ ଏବଂ ତୁମେ ଏହାର ପରବର୍ତ୍ତୀ ପ୍ରୋଜେକ୍ଟରେ କମ୍ ଚଲାଇବାକୁ ବାଛିଲେ ତୁମେ ଏହାକୁ କିପରି ବ୍ୟବହାର କରିପାରିବ ଯାଞ୍ଚ କର |

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

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

  1. <link rel = "stylesheet / less" type = "text / css" href = "less / bootstrap.less" media = "all" /> rel = "stylesheet / less" type = "text / css" href = "less / bootstrap.less" media = "all" />
  2. <ସ୍କ୍ରିପ୍ଟ ପ୍ରକାର = "ପାଠ୍ୟ / ଜାଭାସ୍କ୍ରିପ୍ଟ" src = "js / less-1.0.41.min.js" > </script>

.Js ସମାଧାନ ଅନୁଭବ କରୁନାହାଁନ୍ତି? କମ୍ ମ୍ୟାକ୍ ଆପ୍ ଚେଷ୍ଟା କରନ୍ତୁ କିମ୍ବା ଯେତେବେଳେ ଆପଣ ଆପଣଙ୍କର କୋଡ୍ ନିୟୋଜିତ କରନ୍ତି କମ୍ପାଇଲ୍ କରିବାକୁ Node.js ବ୍ୟବହାର କରନ୍ତୁ |

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

ବୁଟଷ୍ଟ୍ରାପର ଅଂଶ ଭାବରେ ଟ୍ୱିଟର ବୁଟଷ୍ଟ୍ରାପରେ ଯାହା ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ତାହାର କିଛି ହାଇଲାଇଟ୍ ଏଠାରେ ଅଛି | ଅଧିକ ଡାଉନଲୋଡ୍ ଏବଂ ଅଧିକ ଜାଣିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ୱେବସାଇଟ୍ କିମ୍ବା ଗିଥବ୍ ପ୍ରୋଜେକ୍ଟ ପୃଷ୍ଠାକୁ ଯାଆନ୍ତୁ |

ରଙ୍ଗ ଭେରିଏବଲ୍ |

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

  1. // ଲିଙ୍କ୍ |
  2. @ ଲିଙ୍କ୍ ରଙ୍ଗ : # 8b59c2 ;
  3. @ ଲିଙ୍କ୍ ରଙ୍ଗ ହୋଭର : ଗା en ଼ କରନ୍ତୁ ( @ ଲିଙ୍କ୍ ରଙ୍ଗ , ୧୦ );
  4. // ଧୂସର
  5. @ ବ୍ଲାକ : # 000;
  6. @ ଗ୍ରେ ଡାର୍କ : ହାଲୁକା କରନ୍ତୁ ( @ ବ୍ଲାକ , 25 %);
  7. @ ଗ୍ରେ : ହାଲୁକା ( @ ବ୍ଲାକ , 50 %);
  8. @ ଗ୍ରେ ଲାଇଟ୍ : ହାଲୁକା ( @ ବ୍ଲାକ , 70 %);
  9. @ ଗ୍ରେ ଲାଇଟ୍ : ହାଲୁକା ( @ ବ୍ଲାକ , 90 %);
  10. @ ଧଳା : #fff;
  11. // ଉଚ୍ଚାରଣ ରଙ୍ଗ |
  12. @ ବ୍ଲୁ : # 08b5fb ;
  13. @ ସବୁଜ : # 46a546 ;
  14. @red : # 9d261d;
  15. @yellow : # ffc40d;
  16. @ ଆରେଞ୍ଜ : # f89406 ;
  17. @ ପିଙ୍କ : # c3325f ;
  18. urpurple : # 7a43b6;
  19. // ବେସ୍ ଲାଇନ୍ |
  20. @ ବେସଲାଇନ୍ : 20px ;

ମନ୍ତବ୍ୟ

କମ୍ CSS ର ସାଧାରଣ /* ... */ବାକ୍ୟବିନ୍ୟାସ ସହିତ ମନ୍ତବ୍ୟର ଅନ୍ୟ ଏକ ଶ style ଳୀ ମଧ୍ୟ ପ୍ରଦାନ କରେ |

  1. // ଏହା ଏକ ମନ୍ତବ୍ୟ |
  2. / * ଏହା ମଧ୍ୟ ଏକ ମନ୍ତବ୍ୟ * /

ୱାଜୁକୁ ମିଶ୍ରଣ କରନ୍ତୁ |

ମିକ୍ସନ୍ ଗୁଡିକ ମୂଳତ CS CSS ପାଇଁ ଅନ୍ତର୍ଭୂକ୍ତ କିମ୍ବା ଆଂଶିକ ଅଟେ, ଯାହା ଆପଣଙ୍କୁ ଏକ କୋଡ୍ ର ଏକ ବ୍ଲକ୍ ମିଶ୍ରଣ କରିବାକୁ ଅନୁମତି ଦିଏ | ବିକ୍ରେତା ପ୍ରିଫିକ୍ସଡ୍ ଗୁଣଗୁଡିକ box-shadow, କ୍ରସ୍-ବ୍ରାଉଜର୍ ଗ୍ରେଡିଏଣ୍ଟ୍, ଫଣ୍ଟ୍ ଷ୍ଟାକ, ଏବଂ ଅଧିକ ପାଇଁ ସେଗୁଡିକ ବହୁତ ଭଲ | ନିମ୍ନରେ ମିଶ୍ରଣର ଏକ ନମୁନା ଅଛି ଯାହା ବୁଟଷ୍ଟ୍ରାପ ସହିତ ଅନ୍ତର୍ଭୁକ୍ତ |

ଫଣ୍ଟ୍ ଷ୍ଟାକ୍ |

  1. # ଫଣ୍ଟ {
  2. ଶୋର୍ଥାଣ୍ଡ୍ ( @ ଓଜନ : ସାଧାରଣ , @ ଆକାର : 14px , @ ଲାଇନ୍ ଉଚ୍ଚତା : 20px ) {
  3. ଫଣ୍ଟ - ଆକାର : @ ଆକାର ;
  4. ଫଣ୍ଟ - ଓଜନ : @ ଓଜନ ;
  5. ରେଖା - ଉଚ୍ଚତା : @ ଲାଇନ୍ ଉଚ୍ଚତା ;
  6. }
  7. sans - serif ( @ ଓଜନ : ସାଧାରଣ , @ ଆକାର : 14px , @ ଲାଇନ ଉଚ୍ଚତା : 20px ) {
  8. ଫଣ୍ଟ - ପରିବାର : "ହେଲଭେଟିକା ନେଉ" , ହେଲଭେଟିକା , ଆରିଆଲ୍ , ସାନ୍ସ - ସେରିଫ୍ ;
  9. ଫଣ୍ଟ - ଆକାର : @ ଆକାର ;
  10. ଫଣ୍ଟ - ଓଜନ : @ ଓଜନ ;
  11. ରେଖା - ଉଚ୍ଚତା : @ ଲାଇନ୍ ଉଚ୍ଚତା ;
  12. }
  13. serif ( @ ଓଜନ : ସାଧାରଣ , @ ଆକାର : 14px , @ ଲାଇନ ଉଚ୍ଚତା : 20px ) {
  14. ଫଣ୍ଟ - ପରିବାର : "ଜର୍ଜିଆ" , ଟାଇମ୍ସ ନ୍ୟୁ ରୋମାନ୍ , ଟାଇମ୍ସ , ସାନ୍ସ - ସେରିଫ୍ ;
  15. ଫଣ୍ଟ - ଆକାର : @ ଆକାର ;
  16. ଫଣ୍ଟ - ଓଜନ : @ ଓଜନ ;
  17. ରେଖା - ଉଚ୍ଚତା : @ ଲାଇନ୍ ଉଚ୍ଚତା ;
  18. }
  19. ମୋନୋସ୍ପେସ୍ ( @ ଓଜନ : ସାଧାରଣ , @ ଆକାର : 12px , @ ଲାଇନ୍ ଉଚ୍ଚତା : 20px ) {
  20. ଫଣ୍ଟ - ପରିବାର : "ମୋନାକୋ" , କ୍ୟୁରିଅର୍ ନ୍ୟୁ , ମୋନୋସ୍ପେସ୍ ;
  21. ଫଣ୍ଟ - ଆକାର : @ ଆକାର ;
  22. ଫଣ୍ଟ - ଓଜନ : @ ଓଜନ ;
  23. ରେଖା - ଉଚ୍ଚତା : @ ଲାଇନ୍ ଉଚ୍ଚତା ;
  24. }
  25. }

ଗ୍ରେଡିଏଣ୍ଟ୍

  1. # ଗ୍ରେଡିଏଣ୍ଟ୍ {
  2. ଭୂସମାନ୍ତର ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ : # 555, @ ରଙ୍ଗ: # 333) {
  3. ପୃଷ୍ଠଭୂମି - ରଙ୍ଗ : @endColor ;
  4. ପୃଷ୍ଠଭୂମି - ପୁନରାବୃତ୍ତି : ପୁନରାବୃତ୍ତି - x ;
  5. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - khtml - ଗ୍ରେଡିଏଣ୍ଟ୍ ( line ଖ୍ୟ , ବାମ ଉପର , ଡାହାଣ ଉପର , ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ ) ଠାରୁ ( @endColor )); // କନକର୍ |
  6. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ମୋଜ୍ - ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ବାମ , @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // FF 3.6+
  7. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ms - ର line ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ବାମ , @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // IE10
  8. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ୱେବକିଟ୍ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ର line ଖ୍ୟ , ବାମ ଉପର , ଡାହାଣ ଉପର , ରଙ୍ଗ - ଷ୍ଟପ୍ ( 0 %, @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ ), ରଙ୍ଗ - ବନ୍ଦ ( 100 %, @endColor )); // ସଫାରି 4+, କ୍ରୋମ୍ 2+ |
  9. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ୱେବକିଟ୍ - ର line ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ବାମ , @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ସଫାରି 5.1+, କ୍ରୋମ୍ 10+ |
  10. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - o - ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ବାମ , @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ଅପେରା 11.10
  11. - ms - ଫିଲ୍ଟର୍ : % _ _ _ _ _ _ // IE8 +
  12. ଫିଲ୍ଟର୍ : e ( % _ _ _ _ _ // IE6 ଏବଂ IE7 |
  13. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ବାମ , @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ଲେ ଷ୍ଟାଣ୍ଡାର୍ଡ |
  14. }
  15. ଭୂଲମ୍ବ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ : # 555, @ ଏଣ୍ଡ ରଙ୍ଗ: # 333) {
  16. ପୃଷ୍ଠଭୂମି - ରଙ୍ଗ : @endColor ;
  17. ପୃଷ୍ଠଭୂମି - ପୁନରାବୃତ୍ତି : ପୁନରାବୃତ୍ତି - x ;
  18. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - khtml - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ର line ଖ୍ୟ , ବାମ ଉପର , ବାମ ତଳ , ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ) ଠାରୁ , ( @endColor )); // କନକର୍ |
  19. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ମୋଜ୍ - ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // FF 3.6+
  20. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ms - ର line ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // IE10
  21. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ୱେବକିଟ୍ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ର line ଖ୍ୟ , ବାମ ଉପର , ବାମ ତଳ , ରଙ୍ଗ - ଷ୍ଟପ୍ ( 0 %, @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ ), ରଙ୍ଗ - ବନ୍ଦ ( 100 %, @endColor )); // ସଫାରି 4+, କ୍ରୋମ୍ 2+ |
  22. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ୱେବକିଟ୍ - ର line ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ସଫାରି 5.1+, କ୍ରୋମ୍ 10+ |
  23. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - o - ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ଅପେରା 11.10
  24. - ms - ଫିଲ୍ଟର୍ : % _ _ _ _ _ _ // IE8 +
  25. ଫିଲ୍ଟର୍ : e ( % _ _ _ _ _ // IE6 ଏବଂ IE7 |
  26. ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ କଲର୍ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ମାନକ
  27. }
  28. ଦିଗଦର୍ଶନ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ : # 555, @ ରଙ୍ଗ: # 333, @ ଡିଗ: 45 ଡିଗ) {
  29. ...
  30. }
  31. ଭୂଲମ୍ବ - ତିନି - ରଙ୍ଗ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ : # 00b3ee, @ ମିଡ ରଙ୍ଗ: # 7a43b6, @ ରଙ୍ଗ ଷ୍ଟପ୍: 0.5, @ ରଙ୍ଗ: # c3325f) {
  32. ...
  33. }
  34. }

ଅପରେସନ୍ ଏବଂ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ |

ନିମ୍ନରେ ଥିବା ପରି ନମନୀୟ ଏବଂ ଶକ୍ତିଶାଳୀ ମିଶ୍ରଣ ସୃଷ୍ଟି କରିବାକୁ କଳ୍ପନା ପ୍ରାପ୍ତ କରନ୍ତୁ ଏବଂ କିଛି ଗଣିତ କରନ୍ତୁ |

  1. // ଗ୍ରୀଡ୍
  2. @ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ : 16 ;
  3. @ ଗ୍ରୀଡ୍ କଲମ୍ ୱିଥ୍ : 40px ;
  4. @ ଗ୍ରୀଡ୍ ଗୁଟର୍ ୱିଥ୍ : 20px ;
  5. // ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ |
  6. ପାତ୍ର {
  7. ମୋଟେଇ : @ ସାଇଟ୍ ୱିଥ୍ ;
  8. ମାର୍ଜିନ୍ : 0 ଅଟୋ ;
  9. କ୍ଲିଫିକ୍ସ ();
  10. }
  11. ସ୍ତମ୍ଭଗୁଡିକ ( @ କଲମ୍ ସ୍ପାନ୍ : 1 ) {
  12. ପ୍ରଦର୍ଶନ : ଇନଲାଇନ ;
  13. ଭାସମାନ : ବାମ ;
  14. ମୋଟେଇ : ( @ ଗ୍ରିଡ୍ କଲମ୍ ୱିଡ୍ * @ କଲମ୍ ସ୍ପାନ୍ ) + _ _ _
  15. ମାର୍ଜିନ୍ - ବାମ : @ ଗ୍ରୀଡ୍ ଗୁଟର୍ ୱିଥ୍ ;
  16. &: ପ୍ରଥମ - ପିଲା {
  17. ମାର୍ଜିନ୍ - ବାମ : 0 ;
  18. }
  19. }
  20. ଅଫସେଟ୍ ( @ କଲମ୍ ଅଫିସ୍ : 1 ) {
  21. ମାର୍ଜିନ୍ - ବାମ : ( @ ଗ୍ରିଡ୍ କଲମ୍ ୱିଥ୍ * @ କଲମ୍ ଅଫିସ୍ ) + _ _ _ _ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ;
  22. }