반응형
npm 프로젝트로 부트 스트랩을 만들면 사용자가 필요한 기능들만 가져와서 사용하는 것이 가능하고, 따라서 커스터마이징의 용이하다.
npm 초기화 명령어: npm init -y
package.json파일이 생성되었는지 확인
개발 소스 실행을 위해 parcel-bundler 설치: npm i -D parcel-bundler
node_modules, package-lock.json 파일 생성된거 확인
package.json 파일을 수정
"scripts": {
"dev": "parcel 띄워줄 html 파일명",
"build": "parcel build 띄워줄 html 파일명"
},
Boot Strap 파일 설치
사이트: Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
npm install bootstrap
package.json 파일에서 확인
확인 예제
html파일 작성
JS파일과 SCSS파일을 연결한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./scss/main.scss" />
<script defer src="./main3.js"></script>
<title>Document</title>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<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>
</body>
</html>
SCSS파일 작성
// bootstrap의 SCSS 기능 가져오기 (node_modules 폴더 내부에서 검색)
@import "../node_modules/bootstrap/scss/bootstrap.scss";
JS파일 작성
// bootstrap의 자바스크립트 기능 가져오기 (node_modules 폴더 내부에서 검색)
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'
결과 화면
반응형
'프론트엔드 > Bootstrap' 카테고리의 다른 글
| 부트스트랩 - Optimize(필요한 기능만 가져와서 사용) (0) | 2021.06.30 |
|---|---|
| 부트스트랩 - npm 프로젝트(커스터 마이징 방법) (0) | 2021.06.30 |
| 부트 스트랩 - Components 사용 방법 (Tooltips) (0) | 2021.06.29 |
| 부트 스트랩 - Components 사용 방법 (Modal) (0) | 2021.06.28 |
| 부트 스트랩 - Forms 사용 방법 (0) | 2021.06.28 |
