Bootstrap & Pasèl

Gid ofisyèl la pou kijan pou mete ak pake CSS Bootstrap ak JavaScript nan pwojè w la lè l sèvi avèk Parcel.

Nan paj sa a

Vle sote nan fen a? Telechaje kòd sous la ak demo k ap travay pou gid sa a nan depo twbs/egzanp yo . Ou kapab tou louvri egzanp lan nan StackBlitz men pa kouri li paske Parcel pa sipòte kounye a la.

Enstalasyon

Nou ap bati yon pwojè Parcel ak Bootstrap depi nan grafouyen, kidonk gen kèk kondisyon anvan ak etap anvan nou ka reyèlman kòmanse. Gid sa a mande pou ou gen Node.js enstale ak kèk abitye ak tèminal la.

Kreye yon katab pwojè ak konfigirasyon npm. Nou pral kreye my-projectkatab la epi inisyalize npm ak -yagiman an pou evite li mande nou tout kesyon entèaktif yo.
```
mkdir my-project && cd my-project
npm init -y
```
Enstale pasèl. Kontrèman ak gid Webpack nou an, gen sèlman yon sèl depandans zouti bati isit la. Pasèl pral otomatikman enstale transfòmatè lang (tankou Sass) pandan li detekte yo. Nou itilize --save-devpou siyal ke depandans sa a se sèlman pou itilizasyon devlopman epi pa pou pwodiksyon.
```
npm i --save-dev parcel
```
Enstale Bootstrap. Koulye a, nou ka enstale Bootstrap. Nou pral enstale Popper tou paske dropdowns, popovers, ak konsèy sou zouti nou yo depann sou li pou pwezante yo. Si ou pa planifye sou itilize eleman sa yo, ou ka omisyon Popper isit la.
```
npm i --save bootstrap @popperjs/core
```

Kounye a ke nou gen tout depandans ki nesesè yo enstale, nou ka jwenn nan travay kreye dosye yo pwojè ak enpòte Bootstrap.

Estrikti pwojè

Nou te deja kreye my-projectkatab la ak inisyalize npm. Koulye a, nou pral tou kreye srcdosye nou an, stylesheet, ak JavaScript fichye awondi estrikti pwojè a. Kouri sa ki annapre yo soti nan my-project, oswa manyèlman kreye katab ak estrikti dosye yo montre anba a.

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

Lè w fini, pwojè konplè ou a ta dwe sanble sa a:

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

Nan pwen sa a, tout bagay an bon plas, men Pasèl bezwen yon paj HTML ak script npm pou kòmanse sèvè nou an.

Konfigirasyon pasèl

Avèk depandans yo enstale ak katab pwojè nou an pare pou nou kòmanse kodaj, nou ka kounye a konfigirasyon Parcel epi kouri pwojè nou an lokalman. Pasèl tèt li pa mande pou okenn fichye konfigirasyon pa konsepsyon, men nou bezwen yon script npm ak yon fichye HTML pou kòmanse sèvè nou an.

Ranpli src/index.htmlfichye a. Pasèl bezwen yon paj pou rann, kidonk nou sèvi ak index.htmlpaj nou an pou mete kèk HTML debaz, ki gen ladan dosye CSS ak JavaScript nou yo.

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

Nou ap enkli yon ti kras nan stil Bootstrap isit la ak la div class="container"ak <button>pou nou wè lè CSS Bootstrap a chaje pa Webpack.

Parcel pral otomatikman detekte n ap itilize Sass epi enstale Plugin Sass Parcel la pou sipòte li. Sepandan, si ou vle, ou ka tou manyèlman kouri npm i --save-dev @parcel/transformer-sass.

Ajoute scripts Parcel npm yo. Louvri a package.jsonepi ajoute startscript sa a nan scriptsobjè a. Nou pral sèvi ak script sa a pou kòmanse sèvè devlopman Parcel nou an epi rann fichye HTML nou te kreye a apre li fin konpile nan distanyè a.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Epi finalman, nou ka kòmanse Parcel. Soti nan my-projectkatab la nan tèminal ou a, kouri sa a ki fèk ajoute script npm:
```
npm start
```

Nan pwochen ak dènye seksyon gid sa a, nou pral enpòte tout CSS ak JavaScript Bootstrap la.

Enpòte Bootstrap

Enpòte Bootstrap nan pasèl mande pou de enpòtasyon, youn nan nou an styles.scssak youn nan nou an main.js.

Enpòte CSS Bootstrap la. Ajoute sa ki annapre yo src/scss/styles.scsspou enpòte tout sous Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ou kapab tou enpòte stylesheets nou yo endividyèlman si ou vle. Li dokiman Sass enpòte nou an pou plis detay.
Enpòte JS Bootstrap la. Ajoute sa ki annapre yo src/js/main.jspou enpòte tout JS Bootstrap la. Popper pral enpòte otomatikman atravè Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Ou ka enpòte grefon JavaScript tou endividyèlman jan sa nesesè pou kenbe gwosè pake yo:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Li dokiman JavaScript nou yo pou plis enfòmasyon sou kijan pou itilize grefon Bootstrap yo.
Epi ou fini! 🎉 Avèk sous Bootstrap Sass ak JS konplètman chaje, sèvè devlopman lokal ou a ta dwe kounye a sanble tankou sa a.

Koulye a, ou ka kòmanse ajoute nenpòt eleman Bootstrap ou vle itilize. Asire ou ke ou tcheke pwojè egzanp lan konplè sou kòman yo enkli plis Sass koutim epi optimize bati ou a lè w enpòte sèlman pati CSS ak JS Bootstrap ou bezwen yo.

Wè yon bagay ki mal oswa demode isit la? Tanpri louvri yon pwoblèm sou GitHub . Bezwen èd pou depanaj? Chèche oswa kòmanse yon diskisyon sou GitHub.