CSS 프레임워크 BootStrap ch.1 BootStrap (1) ~ (9)

이동주·2021년 12월 29일

1. 개요

다양한 컴포넌트를 제공해줌
클래스만 지정하고도 다양한 컴포넌트로 쉽게 css 할 수 있음
scss 문법 사용 가능

트리 쉐이킹 기능 추가

단일 번들을 최적화할 때 사용되는 필요하지 않은 코드를 제거하는 기술

2. CDN 프로젝트 생성

index.html에 복사, 붙여넣기!!

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

3. 버튼과 버튼 그룹

부트스트랩 메인 홈페이지에 있는 버튼 컴포넌트 !

버튼 사용

<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>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

버튼 그룹

<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">Success</button>
    </div>

=> 버튼 그룹을 사용하면 버튼들이 붙여져서 보이기 때문에 그룹 형태로 사용 가능

4. 드롭다운과 리스트

(1) 드롭다운

아래쪽으로 메뉴들이 보일 수 있게 토글이 있는 모양

버튼 상태의 클래스를 붙여서 다양한 토글을 만들 수 있음

(2) 리스트

클래스만 추가해서 hover효과가 있는 것처럼 만들 수 있음

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

5. 양식

사용자에게 데이터를 입력받아 제출 등을 하는 것을 폼이라고 함

폼 컨트롤을 사용해서 다양한 형식의 폼을 깔끔하게 제공

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

6. 모달

js 연결(복붙)

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

부트스트랩 기능에 자바스크립트 기능 추가해서 편리 기능 만들기

index.html

<body>
    <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
            <form>
                <div class="mb-3">
                  <label for="exampleInputEmail1" class="form-label">Email address</label>
                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                  <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                </div>
                <div class="mb-3">
                  <label for="exampleInputPassword1" class="form-label">Password</label>
                  <input type="password" class="form-control" id="exampleInputPassword1">
                </div>
                <div class="mb-3 form-check">
                  <input type="checkbox" class="form-check-input" id="exampleCheck1">
                  <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
              </form>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </div>
  </div>
</body>

main.js

const emailInputEl = document.querySelector('#exampleInputEmail1');
const modalEl = document.querySelector('#exampleModal');

modalEl.addEventListener('shown.bs.modal', function () {
    emailInputEl.focus();
})

7. 툴팁

성능상의 이유로 직접적으로 초기화 해주어야 함

툴팁
: 어떤 영역에 마우스를 올려두면 작게 설명창이 뜨는 것

index 영역만 복사하면 툴팁이 작동하지 않음
js 영역까지 복사해야함(초기화)

8. NPM 프로젝트 생성

npm init -y
=> npm i -D parcel-bundler
=> dev, build 작성
=> npm install bootstrap@next

=> 필요로 하는 것만 가져올 수 있음
=> 커스텀마이징 가능

9. 테마 색상 커스텀마이징

부트스트랩에서 제공하는 색상들을 원하는 색상으로 변경 가능
=> SCSS map 형태로 제공

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

map 형태로 제공되는 SCSS에서 원하는 색상으로 변경

이동주

안녕하세요 이동주입니다

이전 포스트

SCSS ch.1 SCSS (15) ~ (17)

다음 포스트