• 카테고리

    질문 & 답변
  • 세부 분야

    백엔드

  • 해결 여부

    미해결

Bootstrap을 직접 다운받지않고 CDN을 이용해 간편하게 적용하는 법입니당.

21.02.12 14:11 작성 조회수 3.99k

33

`resources/templates/fragments/header.html`의 코드를 아래와 같이 변경해주시면 됩니다.

`<!-- Bootstrap CDN -->`아래 코드 4줄이 Bootstrap을 적용시켜주는 코드입니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-
  to-fit=no">
    <!-- Custom styles for this template -->
    <link href="/css/jumbotron-narrow.css" rel="stylesheet">
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <title>Hello, world!</title>
</head>

답변 9

·

답변을 작성해보세요.

2

미리바니님 감사합니다^^

0

dooooh2님의 프로필

dooooh2

2023.08.13

커뮤니티에 올라온 방법 다 적용해봤는데 이게 제일 잘 됐어요! 감사합니다!

0

wndudrla1011님의 프로필

wndudrla1011

2022.05.19

감사합니다~

0

kmw3841님의 프로필

kmw3841

2022.05.16

감사합니다!!

0

kz님의 프로필

kz

2021.09.14

감사합니다!!

0

주호빵님의 프로필

주호빵

2021.09.01

감사합니당 ㅠㅠ

0

gudals7856님의 프로필

gudals7856

2021.03.31

정말 감사합니다!

질문 하나만 해도될까요? 저 코드를 다른 html 코드에 넣으면 제대로 동작하지 않던데, 왜 저 위치에 넣어야하는건지 궁금합니다!

0

임현강님의 프로필

임현강

2021.03.14

감사합니다.

0

twosom님의 프로필

twosom

2021.02.14

진짜 이걸로 해결했어요 ㅠㅠ 감사합니다.