ਵਿਸਤਾਰ ਕਰੋ · ਟਵਿੱਟਰ ਬੂਟਸਟਰੈਪ ਪੰਜਾਬੀ ਵਿੱਚ

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

ਘੱਟ ਕਿਉਂ?

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

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

ਕੀ ਸ਼ਾਮਲ ਹੈ?

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

ਜਿਆਦਾ ਜਾਣੋ

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

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

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

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

ਮੇਕਫਾਈਲ ਨਾਲ ਨੋਡ

ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾ ਕੇ LESS ਕਮਾਂਡ ਲਾਈਨ ਕੰਪਾਈਲਰ, JSHint, Recess, ਅਤੇ uglify-js ਨੂੰ npm ਨਾਲ ਗਲੋਬਲ ਤੌਰ 'ਤੇ ਸਥਾਪਿਤ ਕਰੋ:

$npm install -g less jshint recess ugliify-js

ਇੱਕ ਵਾਰ ਇੰਸਟਾਲ ਹੋਣ makeਤੋਂ ਬਾਅਦ ਤੁਹਾਡੀ ਬੂਟਸਟਰੈਪ ਡਾਇਰੈਕਟਰੀ ਦੇ ਰੂਟ ਤੋਂ ਚਲਾਓ ਅਤੇ ਤੁਸੀਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤਿਆਰ ਹੋ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਵਾਚਰ ਸਥਾਪਤ ਹੈ, ਤਾਂ ਤੁਸੀਂ make watchਬੂਟਸਟਰੈਪ ਲਿਬ ਵਿੱਚ ਹਰ ਵਾਰ ਇੱਕ ਫਾਈਲ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰਨ 'ਤੇ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਟੋਮੈਟਿਕਲੀ ਦੁਬਾਰਾ ਬਣਾਉਣ ਲਈ ਦੌੜ ਸਕਦੇ ਹੋ (ਇਸਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਸਿਰਫ਼ ਇੱਕ ਸਹੂਲਤ ਵਿਧੀ)।

ਕਮਾਂਡ ਲਾਈਨ

ਨੋਡ ਦੁਆਰਾ ਘੱਟ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲ ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ ਅਤੇ ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾਓ:

$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 ਉਹਨਾਂ ਨੂੰ ਕੰਪਾਇਲ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸਥਾਨਕ ਸਟੋਰੇਜ ਵਿੱਚ ਸਟੋਰ ਕਰਦਾ ਹੈ।

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

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

ਹੋਰ ਐਪਾਂ

ਕਰੰਚ

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

ਕੋਡਕਿੱਟ

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

ਸਰਲ

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

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

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

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

  ਐਪ / ├── ਲੇਆਉਟ / └── ਟੈਂਪਲੇਟਸ / ਪਬਲਿਕ / ├── css / │ ├── ਬੂਟਸਟਰੈਪ । ਮਿੰਟ _ css
   ├── js / │ ├── ਬੂਟਸਟਰੈਪ । ਮਿੰਟ _ js
   └── img / ├── ਗਲਾਈਫਿਕਨ - ਹਾਫਲਿੰਗਸ । png
       └── ਗਲਾਈਫਿਕਨ - ਹਾਫਲਿੰਗਸ - ਸਫੇਦ । 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>

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

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