Bootstrap 설치
jQuery 기ㅏㄴ으로 작동하는 디자인 프레임 워크이다.
부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.
프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드하세요. 하나의 프레임워크, 모든 기기. 부트스트랩은 웹사이트와 어플리케이션을 단일 코드 베이스로 CSS 미디어 쿼리를 이용하여 휴대폰에서부터 태블릿, 데스크탑까지 쉽고 효과적으로 크기를 조절합니다. 많은 기능들 부트스트랩과 함께, 보통의 HTML 요소들
bootstrapk.com
Bootstrap 사용하기
Bootstrap 홈페이지에서 지원하는 기본 템플릿을 참고하자.
▶ 부트스트랩 설치 없이 사용하기(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>
<!-- jquery도 업로드 ~ -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
▶ 부트스트랩 설치하여 사용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>부트스트랩</title>
<!-- 부트스트랩 -->
<link href="./resource/css/bootstrap.min.css" rel="stylesheet">
<link href="./resource/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
<!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="./resource/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<script src="./resource/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>설치하 bootstrap을 프로젝트 내 폴더에 넣고, 기본템플릿을 참고하여 링크를 수정하였다.
이제 위 코드의 body 안에 콤포넌트를 사용해 보자.
'Frameworks > bootstrap' 카테고리의 다른 글
| Bootstrap 사용방법 (0) | 2020.04.08 |
|---|