Skip to content

Bootstrap

부트스트랩(Bootstrap)은 트위터에서 오픈 소스로 공개한 웹 프런트 엔드 개발 도구입니다. 부트스트랩은 유연한 HTML, CSS, JavaScript 템플릿과 다양한 UI 컴포넌트, 인터랙션을 제공해서 웹 사이트를 구축하는 시작점이 될 수 있습니다.

Default template 

<!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>

Container class

container클래스는 아래와 같이 정의된다. 

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
}

@media ( min-width :768px) {
    .container {
        width: 750px
    }
}

@media ( min-width :992px) {
    .container {
        width: 970px
    }
}

@media ( min-width :1200px) {
    .container {
        width: 1170px
    }
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
}

Responsive web

반응형웹을 위한 부트스트랩:
미디어선택(media query)를 통해 화면비율, 폭, 디스플레이 종류 등 다양한 조건에 따른 맞춤 CSS가 가능하지만, 보통 min-width와 max-width만 사용한다.

  • 격자에서 열의 폭 변경
  • 필요하다면 요소들을 유동 대신 위아래로 쌓음
  • 장치에 적합하게 제목과 본문 크기 조절

미디어선택을 단지 모바일 사용자 지원의 첫걸음으로 자제하여 사용하라. 큰 프로젝트라면 미디어선택을 층층이 쌓기 보다는 각각을 위한 전용 코드를 고려하라. 

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Bootstrap modal in center

Showing up bootstrap.js modal dialog into center, when we dont use default width.
here is the hack: 

$("#headerPreview").modal('show').css(
{
    'margin-top': function () {
        return -($(this).height() / 2);
    },
    'margin-left': function () {
        return -($(this).width() / 2);
    }
})

Download

  • Zekitalk-htdocs.140317-7.zip: Zekitalk 모바일 및 데스크탑 웹페이지 샘플.

Theme favorites

See also

  • CSS
  • LESS
  • Loopple - 드래그 앤 드롭으로 대쉬보드 만들기

Favorite site

Guide

Theme

References

  1. Use this: class="img-responsive" ↩