부트스트랩 강좌를 주제로 포스팅을 진행하도록 하겠습니다.
부트스트랩의 강점은 자주 사용되는 컴포넌트들에 대한 지원이 많다는 것이며
단점으로는 IE9이하 버전에서는 기능지원에 제한이 있습니다.
그러므로 익스플로러보다는 그외 브라우저 (크롬,사파리 등등..) 에서 실행해주시길 바랍니다.
원래는 부트스트랩 파일들을 다운로드 받아서 진행을 해야 겠지만 개발환경이 틀리다보니
부트스트랩도 jQuery강좌와 동일하게 CDN 설정을 통해서 강의를 진행하도록 하겠습니다
(부트스트랩 CDN) CSS, JS 파일들을 INCLUDE 해주도록 합니다.
BOOTSTRAP INCLUDE
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
보통 코드를 작성할때 <head></head> 태그 사이에 많이 include를 하는데
빠른 화면을 위해 JS파일들은 </body> 태그 상단에 위치하게끔
권고를 하고 있는거 같습니다.
예제삼아 작성하는 부분이므로 로딩속도를 고려를 하지 않고
저는 <head></head> 태그 사이에 모든 CSS,JS파일들을 include하겠습니다.
※ 추가로 인지하고 있어야 할 부분이 부트스트랩 + jQuery와 같이 사용을 해야 한다는점 알고계세요~
단순 컴포넌트들은 태그마다 클래스 추가만 하면 되지만 기능실행을 위해서는 jquery가 필수라는 점!!
오늘은 간단하게 연동법만 확인하는 시간이므로
다음 코드를 작성해보도록 하겠습니다.
부트스트랩 샘플코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 상단 네비게이션 바 -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- 브라우저가 좁아졋을때 나오는 버튼(클릭시 메뉴출력) -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">부트스트랩 테스트</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">홈으로</a></li>
<li><a href="#about">부트스트랩이란</a></li>
<li><a href="#contact">문의하기</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div style="margin-top: 100px;">
<h1>부트스트랩 기본 템플릿입니다</h1>
<p class="lead">여러분은 부트스트랩을 이용하여 다양한 기능을 구현할수 있습니다.</p>
</div>
</div>
</body>
</html>
위와같은 코드 작성 완료 후 실행을 해보도록 하겠습니다.
넓은화면의 실행결과
좁은화면(모바일기기)의 실행결과
좁은화면(모바일기기) 메뉴버튼 클릭 실행결과
결과 정상적으로 부트스트랩이 연동된것을 확인하였습니다.
부트스트랩은 IE지원이 미약해서 그렇지만 정말 깔끔한거 같네요 ㅎㅎ
다음장부터는 컴포넌트 구현을 하나씩 해보도록 하겠습니다!!
by 개발로짜
'웹개발강좌 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩 6장 - 스크롤스파이 기능을 이용하여 메뉴포커스 변경해보기 (0) | 2014.10.22 |
|---|---|
| 부트스트랩 5장 - 부트스트랩의 모달창(기본 + ajax) 알아보기 (7) | 2014.10.16 |
| 부트스트랩 4장 - 부트스트랩을 이용하여 드롭다운 메뉴 생성하기 (2) | 2014.10.14 |
| 부트스트랩 3장 - 다양한 버튼 컴포넌트를 만들어보자 (그룹버튼 편) (0) | 2014.10.09 |
| 부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편) (0) | 2014.10.08 |