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

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

ඇයි අඩු?

Bootstrap සෑදී ඇත්තේ එහි හරය අඩුවෙන්, අපගේ හොඳ මිතුරා වන Alexis Sellier විසින් නිර්මාණය කරන ලද ගතික මෝස්තර පත්‍ර භාෂාවකි . එය පද්ධති මත පදනම් වූ 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 "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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

වීර ඒකකය

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

මික්සින් ගැන

මූලික මිශ්රණ

මූලික මික්සින් යනු CSS හි කොටසක් සඳහා අවශ්‍යයෙන්ම ඇතුළත් කිරීම හෝ අර්ධයකි. ඒවා ලියා ඇත්තේ CSS පන්තියක් මෙන් වන අතර ඕනෑම තැනක ඇමතීමට හැකිය.

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

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

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

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

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

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

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

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

උපයෝගිතා

මික්සින් පරාමිතීන් භාවිතය
.clearfix() කිසිවක් නැත ඇතුළත පාවෙන ඉවත් කිරීමට ඕනෑම මාපියෙකුට එක් කරන්න
.tab-focus() කිසිවක් නැත Webkit නාභිගත විලාසය සහ රවුම් Firefox දළ සටහන් යොදන්න
.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() කිසිවක් නැත මූලද්‍රව්‍යයක් 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 තීරු භාවිත කරන්න
.hyphens() @mode: auto ඔබට අවශ්‍ය විට CSS3 හයිෆනේෂන් (ඇතුළත් word-wrap: break-word)

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

මික්සින් පරාමිතීන් භාවිතය
#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 සමඟ නෝඩ්

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

$ npm ස්ථාපනය -g අඩු jshint recess 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 ගොනුවක සෑම සුරැකුමකින්ම පසුව දේශීය ගොනු වෙත කේතය සම්පාදනය කරයි.

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

තවත් Mac යෙදුම්

හැපීම

Crunch යනු Adobe Air මත ගොඩනගා ඇති විශිෂ්ට පෙනුමක් ඇති අඩු සංස්කාරකයක් සහ සම්පාදකයකි.

CodeKit

නිල නොවන Mac යෙදුම ලෙස එකම පුද්ගලයා විසින් නිර්මාණය කරන ලද, CodeKit යනු LESS, SASS, Stylus සහ CoffeeScript සම්පාදනය කරන Mac යෙදුමකි.

සරල නැති

Mac, Linux, සහ PC යෙදුම අඩු ගොනු සම්පාදනය කිරීම සඳහා drag and drop. තවද, මූලාශ්‍ර කේතය GitHub මත ඇත.