വിപുലീകരിക്കുക · ബൂട്ട്സ്ട്രാപ്പ് മലയാളത്തിൽ

ബൂട്ട്‌സ്‌ട്രാപ്പ് അതിന്റെ കാമ്പിൽ കുറച്ച് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്, ഞങ്ങളുടെ നല്ല സുഹൃത്തായ അലക്‌സിസ് സെല്ലിയർ സൃഷ്‌ടിച്ച ഡൈനാമിക് സ്‌റ്റൈൽഷീറ്റ് ഭാഷ . ഇത് സിസ്റ്റം അടിസ്ഥാനമാക്കിയുള്ള CSS വികസിപ്പിക്കുന്നത് വേഗമേറിയതും എളുപ്പമുള്ളതും കൂടുതൽ രസകരവുമാക്കുന്നു.

എന്തുകൊണ്ട് കുറവ്?

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ സ്രഷ്‌ടാക്കളിൽ ഒരാൾ ഇതിനെക്കുറിച്ച് ഒരു ദ്രുത ബ്ലോഗ് പോസ്റ്റ് എഴുതി , ഇവിടെ സംഗ്രഹിച്ചിരിക്കുന്നു:

Sass നെ അപേക്ഷിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പ് ~6x വേഗത്തിൽ കംപൈൽ ചെയ്യുന്നു
റൂബി വിത്ത് സാസുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ, കുറച്ച് ജാവാസ്ക്രിപ്റ്റിൽ എഴുതിയിരിക്കുന്നു, ഡൈവ് ചെയ്യാനും പാച്ച് ചെയ്യാനും ഞങ്ങൾക്ക് എളുപ്പമാക്കുന്നു.
കുറവാണ് കൂടുതൽ; ഞങ്ങൾ CSS എഴുതുകയും ബൂട്ട്‌സ്‌ട്രാപ്പ് എല്ലാവർക്കും പ്രാപ്യമാക്കുകയും ചെയ്യുന്നതുപോലെ തോന്നാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു.

എന്താണ് ഉൾപ്പെടുത്തിയിരിക്കുന്നത്?

CSS-ന്റെ വിപുലീകരണമെന്ന നിലയിൽ, വേരിയബിളുകൾ, കോഡിന്റെ പുനരുപയോഗിക്കാവുന്ന സ്‌നിപ്പെറ്റുകൾക്കായുള്ള മിക്സിനുകൾ, ലളിതമായ ഗണിതത്തിനുള്ള പ്രവർത്തനങ്ങൾ, നെസ്റ്റിംഗ്, കൂടാതെ കളർ ഫംഗ്‌ഷനുകൾ എന്നിവയും കുറവ് ഉൾപ്പെടുന്നു.

കൂടുതലറിയുക

കൂടുതലറിയാൻ http://lesscss.org/ എന്ന ഔദ്യോഗിക വെബ്സൈറ്റ് സന്ദർശിക്കുക .

ഞങ്ങളുടെ CSS ലെസ് ഉപയോഗിച്ച് എഴുതിയിരിക്കുന്നതിനാൽ വേരിയബിളുകളും മിക്സിനുകളും ഉപയോഗിക്കുന്നതിനാൽ, അന്തിമ ഉൽപ്പാദനം നടപ്പിലാക്കുന്നതിനായി ഇത് കംപൈൽ ചെയ്യേണ്ടതുണ്ട്. എങ്ങനെയെന്നത് ഇതാ.

ശ്രദ്ധിക്കുക: പരിഷ്‌ക്കരിച്ച CSS ഉപയോഗിച്ച് നിങ്ങൾ GitHub-ലേക്ക് ഒരു പുൾ അഭ്യർത്ഥന സമർപ്പിക്കുകയാണെങ്കിൽ , ഈ ഏതെങ്കിലും രീതിയിലൂടെ നിങ്ങൾ CSS വീണ്ടും കംപൈൽ ചെയ്യണം .

കംപൈൽ ചെയ്യുന്നതിനുള്ള ഉപകരണങ്ങൾ

മേക്ക്‌ഫൈലുള്ള നോഡ്

ഇനിപ്പറയുന്ന കമാൻഡ് പ്രവർത്തിപ്പിച്ച് npm ഉപയോഗിച്ച് LESS കമാൻഡ് ലൈൻ കമ്പൈലർ, JSHint, Recess, uglify-js എന്നിവ ആഗോളതലത്തിൽ ഇൻസ്റ്റാൾ ചെയ്യുക:

$ npm ഇൻസ്റ്റാൾ -g കുറവ് jshint recess uglify-js

ഇൻസ്റ്റാൾ ചെയ്തുകഴിഞ്ഞാൽ make, നിങ്ങളുടെ ബൂട്ട്സ്ട്രാപ്പ് ഡയറക്ടറിയുടെ റൂട്ടിൽ നിന്ന് പ്രവർത്തിപ്പിക്കുക, നിങ്ങൾ എല്ലാം സജ്ജമാക്കിക്കഴിഞ്ഞു.

കൂടാതെ, നിങ്ങൾ വാച്ചർ ഇൻസ്റ്റാൾ ചെയ്‌തിട്ടുണ്ടെങ്കിൽ, make watchബൂട്ട്‌സ്‌ട്രാപ്പ് ലിബിൽ ഒരു ഫയൽ എഡിറ്റുചെയ്യുമ്പോഴെല്ലാം ബൂട്ട്‌സ്‌ട്രാപ്പ് സ്വയമേവ പുനർനിർമ്മിക്കുന്നതിന് നിങ്ങൾ പ്രവർത്തിപ്പിക്കാം (ഇത് ആവശ്യമില്ല, ഒരു സൗകര്യപ്രദമായ രീതി മാത്രം).

കമാൻഡ് ലൈൻ

നോഡ് വഴി LESS കമാൻഡ് ലൈൻ ടൂൾ ഇൻസ്റ്റാൾ ചെയ്ത് ഇനിപ്പറയുന്ന കമാൻഡ് പ്രവർത്തിപ്പിക്കുക:

$lessc ./less/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, Windows ആപ്പ് കുറഞ്ഞ ഫയലുകൾ കംപൈൽ ചെയ്യുന്നതിനുള്ള ഡ്രാഗ് ആൻഡ് ഡ്രോപ്പ്. കൂടാതെ, സോഴ്‌സ് കോഡ് GitHub-ലാണ് .

കംപൈൽ ചെയ്‌തതോ ചെറുതാക്കിയതോ ആയ CSS, JS എന്നിവയിൽ ഇടുക വഴി ഏത് വെബ് പ്രോജക്‌റ്റും വേഗത്തിൽ ആരംഭിക്കുക . എളുപ്പത്തിൽ നവീകരിക്കുന്നതിനും അറ്റകുറ്റപ്പണികൾ മുന്നോട്ട് കൊണ്ടുപോകുന്നതിനും പ്രത്യേകം ഇഷ്‌ടാനുസൃത ശൈലികളിൽ ലെയർ ചെയ്യുക.

ഫയൽ ഘടന സജ്ജീകരിക്കുക

ഏറ്റവും പുതിയ കംപൈൽ ചെയ്‌ത ബൂട്ട്‌സ്‌ട്രാപ്പ് ഡൗൺലോഡ് ചെയ്‌ത് നിങ്ങളുടെ പ്രോജക്‌റ്റിൽ ഇടുക. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഇതുപോലുള്ള എന്തെങ്കിലും ഉണ്ടായിരിക്കാം:

  ആപ്പ്/
      ലേഔട്ടുകൾ/
      ടെംപ്ലേറ്റുകൾ/
  പൊതു/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

സ്റ്റാർട്ടർ ടെംപ്ലേറ്റ് ഉപയോഗിക്കുക

ആരംഭിക്കുന്നതിന് ഇനിപ്പറയുന്ന അടിസ്ഥാന HTML പകർത്തുക.

<html>
  <തല>
    <title> ബൂട്ട്സ്ട്രാപ്പ് 101 ടെംപ്ലേറ്റ് </title>
    <!-- ബൂട്ട്സ്ട്രാപ്പ് -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <ശരീരം>
    <h1> ഹലോ, ലോകം! </h1>
    <!-- ബൂട്ട്സ്ട്രാപ്പ് -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

ഇഷ്‌ടാനുസൃത കോഡിലെ ലെയർ

നിങ്ങളുടെ സ്വന്തം CSS, JS ഫയലുകൾ ഉപയോഗിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പ് നിങ്ങളുടേതാക്കാൻ ആവശ്യമായ CSS, JS എന്നിവയിലും മറ്റും പ്രവർത്തിക്കുക.

<html>
  <തല>
    <title> ബൂട്ട്സ്ട്രാപ്പ് 101 ടെംപ്ലേറ്റ് </title>
    <!-- ബൂട്ട്സ്ട്രാപ്പ് -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- പദ്ധതി -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <ശരീരം>
    <h1> ഹലോ, ലോകം! </h1>
    <!-- ബൂട്ട്സ്ട്രാപ്പ് -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- പദ്ധതി -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

ബൂട്ട്സ്ട്രാപ്പ് വിപുലീകരിക്കുന്നു

കുറച്ച് കൊണ്ട് നിർമ്മിച്ചത്