부트스트랩 사용법

2020.04.26

 

부트스트랩은 누군가 만들어 논 템플릿을 가져와서 사용하는데 그걸 모아둔 곳이라고 한다.

 

부트스트랩을 설치해서 적용할수도 있고, CDN으로 사용 할수 있는데

난 CDN밖에 아직 사용 못한다.

 

이걸 쓸려면 

 

head 태그에 css js 코드를 넣어서 임포트 처럼 사용하고,

원하는 템플릿 코드를 복사해서 내 body에 넣으면 그 스타일이 적용된다.(이때 CDN을 가져와야지만 적용이 댐)

 

위에 링크에서 잘 알려주고 있지만, 내가 정리하자면

<!-- CSS -->
<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/js/bootstrap.min.js"></script>

를 head 태그에 넣어 준다.

 

www.bootstrapcdn.com/bootswatch/?theme=11

Bootswatch

이곳에서 템플릿을 가져오는데... 코드를 가져오기전 css 코드를 바꿔줘야 한다.

원하는 테마의 css코드는 저 HTML 코드이다. 이걸 복사해서

<!-- CSS -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/cosmo/bootstrap.min.css" integrity="sha384-5QFXyVb+lrCzdN228VS3HmzpiE7ZVwLQtkt+0d9W43LQMzz4HBnnqvVxKg6O+04d" crossorigin="anonymous">

<!-- 테마 -->
<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/js/bootstrap.min.js"></script>

기존 css 코드는 지워주고 복사한 코드를 넣으면 준비 끝!

이제 진짜 템플릿 가져다 써보자

 

원하는 템플릿 오른쪽 상단에 마우스를 대면 <> 가 뜨는데 이걸 누르면 위에처럼 코드가 나온다
나온 코드를 복사해서 원하는 body에 넣으면 끝!

 

 

/* 참고 */

https://cowhacker.tistory.com/101

부트스트랩 CDN 사용법

https://cowhacker.tistory.com/102?category=931062 

부트스트랩 CDN 테마