1. 접속 주소 : https://getbootstrap.com/
2. 다운로드
3. 압축해제
4. Visual Studio Code 수행
5. File > Open Folder... > \Downloads\bootstrap-5.3.0-alpha3-dist\bootstrap-5.3.0-alpha3-dist
6. EXPLORER창에 빈 공간 누르고 New File.. 버튼 클릭
7. test.html 입력
8. 느낌표(!) + tab 버튼 클릭(html 자동 완성)
9. head 태그안에 아래 라인 추가
<link href="../css/bootstrap.min.css" rel="stylesheet">
10. body 태그안에 아래 라인 추가
<script src="../js/bootstrap.bundle.min.js"></script>
11. bootstrap은 1줄에 12개의 column이 있는걸로 생각해서 동적으로 사이즈 조절이 된다.
12. 그래서 Grid 먼저 알아야 한다.(어떤 페이지에 여러개 주자가 있을때 각 주제 별로 container 하나하나로 만들어 준다.)
container > row > col
13. layout > grid 로 이동하여 참고
14. visual studio code에서 단축키
".container + tab"
".row + tab"
".col-md-4 + tab"
15. body 안에 단축키 이용해서 container > row > col 작성
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
16. 정상 확인
. test.html 우클릭 > Open in other browser > Google Chrome
- login.html 생성
- ! + tab
- 헤더와 바디에 부트 스트랩 css, js 추가
<link href="../bootstrap-5.3.0-alpha3-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../bootstrap-5.3.0-alpha3-dist/js/bootstrap.bundle.min.js"></script>
- Forms > Form control 참고
- .container + 탭
- 복사한 폼 붙여 넣기
- 수정
