Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
부트스트랩은 Web 개발을 굉장히 편하게 만들어주는 강력한 도구이다.
jquery에 의존했던 v4.x와 달리 v5.x로 바뀌면서 jquery가 완전히 필요없게 되었다.
부트스트랩에는 재밌고 간편한 기능들이 아주 많다.
Components에서 그 기능들을 확인해볼 수 있다.
이 포스팅에서는 부트스트랩 설치와 사용에 대해 간단하게 알아볼 것이다.
부트스트랩을 사용하기 위해서 코드에 추가해주어야 하는건 2가지이다.
1. 디자인을 위한 css
|
1
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
cs |
2. 여러 기능들을 위한 javascript
|
1
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
cs |
이 코드들을 <head> 태그가 시작하자마자 작성해주면 된다.
아래의 코드는 bootstrap에서 제공하는 스타터 템플릿이라고 한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
|
cs |
부트스트랩에서 권고하는 몇가지 사항이 있다.
- .html 파일의 최상단에 <!doctype html>을 작성하라
- <meta name="viewport" content="width=device-width, initial-scale=1">를 사용하라(모바일 우선 웹을 위해)
이제 설치를 완료하였으니, 제대로 사용해보자.
'프로그래밍 > Web' 카테고리의 다른 글
| [html] 서버 없이 이메일을 보내보자! (5) | 2021.10.31 |
|---|---|
| Mixed content / Failed to load response data... 문제 해결방법 (0) | 2021.10.30 |
| Sweetalert로 예쁜 알림창, 경고창을 띄우자 (5) | 2021.10.28 |
| [부트스트랩5] 버튼 사용하기 (0) | 2021.10.28 |
| [부트스트랩5] 캐러셀 사용하기 (0) | 2021.10.24 |
댓글