1. 공식홈페이지에서 다운받기
bootstrap.min.css
0.15MB
2. 다운받은 파일 중 아래 파일 나의 spring 프로젝트 경로 중 static의 css 파일에 넣어준다.
※ 스프링은 resources파일에 대한 기본경로를 static으로 하고 있다.
만약 경로를 못찾고 있다고 판단이 되면, 아래 yml에서 기본 경로를 지정해주자.
# 정적리소스 경로관리
spring:
web:
resources:
static-locations: classpath:static/
3. 부트스트립 적용하기
https://getbootstrap.com/docs/4.6/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
부트스트립의 다큐를 참고하여 class property를 가져와서 테그에 적용시켜준다.
<%@page import="com.example.gigacf.v2.user.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- 부트스트립 연결 -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<meta charset="UTF-8">
<title>Registration</title>
</head>
<body>
<!-- 헤더 -->
<%@include file="/WEB-INF/views/v2/comm/header.jsp"%>
<!-- 부트스트립 적용 -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">회원가입</li>
<li class="breadcrumb-item active" aria-current="page">step1</li>
</ol>
</nav>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">약관</h2>
</div>
<div aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">Some placeholder content for the first accordion panel. This panel
is shown by default, thanks to the ㅁㄴㅇㄻ나어ㅘㅓ노아러ㅗㅁ나어뢈너오라ㅓㅁ도아ㅓㅗㄹ마넝롸먼돌아ㅓㅘclass.</div>
</div>
</div>
</div>
<div style="margin: 30px">
<form role="form" action="step2">
<div class="form-group">
<label class="checkbox-inline"> <input type="checkbox" name="agree" value="true">동의합니다.
</label>
</div>
<button type="submit" class="btn btn-outline-success">다음 단계</button>
</form>
</div>
</body>
</html>※ 이때 head에 부트스트립이 있는 파일을 link해주어야 한다.
4. 적용 후 화면
'CSS > css' 카테고리의 다른 글
| Grid (0) | 2023.10.04 |
|---|---|
| [css] Keyframe (0) | 2023.05.17 |
| [Css] slide(swiper) (0) | 2023.05.17 |
| [TailwindCss] Slide (0) | 2023.05.17 |
| [TailwindCss] animation (0) | 2023.05.17 |