ವಿಸ್ತರಿಸಿ · ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕನ್ನಡದಲ್ಲಿ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಅದರ ಮಧ್ಯಭಾಗದಲ್ಲಿ ಕಡಿಮೆ ಪ್ರಮಾಣದಲ್ಲಿ ಮಾಡಲಾಗಿದೆ, ಇದು ನಮ್ಮ ಉತ್ತಮ ಸ್ನೇಹಿತ ಅಲೆಕ್ಸಿಸ್ ಸೆಲಿಯರ್ ರಚಿಸಿದ ಡೈನಾಮಿಕ್ ಸ್ಟೈಲ್‌ಶೀಟ್ ಭಾಷೆಯಾಗಿದೆ . ಇದು ಸಿಸ್ಟಂ-ಆಧಾರಿತ CSS ಅನ್ನು ವೇಗವಾಗಿ, ಸುಲಭವಾಗಿ ಮತ್ತು ಹೆಚ್ಚು ಮೋಜಿನ ರೀತಿಯಲ್ಲಿ ಅಭಿವೃದ್ಧಿಪಡಿಸುತ್ತದೆ.

ಏಕೆ ಕಡಿಮೆ?

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ರಚನೆಕಾರರಲ್ಲಿ ಒಬ್ಬರು ಇದರ ಬಗ್ಗೆ ತ್ವರಿತ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಅನ್ನು ಬರೆದಿದ್ದಾರೆ , ಇಲ್ಲಿ ಸಾರಾಂಶವಾಗಿದೆ:

Sass ಗೆ ಹೋಲಿಸಿದರೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕಡಿಮೆ ~6x ವೇಗವಾಗಿ ಕಂಪೈಲ್ ಮಾಡುತ್ತದೆ
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಕಡಿಮೆ ಬರೆಯಲಾಗಿದೆ, ರೂಬಿ ವಿತ್ ಸಾಸ್‌ಗೆ ಹೋಲಿಸಿದರೆ ಡೈವ್ ಮಾಡಲು ಮತ್ತು ಪ್ಯಾಚ್ ಮಾಡಲು ನಮಗೆ ಸುಲಭವಾಗುತ್ತದೆ.
ಕಡಿಮೆಯೆ ಜಾಸ್ತಿ; ನಾವು CSS ಅನ್ನು ಬರೆಯುತ್ತಿದ್ದೇವೆ ಮತ್ತು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಎಲ್ಲರಿಗೂ ತಲುಪುವಂತೆ ಮಾಡುತ್ತಿದ್ದೇವೆ ಎಂದು ನಾವು ಭಾವಿಸಲು ಬಯಸುತ್ತೇವೆ.

ಏನು ಸೇರಿಸಲಾಗಿದೆ?

CSS ನ ವಿಸ್ತರಣೆಯಂತೆ, LESS ವೇರಿಯೇಬಲ್‌ಗಳು, ಕೋಡ್‌ನ ಮರುಬಳಕೆಯ ತುಣುಕುಗಳಿಗಾಗಿ ಮಿಕ್ಸಿನ್‌ಗಳು, ಸರಳ ಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳು, ಗೂಡುಕಟ್ಟುವ ಮತ್ತು ಬಣ್ಣ ಕಾರ್ಯಗಳನ್ನು ಸಹ ಒಳಗೊಂಡಿದೆ.

ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ

ಇನ್ನಷ್ಟು ತಿಳಿಯಲು http://lesscss.org/ ನಲ್ಲಿ ಅಧಿಕೃತ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಭೇಟಿ ನೀಡಿ .

ನಮ್ಮ CSS ಅನ್ನು ಕಡಿಮೆ ಬರೆಯಲಾಗಿದೆ ಮತ್ತು ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸುವುದರಿಂದ, ಅಂತಿಮ ಉತ್ಪಾದನಾ ಅನುಷ್ಠಾನಕ್ಕಾಗಿ ಅದನ್ನು ಸಂಕಲಿಸಬೇಕಾಗಿದೆ. ಹೇಗೆ ಇಲ್ಲಿದೆ.

ಗಮನಿಸಿ: ನೀವು ಮಾರ್ಪಡಿಸಿದ CSS ನೊಂದಿಗೆ GitHub ಗೆ ಪುಲ್ ವಿನಂತಿಯನ್ನು ಸಲ್ಲಿಸುತ್ತಿದ್ದರೆ, ನೀವು ಈ ಯಾವುದೇ ವಿಧಾನಗಳ ಮೂಲಕ CSS ಅನ್ನು ಮರುಸಂಕಲಿಸಬೇಕು .

ಕಂಪೈಲ್ ಮಾಡಲು ಪರಿಕರಗಳು

ಮೇಕ್‌ಫೈಲ್‌ನೊಂದಿಗೆ ನೋಡ್

ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸುವ ಮೂಲಕ npm ನೊಂದಿಗೆ ಕಡಿಮೆ ಕಮಾಂಡ್ ಲೈನ್ ಕಂಪೈಲರ್, JSHint, Recess, ಮತ್ತು uglify-js ಅನ್ನು ಜಾಗತಿಕವಾಗಿ ಸ್ಥಾಪಿಸಿ:

$ npm ಇನ್‌ಸ್ಟಾಲ್ -g ಕಡಿಮೆ jshint recess ugliify-js

ಒಮ್ಮೆ ಸ್ಥಾಪಿಸಿದ makeನಂತರ ನಿಮ್ಮ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಡೈರೆಕ್ಟರಿಯ ಮೂಲದಿಂದ ರನ್ ಮಾಡಿ ಮತ್ತು ನೀವು ಸಿದ್ಧರಾಗಿರುವಿರಿ.

ಹೆಚ್ಚುವರಿಯಾಗಿ, ನೀವು ವಾಚರ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿದ್ದರೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಲಿಬ್‌ನಲ್ಲಿmake watch ನೀವು ಫೈಲ್ ಅನ್ನು ಎಡಿಟ್ ಮಾಡಿದಾಗಲೆಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರುನಿರ್ಮಾಣ ಮಾಡಲು ನೀವು ಓಡಬಹುದು (ಇದು ಅಗತ್ಯವಿಲ್ಲ, ಕೇವಲ ಅನುಕೂಲಕರ ವಿಧಾನ).

ಕಮಾಂಡ್ ಲೈನ್

ನೋಡ್ ಮೂಲಕ ಕಡಿಮೆ ಆಜ್ಞಾ ಸಾಲಿನ ಉಪಕರಣವನ್ನು ಸ್ಥಾಪಿಸಿ ಮತ್ತು ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ:

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

--compressನೀವು ಕೆಲವು ಬೈಟ್‌ಗಳನ್ನು ಉಳಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೆ ಆ ಆಜ್ಞೆಯಲ್ಲಿ ಸೇರಿಸಲು ಮರೆಯದಿರಿ !

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್

ಇತ್ತೀಚಿನ Les.js ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಅದರ ಮಾರ್ಗವನ್ನು (ಮತ್ತು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್) ನಲ್ಲಿ ಸೇರಿಸಿ <head>.

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

.less ಫೈಲ್‌ಗಳನ್ನು ಮರುಕಂಪೈಲ್ ಮಾಡಲು, ಅವುಗಳನ್ನು ಉಳಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡಿ. Less.js ಅವುಗಳನ್ನು ಕಂಪೈಲ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಸಂಗ್ರಹಿಸುತ್ತದೆ.

ಅನಧಿಕೃತ ಮ್ಯಾಕ್ ಅಪ್ಲಿಕೇಶನ್

ಅನಧಿಕೃತ ಮ್ಯಾಕ್ ಅಪ್ಲಿಕೇಶನ್ .ಲೆಸ್ ಫೈಲ್‌ಗಳ ಡೈರೆಕ್ಟರಿಗಳನ್ನು ವೀಕ್ಷಿಸುತ್ತದೆ ಮತ್ತು ವೀಕ್ಷಿಸಿದ .ಲೆಸ್ ಫೈಲ್ ಅನ್ನು ಉಳಿಸಿದ ನಂತರ ಸ್ಥಳೀಯ ಫೈಲ್‌ಗಳಿಗೆ ಕೋಡ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡುತ್ತದೆ. ನೀವು ಬಯಸಿದರೆ, ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಚಿಕ್ಕದಾಗಿಸಲು ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಆದ್ಯತೆಗಳನ್ನು ಟಾಗಲ್ ಮಾಡಬಹುದು ಮತ್ತು ಸಂಕಲಿಸಿದ ಫೈಲ್‌ಗಳು ಯಾವ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಕೊನೆಗೊಳ್ಳುತ್ತವೆ.

ಹೆಚ್ಚು ಅಪ್ಲಿಕೇಶನ್ಗಳು

ಕ್ರಂಚ್

ಕ್ರಂಚ್ ಅಡೋಬ್ ಏರ್‌ನಲ್ಲಿ ನಿರ್ಮಿಸಲಾದ ಕಡಿಮೆ ಎಡಿಟರ್ ಮತ್ತು ಕಂಪೈಲರ್ ಉತ್ತಮವಾಗಿ ಕಾಣುತ್ತಿದೆ.

ಕೋಡ್ಕಿಟ್

ಅನಧಿಕೃತ ಮ್ಯಾಕ್ ಅಪ್ಲಿಕೇಶನ್‌ನಂತೆ ಅದೇ ವ್ಯಕ್ತಿಯಿಂದ ರಚಿಸಲಾಗಿದೆ, ಕೋಡ್‌ಕಿಟ್ ಕಡಿಮೆ, ಸಾಸ್, ಸ್ಟೈಲಸ್ ಮತ್ತು ಕಾಫಿಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡುವ ಮ್ಯಾಕ್ ಅಪ್ಲಿಕೇಶನ್ ಆಗಿದೆ.

ಸರಳವಲ್ಲದ

ಕಡಿಮೆ ಫೈಲ್‌ಗಳ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಕಂಪೈಲಿಂಗ್‌ಗಾಗಿ Mac, Linux ಮತ್ತು Windows ಅಪ್ಲಿಕೇಶನ್. ಜೊತೆಗೆ, ಮೂಲ ಕೋಡ್ GitHub ನಲ್ಲಿದೆ .

ಕಂಪೈಲ್ ಮಾಡಿದ ಅಥವಾ ಮಿನಿಫೈಡ್ CSS ಮತ್ತು JS ನಲ್ಲಿ ಡ್ರಾಪ್ ಮಾಡುವ ಮೂಲಕ ಯಾವುದೇ ವೆಬ್ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ತ್ವರಿತವಾಗಿ ಪ್ರಾರಂಭಿಸಿ . ಸುಲಭವಾದ ಅಪ್‌ಗ್ರೇಡ್‌ಗಳು ಮತ್ತು ನಿರ್ವಹಣೆಗಾಗಿ ಪ್ರತ್ಯೇಕವಾಗಿ ಕಸ್ಟಮ್ ಶೈಲಿಗಳ ಮೇಲೆ ಲೇಯರ್ ಮಾಡಿ.

ಫೈಲ್ ರಚನೆಯನ್ನು ಹೊಂದಿಸಿ

ಇತ್ತೀಚಿನ ಕಂಪೈಲ್ ಮಾಡಿದ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ನಿಮ್ಮ ಯೋಜನೆಯಲ್ಲಿ ಇರಿಸಿ. ಉದಾಹರಣೆಗೆ, ನೀವು ಈ ರೀತಿಯದನ್ನು ಹೊಂದಿರಬಹುದು:

  ಅಪ್ಲಿಕೇಶನ್/
      ವಿನ್ಯಾಸಗಳು/
      ಟೆಂಪ್ಲೇಟ್‌ಗಳು/
  ಸಾರ್ವಜನಿಕ/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

ಸ್ಟಾರ್ಟರ್ ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ಬಳಸಿ

ಪ್ರಾರಂಭಿಸಲು ಕೆಳಗಿನ ಮೂಲ HTML ಅನ್ನು ನಕಲಿಸಿ.

<html>
  <ತಲೆ>
    <title> ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 101 ಟೆಂಪ್ಲೇಟ್ </title>
    <!-- ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ -->
    <link href = "public/css/bootstrap.min.css" rel = "ಸ್ಟೈಲ್‌ಶೀಟ್" >  
  </head>
  <ದೇಹ>
    <h1> ಹಲೋ, ವರ್ಲ್ಡ್! </h1>
    <!-- ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

ಕಸ್ಟಮ್ ಕೋಡ್‌ನಲ್ಲಿ ಲೇಯರ್

ನಿಮ್ಮ ಸ್ವಂತ ಪ್ರತ್ಯೇಕ CSS ಮತ್ತು JS ಫೈಲ್‌ಗಳೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ನಿಮ್ಮದಾಗಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಕಸ್ಟಮ್ CSS, JS ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡಿ.

<html>
  <ತಲೆ>
    <title> ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 101 ಟೆಂಪ್ಲೇಟ್ </title>
    <!-- ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ -->
    <link href = "public/css/bootstrap.min.css" rel = "ಸ್ಟೈಲ್‌ಶೀಟ್" >  
    <!-- ಯೋಜನೆ -->
    <link href = "public/css/application.css" rel = "ಸ್ಟೈಲ್‌ಶೀಟ್" >  
  </head>
  <ದೇಹ>
    <h1> ಹಲೋ, ವರ್ಲ್ಡ್! </h1>
    <!-- ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- ಯೋಜನೆ -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ವಿಸ್ತರಿಸಲಾಗುತ್ತಿದೆ

ಕಡಿಮೆ ವೆಚ್ಚದಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ