π§Ό
30μΌμ°¨
Part 7. CSS νλ μμν¬ BootStrap
Ch 1. CSS νλ μμν¬ BootStrap
Ch 1. CSS νλ μμν¬ BootStrap
https://getbootstrap.com/docs/5.1/getting-started/introduction/
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
<head>
...
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</head>
https://getbootstrap.com/docs/5.1/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
https://getbootstrap.com/docs/5.1/components/button-group/
Button group
Group a series of buttons together on a single line or stack them in a vertical column.
getbootstrap.com
https://getbootstrap.com/docs/5.1/components/dropdowns/
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
getbootstrap.com
https://getbootstrap.com/docs/5.1/components/list-group/
List group
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
getbootstrap.com
https://getbootstrap.com/docs/5.1/forms/overview/
Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
getbootstrap.com
https://getbootstrap.com/docs/5.1/forms/form-control/
Form controls
Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.
getbootstrap.com
https://getbootstrap.com/docs/5.1/forms/input-group/
Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
getbootstrap.com
https://getbootstrap.com/docs/5.1/components/modal/
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
getbootstrap.com
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
https://getbootstrap.com/docs/5.1/components/tooltips/
Tooltips
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.
getbootstrap.com
ν΄νμ μ±λ₯μμ μ΄μ λ‘ opt-in λμ΄ μμΌλ―λ‘ μ§μ μ΄κΈ°νν΄μΌ νλ€.
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
π npmμΌλ‘ Bootstrap μ¬μ©νκΈ°
- Bootstrap μμ νμν κΈ°λ₯λ§ κ°μ Έμ μ¬μ©ν μ μλ€.
- Bootstrap μμ μ 곡νλ κΈ°λ³Έμ μΈ ν λ§λ€μ μ§μ 컀μ€ν°λ§μ΄μ§ ν μ μλ€.
$ npm install bootstrap// main.js
import bootstrap from "bootstrap/dist/js/bootstrap.bundle";/* main.scss */
@import "../node_modules/bootstrap/scss/bootstrap.scss";
https://getbootstrap.com/docs/5.1/customize/sass/#maps-and-loops
Sass
Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
getbootstrap.com
/* main.scss */
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
https://getbootstrap.com/docs/5.1/customize/color/
Color
Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
getbootstrap.com
π μ±λ₯ μ΅μ ν (νΈλ¦¬ μμ΄νΉ) => Bootstrap μμ μ°λ¦¬κ° νμν κΈ°λ₯λ€λ§ κ³¨λΌ κ°μ Έμ΄!
https://getbootstrap.com/docs/5.1/customize/optimize/
Optimize
Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.
getbootstrap.com
/* main.scss */
/*@import "../node_modules/bootstrap/scss/bootstrap.scss";*/
@import "../node_modules/bootstrap/scss/bootstrap";// import bootstrap from "bootstrap/dist/js/bootstrap.bundle";
import Dropdown from "bootstrap/js/dist/dropdown";
μ±λ₯μμ μ΄μ λ‘ opt-in λμ΄ μμΌλ―λ‘ μ§μ μ΄κΈ°νν΄μΌ νλ€.
(μ΄κΈ°ν νμ§ μμλ λλ μ»΄ν¬λνΈλ μμ. ex λ²νΌ, μ€νΌλ λ±)
// Dropdown
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new Dropdown(dropdownToggleEl)
})
// Modal
new Modal(document.querySelector("#exampleModal"), {
// options
backdrop: "static",
});
