Skip to content
Search

Bootstrap

lastmod 2025-02-28created 2014-03-1424 edits

Bootstrap is a web front-end development tool released as open source by Twitter. Bootstrap provides flexible HTML, CSS, and JavaScript templates along with various UI components and interactions, so it can serve as a starting point for building websites.

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

The container class is defined as follows. 

.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

Bootstrap for responsive web:
Media queries allow tailored CSS for various conditions such as aspect ratio, width, and display type, but usually only min-width and max-width are used.

  • Change column widths in the grid
  • Stack elements vertically instead of floating them, if needed
  • Adjust heading and body text sizes to suit the device

Use media queries sparingly, only as a first step toward supporting mobile users. For large projects, consider dedicated code for each target rather than layering media queries. 

/* 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 mobile and desktop web page sample.

Theme favorites

See also

Favorite site

Guide

Theme

References

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

author Zer0 sitemap