web/bootstrap-html
1
0
Fork 0
Code Issues Activity

Merging upstream version 5.3.5+dfsg.

Browse source 
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
Daniel Baumann 2025-04-06 09:55:26 +02:00
parent 8838637a85
commit 449962af96
Signed by: daniel
GPG key ID: FBB4F0E80A80222F
233 changed files with 6665 additions and 12847 deletions
Download patch file Download diff file Expand all files Collapse all files

10
site/content/docs/5.3/getting-started/parcel.md
View file

@ -7,12 +7,16 @@ toc: true
thumbnail: guides/bootstrap-parcel@2x.png
---
<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">
<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="800" height="400" alt="">
{{< callout >}}
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/parcel). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/parcel?file=index.html) but not run it because Parcel isn't currently supported there.
{{< /callout >}}
## What is Parcel?
[Parcel](https://parceljs.org/) is a web application bundler designed to simplify the development process with a zero-configuration setup out of the box. It offers features found in more advanced bundlers while focusing on ease of use, making it ideal for developers seeking a quick start.
## Setup
We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
@ -111,7 +115,7 @@ With dependencies installed and our project folder ready for us to start coding,
npm start
```
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server.png" alt="Parcel dev server running">
![Parcel dev server running](/assets/img/guides/parcel-dev-server.png)
In the next and final section to this guide, we'll import all of Bootstrap's CSS and JavaScript.
@ -150,7 +154,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`
3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap">
![Parcel dev server running with Bootstrap](/assets/img/guides/parcel-dev-server-bootstrap.png)
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.