bootstrap?
bootstrap 홈페이지 > docs > components
components
button type button class btn btn primary
따로 작업하지 않아도 클래스 이름으로 버튼 손쉽게 생성가능
홈페이지 > introduction > Quick Start
CSS
cdn.jsdelivr.net
JS
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 ~
dropdowns
list
양식
홈페이지 > docs > forms > overview, form control, input group
입력 & 제출하는 양식
form control
input group
Modal
홈페이지 > docs > components > Modal
live demo
자바코드
var myModal = document.getElementById('myModal') = let/const myModal = document.querySelectorAll('myModal') myModal.addEventListener('shown.bs.modal', function() { 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 목록 나와있음