පාර්සලය

පාර්සලය භාවිතයෙන් ඔබේ ව්‍යාපෘතියට Bootstrap ඇතුළත් කරන්නේ කෙසේදැයි ඉගෙන ගන්න.

මෙම පිටුවේ

පාර්සලය ස්ථාපනය කරන්න

Bootstrap ස්ථාපනය කරන්න

npm භාවිතයෙන් Bootstrap Node.js මොඩියුලයක් ලෙස ස්ථාපනය කරන්න .

Bootstrap දේපලෙහි නිශ්චිතව දක්වා ඇති පොපර් මත රඳා පවතී . peerDependenciesමෙයින් අදහස් කරන්නේ ඔබ ඒවා දෙකම ඔබේ package.jsonභාවිතයට එක් කිරීමට වග බලා ගත යුතු npm install @popperjs/coreබවයි.

සියල්ල සම්පූර්ණ වූ විට, ඔබේ ව්‍යාපෘතිය මෙලෙස ව්‍යුහගත වනු ඇත:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

JavaScript ආයාත කිරීම

ඔබගේ යෙදුමේ ඇතුල් වීමේ ස්ථානයට Bootstrap හි JavaScript ආයාත කරන්න (සාමාන්‍යයෙන් src/index.js). ඔබට අපගේ සියලුම ප්ලගීන එක් ගොනුවකින් හෝ ඔබට ඒවායේ උප කුලකයක් පමණක් අවශ්‍ය නම් වෙන වෙනම ආයාත කළ හැක.

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

CSS ආයාත කිරීම

Bootstrap හි සම්පූර්ණ විභවය භාවිතා කිරීමට සහ එය ඔබගේ අවශ්‍යතා අනුව අභිරුචිකරණය කිරීමට, ඔබේ ව්‍යාපෘතියේ බද්ධ කිරීමේ ක්‍රියාවලියේ කොටසක් ලෙස මූලාශ්‍ර ගොනු භාවිතා කරන්න.

Bootstrap හි Sass ගොනු ආයාතscss/custom.scss කිරීමට ඔබේම ඒවා සාදන්න , ඉන්පසු සාදන ලද අභිරුචි විචල්‍යයන් අභිබවා යන්න .

යෙදුම සාදන්න

src/index.jsවසා දැමීමේ ටැගයට පෙර ඇතුළත් කරන්න </body>.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

සංස්කරණය කරන්න`package.json`

ඔබගේ ගොනුවේ එකතු කිරීම devසහ buildස්ක්‍රිප්ට් .package.json

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

dev script ධාවනය කරන්න

ඔබගේ යෙදුම වෙත ප්‍රවේශ විය හැක http://127.0.0.1:1234.

npm run dev

යෙදුම් ගොනු සාදන්න

සාදන ලද ගොනු build/ෆෝල්ඩරයේ ඇත.

npm run build

පාර්සලය