ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ಕಡಿಮೆ ಬಳಸುವುದು
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ಅನ್ನು ನಿರ್ಮಿಸಲು ಬಳಸಲಾಗುವ ವೇರಿಯೇಬಲ್‌ಗಳು, ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ಲಾಭವನ್ನು ಪಡೆಯಲು ಕಡಿಮೆ , CSS ಪ್ರಿಪ್ರೊಸೆಸರ್ ಜೊತೆಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ ಮತ್ತು ವಿಸ್ತರಿಸಿ .
ಕಡಿಮೆ ವೆಚ್ಚದಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ
ಏಕೆ ಕಡಿಮೆ?
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಅದರ ಮಧ್ಯಭಾಗದಲ್ಲಿ ಕಡಿಮೆ ಪ್ರಮಾಣದಲ್ಲಿ ಮಾಡಲಾಗಿದೆ, ಇದು ನಮ್ಮ ಉತ್ತಮ ಸ್ನೇಹಿತ ಅಲೆಕ್ಸಿಸ್ ಸೆಲಿಯರ್ ರಚಿಸಿದ ಡೈನಾಮಿಕ್ ಸ್ಟೈಲ್‌ಶೀಟ್ ಭಾಷೆಯಾಗಿದೆ . ಇದು ಸಿಸ್ಟಂ-ಆಧಾರಿತ CSS ಅನ್ನು ವೇಗವಾಗಿ, ಸುಲಭವಾಗಿ ಮತ್ತು ಹೆಚ್ಚು ಮೋಜಿನ ರೀತಿಯಲ್ಲಿ ಅಭಿವೃದ್ಧಿಪಡಿಸುತ್ತದೆ.
ಏನು ಸೇರಿಸಲಾಗಿದೆ?
CSS ನ ವಿಸ್ತರಣೆಯಂತೆ, LESS ವೇರಿಯೇಬಲ್‌ಗಳು, ಕೋಡ್‌ನ ಮರುಬಳಕೆಯ ತುಣುಕುಗಳಿಗಾಗಿ ಮಿಕ್ಸಿನ್‌ಗಳು, ಸರಳ ಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳು, ಗೂಡುಕಟ್ಟುವ ಮತ್ತು ಬಣ್ಣ ಕಾರ್ಯಗಳನ್ನು ಸಹ ಒಳಗೊಂಡಿದೆ.
ಅಸ್ಥಿರ
CSS ನಲ್ಲಿ ಬಣ್ಣಗಳು ಮತ್ತು ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಸ್ವಲ್ಪ ನೋವು ಆಗಿರಬಹುದು, ಸಾಮಾನ್ಯವಾಗಿ ನಕಲು ಮತ್ತು ಪೇಸ್ಟ್‌ನಿಂದ ತುಂಬಿರುತ್ತದೆ. ಆದರೂ ಕಡಿಮೆ ಅಲ್ಲ - ಬಣ್ಣಗಳು ಅಥವಾ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು ವೇರಿಯೇಬಲ್‌ಗಳಾಗಿ ನಿಯೋಜಿಸಿ ಮತ್ತು ಅವುಗಳನ್ನು ಒಮ್ಮೆ ಬದಲಾಯಿಸಿ.
ಮಿಕ್ಸಿನ್ಸ್
ನಿಯಮಿತ ol' CSS ನಲ್ಲಿ ನೀವು ಮಾಡಬೇಕಾದ ಮೂರು ಗಡಿ-ತ್ರಿಜ್ಯದ ಘೋಷಣೆಗಳು? ಈಗ ಅವರು ಮಿಕ್ಸಿನ್‌ಗಳ ಸಹಾಯದಿಂದ ಒಂದು ಸಾಲಿಗೆ ಇಳಿದಿದ್ದಾರೆ, ನೀವು ಎಲ್ಲಿ ಬೇಕಾದರೂ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕೋಡ್‌ನ ತುಣುಕುಗಳು.
ಕಾರ್ಯಾಚರಣೆ
ಕಾರ್ಯಾಚರಣೆಗಳೊಂದಿಗೆ ಹಾರಾಡುತ್ತ ಗಣಿತವನ್ನು ಮಾಡುವ ಮೂಲಕ ನಿಮ್ಮ ಗ್ರಿಡ್, ಪ್ರಮುಖ ಮತ್ತು ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಮಾಡಿ. CSS ವಿವೇಕಕ್ಕೆ ನಿಮ್ಮ ಮಾರ್ಗವನ್ನು ಗುಣಿಸಿ, ಭಾಗಿಸಿ, ಸೇರಿಸಿ ಮತ್ತು ಕಳೆಯಿರಿ.
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ವೇರಿಯೇಬಲ್‌ಗಳು ಕಡಿಮೆ ಅಸ್ಥಿರಗಳು, ಅವುಗಳ ಮೌಲ್ಯಗಳು ಮತ್ತು ಬಳಕೆಯ ಮಾರ್ಗಸೂಚಿಗಳು
ಹೈಪರ್ಲಿಂಕ್ಗಳು
@linkColor |
#08c | ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ಪಠ್ಯ ಬಣ್ಣ | |
@linkColorHover |
darken(@linkColor, 15%) |
ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ಪಠ್ಯ ಹೂವರ್ ಬಣ್ಣ |
ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆ
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
ಮುದ್ರಣಕಲೆ
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
ಗ್ರೇಸ್ಕೇಲ್ ಬಣ್ಣಗಳು
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#ಇಇಇ | |
@white |
#fff |
ಉಚ್ಚಾರಣಾ ಬಣ್ಣಗಳು
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
ಘಟಕಗಳು
ಗುಂಡಿಗಳು
@primaryButtonBackground |
@linkColor |
ರೂಪಗಳು
@placeholderText |
@grayLight |
ನವಬಾರ್
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
ರಾಜ್ಯಗಳು ಮತ್ತು ಎಚ್ಚರಿಕೆಗಳನ್ನು ರೂಪಿಸಿ
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮಿಕ್ಸಿನ್ಸ್
ಮಿಕ್ಸಿನ್ಸ್ ಬಗ್ಗೆ
ಮೂಲ ಮಿಶ್ರಣಗಳು
ಮೂಲಭೂತ ಮಿಕ್ಸಿನ್ ಮೂಲಭೂತವಾಗಿ CSS ನ ತುಣುಕಿಗಾಗಿ ಒಂದು ಸೇರ್ಪಡೆ ಅಥವಾ ಭಾಗಶಃ ಆಗಿದೆ. ಅವುಗಳನ್ನು CSS ವರ್ಗದಂತೆಯೇ ಬರೆಯಲಾಗಿದೆ ಮತ್ತು ಎಲ್ಲಿ ಬೇಕಾದರೂ ಕರೆಯಬಹುದು.
- . ಅಂಶ {
- . ಕ್ಲಿಯರ್ಫಿಕ್ಸ್ ();
- }
ಪ್ಯಾರಾಮೆಟ್ರಿಕ್ ಮಿಕ್ಸಿನ್ಸ್
ಪ್ಯಾರಾಮೆಟ್ರಿಕ್ ಮಿಕ್ಸಿನ್ ಮೂಲಭೂತ ಮಿಕ್ಸಿನ್‌ನಂತೆಯೇ ಇರುತ್ತದೆ, ಆದರೆ ಇದು ಐಚ್ಛಿಕ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ನಿಯತಾಂಕಗಳನ್ನು (ಆದ್ದರಿಂದ ಹೆಸರು) ಸ್ವೀಕರಿಸುತ್ತದೆ.
- . ಅಂಶ {
- . ಗಡಿ - ತ್ರಿಜ್ಯ ( 4px );
- }
ನಿಮ್ಮ ಸ್ವಂತವನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಿ
ಬಹುತೇಕ ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು mixins.less ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗಿದೆ, ಇದು ಟೂಲ್‌ಕಿಟ್‌ನಲ್ಲಿರುವ ಯಾವುದೇ .less ಫೈಲ್‌ಗಳಲ್ಲಿ ಮಿಕ್ಸಿನ್ ಅನ್ನು ಬಳಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುವ ಅದ್ಭುತ ಉಪಯುಕ್ತತೆ .less ಫೈಲ್ ಆಗಿದೆ.
ಆದ್ದರಿಂದ, ಮುಂದುವರಿಯಿರಿ ಮತ್ತು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವವುಗಳನ್ನು ಬಳಸಿ ಅಥವಾ ನಿಮಗೆ ಅಗತ್ಯವಿರುವಂತೆ ನಿಮ್ಮದೇ ಆದದನ್ನು ಸೇರಿಸಲು ಮುಕ್ತವಾಗಿರಿ.
ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ
ಉಪಯುಕ್ತತೆಗಳು
| ಮಿಕ್ಸಿನ್ | ನಿಯತಾಂಕಗಳು | ಬಳಕೆ |
|---|---|---|
.clearfix() |
ಯಾವುದೂ | ಒಳಗೆ ಫ್ಲೋಟ್‌ಗಳನ್ನು ತೆರವುಗೊಳಿಸಲು ಯಾವುದೇ ಪೋಷಕರಿಗೆ ಸೇರಿಸಿ |
.tab-focus() |
ಯಾವುದೂ | ವೆಬ್‌ಕಿಟ್ ಫೋಕಸ್ ಸ್ಟೈಲ್ ಮತ್ತು ರೌಂಡ್ ಫೈರ್‌ಫಾಕ್ಸ್ ಔಟ್‌ಲೈನ್ ಅನ್ನು ಅನ್ವಯಿಸಿ |
.center-block() |
ಯಾವುದೂ | ಬಳಸಿ ಬ್ಲಾಕ್ ಮಟ್ಟದ ಅಂಶವನ್ನು ಸ್ವಯಂ ಕೇಂದ್ರೀಕರಿಸಿmargin: auto |
.ie7-inline-block() |
ಯಾವುದೂ | display: inline-blockIE7 ಬೆಂಬಲವನ್ನು ಪಡೆಯಲು ನಿಯಮಿತ ಜೊತೆಗೆ ಬಳಸಿ |
.size() |
@height: 5px, @width: 5px |
ಒಂದು ಸಾಲಿನಲ್ಲಿ ಎತ್ತರ ಮತ್ತು ಅಗಲವನ್ನು ತ್ವರಿತವಾಗಿ ಹೊಂದಿಸಿ |
.square() |
@size: 5px |
.size()ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಒಂದೇ ಮೌಲ್ಯದಂತೆ ಹೊಂದಿಸಲು ನಿರ್ಮಿಸುತ್ತದೆ |
.opacity() |
@opacity: 100 |
ಸಂಪೂರ್ಣ ಸಂಖ್ಯೆಗಳಲ್ಲಿ, ಅಪಾರದರ್ಶಕತೆಯ ಶೇಕಡಾವಾರು (ಉದಾ, "50" ಅಥವಾ "75") ಹೊಂದಿಸಿ |
ರೂಪಗಳು
| ಮಿಕ್ಸಿನ್ | ನಿಯತಾಂಕಗಳು | ಬಳಕೆ |
|---|---|---|
.placeholder() |
@color: @placeholderText |
placeholderಇನ್‌ಪುಟ್‌ಗಳಿಗಾಗಿ ಪಠ್ಯ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಿ |
ಮುದ್ರಣಕಲೆ
| ಮಿಕ್ಸಿನ್ | ನಿಯತಾಂಕಗಳು | ಬಳಕೆ |
|---|---|---|
#font > #family > .serif() |
ಯಾವುದೂ | ಒಂದು ಅಂಶವನ್ನು ಸೆರಿಫ್ ಫಾಂಟ್ ಸ್ಟಾಕ್ ಅನ್ನು ಬಳಸಿ |
#font > #family > .sans-serif() |
ಯಾವುದೂ | ಒಂದು ಅಂಶವನ್ನು sans-serif ಫಾಂಟ್ ಸ್ಟಾಕ್ ಬಳಸಿ ಮಾಡಿ |
#font > #family > .monospace() |
ಯಾವುದೂ | ಮಾನೋಸ್ಪೇಸ್ ಫಾಂಟ್ ಸ್ಟಾಕ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಒಂದು ಅಂಶವನ್ನು ಮಾಡಿ |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ಫಾಂಟ್ ಗಾತ್ರ, ತೂಕ ಮತ್ತು ಪ್ರಮುಖವನ್ನು ಸುಲಭವಾಗಿ ಹೊಂದಿಸಿ |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ಫಾಂಟ್ ಕುಟುಂಬವನ್ನು ಸೆರಿಫ್‌ಗೆ ಹೊಂದಿಸಿ ಮತ್ತು ಗಾತ್ರ, ತೂಕ ಮತ್ತು ಪ್ರಮುಖವನ್ನು ನಿಯಂತ್ರಿಸಿ |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ಫಾಂಟ್ ಕುಟುಂಬವನ್ನು sans-serif ಗೆ ಹೊಂದಿಸಿ ಮತ್ತು ಗಾತ್ರ, ತೂಕ ಮತ್ತು ಪ್ರಮುಖವನ್ನು ನಿಯಂತ್ರಿಸಿ |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ಫಾಂಟ್ ಕುಟುಂಬವನ್ನು ಮೊನೊಸ್ಪೇಸ್‌ಗೆ ಹೊಂದಿಸಿ ಮತ್ತು ಗಾತ್ರ, ತೂಕ ಮತ್ತು ಪ್ರಮುಖವನ್ನು ನಿಯಂತ್ರಿಸಿ |
ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆ
| ಮಿಕ್ಸಿನ್ | ನಿಯತಾಂಕಗಳು | ಬಳಕೆ |
|---|---|---|
.container-fixed() |
ಯಾವುದೂ | ನಿಮ್ಮ ವಿಷಯವನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳಲು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕೃತ ಧಾರಕವನ್ನು ರಚಿಸಿ |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
n ಕಾಲಮ್‌ಗಳು ಮತ್ತು x ಪಿಕ್ಸೆಲ್ ವೈಡ್ ಗಟರ್‌ನೊಂದಿಗೆ ಪಿಕ್ಸೆಲ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ (ಕಂಟೇನರ್, ಸಾಲು ಮತ್ತು ಕಾಲಮ್‌ಗಳು) ರಚಿಸಿ |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
n ಕಾಲಮ್‌ಗಳು ಮತ್ತು x % ಅಗಲದ ಗಟರ್‌ನೊಂದಿಗೆ ಪ್ರೆಸೆಂಟ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ರಚಿಸಿ |
CSS3 ಗುಣಲಕ್ಷಣಗಳು
| ಮಿಕ್ಸಿನ್ | ನಿಯತಾಂಕಗಳು | ಬಳಕೆ |
|---|---|---|
.border-radius() |
@radius: 5px |
ಅಂಶದ ಮೂಲೆಗಳನ್ನು ಸುತ್ತಿಕೊಳ್ಳಿ. ಒಂದೇ ಮೌಲ್ಯ ಅಥವಾ ನಾಲ್ಕು ಸ್ಪೇಸ್-ಬೇರ್ಪಡಿಸಿದ ಮೌಲ್ಯಗಳಾಗಿರಬಹುದು |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
ಅಂಶಕ್ಕೆ ಡ್ರಾಪ್ ನೆರಳು ಸೇರಿಸಿ |
.transition() |
@transition |
CSS3 ಪರಿವರ್ತನೆ ಪರಿಣಾಮವನ್ನು ಸೇರಿಸಿ (ಉದಾ, all .2s linear) |
.rotate() |
@degrees |
ಅಂಶ n ಡಿಗ್ರಿಗಳನ್ನು ತಿರುಗಿಸಿ |
.scale() |
@ratio |
ಒಂದು ಅಂಶವನ್ನು ಅದರ ಮೂಲ ಗಾತ್ರಕ್ಕಿಂತ n ಪಟ್ಟು ಹೆಚ್ಚಿಸಿ |
.translate() |
@x: 0, @y: 0 |
x ಮತ್ತು y ಪ್ಲೇನ್‌ಗಳಲ್ಲಿ ಒಂದು ಅಂಶವನ್ನು ಸರಿಸಿ |
.background-clip() |
@clip |
ಅಂಶದ ಹಿನ್ನೆಲೆಯನ್ನು ಕ್ರಾಪ್ ಮಾಡಿ (ಇದಕ್ಕೆ ಉಪಯುಕ್ತ border-radius) |
.background-size() |
@size |
CSS3 ಮೂಲಕ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳ ಗಾತ್ರವನ್ನು ನಿಯಂತ್ರಿಸಿ |
.box-sizing() |
@boxmodel |
ಅಂಶಕ್ಕಾಗಿ ಬಾಕ್ಸ್ ಮಾದರಿಯನ್ನು ಬದಲಾಯಿಸಿ (ಉದಾ, border-boxಪೂರ್ಣ-ಅಗಲಕ್ಕಾಗಿ input) |
.user-select() |
@select |
ಪುಟದಲ್ಲಿ ಪಠ್ಯದ ಕರ್ಸರ್ ಆಯ್ಕೆಯನ್ನು ನಿಯಂತ್ರಿಸಿ |
.resizable() |
@direction: both |
ಬಲ ಮತ್ತು ಕೆಳಭಾಗದಲ್ಲಿ ಯಾವುದೇ ಅಂಶವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸುವಂತೆ ಮಾಡಿ |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
ಯಾವುದೇ ಅಂಶದ ವಿಷಯವನ್ನು CSS3 ಕಾಲಮ್‌ಗಳನ್ನು ಬಳಸಿ |
ಹಿನ್ನೆಲೆಗಳು ಮತ್ತು ಇಳಿಜಾರುಗಳು
| ಮಿಕ್ಸಿನ್ | ನಿಯತಾಂಕಗಳು | ಬಳಕೆ |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
ಅಂಶಕ್ಕೆ ಅರೆಪಾರದರ್ಶಕ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ನೀಡಿ |
#translucent > .border() |
@color: @white, @alpha: 1 |
ಒಂದು ಅಂಶಕ್ಕೆ ಅರೆಪಾರದರ್ಶಕ ಗಡಿ ಬಣ್ಣವನ್ನು ನೀಡಿ |
#gradient > .vertical() |
@startColor, @endColor |
ಅಡ್ಡ-ಬ್ರೌಸರ್ ಲಂಬ ಹಿನ್ನೆಲೆ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ರಚಿಸಿ |
#gradient > .horizontal() |
@startColor, @endColor |
ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಸಮತಲ ಹಿನ್ನೆಲೆ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ರಚಿಸಿ |
#gradient > .directional() |
@startColor, @endColor, @deg |
ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಡೈರೆಕ್ಷನಲ್ ಹಿನ್ನೆಲೆ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ರಚಿಸಿ |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಮೂರು-ಬಣ್ಣದ ಹಿನ್ನೆಲೆ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ರಚಿಸಿ |
#gradient > .radial() |
@innerColor, @outerColor |
ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ರೇಡಿಯಲ್ ಹಿನ್ನೆಲೆ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ರಚಿಸಿ |
#gradient > .striped() |
@color, @angle |
ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಪಟ್ಟೆ ಹಿನ್ನೆಲೆ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ರಚಿಸಿ |
#gradientBar() |
@primaryColor, @secondaryColor |
ಗ್ರೇಡಿಯಂಟ್ ಮತ್ತು ಸ್ವಲ್ಪ ಗಾಢವಾದ ಗಡಿಯನ್ನು ನಿಯೋಜಿಸಲು ಬಟನ್‌ಗಳಿಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ |
ಕಡಿಮೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡಲಾಗುತ್ತಿದೆ
ಕಂಪೈಲ್ ಮಾಡಲು ಪರಿಕರಗಳು
ಮೇಕ್‌ಫೈಲ್‌ನೊಂದಿಗೆ ನೋಡ್
ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸುವ ಮೂಲಕ npm ನೊಂದಿಗೆ ಕಡಿಮೆ ಕಮಾಂಡ್ ಲೈನ್ ಕಂಪೈಲರ್ ಮತ್ತು uglify-js ಅನ್ನು ಜಾಗತಿಕವಾಗಿ ಸ್ಥಾಪಿಸಿ:
$ npm ಸ್ಥಾಪನೆ -g ಕಡಿಮೆ ugliify-js
ಒಮ್ಮೆ ಸ್ಥಾಪಿಸಿದ makeನಂತರ ನಿಮ್ಮ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಡೈರೆಕ್ಟರಿಯ ಮೂಲದಿಂದ ರನ್ ಮಾಡಿ ಮತ್ತು ನೀವು ಸಿದ್ಧರಾಗಿರುವಿರಿ.
ಹೆಚ್ಚುವರಿಯಾಗಿ, ನೀವು ವಾಚರ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿದ್ದರೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಲಿಬ್‌ನಲ್ಲಿmake watch ನೀವು ಫೈಲ್ ಅನ್ನು ಎಡಿಟ್ ಮಾಡಿದಾಗಲೆಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರುನಿರ್ಮಾಣ ಮಾಡಲು ನೀವು ಓಡಬಹುದು (ಇದು ಅಗತ್ಯವಿಲ್ಲ, ಕೇವಲ ಅನುಕೂಲಕರ ವಿಧಾನ).
ಕಮಾಂಡ್ ಲೈನ್
ನೋಡ್ ಮೂಲಕ ಕಡಿಮೆ ಆಜ್ಞಾ ಸಾಲಿನ ಉಪಕರಣವನ್ನು ಸ್ಥಾಪಿಸಿ ಮತ್ತು ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ:
$lessc ./lib/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 ಮತ್ತು PC ಅಪ್ಲಿಕೇಶನ್. ಜೊತೆಗೆ, ಮೂಲ ಕೋಡ್ GitHub ನಲ್ಲಿದೆ .