Bootstrap?
Bootstrap은 Twitter 개발자들이 만들었습니다.
성능이 좋아서 현재도 지속적으로 관리되고 있는 오픈소스 프로젝트입니다.
프로젝트 진행 시 팀에 디자이너가 없는 경우에도 개발자가 괜찮은 수준의 웹 페이지를 만들 수 있게 도와줍니다.
주로 회원관리나 게시판 등 데이터 테이블 디자인에 사용됩니다.
For React install
리액트 프로젝트를 위한 인스톨 매뉴얼입니다.
https://getbootstrap.com/docs/5.3/getting-started/download/#npm
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
npm install bootstrap
terminal
터미널에서 인스톨 합니다.
https://getbootstrap.com/docs/5.3/getting-started/download/#cdn-via-jsdelivr
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
CRA 세팅
public/index.html
head 태그 적당한 곳에 위 코드를 페이스트 합니다.
Vite 세팅
src/ index.html
head 태그 적당한 곳에 위 코드를 페이스트 합니다.
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
App.js
css와 js를 임포트 합니다.
js는 필요하면 임포트 합니다.
나중에 햄버거 네브 토글 기능 에러가 난다면 이 js를 삭제해 보세요.
문제가 해결될 수도 있습니다.
test
이제부터 부트스트랩을 사용할 수 있습니다.
일반 HTML/CSS 클래스 사용하기:
function App() {
return (
<div className="container">
<button className="btn btn-primary">클릭하세요</button>
</div>
);
}React-Bootstrap 라이브러리 사용하기
React-Bootstrap은 부트스트랩을 리액트 컴포넌트로 재구현한 라이브러리로, 리액트 프로젝트에 가장 적합합니다.
https://react-bootstrap.netlify.app/
React Bootstrap | React Bootstrap
The most popular front-end framework, rebuilt for React
react-bootstrap.netlify.app
https://react-bootstrap.netlify.app/docs/getting-started/introduction
Introduction | React Bootstrap
Learn how to include React Bootstrap in your project.
react-bootstrap.netlify.app
React-Bootstrap 라이브러리 설치하기:
npm install react-bootstrap bootstrap
또는 yarn을 사용하신다면:
yarn add react-bootstrap bootstrap
CSS 파일 불러오기:
프로젝트의 index.js 또는 App.js 파일에 부트스트랩 CSS를 import 합니다.
import 'bootstrap/dist/css/bootstrap.min.css';
컴포넌트 사용하기:
필요한 컴포넌트만 import하여 사용할 수 있습니다.
import { Button, Navbar, Container } from 'react-bootstrap';
function App() {
return (
<Container>
<Button variant="primary">클릭하세요</Button>
</Container>
);
}
React-Bootstrap을 사용하면 프로젝트 내에 따로 bootstrap.js 파일을 둘 필요가 없고, 라이브러리만 설치하여 바로 사용 가능합니다.
추가 팁
React-Bootstrap은 리액트의 컴포넌트 기반 접근 방식과 잘 어울리며, 자바스크립트 기능까지 리액트 방식으로 사용할 수 있습니다.
명령어는 변할 수 있으니, 항상 공식 사이트에서 최신 버전의 명령어를 확인하는 것이 좋습니다.
VS Code에서 프로젝트를 열고 터미널을 통해 위 명령어들을 실행하시면 됩니다.
For Next.js bootstrap
Next.js 에 부트스트랩 설치하는 방법은 위의 리액트 설치와 거의 같습니다.
css 임포트만 page.tsx에서 하면 됩니다.
https://getbootstrap.com/docs/5.3/getting-started/download/#npm
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
npm install bootstrap
terminal
'use client';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
app/page.tsx
혹시 다른 페이지에서 부트스트랩이 작동하지 않으면 그 페이지에도 임포트 해주세요.
만약 서버사이드 렌더링으로 코딩해야 한다면
'use client';
지우고
리액트부트스트랩을 설치 하세요.
For springboot install
스프링부트를 위한 부트스트랩 설치
아래 전체 매뉴얼은 sts 버전입니다.
다른 에디터나 프레임워크의 경우 인스톨 세팅 방법이 조금씩 다릅니다.
Download
https://getbootstrap.com/docs/5.3/getting-started/download/#compiled-css-and-js
bootstrap download
Compiled CSS and JS
[download]
bootstrap-5.3.3-dist.zip
install
unzip
bootstrap-5.3.3-dist.zip - 압축파일을 풉니다.
file select
폴더 파일 중 bootstrap.min.css 파일을 찾습니다.
C:\Users\Administrator\Downloads\bootstrap-5.3.3-dist\css\bootstrap.min.css
file move
선택한 파일을 아래 디렉토리로 이동합니다.
workspace/sbb/src/main/resources/static/bootstrap.min.css
이 파일을 sts에서 열지 마세요.
에러날수도 있습니다.
setting
부트스트랩을 사용하려고 하는 html 파일 상단에 아래 코드를 페이스트 합니다.
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
이제 부트스트랩을 사용할 수 있습니다.
Recommedation components
추천 컴포넌트
기능 보다는 비기너가 다루기 쉬운 것들로 추천 합니다.
nav
https://getbootstrap.com/docs/5.3/components/navbar/#nav
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
만약 햄버거 메뉴가 오작동 한다면 상단 임포트에서 js를 삭제해 보세요.
card-image-caps
https://getbootstrap.com/docs/5.3/components/card/#image-caps
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>list
https://getbootstrap.com/docs/5.3/components/list-group/#numbered
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Content for list item
</div>
<span class="badge text-bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Content for list item
</div>
<span class="badge text-bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Content for list item
</div>
<span class="badge text-bg-primary rounded-pill">14</span>
</li>
</ol>flex
https://getbootstrap.com/docs/5.3/utilities/flex/#direction
<div class="d-flex flex-column mb-3">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
table
https://getbootstrap.com/docs/5.3/content/tables/#accented-tables
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>John</td>
<td>Doe</td>
<td>@social</td>
</tr>
</tbody>
</table>forms
https://getbootstrap.com/docs/5.3/forms/layout/#horizontal-form
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>pagination
https://getbootstrap.com/docs/5.3/components/pagination/#active
<nav aria-label="...">
<ul class="pagination">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<a class="page-link" href="#" aria-current="page">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
footer
https://getbootstrap.com/docs/5.3/components/card/#header-and-footer
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
bootstrap essential class
부트스트랩 자주 사용하는 클래스
1. 컨테이너 클래스
container: 페이지의 주요 콘텐츠를 담는 중앙 정렬된 컨테이너입니다.
container-fluid: 화면 전체 너비를 차지하는 컨테이너입니다.
2. 그리드 시스템
row: 가로 행을 만들며, 그리드 시스템의 기본 단위입니다.
col / col-숫자: 열을 만들며, 숫자는 1-12 사이로 전체 너비의 비율을 의미합니다. 예: col-6은 50% 너비를 차지합니다.
3. 버튼 클래스
btn: 기본 버튼 스타일을 적용합니다.
btn-primary: 파란색 주요 버튼 스타일을 적용합니다.
btn-secondary: 회색 보조 버튼 스타일을 적용합니다.
btn-success: 녹색 성공 버튼 스타일을 적용합니다.
btn-danger: 빨간색 위험/삭제 버튼 스타일을 적용합니다.
btn-lg/sm: 버튼 크기를 크게/작게 조절합니다.
4. 텍스트 스타일
text-center/start/end: 텍스트 정렬을 중앙/왼쪽/오른쪽으로 설정합니다.
text-primary/secondary/success/danger: 텍스트 색상을 변경합니다.
fw-bold/normal/light: 글꼴 두께를 변경합니다.
5. 마진과 패딩
m-숫자: 모든 방향에 마진을 적용합니다 (1-5).
mt/mb/ms/me-숫자: 각각 위/아래/왼쪽/오른쪽에 마진을 적용합니다.
p-숫자: 모든 방향에 패딩을 적용합니다 (1-5).
pt/pb/ps/pe-숫자: 각각 위/아래/왼쪽/오른쪽에 패딩을 적용합니다.
6. 디스플레이 속성
d-none: 요소를 화면에서 숨깁니다.
d-flex: Flexbox 레이아웃을 적용합니다.
d-block: 블록 요소로 표시합니다.
d-inline: 인라인 요소로 표시합니다.
7. Flexbox 정렬 클래스
justify-content-start/center/end/between: 수평 방향 정렬을 설정합니다.
align-items-start/center/end/stretch: 수직 방향 정렬을 설정합니다.
8. 테이블 클래스
table: 기본 테이블 스타일을 적용합니다.
table-striped: 줄무늬 테이블 스타일을 적용합니다.
table-bordered: 테두리가 있는 테이블 스타일을 적용합니다.
table-hover: 마우스 오버 시 행 하이라이트 효과를 적용합니다.
9. 카드 컴포넌트
card: 카드 컨테이너를 생성합니다.
card-header: 카드 상단 헤더 영역을 정의합니다.
card-body: 카드 본문 영역을 정의합니다.
card-footer: 카드 하단 영역을 정의합니다.
10. 폼 클래스
form-control: 입력 필드에 스타일을 적용합니다.
form-label: 입력 필드의 레이블에 스타일을 적용합니다.
form-check: 체크박스나 라디오 버튼에 스타일을 적용합니다.
11. 유틸리티 클래스
bg-color: 배경색을 설정합니다 (primary, secondary, success 등).
rounded: 모서리를 둥글게 만듭니다.
shadow: 그림자 효과를 적용합니다.
border: 테두리를 추가합니다.
이 클래스들을 조합하면 복잡한 레이아웃과 디자인을 빠르게 구현할 수 있습니다.
'New' 카테고리의 다른 글
| JS console.log - 자바스크립트 데이터 콘솔로 체크하기 (0) | 2025.06.21 |
|---|---|
| Node.js install (0) | 2025.06.19 |
| font awesome 아이콘 폰트 사용하기 (0) | 2025.05.29 |
| CMD n Powershell setting (0) | 2025.02.22 |
| my directory setting (0) | 2025.02.07 |