Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add webpack with dynamic loading example #1

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
Expand Up @@ -84,3 +84,10 @@ updates:
schedule:
interval: monthly
versioning-strategy: increase
- package-ecosystem: npm
directory: "/webpack-2"
labels:
- dependencies
schedule:
interval: monthly
versioning-strategy: increase
1 change: 1 addition & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ jobs:
- "vite"
- "vue"
- "webpack"
- "webpack-2"

steps:
- name: Clone repository
Expand Down
3 changes: 3 additions & 0 deletions webpack-2/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.DS_Store
/node_modules/
/dist/
1 change: 1 addition & 0 deletions webpack-2/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
lockfile-version=2
16 changes: 16 additions & 0 deletions webpack-2/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# Bootstrap w/ Webpack

Include [Bootstrap](https://getbootstrap.com)'s source Sass and individual JavaScript plugins with [Webpack](https://webpack.js.org).

## Edit in browser

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/twbs/examples/tree/main/webpack-2?file=index.html)

## How to use

```sh
git clone https://github.com/twbs/examples.git
cd examples/webpack/
npm install
npm start
```
74 changes: 74 additions & 0 deletions webpack-2/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap w/ Webpack 2</title>
<link rel="stylesheet" href="dist/css/main.css">
</head>
<body>
<div class="container py-4 px-3 mx-auto">
<header class="d-flex justify-content-between align-items-md-center pb-3 mb-5 border-bottom">
<h1 class="h4">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-bootstrap-fill d-inline-block me-2" viewBox="0 0 16 16">
<path d="M6.375 7.125V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H6.375v2.725z"/>
<path d="M4.002 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4h-8zm1.06 12V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396H5.062z"/>
</svg>
<span>Webpack</span>
</a>
</h1>
<a href="https://github.com/twbs/examples/tree/main/webpack-2/" target="_blank" rel="noopener">View on GitHub</a>
</header>

<h1>Build Bootstrap with Webpack</h1>
<div class="col-lg-8 px-0">
<p class="fs-4">You've successfully loaded the Bootstrap + Webpack example! It's loaded up with <a href="https://getbootstrap.com/">Bootstrap 5</a> and uses Webpack to compile and bundle our Sass and JavaScript. It also includes Autoprefixer.</p>
<p>If this button appears blue and the link appears purple, you've done it!</p>
</div>

<button type="button" class="btn btn-primary me-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">Toggle offcanvas</button>
<a id="popoverButton" class="text-success" href="#" role="button" data-bs-toggle="popover" title="Custom popover" data-bs-content="This is a Bootstrap popover.">Example popover</a>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>

<hr class="col-1 my-5 mx-0">

<h2>Guides</h2>
<p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
<ul class="icon-list">
<li><a href="https://getbootstrap.com/docs/5.3/getting-started/introduction/">Bootstrap quick start guide</a></li>
<li><a href="https://getbootstrap.com/docs/5.3/getting-started/webpack/">Bootstrap Webpack guide</a></li>
<li><a href="https://getbootstrap.com/docs/5.3/getting-started/parcel/">Bootstrap Parcel guide</a></li>
<li><a href="https://getbootstrap.com/docs/5.3/getting-started/vite/">Bootstrap Vite guide</a></li>
<li><a href="https://getbootstrap.com/docs/5.3/getting-started/build-tools/">Contributing to Bootstrap</a></li>
</ul>

<hr class="mt-5 mb-4">

<p class="text-muted">Created and open sourced by the Bootstrap team. Licensed MIT.</p>
</div>

<script src="dist/js/main.js"></script>
</body>
</html>
Loading