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

개요

부트스트랩 시작하기
Bootstrap 튜토리얼
Bootstrap 스타터 템플릿, 초보자 템플릿, 시작형 템플릿

템플릿 튜토리얼 #1
반응형 웹 디자인

웹브라우저 폭이 좁아지면 토글 네이비게이션 버튼 나타남(모바일웹 형식)

한국어 적용 + 폰트 스타일 적용^[1]
최신 온라인 css, js 적용^[2]
상단 네비게이션바가 고정됨 (스크롤을 내려도 그대로 있음)^[3]

소스 코드

width=device-width 는 디바이스의 스크린 가로 사이즈에 따라 값이 설정
initial-scale=1은 페이지가 브라우저에 처음 올라왔을 때 초기 줌 수준 설정
부트스트랩은 사이트의 컨텐츠를 감싸는 .container 혹은 .container-fluid 클래스를 필요로 함

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>스타터 템플릿</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<style type="text/css">
* { font-family: NanumGothic, 'Malgun Gothic'; }
body { padding-top: 50px; }
.starter-template {
  padding: 40px 15px;
  text-align: center;
}
</style>
</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">토글 네비게이션</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>

같이 보기

주석

↑ 나눔고딕, 맑은고딕 폰트 적용
↑ css나 js를 따로 업로드하지 않아도, 아래 파일 하나만 있으면 어디에 올려도 이상없이 될 것이다.
↑ navbar-fixed-top 클래스의 효과

참고

[1] 나눔고딕, 맑은고딕 폰트 적용

[2] ss나 js를 따로 업로드하지 않아도, 아래 파일 하나만 있으면 어디에 올려도 이상없이 될 것이다.

[3] vbar-fixed-top 클래스의 효과

[1]

[2]

[3]