부트스트랩 적용 안됨 - buteuseuteulaeb jeog-yong andoem

답변 2

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/jsbootstrap.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap

부트스트랩 적용해보기

2019. 11. 22. 06:24

1. 적용하고 싶은 부트 스트랩 테마를 다운로드한다.

(부트스트랩 무료 다운로드 주소1 : https://startbootstrap.com/)

(부트스트랩 무료 다운로드 주소2 : https://bootstrapmade.com/)

2. 다운받은 부트스트랩 폴더 내의 index.html 실행시킨다 - 소스보기 후 전체 소스 복사해 적용시키고픈 파일의 home.jsp에 붙여넣기한다.

3. 압축을 푼 후에 생성된 폴더들을 모두 아래의 위치로 옮긴다.

4. 다시 복붙한 home.jsp 로 간다. home.jsp에 끝이 .css로 끝나는 css파일 링크들의 형식을 아래와 같이 바꿔준다.

<!--  변경 전 -->
<link href="css/sb-admin-2.min.css" rel="stylesheet">

<!--  변경 후 -->
<link href="../resources/css/sb-admin-2.min.css" rel="stylesheet">

5. 끝이 .js로 끝나는 자바스크립트경로도 아래와 같이 바꿔준다.

<!--  변경 전 -->
<script src="vendor/jquery/jquery.min.js"></script>

<!--  변경 후 -->
<script src="../resources/vendor/jquery/jquery.min.js"></script>

6. 실행해본다.

2020년 10월 30일 22:49 #4600

Participant

삭제했다가 깔았다가
처음부터 재설치 세번이나 했는데 안돼요

Refused to apply style from https://maxcdn.bootstrapcdn.com/bootstrap/4.5.3/css/bootstrap.min.css’ because its MIME type ('application/xml') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

index.js:1 Warning: Invalid DOM property class. Did you mean className?
at button
at div
at App

Failed to load resource: the server responded with a status of 403 ()

콘솔창 에러요.. 사진첨부가 안되네요

2020년 10월 30일 23:11 #4603

부트스트랩 4.5로 업데이트되면서 뭔가 바뀐것 같군요 

index.html을 여신 다음 bootstrap.min.css가 첨부된 link 태그를 찾아서

<link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />

이걸로 바꿔보시길 바랍니다. 

아니면 4.4 버전을 따로 css파일 다운받아서 직접 link 태그로 첨부하는게 가장 안전한 방법입니다. 

해보시고 되는지좀 알려주십시오 

2020년 10월 30일 23:20 #4605

오잉 아니면 react-bootstrap 공식사이트 중간쯤에 보면 CDN 어쩌구 하면서 4.5버전 쓰라고 되어있는거 link태그 붙여넣어보십시오 

https://react-bootstrap.github.io/getting-started/introduction/

Participant

오잉..몇번을 해도 안되더니 오늘하니까 갑자기 됐어요 ....ㅠ 감삽니다
근데 점보트론에 이미지 적용이 안돼요 ㅠㅠ
./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
Module not found: You attempted to import ../public/background.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

background-image: url(/background.jpg);
이게 안돼서
background-image: url(/public/background.jpg); 이걸로도 해봤는데 위와같은 오류가 뜹니다ㅠㅠ

앗 마침 밑에 같은 질문이 있군요 ㅠㅠ 해결했습니다.
이미지 삽입을 public폴더가 아닌 src 폴더안에 해야하네요

저도 같은 문제가 나왔는데. 어떻게 해야하는지 궁금하네요. 5시간 정도 해메고 있어요.ㅠ.ㅠ

https://www.fwantastic.com/2020/03/react-reactstrap.html

여기 사이트를 참고 해보니 

npm install --save bootstrap
npm install --save reactstrap

index.js에 아래 추가

import 'bootstrap/dist/css/bootstrap.css';

하니 정상작동 했습니다.