BS 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<title>부트스트랩 예제</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h3>홈짱닷컴 Homzzang.com 부트스트랩 강의</h3>
<p>화면 좌우 사이즈를 줄여서 반응을 확인해 보세요.</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>좌측</h3>
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
</div>
<div class="col-sm-4">
<h3>가운데</h3>
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
</div>
<div class="col-sm-4">
<h3>우측</h3>
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
</div>
</div>
</div>
</body>
</html>
결과보기
※ 예제로 주로 설명하니, 예제 코드 눈여겨 보세요.
1.
BS Doctype - HTML5 사용
<!DOCTYPE html>
<html lang="ko">
...
</html>
2.
BS viewport (뷰포트) - 모바일 우선
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
※ user-scalable=no 추가 : 모바일 기기에서 확대/축소 기능 해제. (비권장방식)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
3.
BS파일적용 2가지
BS파일 받기
1. 다운업방식 : 직접 다운받아 서버에 업로드
2. CDN 방식 : 가장 빠른 외부링크 사용 ※ CDN (Content Delivery Network)
BS파일 적용
BS파일 링크 코드를 <head> 태그 안에 삽입
※ G5 경우, <head> 태그가 head.sub.php 파일 안에 있음.
BS파일적용법1 - 다운업방식
http://getbootstrap.com/getting-started
https://github.com/twbs/bootstrap
BS파일적용법2 - CDN방식 (= 외부링크방식)
[3.3.7 버전]
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
[3.3.2 버전]
<head>
<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>
PS.
BS3 기본 (배경색. 글자스타일)
body {background-color: #fff; }
기본 타이포그래피 속성: @font-family-base, @font-size-base, @line-height-base 사용.
전역링크색은 @link-color 에 설정하고, 밑줄효과는 :hover에만 적용.
※ scaffolding.less 파일에서 정의.
