20210601 Bootstrap01 : CDN 연결, Buttons & Buttons group, Dropdown, List Group, Form, Modal, Tootips, NPM연결, 테마 색상 커스텀, 성능최적화(트리 쉐이킹, Optimize, 단일 번들)

Bootstrap01

• Bootstrap official site
• 여러가지 CSS, JS로 이미 만들어 져있는 UI(Components)를 가져다 사용 가능케 해주는 UI Framework
• 5버전 : SCSS , 트리쉐이킹을 지원함
• 트리 쉐이킹 (Tree Shaking) : 단일 번들을 최적화 할때 사용되는 필요하지 않은 코드를 제거하는 기술

연결하기

• CDN CSS, JS 연결하기
  • Bootstrap : Quick Start
  • JS CDN의 경우 Bootstrap에서는 Popper js에 의존하고 있어서, 묶여져 있는 Bundle이 있고 분리되어 있는 Seperate가 있음
    • Bundle : Bootstrap + Popper
    • Seperate : Bootstrap , Popper (Popper를 따로 사용하는 경우 seperate 로 연결)
    • Popper : 팝업을 쉽게 만들게 해주는 JS 패키지

버튼과 버튼 그룹

Buttons

• 여러가지 버튼 스타일의 요소들을 제공
• btn-키워드
• Outline buttons : 배경색이 없는 버튼 제공
  • (기존 button 클래스 이름에 outline 추가함 -> btn-outline-키워드)
• size : btn-lg btn-sm -> large , small의 약어로 기본값의 사이즈보다 크거나 작게 만들수 있음
  • classList에 추가함
• Disabled state : button 요소에 disabled 태그를 추가하면 됨 (div 요소에는 안됨)

Button group

• 버튼들 간의 경계를 없앰

<div class="btn-group">
  <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" disabled>Success</button>
  <button type="button" class="btn btn-outline-success" disabled>
    Success
  </button>
</div>
<div class="btn btn-outline-primary btn-lg">btn-lg</div>
<div class="btn btn-outline-primary">default</div>
<div class="btn btn-outline-primary btn-sm">btn-sm</div>

드롭다운 (Dropdowns)

Dropdowns

• 버튼을 눌러 하위 메뉴를 여는 Component
• button, a 요소에서 지원함으로 필요함
• button 요소
  • dropdown-toggle classList에 추가
  • data-bs-toggle 속성을 "dropdown"
• a 링크 요소
  • dropdown-toggle classList에 추가
  • role 속성 button
  • id 속성 dropdownMenuLink
  • data-bs-toggle 속성을 "dropdown"
  • data-bs-toggle 속성을 "dropdown"
• 하위 메뉴
  • ul(dropdown-menu) , li(dropdown-item) 태그를 통해 구성함
  • 항목 간의 구분 선은 li 태그안에 hr태그(dropdown-divider)로 작성

<button
  type="button"
  class="btn btn-danger dropdown-toggle"
  data-bs-toggle="dropdown"
  aria-expanded="false"
>
  Action
</button>
<!-- <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" 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>
  <li><hr class="dropdown-divider" /></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Split button (button , drop)

• 버튼 영역과 드롭다운 영역을 분리
• 버튼 요소를 두개를 만들어야 함 (일반 버튼 + 드롭다운 버튼)
• 드롭 다운하는 버튼의 경우 dropdown-toggle-split를 classList에 추가함

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button
    type="button"
    class="btn btn-danger dropdown-toggle dropdown-toggle-split"
    data-bs-toggle="dropdown"
    aria-expanded="false"
  >
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <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>
    <li><hr class="dropdown-divider" /></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

리스트 그룹 (List Group)

List Group

• 단순히 리스트를 표현하는데 사용됨
• 기본적으로는 ul(list-group), li(list-group-item) 요소 형태로 사용됨
• 리스트 항목을 Active 효과를 주고 싶은 경우 item 요소에 active 클래스를 추가해주면됨 (aria-current 속성의 경우 웹 접근성을 위함임)
• Disabled 효과
  • -> button이 아닌 요소는 disabled 클래스 추가
  • -> button 요소는 disabled 속성을 추가
• button, a 요소를 통해서 item이 만들어 진다면, list-group-item-action 클래스를 추가하면 hover 효과를 줄수 있음

<div class="list-group">
  <a
    href="#"
    class="list-group-item list-group-item-action active"
    aria-current="true"
  >
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action"
    >A second link item</a
  >
  <a href="#" class="list-group-item list-group-item-action"
    >A third link item</a
  >
  <a href="#" class="list-group-item list-group-item-action"
    >A fourth link item</a
  >
  <a
    href="#"
    class="list-group-item list-group-item-action disabled"
    tabindex="-1"
    aria-disabled="true"
    >A disabled link item</a
  >
</div>

Forms (양식)

• 기본적으로 form, input 요소로 사용됨

• Sizing : form-control-lg, form-control-sm 클래스 추가

• Disabled : disabled 속성 추가

• Readonly : readonly 속성 추가

• file input UI

모달

• 화면을 덮는 알림창과 같은 역할

Tooltips (툴팁)

• popper처럼 요소에 팝업을 제공함
• 툴립 component의 경우에는 성능상의 이유로, 포함되어 있지 않아 명시적으로 초기화를 시켜줘야 동작함

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

JS 초기화

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

NPM으로 관리

• NPM을 통해서 bootstrap을 연결하여 관리하면, custom도 가능하고 필요 한것만 가져다 쓸수 있음
  • CDN방식의 경우 색상 및 자신이 원하는 것으로 커스텀이 불가능함
• CDN에서 NPM 으로 관리
  • npm init을 통해서 프로젝트를 npm으로 관리시작하고
  • npm i bootstrap@next 명령어로 일반 의존성으로 설치 함 (실제로 화면에서 사용되는 것이기 때문에)
  • 부트스트랩을 사용하기 위해서 스타일 파일과, JS파일에 nodemodules에 들어 있는 부트스트랩 파일을 연결해야함 - SCSS 파일 : @import '../node_modules/bootstrap/scss/bootstrap.scss'; - JS 파일 : import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'; - JS 파일의 경우 import시 바로 nodemodules 폴더에서 찾기 때문에 상세 경로를 적을 필요가 없음

테마 색상 커스터마이징

• Bootstrap customize
• 기본적인 bootstrap에서 이미 지정해 놓은 SCSS형태의 여러 파일을 수정해서 전체적인 bootstrap을 들고 올수 있도록 해야함
• 기본으로 지정해 놓은 functions, variables, mixins 를 import하고 거기서 theme-clors라는 변수에 맵 형태의 값을 수정해 주면 반영이 됨

// 덮어쓰기 초기화 과정
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: (
  "primary": $primary,
  // 'secondary': $secondary (기본 값) -> yellowgreen 변경
  "secondary": yellowgreen,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark,
);

// 전체 가져오기
@import "../node_modules/bootstrap/scss/bootstrap.scss";

성능 최적화 (트리 쉐이킹)

Optimize

• Bootstrap: Optimize
• CDN에서는 모두 가져왔지만 npm을 사용해서 관리함으로 써 nodemodules에서 가져올 것만 가져와서 사용함
  • 즉, 여러 components 및 기능들을 모두 SCSS, JS import를 통해서 명시해서 써야 해당 기능만 사용함을서 자원을 아낌
  • 단, JS에서 기능을 사용할때 해당 기능을 new라는 키워드로 JSclass를 초기화 시켜서 사용해야함

스타일 가져오기

• SCSS에서도 전체 기능의 스타일을 가져오지 않고 사용하는 기능에 대한 특정 스타일만 가져와 사용할 수 있지만,
  • 아직 5버전 성숙도가 떨어져서 일단은 전체를 들고와 사용함 (JS가 아니라 CSS이다보니 전체적인 성능에는 크게 영향을 주지 않음)

JS 가져오기

• 성능적으로 개별적으로 가져와서 사용하는 것이 좋다. (bundle -> 전체임)
• JS 파일이 있고 사용시 초기화가 필요한 컴포넌트가 있기도 하고 없는 것도 있음
• 초기화는 각 bootstrap component via javascript 부분을 참고하면 됨

드롭다운 예시

• dropdowns JS초기화 사용법
• bundle 사용시에 썻던 bootstrap 전역변수 사용 안함을 주의!
• bootstrap의 경우 popper에 의존성이 있었기 때문에 전체를 가져오는게 아니면 따로 popper를 의존성으로 npm에 설치해줘야 함
  • npm i @popperjs/core

import Dropdown from "bootstrap/js/dist/dropdown";

const dropdownElementList = [].slice.call(
  document.querySelectorAll(".dropdown-toggle")
);
dropdownElementList.map(function (dropdownToggleEl) {
  return new Dropdown(dropdownToggleEl); // bootstrap 전역변수 사용 안함을 주의!
});

• button과 sppiner의 경우 JS는 없어 초기화가 필요 없는 컴포넌트가 있으므로 bootstrap 문서를 잘 살펴 봐야함

모달 예시

• 뒤에 객체인자 부분은 option에 해당함
  • backdrop은 모달 활성화시 배경 클릭하면 모달이 꺼질지 설정하는 옵션임 (static이 배경 클릭 막는 것임)

import Modal from "bootstrap/js/dist/modal";

new Modal(document.querySelector("#exampleModal"), {
  backdrop: "static",
});

결국, Bootstrap의 경우 문서를 잘 찾아 봐야함