વિસ્તૃત કરો · Twitter બુટસ્ટ્રેપ ગુજરાતીમાં

બુટસ્ટ્રેપ તેના મૂળમાં LESS સાથે બનાવવામાં આવે છે, અમારા સારા મિત્ર, એલેક્સિસ સેલિયર દ્વારા બનાવેલ ગતિશીલ સ્ટાઈલશીટ ભાષા . તે વિકાસશીલ સિસ્ટમ-આધારિત CSS ને ઝડપી, સરળ અને વધુ મનોરંજક બનાવે છે.

શા માટે ઓછું?

બુટસ્ટ્રેપના સર્જકોમાંના એકે આ વિશે એક ઝડપી બ્લોગ પોસ્ટ લખી છે, જેનો સારાંશ અહીં છે:

બુટસ્ટ્રેપ સાસની સરખામણીમાં ઓછા સાથે ~6x વધુ ઝડપથી કમ્પાઇલ કરે છે
જાવાસ્ક્રિપ્ટમાં ઓછું લખાયેલું છે, જે આપણા માટે સાસ સાથે રૂબીની તુલનામાં ડાઇવ ઇન અને પેચ કરવાનું સરળ બનાવે છે.
ઓછી વધુ છે; અમે એવું અનુભવવા માંગીએ છીએ કે અમે CSS લખી રહ્યા છીએ અને બુટસ્ટ્રેપને બધા માટે સુલભ બનાવી રહ્યા છીએ.

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

CSS ના એક્સ્ટેંશન તરીકે, LESS માં વેરિયેબલ્સ, કોડના ફરીથી વાપરી શકાય તેવા સ્નિપેટ્સ માટે મિક્સિન્સ, સાદા ગણિત માટેના ઓપરેશન્સ, નેસ્ટિંગ અને રંગ કાર્યોનો પણ સમાવેશ થાય છે.

વધુ શીખો

વધુ જાણવા માટે http://lesscss.org/ પર સત્તાવાર વેબસાઇટની મુલાકાત લો .

કારણ કે અમારું CSS ઓછું સાથે લખાયેલું છે અને વેરિયેબલ્સ અને મિક્સિનનો ઉપયોગ કરે છે, તેને અંતિમ ઉત્પાદન અમલીકરણ માટે કમ્પાઇલ કરવાની જરૂર છે. આ રહ્યું કેવી રીતે.

નોંધ: જો તમે સંશોધિત 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 ફાઇલના દરેક સેવ પછી કોડને સ્થાનિક ફાઇલોમાં કમ્પાઇલ કરે છે. જો તમે ઇચ્છો, તો તમે એપમાં ઓટોમેટિક મિનિફાઇંગ માટે પસંદગીઓને ટૉગલ કરી શકો છો અને કમ્પાઇલ કરેલી ફાઇલો કઈ ડિરેક્ટરીમાં સમાપ્ત થાય છે.

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

ક્રંચ

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

કોડકિટ

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

સરળ

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

સંકલિત અથવા લઘુત્તમ CSS અને JS માં ડ્રોપ કરીને કોઈપણ વેબ પ્રોજેક્ટને ઝડપથી શરૂ કરો. સરળ અપગ્રેડ અને જાળવણી આગળ વધવા માટે અલગથી કસ્ટમ શૈલીઓ પર સ્તર.

ફાઇલ માળખું સેટ કરો

નવીનતમ સંકલિત બુટસ્ટ્રેપ ડાઉનલોડ કરો અને તમારા પ્રોજેક્ટમાં મૂકો. ઉદાહરણ તરીકે, તમારી પાસે આના જેવું કંઈક હોઈ શકે છે:

  એપ્લિકેશન / ├── લેઆઉટ / └── નમૂનાઓ / સાર્વજનિક / ├── css / │ ├── બુટસ્ટ્રેપ . મિનિટ _ css
   ├── js / │ ├── બુટસ્ટ્રેપ . મિનિટ _ js
   └── img / ├── ગ્લિફિકન્સ - હાફલિંગ્સ . png
       └── ગ્લિફિકન્સ - હાફલિંગ - સફેદ . png

સ્ટાર્ટર ટેમ્પલેટનો ઉપયોગ કરો

પ્રારંભ કરવા માટે નીચેના આધાર HTML ની નકલ કરો.

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
  </body>
</html>

Layer on custom code

Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
    <!-- Project -->
    <link href="public/css/application.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
    <!-- Project -->
    <script src="public/js/application.js"></script>
  </body>
</html>

બુટસ્ટ્રેપ વિસ્તરે છે

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