બુટસ્ટ્રેપ સાથે ઓછો ઉપયોગ કરવો

બુટસ્ટ્રેપના CSS બનાવવા માટે ઉપયોગમાં લેવાતા વેરિયેબલ્સ, મિક્સિન્સ અને વધુનો લાભ લેવા માટે LESS , CSS પ્રીપ્રોસેસર સાથે બુટસ્ટ્રેપને કસ્ટમાઇઝ અને વિસ્તૃત કરો .

શા માટે ઓછું?

બુટસ્ટ્રેપ તેના મૂળમાં LESS સાથે બનાવવામાં આવે છે, અમારા સારા મિત્ર, એલેક્સિસ સેલિયર દ્વારા બનાવેલ ગતિશીલ સ્ટાઈલશીટ ભાષા . તે વિકાસશીલ સિસ્ટમ-આધારિત 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 મેનલો, મોનાકો, "કુરીયર ન્યુ", મોનોસ્પેસ
@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 #eeee
@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. }

સરળતાથી તમારા પોતાના ઉમેરો

લગભગ તમામ બુટસ્ટ્રેપના મિક્સિન mixins.less માં સંગ્રહિત છે, એક અદ્ભુત ઉપયોગિતા .less ફાઇલ કે જે તમને ટૂલકીટમાં કોઈપણ .less ફાઇલોમાં મિક્સિનનો ઉપયોગ કરવા સક્ષમ બનાવે છે.

તેથી, આગળ વધો અને અસ્તિત્વમાં છે તેનો ઉપયોગ કરો અથવા તમને જરૂર મુજબ તમારા પોતાના ઉમેરવા માટે મફત લાગે.

મિક્સિન્સનો સમાવેશ થાય છે

ઉપયોગિતાઓ

મિક્સિન પરિમાણો ઉપયોગ
.clearfix() કોઈ નહીં અંદર ફ્લોટ્સ સાફ કરવા માટે કોઈપણ માતાપિતાને ઉમેરો
.tab-focus() કોઈ નહીં વેબકિટ ફોકસ શૈલી અને રાઉન્ડ ફાયરફોક્સ રૂપરેખા લાગુ કરો
.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() કોઈ નહીં સેરિફ ફોન્ટ સ્ટેકનો ઉપયોગ કરીને એલિમેન્ટ બનાવો
#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 ફરીથી કમ્પાઇલ કરવું આવશ્યક છે.

સંકલન માટે સાધનો

મેકફાઇલ સાથે નોડ

નીચેના આદેશને ચલાવીને npm સાથે વૈશ્વિક સ્તરે LESS કમાન્ડ લાઇન કમ્પાઇલર, JSHint, Recess અને ugliify-js ઇન્સ્ટોલ કરો:

$npm install -g less jshint recess ugliify-js

એકવાર ઇન્સ્ટોલ થઈ ગયા પછી ફક્ત makeતમારી બુટસ્ટ્રેપ ડિરેક્ટરીના રુટમાંથી ચલાવો અને તમે તૈયાર છો.

વધારામાં, જો તમારી પાસે વોચર ઇન્સ્ટોલ કરેલ હોય, તો તમે make watchજ્યારે પણ બુટસ્ટ્રેપ લિબમાં ફાઇલને સંપાદિત કરો છો ત્યારે તમે બુટસ્ટ્રેપ આપોઆપ પુનઃબીલ્ડ કરવા માટે દોડી શકો છો (આ જરૂરી નથી, માત્ર એક સુવિધા પદ્ધતિ).

આદેશ વાક્ય

નોડ દ્વારા LESS કમાન્ડ લાઇન ટૂલ ઇન્સ્ટોલ કરો અને નીચેનો આદેશ ચલાવો:

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

--compressજો તમે કેટલાક બાઇટ્સ સાચવવાનો પ્રયાસ કરી રહ્યાં હોવ તો તે આદેશમાં શામેલ કરવાની ખાતરી કરો !

જાવાસ્ક્રિપ્ટ

નવીનતમ Less.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 એપ્લિકેશનો

ક્રંચ

Crunch એ Adobe Air પર બનેલ એક ઉત્તમ દેખાતા ઓછા સંપાદક અને કમ્પાઇલર છે.

કોડકિટ

બિનસત્તાવાર Mac એપ્લિકેશન તરીકે સમાન વ્યક્તિ દ્વારા બનાવવામાં આવેલ, CodeKit એ એક Mac એપ્લિકેશન છે જે LESS, SASS, Stylus અને CoffeeScriptનું સંકલન કરે છે.

સરળ

ઓછી ફાઇલોના ડ્રેગ અને ડ્રોપ કમ્પાઇલિંગ માટે Mac, Linux અને PC એપ્લિકેશન. ઉપરાંત, સ્રોત કોડ GitHub પર છે .