ಒಳಗೊಂಡಿರುವ ಶೈಲಿಗಳು ಮತ್ತು ಘಟಕಗಳು, ಹಾಗೆಯೇ ಕಡಿಮೆ ವೇರಿಯೇಬಲ್ಗಳು ಮತ್ತು ಮಿಕ್ಸಿನ್ಗಳ ಲಾಭವನ್ನು ಪಡೆಯಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ವಿಸ್ತರಿಸಿ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಅದರ ಮಧ್ಯಭಾಗದಲ್ಲಿ ಕಡಿಮೆ ಪ್ರಮಾಣದಲ್ಲಿ ಮಾಡಲಾಗಿದೆ, ಇದು ನಮ್ಮ ಉತ್ತಮ ಸ್ನೇಹಿತ ಅಲೆಕ್ಸಿಸ್ ಸೆಲಿಯರ್ ರಚಿಸಿದ ಡೈನಾಮಿಕ್ ಸ್ಟೈಲ್ಶೀಟ್ ಭಾಷೆಯಾಗಿದೆ . ಇದು ಸಿಸ್ಟಂ-ಆಧಾರಿತ CSS ಅನ್ನು ವೇಗವಾಗಿ, ಸುಲಭವಾಗಿ ಮತ್ತು ಹೆಚ್ಚು ಮೋಜಿನ ರೀತಿಯಲ್ಲಿ ಅಭಿವೃದ್ಧಿಪಡಿಸುತ್ತದೆ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ರಚನೆಕಾರರಲ್ಲಿ ಒಬ್ಬರು ಇದರ ಬಗ್ಗೆ ತ್ವರಿತ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಅನ್ನು ಬರೆದಿದ್ದಾರೆ , ಇಲ್ಲಿ ಸಾರಾಂಶವಾಗಿದೆ:
CSS ನ ವಿಸ್ತರಣೆಯಂತೆ, LESS ವೇರಿಯೇಬಲ್ಗಳು, ಕೋಡ್ನ ಮರುಬಳಕೆಯ ತುಣುಕುಗಳಿಗಾಗಿ ಮಿಕ್ಸಿನ್ಗಳು, ಸರಳ ಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳು, ಗೂಡುಕಟ್ಟುವ ಮತ್ತು ಬಣ್ಣ ಕಾರ್ಯಗಳನ್ನು ಸಹ ಒಳಗೊಂಡಿದೆ.
ಇನ್ನಷ್ಟು ತಿಳಿಯಲು http://lesscss.org/ ನಲ್ಲಿ ಅಧಿಕೃತ ವೆಬ್ಸೈಟ್ಗೆ ಭೇಟಿ ನೀಡಿ .
ನಮ್ಮ 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 / │ ├── ಬೂಟ್ಸ್ಟ್ರಾಪ್ . ನಿಮಿಷ _ css ├── js / │ ├── ಬೂಟ್ ಸ್ಟ್ರಾಪ್ . ನಿಮಿಷ _ js └── img / ├── glyphicons - halflings . png └── ಗ್ಲಿಫಿಕಾನ್ಸ್ - ಹಾಫ್ಲಿಂಗ್ಸ್ - ಬಿಳಿ . 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>