BootStrap이란?
- 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임 워크이다.
- 부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것이다. 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적은 반응을 얻는 프레임워크이다.
홈페이지 : https://getbootstrap.kr/docs/5.2/getting-started/introduction/
Bootstrap 시작하기
Bootstrap은 강력하고 기능이 풍부한 프론트엔드 툴킷입니다. 프로토타입부터 프로덕션까지 뭐든지 빠르게 빌드해보세요.
getbootstrap.kr
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.2.3/cosmo/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
부트스트랩을 사용하기 위해서는 이 두 가지 태그를 HTML 문서의
<head>
태그 안에 추가해야 합니다.
<link>
태그를 사용하여 CSS 파일을 불러오고,
<script>
태그를 사용하여 JavaScript 파일을 불러오는 것이 일반적인 방법입니다
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.2.3/cosmo/bootstrap.min.css">
</head>
<body>
<!--
container - 화면이 배치될 기본 위치
1. container : 기본 컨테이너이며 폭에 반응하여 자동 조정(뚝뚝끊김)
2. container-fluid : 폭의 변화에 부드럽게 반응하는 컨테이너(100%)
row - 한 줄 영역 , col - 한 칸 영역
사이즈 - sm, md, lg, xl
-->
<div class="container-fluid mt-4">
<div class="row">
<div class="offset-md-2 col-md-8">
<!-- 문서 제목 (Jumbotron) -->
<div class="row text-center">
<div class="col bg-dark text-light p-4 rounded">
<h1>버튼(Button)</h1>
</div>
</div>
<!--
버튼(button, input, a)
- 기본 클래스 : .btn
- 확장 클래스 :
- 색상을 역할별로 구분한다
.btn-primary
.btn-secondary
.btn-success
.btn-warning
.btn-danger
...
-->
<div class="row mt-4">
<div class="col">
<button type="button" class="btn btn-primary">버튼</button>
<button type="button" class="btn btn-secondary">버튼</button>
<button type="button" class="btn btn-success">버튼</button>
<button type="button" class="btn btn-warning">버튼</button>
<button type="button" class="btn btn-danger">버튼</button>
</div>
</div>
</div>
</div>
</div>
<!--
페이징 블록(Pagination)
- ul과 li, a태그를 혼합하여 구현되는 구조
- 영역이기 때문에 가운데 정렬하려면 둘 중 하나를 선택
- 영역의 좌/우 마진을 auto로 부여한다
- 외부 영역 display를 flex로 하고 가운데 정렬을 위해 다음 두 속성을 설정
- justify-content:center;
- align-items:center;
- .d-flex (display:flex)
- .justify-content-center (justify-content:center)
- .align-items-center (align-items:center)
-->
<div class="row mt-4">
<div class="col d-flex justify-content-center align-items-center">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#">«</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">»</a>
</li>
</ul>
</div>
</div>
<div class="container-fluid mt-4">
<div class="row">
<div class="offset-md-2 col-md-8">
<!-- 문서 제목 (Jumbotron) -->
<div class="row text-center">
<div class="col bg-dark text-light p-4 rounded">
<h1>테이블(Table)</h1>
</div>
</div>
<!--
테이블
- 주 클래스 - .table
- 부 클래스
- .table-bordered
- .table-striped
- .table-hover
-->
<div class="row mt-4">
<div class="col">
<h2>기본 테이블</h2>
</div>
</div>
<div class="row">
<div class="col">
<table class="table">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>속성</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>이상해씨</td>
<td>풀,독</td>
</tr>
<tr>
<td>4</td>
<td>파이리</td>
<td>불꽃</td>
</tr>
<tr>
<td>7</td>
<td>꼬부기</td>
<td>물</td>
</tr>
<tr>
<td>25</td>
<td>피카츄</td>
<td>전기</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>