Bootstrap eta paketea

Parcel erabiliz Bootstrap-en CSS eta JavaScript zure proiektuan sartzeko eta lotzeko gida ofiziala.

Orrialde honetan

Amaierara joan nahi? Deskargatu gida honen iturburu-kodea eta lan-demoa twbs/examples biltegitik . Adibidea StackBlitz-en ere ireki dezakezu , baina ez exekutatu, Parcel ez dagoelako une honetan onartzen.

Konfigurazioa

Bootstrap-ekin Parcel proiektu bat eraikitzen ari gara hutsetik, beraz, aurrebaldintza eta urrats batzuk daude benetan hasi ahal izateko. Gida honek Node.js instalatuta eta terminala nolabait ezagutzea eskatzen du.

Sortu proiektuaren karpeta eta konfiguratu npm. Karpeta sortuko dugu my-projecteta argumentuarekin npm hasieratuko -ydugu galdera interaktibo guztiak ez egiteko.
```
mkdir my-project && cd my-project
npm init -y
```
Instalatu Parcel. Gure Webpack gida ez bezala, hemen eraikitze-tresnaren menpekotasun bakarra dago. Parcel-ek automatikoki instalatuko ditu hizkuntza-eraldaketak (Sass bezalakoak) detektatzen dituen heinean. --save-devMendekotasun hori garapenerako erabilerarako soilik dela adierazten dugu eta ez ekoizpenerako .
```
npm i --save-dev parcel
```
Instalatu Bootstrap. Orain Bootstrap instalatu dezakegu. Popper ere instalatuko dugu, gure goitibehurrak, popover-ak eta tresna-aholkuak kokatzearen araberakoak baitira. Osagai horiek erabiltzeko asmorik ez baduzu, Popper ezaba dezakezu hemen.
```
npm i --save bootstrap @popperjs/core
```

Orain beharrezkoak diren mendekotasun guztiak instalatuta ditugula, proiektuaren fitxategiak sortzen eta Bootstrap inportatzen has gaitezke.

Proiektuaren egitura

my-projectKarpeta sortu eta npm hasieratu dugu dagoeneko . srcOrain gure karpeta, estilo orria eta JavaScript fitxategia ere sortuko ditugu proiektuaren egitura biribiltzeko. Exekutatu hau hemendik my-projectedo sortu eskuz behean agertzen den karpeta eta fitxategi-egitura.

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

Amaitzen duzunean, zure proiektu osoa honelakoa izan beharko litzateke:

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

Une honetan, dena leku egokian dago, baina Parcelek HTML orria eta npm script bat behar ditu gure zerbitzaria abiarazteko.

Konfiguratu paketea

Mendekotasunak instalatuta eta gure proiektuaren karpeta prest kodetzen hasteko, orain Parcel konfiguratu eta gure proiektua lokalean exekutatu dezakegu. Parcel-ek ez du diseinuz konfigurazio fitxategirik behar, baina npm script bat eta HTML fitxategi bat behar ditugu gure zerbitzaria abiarazteko.

Bete src/index.htmlfitxategia. Parcel-ek orrialde bat behar du errendatzeko, beraz, gure index.htmlorria erabiltzen dugu oinarrizko HTML batzuk konfiguratzeko, gure CSS eta JavaScript fitxategiak barne.
```
<!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>
```
Bootstrap estiloaren apur bat sartzen ari gara hemen div class="container"eta , <button>beraz, Bootstrap-en CSS Webpack-ek noiz kargatzen duen ikus dezagun.

Parcel-ek automatikoki detektatuko du Sass erabiltzen ari garela eta Sass Parcel plugina instalatuko du hura laguntzeko. Hala ere, nahi baduzu, eskuz ere exekutatu dezakezu npm i --save-dev @parcel/transformer-sass.
Gehitu Parcel npm scriptak. Ireki package.jsoneta gehitu startscript hau scriptsobjektuari. distScript hau erabiliko dugu Parcel garapen zerbitzaria abiarazteko eta sortu dugun HTML fitxategia direktorioan konpilatu ondoren errendatzeko .
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Eta, azkenik, Parcel hasi dezakegu. Zure terminaleko my-projectkarpetatik, exekutatu gehitu berri den npm script hori:
```
npm start
```

Gida honen hurrengo eta azken atalean, Bootstrap-en CSS eta JavaScript guztiak inportatuko ditugu.

Inportatu Bootstrap

Bootstrap Parcel-era inportatzeko bi inportazio behar dira, bat gurera styles.scsseta bestea gurera main.js.

Inportatu Bootstrap-en CSS. Gehitu honako hau src/scss/styles.scssBootstrap-en Sass iturburu guztia inportatzeko.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Nahi izanez gero, gure estilo-orriak banaka inporta ditzakezu. Irakurri gure Sass inportazio dokumentuak xehetasunetarako.
Inportatu Bootstrap-en JS. Gehitu honako hau src/js/main.jsBootstrap-en JS guztiak inportatzeko. Popper automatikoki inportatuko da Bootstrap bidez.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
JavaScript pluginak ere inporta ditzakezu banan-banan, behar izanez gero, sorta-tamainak txikiagotzeko:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Irakurri gure JavaScript dokumentuak Bootstrap-en pluginak nola erabiltzeari buruzko informazio gehiago lortzeko.
Eta listo! 🎉 Bootstrap-en Sass eta JS iturburua guztiz kargatuta dagoenez, zure tokiko garapen zerbitzariak honela izango luke orain.

Orain erabili nahi dituzun Bootstrap osagaiak gehitzen has zaitezke. Ziurtatu Parcel adibideko proiektu osoa ikusteko Sass pertsonalizatu osagarriak nola sartu eta zure eraikuntza optimizatu behar dituzun Bootstrap-en CSS eta JS zatiak soilik inportatuz.

Zerbait gaizki edo zaharkitua ikusten duzu hemen? Mesedez , ireki arazo bat GitHub-en . Laguntza behar duzu arazoak konpontzeko? Bilatu edo hasi eztabaida bat GitHub-en.