반응형
부트 스트랩을 사용하면 미리 정의되어있는 기능들을 활용하여 손쉽게 기능을 구현할 수 있다.
부트 스트랩 공식 사이트
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
poper.js: 부트스트랩 js 파일에서 사용되어 지는 js 이다, 이미 사용 하고 있을때는 poper를 bootstrap js파일보다 상위에 배치해야 한다.
Home
Positioning tooltips and popovers is difficult. Popper is here to help! Popper is the de facto standard to position tooltips and popovers in modern web applications.
popper.js.org
Get started 버튼을 클릭하면 설정하는 방법이 나온다.
부트스트랩 설정 예제
<!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.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>반응형
'프론트엔드 > Bootstrap' 카테고리의 다른 글
| 부트 스트랩 - Components 사용 방법 (Tooltips) (0) | 2021.06.29 |
|---|---|
| 부트 스트랩 - Components 사용 방법 (Modal) (0) | 2021.06.28 |
| 부트 스트랩 - Forms 사용 방법 (0) | 2021.06.28 |
| 부트 스트랩 - Components 사용 방법 (Dropdowns, List group) (0) | 2021.06.28 |
| 부트 스트랩 - Components 사용 방법 (Button) (0) | 2021.06.28 |
