elex/bootstrap-5-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mmm

Browse Source
This commit is contained in:
Elex
2021-08-09 15:44:07 +09:00
parent aba4aa4660
commit 4ae34e03dd
8 changed files with 101 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -1,11 +1,11 @@
# 🚀 Welcome to your new awesome project!
# Bootstrap 5 Examples
```bash
yarn init
yarn add webpack-cli --dev
yarn webpack-cli init
yarn add bootstrap @popperjs/core
yarn add css-loader --dev
yarn add css-loader ... --dev
```
---

7
dist/main.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

11
examples/buttons.html
View File

@@ -14,7 +14,16 @@
<h1>Hello, world!</h1>
<p>Hello</p>
<button type="button" class="btn btn-primary">버튼</button>
<button
type="button"
class="btn btn-primary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Tooltip on top"
>
버튼
</button>
<script src="../dist/main.js"></script>
</body>
</html>

51
examples/forms.html Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="../dist/main.css" rel="stylesheet" />
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"
>Email address</label
>
<input
type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
<div id="emailHelp" class="form-text">
We'll never share your email with anyone else.
</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input
type="password"
class="form-control"
id="exampleInputPassword1"
/>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" />
<label class="form-check-label" for="exampleCheck1"
>Check me out</label
>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script src="../dist/main.js"></script>
</body>
</html>

22
examples/layout.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="../dist/main.css" rel="stylesheet" />
<title>Hello, world!</title>
</head>
<body>
<nav
class="navbar navbar-expand fixed-top navbar-dark bg-primary shadow-sm"
>
<h1 class="navbar-brand">Elex</h1>
</nav>
<script src="../dist/main.js"></script>
</body>
</html>

85
src/_bootstrap.scss
View File

@@ -1,83 +1,2 @@
//---------------------------------------------
//
// Partially loading Bootstrap's components
//
// 1. Functions
// 2. Variables
// 3. Mixins
// 4. Root + Reboot
// 5. Type
// 6. Components
// 7. Helpers & Mixins for Breakpoints + Print
//
//---------------------------------------------
//---------------------------------------------
// 1. Functions
//---------------------------------------------
@import "~bootstrap/scss/functions";
//---------------------------------------------
// 2. Variables
//---------------------------------------------
@import "~bootstrap/scss/variables";
//---------------------------------------------
// 3. Mixins
//---------------------------------------------
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
//---------------------------------------------
// 4. Root + Reboot
//---------------------------------------------
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
//---------------------------------------------
// 5. Type
//---------------------------------------------
@import "~bootstrap/scss/type";
//---------------------------------------------
// 6. Components
//---------------------------------------------
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/accordion";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
//---------------------------------------------
// 7. Helpers & Mixins for Breakpoints + Print
//---------------------------------------------
@import "~bootstrap/scss/helpers";
@import "~bootstrap/scss/utilities/api";
// https://getbootstrap.kr/docs/5.1/customize/sass/
@import "~bootstrap/scss/bootstrap";

7
src/index.js
View File

@@ -2,4 +2,11 @@ import { bootstrap } from "bootstrap";
import { popper } from "@popperjs/core";
import "./index.scss";
// Tooltip
var tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
console.log("Hello World!");