Bootstrap & Pakkie

Die amptelike gids vir hoe om Bootstrap se CSS en JavaScript by jou projek in te sluit en te bundel deur Parcel te gebruik.

Op hierdie bladsy

Wil jy oorslaan tot die einde? Laai die bronkode en werkende demo vir hierdie gids af vanaf die twbs/voorbeelde-bewaarplek . U kan ook die voorbeeld in StackBlitz oopmaak, maar dit nie laat loop nie, want Parcel word nie tans daar ondersteun nie.

Stel op

Ons bou 'n Pakkie-projek van nuuts af met Bootstrap, so daar is 'n paar voorvereistes en vooraf stappe voordat ons regtig kan begin. Hierdie gids vereis dat jy Node.js moet installeer en 'n mate van vertroudheid met die terminale moet hê.

Skep 'n projekgids en stel npm op. Ons sal die my-projectlêergids skep en npm met die -yargument inisialiseer om te verhoed dat dit ons al die interaktiewe vrae vra.
```
mkdir my-project && cd my-project
npm init -y
```
Installeer Pakkie. In teenstelling met ons Webpack-gids, is daar net 'n enkele bou-instrument-afhanklikheid hier. Pakkie sal outomaties taaltransformators (soos Sass) installeer soos dit hulle bespeur. Ons gebruik --save-devom aan te dui dat hierdie afhanklikheid slegs vir ontwikkelingsgebruik is en nie vir produksie nie.
```
npm i --save-dev parcel
```
Installeer Bootstrap. Nou kan ons Bootstrap installeer. Ons sal ook Popper installeer aangesien ons aftreklys, popovers en nutswenke daarvan afhang vir hul posisionering. As jy nie van plan is om daardie komponente te gebruik nie, kan jy Popper hier weglaat.
```
npm i --save bootstrap @popperjs/core
```

Noudat ons al die nodige afhanklikhede geïnstalleer het, kan ons begin om die projeklêers te skep en Bootstrap in te voer.

Projekstruktuur

Ons het reeds die my-projectgids geskep en npm geïnitialiseer. Nou sal ons ook ons srcgids, stylblad en JavaScript-lêer skep om die projekstruktuur af te rond. Begin die volgende vanaf my-project, of skep met die hand die gids- en lêerstruktuur wat hieronder getoon word.

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

Wanneer jy klaar is, behoort jou volledige projek soos volg te lyk:

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

Op hierdie stadium is alles op die regte plek, maar Pakkie benodig 'n HTML-bladsy en npm-skrip om ons bediener te begin.

Stel Pakkie op

Met afhanklikhede geïnstalleer en ons projeklêer gereed vir ons om te begin kodering, kan ons nou Pakkie opstel en ons projek plaaslik laat loop. Pakkie self benodig geen konfigurasielêer volgens ontwerp nie, maar ons benodig 'n npm-skrip en 'n HTML-lêer om ons bediener te begin.

Vul die src/index.htmllêer in. Pakkie het 'n bladsy nodig om weer te gee, so ons gebruik ons index.htmlbladsy om 'n paar basiese HTML op te stel, insluitend ons CSS- en JavaScript-lêers.

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

Ons sluit 'n bietjie Bootstrap-stilering hier in met die div class="container"en <button>sodat ons kan sien wanneer Bootstrap se CSS deur Webpack gelaai word.

Parcel sal outomaties bespeur dat ons Sass gebruik en die Sass Parcel-inprop installeer om dit te ondersteun. As jy egter wil, kan jy ook handmatig hardloop npm i --save-dev @parcel/transformer-sass.

Voeg die Pakkie npm-skrifte by. Maak die oop package.jsonen voeg die volgende startskrif by die scriptsvoorwerp. Ons sal hierdie skrif gebruik om ons Pakkie-ontwikkelingsbediener te begin en die HTML-lêer wat ons geskep het, weer te gee nadat dit in die distgids saamgestel is.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
En uiteindelik kan ons Parcel begin. Voer die nuut bygevoegde npm-skrip uit die my-projectgids in jou terminale uit:
```
npm start
```

In die volgende en laaste afdeling van hierdie gids, sal ons al Bootstrap se CSS en JavaScript invoer.

Voer Bootstrap in

Om Bootstrap in Pakkie in te voer, vereis twee invoere, een in ons styles.scssen een in ons main.js.

Voer Bootstrap se CSS in. Voeg die volgende by src/scss/styles.scssom al Bootstrap se bron Sass in te voer.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Jy kan ook ons stylblaaie individueel invoer as jy wil. Lees ons Sass-invoerdokumente vir besonderhede.
Voer Bootstrap se JS in. Voeg die volgende by src/js/main.jsom al Bootstrap se JS in te voer. Popper sal outomaties deur Bootstrap ingevoer word.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Jy kan ook JavaScript-inproppe individueel invoer soos nodig om bondelgroottes laag te hou:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lees ons JavaScript-dokumente vir meer inligting oor hoe om Bootstrap se inproppe te gebruik.
En jy is klaar! 🎉 Met Bootstrap se bron Sass en JS ten volle gelaai, behoort jou plaaslike ontwikkelingsbediener nou so te lyk.

Nou kan jy begin om enige Bootstrap-komponente by te voeg wat jy wil gebruik. Kyk gerus na die volledige Pakkie-voorbeeldprojek vir hoe om bykomende pasgemaakte Sass in te sluit en jou bouwerk te optimaliseer deur slegs die dele van Bootstrap se CSS en JS in te voer wat jy nodig het.

Sien iets verkeerd of verouderd hier? Maak asseblief 'n probleem oop op GitHub . Het u hulp nodig met die oplos van probleme? Soek of begin 'n bespreking op GitHub.