Bootstrap & Beartán

An treoir oifigiúil maidir le conas CSS agus JavaScript Bootstrap a áireamh agus a chuachadh i do thionscadal ag baint úsáide as Beartán.

Ar an leathanach seo

Want a skip go dtí an deireadh? Íoslódáil an cód foinse agus an taispeántas oibre don treoir seo ón stór twbs/samplaí . Is féidir leat an sampla a oscailt in StackBlitz freisin ach gan é a rith toisc nach dtacaítear le Beartán ann faoi láthair.

Socrú

Táimid ag tógáil tionscadal beartán le Bootstrap ón tús, mar sin tá roinnt réamhriachtanais agus céimeanna tosaigh sular féidir linn tosú i ndáiríre. Éilíonn an treoir seo go bhfuil Node.js suiteáilte agat agus cur amach éigin ar an teirminéal.

Cruthaigh fillteán tionscadail agus cumraigh npm. Cruthóimid an my-projectfillteán agus cuirfimid npm i dtosach leis an -yargóint chun é a sheachaint ag cur na gceisteanna idirghníomhacha orainn go léir.
```
mkdir my-project && cd my-project
npm init -y
```
Suiteáil Beartán. Murab ionann agus ár dtreoir Webpack, níl ach spleáchas uirlis tógála amháin anseo. Déanfaidh beartán trasfhoirmeoirí teanga (cosúil le Sass) a shuiteáil go huathoibríoch de réir mar a bhraitheann sé iad. Bainimid úsáid as --save-deva chur in iúl nach bhfuil an spleáchas seo ach le haghaidh úsáide forbartha agus ní le haghaidh táirgeadh.
```
npm i --save-dev parcel
```
Suiteáil Bootstrap. Anois is féidir linn Bootstrap a shuiteáil. Déanfaimid Popper a shuiteáil freisin ós rud é go mbraitheann ár gcuid dropdowns, popovers, agus leideanna uirlisí air chun iad a shuíomh. Mura bhfuil sé beartaithe agat na comhpháirteanna sin a úsáid, is féidir Popper a fhágáil ar lár anseo.
```
npm i --save bootstrap @popperjs/core
```

Anois go bhfuil na spleáchais riachtanacha go léir suiteáilte againn, is féidir linn dul i mbun oibre ag cruthú na gcomhad tionscadail agus ag iompórtáil Bootstrap.

Struchtúr an tionscadail

Chruthaigheamar an my-projectfillteán cheana féin agus chuireamar tús leis npm. Anois cruthóimid ár srcbhfillteán, ár stílbhileog, agus ár gcomhad JavaScript freisin chun struchtúr an tionscadail a shlánú. Rith an méid seo a leanas ó my-project, nó cruthaigh an fillteán agus an struchtúr comhaid a thaispeántar thíos de láimh.

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

Nuair a bheidh tú críochnaithe, ba cheart go mbeadh cuma mar seo ar do thionscadal iomlán:

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

Ag an bpointe seo, tá gach rud san áit cheart, ach tá leathanach HTML agus script npm ag teastáil ó Parsel chun ár bhfreastalaí a thosú.

Cumraigh Dáileacht

Le spleáchais suiteáilte agus ár bhfillteán tionscadail réidh chun códú a thosú, is féidir linn beartán a chumrú anois agus ár dtionscadal a reáchtáil go háitiúil. Níl aon chomhad cumraíochta ag teastáil ón mbeartán féin de réir dearadh, ach teastaíonn script npm agus comhad HTML uainn chun ár bhfreastalaí a thosú.

Líon isteach an src/index.htmlcomhad. Teastaíonn leathanach le haghaidh beartán, mar sin úsáidimid ár index.htmlleathanach chun roinnt HTML bunúsacha a shocrú, lena n-áirítear ár gcomhaid CSS agus 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>
```
Táimid ag áireamh beagán de stíliú Bootstrap anseo leis an div class="container"agus <button>ionas go bhfeicfimid nuair a bheidh CSS Bootstrap luchtaithe ag Webpack.

Braithfidh beartán go huathoibríoch go bhfuil Sass in úsáid againn agus suiteálfaidh sé an breiseán Sass Parcel chun tacú leis. Más mian leat, áfach, is féidir leat npm i --save-dev @parcel/transformer-sass.
Cuir scripteanna beartán npm leis. Oscail an package.jsonagus cuir an startscript seo a leanas leis an scriptsréad. Úsáidfimid an script seo chun ár bhfreastalaí forbartha beartán a thosú agus chun an comhad HTML a chruthaigh muid a sholáthar tar éis é a chur le chéile san disteolaire.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Agus ar deireadh, is féidir linn tús a chur le Beartán. Ón my-projectfhillteán i do chríochfort, rith an script npm nua-chur leis:
```
npm start
```

Sa chéad chuid eile agus sa chuid dheireanach den treoir seo, iompórtálfaimid CSS agus JavaScript Bootstrap ar fad.

Iompórtáil Bootstrap

Teastaíonn dhá allmhairiú chun Bootstrap a allmhairiú isteach, ceann isteach inár n-iompórtáil styles.scssagus ceann isteach inár n- iompórtáil main.js.

Íosluchtaigh CSS Bootstrap. Cuir an méid seo a leanas leis src/scss/styles.scsschun foinse Bootstrap go léir a allmhairiú Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Is féidir leat freisin ár stílbhileoga a allmhairiú ina n-aonar más mian leat. Léigh ár ndoiciméid allmhairiú Sass le haghaidh sonraí.
Iompórtáil Bootstrap JS. Cuir an méid seo a leanas leis src/js/main.jschun JS Bootstrap ar fad a allmhairiú. Déanfar Popper a allmhairiú go huathoibríoch trí Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Is féidir leat freisin forlíontáin JavaScript a iompórtáil ina n-aonar de réir mar is gá chun méideanna cuachta a choinneáil síos:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Léigh ár ndoiciméid JavaScript le haghaidh tuilleadh eolais ar conas forlíontáin Bootstrap a úsáid.
Agus tá tú críochnaithe! 🎉 Agus foinse Bootstrap Sass agus JS lódáilte go hiomlán, ba cheart go mbeadh cuma mar seo ar do fhreastalaí forbartha áitiúil anois.

Anois is féidir leat tosú ag cur aon chomhpháirteanna Bootstrap is mian leat a úsáid. Bí cinnte an tionscadal samplach beartán iomlán a sheiceáil le haghaidh conas Sass saincheaptha breise a chur san áireamh agus do thógáil a bharrfheabhsú trí na codanna de CSS agus JS Bootstrap amháin atá uait a iompórtáil.

Féach ar rud éigin mícheart nó as dáta anseo? Oscail ceist ar GitHub le do thoil . Cabhair uait le fabhtcheartú? Cuardaigh nó cuir tús le plé ar GitHub.