Bootscrap [버튼과 버튼 그룹, 드롭다운과 리스트,forms, modal]
버튼과 버튼 그룹
https://getbootstrap.com/docs/5.1/getting-started/introduction/
여기 주소로 들어가서 왼쪽 메뉴바에 components를 누르고 원하는 components의 정보를 찾아볼 수 있습니다.
<body>
<!-- 미리 정의된 컴포넌트를 사용 -->
<!-- 버튼 그룹화 -->
<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 class="btn btn-primary">ABC</div>
</div>
<br>
<!-- 아웃라인 버튼 -->
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</body>
이런 식으로 정의된 코드를 이용하여 가져와 사용이 가능합니다.
사이즈를 간단하게 btn-lg, btn-sm로 설정해 줄 수도 있고
disabled라는 명령어로 버튼을 비활성화 시킬수도 있습니다.
Dropdowns
https://getbootstrap.com/docs/5.1/components/dropdowns/
왼쪽 메뉴바에 components를 누르고 dropdowns를 누르면 정보가 나옵니다.
마찬가지로 설명을 보면서 원하는 기능을 사용할 수 있습니다.
list group
https://getbootstrap.com/docs/5.1/components/list-group/
왼쪽 메뉴바에 components를 누르고 list group를 누르면 정보가 나옵니다.
마찬가지로 설명을 보면서 원하는 기능을 사용할 수 있습니다.
<body>
<!-- 미리 정의된 컴포넌트를 사용 -->
<ul class="list-group">
<li class="list-group-item list-group-item-action">An item</li>
<li class="list-group-item list-group-item-action active">A second item</li>
<li class="list-group-item list-group-item-action">A third item</li>
<li class="list-group-item list-group-item-action">A fourth item</li>
<li class="list-group-item list-group-item-action">And a fifth one</li>
</ul>
</body>
양식(Forms)
https://getbootstrap.com/docs/5.1/forms/overview/
왼쪽 메뉴바에서 Forms 를 클릭하고 그 안에 여러 양식을 확인할 수 있습니다.
모달(modal)
왼쪽 메뉴바에서 modal 를 클릭하고 그 안에 팝업, 모달 창을 만들 수 있습니다.
<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 양식 -->
<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>modal과 forms를 이용해서 모달 창 안에 회원가입 양식을 넣는 코드를 만들 수 있습니다.
이런 식의 창이 만들어지는데 저렇게 모달 창이 켜지면 email address부분이 focus 되게 하려면 js 코드를 추가해 주면 되는데
const emailInputEl = document.querySelector('#exampleInputEmail1');
const modalEl = document.querySelector('#exampleModal');
modalEl.addEventListener('shown.bs.modal', function() { //shown 의 부트스트랩 modal 이벤트가 발생하게 되면
emailInputEl.focus() //emailInputEl 부분에 focus 시키기
})이런 코드를 추가해줘서 index.html에 연결하면 bootstrap js 문법을 통해서 할 수 있습니다.
js 문법은
오른쪽 서브 메뉴에 via javaScript 메뉴에서 확인할 수 있습니다.