-
컨테이너프론트엔드 프로그래밍/Bootstrap 2022. 1. 26. 21:52
컨테이너
- 레이아웃 최상위 요소로 다른 요소 포함
- <div class=”container”>
- .container : 반응형 고정 폭 컨테이너
- .container-fluid : 뷰포트 전체 폭까지 늘어나는 최대폭 컨테이너
컨테이너 예제 : container.html
- viewport 포함
- <link> : css/bootstrap.min.css
- <script> : jquery 파일 소스 지정
- <script> : js/bootstrap.min.js 소스 지정
- 순서 주의!!!
- jquery 파일 소스 지정이 먼저 와야 함
Bootstrap 색상
container.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 컨테이너</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.6.0.min.js"></script> <!-- jquery가 먼저 와야 함 --> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container bg-primary text-white"> <h1>Bootstrap</h1> <p>Container</p> </div> <div class="container-fluid bg-danger text-white"> <h1>Bootstrap</h1> <p>Container</p> </div> </body> </html>'프론트엔드 프로그래밍 > Bootstrap' 카테고리의 다른 글
Jumbotron, Grid, button, Table, Image (0) 2022.01.26 Bootstrap이란 (0) 2022.01.26