Bootstrap 시작하기, 스타터 템플릿

Jmnote (토론 | 기여)님의 2014년 7월 6일 (일) 01:16 판 (새 문서: ;Bootstrap 시작하기 ;부트스트랩 튜토리얼 ;부트스트랩 스타터 템플릿 ==소스 코드== <source lang='html5'> <!DOCTYPE html> <html> <head> <meta charset="utf-8"...)
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)
Bootstrap 시작하기
부트스트랩 튜토리얼
부트스트랩 스타터 템플릿

1 소스 코드

html
Copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>부트스트랩 스타터 템플릿</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<style>
* { font-family: NanumGothic, 'Malgun Gothic'; }
body { padding-top: 50px; }
.starter-template {
  padding: 40px 15px;
  text-align: center;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
		<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="#">프로젝트 이름</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 class="starter-template">
	<h1>부트스트랩 스타터 템플릿</h1>
	<p class="lead">새 프로젝트를 빠르게 시작하려면 이 문서를 활용해보세요.<br> HTML 문서 뼈대가 갖추어져 있습니다.</p>
  </div>
</div>
</body>
</html>

2 같이 보기

3 참고 자료