1. 정의
- Javascript, CSS를 미리 정의해두어, 일일히 코딩할 필요 없이 바로 적용가능토록 해주는 프레임워크
- 반응형 웹페이지 (해상도에 따라 변하는 웹)
2. 설치
- 참조 : http://bootstrapk.com/getting-started/
- 웹서버에 올려서 사용
- CDN을 이용하여 다운로드
- <link> 태그를 이용하며, 인터넷 접속 필요. 매번 다운받으므로 느릴수 있음
<head> 태그에 작성. meta 태그 다음에 작성
<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> - Bower 패키지 사용
- 다운로드 받아 사용
- 다운로드 후 <link> 탭을 이용하여 로컬에 있는 파일 사용
- <link href="../css/bootstrap.min.css" rel="stylesheet">
3. 반응형 웹페이지 설정
<head> 태그 맨 위에 와야함.
<meta name="viewport" content="width=device-width, initial-scale=1">4. 기본 설정
- 참조 : http://bootstrapk.com/getting-started/#examples
- 기본 설정 예 :
<!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"> <!-- 반응형 웹페이지 --!>
<!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
<title>부트스트랩 101 템플릿</title>
<!-- 부트스트랩 -->
<link href="css/bootstrap.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]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>5. 문서
- http://bootstrapk.com/ 에서, 위의 상위 탭, CSS, 콤포넌트, 자바스크립트 등 메뉴선택
- 예제와 설명이 있음
6. CSS 사용
- 각 태그의 어트리뷰트인 class 에 부트스트랩에서 미리 정의한 원하는 디자인의 클래스명을 입력한다.
- 원하는 디자인은 5. 문서 항목에 명시한 페이지를 참조하여 살펴본다.
- 한개 이상 적용을 할 경우, 공백을 통해 클래스명을 추가한다.
- 예
<table class="table table-striped">
// table 클래스와 table-striped 클래스 두개를 사용함.
'FrontEnd' 카테고리의 다른 글
| PWA (Progressive Web Application) (0) | 2022.03.25 |
|---|---|
| HTML5 상에서 비디오, 오디오, 음성녹음 테스트 (0) | 2022.03.25 |
| vue js 내용정리 (2.7. 트랜지션 ~) (0) | 2022.03.25 |
| vue js 내용정리 (2.3.9 컴포넌트-slot태그 ~ 2.6. 사용자 정의 이벤트) (0) | 2022.03.25 |
| vue js 내용정리 (1. 설치 ~ 2.3.8. 컴포넌트 - 이벤트 발생시 사용자 정의함수 호출) (0) | 2022.03.25 |