2018~/프론트 엔드 기초(HTML, CSS, JavaScript)
BootStrap 1.부트스트랩 개요
반원_SemiCircle
2019. 8. 12. 18:53
BootStrap이란?
- CSS 개발을 빠르게 해주는 프레임 워크 중 하나
- 프레임워크 : 프로그램 개발을 도와주는 이미 작성된 각종 소스코드 집합. 작업 틀
- 웹 페이지 프레임워크 : Bootstrap.js, vue.js, react.js 등
- 부트스트랩 공홈 : https://getbootstrap.com/
- 가이드 : http://bootstrapk.com/getting-started/
- github : https://github.com/twbs/bootstrap
- w3s 예시 : https://www.w3schools.com/bootstrap/bootstrap_ver.asp
BootStrap 기본 적용
- Getting Start CDN https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>적용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>수강 페이지</h1>
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#">홈</a></li>
<li class="nav-item"><a class="nav-link" href="#">내정보</a></li>
<li class="nav-item"><a class="nav-link active" href="#">수강정보</a></li>
<li class="nav-item"><a class="nav-link" href="#">고객센터</a></li>
</ul>
<div>
<table class="table table-bordered">
<thead>
<tr>
<th>강의명</th>
<th>수강학기</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>2019-1</td>
</tr>
<tr>
<td>CSS</td>
<td>2019-1</td>
</tr>
<tr>
<td>JavaScript</td>
<td>2019-1</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>