ବୁଟଷ୍ଟ୍ରାପ୍ ବିସ୍ତାର କରିବା |

ଅନ୍ତର୍ଭୁକ୍ତ ଶ yles ଳୀ ଏବଂ ଉପାଦାନଗୁଡ଼ିକର ଲାଭ ଉଠାଇବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ବିସ୍ତାର କରନ୍ତୁ, ଏବଂ LESS ଭେରିଏବଲ୍ ଏବଂ ମିକ୍ସନ୍ସ |

କମ CSS |

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

କାହିଁକି କମ?

ବୁଟଷ୍ଟ୍ରାପର ଜଣେ ସୃଷ୍ଟିକର୍ତ୍ତା ଏହି ବିଷୟରେ ଏକ ଶୀଘ୍ର ବ୍ଲଗ୍ ପୋଷ୍ଟ ଲେଖିଥିଲେ , ଏଠାରେ ସଂକ୍ଷିପ୍ତ:

  • ସାସ୍ ତୁଳନାରେ କମ୍ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଶୀଘ୍ର ~ 6x ଶୀଘ୍ର ସଂକଳନ କରେ |
  • ଜାଭାସ୍କ୍ରିପ୍ଟରେ କମ୍ ଲେଖା ହୋଇଛି, ସାସ୍ ସହିତ ରୁବି ତୁଳନାରେ ଆମକୁ ବୁଡ଼ିବା ଏବଂ ପ୍ୟାଚ୍ କରିବା ସହଜ କରିଥାଏ |
  • ଅଳ୍ପ ହିଁ ବେଶୀ; ଆମେ ଅନୁଭବ କରିବାକୁ ଚାହୁଁଛୁ ଯେ ଆମେ CSS ଲେଖୁଛୁ ଏବଂ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସମସ୍ତଙ୍କ ପାଇଁ ନିକଟତର କରୁଛୁ |

କ’ଣ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି?

CSS ର ଏକ ବିସ୍ତାର ଭାବରେ, LESS ରେ ଭେରିଏବଲ୍, କୋଡ୍ ର ପୁନ us ବ୍ୟବହାର ଯୋଗ୍ୟ ସ୍ନିପେଟ୍ ପାଇଁ ମିକ୍ସନ୍ସ, ସରଳ ଗଣିତ ପାଇଁ କାର୍ଯ୍ୟ, ବସା, ଏବଂ ରଙ୍ଗ କାର୍ଯ୍ୟ ମଧ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ |

ଅଧିକ ସିଖନ୍ତୁ

ଅଧିକ ଜାଣିବା ପାଇଁ http://lesscss.org/ ରେ ଅଫିସିଆଲ୍ ୱେବସାଇଟ୍ ପରିଦର୍ଶନ କରନ୍ତୁ |

ଯେହେତୁ ଆମର CSS କମ୍ ସହିତ ଲେଖା ହୋଇଛି ଏବଂ ଭେରିଏବଲ୍ ଏବଂ ମିକ୍ସିନ ବ୍ୟବହାର କରେ, ଏହାକୁ ଅନ୍ତିମ ଉତ୍ପାଦନ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ସଂକଳନ କରାଯିବା ଆବଶ୍ୟକ | ଏଠାରେ କିପରି ଅଛି |

ଟିପନ୍ତୁ: ଯଦି ଆପଣ ପରିବର୍ତ୍ତିତ CSS ସହିତ GitHub କୁ ଏକ ଟାଣ ଅନୁରୋଧ ଦାଖଲ କରୁଛନ୍ତି, ତେବେ ଆପଣଙ୍କୁ ଏହି ପଦ୍ଧତିଗୁଡ଼ିକ ମଧ୍ୟରୁ କ through ଣସିଟି ମାଧ୍ୟମରେ CSS କୁ ପୁନ omp ସଂକଳନ କରିବାକୁ ପଡିବ |

ସଂକଳନ ପାଇଁ ଉପକରଣଗୁଡ଼ିକ |

କମାଣ୍ଡ୍ ଲାଇନ୍ |

କମାଣ୍ଡ୍ ଲାଇନ୍ ମାଧ୍ୟମରେ ସଙ୍କଳନ ପାଇଁ GitHub ରେ ପ୍ରୋଜେକ୍ଟ ରିଡମେରେ ଥିବା ନିର୍ଦ୍ଦେଶାବଳୀ ଅନୁସରଣ କରନ୍ତୁ |

ଜାଭାସ୍କ୍ରିପ୍ଟ |

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

<link rel = "stylesheet / less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" > </script>  
 

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

ଅନ of ପଚାରିକ ମ୍ୟାକ୍ ଆପ୍ |

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

ଅଧିକ ଆପ୍ |

କ୍ରଞ୍ଚ |

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

CodeKit

ଅଣଅନୁଷ୍ଠାନିକ ମ୍ୟାକ୍ ଆପ୍ ସହିତ ସମାନ ବ୍ୟକ୍ତିଙ୍କ ଦ୍ ated ାରା ସୃଷ୍ଟି, କୋଡକିଟ୍ ହେଉଛି ଏକ ମ୍ୟାକ୍ ଆପ୍ ଯାହା LESS, SASS, Stylus, ଏବଂ CoffeeScript ସଂକଳନ କରେ |

ସରଳ

LESS ଫାଇଲଗୁଡିକର ଡ୍ରାଗ୍ ଏବଂ ଡ୍ରପ୍ ସଙ୍କଳନ ପାଇଁ ମ୍ୟାକ୍, ଲିନକ୍ସ, ଏବଂ ୱିଣ୍ଡୋଜ୍ ଆପ୍ | ଏହା ସହିତ, ଉତ୍ସ କୋଡ୍ GitHub ରେ ଅଛି |

ସଂକଳିତ କିମ୍ବା କ୍ଷୁଦ୍ର CSS ଏବଂ JS ରେ ଡ୍ରପ୍ କରି ଶୀଘ୍ର ଯେକ web ଣସି ୱେବ୍ ପ୍ରୋଜେକ୍ଟ ଆରମ୍ଭ କରନ୍ତୁ | ସହଜ ଅପଗ୍ରେଡ୍ ଏବଂ ରକ୍ଷଣାବେକ୍ଷଣ ପାଇଁ କଷ୍ଟମ୍ ଷ୍ଟାଇଲ୍ ଉପରେ ସ୍ତର ପୃଥକ ଭାବରେ |

ଫାଇଲ୍ ଗଠନ

ସର୍ବଶେଷ ସଂକଳିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଡାଉନଲୋଡ୍ କରନ୍ତୁ ଏବଂ ଆପଣଙ୍କର ପ୍ରୋଜେକ୍ଟରେ ସ୍ଥାନ ଦିଅନ୍ତୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ଆପଣଙ୍କର ଏହିପରି କିଛି ଥାଇପାରେ:

  ଆପ୍ /
      ଲେଆଉଟ୍ /
      ଟେମ୍ପଲେଟ୍ /
  ଜନସାଧାରଣ /
      css /
          bootstrap.min.css
      js /
          bootstrap.min.js
      img /
          glyphicons-halflings.png
          glyphicons-halflings-white.png

ଷ୍ଟାର୍ଟର ଟେମ୍ପଲେଟ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ଆରମ୍ଭ କରିବାକୁ ନିମ୍ନଲିଖିତ ଆଧାର HTML କୁ କପି କରନ୍ତୁ |

  1. <html>
  2. <ହେଡ୍>
  3. <ଟାଇଟଲ୍> ବୁଟଷ୍ଟ୍ରାପ୍ 101 ଟେମ୍ପଲେଟ୍ </ ଟାଇଟଲ୍> |
  4. <! - ବୁଟଷ୍ଟ୍ରାପ୍ ->
  5. <link href = "public / css / bootstrap.min.css" rel = "stylesheet" > |
  6. </head>
  7. <body>
  8. <h1> ନମସ୍କାର, ଜଗତ! </h1>
  9. <! - ବୁଟଷ୍ଟ୍ରାପ୍ ->
  10. <script src = "public / js / bootstrap.min.js" > </script> |
  11. </body>
  12. </html>

କଷ୍ଟମ୍ କୋଡ୍ ଉପରେ ସ୍ତର |

ତୁମର ଅଲଗା CSS ଏବଂ JS ଫାଇଲଗୁଡ଼ିକ ସହିତ ବୁଟଷ୍ଟ୍ରାପକୁ ନିଜର କରିବା ପାଇଁ ତୁମର କଷ୍ଟମ୍ CSS, JS, ଏବଂ ଅଧିକ ଆବଶ୍ୟକ କର |

  1. <html>
  2. <ହେଡ୍>
  3. <ଟାଇଟଲ୍> ବୁଟଷ୍ଟ୍ରାପ୍ 101 ଟେମ୍ପଲେଟ୍ </ ଟାଇଟଲ୍> |
  4. <! - ବୁଟଷ୍ଟ୍ରାପ୍ ->
  5. <link href = "public / css / bootstrap.min.css" rel = "stylesheet" > |
  6. <! - ପ୍ରକଳ୍ପ ->
  7. <link href = "public / css / application.css" rel = "stylheet" > |
  8. </head>
  9. <body>
  10. <h1> ନମସ୍କାର, ଜଗତ! </h1>
  11. <! - ବୁଟଷ୍ଟ୍ରାପ୍ ->
  12. <script src = "public / js / bootstrap.min.js" > </script> |
  13. <! - ପ୍ରକଳ୍ପ ->
  14. <script src = "public / js / application.js" > </script> |
  15. </body>
  16. </html>