Bootstrap (1)

Tony Kim·2022년 1월 30일

bootstrap

Bootstrap

목록 보기

1/2

Bootstrap (1) (5버전)

1. 개요

bootstrap?
bootstrap 홈페이지 > docs > components

components

button type button class btn btn primary

따로 작업하지 않아도 클래스 이름으로 버튼 손쉽게 생성가능

2. CDN 프로젝트 생성

홈페이지 > introduction > Quick Start

CSS

cdn.jsdelivr.net

bootstrap은 외부에서 pooper js 패키지 가져와서 활용
- bundle은 외부 popper js를 부트스트랩과 패키지와 묶어서 JS 제공
- separate는 popper와 묶을 필요 없는 별도의 부트스트랩 제공

popperjs

팝업창 원하는 위치
팝업이 스크롤 밖 벗어나지 않게 위치정보 활용

html

link href = CSS
script src = JS

components 삽입
홈페이지 > docs > components > dropdowns > button 복사

body에 붙여넣기
div class = dropdown ~

3. Dropdowns

dropdowns

다양한 버튼
split 버튼

list

단순 항목
active 클래스 추가하면 파란색 활성화 가능
aria-current : 웹접근성 (필요한 경우에는 붙여줘야함)
disabled items : 비활성화 가능

4. 양식

양식
홈페이지 > docs > forms > overview, form control, input group

입력 & 제출하는 양식

form control

sizing
disabled
readonly
file input (type = "file"하면 파일 input 가능)

input group

sizing
multiple inputs
button addons
buttons with dropdowns

5. 모달

Modal
홈페이지 > docs > components > Modal

live demo

팝업같은것
data-bs-toggle : html의 data라는 전역속성 이용해서 bootstrap toggle(데이터 담아내는)의 속성부분 modal이라고 명시(값)
data-bs-target : target, html css 의 #은 id선택자
해당 아이디 가진 요소를 타겟으로 삼아서 모달로 출력
headr / body / footer로 나눠져있음

자바코드

var  myModal = document.getElementById('myModal')
 = let/const myModal = document.querySelectorAll('myModal')
myModal.addEventListener('shown.bs.modal', function() {
  myInput.focus()
})

myModal아이디값 찾아서 이걸 myModal 변수에 담아서 myModal 부분 이벤트 리스너 통해 이벤트 연결 하는데 그 이벤트 발생하면 두번째 인수인 함수가 콜백 = myInput.focus()

livedemo 복사 -> html 붙여넣기

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <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>
  <script defer src="./main.js"></script>
</head>
<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>
</html>

main.js

const emailInputEl = document.querySelector('#exampleInputEmail1')
const modalEl = document.querySelector('#exampleModal')
modalEl.addEventListener('shown.bs.modal', function() {
  emailInputEl.focus()
})

<script defer src="./main.js"></script> : defer의 경우 html 바디 모두 로드 된 후 js실행해야하기 때문에
shown.bs.modal : docs-modal에 event 목록 나와있음

Tony Kim

Back-end-dev

다음 포스트