ਬੂਟਸਟਰੈਪ ਅਤੇ ਪਾਰਸਲ

ਪਾਰਸਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੇ CSS ਅਤੇ JavaScript ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ ਅਤੇ ਬੰਡਲ ਕਰਨਾ ਹੈ ਇਸ ਲਈ ਅਧਿਕਾਰਤ ਗਾਈਡ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਅੰਤ ਤੱਕ ਛੱਡਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਇਸ ਗਾਈਡ ਲਈ ਸਰੋਤ ਕੋਡ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਡੈਮੋ ਨੂੰ twbs/ਉਦਾਹਰਨ ਰਿਪੋਜ਼ਟਰੀ ਤੋਂ ਡਾਊਨਲੋਡ ਕਰੋ । ਤੁਸੀਂ ਉਦਾਹਰਨ ਨੂੰ StackBlitz ਵਿੱਚ ਵੀ ਖੋਲ੍ਹ ਸਕਦੇ ਹੋ ਪਰ ਇਸਨੂੰ ਚਲਾ ਨਹੀਂ ਸਕਦੇ ਕਿਉਂਕਿ ਪਾਰਸਲ ਵਰਤਮਾਨ ਵਿੱਚ ਉੱਥੇ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ।

ਸਥਾਪਨਾ ਕਰਨਾ

ਅਸੀਂ ਸਕ੍ਰੈਚ ਤੋਂ ਬੂਟਸਟਰੈਪ ਦੇ ਨਾਲ ਇੱਕ ਪਾਰਸਲ ਪ੍ਰੋਜੈਕਟ ਬਣਾ ਰਹੇ ਹਾਂ, ਇਸਲਈ ਅਸਲ ਵਿੱਚ ਸ਼ੁਰੂਆਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਕੁਝ ਪੂਰਵ-ਲੋੜਾਂ ਅਤੇ ਅਗਲੇ ਪੜਾਅ ਹਨ। ਇਸ ਗਾਈਡ ਲਈ ਤੁਹਾਨੂੰ Node.js ਸਥਾਪਤ ਕਰਨ ਅਤੇ ਟਰਮੀਨਲ ਨਾਲ ਕੁਝ ਜਾਣੂ ਹੋਣ ਦੀ ਲੋੜ ਹੈ।

ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਐਨਪੀਐਮ ਸੈੱਟਅੱਪ ਕਰੋ। ਅਸੀਂ my-projectਫੋਲਡਰ ਬਣਾਵਾਂਗੇ ਅਤੇ npm ਨੂੰ -yਆਰਗੂਮੈਂਟ ਨਾਲ ਸ਼ੁਰੂ ਕਰਾਂਗੇ ਤਾਂ ਜੋ ਇਹ ਸਾਨੂੰ ਸਾਰੇ ਇੰਟਰਐਕਟਿਵ ਸਵਾਲ ਪੁੱਛਣ ਤੋਂ ਬਚ ਸਕੇ।
```
mkdir my-project && cd my-project
npm init -y
```
ਪਾਰਸਲ ਸਥਾਪਿਤ ਕਰੋ। ਸਾਡੀ ਵੈਬਪੈਕ ਗਾਈਡ ਦੇ ਉਲਟ, ਇੱਥੇ ਸਿਰਫ਼ ਇੱਕ ਹੀ ਬਿਲਡ ਟੂਲ ਨਿਰਭਰਤਾ ਹੈ। ਪਾਰਸਲ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਭਾਸ਼ਾ ਟ੍ਰਾਂਸਫਾਰਮਰ (ਜਿਵੇਂ ਕਿ ਸਾਸ) ਨੂੰ ਸਥਾਪਿਤ ਕਰੇਗਾ ਕਿਉਂਕਿ ਇਹ ਉਹਨਾਂ ਨੂੰ ਖੋਜਦਾ ਹੈ। ਅਸੀਂ --save-devਇਹ ਸੰਕੇਤ ਦੇਣ ਲਈ ਵਰਤਦੇ ਹਾਂ ਕਿ ਇਹ ਨਿਰਭਰਤਾ ਸਿਰਫ ਵਿਕਾਸ ਦੀ ਵਰਤੋਂ ਲਈ ਹੈ ਨਾ ਕਿ ਉਤਪਾਦਨ ਲਈ।
```
npm i --save-dev parcel
```
ਬੂਟਸਟਰੈਪ ਇੰਸਟਾਲ ਕਰੋ। ਹੁਣ ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਇੰਸਟਾਲ ਕਰ ਸਕਦੇ ਹਾਂ। ਅਸੀਂ ਪੌਪਰ ਨੂੰ ਵੀ ਸਥਾਪਿਤ ਕਰਾਂਗੇ ਕਿਉਂਕਿ ਸਾਡੇ ਡ੍ਰੌਪਡਾਉਨ, ਪੌਪਓਵਰ ਅਤੇ ਟੂਲਟਿਪਸ ਉਹਨਾਂ ਦੀ ਸਥਿਤੀ ਲਈ ਇਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਉਹਨਾਂ ਭਾਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਯੋਜਨਾ ਨਹੀਂ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇੱਥੇ ਪੌਪਰ ਨੂੰ ਛੱਡ ਸਕਦੇ ਹੋ।
```
npm i --save bootstrap @popperjs/core
```

ਹੁਣ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਸਾਰੀਆਂ ਲੋੜੀਂਦੀਆਂ ਨਿਰਭਰਤਾਵਾਂ ਸਥਾਪਤ ਹਨ, ਅਸੀਂ ਪ੍ਰੋਜੈਕਟ ਫਾਈਲਾਂ ਬਣਾਉਣ ਅਤੇ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਯਾਤ ਕਰਨ ਲਈ ਕੰਮ ਕਰ ਸਕਦੇ ਹਾਂ।

ਪ੍ਰੋਜੈਕਟ ਬਣਤਰ

ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ my-projectਫੋਲਡਰ ਬਣਾ ਲਿਆ ਹੈ ਅਤੇ npm ਨੂੰ ਸ਼ੁਰੂ ਕੀਤਾ ਹੈ। ਹੁਣ ਅਸੀਂ srcਪ੍ਰੋਜੈਕਟ ਢਾਂਚੇ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਆਪਣਾ ਫੋਲਡਰ, ਸਟਾਈਲਸ਼ੀਟ, ਅਤੇ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਫਾਈਲ ਵੀ ਬਣਾਵਾਂਗੇ। ਹੇਠ ਦਿੱਤੇ ਨੂੰ ਚਲਾਓ my-project, ਜਾਂ ਹੇਠਾਂ ਦਰਸਾਏ ਫੋਲਡਰ ਅਤੇ ਫਾਈਲ ਢਾਂਚੇ ਨੂੰ ਦਸਤੀ ਬਣਾਓ।

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

ਜਦੋਂ ਤੁਸੀਂ ਪੂਰਾ ਕਰ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡਾ ਪੂਰਾ ਪ੍ਰੋਜੈਕਟ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

ਇਸ ਸਮੇਂ, ਸਭ ਕੁਝ ਸਹੀ ਥਾਂ 'ਤੇ ਹੈ, ਪਰ ਪਾਰਸਲ ਨੂੰ ਸਾਡੇ ਸਰਵਰ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇੱਕ HTML ਪੰਨੇ ਅਤੇ npm ਸਕ੍ਰਿਪਟ ਦੀ ਲੋੜ ਹੈ।

ਪਾਰਸਲ ਕੌਂਫਿਗਰ ਕਰੋ

ਨਿਰਭਰਤਾ ਸਥਾਪਤ ਹੋਣ ਅਤੇ ਸਾਡੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਨੂੰ ਕੋਡਿੰਗ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋਣ ਦੇ ਨਾਲ, ਅਸੀਂ ਹੁਣ ਪਾਰਸਲ ਨੂੰ ਕੌਂਫਿਗਰ ਕਰ ਸਕਦੇ ਹਾਂ ਅਤੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਚਲਾ ਸਕਦੇ ਹਾਂ। ਪਾਰਸਲ ਨੂੰ ਡਿਜ਼ਾਈਨ ਦੁਆਰਾ ਕਿਸੇ ਸੰਰਚਨਾ ਫਾਈਲ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਪਰ ਸਾਨੂੰ ਸਾਡੇ ਸਰਵਰ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇੱਕ npm ਸਕ੍ਰਿਪਟ ਅਤੇ ਇੱਕ HTML ਫਾਈਲ ਦੀ ਲੋੜ ਹੈ।

src/index.htmlਫਾਈਲ ਵਿੱਚ ਭਰੋ . ਪਾਰਸਲ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ ਇੱਕ ਪੰਨੇ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਇਸਲਈ ਅਸੀਂ index.htmlਸਾਡੀਆਂ CSS ਅਤੇ JavaScript ਫਾਈਲਾਂ ਸਮੇਤ ਕੁਝ ਬੁਨਿਆਦੀ HTML ਸੈਟ ਅਪ ਕਰਨ ਲਈ ਆਪਣੇ ਪੰਨੇ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
ਅਸੀਂ ਇੱਥੇ ਥੋੜਾ ਜਿਹਾ ਬੂਟਸਟਰੈਪ ਸਟਾਈਲਿੰਗ ਸ਼ਾਮਲ ਕਰ ਰਹੇ ਹਾਂ div class="container"ਅਤੇ <button>ਇਸ ਲਈ ਅਸੀਂ ਵੇਖ ਸਕਦੇ ਹਾਂ ਕਿ ਜਦੋਂ ਬੂਟਸਟਰੈਪ ਦਾ CSS ਵੈਬਪੈਕ ਦੁਆਰਾ ਲੋਡ ਹੁੰਦਾ ਹੈ।

ਪਾਰਸਲ ਆਪਣੇ ਆਪ ਪਤਾ ਲਗਾ ਲਵੇਗਾ ਕਿ ਅਸੀਂ Sass ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ ਅਤੇ ਇਸਦਾ ਸਮਰਥਨ ਕਰਨ ਲਈ Sass ਪਾਰਸਲ ਪਲੱਗਇਨ ਸਥਾਪਿਤ ਕਰੋ। ਹਾਲਾਂਕਿ, ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੋ, ਤਾਂ ਤੁਸੀਂ ਹੱਥੀਂ ਵੀ ਚਲਾ ਸਕਦੇ ਹੋ npm i --save-dev @parcel/transformer-sass।
ਪਾਰਸਲ npm ਸਕ੍ਰਿਪਟਾਂ ਸ਼ਾਮਲ ਕਰੋ। ਨੂੰ ਖੋਲ੍ਹੋ package.jsonਅਤੇ ਹੇਠ ਦਿੱਤੀ startਸਕ੍ਰਿਪਟ ਨੂੰ scriptsਆਬਜੈਕਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ। ਅਸੀਂ ਆਪਣੇ ਪਾਰਸਲ ਡਿਵੈਲਪਮੈਂਟ ਸਰਵਰ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇਸ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਅਤੇ distਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਕੰਪਾਇਲ ਕੀਤੇ ਜਾਣ ਤੋਂ ਬਾਅਦ ਬਣਾਈ ਗਈ HTML ਫਾਈਲ ਨੂੰ ਰੈਂਡਰ ਕਰਾਂਗੇ।
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
ਅਤੇ ਅੰਤ ਵਿੱਚ, ਅਸੀਂ ਪਾਰਸਲ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹਾਂ। ਆਪਣੇ ਟਰਮੀਨਲ ਵਿੱਚ ਫੋਲਡਰ ਤੋਂ my-project, ਉਸ ਨਵੀਂ ਜੋੜੀ ਗਈ npm ਸਕ੍ਰਿਪਟ ਨੂੰ ਚਲਾਓ:
```
npm start
```

ਇਸ ਗਾਈਡ ਦੇ ਅਗਲੇ ਅਤੇ ਅੰਤਮ ਭਾਗ ਵਿੱਚ, ਅਸੀਂ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਦੇ CSS ਅਤੇ JavaScript ਨੂੰ ਆਯਾਤ ਕਰਾਂਗੇ।

ਬੂਟਸਟਰੈਪ ਆਯਾਤ ਕਰੋ

ਪਾਰਸਲ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਯਾਤ ਕਰਨ ਲਈ ਦੋ ਆਯਾਤ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਇੱਕ ਸਾਡੇ ਵਿੱਚ styles.scssਅਤੇ ਇੱਕ ਸਾਡੇ ਵਿੱਚ main.js।

ਬੂਟਸਟਰੈਪ ਦਾ CSS ਆਯਾਤ ਕਰੋ। src/scss/styles.scssਬੂਟਸਟਰੈਪ ਦੇ ਸਾਰੇ ਸਰੋਤ Sass ਨੂੰ ਆਯਾਤ ਕਰਨ ਲਈ ਹੇਠਾਂ ਸ਼ਾਮਲ ਕਰੋ ।
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੋ ਤਾਂ ਤੁਸੀਂ ਸਾਡੀਆਂ ਸਟਾਈਲਸ਼ੀਟਾਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਵੀ ਆਯਾਤ ਕਰ ਸਕਦੇ ਹੋ। ਵੇਰਵਿਆਂ ਲਈ ਸਾਡੇ Sass ਆਯਾਤ ਦਸਤਾਵੇਜ਼ ਪੜ੍ਹੋ।
ਬੂਟਸਟਰੈਪ ਦਾ JS ਆਯਾਤ ਕਰੋ। src/js/main.jsਸਾਰੇ ਬੂਟਸਟਰੈਪ ਦੇ ਜੇਐਸ ਨੂੰ ਆਯਾਤ ਕਰਨ ਲਈ ਹੇਠਾਂ ਸ਼ਾਮਲ ਕਰੋ । ਪੌਪਰ ਬੂਟਸਟਰੈਪ ਰਾਹੀਂ ਆਪਣੇ ਆਪ ਆਯਾਤ ਕੀਤਾ ਜਾਵੇਗਾ।
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
ਬੰਡਲ ਦੇ ਆਕਾਰ ਨੂੰ ਘੱਟ ਰੱਖਣ ਲਈ ਤੁਸੀਂ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਪਲੱਗਇਨਾਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਵੀ ਆਯਾਤ ਕਰ ਸਕਦੇ ਹੋ:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
ਬੂਟਸਟਰੈਪ ਦੇ ਪਲੱਗਇਨਾਂ ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਇਸ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ ਪੜ੍ਹੋ ।
ਅਤੇ ਤੁਸੀਂ ਪੂਰਾ ਕਰ ਲਿਆ! 🎉 ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ Sass ਅਤੇ JS ਦੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋਣ ਨਾਲ, ਤੁਹਾਡਾ ਸਥਾਨਕ ਵਿਕਾਸ ਸਰਵਰ ਹੁਣ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ।

ਹੁਣ ਤੁਸੀਂ ਕੋਈ ਵੀ ਬੂਟਸਟਰੈਪ ਭਾਗ ਜੋੜਨਾ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਵਾਧੂ ਕਸਟਮ ਸਾਸ ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ ਅਤੇ ਬੂਟਸਟਰੈਪ ਦੇ CSS ਅਤੇ JS ਦੇ ਸਿਰਫ਼ ਉਹਨਾਂ ਹਿੱਸਿਆਂ ਨੂੰ ਆਯਾਤ ਕਰਕੇ ਆਪਣੇ ਬਿਲਡ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਪੂਰੇ ਪਾਰਸਲ ਉਦਾਹਰਨ ਪ੍ਰੋਜੈਕਟ ਦੀ ਜਾਂਚ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ਜਿਸਦੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ।

ਇੱਥੇ ਕੁਝ ਗਲਤ ਜਾਂ ਪੁਰਾਣਾ ਦੇਖਿਆ? ਕਿਰਪਾ ਕਰਕੇ GitHub 'ਤੇ ਕੋਈ ਮੁੱਦਾ ਖੋਲ੍ਹੋ । ਸਮੱਸਿਆ ਨਿਪਟਾਰੇ ਲਈ ਮਦਦ ਦੀ ਲੋੜ ਹੈ? GitHub 'ਤੇ ਖੋਜ ਕਰੋ ਜਾਂ ਚਰਚਾ ਸ਼ੁਰੂ ਕਰੋ ।