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

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

શા માટે ઓછું?

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

હીરો યુનિટ

`@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 કૉલમનો ઉપયોગ કરો

પૃષ્ઠભૂમિ અને ઢાળ

મિક્સિન	પરિમાણો	ઉપયોગ
`#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 ફરીથી કમ્પાઇલ કરવું આવશ્યક છે.

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

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

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

$ npm install -g less 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 ફાઇલના દરેક સેવ પછી કોડને સ્થાનિક ફાઇલોમાં કમ્પાઇલ કરે છે.

જો તમે ઇચ્છો, તો તમે એપમાં ઓટોમેટિક મિનિફાઇંગ માટે પસંદગીઓને ટૉગલ કરી શકો છો અને કમ્પાઇલ કરેલી ફાઇલો કઈ ડિરેક્ટરીમાં સમાપ્ત થાય છે.

ઓછી સાથે બિલ્ટ

શા માટે ઓછું?

શું સમાવવામાં આવેલ છે?

વધુ શીખો

ચલો

મિક્સિન્સ

કામગીરી

બુટસ્ટ્રેપ ચલો ઓછા ચલો, તેમના મૂલ્યો અને ઉપયોગ માર્ગદર્શિકા

પાલખ અને લિંક્સ

ગ્રીડ સિસ્ટમ

ટાઇપોગ્રાફી

કોષ્ટકો

ગ્રેસ્કેલ રંગો

ઉચ્ચાર રંગો

ઘટકો

બટનો

સ્વરૂપો

ફોર્મ સ્ટેટ્સ અને ચેતવણીઓ

નવબાર

ડ્રોપડાઉન

હીરો યુનિટ

બુટસ્ટ્રેપ મિક્સિન્સ

મિક્સિન્સ વિશે

મૂળભૂત મિશ્રણ

પેરામેટ્રિક મિશ્રણ

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

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

ઉપયોગિતાઓ

સ્વરૂપો

ટાઇપોગ્રાફી

ગ્રીડ સિસ્ટમ

CSS3 ગુણધર્મો

પૃષ્ઠભૂમિ અને ઢાળ

ઓછી સાથે બુટસ્ટ્રેપ કમ્પાઇલ કરી રહ્યું છે

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

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

આદેશ વાક્ય

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

બિનસત્તાવાર મેક એપ્લિકેશન

વધુ Mac એપ્લિકેશનો

ક્રંચ

કોડકિટ

સરળ