728x90

Bootstrap

부트스트랩에서 미리 정의된 components를 불러와 손쉽게 사용

 

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

 

 

 

 

설치방법 1 연동

◽ 프로젝트에 css, js 소스복사 (cdn방식)

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

link CSS

css 링크코드는 붙여넣기 하면 되고

 

Script

◽ js에는 두 가지 버전이 있는데 popper의 유무 차이다.

  • Bundle : popper을 번들로 포함한 소스 코드
  • Separate : popper을 포함하지 않은 소스 코드로 popper가 미리 선행되어야 한다.

 

popper란? 팝업 툴팁 관련 플러그인

 

 

Home

Positioning tooltips and popovers is difficult. Popper is here to help! Popper is the de facto standard to position tooltips and popovers in modern web applications.

popper.js.org

 

 

 

설치방법 2 npm📌

필요한 기능만 가져와서 쓸 수 있으며 기본적인 테마를 커스텀하기 좋다.

1. npm 시작, parcel-bundler 패키지 설치

$ npm init -t
$ npm i -D parcel-bundler

 

//package.json
"scripts": {
  "dev": "parcel index.html",
  "build": "parcel build idnex.html"
}

2. 일반 의존성으로 설치

$ npm install bootstrap

3. npm으로 bootstrap 패키지를 설치했을 때는 (cdn방식)html에 link,script태그를 쓸 필요없이 각각의 js, css파일에서 직접 import하여 사용한다.

3-1. main.js에서 bootstrap모듈을 bundle로 연동 (node_modules폴더로 바로 접근 가능)

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

3-2. main.scss에서 bootstrap.scss파일 연동

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

 

 

Customize

color 예제

bootstrap customize 변수기본값

customizing할 때 필수적으로 import할 경로를 최상단에 놓아야 한다. variables에서 데이터를 가져와 $theme-colors에서 덮어스기 override되는 순서다.

 

 

 

Components

class이름만 수정하여도 컴포넌트 스타일을 변경할 수 있다.

Button을 예로 들면

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>

outline추가

<button type="button" class="btn btn-outline-secondary">Secondary</button>

그룹화

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
  </div>

 

이외에도 form, layout 등 custom하여 사용할 수 있도록 많은 기능을 제공하고 있다.

 

 

 

Tooptips📌

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

툴팁은 성능상의 이유로 제공되지 않으므로 사용자가 초기화해줘야 한다.

 

단순히 html만 복사할 경우에는

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

아래 그림처럼 툴팁이 제대로 작동하지 않는다.

이때 javascript에서 사용자가 초기화를 해줘야 한다. 홈페이지에서 코드 복사

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

js를 연동하면 툴팁이 제대로 나온다.

 

 

Optimize

* 성능최적화 : 필요한 기능만 가져와서 쓰기

* 트리 쉐이킹 Tree shaking : 단일 번들을 최적화할 때 사용되는 필요하지 않은 코드를 제거하는 기술

 

bootstrap이란 이름으로 bundle전체를 가져오는 방식에서 

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

필요한 기능(본 포스팅에서는 dropdown, modal)만 즉, 단일 번들을 불러옴으로써 최적화하는 방법이다.

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

 

 

dropdown예제

Components > dropdown > via javascript 소스코드를 js에 복붙하여 초기화과정 필요

*초기화가 필요없는 경우도 있음. 해당 컴포넌트의 문서에 별다른 javascript 언급이 없으면 스킵

필요없는 코드나 변수는 정리

 

 

modal예제

초기화할 때 주의사항은 js코드 내 사용되어지는 변수명이나 셀렉터명을 확실히 연결해야 한다.

이 과정에서 모달은 옵션추가도 가능한데 backdrop: 'static'옵션은 바깥부분을 클릭해도 창이 꺼지지 않게 하는 옵션이다.

import Modal from 'bootstrap/js/dist/modal'
new Modal(document.querySelector('#exampleModal'), {
  backdrop: 'static'
})

 

 

popper 에러

최적화 하는 과정에서 popper에러가 뜰 수 있다. 부트캠프는 popper를 번들로 설치되어지는데 단일 번들만 가져와 최적화할 경우에는 popper가 정상적으로 불러와지지 않기 때문이다.

popper를 설치하면 문제 해결

$ npm i @popperjs/core

 

728x90

'FE' 카테고리의 다른 글

번들러 webpack 플러그인 사용법  (0) 2021.12.05
번들러 parcel 플러그인 사용법  (0) 2021.11.29
git the requested URL returend error : 403  (0) 2021.11.28
goorm IDE  (0) 2021.11.28
SCSS 컴파일과 문법, 함수  (0) 2021.11.28
+ Recent posts

티스토리툴바