Bootstrap & Ekipapula ky'ebintu

Ekitabo ekitongole eky'engeri y'okussaamu n'okugatta CSS ne JavaScript za Bootstrap mu pulojekiti yo ng'okozesa Parcel.

Ku muko guno

Oyagala okubuuka okutuuka ku nkomerero? Wano wefunire source code ne demo ekola ku guide eno okuva mu twbs/examples repository . Osobola n'okuggulawo ekyokulabirako mu StackBlitz naye nga tokiddukanya kubanga Parcel mu kiseera kino tewagirwa eyo.

Okutandika

Tuzimba pulojekiti ya Parcel ne Bootstrap okuva ku ntandikwa, kale waliwo ebyetaagisa n'emitendera egy'omu maaso nga tetunnatandika ddala. Ekitabo kino kyetaaga okuba ne Node.js etekeddwako n’okumanyiira okutonotono ku terminal.

Tonda ekitabo kya pulojekiti era oteekewo npm. Tujja kukola my-projectfolder era tutandike npm -yn'ensonga okwewala okutubuuza ebibuuzo byonna ebikwatagana.
```
mkdir my-project && cd my-project
npm init -y
```
Teekamu Parcel. Okwawukana ku kitabo kyaffe ekya Webpack, waliwo okwesigamizibwa kw'ekintu kimu kyokka eky'okuzimba wano. Parcel ejja kuteeka automatic transformers (nga Sass) nga bwezizuula. Tukozesa --save-devokulaga nti okwesigamizibwa kuno kwa kukozesa nkulaakulana yokka so si kufulumya.
```
npm i --save-dev parcel
```
Teeka mu nkola ya Bootstrap. Kati tusobola okuteeka Bootstrap. Tujja kuteeka ne Popper okuva dropdowns zaffe, popovers, ne tooltips bwe zisinziira ku yo ku positioning yaabwe. Bw’oba toteekateeka kukozesa bitundu ebyo, osobola okulekayo Popper wano.
```
npm i --save bootstrap @popperjs/core
```

Kati nga bwetulina dependencies zonna ezeetaagisa eziteekeddwawo, tusobola okutandika okukola nga tukola fayiro za pulojekiti n’okuyingiza Bootstrap.

Ensengeka ya pulojekiti

Twakola dda my-projectfolda ne tutandika npm. Kati era tujja kukola srcfolda yaffe, stylesheet, ne fayiro ya JavaScript okuzingulula ensengeka ya pulojekiti. Dduka bino wammanga okuva mu my-project, oba tonda mu ngalo ekitabo n'ensengeka ya fayiro eragiddwa wansi.

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

Bw’omala, pulojekiti yo enzijuvu erina okufaanana bweti:

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

Mu kiseera kino, buli kimu kiri mu kifo ekituufu, naye Parcel yeetaaga omuko gwa HTML ne npm script okutandika server yaffe.

Tegeka Parcel

Nga dependencies ziteekeddwawo era nga project folder yaffe yeetegefu okutandika okukola coding, kati tusobola okutegeka Parcel ne tuddukanya project yaffe mu kitundu. Parcel yennyini tekyetaagisa fayiro ya kusengeka okusinziira ku dizayini, naye twetaaga script ya npm ne fayiro ya HTML okutandika seva yaffe.

Jjuzaamu src/index.htmlfayiro. Parcel yeetaaga omuko okulaga, kale tukozesa index.htmlomuko gwaffe okuteekawo HTML ezimu enkulu, omuli fayiro zaffe eza CSS ne JavaScript.

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

Tussaamu akatono ku Bootstrap styling wano ne the div class="container"ne <button>tulabe nga Bootstrap's CSS etikkibwa Webpack.

Parcel ejja kuzuula otomatika nti tukozesa Sass era eteekewo plugin ya Sass Parcel okugiwagira. Kyokka bw’oba oyagala, osobola n’okuddukanya mu ngalo npm i --save-dev @parcel/transformer-sass.

Okwongerako ebiwandiiko bya Parcel npm. Ggulawo era osseeko script package.jsoneno wammanga ku kintu. Tujja kukozesa script eno okutandika seva yaffe ey’okukulaakulanya Parcel n’okulaga fayiro ya HTML gye twakola oluvannyuma lw’okukuŋŋaanyizibwa mu dayirekita.startscriptsdist
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Era ekisembayo, tusobola okutandika Parcel. Okuva mu my-projectfolda mu terminal yo, dduka script eyo eya npm eyaakayongerwako:
```
npm start
```

Mu kitundu ekiddako era ekisembayo mu kitabo kino, tujja kuyingiza CSS ne JavaScript zonna eza Bootstrap.

Okuyingiza Bootstrap

Okuyingiza Bootstrap mu Parcel kyetaagisa okuyingiza emirundi ebiri, emu mu yaffe styles.scssate endala mu yaffe main.js.

Yingiza CSS ya Bootstrap. Okwongerako bino wammanga ku src/scss/styles.scssokuyingiza byonna ebya Bootstrap's source Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Osobola n’okuyingiza sitayiro zaffe kinnoomu bw’oba oyagala. Soma Sass import docs zaffe okumanya ebisingawo.
Yingiza JS ya Bootstrap. Okwongerako bino wammanga ku src/js/main.jsokuyingiza JS zonna eza Bootstrap. Popper ejja kuyingizibwa mu ngeri ey’otoma ng’eyita mu Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Osobola n'okuyingiza JavaScript plugins kinnoomu nga bwe kyetaagisa okukuuma obunene bwa bundle wansi:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Soma ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo ku ngeri y'okukozesaamu plugins za Bootstrap.
Era omaze! 🎉 Nga ensibuko ya Bootstrap Sass ne JS zitikkiddwa mu bujjuvu, seva yo ey'enkulaakulana ey'omu kitundu kati erina okufaanana bweti.

Kati osobola okutandika okwongerako ebitundu bya Bootstrap byonna by’oyagala okukozesa. Kakasa nti okebera pulojekiti y'ekyokulabirako kya Parcel enzijuvu engeri y'okussaamu Sass ey'enjawulo ey'enjawulo n'okulongoosa okuzimba kwo ng'oyingiza ebitundu byokka ebya Bootstrap's CSS ne JS by'olina.

Olaba ekintu ekikyamu oba ekivudde ku mulembe wano? Nsaba oggulewo ensonga ku GitHub . Oyagala buyambi okugonjoola ebizibu? Noonya oba tandika okukubaganya ebirowoozo ku GitHub.