ଉପରେ
ବାମ
ଠିକ୍
ନିମ୍ନରେ |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

ଟୁଇଟରରୁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

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

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

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

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

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

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

GitHub ରେ ଫର୍କ |

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

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

ସମ୍ପ୍ରତି v1.3.0

ବୁଟଷ୍ଟ୍ରାପ୍ ସଂକ୍ଷିପ୍ତ ଇତିହାସ, ବ୍ରାଉଜର୍ ସମର୍ଥନ, ଏବଂ ଅଧିକ ବିଷୟରେ |

ଇତିହାସ

ଟୁଇଟରରେ ଇ Engine ୍ଜିନିୟରମାନେ front ତିହାସିକ ଭାବରେ ଫ୍ରଣ୍ଟ-ଏଣ୍ଡ ଆବଶ୍ୟକତା ପୂରଣ କରିବା ପାଇଁ ପରିଚିତ ଯେକ library ଣସି ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରିଛନ୍ତି | ଉପସ୍ଥାପିତ ଚ୍ୟାଲେଞ୍ଜଗୁଡିକର ଉତ୍ତର ଭାବରେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଆରମ୍ଭ ହେଲା | ଅନେକ ଚମତ୍କାର ଲୋକମାନଙ୍କ ସାହାଯ୍ୟରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଯଥେଷ୍ଟ ବୃଦ୍ଧି ପାଇଛି |

Dev.twitter.com ରେ ଅଧିକ ପ Read ନ୍ତୁ

ବ୍ରାଉଜର୍ ସମର୍ଥନ

କ୍ରୋମ, ସଫାରି, ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର ଏବଂ ଫାୟାରଫକ୍ସ ପରି ପ୍ରମୁଖ ଆଧୁନିକ ବ୍ରାଉଜରରେ ବୁଟଷ୍ଟ୍ରାପ୍ ପରୀକ୍ଷା ଏବଂ ସମର୍ଥିତ |

କ୍ରୋମ୍, ସଫାରି, ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର ଏବଂ ଫାୟାରଫକ୍ସରେ ପରୀକ୍ଷିତ ଏବଂ ସମର୍ଥିତ |
  • ସର୍ବଶେଷ ସଫାରି |
  • ସର୍ବଶେଷ ଗୁଗୁଲ୍ କ୍ରୋମ୍ |
  • ଫାୟାରଫକ୍ସ 4+
  • ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 7+
  • ଅପେରା 11

କ’ଣ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି |

ବୁଟଷ୍ଟ୍ରାପ୍ ସଂକଳିତ CSS, ଅସମ୍ପୂର୍ଣ୍ଣ ଏବଂ ଉଦାହରଣ ଟେମ୍ପଲେଟ୍ ସହିତ ସମ୍ପୂର୍ଣ୍ଣ ଅଟେ |

ଶୀଘ୍ର ଆରମ୍ଭ ଉଦାହରଣ |

କିଛି ଶୀଘ୍ର ଟେମ୍ପଲେଟ୍ ଆବଶ୍ୟକ କରନ୍ତି କି? ଆମେ ଏକାଠି ରଖିଥିବା ଏହି ମ basic ଳିକ ଉଦାହରଣଗୁଡିକ ଦେଖନ୍ତୁ:

  • ହିରୋ ୟୁନିଟ୍ ସହିତ ସରଳ ତିନି ସ୍ତମ୍ଭ ଲେଆଉଟ୍ |
  • ଷ୍ଟାଟିକ୍ ସାଇଡ୍ ବାର୍ ସହିତ ଫ୍ଲୁଇଡ୍ ଲେଆଉଟ୍ |
  • ଆପ୍ସ ପାଇଁ ସରଳ ଫାଶୀ ପାତ୍ର |

ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ଷ୍ଟାଣ୍ଡାର୍ଡ 940px ରକ୍ କରନ୍ତୁ କିମ୍ବା ନିଜେ ଗଡ଼ନ୍ତୁ |

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

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

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

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

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

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

4
8 ଅଫସେଟ୍ 4
1/3 ଅଫସେଟ୍ 2 / 3s |
4 ଅଫସେଟ୍ 4
4 ଅଫସେଟ୍ 4
5 ଅଫସେଟ୍ 3
5 ଅଫସେଟ୍ 3
10 ଅଫସେଟ୍ 6

ବସା ସ୍ତମ୍ଭ

ଯଦି ତୁମେ .rowଏକ ବିଦ୍ୟମାନ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ସୃଷ୍ଟି କରି ତୁମର ବିଷୟବସ୍ତୁକୁ ନଷ୍ଟ କର |

ନଷ୍ଟ ସ୍ତମ୍ଭର ଉଦାହରଣ |

ସ୍ତମ୍ଭର ସ୍ତର 1
ସ୍ତର 2
ସ୍ତର 2 
  1. <div ଶ୍ରେଣୀ = "ଧାଡି" > | 
  2.   <div class = "span12" > | 
  3.     ସ୍ତମ୍ଭର ସ୍ତର 1
  4.     <div ଶ୍ରେଣୀ = "ଧାଡି" > | 
  5.       <div class = "span6" > | 
  6.         ସ୍ତର 2
  7.       </div>
  8.       <div class = "span6" > | 
  9.         ସ୍ତର 2
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

ନିଜର ଗ୍ରୀଡ୍ ଗଡ଼ |

ଡିଫଲ୍ଟ 940px ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ କଷ୍ଟୋମାଇଜ୍ କରିବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ରେ ନିର୍ମିତ | ଟିକିଏ କଷ୍ଟମାଇଜେସନ୍ ସହିତ, ଆପଣ ସ୍ତମ୍ଭର ଆକାର, ସେମାନଙ୍କର ଗୁଟର୍ ଏବଂ ସେମାନେ ରହୁଥିବା ପାତ୍ରକୁ ପରିବର୍ତ୍ତନ କରିପାରିବେ |

ଗ୍ରୀଡ୍ ଭିତରେ |

ଗ୍ରୀଡ୍ ସିଷ୍ଟମକୁ ରୂପାନ୍ତର କରିବା ପାଇଁ ଆବଶ୍ୟକ ଭେରିଏବଲ୍ ଗୁଡିକ ବର୍ତ୍ତମାନ ସମସ୍ତେ ବାସ କରନ୍ତି variables.less|

ଭେରିଏବଲ୍ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ବର୍ଣ୍ଣନା
@gridColumns 16 ଗ୍ରୀଡ୍ ଭିତରେ ସ୍ତମ୍ଭ ସଂଖ୍ୟା |
@gridColumnWidth 40px ଗ୍ରୀଡ୍ ମଧ୍ୟରେ ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭର ମୋଟେଇ |
@gridGutterWidth 20px ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ନକାରାତ୍ମକ ସ୍ଥାନ |
@siteWidth ସମସ୍ତ ସ୍ତମ୍ଭ ଏବଂ ଗୁଟରର ଗଣିତ ରାଶି | ସ୍ତମ୍ଭ ଏବଂ ଗୁଟର ସଂଖ୍ୟା ଗଣିବା ଏବଂ ମିଶ୍ରଣର ମୋଟେଇ ସେଟ୍ କରିବା ପାଇଁ ଆମେ କିଛି ମ basic ଳିକ ମ୍ୟାଚ୍ ବ୍ୟବହାର କରୁ .fixed-container()|

ବର୍ତ୍ତମାନ କଷ୍ଟମାଇଜ୍ କରିବାକୁ |

ଗ୍ରୀଡ୍ ରୂପାନ୍ତର କରିବା ଅର୍ଥ ହେଉଛି ତିନୋଟି @grid-*ଭେରିଏବଲ୍ ବଦଳାଇବା ଏବଂ କମ୍ ଫାଇଲ୍ଗୁଡ଼ିକୁ ପୁନ omp କମ୍ପାଇଲ୍ କରିବା |

24 ଟି ସ୍ତମ୍ଭ ସହିତ ଏକ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ପରିଚାଳନା କରିବାକୁ ବୁଟଷ୍ଟ୍ରାପ୍ ସଜ୍ଜିତ | ଡିଫଲ୍ଟଟି ମାତ୍ର 16. ଏଠାରେ ଆପଣଙ୍କର ଗ୍ରୀଡ୍ ଭେରିଏବଲ୍ ଗୁଡିକ 24-ସ୍ତମ୍ଭ ଗ୍ରୀଡ୍ କୁ କଷ୍ଟୋମାଇଜ୍ ଦେଖାଯିବ |

  1. @ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ : 24 ;       
  2. @ ଗ୍ରୀଡ୍ କଲମ୍ ୱିଥ୍ : 20px ;   
  3. @ ଗ୍ରୀଡ୍ ଗୁଟର୍ ୱିଥ୍ : 20px ;

ଥରେ ପୁନ omp ସଂକଳିତ ହେଲେ, ଆପଣ ସେଟ୍ ହୋଇଯିବେ!

ୱେବପୃଷ୍ଠାଗୁଡ଼ିକ ସୃଷ୍ଟି କରିବା ପାଇଁ ଲେଆଉଟ୍ ମ Basic ଳିକ ଟେମ୍ପଲେଟ୍ |

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

ଡିଫଲ୍ଟ ଏବଂ ସରଳ 940px- ଚଉଡା, ଏକକ ଦ୍ୱାରା ପ୍ରଦତ୍ତ ଯେକ any ଣସି ୱେବସାଇଟ୍ କିମ୍ବା ପୃଷ୍ଠା ପାଇଁ କେନ୍ଦ୍ରିତ ଲେଆଉଟ୍ <div.container>|

  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>

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

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

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

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

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

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

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

ଠିକଣା

ଉପାଦାନଟି ଏହାର <address>ନିକଟତମ ପିତୃପୁରୁଷ, କିମ୍ବା କାର୍ଯ୍ୟର ସମ୍ପୂର୍ଣ୍ଣ ଶରୀର ପାଇଁ ଯୋଗାଯୋଗ ସୂଚନା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ | ଏହାକୁ କିପରି ବ୍ୟବହାର କରାଯାଇପାରିବ ତାହାର ଦୁଇଟି ଉଦାହରଣ ଏଠାରେ ଅଛି:

ଟ୍ୱିଟର , Inc.
_
_
ପୂର୍ଣ୍ଣ ନାମ
[email protected] |

ଟିପନ୍ତୁ: ପ୍ରତ୍ୟେକ ଧାଡି <address>ଏକ ଲାଇନ୍-ବ୍ରେକ୍ () ସହିତ ସମାପ୍ତ ହେବା ଉଚିତ କିମ୍ବା ବିଷୟବସ୍ତୁକୁ ସଠିକ୍ ଭାବରେ ଗଠନ କରିବା ପାଇଁ <br />ଏକ ବ୍ଲକ ସ୍ତରୀୟ ଟ୍ୟାଗରେ ଆବୃତ ହେବା ଉଚିତ |<p>

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

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

ବ୍ଲକକୋଟସ୍ |

<blockquote> <p> <small>

କିପରି ଉଦ୍ଧୃତ କରିବେ |

ଏକ ବ୍ଲକ୍କୋଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ, <blockquote>ଚାରିପାଖରେ <p>ଗୁଡ଼ାଇ <small>ଟ୍ୟାଗ୍ ଗୁଡ଼ାଇ ରଖ | ତୁମର ଉତ୍ସକୁ ଦର୍ଶାଇବା ପାଇଁ ଉପାଦାନ ବ୍ୟବହାର <small>କର ଏବଂ ତୁମେ &mdash;ଏହା ପୂର୍ବରୁ ଏକ ଏମ୍ ଡ୍ୟାସ୍ ପାଇବ |

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ଆମ୍, କନସେକ୍ଟେଟର୍ ଆଡିପିସିଂ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋଜୁରେ ଏକ ଆଣ୍ଟେ ଭେନେନାଟିସ୍ ଡାପିବସ୍ ପୋସୁରେ ଭେଲିଟ୍ ଆଲିକେଟ୍ |

ଜୁଲିୟସ୍ ହାଇବର୍ଟ ଡ 
  1. <blockquote>
  2.   <p> ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍, କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋସୁରେ ଏକ ଆଣ୍ଟେ ଭେନେନାଟିସ୍ ଡାପିବସ୍ ପୋସୁରେ ଭେଲିଟ୍ ଆଲିକେଟ୍ | </p>
  3.   <small> ଡକ୍ଟର ଜୁଲିୟସ୍ ହାଇବର୍ଟ </ mall> |
  4. </blockquote>

ତାଲିକା |

ଅନିୟମିତ |<ul>

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

ଅଣସଂରକ୍ଷିତ |<ul.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> <pre>

ଦୁଇଟି ସରଳ ଟ୍ୟାଗ୍ ସହିତ ଶ code ଳୀରେ ତୁମର କୋଡ୍ ପିମ୍ପ୍ କର | ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଅଧିକ ଚମତ୍କାରତା ପାଇଁ, ଗୁଗୁଲର କୋଡ୍ ସୁନ୍ଦର ଲାଇବ୍ରେରୀକୁ ଡ୍ରପ୍ କରନ୍ତୁ ଏବଂ ଆପଣ ସେଟ୍ ହୋଇଛନ୍ତି |

କୋଡ୍ ଉପସ୍ଥାପନ

କୋଡ୍, ବ୍ଲକ୍ କିମ୍ବା କେବଳ ସ୍ନିପେଟ୍ ଇନଲାଇନ, ସଠିକ୍ ଟ୍ୟାଗରେ ଗୁଡ଼ାଇ ଶ style ଳୀ ସହିତ ପ୍ରଦର୍ଶିତ ହୋଇପାରିବ | ଏକାଧିକ ରେଖା ବିସ୍ତାର କରୁଥିବା କୋଡ୍ ବ୍ଲକ୍ ପାଇଁ, <pre>ଉପାଦାନ ବ୍ୟବହାର କରନ୍ତୁ | ଇନଲାଇନ କୋଡ୍ ପାଇଁ, <code>ଉପାଦାନ ବ୍ୟବହାର କରନ୍ତୁ |

ଉପାଦାନ ଫଳାଫଳ
<code> <html>ଏହିପରି ପାଠ୍ୟର ଏକ ଧାଡିରେ, ତୁମର ଗୁଡ଼ାଯାଇଥିବା କୋଡ୍ ଏହି ଉପାଦାନ ପରି ଦେଖାଯିବ |
<pre> 
<div>
  <h1> ହେଡିଙ୍ଗ୍ </ h1> |
  <p> ଏଠାରେ କିଛି ଅଛି ... </p>
</div>

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

ଗୁଗୁଲ୍-କୋଡ୍-ପ୍ରିଟିଫ୍ ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରି, ଆପଣଙ୍କର କୋଡ୍ ବ୍ଲକ୍ଗୁଡ଼ିକ ଟିକିଏ ଭିନ୍ନ ଭିଜୁଆଲ୍ ଷ୍ଟାଇଲ୍ ଏବଂ ସ୍ୱୟଂଚାଳିତ ବାକ୍ୟବିନ୍ୟାସ ହାଇଲାଇଟିଂ ପାଇଥାଏ |

<div> <h1> ହେଡିଙ୍ଗ୍ </h1> <p> ଏଠାରେ କିଛି ଅଛି ... </p> </div>

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

ଇନଲାଇନ୍ ଲେବଲ୍ |

<span class="label">

ଆପଣଙ୍କ ଶରୀରର ପାଠ୍ୟରେ ଯେକ any ଣସି ବାକ୍ୟାଂଶକୁ ଧ୍ୟାନ ଦିଅନ୍ତୁ କିମ୍ବା ଫ୍ଲାଗ୍ କରନ୍ତୁ |

ଯେକ anything ଣସି ଜିନିଷକୁ ଲେବଲ୍ କରନ୍ତୁ |

କେବେ ସେହି କଳ୍ପନା ମଧ୍ୟରୁ ଗୋଟିଏ ଆବଶ୍ୟକ କରେ ! କିମ୍ବା କୋଡ୍ ଲେଖିବାବେଳେ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ପତାକା? ଆଚ୍ଛା, ବର୍ତ୍ତମାନ ତୁମର ସେଗୁଡ଼ିକ ଅଛି | ଡିଫଲ୍ଟ ଭାବରେ ଯାହା ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ତାହା ଏଠାରେ ଅଛି:

ଲେବଲ୍ | ଫଳାଫଳ
<span class="label">Default</span> ଡିଫଲ୍ଟ |
<span class="label success">New</span> ନୂତନ
<span class="label warning">Warning</span> ଚେତାବନୀ
<span class="label important">Important</span> ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ |
<span class="label notice">Notice</span> ଧ୍ୟାନ ଦିଅନ୍ତୁ |

ମିଡିଆ ଚିତ୍ର ଏବଂ ଭିଡିଓ ପ୍ରଦର୍ଶନ କରୁଛି |

ମିଡିଆ ଗ୍ରୀଡ୍ |

କମ୍ HTML ଫୁଟ୍ ପ୍ରିଣ୍ଟ ଏବଂ ସର୍ବନିମ୍ନ ଶ yles ଳୀ ସହିତ ପୃଷ୍ଠାଗୁଡ଼ିକରେ ବିଭିନ୍ନ ଆକାରର ଥମ୍ବନେଲଗୁଡିକ ପ୍ରଦର୍ଶନ କରନ୍ତୁ |

ଉଦାହରଣ ଥମ୍ବନେଲଗୁଡିକ |

ଥମ୍ବନେଲଗୁଡିକ ଯେକ .media-gridsize ଣସି ଆକାର ହୋଇପାରେ, କିନ୍ତୁ ବିଲ୍ଟ-ଇନ୍ ବୁଟ୍ଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମରେ ସିଧାସଳଖ ମ୍ୟାପ୍ ହେବାବେଳେ ସେମାନେ ସର୍ବୋତ୍ତମ କାର୍ଯ୍ୟ କରନ୍ତି | .span290, 210, ଏବଂ 330 ପରି ପ୍ରତିଛବି ମୋଟେଇ , .span4ଏବଂ .span6ସ୍ତମ୍ଭ ଆକାର ସହିତ ସମାନ ହେବା ପାଇଁ କିଛି ପିକ୍ସେଲ ପ୍ୟାଡିଂ ସହିତ ମିଳିତ ହୁଏ |

ବଡ଼

ମଧ୍ୟମ

ଛୋଟ

ସେମାନଙ୍କୁ କୋଡିଂ କରୁଛି |

ମିଡିଆ ଗ୍ରୀଡ୍ ବ୍ୟବହାର କରିବା ସହଜ ଏବଂ ମାର୍କଅପ୍ ପାର୍ଶ୍ୱରେ ସରଳ | ସେମାନଙ୍କର ଆକାରଗୁଡିକ ଅନ୍ତର୍ଭୁକ୍ତ ଚିତ୍ରଗୁଡ଼ିକର ଆକାର ଉପରେ ନିର୍ଭର କରେ |

  1. <ul class = "ମିଡିଆ-ଗ୍ରୀଡ୍" > | 
  2.   <li>
  3.     <a href = "#"> _ 
  4.       <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
  5.     </a>
  6.   </ li>
  7.   <li>
  8.     <a href = "#"> _ 
  9.       <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
  10.     </a>
  11.   </ li>
  12. </ul>

ଟେବୁଲ୍ ପାଇଁ, ଆପଣ ଏହାକୁ ଅନୁମାନ କରିଛନ୍ତି, ଟାବୁଲାର୍ ଡାଟା |

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

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

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

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

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

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

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

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

ଉଦାହରଣ: ଘନୀଭୂତ ଟେବୁଲ୍ |

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

# ପ୍ରଥମ ନାମ ଶେଷ ନାମ ଭାଷା
୧ କେତେକ ଗୋଟିଏ | ଇଂରାଜୀ |
୨ ଜୋ ସିକ୍ସପ୍ୟାକ୍ | ଇଂରାଜୀ |
3 ଷ୍ଟୁ | ଦନ୍ତ କୋଡ୍

ଉଦାହରଣ: ସୀମାନ୍ତ ସାରଣୀ |

ତୁମର ଟେବୁଲଗୁଡିକ ସେମାନଙ୍କର କୋଣକୁ ଗୋଲେଇ କରି ସବୁ ପାର୍ଶ୍ୱରେ ସୀମା ଯୋଡି କେବଳ ଟିକେ ହାଲୁକା ଦେଖାଯାଏ |

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

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

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

# ପ୍ରଥମ ନାମ ଶେଷ ନାମ ଭାଷା
୧ କେତେକ ଗୋଟିଏ | ଇଂରାଜୀ |
୨ ଜୋ ସିକ୍ସପ୍ୟାକ୍ | ଇଂରାଜୀ |
3 ଷ୍ଟୁ | ଦନ୍ତ କୋଡ୍
4 ଟି ସ୍ତମ୍ଭ
2 ସ୍ତମ୍ଭଗୁଡିକ 2 ସ୍ତମ୍ଭଗୁଡିକ

ଟିପନ୍ତୁ: ଜେବ୍ରା-ଷ୍ଟ୍ରିପିଂ ହେଉଛି ଏକ ପ୍ରଗତିଶୀଳ ଉନ୍ନତି ଯାହା IE8 ଏବଂ ତଳ ପରି ପୁରୁଣା ବ୍ରାଉଜର୍ ପାଇଁ ଉପଲବ୍ଧ ନୁହେଁ |

  1. <ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍" > | 
  2.   ...
  3. </table>

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

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

# ପ୍ରଥମ ନାମ ଶେଷ ନାମ ଭାଷା
୨ ଜୋ ସିକ୍ସପ୍ୟାକ୍ | ଇଂରାଜୀ |
3 ଷ୍ଟୁ | ଦନ୍ତ କୋଡ୍
୧ ତୁମର ଗୋଟିଏ | ଇଂରାଜୀ | 
  1. <ସ୍କ୍ରିପ୍ଟ 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ଏବଂ ତୁମର ବାମ ପରିବର୍ତ୍ତେ ସେମାନଙ୍କ କ୍ଷେତ୍ର ଉପରେ ଲେବଲ୍ ରହିବ | ଯଦି ଆପଣଙ୍କର ଫର୍ମଗୁଡିକ ଛୋଟ ଥାଏ କିମ୍ବା ଭାରୀ ଫର୍ମଗୁଡିକ ପାଇଁ ଆପଣଙ୍କର ଦୁଇଟି ସ୍ତମ୍ଭ ଅଛି ତେବେ ଏହା ବହୁତ ଭଲ କାମ କରେ |

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

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

ଆପଣଙ୍କ ମାର୍କଅପ୍ ରେ ଅଳ୍ପ କିଛି ଶ୍ରେଣୀ ଯୋଗ କରି ଯେକ form ଣସି ଫର୍ମ input, selectକିମ୍ବା ମୋଟେଇ କଷ୍ଟୋମାଇଜ୍ କରନ୍ତୁ |textarea

V1.3.0 ସୁଦ୍ଧା, ଆମେ ଫର୍ମ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ଗ୍ରୀଡ୍-ଆଧାରିତ ସାଇଜ୍ କ୍ଲାସ୍ ଯୋଡିଛୁ | ବିଦ୍ୟମାନ, ଇତ୍ୟାଦି ଶ୍ରେଣୀଗୁଡ଼ିକ ଉପରେ ଦୟାକରି ଏଗୁଡିକ ବ୍ୟବହାର .miniକରନ୍ତୁ .small|

ବଟନ୍

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

ସମସ୍ତ ବଟନ୍ ଗୁଡିକ ହାଲୁକା ଧୂସର ଶ style ଳୀରେ ଡିଫଲ୍ଟ, କିନ୍ତୁ ବିଭିନ୍ନ ରଙ୍ଗ ଶ yles ଳୀ ପାଇଁ ଅନେକ କାର୍ଯ୍ୟକ୍ଷମ ଶ୍ରେଣୀ ପ୍ରୟୋଗ କରାଯାଇପାରିବ | ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକରେ ଏକ ନୀଳ .primaryଶ୍ରେଣୀ, ହାଲୁକା-ନୀଳ .infoଶ୍ରେଣୀ, ସବୁଜ .successଶ୍ରେଣୀ ଏବଂ ଏକ ଲାଲ୍ .dangerଶ୍ରେଣୀ ଅନ୍ତର୍ଭୁକ୍ତ |

ଉଦାହରଣ ବଟନ୍ |

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

       

ବିକଳ୍ପ ଆକାର |

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

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

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

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

ଲିଙ୍କ୍

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

ବଟନ୍

 

ସଫଳତା, ଚେତାବନୀ, ତ୍ରୁଟି, ଏବଂ ସୂଚନା ବାର୍ତ୍ତା ପାଇଁ ଆଲର୍ଟ ଏବଂ ତ୍ରୁଟି ଶ yles ଳୀ |

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

.alert-message

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

ଜାଭାସ୍କ୍ରିପ୍ଟ ପାଆନ୍ତୁ »

×

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

×

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

×

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

×

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

ଉଦାହରଣ କୋଡ୍

  1. <div class = "ଆଲର୍ଟ-ମେସେଜ୍ ଚେତାବନୀ" > | 
  2.   <a class = "close" href = "#"> × </a> _  
  3.   <p> <strong> ପବିତ୍ର ଗୁଆକାମୋଲ୍! </strong> ସର୍ବୋତ୍ତମ ଚେକ୍ ୟୋ ସେଲ୍ଫ, ଆପଣ ବହୁତ ଭଲ ଦେଖାଯାଉ ନାହାଁନ୍ତି | </p>
  4. </div>

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

.alert-message.block-message

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

ଜାଭାସ୍କ୍ରିପ୍ଟ ପାଆନ୍ତୁ »

×

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

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

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

  • Duis mollis est non commodo luctus |
  • ନିସି ଏରାଟ ପୋର୍ଟଟିଟର୍ ଲିଗୁଲା |
  • ଲାସିନିଆ ଓଡିଓ ସେମ ନେକ୍ ଏଲିଟ୍ ଇଗେଟ୍ କରନ୍ତୁ |
ଏହି କାର୍ଯ୍ୟ ନିଅନ୍ତୁ | କିମ୍ବା ଏହା କରନ୍ତୁ |
×

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

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

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

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

ଉଦାହରଣ କୋଡ୍

  1. <div class = "ଆଲର୍ଟ-ମେସେଜ୍ ବ୍ଲକ-ମେସେଜ୍ ଚେତାବନୀ" > | 
  2.   <a class = "close" href = "#"> × </a> _  
  3.   <p> <strong> ପବିତ୍ର ଗୁଆକାମୋଲ୍! ଏହା ଏକ ଚେତାବନୀ! </strong> ସର୍ବୋତ୍ତମ ଚେକ୍ ୟୋ ସେଲ୍ଫ, ଆପଣ ବହୁତ ଭଲ ଦେଖାଯାଉ ନାହାଁନ୍ତି | Nulla vitae elit libero, a pharetra augue। ପ୍ରଶଂସନୀୟ କମୋଡୋ କର୍ସସ୍ ମ୍ୟାଗନା, ଭେଲ ସ୍କେଲେରିସ୍କ ନିସଲ୍ କନସେକ୍ଟେଟର୍ ଇତ୍ୟାଦି | </p>
  4.   <div ଶ୍ରେଣୀ = "ସତର୍କ-କାର୍ଯ୍ୟ" > | 
  5.     <a class = "btn small" href = "#"> ଏହି କାର୍ଯ୍ୟ ନିଅ </a> <a class = "btn small" href = "#"> କିମ୍ବା ଏହା କର </a>     
  6.   </div>
  7. </div>

ମୋଡାଲ୍, ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭରରେ ବିଷୟବସ୍ତୁ ପ୍ରଦର୍ଶନ ପାଇଁ ପପୋଭର ଉପାଦାନଗୁଡ଼ିକ |

ମୋଡାଲ୍ |

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

ଜାଭାସ୍କ୍ରିପ୍ଟ ପାଆନ୍ତୁ »

×

ମୋଡାଲ୍ ହେଡିଙ୍ଗ୍ |

ଗୋଟିଏ ଭଲ ଶରୀର…

ପ୍ରାଥମିକ ଦ୍ Secondary ିତୀୟ

ସାଧନଗୁଡ଼ିକ

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

ଜାଭାସ୍କ୍ରିପ୍ଟ ପାଆନ୍ତୁ »

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲାର୍ ସିଟ୍ ଆମେଟ୍ ଇଲୋ ଏରର୍ ଇପ୍ସମ୍ ଭେରିଟାଟିସ୍ ଅଟୋ ଇଷ୍ଟେ ପର୍ପସିସିଆଟିସ୍ ଇଷ୍ଟ ଭୋଲୁପଟାସ୍ ନାଟସ୍ ଇଲୋ କ୍ୱାସି ଓଡିଟ୍ ଅଟୋ ନାଟସ୍ ଫଳାଫଳ ଫଳାଫଳ, ଅଟୋ ନାଟସ୍ ଇଲୋ ଭୋଲୁପେଟେମ୍ ଓଡିଟ୍ ପର୍ପସିଏଟିସ୍ ଲାଉଡାଣ୍ଟିମ୍ ରିମ୍ ଡୋଲୋରେମ୍କ ଟୋଟାମ୍ ଭଲ୍ୟୁପଟାସ୍ | 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 | ମୋର୍ବି ଲିଓ ରିସସ୍, ପୋର୍ଟା ଏସି କନସେକ୍ଟେଟର୍ ଏସି, ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରିବା ଆପଣଙ୍କୁ ଆରମ୍ଭ କରିବା ପାଇଁ ପ୍ଲଗଇନଗୁଡିକର ଏକ ସୂଚକାଙ୍କ |

ଆରମ୍ଭ କରୁଛି

ବୁଟଷ୍ଟ୍ରାପ୍ ଲାଇବ୍ରେରୀ ସହିତ ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ଏକତ୍ର କରିବା ଅତ୍ୟନ୍ତ ସହଜ | ନିମ୍ନରେ ଆମେ ମ ics ଳିକତା ଉପରେ ଯିବା ଏବଂ ଆପଣଙ୍କୁ ଆରମ୍ଭ କରିବା ପାଇଁ ଆପଣଙ୍କୁ କିଛି ଅଦ୍ଭୁତ ପ୍ଲଗଇନ୍ ଯୋଗାଇବା!

ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକସ୍ ଦେଖନ୍ତୁ »

କ’ଣ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି |

ନୂତନ କଷ୍ଟମ୍ ପ୍ଲଗଇନ୍ ସହିତ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର କିଛି ପ୍ରାଥମିକ ଉପାଦାନକୁ ଜୀବନରେ ଆଣ, ଯାହା jQuery ଏବଂ Ender ସହିତ କାମ କରେ | ତୁମର ନିର୍ଦ୍ଦିଷ୍ଟ ବିକାଶ ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ସେଗୁଡିକୁ ବିସ୍ତାର ଏବଂ ରୂପାନ୍ତର କରିବାକୁ ଆମେ ଆପଣଙ୍କୁ ଉତ୍ସାହିତ କରୁ |

ଫାଇଲ୍ | ବର୍ଣ୍ଣନା
bootstrap-modal.js ଆମର ମୋଡାଲ୍ ପ୍ଲଗଇନ୍ ହେଉଛି ପାରମ୍ପାରିକ ମୋଡାଲ୍ js ପ୍ଲଗଇନ୍ ଉପରେ ଏକ ସୁପର ସ୍ଲିମ୍! କେବଳ ଟୁଇଟରରେ ଆବଶ୍ୟକ କରୁଥିବା ଖାଲି କାର୍ଯ୍ୟକାରିତାକୁ ଅନ୍ତର୍ଭୁକ୍ତ କରିବା ପାଇଁ ଆମେ ବିଶେଷ ଯତ୍ନ ନେଇଥିଲୁ |
bootstrap-alerts.js ଆଲର୍ଟରେ ଘନିଷ୍ଠ କାର୍ଯ୍ୟକାରିତା ଯୋଗାଇବା ପାଇଁ ଆଲର୍ଟ ପ୍ଲଗଇନ୍ ଏକ ସୁପର କ୍ଷୁଦ୍ର ଶ୍ରେଣୀ ଅଟେ |
bootstrap-dropdown.js ଏହି ପ୍ଲଗଇନ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଟପ୍ ବାର୍ କିମ୍ବା ଟ୍ୟାବଡ୍ ନେଭିଗେସନ୍ରେ ଡ୍ରପ୍ ଡାଉନ୍ ଇଣ୍ଟରାକସନ ଯୋଡିବା ପାଇଁ |
bootstrap-scrollspy.js ସ୍କ୍ରୋଲ୍ ସ୍ପି ପ୍ଲଗଇନ୍ ହେଉଛି ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଟପ୍ ବାର୍ ରେ ସ୍କ୍ରୋଲ୍ ପୋଜିସନ୍ ଉପରେ ଆଧାର କରି ଏକ ଅଟୋ ଅପଡେଟ୍ ନେଭ୍ ଯୋଡିବା ପାଇଁ |
bootstrap-buttons.js ସ୍କ୍ରୋଲ୍ ସ୍ପି ପ୍ଲଗଇନ୍ ହେଉଛି ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଟପ୍ ବାର୍ ରେ ସ୍କ୍ରୋଲ୍ ପୋଜିସନ୍ ଉପରେ ଆଧାର କରି ଏକ ଅଟୋ ଅପଡେଟ୍ ନେଭ୍ ଯୋଡିବା ପାଇଁ |
bootstrap-tabs.js ଏହି ପ୍ଲଗଇନ୍ ସ୍ଥାନୀୟ ବିଷୟବସ୍ତୁ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ପାଇଁ ଶୀଘ୍ର, ଗତିଶୀଳ ଟ୍ୟାବ୍ ଏବଂ ବଟିକା କାର୍ଯ୍ୟକାରିତା ଯୋଗ କରିଥାଏ |
bootstrap-twipsy.js ଜାସନ୍ ଫ୍ରେମ୍ ଦ୍ୱାରା ଲିଖିତ ଉତ୍କୃଷ୍ଟ jQuery.tipsy ପ୍ଲଗଇନ୍ ଉପରେ ଆଧାର କରି | twipsy ହେଉଛି ଏକ ଅପଡେଟ୍ ସଂସ୍କରଣ, ଯାହା ପ୍ରତିଛବି ଉପରେ ନିର୍ଭର କରେ ନାହିଁ, ଆନିମେସନ୍ ପାଇଁ css3 ବ୍ୟବହାର କରେ, ଏବଂ ସ୍ଥାନୀୟ ଟାଇଟଲ୍ ଷ୍ଟୋରେଜ୍ ପାଇଁ ଡାଟା-ଆଟ୍ରିବ୍ୟୁଟ୍!
bootstrap-popover.js ପପଓଭର ପ୍ଲଗଇନ୍ ଆପଣଙ୍କ ଅନୁପ୍ରୟୋଗରେ ପପୋଭର ଯୋଡିବା ପାଇଁ ଏକ ସରଳ ଇଣ୍ଟରଫେସ୍ ପ୍ରଦାନ କରେ | ଏହା boostrap-twipsy.js ପ୍ଲଗଇନକୁ ବିସ୍ତାର କରେ, ତେଣୁ ତୁମର ପ୍ରୋଜେକ୍ଟରେ ପପୋଭର ଅନ୍ତର୍ଭୂକ୍ତ କରିବାବେଳେ ସେହି ଫାଇଲକୁ ଧରିବାକୁ ନିଶ୍ଚିତ ହୁଅ!

ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କି?

ନା! ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରଥମେ ଏବଂ ଏକ CSS ଲାଇବ୍ରେରୀ ହେବା ପାଇଁ ଡିଜାଇନ୍ ହୋଇଛି | ଏହି ଜାଭାସ୍କ୍ରିପ୍ଟ ଅନ୍ତର୍ଭୂକ୍ତ ଶ yles ଳୀ ଉପରେ ଏକ ମ basic ଳିକ ଇଣ୍ଟରାକ୍ଟିଭ୍ ଲେୟାର ପ୍ରଦାନ କରେ |

ଯଦିଓ, ଯେଉଁମାନେ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରନ୍ତି, ଆମେ ବୁଟଷ୍ଟ୍ରାପକୁ ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ କିପରି ସଂଯୋଗ କରିବେ ଏବଂ ତୁରନ୍ତ ମ basic ଳିକ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ତୁମକୁ ଶୀଘ୍ର, ହାଲୁକା ବିକଳ୍ପ ଦେବା ପାଇଁ ଆପଣଙ୍କୁ ସାହାଯ୍ୟ କରିବାକୁ ଉପରୋକ୍ତ ପ୍ଲଗଇନଗୁଡିକ ପ୍ରଦାନ କରିଛୁ |

ଅଧିକ ସୂଚନା ପାଇଁ ଏବଂ କିଛି ଲାଇଭ୍ ଡେମୋ ଦେଖିବାକୁ, ଦୟାକରି ଆମର ପ୍ଲଗଇନ୍ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ପେଜ୍ କୁ ଦେଖନ୍ତୁ |

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

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

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

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

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

  1. <link rel = "stylesheet / less" href = "less / bootstrap.less" media = "all" />    
  2. <ସ୍କ୍ରିପ୍ଟ src = "js / less-1.1.3.min.js" > </script> |

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

କ’ଣ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି |

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

ଭେରିଏବଲ୍ |

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

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

ମନ୍ତବ୍ୟ

କମ୍ 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.   ...
  14. }

ଗ୍ରେଡିଏଣ୍ଟ୍

  1. # ଗ୍ରେଡିଏଣ୍ଟ୍ {
  2.   ...
  3.   । ଭୂଲମ୍ବ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ : # 555, @ ଏଣ୍ଡ ରଙ୍ଗ: # 333) { 
  4.     ପୃଷ୍ଠଭୂମି - ରଙ୍ଗ : @endColor ; 
  5.     ପୃଷ୍ଠଭୂମି - ପୁନରାବୃତ୍ତି : ପୁନରାବୃତ୍ତି - x ;
  6.     ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - khtml - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ର line ଖ୍ୟ , ବାମ ଉପର , ବାମ ତଳ , ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ ) ଠାରୁ ( @endColor )); // କନକର୍ |   
  7.     ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ମୋଜ୍ - ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // FF 3.6+   
  8.     ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ms - ର line ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // IE10   
  9.     ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ୱେବକିଟ୍ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ର line ଖ୍ୟ , ବାମ ଉପର , ବାମ ତଳ , ରଙ୍ଗ - ଷ୍ଟପ୍ ( 0 %, @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ ), ରଙ୍ଗ - ବନ୍ଦ ( 100 %, @endColor )); // ସଫାରି 4+, କ୍ରୋମ୍ 2+ |    
  10.     ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ୱେବକିଟ୍ - ର line ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ସଫାରି 5.1+, କ୍ରୋମ୍ 10+ |   
  11.     ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - o - ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ଅପେରା 11.10   
  12.     ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ କଲର୍ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ମାନକ  
  13.   }
  14.   ...
  15. }

ଅପରେସନ୍ସ

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

  1. // ଗ୍ରୀଡ୍
  2. @ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ : 16 ;       
  3. @ ଗ୍ରୀଡ୍ କଲମ୍ ୱିଥ୍ : 40px ;   
  4. @ ଗ୍ରୀଡ୍ ଗୁଟର୍ ୱିଥ୍ : 20px ;   
  5. @ ସାଇଟ୍ ୱିଥ୍ : ( @ ଗ୍ରିଡ୍ କଲମ୍ସ * @ ଗ୍ରିଡ୍ କଲମ୍ ୱିଥ୍ ) + _                 
  6.  
  7. // କିଛି ସ୍ତମ୍ଭ ପ୍ରସ୍ତୁତ କରନ୍ତୁ |
  8. । ସ୍ତମ୍ଭଗୁଡିକ ( @ କଲମ୍ ସ୍ପାନ୍ : 1 ) {  
  9.   ମୋଟେଇ : ( @ ଗ୍ରିଡ୍ କଲମ୍ ୱିଥ୍ * @ କଲମ୍ ସ୍ପାନ୍ ) + _ _ _         
  10. }

କମ୍ ସଂକଳନ

/ Lib / ରେ ଥିବା ଫାଇଲଗୁଡ଼ିକୁ ରୂପାନ୍ତର କରିବା ପରେ .less, ବୁଟଷ୍ଟ୍ରାପ୍ - *। *। *। Css ଏବଂ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ - *। *। ଯଦି ଆପଣ GitHub କୁ ଏକ ଟାଣ ଅନୁରୋଧ ଦାଖଲ କରୁଛନ୍ତି, ତେବେ ଆପଣଙ୍କୁ ସର୍ବଦା ପୁନ omp ସଂକଳନ କରିବାକୁ ପଡିବ |

ସଂକଳନ କରିବାର ଉପାୟ |

ପଦ୍ଧତି ପଦକ୍ଷେପ
ମେକ୍ଫାଇଲ୍ ସହିତ ନୋଡ୍ |

ନିମ୍ନ ନିର୍ଦ୍ଦେଶକୁ ଚଲାଇ npm ସହିତ କମ୍ କମାଣ୍ଡ୍ ଲାଇନ୍ କମ୍ପାଇଲର୍ ସଂସ୍ଥାପନ କରନ୍ତୁ:

$ npm lessc ସଂସ୍ଥାପନ କରନ୍ତୁ |

ଥରେ ଇନଷ୍ଟଲ୍ ହୋଇଗଲେ କେବଳ makeଆପଣଙ୍କର ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଡିରେକ୍ଟୋରୀର ମୂଳରୁ ଚଲାନ୍ତୁ ଏବଂ ଆପଣ ସମସ୍ତେ ସେଟ୍ ହୋଇସାରିଛନ୍ତି |

ଅତିରିକ୍ତ ଭାବରେ, ଯଦି ଆପଣଙ୍କର ୱାଚର୍ ସଂସ୍ଥାପିତ ହୋଇଛି, ଆପଣ make watchପ୍ରତ୍ୟେକ ଥର ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଲିବରେ ଏକ ଫାଇଲ୍ ଏଡିଟ୍ କରିବା ସମୟରେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ପୁନ bu ନିର୍ମାଣ କରିବାକୁ ଚଲାଇପାରନ୍ତି (ଏହା ଆବଶ୍ୟକ ନୁହେଁ, କେବଳ ଏକ ସୁବିଧା ପଦ୍ଧତି) |
ଜାଭାସ୍କ୍ରିପ୍ଟ

ସର୍ବଶେଷ Less.js ଡାଉନଲୋଡ୍ କରନ୍ତୁ ଏବଂ ଏଥିରେ ଥିବା ପଥ (ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍) ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ head|

  1. <link rel = "stylesheet / less" href = "/path/to/bootstrap.less" >  
  2. <ସ୍କ୍ରିପ୍ଟ src = "/path/to/less.js" > </script> |

.ହୀନ ଫାଇଲଗୁଡିକର ପୁନ omp ସଂକଳନ କରିବାକୁ, କେବଳ ସେଭ୍ କରନ୍ତୁ ଏବଂ ଆପଣଙ୍କର ପୃଷ୍ଠା ପୁନ o ଲୋଡ୍ କରନ୍ତୁ | Less.js ସେଗୁଡ଼ିକୁ ସଂକଳନ କରେ ଏବଂ ସ୍ଥାନୀୟ ଷ୍ଟୋରେଜ୍ ରେ ଷ୍ଟୋର୍ କରେ |
କମାଣ୍ଡ୍ ଲାଇନ୍ |

ଯଦି ଆପଣଙ୍କର ପୂର୍ବରୁ କମ୍ କମାଣ୍ଡ୍ ଲାଇନ୍ ଟୁଲ୍ ସଂସ୍ଥାପିତ ହୋଇଛି, କେବଳ ନିମ୍ନ ନିର୍ଦ୍ଦେଶକୁ ଚଲାନ୍ତୁ:

$ lessc ./lib/bootstrap.less> bootstrap.css

--compressଯଦି ଆପଣ କିଛି ବାଇଟ୍ ସଞ୍ଚୟ କରିବାକୁ ଚେଷ୍ଟା କରୁଛନ୍ତି ତେବେ ସେହି ନିର୍ଦ୍ଦେଶରେ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ !
କମ୍ ମ୍ୟାକ୍ ଆପ୍ |

ଅଣଅନୁଷ୍ଠାନିକ ମ୍ୟାକ୍ ଆପ୍ .less ଫାଇଲଗୁଡିକର ଡିରେକ୍ଟୋରୀଗୁଡିକ ଦେଖେ ଏବଂ ଏକ ଦେଖାଯାଇଥିବା .less ଫାଇଲ୍ ର ପ୍ରତ୍ୟେକ ସେଭ୍ ପରେ କୋଡ୍ କୁ ସ୍ଥାନୀୟ ଫାଇଲରେ କମ୍ପାଇଲ୍ କରେ |

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