बूटस्ट्रॅप आनी व्हायट

Vite वापरून तुमच्या प्रकल्पांत Bootstrap चो CSS आनी JavaScript कसो आस्पाव करचो आनी बंडल करचो हाचे खातीर अधिकृत मार्गदर्शक.

ह्या पानाचेर

शेवटाक वचपाक जाय? ह्या मार्गदर्शका खातीर स्त्रोत कोड आनी काम करपी डेमो twbs/examples रिपॉझिटरींतल्यान डावनलोड करात . तुमी लायव्ह संपादना खातीर StackBlitz तय उदाहरण उगडूंक शकतात.

स्थापना

आमी Bootstrap कडेन सुरवाती सावन Vite प्रकल्प तयार करतात, देखून आमी खऱ्यांनीच सुरू करचे पयलीं कांय पूर्वगरज आनी मुखार पावलां आसात. ह्या मार्गदर्शकांत तुमकां Node.js प्रतिष्ठापीत आसपाक जाय आनी टर्मिनला कडेन कांय परिचिती आसपाक जाय.

एक प्रकल्प फोल्डर तयार करात आनी npm सेटअप करात. आमी फोल्डर तयार करतले आनी npm आमकां सगळे परस्पर प्रस्न विचारचे न्हय म्हूण आर्ग्युमेंटान my-projectआरंभ करतले.-y
```
mkdir my-project && cd my-project
npm init -y
```
Vite स्थापन करचें. आमच्या वेबपॅक मार्गदर्शका परस वेगळें, हांगा फकत एकूच बिल्ड साधन अवलंबन आसा. --save-devही अवलंबन फकत उदरगतीच्या वापरा खातीर आसा आनी उत्पादन खातीर न्हय असो संकेत दिवपाक आमी वापरतात .
```
npm i --save-dev vite
```
बूटस्ट्रॅप स्थापन करचें. आतां आमी Bootstrap स्थापन करूंक शकतात. आमचे ड्रॉपडावन, पॉपओव्हर, आनी टूलटिप्स तांच्या स्थिती खातीर ताचेर आदारून आशिल्ल्यान आमी Popper लेगीत स्थापीत करतले. तुमी ते घटक वापरपाची येवजण करूंक ना जाल्यार, तुमी हांगा पॉपर वगळूंक शकतात.
```
npm i --save bootstrap @popperjs/core
```
अतिरिक्त अवलंबन स्थापन करचें. Vite आनी Bootstrap व्यतिरिक्त, Bootstrap चो CSS योग्य रितीन आयात करपाक आनी बंडल करपाक आमकां आनीक एक अवलंबन (Sass) जाय.
```
npm i --save-dev sass
```

आतां आमकां सगळ्यो गरजेच्यो अवलंबन स्थापीत आनी सेटअप केल्यात, आमी प्रकल्प फायली तयार करप आनी बूटस्ट्रॅप आयात करप कामाक सुरवात करूंक शकतात.

प्रकल्पाची रचना

आमी पयलींच my-projectफोल्डर तयार केलां आनी npm सुरू केलां. आतां आमी आमचें srcफोल्डर, स्टायलशीट, आनी जावास्क्रिप्ट फायलय तयार करतले प्रकल्पाची रचणूक गोल करपाक. पासून सकयल दिल्लें चालीक लावचें my-project, वा सकयल दाखयल्लें फोल्डर आनी फायल रचणूक हाताळणीन तयार करात.

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

जेन्ना तुमी पुराय जातले, तुमचो पुराय प्रकल्प असो दिसपाक जाय:

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

ह्या वेळार सगळें योग्य सुवातेर आसा, पूण विटे काम करचें ना कारण आमी आमचें vite.config.jsअजून भरूंक ना.

Vite संरचीत करचें

अवलंबन स्थापीत केल्या उपरांत आनी आमकां कोडिंग सुरू करपाक आमचें प्रकल्प फोल्डर तयार आशिल्ल्यान, आमी आतां Vite संरचीत करूंक शकतात आनी आमचो प्रकल्प थळाव्यान चालीक लावंक शकतात.

तुमच्या संपादकांत उगडात vite.config.js. तो रिकामे आशिल्ल्यान, आमी आमचो सर्वर सुरू करूंक शकतले म्हणून तातूंत कांय बॉयलरप्लेट कॉन्फिग जोडची पडटली. कॉन्फिगरीचो हो भाग Vite सांगता की आमच्या प्रकल्पाची जावास्क्रिप्ट सोदची आशिल्ली आनी विकास सर्वर कसो वागपाक जाय ( srcगर्म रिलोडा वांगडा फोल्डरा वयल्यान ओडून).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
फुडें आमी भरतात src/index.html. बंडल केल्ल्या CSS आनी JS वापरपाक Vite ब्राउझरांत लोड करतले तें HTML पान आमी फुडल्या पांवड्यानी तातूंत जोडटले.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>
```
आमी हांगा Bootstrap स्टायलिंगाचें थोडें समाविष्ट केलां div class="container"आनी <button>ताका लागून आमी पळयतात की Bootstrap चें CSS Vite कडल्यान केन्ना लोड जाता.
आतां Vite चालीक लावपाक आमकां npm स्क्रिप्ट जाय. सकयल दाखयल्ली स्क्रिप्ट उगडात package.jsonआनी जोडात start(तुमचे कडेन पयलींच चांचणी स्क्रिप्ट आसपाक जाय). आमचो थळावो Vite dev सर्वर सुरू करपाक आमी ही स्क्रिप्ट वापरतले.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
आनी निमाणें आमी विटे सुरू करूंक शकतात. तुमच्या टर्मिनलांतल्या फोल्डरा वयल्यान my-project, ती नव्यान जोडिल्ली npm स्क्रिप्ट चालीक लावची:
```
npm start
```

ह्या मार्गदर्शकाच्या फुडल्या आनी निमाण्या विभागांत, आमी Bootstrap ची सगळी CSS आनी JavaScript आयात करतले.

बूटस्ट्रॅप आयात करचें

Bootstrap ची Sass आयात सेट करात vite.config.js. तुमची संरचना फायल आतां पुराय जाल्या आनी सकयल दिल्ल्या स्निपेटाक जुळपाक जाय. हांगा एकूच नवो भाग म्हणल्यार विभाग- आयात शक्य तितली सोपी दवरपाक resolveभितरल्या आमच्या स्त्रोत फायलींनी उपनाव जोडपाक आमी हाचो वापर करतात .node_modules
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
आतां, बूटस्ट्रॅपाचो CSS आयात करूंया. src/scss/styles.scssBootstrap च्या सगळ्या स्रोत Sass आयात करपाक सकयल दिल्लें जोडात .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
तुमकां जाय जाल्यार तुमी आमचीं स्टायलशीट वैयक्तीकपणानय आयात करूंक शकतात. तपशीलां खातीर आमचे Sass आयात डॉक्स वाचात .
फुडें आमी CSS लोड करतात आनी Bootstrap ची JavaScript आयात करतात. src/js/main.jsCSS लोड करपाक आनी Bootstrap च्या सगळ्या JS आयात करपाक सकयल दिल्लें जोडात . बूटस्ट्रॅपा वरवीं पॉपर आपोआप आयात जातलें.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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';
```
Bootstrap च्या प्लगइन कशे वापरचे हाचे विशीं चड म्हायती खातीर आमचे JavaScript डॉक्स वाचात .
आनी तुमी पुराय जाल्यात! 🎉 Bootstrap चो स्रोत Sass आनी JS पुरायपणान लोड जाल्ल्यान, तुमचो थळावो विकास सर्वर आतां असो दिसपाक जाय.

आतां तुमकां वापरपाक जाय आशिल्ले खंयचेय Bootstrap घटक जोडपाक सुरवात करूं येता. तुमकां जाय आशिल्ले फकत Bootstrap च्या CSS आनी JS च्या भाग आयात करून अतिरिक्त सानुकूल Sass कसो समाविष्ट करचो आनी तुमचो बिल्ड अनुकूल करचो हाचे खातीर पुराय Vite उदाहरण प्रकल्प पळोवपाची खात्री करात .

हांगा कितें तरी चुकीचें वा काळांतरान गेल्लें दिसता? उपकार करून GitHub चेर एक मुद्दो उगडात . समस्या निवारण करपाक मदत जाय? GitHub चेर सोद घेयात वा चर्चा सुरू करात.