Partzela

Ikasi Bootstrap zure proiektuan sartzen Parcel erabiliz.

Orrialde honetan

Instalatu Parcel

Instalatu Bootstrap

Instalatu bootstrap Node.js modulu gisa npm erabiliz.

Bootstrap Popperren araberakoa da, jabetzan zehaztuta dagoena peerDependencies. Horrek esan nahi du biak gehitzen dituzula zure package.jsonerabileran ziurtatu beharko duzula npm install @popperjs/core.

Guztia amaitutakoan, zure proiektua honela egituratuko da:

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

JavaScript inportatzen

Inportatu Bootstrap-en JavaScript zure aplikazioaren sarrera puntuan (normalean src/index.js). Gure plugin guztiak fitxategi bakarrean edo bereizita inporta ditzakezu haien azpimultzo bat bakarrik behar baduzu.

// 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 inportatzen

Bootstrap-en potentzial osoa erabiltzeko eta zure beharretara pertsonalizatzeko, erabili iturburu-fitxategiak zure proiektuaren multzokatze-prozesuaren zati gisa.

Sortu zurea Bootstrap-en Sass scss/custom.scssfitxategiak inportatzeko eta, ondoren, aldagai pertsonalizatuak gainidazteko .

Eraiki aplikazioa

Sartu src/index.jsitxiera </body>etiketa baino lehen.

<!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>

Editatu`package.json`

Gehitu deveta buildscriptak zure package.jsonfitxategian.

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

Exekutatu dev scripta

Zure aplikazioa helbidean egongo da eskuragarri http://127.0.0.1:1234.

npm run dev

Eraiki aplikazio fitxategiak

Eraikitako fitxategiak build/karpetan daude.

npm run build