필요기능만 가져와 사용할 수 있고 커스텀 할 수 잇다.
1. 프로젝트 생성 하여 Bootstrap 추가
1) NPM 프로젝트 생성
2) Bootstrap 사이트 에서 npm 명령어 복사
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
3) 터미널에서 설치 실행
해당 package.json파일에서 내용이 확인 가능하다.
npm install bootstrap@5.3.1
4) 프로젝트에 소스 연결
📑index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./scss/main.scss" />
<script src="/main.js"></script>
</head>
<body>
<div class="container">
<h1>Hello SCSS!</h1>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<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>
</body>
</html>📑 main.js
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'📑 main.scss
@import "../node_modules/bootstrap/scss/bootstrap";
2. 커스터마이징
1) 커스터마이징 이동 원하는 기능 선택
2) sass를 활용한 문서 선택 이동
꼭필요한 Required 부분 복사하여 프로젝트에 넣기
※ 적용 순서 : Required 초기화 import > 커스텀 소스 > 전체 연결 소스 import
📑 main.scss
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
//custom
$theme-colors: (
"primary": $primary,
"secondary": yellowgreen,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
// 전체 코드
@import "../node_modules/bootstrap/scss/bootstrap";
3. 최적화 ( 트리쉐이킹 )
SCSS / JAVASCRIPT 의 필요한 기능만 가져와 사용할 수 있는 ' Optimize '
Optimize
Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.
getbootstrap.com
- CSS
기존에 전체 코드를 가져오고 있었는데 필요한 기능의 SCSS 만 가져올 수도 있다.
하지만 일부 오류가 있을 수 있어 전체 bootstrap을 가져오는 것을 권장한다.
CSS의 경우 용량이 작아 크게 최적화에 영향을 주지 않는다.
📑 main.scss
// Required
...
//custom
$theme-colors: (
...
);
// 전체 코드
// @import "../node_modules/bootstrap/scss/bootstrap";
//개별적으로 가져오기
@import "../node_modules/bootstrap/scss/dropdown";
- Javascript
자바스크립트에서는 개별적으로 가져오는 것이 크게 성능을 최적화 시킬 수 있다.
via javascript 에서 기능 초기화 시키는 코드 부분 복사해서 수정 하여 사용할 수 있다.
📑 main.js
//import bootstrap from 'bootstrap/dist/js/bootstrap.bundle' // 기존 전체 스크립트 가져오는 부분 주석처리
// 필요한 기능만 import
import Dropdown from 'bootstrap/js/dist/dropdown' // 드롭다운 기능 가져오기
import Modal from 'bootstrap/js/dist/modal' // 모달 기능 가져오기
//드롭다운 기능 초기화
const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
//const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
// bootstrap으로 가져오고 있지 않기 때문에 해당 부분 제거 한다.
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new Dropdown(dropdownToggleEl))
// 모달 기능 초기화
const myModal = new Modal(document.getElementById('myModal'), options)
하단 옵션 부분을 참고하여 커스텀 가능하다.
EX ) 모달 커스텀
// 모달 기능 추가
const myModal = new Modal(document.getElementById('exampleModal'), {
backdrop: 'static' //배경을 선택해도 모달이 꺼지지 않게 수정
});
'FrontEnd > Node.js' 카테고리의 다른 글
| [ Node.js ] 깃허브에 저장된 탬플릿 가져와서 새로운 프로젝트 생성하기 (0) | 2023.08.16 |
|---|---|
| [ Node.js ] 번들러 - Webpack (중/대형 프로젝트) (0) | 2023.08.16 |
| [ Node.js ] 번들러 - Parcel (소/중형 프로젝트) (0) | 2023.08.16 |
| [ Node.js ] Node 설치 (0) | 2023.08.15 |
