Bootstrap
✒️ 2025-05-16 11:47 내용 수정
프론트엔트 프레임워크
- Bootstrap 공식 사이트(한글)
- Component 목록 : Bootstrap Components
- 20240120 기준 현재 v5.3 기준으로 cdn을 이용한 설치 방법으로 설치를 진행했다.
- 설치 참고 자료 : Bootstrap 부트스트랩 설치방법 및 시작하기, Bootstrap 시작하기 JavaScript
- 설치 후 상세 사용은 공식 문서를 참고 하는 것이 좋다.
Bootstrap v5.0 기준 Starter Template
-
한글 : Boostrap 시작하기
-
cdn link : HTML 문서의
<header>태그 내에 CDN link를 추가하여 Boostrap 사용을 적용한다.
<!-- 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">
<!-- Bootstrap JS -->
<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>
- Template
<!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>
React bootstrap
- React 전용 bootstrap으로, React에서 사용하는 Component 형식으로 작성된 Component를 사용할 수 있다.
- React Boostrap 공식사이트
- Component 목록 : React Bootstrap Components
- Component 형식이기 때문에 사용하려면 import를 해야 한다.
- React에서 기존 bootstrap도 사용할 수 있다.
- React#React 설치의 Bootstrap 항목 참고.
- React에서 bootstrap을 사용하려면 VSC 터미널에서
npm i react-bootstrap bootstrap를 입력한 후, App.js에import 'bootstrap/dist/css/bootstrap.min.css';를 작성한다.
- React로 bootstrap-icons를 사용할 때도 icon을 Component 형식으로 import해서 사용한다.
# bootstrap과 bootstrap-icons 를 npm으로 설치
npm i react-bootstrap bootstrap bootstrap-icons
import {Button} from 'bootstrap';
import { StarFill } from "react-bootstrap-icons";
function App() {
return (
<>
<Button variant="primary">
<StarFill/>버튼
</Button>
</>
);
}