bootstrap 활용

기존 cdn을 사용하거나 npm install 하는 방법 두가지가 있는데

커스터마이징하기에는 npm 방식이 좋기때문에 이를 사용하는 순서를 나열해보겠다.

 

우선 bootstrap을 사용할 폴더에 

1.index.html파일을 만든후 bootstrap 에서 사용할 예시를 html에 붙여넣고 연동할 js파일이 있다면 연동하기

2.터미널을 열어 package.json 설치 (npm init -y)

3.parcel-bundler 설치 (npm i -D parcel-bundler)

4.package.json에 설치 목록확인후 scripts에 

"dev":"parcel index.html",

"build":"parcel build index.html" 

추가 후 터미널에서 npm run dev로 local 호스트 확인

5.scss 폴더 내에 main.scss 작성후 연동여부 하기 위한 코드 작성

@import "../node_modules/bootstrap/scss/bootstrap.scss";

로 파일 import 한후 npm rund dev로 연동 확인

 

6.scss초기화 관련 모듈 경로는 부트스트랩 홈페이지 > customize> sass에서 확인가능하다

//덮어쓰기 초기화
//https://getbootstrap.com/docs/5.0/customize/sass/#maps-and-loops
//해당 하단 3가지 내용은 scss 관련 초기화 모듈임
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

//https://getbootstrap.com/docs/5.0/customize/color/
//customize-color
$theme-colors: (
  "primary":    $primary,
  "secondary":  yellowgreen,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

@import "../node_modules/bootstrap/scss/bootstrap.scss";

//자바스크립트 dropdown 개별적 기능 가져오기

//초기화는 부트스트랩홈페이지에서 기능별(dropdown,button..) via javascript 확인 

import Dropdown from 'bootstrap/js/dist/dropdown';
import Modal from 'bootstrap/js/dist/modal';
//드롭다운 초기화
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
dropdownElementList.map(function (dropdownToggleEl) {
  // return new bootstrap.Dropdown(dropdownToggleEl)
  //개별적인 기능만 가져오는 것이기 때문에 생성자함수로만 호출
  //scss는 개별적으로 가져오는것이 성능적으로 큰차이를 보이지 않지만
  //js에서는 성능적으로 큰 차이를 보일 수 있기 때문에 bundle을 지우고 dropdown 만 가져옴
  return new Dropdown(dropdownToggleEl)
})

//modal 생성시 options에 추가기능실행할수 있음
new Modal(document.getElementById('exampleModal'),{
  backdrop:'static'//배경선택시 모달이 꺼지지 않음
});