Bootstrap & Baakadaha

Hagaha rasmiga ah ee sida loogu daro oo loogu xidho Bootstrap's CSS iyo JavaScript ee mashruucaaga addoo isticmaalaya Parcel.

Boggaan

Ma rabtaa inaad u gudubto ilaa dhamaadka? Ka soo deji koodka isha iyo muujinta shaqada ee hagahan hagaha twbs/tusaaleyaasha kaydka . Waxaad sidoo kale ka furi kartaa tusaalaha gudaha StackBlitz laakiin ma socodsiin kartid sababtoo ah Parcel hadda lagama taageero halkaas.

Dejinta

Waxaan dhiseynaa mashruuc baakad ah oo leh Bootstrap xoqan, marka waxaa jira shuruudo qaar iyo talaabooyinka hore ka hor inta aanan runtii bilaabin. Hagahan waxa uu kaaga baahan yahay in lagu rakibo Node.js iyo in aad taqaanid terminalka.

Samee gal mashruuc oo deji npm. Waxaan abuuri doonaa my-projectfaylka oo aan ku bilowno npm -ydoodda si aan uga fogaano inay na waydiiso dhammaan su'aalaha isdhexgalka.
```
mkdir my-project && cd my-project
npm init -y
```
Ku rakib Parcel Si ka duwan hagahayaga xirmada shabakada, waxaa jira kaliya hal ku tiirsanaanta qalab dhisme halkan. Parcel waxay si toos ah u rakibi doontaa Transformers-ka luqadda (sida Sass) markay ogaadaan iyaga. Waxaan isticmaalnaa --save-devsi aan u muujinno in ku-tiirsanaantani ay tahay kaliya isticmaalka horumarinta ee aysan ahayn wax soo saar.
```
npm i --save-dev parcel
```
Ku rakib Bootstrap Hadda waxaan ku rakibi karnaa Bootstrap. Waxaan sidoo kale ku rakibi doonaa Popper mar haddii hoos u dhigisteena, popovers, iyo qalabyada ay ku xiran yihiin meeleyntooda. Haddii aadan qorsheyneynin inaad isticmaasho qaybahaas, waxaad ka tagi kartaa Popper halkan.
```
npm i --save bootstrap @popperjs/core
```

Hadda oo aan haysano dhammaan ku tiirsanaanta lagama maarmaanka ah ee la rakibay, waxaan heli karnaa shaqada abuurista faylasha mashruuca iyo soo dejinta Bootstrap.

Qaab dhismeedka mashruuca

Horay ayaan u abuurnay my-projectgalka oo aan bilownay npm. Hadda waxaan sidoo kale abuuri doonaa srcgalkeena, qaabka xaashida, iyo faylka JavaScript si aan u dhamaystirno qaab dhismeedka mashruuca. Ka socodsii kuwan soo socda my-project, ama gacanta ku samee galka iyo qaab dhismeedka faylka hoos ka muuqda.

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

Markaad dhammayso, mashruucaaga oo dhammaystiran waa inuu u ekaado sidan:

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

Halkaa marka ay marayso, wax walbaa waxay yaalliin meesha saxda ah, laakiin Parcel waxay u baahan tahay bog HTML ah iyo qoraalka npm si loo bilaabo server-keena.

Habee Baqshadda

Ku-tiirsanaanta la rakibay oo galka mashruuca noo diyaar ah si aan u bilowno koodh-samaynta, hadda waxaan habeyn karnaa Parcel oo aan mashruuceena ku socodsiin karnaa gudaha. Parcel lafteedu uma baahna faylka qaabaynta qaab ahaan, laakiin waxaan u baahanahay qoraal npm ah iyo faylka HTML si aan u bilowno server-keena.

Buuxi src/index.htmlfaylka Parcel waxay u baahan tahay bog si ay u bixiso, marka waxaan isticmaalnaa boggayaga index.htmlsi aan u dejino HTML aasaasiga ah, oo ay ku jiraan faylashayada CSS iyo 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>
```
Waxaan halkan ku soo daraynaa wax yar oo Bootstrap ah oo ay la socdaan div class="container"si <button>aan u aragno marka Bootstrap's CSS ay ku raran tahay Webpack.

Parcel waxay si toos ah u ogaan doontaa inaan isticmaaleyno Sass oo waxay rakibi doontaa furaha Sass Parcel si ay u taageerto. Si kastaba ha noqotee, haddii aad rabto, waxaad sidoo kale ku socodsiin kartaa gacanta npm i --save-dev @parcel/transformer-sass.
Ku dar Parcel npm qoraalada Fur package.jsonoo ku dar startqoraalka soo socda scriptsshayga. Waxaan u isticmaali doonaa qoraalkan si aan u bilowno serferka horumarinta Parcel oo aan u dhiibno faylka HTML ee aan abuurnay ka dib marka lagu daro disthagaha.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ugu dambeyntiina, waxaan bilaabi karnaa Parcel. Laga soo bilaabo my-projectgalka ku yaal terminaalkaaga, socodsii qoraalka npm ee dhowaan lagu daray:
```
npm start
```

Qaybta xigta iyo tan u dambaysa ee hagahan, waxaanu ku soo dejin doonaa dhammaan Bootstrap's CSS iyo JavaScript.

Soo dejinta Bootstrap

Soo dejinta Bootstrap-ka Baakidhku waxay u baahan tahay laba soo dejin, mid innaga styles.scssiyo mid keenna main.js.

Soo deji Bootstrap's CSS Ku dar kuwa soo socda si src/scss/styles.scssaad u soo dejiso dhammaan Bootstrap's isha Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Waxa kale oo aad soo dhoofsan kartaa xaashiyada qaab-dhismeedka shakhsi ahaan haddii aad rabto. Akhri dukumeentiyada soo dejinta Sass wixii faahfaahin ah.
Soo daji Bootstrap's JS. Ku dar kuwa soo socda si src/js/main.jsaad u soo dejiso dhammaan Bootstrap's JS Popper si toos ah ayaa looga soo dejin doonaa Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Waxa kale oo aad soo dejin kartaa plugins JavaScript si gaar ah haddii loo baahdo si loo yareeyo xidhmooyinka xidhmo:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Akhri dokumentiyadayada JavaScript si aad u hesho macluumaad dheeraad ah oo ku saabsan sida loo isticmaalo Bootstrap plugins.
Adiguna waad dhammaatay! 🎉 Iyada oo isha Bootstrap Sass iyo JS si buuxda loo raray, server-ka horumarinta deegaankaagu hadda waa inuu u ekaadaa sidan.

Hadda waxaad bilaabi kartaa inaad ku darto wax kasta oo ka kooban Bootstrap aad rabto inaad isticmaasho. Hubi inaad hubiso mashruuca Tusaalaha Parcel oo dhamaystiran sida loogu daro Sass caado ah oo dheeri ah oo aad u wanaajiso dhismahaaga adigoo soo dejinaya kaliya qaybaha Bootstrap's CSS iyo JS ee aad u baahan tahay.

Halkan ka arag wax khaldan ama dhacay? Fadlan ku fur arrin GitHub . Ma u baahan tahay caawimo cilad-raadinta? Ka raadi ama ka bilow dood GitHub.