Correa de Botas & Paquete

Kay oficial pusaq imayna Bootstrap kaqpa CSS chaymanta JavaScript ruwanaykipi Parcel kaqwan churanapaq chaymanta huñunapaq.

Kay p'anqapi

¿Tukuykama saltayta munankichu? Kay yanapakuypaq pukyuta chaymanta llamkana demota twbs/ejemplos waqaychasqamanta uraykachiy . StackBlitz kaqpipas ejemplota kichayta atikunki ichaqa mana purichiychu imaraykuchus Parcel mana kunan chaypi yanapasqachu.

Tupachiy

Huk Parcel proyecto Bootstrap kaqwan zero kaqmanta ruwachkayku, chayrayku wakin ñawpaq requisitos chaymanta ñawpaq llamkanakuna kanku manaraq chiqamanta qallariyta atichkayku. Kay yanapakuyqa Node.js churasqayuq kanaykita munan chaymanta wakin riqsisqa terminal kaqwan.

Crea una carpeta de proyecto y configurar npm. Carpeta ruwasaqku my-projectchaymanta npm -yargumentowan qallarisaqku mana llapa interactivo tapuykunata tapuwananchikpaq.
```
mkdir my-project && cd my-project
npm init -y
```
Instalar Paquete. Mana Webpack pusaqniyku hinachu, kaypi huklla ruwana yanapakuypa hapipakuynin kan. Parcel kikinmanta simi tikraqkunata churanqa (Sass hina) chayta tarisqanmanhina. Utilizamos --save-devseñalar que esta dependencia es solamente para uso de desarrollo y no para la producción.
```
npm i --save-dev parcel
```
Bootstrap nisqa churay. Kunanqa Bootstrap nisqatam churachwan. Poppertapas churasaqku chaymanta urayk'aqniyku, popoversniyku, chaymanta yanapakuyniyku chaymanta chaymanta posiciónninkupaq hapirinku. Sichus mana chay componentekuna llamk'achiyta yuyankichu, kaypi Popperta saqiyta atinki.
```
npm i --save bootstrap @popperjs/core
```

Kunanqa llapa necesario dependenciakuna churasqa kayku, llamk'ayman chayayta atiykuman proyecto willakuykunata ruwaspa chaymanta Bootstrap apamuspa.

Estructura del proyecto

Ñam chay my-projectqillqana mayt'uta ruwarqaykuña hinaspa npm nisqatapas qallarirqaykuña. Kunanqa ruwasaqkutaqmi srcqillqana mayt'uykutapas, estilo raphiykutapas, JavaScript willañiqiykutapas, proyectopa ruwayninta muyurichinapaq. Kayta purichiy my-project, utaq makiwan ruway qillqana mayt'uta chaymanta willañiqi estructurata uraypi rikuchisqa.

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

Tukuruspaykiqa, hunt'asqa proyectoyki kayhinam kanan:

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

Kaypi, tukuy imapas allin kaqpi kachkan, ichaqa Parcel huk HTML p'anqata chaymanta npm scriptta necesitan servidorniyku qallariypaq.

Parcela nisqa ruway

Dependenciakuna churasqa kaptin chaymanta proyecto carpetayku codificación qallariypaq listo kaptin, kunan Parcel ruwayta atiykuman chaymanta proyectoykuta llaqtapi purichiyta atiykuman. Kikin Parcel mana ruwana willayta diseño kaqwan munanchu, ichaqa huk npm qillqa mayt'uta chaymanta huk HTML willañiqita necesitayku sirwiqniyku qallariypaq.

Willayta hunt’achiy src/index.html. Parcel huk p'anqata ruwanan tiyan, chayrayku index.htmlp'anqaykuta llamk'achiyku wakin HTML qallariypaq churanaykupaq, chaymanta CSS chaymanta JavaScript willañiqiyku.

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

Kaypi huk chhika Bootstrap estilo ruwayta div class="container"chaymanta chaymanta <button>chaymanta rikusqayku mayk'aq Bootstrap CSS Webpack kaqwan kargasqa kachkan.

Parcel kikinmanta riqsinqa Sass llamk'achisqayku chaymanta Sass Parcel plugin yanapanapaq churanqa. Ichaqa, munaspaykiqa, makiwanpas purichiyta atinki npm i --save-dev @parcel/transformer-sass.

Parcela npm qillqakunata yapay. Kichay package.jsonchaymanta kay startqillqasqata scriptsimaman yapay. Kay qillqa mayt'uta llamk'achisaqku Parcel wiñachiy sirwiqniyku qallariypaq chaymanta HTML willayta ruwasqaykumanta ruwasaqku chaymanta distdirectorioman huñusqa kaptin.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Hinaspa tukupaypiqa, Parcela nisqatam qallarichwan. Terminalniykipi qillqana my-projectmayt'umanta, chay musuq yapasqa npm qillqa mayt'uta purichiy:
```
npm start
```

Kay pusaqpa qatiqnin chaymanta qhipa t'aqapi, llapa Bootstrap kaqpa CSS chaymanta JavaScript kaqninta apamusaqku.

Importar Correa de Arranque

Bootstrap Parcel kaqman apamuyqa iskay apamuyta munan, huk ñuqaykuman styles.scsshuktaq ñuqaykuman main.js.

Bootstrap kaqpa CSS kaqninta apamuy. Kay qatiqman yapay src/scss/styles.scssllapa Bootstrap kaqpa pukyuta Sass kaqmanta apamunaykipaq.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Munaspaqa sapankama estilo raphiykutapas apamuyta atinki. Ñawinchay Sass import docs nisqaykumanta aswan sut'inchaykunapaq.
Importar Bootstrap nisqap JS nisqa. Kay qatiqman yapay src/js/main.jsllapa Bootstrap kaqpa JS kaqninta apamunanpaq. Popper kikinmanta Bootstrap kaqnintakama apamusqa kanqa.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
JavaScript plugins nisqakunatapas sapankama apamuyta atinki necesitasqanman hina, huñusqa sayaykunata pisiyachinaykipaq:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Ñawiriy JavaScript qillqayku aswan willakuypaq imayna Bootstrap plugins llamk'achiyta.
¡Hinaspapas tukurunkiñam! 🎉 Bootstrap kaqpa pukyun Sass chaymanta JS hunt'asqa kargasqa kaptin, llaqta wiñachiy sirwiqniyki kunan kayhina rikch'akunan tiyan.

Kunanqa mayqin Bootstrap componentes llamk'achiyta munanki yapayta qallariyta atikunki. Aswan allinta qhaway hunt'asqa Parcel ejemplo proyectota imayna yapasqa sapanchasqa Sass churanaykipaq chaymanta ruwayniyki allinchay Bootstrap kaqpa CSS chaymanta JS kaqpa partenkunallata necesitasqaykita apamuspa.

¿Imapas mana allintachu icha mawk’a kaqtachu kaypi rikunki? Ama hina kaspa , GitHub nisqapi huk sasachakuy kichay . ¿Yanapayta necesitankichu sasachakuy allichaypi? GitHub kaqpi maskay utaq rimanakuy qallariy .