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

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

କାହିଁକି କମ?

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

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

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

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

ଅଧିକ ସିଖନ୍ତୁ

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

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

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

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

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

ନିମ୍ନଲିଖିତ ନିର୍ଦ୍ଦେଶକୁ ଚଲାଇ npm ସହିତ LESS କମାଣ୍ଡ୍ ଲାଇନ୍ କମ୍ପାଇଲର୍, JSHint, Recess, ଏବଂ uglify-js ସଂସ୍ଥାପନ କରନ୍ତୁ:

$ npm ଇନଷ୍ଟଲ୍ -g କମ୍ jshint recess uglify-js |

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

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

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

ନୋଡ୍ ମାଧ୍ୟମରେ LESS କମାଣ୍ଡ୍ ଲାଇନ୍ ଟୁଲ୍ ସଂସ୍ଥାପନ କରନ୍ତୁ ଏବଂ ନିମ୍ନଲିଖିତ ନିର୍ଦ୍ଦେଶକୁ ଚଲାନ୍ତୁ:

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

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

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

ସର୍ବଶେଷ 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 ଣସି ୱେବ୍ ପ୍ରୋଜେକ୍ଟ ଆରମ୍ଭ କରନ୍ତୁ | ସହଜ ଅପଗ୍ରେଡ୍ ଏବଂ ରକ୍ଷଣାବେକ୍ଷଣ ପାଇଁ କଷ୍ଟମ୍ ଷ୍ଟାଇଲ୍ ଉପରେ ସ୍ତର ପୃଥକ ଭାବରେ |

ଫାଇଲ୍ ଗଠନ

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

  app / ├── layouts / └── templates / public / ├── css / │ ├── bootstrap । ମିନିଟ୍ _ css
   ├── js / │ ├── ବୁଟଷ୍ଟ୍ରାପ୍ | ମିନିଟ୍ _ js
   └── img / ├── glyphicons - ଅଧା _ png
       └── glyphicons - ଅଧା - ଧଳା | 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 ସହିତ ନିର୍ମିତ |