பூட்ஸ்டார்ப்புடன் குறைவாகப் பயன்படுத்துதல்
பூட்ஸ்டார்ப்பின் CSS ஐ உருவாக்கப் பயன்படுத்தப்படும் மாறிகள், மிக்சின்கள் மற்றும் பலவற்றைப் பயன்படுத்திக் கொள்ள, குறைந்த அளவு, CSS முன்செயலியுடன் பூட்ஸ்டார்ப்பைத் தனிப்பயனாக்கி நீட்டிக்கவும் .
குறைவாக கட்டப்பட்டது
ஏன் குறைவாக?
பூட்ஸ்டார்ப் அதன் மையத்தில் குறைவானதைக் கொண்டு உருவாக்கப்பட்டது, இது எங்களின் நல்ல நண்பரான அலெக்சிஸ் செல்லியரால் உருவாக்கப்பட்ட டைனமிக் ஸ்டைல்ஷீட் மொழியாகும் . இது சிஸ்டம் அடிப்படையிலான 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 |
#ஈஈஈ | |
@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 );
- }
உங்கள் சொந்தத்தைச் சேர்க்கவும்
ஏறக்குறைய அனைத்து பூட்ஸ்டார்ப்பின் மிக்சின்களும் mixins.less இல் சேமிக்கப்பட்டுள்ளன, இது ஒரு அற்புதமான பயன்பாடு .less கோப்பு, இது கருவித்தொகுப்பில் உள்ள எந்த .less கோப்புகளிலும் மிக்சினைப் பயன்படுத்த உதவுகிறது.
எனவே, ஏற்கனவே உள்ளவற்றைப் பயன்படுத்தவும் அல்லது உங்களுக்குத் தேவையானதைச் சேர்க்க தயங்கவும்.
மிக்சின்கள் சேர்க்கப்பட்டுள்ளன
பயன்பாடுகள்
| மிக்சின் | அளவுருக்கள் | பயன்பாடு |
|---|---|---|
.clearfix() |
எதுவும் இல்லை | உள்ள மிதவைகளை அழிக்க எந்த பெற்றோரிடமும் சேர்க்கவும் |
.tab-focus() |
எதுவும் இல்லை | வெப்கிட் ஃபோகஸ் ஸ்டைல் மற்றும் ரவுண்ட் ஃபயர்பாக்ஸ் அவுட்லைனைப் பயன்படுத்தவும் |
.center-block() |
எதுவும் இல்லை | பிளாக்-லெவல் உறுப்பைப் பயன்படுத்தி தானியங்கு மையம்margin: auto |
.ie7-inline-block() |
எதுவும் இல்லை | display: inline-blockIE7 ஆதரவைப் பெற வழக்கமானவற்றைப் பயன்படுத்தவும் |
.size() |
@height: 5px, @width: 5px |
ஒரு வரியில் உயரத்தையும் அகலத்தையும் விரைவாக அமைக்கவும் |
.square() |
@size: 5px |
.size()அகலத்தையும் உயரத்தையும் ஒரே மதிப்பாக அமைக்க கட்டமைக்கிறது |
.opacity() |
@opacity: 100 |
ஒளிபுகாநிலை சதவீதத்தை முழு எண்களில் அமைக்கவும் (எ.கா., "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() |
எதுவும் இல்லை | @siteWidthஉங்கள் உள்ளடக்கத்தை வைத்திருப்பதற்கு நிலையான அகலம் கொண்ட கொள்கலனை வழங்கவும் |
.columns() |
@columns: 1 |
எத்தனை நெடுவரிசைகளிலும் (இயல்புநிலையாக 1 நெடுவரிசை வரை) ஒரு கட்ட நெடுவரிசையை உருவாக்கவும் |
.offset() |
@columns: 1 |
எத்தனை நெடுவரிசைகளையும் பரப்பும் இடது விளிம்புடன் கட்ட நெடுவரிசையை ஈடுசெய்க |
.gridColumn() |
எதுவும் இல்லை | ஒரு உறுப்பை கட்டம் நெடுவரிசை போல மிதக்கச் செய்யுங்கள் |
CSS3 பண்புகள்
| மிக்சின் | அளவுருக்கள் | பயன்பாடு |
|---|---|---|
.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, உங்கள் பூட்ஸ்ட்ராப் கோப்பகத்தின் மூலத்திலிருந்து இயக்கவும், நீங்கள் தயாராகிவிட்டீர்கள்.
கூடுதலாக, நீங்கள் வாட்சர் நிறுவியிருந்தால், பூட்ஸ்ட்ராப் லிப்பில்make watch கோப்பைத் திருத்தும் ஒவ்வொரு முறையும் பூட்ஸ்ட்ராப் தானாகவே மீண்டும் கட்டமைக்கப்படும் (இது தேவையில்லை, ஒரு வசதியான முறை).
கட்டளை வரி
Node வழியாக LESS கட்டளை வரி கருவியை நிறுவி பின்வரும் கட்டளையை இயக்கவும்:
$ lessc ./lib/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 கோப்பை ஒவ்வொரு சேமித்த பிறகும் குறியீட்டை உள்ளூர் கோப்புகளுக்கு தொகுக்கிறது.
நீங்கள் விரும்பினால், தானாகவே சிறிதாக்குதல் மற்றும் தொகுக்கப்பட்ட கோப்புகள் எந்த கோப்பகத்தில் முடிவடையும் என்பதற்கான விருப்பத்தேர்வுகளை ஆப்ஸில் மாற்றலாம்.
மேலும் மேக் பயன்பாடுகள்
க்ரஞ்ச்
க்ரஞ்ச் என்பது அடோப் ஏரில் கட்டமைக்கப்பட்ட குறைந்த எடிட்டர் மற்றும் கம்பைலர்.
கோட்கிட்
அதிகாரப்பூர்வமற்ற மேக் செயலியைப் போலவே அதே பையனால் உருவாக்கப்பட்டது, கோட்கிட் என்பது லெஸ், சாஸ், ஸ்டைலஸ் மற்றும் காபிஸ்கிரிப்ட் ஆகியவற்றைத் தொகுக்கும் மேக் பயன்பாடாகும்.
எளிமையானது
Mac, Linux மற்றும் PC பயன்பாடுகள் குறைவான கோப்புகளை தொகுக்க இழுத்து விடுகின்றன. மேலும், மூல குறியீடு GitHub இல் உள்ளது .