파이참에서 bootstrap 을 통해 html5 로 새로운 프로젝트를 만들어 주면
다음과 같은 소스코드가 나온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>html 페이지의 기본 구성 요소가 적혀 있다.
여기서 편집을 통해 페이지를 구성할 수 있다.
12 그리드 시스템을 제공한다.
????
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=""viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-md-4" style="background-color: red;">
A
</div>
<div class="col-md-4" style="background-color: blue;">
B
</div>
<div class="col-md-4" style="background-color: yellow;">
C
</div>
</body>
</html>title 을 바꿔주고,
getbootstrap.com/docs/5.0/getting-started/introduction/
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
여기서
css 와 js 를 복사해서 head 에 넣어준다.
그리고, body에 위 소스코드를 넣어준다.
그러면, 같은 간격으로 a,b,c 가 색이 다르게 분할이 되어 있는데,
<col-md-4>에서 뒤에 숫자를 바꾸면 넓이가 바뀐다.
이때 보면 기본이 12분할인데, 그래서 5,2,2 이렇게 넣으면 3만큼은 공백으로 나온다.
'프론트엔드 > bootstrap' 카테고리의 다른 글
| [bootstrap] 부트스트랩 템플릿 사용법 (0) | 2021.04.26 |
|---|---|
| [bootstrap] components 01 (0) | 2021.04.26 |
| [bootstrap] 사이즈조정 혼합사용 col-md, sm, lg.. -n 복합? (0) | 2021.04.26 |
| [bootstrap]칼럼사이즈조정, 어떻게 pc와 모바일에 적용되는가? (0) | 2021.04.26 |
| [Bootstrap]부트스트랩이란? (0) | 2021.04.26 |