Bootstrap හි CSS තැනීමට භාවිතා කරන විචල්යයන්, මිශ්රණයන් සහ තවත් දේවලින් ප්රයෝජන ගැනීමට, CSS පූර්ව සකසනයක් වන LESS සමඟ Bootstrap අභිරුචිකරණය කර දිගු කරන්න .
Bootstrap සෑදී ඇත්තේ එහි හරයේ අඩුවෙන්, අපගේ හොඳ මිතුරා වන Alexis Sellier විසින් නිර්මාණය කරන ලද ගතික මෝස්තර පත්ර භාෂාවකි . එය පද්ධති මත පදනම් වූ 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 |
#eee | |
@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 |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
මූලික මික්සින් යනු 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: 5px, @width: 5px |
එක් පේළියක උස සහ පළල ඉක්මනින් සකසන්න |
.square() |
@size: 5px |
.size() පළල සහ උස එකම අගය ලෙස සැකසීමට ගොඩනැගේ |
.opacity() |
@opacity: 100 |
පාරාන්ධතා ප්රතිශතය පූර්ණ සංඛ්යා වලින් සකසන්න (උදා, "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() |
කිසිවක් නැත | @siteWidth ඔබේ අන්තර්ගතය රඳවා තබා ගැනීම සඳහා ස්ථාවර පළල (සමඟ සකසා ඇති ) බහාලුමක් සපයන්න |
.columns() |
@columns: 1 |
ඕනෑම තීරු ගණනක් විහිදෙන ජාල තීරුවක් සාදන්න (පෙරනිමිය තීරු 1 දක්වා) |
.offset() |
@columns: 1 |
ඕනෑම තීරු ගණනක් පුරා විහිදෙන වම් මායිම සහිත ජාලක තීරුවක් ඕෆ්සෙට් කරන්න |
.gridColumn() |
කිසිවක් නැත | මූලද්රව්යයක් ජාලක තීරුවක් මෙන් පාවෙන බවට පත් කරන්න |
මික්සින් | පරාමිතීන් | භාවිතය |
---|---|---|
.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 සමඟ අඩු විධාන රේඛා සම්පාදකය ස්ථාපනය කරන්න:
$npm ස්ථාපනය අඩුයි
ස්ථාපනය කිරීමෙන් පසු make
ඔබේ bootstrap නාමාවලියේ මූලයෙන් ධාවනය කරන්න, ඔබ සියල්ල සූදානම් කර ඇත.
මීට අමතරව, ඔබ මුරකරු ස්ථාපනය කර ඇත්නම්, ඔබ make watch
bootstrap lib තුළ ගොනුවක් සංස්කරණය කරන සෑම අවස්ථාවකම bootstrap ස්වයංක්රීයව නැවත ගොඩනැංවීමට ඔබට ධාවනය විය හැක (මෙය අවශ්ය නොවේ, පහසු ක්රමයක් පමණි).
Node හරහා LESS විධාන රේඛා මෙවලම ස්ථාපනය කර පහත විධානය ක්රියාත්මක කරන්න:
$ lessc ./lib/bootstrap.less > bootstrap.css
--compress
ඔබ බයිට් කිහිපයක් සුරැකීමට උත්සාහ කරන්නේ නම්, එම විධානයට ඇතුළත් කිරීමට වග බලා ගන්න !
නවතම Les.js බාගත කර එයට (සහ Bootstrap) මාර්ගය ඇතුළත් කරන්න <head>
.
<link rel="stylesheet/less" href="/path/to/bootstrap.less"> rel = "stylesheet/අඩු" href = "/path/to/bootstrap.less" > <script src="/path/to/less.js"></script><script src = "/path/to/less.js" ></script>
.less ගොනු නැවත සම්පාදනය කිරීමට, ඒවා සුරකින්න සහ ඔබේ පිටුව නැවත පූරණය කරන්න. Less.js ඒවා සම්පාදනය කර දේශීය ගබඩාවේ ගබඩා කරයි.
නිල නොවන Mac යෙදුම .less ගොනු නාමාවලි නරඹන අතර නැරඹූ .less ගොනුවක සෑම සුරැකුමකින්ම පසුව දේශීය ගොනු වෙත කේතය සම්පාදනය කරයි.
ඔබ කැමති නම්, ඔබට ස්වයංක්රීයව කුඩා කිරීම සඳහා යෙදුම තුළ මනාප ටොගල කළ හැකි අතර සම්පාදනය කරන ලද ගොනු අවසන් වන්නේ කුමන නාමාවලියෙහිද යන්න.
Crunch යනු Adobe Air මත ගොඩනගා ඇති විශිෂ්ට පෙනුමක් ඇති අඩු සංස්කාරකයක් සහ සම්පාදකයකි.
නිල නොවන Mac යෙදුම ලෙස එකම පුද්ගලයා විසින් නිර්මාණය කරන ලද, CodeKit යනු LESS, SASS, Stylus සහ CoffeeScript සම්පාදනය කරන Mac යෙදුමකි.
Mac, Linux, සහ PC යෙදුම අඩු ගොනු සම්පාදනය කිරීම සඳහා drag and drop. තවද, මූලාශ්ර කේතය GitHub මත ඇත.