BootStrap [tooltips,npm project, 테마색상 커스터마이징]

Tooltips

 

• Tooltips are opt-in for performance reasons, so you must initialize them yourself.

성능상의 이유 때문에 초기화를 해줘야지 동작한다.

마우스를 올리면 설명이 뜨는 것을 말한다.

이부분의 내용을 복사해서 js 파일에 넣어줘야 한다.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

코드를 입력하면

이런식으로 결과가 오는걸 확인할 수 있다.

 

BootStrap NPM 프로젝트로 만들기

npm init -y 해주고

npm i -D parcel-bundler 해준다.

이제 bootsrtap를 설치해 볼거다.

이걸 확인하면 npm install bootstrap를 vscode 터미널 창에 해주면 된다.

그럼 package.json 파일에 

  "dependencies": {

    "bootstrap": "^5.1.3"

  }  생기는걸 확인할 수 있다.

 

scss를 설치된 파일로 연결 시켜주고

js 파일도 연결시켜주면 된다.

index.html에는 main.js 파일과 main.scss 파일을 연결하고 bootstrap의 코드를 붙여 넣으면 제대로 동작하는걸 확인할 수 있다.

이렇게 설정을 해주면 bootstrap 에서 우리가 원하는 필요한 기능만 가져와서 사용할 수 있다.

 

테마 색상 커스터마이징

color 부분에 들어가보면 scss 코드로 색이 코드로 정리된것을 볼 수 있다.

이부분을 클릭하면

변경하기 위해서 필수로 필요한 파일들이 있다. 이걸 복사해서 붙여넣고

main.scss 파일에 붙여넣어줍니다.

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$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"

main.scss 파일의 secondary 값을 yellowgreen으로 바꿔주면 평소에는 회색이던 버튼의 색이 변하는걸 확인한다.

 

성능최적화 [Optimize]

customize 안에 optimize 라고 있습니다.

화면을 보면 원하는 기능만을 가져와서 사용할 수 있습니다.

js 파일은 초기화를 해줘야 합니다.

viva javascript에 있는 코드를 복사해서 붙여넣으면 오류가 생긴다.

import Dropdown from 'bootstrap/js/dist/dropdown'

const dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
dropdownElementList.map(function (dropdownToggleEl) {
  return new Dropdown(dropdownToggleEl)  // return new bootstrap.Dropdown(dropdownToggleEl) 이부분을 이렇게 수정한다.
})

그래도 오류가 생기는 popperjs 라는 파일이 bootstrap에 들어있었는데 지금은 dropdown만 가져와서 없다,

npm i @popperjs/core 로 설치하면 된다.