ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ಕಡಿಮೆ ಬಳಸುವುದು

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

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

ಏಕೆ ಕಡಿಮೆ?

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

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

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

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

ಕಡಿಮೆ CSS

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

ಅಸ್ಥಿರ

CSS ನಲ್ಲಿ ಬಣ್ಣಗಳು ಮತ್ತು ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಸ್ವಲ್ಪ ನೋವು ಆಗಿರಬಹುದು, ಸಾಮಾನ್ಯವಾಗಿ ನಕಲು ಮತ್ತು ಪೇಸ್ಟ್‌ನಿಂದ ತುಂಬಿರುತ್ತದೆ. ಆದರೂ ಕಡಿಮೆ ಅಲ್ಲ - ಬಣ್ಣಗಳು ಅಥವಾ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು ವೇರಿಯೇಬಲ್‌ಗಳಾಗಿ ನಿಯೋಜಿಸಿ ಮತ್ತು ಅವುಗಳನ್ನು ಒಮ್ಮೆ ಬದಲಾಯಿಸಿ.

ಮಿಕ್ಸಿನ್ಸ್

ನಿಯಮಿತ ol' CSS ನಲ್ಲಿ ನೀವು ಮಾಡಬೇಕಾದ ಮೂರು ಗಡಿ-ತ್ರಿಜ್ಯದ ಘೋಷಣೆಗಳು? ಈಗ ಅವರು ಮಿಕ್ಸಿನ್‌ಗಳ ಸಹಾಯದಿಂದ ಒಂದು ಸಾಲಿಗೆ ಇಳಿದಿದ್ದಾರೆ, ನೀವು ಎಲ್ಲಿ ಬೇಕಾದರೂ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕೋಡ್‌ನ ತುಣುಕುಗಳು.

ಕಾರ್ಯಾಚರಣೆ

ಕಾರ್ಯಾಚರಣೆಗಳೊಂದಿಗೆ ಹಾರಾಡುತ್ತ ಗಣಿತವನ್ನು ಮಾಡುವ ಮೂಲಕ ನಿಮ್ಮ ಗ್ರಿಡ್, ಪ್ರಮುಖ ಮತ್ತು ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಮಾಡಿ. CSS ವಿವೇಕಕ್ಕೆ ನಿಮ್ಮ ಮಾರ್ಗವನ್ನು ಗುಣಿಸಿ, ಭಾಗಿಸಿ, ಸೇರಿಸಿ ಮತ್ತು ಕಳೆಯಿರಿ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ವೇರಿಯೇಬಲ್‌ಗಳು ಕಡಿಮೆ ಅಸ್ಥಿರಗಳು, ಅವುಗಳ ಮೌಲ್ಯಗಳು ಮತ್ತು ಬಳಕೆಯ ಮಾರ್ಗಸೂಚಿಗಳು

ಸ್ಕ್ಯಾಫೋಲ್ಡಿಂಗ್ ಮತ್ತು ಲಿಂಕ್‌ಗಳು

@bodyBackground @white ಪುಟದ ಹಿನ್ನೆಲೆ ಬಣ್ಣ
@textColor @grayDark ಸಂಪೂರ್ಣ ದೇಹ, ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗೆ ಡೀಫಾಲ್ಟ್ ಪಠ್ಯ ಬಣ್ಣ
@linkColor #08c ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ಪಠ್ಯ ಬಣ್ಣ
@linkColorHover darken(@linkColor, 15%) ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ಪಠ್ಯ ಹೂವರ್ ಬಣ್ಣ

ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆ

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

ಮುದ್ರಣಕಲೆ

@sansFontFamily "ಹೆಲ್ವೆಟಿಕಾ ನ್ಯೂಯು", ಹೆಲ್ವೆಟಿಕಾ, ಏರಿಯಲ್, ಸಾನ್ಸ್-ಸೆರಿಫ್
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily ಮೆನ್ಲೋ, ಮೊನಾಕೊ, "ಕೊರಿಯರ್ ನ್ಯೂ", ಮೊನೊಸ್ಪೇಸ್
@baseFontSize 13px ಪಿಕ್ಸೆಲ್‌ಗಳಾಗಿರಬೇಕು
@baseFontFamily @sansFontFamily
@baseLineHeight 18px ಪಿಕ್ಸೆಲ್‌ಗಳಾಗಿರಬೇಕು
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

ಕೋಷ್ಟಕಗಳು

@tableBackground transparent
@tableBackgroundAccent #f9f9f9
@tableBackgroundHover #f5f5f5
@tableBorder ddd

ಗ್ರೇಸ್ಕೇಲ್ ಬಣ್ಣಗಳು

@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

ಘಟಕಗಳು

ಗುಂಡಿಗಳು

@btnBackground @white
@btnBackgroundHighlight darken(@white, 10%)
@btnBorder darken(@white, 20%)
@btnPrimaryBackground @linkColor
@btnPrimaryBackgroundHighlight spin(@btnPrimaryBackground, 15%)
@btnInfoBackground #5bc0de
@btnInfoBackgroundHighlight #2f96b4
@btnSuccessBackground #62c462
@btnSuccessBackgroundHighlight 51a351
@btnWarningBackground lighten(@orange, 15%)
@btnWarningBackgroundHighlight @orange
@btnDangerBackground #ee5f5b
@btnDangerBackgroundHighlight #bd362f
@btnInverseBackground @gray
@btnInverseBackgroundHighlight @grayDarker

ರೂಪಗಳು

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

ರಾಜ್ಯಗಳು ಮತ್ತು ಎಚ್ಚರಿಕೆಗಳನ್ನು ರೂಪಿಸಿ

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

ನವಬಾರ್

@navbarHeight 40px
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white
@navbarLinkColorActive @navbarLinkColorHover
@navbarLinkBackgroundHover transparent
@navbarLinkBackgroundActive @navbarBackground
@navbarSearchBackground lighten(@navbarBackground, 25%)
@navbarSearchBackgroundFocus @white
@navbarSearchBorder darken(@navbarSearchBackground, 30%)
@navbarSearchPlaceholderColor #ccc
@navbarBrandColor @navbarLinkColor

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor

ಹೀರೋ ಘಟಕ

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮಿಕ್ಸಿನ್ಸ್

ಮಿಕ್ಸಿನ್ಸ್ ಬಗ್ಗೆ

ಮೂಲ ಮಿಶ್ರಣಗಳು

ಮೂಲಭೂತ ಮಿಕ್ಸಿನ್ ಮೂಲಭೂತವಾಗಿ CSS ನ ತುಣುಕಿಗಾಗಿ ಒಂದು ಸೇರ್ಪಡೆ ಅಥವಾ ಭಾಗಶಃ ಆಗಿದೆ. ಅವುಗಳನ್ನು CSS ವರ್ಗದಂತೆಯೇ ಬರೆಯಲಾಗಿದೆ ಮತ್ತು ಎಲ್ಲಿ ಬೇಕಾದರೂ ಕರೆಯಬಹುದು.

  1. . ಅಂಶ {
  2.   . ಕ್ಲಿಯರ್ಫಿಕ್ಸ್ ();
  3. }

ಪ್ಯಾರಾಮೆಟ್ರಿಕ್ ಮಿಕ್ಸಿನ್ಸ್

ಪ್ಯಾರಾಮೆಟ್ರಿಕ್ ಮಿಕ್ಸಿನ್ ಮೂಲಭೂತ ಮಿಕ್ಸಿನ್‌ನಂತೆಯೇ ಇರುತ್ತದೆ, ಆದರೆ ಇದು ಐಚ್ಛಿಕ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ನಿಯತಾಂಕಗಳನ್ನು (ಆದ್ದರಿಂದ ಹೆಸರು) ಸ್ವೀಕರಿಸುತ್ತದೆ.

  1. . ಅಂಶ {
  2.   . ಗಡಿ - ತ್ರಿಜ್ಯ ( 4px );
  3. }

ನಿಮ್ಮ ಸ್ವಂತವನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಿ

ಬಹುತೇಕ ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು mixins.less ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗಿದೆ, ಇದು ಟೂಲ್‌ಕಿಟ್‌ನಲ್ಲಿರುವ ಯಾವುದೇ .less ಫೈಲ್‌ಗಳಲ್ಲಿ ಮಿಕ್ಸಿನ್ ಅನ್ನು ಬಳಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುವ ಅದ್ಭುತ ಉಪಯುಕ್ತತೆ .less ಫೈಲ್ ಆಗಿದೆ.

ಆದ್ದರಿಂದ, ಮುಂದುವರಿಯಿರಿ ಮತ್ತು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವವುಗಳನ್ನು ಬಳಸಿ ಅಥವಾ ನಿಮಗೆ ಅಗತ್ಯವಿರುವಂತೆ ನಿಮ್ಮದೇ ಆದದನ್ನು ಸೇರಿಸಲು ಮುಕ್ತವಾಗಿರಿ.

ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ

ಉಪಯುಕ್ತತೆಗಳು

ಮಿಕ್ಸಿನ್ ನಿಯತಾಂಕಗಳು ಬಳಕೆ
.clearfix() ಯಾವುದೂ ಒಳಗೆ ಫ್ಲೋಟ್‌ಗಳನ್ನು ತೆರವುಗೊಳಿಸಲು ಯಾವುದೇ ಪೋಷಕರಿಗೆ ಸೇರಿಸಿ
.tab-focus() ಯಾವುದೂ ವೆಬ್‌ಕಿಟ್ ಫೋಕಸ್ ಸ್ಟೈಲ್ ಮತ್ತು ರೌಂಡ್ ಫೈರ್‌ಫಾಕ್ಸ್ ಔಟ್‌ಲೈನ್ ಅನ್ನು ಅನ್ವಯಿಸಿ
.center-block() ಯಾವುದೂ ಬಳಸಿ ಬ್ಲಾಕ್ ಮಟ್ಟದ ಅಂಶವನ್ನು ಸ್ವಯಂ ಕೇಂದ್ರೀಕರಿಸಿmargin: auto
.ie7-inline-block() ಯಾವುದೂ display: inline-blockIE7 ಬೆಂಬಲವನ್ನು ಪಡೆಯಲು ನಿಯಮಿತ ಜೊತೆಗೆ ಬಳಸಿ
.size() @height @width ಒಂದು ಸಾಲಿನಲ್ಲಿ ಎತ್ತರ ಮತ್ತು ಅಗಲವನ್ನು ತ್ವರಿತವಾಗಿ ಹೊಂದಿಸಿ
.square() @size .size()ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಒಂದೇ ಮೌಲ್ಯದಂತೆ ಹೊಂದಿಸಲು ನಿರ್ಮಿಸುತ್ತದೆ
.opacity() @opacity ಸಂಪೂರ್ಣ ಸಂಖ್ಯೆಗಳಲ್ಲಿ, ಅಪಾರದರ್ಶಕತೆಯ ಶೇಕಡಾವಾರು (ಉದಾ, "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 % ಅಗಲದ ಗಟರ್‌ನೊಂದಿಗೆ ಪ್ರೆಸೆಂಟ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ರಚಿಸಿ
#grid > .input() @gridColumnWidth, @gridGutterWidth inputಅಂಶಗಳಿಗಾಗಿ ಪಿಕ್ಸೆಲ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ರಚಿಸಿ, ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಬಾರ್ಡರ್‌ಗಳಿಗೆ ಲೆಕ್ಕಹಾಕಿ
.makeColumn @columns: 1, @offset: 0 ತರಗತಿಗಳಿಲ್ಲದೆ ಯಾವುದನ್ನಾದರೂ divಗ್ರಿಡ್ ಕಾಲಮ್ ಆಗಿ ಪರಿವರ್ತಿಸಿ.span*

CSS3 ಗುಣಲಕ್ಷಣಗಳು

ಮಿಕ್ಸಿನ್ ನಿಯತಾಂಕಗಳು ಬಳಕೆ
.border-radius() @radius ಅಂಶದ ಮೂಲೆಗಳನ್ನು ಸುತ್ತಿಕೊಳ್ಳಿ. ಒಂದೇ ಮೌಲ್ಯ ಅಥವಾ ನಾಲ್ಕು ಸ್ಪೇಸ್-ಬೇರ್ಪಡಿಸಿದ ಮೌಲ್ಯಗಳಾಗಿರಬಹುದು
.box-shadow() @shadow ಅಂಶಕ್ಕೆ ಡ್ರಾಪ್ ನೆರಳು ಸೇರಿಸಿ
.transition() @transition CSS3 ಪರಿವರ್ತನೆ ಪರಿಣಾಮವನ್ನು ಸೇರಿಸಿ (ಉದಾ, all .2s linear)
.rotate() @degrees ಅಂಶ n ಡಿಗ್ರಿಗಳನ್ನು ತಿರುಗಿಸಿ
.scale() @ratio ಒಂದು ಅಂಶವನ್ನು ಅದರ ಮೂಲ ಗಾತ್ರಕ್ಕಿಂತ n ಪಟ್ಟು ಹೆಚ್ಚಿಸಿ
.translate() @x, @y x ಮತ್ತು y ಪ್ಲೇನ್‌ಗಳಲ್ಲಿ ಒಂದು ಅಂಶವನ್ನು ಸರಿಸಿ
.background-clip() @clip ಅಂಶದ ಹಿನ್ನೆಲೆಯನ್ನು ಕ್ರಾಪ್ ಮಾಡಿ (ಇದಕ್ಕೆ ಉಪಯುಕ್ತ border-radius)
.background-size() @size CSS3 ಮೂಲಕ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳ ಗಾತ್ರವನ್ನು ನಿಯಂತ್ರಿಸಿ
.box-sizing() @boxmodel ಅಂಶಕ್ಕಾಗಿ ಬಾಕ್ಸ್ ಮಾದರಿಯನ್ನು ಬದಲಾಯಿಸಿ (ಉದಾ, border-boxಪೂರ್ಣ-ಅಗಲಕ್ಕಾಗಿ input)
.user-select() @select ಪುಟದಲ್ಲಿ ಪಠ್ಯದ ಕರ್ಸರ್ ಆಯ್ಕೆಯನ್ನು ನಿಯಂತ್ರಿಸಿ
.backface-visibility() @visibility: visible CSS 3D ರೂಪಾಂತರಗಳನ್ನು ಬಳಸುವಾಗ ವಿಷಯದ ಮಿನುಗುವಿಕೆಯನ್ನು ತಡೆಯಿರಿ
.resizable() @direction: both ಬಲ ಮತ್ತು ಕೆಳಭಾಗದಲ್ಲಿ ಯಾವುದೇ ಅಂಶವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸುವಂತೆ ಮಾಡಿ
.content-columns() @columnCount, @columnGap: @gridGutterWidth ಯಾವುದೇ ಅಂಶದ ವಿಷಯವನ್ನು 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 ಗ್ರೇಡಿಯಂಟ್ ಮತ್ತು ಸ್ವಲ್ಪ ಗಾಢವಾದ ಗಡಿಯನ್ನು ನಿಯೋಜಿಸಲು ಬಟನ್‌ಗಳಿಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ

ಕಡಿಮೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡಲಾಗುತ್ತಿದೆ

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

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

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

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

$ npm ಸ್ಥಾಪನೆ -g ಕಡಿಮೆ 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 ಮತ್ತು PC ಅಪ್ಲಿಕೇಶನ್. ಜೊತೆಗೆ, ಮೂಲ ಕೋಡ್ GitHub ನಲ್ಲಿದೆ .