Ботстрап һәм посылка

Посылка ярдәмендә Bootstrap'ның CSS һәм JavaScript'ны ничек кертергә һәм бәйләргә рәсми кулланма.

Бу биттә

Ахырына атларга телисезме? Twbs / мисаллар репозиториясеннән чыганак коды һәм бу кулланма өчен эш демо йөкләү . Сез шулай ук StackBlitz'та мисалны ача аласыз, ләкин аны эшләтмисез, чөнки Посылка хәзерге вакытта анда булмый.

Кору

Без Bootstrap белән Посылка проектын баштан ук төзибез, шуңа күрә без башлар алдыннан кайбер шартлар һәм алгы адымнар бар. Бу кулланма сезгә Node.js урнаштыруны һәм терминал белән танышуны таләп итә.

Проект папкасын төзегез һәм npm урнаштырыгыз. Без папканы ясарбыз һәм барлык интерактив сораулар my-projectбирмәс өчен аргумент белән npm башлыйбыз .-y
```
mkdir my-project && cd my-project
npm init -y
```
Посылка урнаштырыгыз. Веб-пакет кулланмадан аермалы буларак, монда бер генә коралга бәйләнеш бар. Посылка автоматик рәвештә тел трансформаторларын урнаштырачак (Сасс кебек), аларны ачыклагач. Без --save-devбу бәйләнеш җитештерү өчен түгел, ә үсеш өчен кулланыла дип сигнал бирәбез.
```
npm i --save-dev parcel
```
Bootstrap урнаштырыгыз. Хәзер без Bootstrap урнаштыра алабыз. Без шулай ук Попперны урнаштырачакбыз, чөнки безнең тамчылар, поповерлар, кораллар аларның урнашуы өчен аңа бәйле. Әгәр дә сез бу компонентларны кулланырга уйламасагыз, монда Попперны калдыра аласыз.
```
npm i --save bootstrap @popperjs/core
```

Хәзер бездә барлык кирәкле бәйләнешләр урнаштырылганнан соң, без проект файлларын ясау һәм Bootstrap импортлау эшенә керә алабыз.

Проект структурасы

Без my-projectпапканы ясадык һәм npm башлап җибәрдек. Хәзер без srcпроект структурасын әйләндерү өчен безнең папка, стиль таблицасы һәм JavaScript файлын ясарбыз. Түбәндәгеләрне эшләгез my-project, яки аста күрсәтелгән папка һәм файл структурасын кул белән ясагыз.

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

Тәмамлангач, сезнең тулы проектыгыз шундый булырга тиеш:

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

Бу вакытта барысы да тиешле урында, ләкин безнең серверны башлау өчен Посылкага HTML бите һәм npm скрипты кирәк.

Посылканы конфигурацияләгез

Бәйләнешләр урнаштырылган һәм безнең проект папкасы кодлаштыруны башларга әзер булганда, без хәзер Посылканы конфигурацияли алабыз һәм проектны җирле итеп эшли алабыз. Посылка үзе дизайн буенча конфигурация файлын таләп итми, ләкин серверны башлау өчен безгә npm скрипты һәм HTML файл кирәк.

src/index.htmlФайлны тутырыгыз . Посылка тәрҗемә итү өчен бит кирәк, шуңа күрә без index.htmlCSS һәм JavaScript файлларыбызны кертеп, төп HTML урнаштыру өчен битебезне кулланабыз.
```
<!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 стилизациясен кертәбез, div class="container"һәм <button>Bootstrap CSS-ның Веб-пакет белән йөкләнгәнен күрербез.

Посылка безнең Sass кулланганыбызны автоматик рәвештә ачыклаячак һәм Sass Parcel плагинын урнаштырачак . Ләкин, теләсәгез, сез дә кул белән йөгерә аласыз npm i --save-dev @parcel/transformer-sass.
Посылка npm сценарийларын өстәгез. Ачыгыз һәм объектка package.jsonтүбәндәге startсценарийны өстәгез . scriptsБу скриптны без үзебезнең Посылка үсеш серверын башлар өчен һәм без ясаган HTML файлын distкаталогка тупланганнан соң кулланырбыз.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Finallyәм, ниһаять, без Посылканы башлый алабыз. Сезнең my-projectтерминалдагы папкадан яңа кушылган npm скриптын эшләгез:
```
npm start
```

Бу кулланманың киләсе һәм соңгы бүлегендә без Bootstrap'ның барлык CSS һәм JavaScript импортлаячакбыз.

Ботстрапны импортлау

Посылкага Bootstrap кертү ике импорт таләп итә, берсе безнең styles.scss, икенчесе безнеке main.js.

Bootstrap's CSS импортлау. src/scss/styles.scssBootstrap чыганагы Sass-ны импортлау өчен түбәндәгеләрне өстәгез .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Сез теләсәгез, безнең стиль таблицаларын аерым кертә аласыз. Детальләр өчен безнең Sass импорт документларын укыгыз .
Bootstrap's JS импортлау. src/js/main.jsBootstrap-ның барлык JS-ны импортлау өчен түбәндәгеләрне өстәгез . Поппер Bootstrap аша автоматик рәвештә кертеләчәк.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Сез шулай ук JavaScript плагиннарын индивидуаль кертә аласыз, туплау күләмнәрен түбәндә тоту өчен:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bootstrap плагиннарын ничек куллану турында күбрәк мәгълүмат алу өчен безнең JavaScript документларыбызны укыгыз .
Син эшләдең! Bo Bootstrap чыганагы Sass һәм JS тулысынча йөкләнгән, сезнең җирле үсеш серверы хәзер шулай булырга тиеш.

Хәзер сез кулланырга теләгән Bootstrap компонентларын өсти башлый аласыз. Өстәмә махсус Sass кертү һәм Bootstrap'ның CSS һәм JS өлешләрен генә кертеп, сезнең бинаны оптимальләштерү өчен тулы Посылка үрнәге проектын карагыз .

Монда дөрес булмаган яки искергән нәрсәне карагыз? Зинһар , GitHub'та проблема ачыгыз . Проблемаларны чишүдә ярдәм кирәкме? GitHub'та эзләү яки дискуссия башлау .