1. 부트스트랩 사이트를 들어간다.
https://getbootstrap.com/docs/5.3/getting-started/introduction/
Get started with Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com
2. CDN links 목록으로 가서 js와 css 코드를 복사해서 head 태그에 입력한다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>나만의 에브리타임</title>
<link rel="stylesheet" href="/css/bootstrap.min.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">
<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>
</head>3. 부트스트랩 docs로 들어가서 원하는 디자인을 class로 가져와 원하는 태그에 적용하면 된다.
https://getbootstrap.com/docs/5.3/getting-started/introduction/
Get started with Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com
[1] html 코드를 입력한다.
<div>
<span id="basic-addon1">@</span>
<input type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>[2] 검색창에 디자인을 적용하는 싶은 태그이름을 입력한다.
[3] 원하는 디자인의 class 명을 가져와 적용하면 된다.
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>'Spring_boot > Project' 카테고리의 다른 글
| [Spring] 스프링 보안 (0) | 2022.08.20 |
|---|---|
| [Spring] REST 웹 서비스 (0) | 2022.08.13 |
| [Spring] JPA로 블로그하고 데이터를 액세스 하기 (0) | 2022.08.07 |
| [Spring] MVC를 이용해 블로그 만들기 (0) | 2022.07.31 |
| [Spring] Spring MVC와 Web Security 통합 (0) | 2021.08.29 |