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

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଏହାର ମୂଳରେ 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 କୁ କପି କରନ୍ତୁ |

<html>
  <ହେଡ୍>
    <ଟାଇଟଲ୍> ବୁଟଷ୍ଟ୍ରାପ୍ 101 ଟେମ୍ପଲେଟ୍ </ ଟାଇଟଲ୍> |
    <! - ବୁଟଷ୍ଟ୍ରାପ୍ ->
    <link href = "public / css / bootstrap.min.css" rel = "stylesheet" > |  
  </head>
  <body>
    <h1> ନମସ୍କାର, ଜଗତ! </h1>
    <! - ବୁଟଷ୍ଟ୍ରାପ୍ ->
    <script src = "public / js / bootstrap.min.js" > </script> | 
  </body>
</html>

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

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

<html>
  <ହେଡ୍>
    <ଟାଇଟଲ୍> ବୁଟଷ୍ଟ୍ରାପ୍ 101 ଟେମ୍ପଲେଟ୍ </ ଟାଇଟଲ୍> |
    <! - ବୁଟଷ୍ଟ୍ରାପ୍ ->
    <link href = "public / css / bootstrap.min.css" rel = "stylesheet" > |  
    <! - ପ୍ରକଳ୍ପ ->
    <link href = "public / css / application.css" rel = "stylheet" > |  
  </head>
  <body>
    <h1> ନମସ୍କାର, ଜଗତ! </h1>
    <! - ବୁଟଷ୍ଟ୍ରାପ୍ ->
    <script src = "public / js / bootstrap.min.js" > </script> | 
    <! - ପ୍ରକଳ୍ପ ->
    <script src = "public / js / application.js" > </script> | 
  </body>
</html>

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

LESS ସହିତ ନିର୍ମିତ |