பூட்ஸ்டார்ப்புடன் குறைவாகப் பயன்படுத்துதல்

பூட்ஸ்டார்ப்பின் CSS ஐ உருவாக்கப் பயன்படுத்தப்படும் மாறிகள், மிக்சின்கள் மற்றும் பலவற்றைப் பயன்படுத்திக் கொள்ள, குறைந்த அளவு, CSS முன்செயலியுடன் பூட்ஸ்டார்ப்பைத் தனிப்பயனாக்கி நீட்டிக்கவும் .

ஏன் குறைவாக?

பூட்ஸ்டார்ப் அதன் மையத்தில் குறைவாகவே உருவாக்கப்பட்டுள்ளது, இது எங்களின் நல்ல நண்பரான அலெக்சிஸ் செல்லியரால் உருவாக்கப்பட்ட டைனமிக் ஸ்டைல்ஷீட் மொழியாகும் . இது சிஸ்டம் அடிப்படையிலான 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`	மென்லோ, மொனாக்கோ, "கூரியர் நியூ", மோனோஸ்பேஸ்
`@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`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

ஹீரோ யூனிட்

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

கலவை பற்றி

அடிப்படை கலவைகள்

அடிப்படை மிக்சின் என்பது CSS இன் துணுக்கின் உள்ளடக்கம் அல்லது ஒரு பகுதி ஆகும். அவை CSS வகுப்பைப் போலவே எழுதப்பட்டுள்ளன, மேலும் அவை எங்கும் அழைக்கப்படலாம்.

. உறுப்பு {
  . clearfix ();
}

அளவுரு கலவைகள்

ஒரு அளவுரு மிக்சின் என்பது அடிப்படை மிக்சினைப் போன்றது, ஆனால் இது விருப்ப இயல்புநிலை மதிப்புகளுடன் அளவுருக்களையும் (எனவே பெயர்) ஏற்றுக்கொள்கிறது.

. உறுப்பு {
  . எல்லை - ஆரம் ( 4px );
}

உங்கள் சொந்தத்தைச் சேர்க்கவும்

ஏறக்குறைய அனைத்து பூட்ஸ்டார்ப்பின் மிக்சின்களும் mixins.less இல் சேமிக்கப்பட்டுள்ளன, இது ஒரு அற்புதமான பயன்பாடு .less கோப்பு, இது கருவித்தொகுப்பில் உள்ள எந்த .less கோப்புகளிலும் மிக்சினைப் பயன்படுத்த உதவுகிறது.

எனவே, ஏற்கனவே உள்ளவற்றைப் பயன்படுத்தவும் அல்லது உங்களுக்குத் தேவையானதைச் சேர்க்க தயங்கவும்.

மிக்சின்கள் சேர்க்கப்பட்டுள்ளன

பயன்பாடுகள்

மிக்சின்	அளவுருக்கள்	பயன்பாடு
`.clearfix()`	எதுவும் இல்லை	உள்ள மிதவைகளை அழிக்க எந்த பெற்றோரிடமும் சேர்க்கவும்
`.tab-focus()`	எதுவும் இல்லை	வெப்கிட் ஃபோகஸ் ஸ்டைல் மற்றும் ரவுண்ட் ஃபயர்பாக்ஸ் அவுட்லைனைப் பயன்படுத்தவும்
`.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()`	எதுவும் இல்லை	ஒரு உறுப்பை செரிஃப் எழுத்துரு அடுக்கைப் பயன்படுத்தவும்
`#font > #family > .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 நெடுவரிசைகளைப் பயன்படுத்தவும்
`.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 ஐ மீண்டும் தொகுக்க வேண்டும் .

தொகுப்பதற்கான கருவிகள்

மேக்ஃபைலுடன் முனை

பின்வரும் கட்டளையை இயக்குவதன் மூலம் குறைந்த கட்டளை வரி கம்பைலர், JSHint, Recess மற்றும் uglify-js ஐ உலகளவில் npm உடன் நிறுவவும்:

$ npm நிறுவல் -g குறைவான jshint இடைவெளி uglify-js

நிறுவியதும் make, உங்கள் பூட்ஸ்ட்ராப் கோப்பகத்தின் மூலத்திலிருந்து இயக்கவும், நீங்கள் தயாராகிவிட்டீர்கள்.

கூடுதலாக, நீங்கள் வாட்சர் நிறுவியிருந்தால், பூட்ஸ்ட்ராப் லிப்பில்make watch கோப்பைத் திருத்தும் ஒவ்வொரு முறையும் பூட்ஸ்ட்ராப் தானாகவே மீண்டும் கட்டமைக்கப்படும் (இது தேவையில்லை, ஒரு வசதியான முறை).

கட்டளை வரி

Node வழியாக LESS கட்டளை வரி கருவியை நிறுவி பின்வரும் கட்டளையை இயக்கவும்:

$ 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 செயலியானது .less கோப்புகளின் கோப்பகங்களைப் பார்க்கிறது மற்றும் பார்த்த .less கோப்பை ஒவ்வொரு சேமித்த பிறகும் குறியீட்டை உள்ளூர் கோப்புகளுக்கு தொகுக்கிறது.

நீங்கள் விரும்பினால், தானாகவே சிறிதாக்குதல் மற்றும் தொகுக்கப்பட்ட கோப்புகள் எந்த கோப்பகத்தில் முடிவடையும் என்பதற்கான விருப்பத்தேர்வுகளை ஆப்ஸில் மாற்றலாம்.

குறைவாக கட்டப்பட்டது

ஏன் குறைவாக?

என்ன சேர்க்கப்பட்டுள்ளது?

மேலும் அறிக

மாறிகள்

கலவைகள்

செயல்பாடுகள்

பூட்ஸ்டார்ப் மாறிகள் குறைவான மாறிகள், அவற்றின் மதிப்புகள் மற்றும் பயன்பாட்டு வழிகாட்டுதல்கள்

சாரக்கட்டு மற்றும் இணைப்புகள்

கட்ட அமைப்பு

அச்சுக்கலை

அட்டவணைகள்

கிரேஸ்கேல் நிறங்கள்

உச்சரிப்பு நிறங்கள்

கூறுகள்

பொத்தான்கள்

படிவங்கள்

படிவம் நிலைகள் மற்றும் விழிப்பூட்டல்கள்

நவ்பார்

கீழிறங்கும்

ஹீரோ யூனிட்

பூட்ஸ்ட்ராப் மிக்சின்கள்

கலவை பற்றி

அடிப்படை கலவைகள்

அளவுரு கலவைகள்

உங்கள் சொந்தத்தைச் சேர்க்கவும்

மிக்சின்கள் சேர்க்கப்பட்டுள்ளன

பயன்பாடுகள்

படிவங்கள்

அச்சுக்கலை

கட்ட அமைப்பு

CSS3 பண்புகள்

பின்னணிகள் மற்றும் சாய்வு

குறைவாக பூட்ஸ்டார்ப் தொகுத்தல்

தொகுப்பதற்கான கருவிகள்

மேக்ஃபைலுடன் முனை

கட்டளை வரி

ஜாவாஸ்கிரிப்ட்

அதிகாரப்பூர்வமற்ற மேக் பயன்பாடு

மேலும் மேக் பயன்பாடுகள்

க்ரஞ்ச்

கோட்கிட்

எளிமையானது