Bootstrap 다운로드, 설정 그리고 테스트용 예제
Bootstrap 프레임워크는 웹브라우저 화면에 다양한 콤포넌트를 쉽게 생성할 수 있게 하는 라이브러리이며 HTML, CSS, Javascript, jQuery 등으로 구성되어 있다. Bootstrap 프레임워크를 사용하기 위해서는 라이브러리를 다운로드하거나 CDN을 이용하여 다운로드하지 않고 사용하는 방법이 있다. Bootstrap 프레임워크 내에서는 jQuery도 사용하므로 Bootstrap 프레임워크의 CDN 보다 위에 jQuery CDN이 선언되어 있어야 한다
1. 다운로드 혹은 CDN 확인
위의 사이트에 접속하여 상단 메뉴에서 [ Getting started ] 를 클릭하면 필요한 CDN이 제시되어 있다
제시된 모든 CDN을 복사하여 HTML, JSP 등의 <head>태그 안에 붙여 넣는 것으로 설치는 끝난다.
그러나 잊기 쉬운 한가지 설정이 남아 있다. Bootstrap 프레임워크는 내부에서 jQuery를 사용하므로 Bootstrap 프레임워크의 CDN 보다 위에 jQuery CDN이 선언되어야 한다는 것이다.
설치된 Bootstrap 프레임워크를 테스트해 보려면 몇가지 콤포넌트를 사용해보면 되는데,
상단 메뉴에서 [ Components ] 클릭하면 화면 우측에 콤포넌트 종류별로 링크가 제시되 있으므로 이 중에서 하나를 클릭하여 해당 콤포넌트의 형태를 확인하여 코드를 복사해오면 된다
복사해온 콤포넌트 코드를 <body> 태그 안에 붙여 넣고 웹브라우저로 접속해보면 테스트할 수 있다
Bootstrap 을 커스터마이징하여 사용하려면 아래의 페이지에서 항목을 변경설정한 후에 다운로드하면 된다
2. 강좌
http://www.tutorialspoint.com/bootstrap/index.htm
http://www.tutorialspoint.com/bootstrap/bootstrap_pdf_version.htm
bootstrap_tutorial.pdf3. 웹 프로젝트에 포함
Eclipse 웹프로젝트의 WebContent 로 Bootstrap 구성파일들을 임포트하면 되고 별다른 설정은 필요없다
Bootstrap이 제시하는 Javascript Plugin 을 사용하기 위해서는 jQuery 도 필요하므로 추가해주면 된다
아래의 링크(Bootstrap Download 페이지)에서 제시하는 Bootstrap CDN 을 이용해도 된다
4. 실행 테스트
Bootstrap Download 페이지에서 다양한 예제를 제시하므로 하나를 선택하여 복사한 다음 현재 프로젝트에서 실행해보면 된다
다운로드 페이지의 'Examples' 부분에서 'Navbars in action' 중 하나를 클릭하여 보여지는 예제화면에서 'View Navbar docs' 링크를 누르면 아래의 코드를 찾을 수 있다. 다음은 http://getbootstrap.com/components/#navbar 에서 복사한 내용을 테스트한 결과이다.
<!DOCTYPE html>
<html>
<head>
<title>Example of Twitter Bootstrap</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav></body>
</html>
위의 코드를 웹브라우저로 접속하여 실행하면 다음과 같은 화면을 확인할 수 있다
