02.부트스트랩 시작하기

미분류

1. 부트스트랩 사이트 접속

  • http://bootstrapk.com 사이트 접속
  • 부트스트랩 소스 다운받기
  • 부트스트랩 소스 적용시키기 (css, js 파일)

HTML5 doctype

부트스트랩은 HTML5 doctype 의 사용을 필요로 하는 HTML 요소와 CSS 속성을 이용합니다. 당신의 프로젝트들을 시작할 때 그것들 포함하세요.

<!DOCTYPE html>
<html lang="ko">
  ...
</html>

모바일 우선

부트스트랩2 에서 우리는 모바일 친화적인 스타일을 프레임워크의 중요한 부분으로 추가했었습니다. 부트스트랩3 에서는 시작부터 모바일 친화적으로 다시 만들었습니다. 모바일은 부가적인 부분이 아닌 핵심적인 부분으로 만들어졌습니다. 말하자면, 부트스트랩은 모바일 우선입니다. 모바일 우선 스타일은 전 독립된 파일들이 아닌 전 영역을 걸쳐 확인할 수 있습니다.

적절한 렌더링과 확대/축소를 위해, 당신의 <head> 에 viewport 메타태그를 추가하세요.

<meta name="viewport" content="width=device-width, initial-scale=1">

당신은 viewport 메타태그에 user-scalable=no 를 추가하여 모바일 기기에서 확대/축소 기능을 끌 수 있습니다. 확대/축소를 끈다는 것은, 사용자들이 오직 스크롤만 할 수 있음을 의미합니다. 그리고 당신의 사이트가 좀더 네이티브 어플같이 느껴지도록 합니다. 종합적으로 봤을때 우리는 모든 사이트에 이것을 추천하지 않습니다. 그러므로 조심히 사용하세요!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

 

2. 부트스트랩 기본 템플릿

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>부트스트랩 101 템플릿</title>

    <!-- 부트스트랩 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

3. 스타일 적용시키기

콘테이너

부트스트랩은 사이트 콘텐츠를 감싸고 그리드 시스템을 만들 콘테이너 요소가 필요합니다. 당신은 당신의 프로젝트에 2가지 콘테이너 중 하나를 선택할 수 있습니다. 주목할 점은, padding 등의 문제로 어느 것도 중첩할 수는 없다는 것이다.

반응형 고정폭 콘테이너를 위해 .container 를 사용하세요.

<div class="container">
  ...
</div>

당신의 뷰포트 전체폭까지 늘어나는 최대폭 콘테이너를 위해 .container-fluid 을 사용하세요.

<div class="container-fluid">
  ...
</div>