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

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

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

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

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

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

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

കൂടുതലറിയുക

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

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

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

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

കമാൻഡ് ലൈൻ

കമാൻഡ് ലൈൻ വഴി കംപൈൽ ചെയ്യുന്നതിന് GitHub- ലെ പ്രോജക്റ്റ് റീഡ്‌മെയിലെ നിർദ്ദേശങ്ങൾ പാലിക്കുക .

ജാവാസ്ക്രിപ്റ്റ്

ഏറ്റവും പുതിയ 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>

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

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