Bootstrap සමඟ අඩුවෙන් භාවිතා කිරීම

Bootstrap හි CSS තැනීමට භාවිතා කරන විචල්‍යයන්, මිශ්‍රණයන් සහ තවත් දේවලින් ප්‍රයෝජන ගැනීමට, CSS පූර්ව සකසනයක් වන LESS සමඟ Bootstrap අභිරුචිකරණය කර දිගු කරන්න .

ඇයි අඩු?

Bootstrap සෑදී ඇත්තේ එහි හරය අඩුවෙන්, අපගේ හොඳ මිතුරා වන Alexis Sellier විසින් නිර්මාණය කරන ලද ගතික මෝස්තර පත්‍ර භාෂාවකි . එය පද්ධති මත පදනම් වූ CSS සංවර්ධනය වේගවත්, පහසු සහ වඩාත් විනෝදජනක කරයි.

ඇතුළත් වන්නේ කුමක්ද?

CSS හි දිගුවක් ලෙස, LESS හි විචල්‍යයන්, නැවත භාවිත කළ හැකි කේත කොටස් සඳහා මිශ්‍රණයන්, සරල ගණිතය සඳහා මෙහෙයුම්, කැදැල්ල සහ වර්ණ ශ්‍රිත පවා ඇතුළත් වේ.

තවත් හදාරන්න

වැඩිදුර දැන ගැනීමට 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`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@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`	#eee
`@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 පන්තියක් මෙන් ලියා ඇති අතර ඕනෑම තැනක ඇමතීමට හැකිය.

. මූලද්රව්යය {
  . clearfix ();
}

පරාමිතික මිශ්රණ

පරාමිතික මිශ්‍රණයක් මූලික මිශ්‍රණයක් වැනිය, නමුත් එය විකල්ප පෙරනිමි අගයන් සහිත පරාමිති (එබැවින් නම) ද පිළිගනී.

. මූලද්රව්යය {
  . මායිම - අරය ( 4px );
}

ඔබේම දෑ පහසුවෙන් එකතු කරන්න

Bootstrap හි mixins සියල්ලම පාහේ mixins.less තුළ ගබඩා කර ඇත, මෙවලම් කට්ටලයේ ඇති ඕනෑම .less ගොනුවක mixin භාවිතා කිරීමට ඔබට හැකියාව ලබා දෙන අපූරු උපයෝගිතා .less ගොනුවකි.

එබැවින්, ඉදිරියට ගොස් පවතින ඒවා භාවිතා කරන්න හෝ ඔබට අවශ්‍ය පරිදි ඔබේම දෑ එක් කිරීමට නිදහස් වන්න.

මිශ්රණ ඇතුළත් වේ

උපයෝගිතා

මික්සින්	පරාමිතීන්	භාවිතය
`.clearfix()`	කිසිවක් නැත	ඇතුළත පාවෙන ඉවත් කිරීමට ඕනෑම මාපියෙකුට එක් කරන්න
`.tab-focus()`	කිසිවක් නැත	Webkit නාභිගත විලාසය සහ රවුම් Firefox දළ සටහන් යොදන්න
`.center-block()`	කිසිවක් නැත	භාවිතා කරන වාරණ මට්ටමේ මූලද්‍රව්‍යයක් ස්වයංක්‍රීයව මධ්‍යගත කරන්න`margin: auto`
`.ie7-inline-block()`	කිසිවක් නැත	`display: inline-block`IE7 සහාය ලබා ගැනීමට සාමාන්‍යයට අමතරව භාවිතා කරන්න
`.size()`	`@height @width`	එක් පේළියක උස සහ පළල ඉක්මනින් සකසන්න
`.square()`	`@size`	`.size()`පළල සහ උස එකම අගයක් ලෙස සැකසීමට ගොඩනැගේ
`.opacity()`	`@opacity`	පාරාන්ධතා ප්‍රතිශතය පූර්ණ සංඛ්‍යා වලින් සකසන්න (උදා, "50" හෝ "75")

ආකෘති පත්ර

මික්සින්	පරාමිතීන්	භාවිතය
`.placeholder()`	`@color: @placeholderText`	`placeholder`ආදාන සඳහා පෙළ වර්ණය සකසන්න

මුද්‍රණ ශිල්පය

මික්සින්	පරාමිතීන්	භාවිතය
`#font > #family > .serif()`	කිසිවක් නැත	මූලද්‍රව්‍යයක් 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`	අකුරු පවුල serif වෙත සකසන්න, සහ ප්‍රමාණය, බර සහ ප්‍රමුඛත්වය පාලනය කරන්න
`#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 නැවත සම්පාදනය කළ යුතුය .

සම්පාදනය සඳහා මෙවලම්

Makefile සමඟ නෝඩ්

පහත විධානය ක්‍රියාත්මක කිරීමෙන් අඩු විධාන රේඛා සම්පාදකය සහ ගෝලීය වශයෙන් npm සමඟ uglify-js ස්ථාපනය කරන්න:

$ npm ස්ථාපනය -g අඩු uglify-js

ස්ථාපනය කිරීමෙන් පසු makeඔබේ bootstrap නාමාවලියේ මූලයෙන් ධාවනය කරන්න, ඔබ සියල්ල සූදානම් කර ඇත.

මීට අමතරව, ඔබ මුරකරු ස්ථාපනය කර ඇත්නම්, ඔබ make watchbootstrap lib තුළ ගොනුවක් සංස්කරණය කරන සෑම අවස්ථාවකම bootstrap ස්වයංක්‍රීයව නැවත ගොඩනැංවීමට ඔබට ධාවනය විය හැක (මෙය අවශ්‍ය නොවේ, පහසු ක්‍රමයක් පමණි).

විධාන රේඛාව

Node හරහා LESS විධාන රේඛා මෙවලම ස්ථාපනය කර පහත විධානය ක්‍රියාත්මක කරන්න:

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

--compressඔබ බයිට් කිහිපයක් සුරැකීමට උත්සාහ කරන්නේ නම්, එම විධානයට ඇතුළත් කිරීමට වග බලා ගන්න !

Javascript

නවතම Les.js බාගත කර එයට (සහ Bootstrap) මාර්ගය ඇතුළත් කරන්න <head>.

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

.less ගොනු නැවත සම්පාදනය කිරීමට, ඒවා සුරකින්න සහ ඔබේ පිටුව නැවත පූරණය කරන්න. Less.js ඒවා සම්පාදනය කර දේශීය ගබඩාවේ ගබඩා කරයි.

නිල නොවන මැක් යෙදුම

නිල නොවන Mac යෙදුම .less ගොනු නාමාවලි නරඹන අතර නැරඹූ .less ගොනුවක සෑම සුරැකුමකින්ම පසුව දේශීය ගොනු වෙත කේතය සම්පාදනය කරයි.

ඔබ කැමති නම්, ඔබට ස්වයංක්‍රීයව කුඩා කිරීම සඳහා යෙදුම තුළ මනාප ටොගල කළ හැකි අතර සම්පාදනය කරන ලද ගොනු අවසන් වන්නේ කුමන නාමාවලියෙහිද යන්න.

අඩුවෙන් ගොඩනගා ඇත

ඇයි අඩු?

ඇතුළත් වන්නේ කුමක්ද?

තවත් හදාරන්න

විචල්යයන්

මික්සින්

මෙහෙයුම්

Bootstrap විචල්‍යයන් අඩු විචල්‍යයන්, ඒවායේ අගයන් සහ භාවිත මාර්ගෝපදේශ

පලංචිය සහ සබැඳි

ජාල පද්ධතිය

මුද්‍රණ ශිල්පය

මේස

අළු පරිමාණ වර්ණ

උච්චාරණ වර්ණ

සංරචක

බොත්තම්

ආකෘති පත්ර

ආකෘති පත්‍ර සහ ඇඟවීම්

නවබාර්

පතනයන්

වීර ඒකකය

Bootstrap mixins

මික්සින් ගැන

මූලික මිශ්රණ

පරාමිතික මිශ්රණ

ඔබේම දෑ පහසුවෙන් එකතු කරන්න

මිශ්රණ ඇතුළත් වේ

උපයෝගිතා

ආකෘති පත්ර

මුද්‍රණ ශිල්පය

ජාල පද්ධතිය

CSS3 ගුණාංග

පසුබිම් සහ අනුක්‍රමික

අඩුවෙන් Bootstrap සම්පාදනය කිරීම

සම්පාදනය සඳහා මෙවලම්

Makefile සමඟ නෝඩ්

විධාන රේඛාව

Javascript

නිල නොවන මැක් යෙදුම

තවත් Mac යෙදුම්

හැපීම

CodeKit

සරල නැති