સમાવિષ્ટ શૈલીઓ અને ઘટકો તેમજ ઓછા ચલો અને મિશ્રણોનો લાભ લેવા માટે બુટસ્ટ્રેપને વિસ્તૃત કરો.
બુટસ્ટ્રેપ તેના મૂળમાં LESS સાથે બનાવવામાં આવે છે, અમારા સારા મિત્ર, એલેક્સિસ સેલિયર દ્વારા બનાવેલ ગતિશીલ સ્ટાઈલશીટ ભાષા . તે વિકાસશીલ સિસ્ટમ-આધારિત CSS ને ઝડપી, સરળ અને વધુ મનોરંજક બનાવે છે.
બુટસ્ટ્રેપના સર્જકોમાંના એકે આ વિશે એક ઝડપી બ્લોગ પોસ્ટ લખી છે, જેનો સારાંશ અહીં છે:
CSS ના એક્સ્ટેંશન તરીકે, LESS માં વેરિયેબલ્સ, કોડના ફરીથી વાપરી શકાય તેવા સ્નિપેટ્સ માટે મિક્સિન્સ, સાદા ગણિત માટેના ઓપરેશન્સ, નેસ્ટિંગ અને રંગ કાર્યોનો પણ સમાવેશ થાય છે.
વધુ જાણવા માટે http://lesscss.org/ પર સત્તાવાર વેબસાઇટની મુલાકાત લો .
કારણ કે અમારું CSS ઓછું સાથે લખાયેલું છે અને વેરિયેબલ્સ અને મિક્સિનનો ઉપયોગ કરે છે, તેને અંતિમ ઉત્પાદન અમલીકરણ માટે કમ્પાઇલ કરવાની જરૂર છે. આ રહ્યું કેવી રીતે.
કમાન્ડ લાઇન દ્વારા કમ્પાઇલ કરવા માટે GitHub પર પ્રોજેક્ટ રીડમીમાંની સૂચનાઓને અનુસરો .
નવીનતમ 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/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-halflings.png glyphicons-halflings-white.png
પ્રારંભ કરવા માટે નીચેના આધાર HTML ની નકલ કરો.
- <html>
- <head>
- <title> બુટસ્ટ્રેપ 101 ટેમ્પલેટ </title>
- <!-- બુટસ્ટ્રેપ -->
- <link href = "public/css/bootstrap.min.css" rel = "સ્ટાઈલશીટ" >
- </head>
- <body>
- <h1> હેલો, વિશ્વ! </h1>
- <!-- બુટસ્ટ્રેપ -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
તમારી પોતાની અલગ CSS અને JS ફાઇલો વડે બુટસ્ટ્રેપને તમારો પોતાનો બનાવવા માટે તમારા કસ્ટમ CSS, JS અને વધુમાં કામ કરો.
- <html>
- <head>
- <title> બુટસ્ટ્રેપ 101 ટેમ્પલેટ </title>
- <!-- બુટસ્ટ્રેપ -->
- <link href = "public/css/bootstrap.min.css" rel = "સ્ટાઈલશીટ" >
- <!-- પ્રોજેક્ટ -->
- <link href = "public/css/application.css" rel = "સ્ટાઈલશીટ" >
- </head>
- <body>
- <h1> હેલો, વિશ્વ! </h1>
- <!-- બુટસ્ટ્રેપ -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- પ્રોજેક્ટ -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>