ਵਧਾਓ · ਬੂਟਸਟਰੈਪ ਪੰਜਾਬੀ ਵਿੱਚ

ਬੂਟਸਟਰੈਪ ਨੂੰ ਇਸਦੇ ਮੂਲ ਵਿੱਚ ਘੱਟ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਇੱਕ ਗਤੀਸ਼ੀਲ ਸਟਾਈਲਸ਼ੀਟ ਭਾਸ਼ਾ ਜੋ ਸਾਡੇ ਚੰਗੇ ਦੋਸਤ, ਅਲੈਕਸਿਸ ਸੇਲੀਅਰ ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਹੈ । ਇਹ ਸਿਸਟਮ-ਆਧਾਰਿਤ CSS ਨੂੰ ਤੇਜ਼, ਆਸਾਨ ਅਤੇ ਹੋਰ ਮਜ਼ੇਦਾਰ ਬਣਾਉਂਦਾ ਹੈ।

ਘੱਟ ਕਿਉਂ?

ਬੂਟਸਟਰੈਪ ਦੇ ਸਿਰਜਣਹਾਰਾਂ ਵਿੱਚੋਂ ਇੱਕ ਨੇ ਇਸ ਬਾਰੇ ਇੱਕ ਤੇਜ਼ ਬਲੌਗ ਪੋਸਟ ਲਿਖਿਆ , ਇੱਥੇ ਸੰਖੇਪ ਕੀਤਾ ਗਿਆ ਹੈ:

ਬੂਟਸਟਰੈਪ Sass ਦੇ ਮੁਕਾਬਲੇ ਘੱਟ ਦੇ ਨਾਲ ~ 6x ਤੇਜ਼ੀ ਨਾਲ ਕੰਪਾਇਲ ਕਰਦਾ ਹੈ
JavaScript ਵਿੱਚ ਘੱਟ ਲਿਖਿਆ ਗਿਆ ਹੈ, ਜਿਸ ਨਾਲ ਸਾਸ ਦੇ ਨਾਲ ਰੂਬੀ ਦੀ ਤੁਲਨਾ ਵਿੱਚ ਸਾਡੇ ਲਈ ਡਾਇਵ ਇਨ ਕਰਨਾ ਅਤੇ ਪੈਚ ਕਰਨਾ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ।
ਘੱਟ ਹੀ ਬਹੁਤ ਹੈ; ਅਸੀਂ ਮਹਿਸੂਸ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਅਸੀਂ CSS ਲਿਖ ਰਹੇ ਹਾਂ ਅਤੇ ਬੂਟਸਟਰੈਪ ਨੂੰ ਸਾਰਿਆਂ ਲਈ ਪਹੁੰਚਯੋਗ ਬਣਾ ਰਹੇ ਹਾਂ।

ਕੀ ਸ਼ਾਮਲ ਹੈ?

CSS ਦੇ ਇੱਕ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਰੂਪ ਵਿੱਚ, LESS ਵਿੱਚ ਵੇਰੀਏਬਲ, ਕੋਡ ਦੇ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਸਨਿੱਪਟ ਲਈ ਮਿਕਸਿਨ, ਸਧਾਰਨ ਗਣਿਤ ਲਈ ਓਪਰੇਸ਼ਨ, ਨੇਸਟਿੰਗ, ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਰੰਗ ਫੰਕਸ਼ਨ ਵੀ ਸ਼ਾਮਲ ਹਨ।

ਜਿਆਦਾ ਜਾਣੋ

ਹੋਰ ਜਾਣਨ ਲਈ http://lesscss.org/ 'ਤੇ ਅਧਿਕਾਰਤ ਵੈੱਬਸਾਈਟ 'ਤੇ ਜਾਓ ।

ਕਿਉਂਕਿ ਸਾਡਾ CSS ਘੱਟ ਨਾਲ ਲਿਖਿਆ ਗਿਆ ਹੈ ਅਤੇ ਵੇਰੀਏਬਲ ਅਤੇ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਇਸ ਨੂੰ ਅੰਤਿਮ ਉਤਪਾਦਨ ਲਾਗੂ ਕਰਨ ਲਈ ਕੰਪਾਇਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ ਹੈ।

ਨੋਟ: ਜੇਕਰ ਤੁਸੀਂ ਸੋਧੇ ਹੋਏ CSS ਨਾਲ GitHub ਨੂੰ ਇੱਕ ਪੁੱਲ ਬੇਨਤੀ ਜਮ੍ਹਾਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਵੀ ਢੰਗ ਰਾਹੀਂ CSS ਨੂੰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

ਕੰਪਾਇਲ ਕਰਨ ਲਈ ਟੂਲ

ਕਮਾਂਡ ਲਾਈਨ

ਕਮਾਂਡ ਲਾਈਨ ਰਾਹੀਂ ਕੰਪਾਇਲ ਕਰਨ ਲਈ ਗਿੱਟਹੱਬ 'ਤੇ ਪ੍ਰੋਜੈਕਟ ਰੀਡਮੀ ਵਿਚ ਦਿੱਤੀਆਂ ਹਦਾਇਤਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ ।

JavaScript

ਨਵੀਨਤਮ Less.js ਨੂੰ ਡਾਊਨਲੋਡ ਕਰੋ ਅਤੇ ਵਿੱਚ ਇਸ (ਅਤੇ ਬੂਟਸਟਰੈਪ) ਦਾ ਮਾਰਗ ਸ਼ਾਮਲ ਕਰੋ <head>।

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

.less ਫਾਈਲਾਂ ਨੂੰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰਨ ਲਈ, ਉਹਨਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰੋ ਅਤੇ ਆਪਣੇ ਪੰਨੇ ਨੂੰ ਰੀਲੋਡ ਕਰੋ। Less.js ਉਹਨਾਂ ਨੂੰ ਕੰਪਾਇਲ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸਥਾਨਕ ਸਟੋਰੇਜ ਵਿੱਚ ਸਟੋਰ ਕਰਦਾ ਹੈ।

ਅਣਅਧਿਕਾਰਤ ਮੈਕ ਐਪ

ਅਣਅਧਿਕਾਰਤ ਮੈਕ ਐਪ .less ਫਾਈਲਾਂ ਦੀਆਂ ਡਾਇਰੈਕਟਰੀਆਂ ਦੇਖਦਾ ਹੈ ਅਤੇ ਇੱਕ ਦੇਖੀ ਗਈ .less ਫਾਈਲ ਦੇ ਹਰ ਸੇਵ ਤੋਂ ਬਾਅਦ ਕੋਡ ਨੂੰ ਸਥਾਨਕ ਫਾਈਲਾਂ ਵਿੱਚ ਕੰਪਾਇਲ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੋ, ਤਾਂ ਤੁਸੀਂ ਐਪ ਵਿੱਚ ਆਟੋਮੈਟਿਕ ਮਿਨਿਫਾਇੰਗ ਲਈ ਤਰਜੀਹਾਂ ਨੂੰ ਟੌਗਲ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਕੰਪਾਇਲ ਕੀਤੀਆਂ ਫਾਈਲਾਂ ਕਿਸ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਖਤਮ ਹੁੰਦੀਆਂ ਹਨ।

ਹੋਰ ਐਪਾਂ

ਕਰੰਚ

ਕਰੰਚ ਅਡੋਬ ਏਅਰ 'ਤੇ ਬਣਾਇਆ ਗਿਆ ਇੱਕ ਵਧੀਆ ਦਿੱਖ ਵਾਲਾ ਘੱਟ ਸੰਪਾਦਕ ਅਤੇ ਕੰਪਾਈਲਰ ਹੈ।

ਕੋਡਕਿੱਟ

ਅਣਅਧਿਕਾਰਤ ਮੈਕ ਐਪ ਦੇ ਤੌਰ 'ਤੇ ਉਸੇ ਵਿਅਕਤੀ ਦੁਆਰਾ ਬਣਾਇਆ ਗਿਆ, ਕੋਡਕਿਟ ਇੱਕ ਮੈਕ ਐਪ ਹੈ ਜੋ ਘੱਟ, SASS, ਸਟਾਈਲਸ, ਅਤੇ ਕੌਫੀ ਸਕ੍ਰਿਪਟ ਨੂੰ ਕੰਪਾਇਲ ਕਰਦੀ ਹੈ।

ਸਰਲ

ਘੱਟ ਫਾਈਲਾਂ ਦੇ ਡਰੈਗ ਅਤੇ ਡ੍ਰੌਪ ਕੰਪਾਈਲਿੰਗ ਲਈ ਮੈਕ, ਲੀਨਕਸ, ਅਤੇ ਵਿੰਡੋਜ਼ ਐਪ। ਨਾਲ ਹੀ, ਸਰੋਤ ਕੋਡ GitHub 'ਤੇ ਹੈ ।

ਕੰਪਾਇਲ ਕੀਤੇ ਜਾਂ ਮਿਨੀਫਾਈਡ CSS ਅਤੇ JS ਵਿੱਚ ਛੱਡ ਕੇ ਕਿਸੇ ਵੀ ਵੈੱਬ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਜਲਦੀ ਸ਼ੁਰੂ ਕਰੋ । ਆਸਾਨ ਅੱਪਗਰੇਡਾਂ ਅਤੇ ਰੱਖ-ਰਖਾਅ ਅੱਗੇ ਵਧਣ ਲਈ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਕਸਟਮ ਸਟਾਈਲ 'ਤੇ ਪਰਤ।

ਸੈੱਟਅੱਪ ਫਾਇਲ ਬਣਤਰ

ਨਵੀਨਤਮ ਕੰਪਾਇਲ ਕੀਤੇ ਬੂਟਸਟਰੈਪ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰੋ ਅਤੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਰੱਖੋ। ਉਦਾਹਰਨ ਲਈ, ਤੁਹਾਡੇ ਕੋਲ ਅਜਿਹਾ ਕੁਝ ਹੋ ਸਕਦਾ ਹੈ:

  ਐਪ/
      ਖਾਕਾ/
      ਟੈਂਪਲੇਟਸ/
  ਜਨਤਕ/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

ਸਟਾਰਟਰ ਟੈਂਪਲੇਟ ਦੀ ਵਰਤੋਂ ਕਰੋ

ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਆਧਾਰ HTML ਨੂੰ ਕਾਪੀ ਕਰੋ।

<html>
  <head>
    <title> Bootstrap 101 ਟੈਂਪਲੇਟ </title>
    <!-- ਬੂਟਸਟਰੈਪ -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <body>
    <h1> ਹੈਲੋ, ਸੰਸਾਰ! </h1>
    <!-- ਬੂਟਸਟਰੈਪ -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

ਕਸਟਮ ਕੋਡ 'ਤੇ ਪਰਤ

ਆਪਣੀਆਂ ਵੱਖਰੀਆਂ CSS ਅਤੇ JS ਫਾਈਲਾਂ ਨਾਲ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਪਣਾ ਬਣਾਉਣ ਲਈ ਲੋੜ ਅਨੁਸਾਰ ਆਪਣੇ ਕਸਟਮ CSS, JS, ਅਤੇ ਹੋਰ ਵਿੱਚ ਕੰਮ ਕਰੋ।

<html>
  <head>
    <title> Bootstrap 101 ਟੈਂਪਲੇਟ </title>
    <!-- ਬੂਟਸਟਰੈਪ -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- ਪ੍ਰੋਜੈਕਟ -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <body>
    <h1> ਹੈਲੋ, ਸੰਸਾਰ! </h1>
    <!-- ਬੂਟਸਟਰੈਪ -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- ਪ੍ਰੋਜੈਕਟ -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

ਬੂਟਸਟਰੈਪ ਨੂੰ ਵਧਾਇਆ ਜਾ ਰਿਹਾ ਹੈ

ਘੱਟ ਨਾਲ ਬਣਾਇਆ ਗਿਆ