응답하라 반응형웹 - 3. bootstrap

응답하라 반응형웹
3.부트스트랩

Speaker
Server-side Engineer
강환기 (http://www.facebook.com/xangfi)
Server-side Engineer
변용훈 (http://www.facebook.com/yhbyun)

반응형 웹 개발자를 위한
가장 인기 있는
프론트엔드 프레임워크

http://www.getbootstrap.com
Bootstrap

make front-end web development
easier & faster

Hello Bootstrap
basic template

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet">



</head>
<body>
<h1>Hello, world!</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>
basic template

<!DOCTYPE html>
<html lang="ko">
<head>

<!--[if lt IE 9]>
Mobile first
모바일 환경에서 보여지는 컨텐츠의 처리를 최우선으로 하자.

<!DOCTYPE html>
<html lang="ko">
<head>


</head>
<body>
Internet Explorer 8
and Respond.js (Polyfills)
부트스트랩 버젼 2에서는 IE 7까지 지원을 했었다. 버젼 3도 IE7에서 동작은 한다.
버젼3에서는 HTML5 , CSS3 요소를 많이 사용하여 IE9 이하에서는 동일하게 보여지지 않을 수 있다.
때문에 html5shiv.js , respond.js를 링크 시켜야 한다.

Supported browsers
8-11
그림의 브라우저는 모두 마지막 버전을 기준으로 지원하고 있다.

</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>
makes
faster & easier
부트스트랩에 포함되어있는 플러그인들은 제이쿼리 기반으로 동작한다.
플러그인이 정상 동작하기 위해서 제이쿼리를 링크시켜야 한다.
부트스트랩의 사용환경 설정은 빠르고 쉽다.

Install Bootstrap
Download
CDN
Bower Install

Download
bootstrap-3.1.1-dist.zip
현재 부트스트랩 버전 3은 MIT라이센스를 따르고 있다.

CDN

<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Content delivery network
네트워크 상황을 고려하여 사용한다.

Bower Install
$ bower install bootstrap
or
$ bower install bootstrap-css

DEMO
부트스트랩 설치
헬로 부트스트랩

Bootstrap includes a
Responsive

Grid system
Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size increases.
It includes predefined classes for easy layout options, as well as powerful
mixins for generating more semantic layouts.
❏ 모바일을 우선으로
❏ 12개의 컬럼을 통하여
❏ 미리지정된 CSS를 사용하는
❏ 쉬운 레이아웃 옵션

table(table)
<table>
</table>
tr(table row)
<tr>
</tr>
td(table data)
<td>
</td>

.container(컨테이너)
<div class=”container”>
</div>
.row(로우)
<div class=”row”>
</div>
.col-*-*(컬럼)
<div class=”col-sm-12”>
</div>

<div class="container">
<div class="row">
<div class="col-xs-12">12</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
Grid System Demo
http://codepen.io/kangki/pen/Jvwtq

Magic Number 12
❏ container는 여러 개의 row를 수직으로 쌓아 구성
❏ row를 동일한 크기의 12개의 column으로 나누어 관리

.container
.row
.col-md-*(column)
.col-md-*(column)
.row
.col-md-*(column)
.col-md-*(column)
.col-md-*(column)
❏ .container (컨테이너)
❏ .row (로우)
❏ .col-md-* (컬럼 [* = 숫자] )
❏ column 숫자 합 = 12
Grid system 구성

Grid options 구조
.col device prefix
(디바이스 크기)
숫자
- -

.col-*-* Extra small
(초소형)
Medium
(보통)
Large
(대형)
Small
(소형)
없음(auto) 750px 970px 1170px
auto 60px 78px 95px
.col-xs-* .col-sm-* .col-md-* .col-lg-*접두어
container
크기
column
최대크기
언제나
수평 배열
수평 중단점(container의 최대크기)보다 작으면
그리드가 하단으로 떨어져 내린다.
그리드 배치

Grid options
prefix
offset
nesting
ordering

prefix
.col-*-*
.col-xs-6
.col-sm-4
.col-md-3
.col-lg-2

.col-*-offset-*
.col-xs-offset-6
.col-sm-offset-4
.col-md-offset-3
.col-lg-offset-2
offset

<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-4">.col-md-8 .col-md-offset-4</div>
</div>
.col-md-4
.col-md-4
.col-md-offset-4
.col-md-8
.col-md-offset-4

.container
.row
.col-md-*(column)
.row
.col-md-*(column)
.col-md-*(column)
.row
.col-md-*(column)
nesting

ordering
.col-*-push-* .col-*-pull-*

<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
.col-md-3
.col-md-pull-9
.col-md-9
.col-md-push-3
.col-md-9
.col-md-push-3
.col-md-3
.col-md-pull-9

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

column resets
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

<div class="clearfix visible-xs"></div>
</div>

Responsive tables
<div class="table-responsive">
<table class="table">
...
</table>
</div>
디바이스의 넓이가 768px 보다 작은 경우 테이블에 가로 스크롤 할 수 있다.

Responsive images
<img src="..."
class="img-responsive"
alt="Responsive image">
max-width : 100%;
이미지는 부모 엘리멘트에 꽉차게 표시.
반응형 이미지는 max-width : 100%;와 height : auto;를 적용.

Responsive utilities
.visible-*
.hidden-*
@media

.visible-*
Extra
small
Small
Medium
Large
.visible-xs
.visible-sm
.visible-md
.visible-lg

.hidden-*
Extra
small
Small
Medium
Large
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

.hidden-print
Browser Print
PrintBrowser
.visible-print

DEMO
그리드 시스템
반응형 테이블과 이미지
반응형 유틸리티

http://upgrade-bootstrap.bootply.com/
http://code.divshot.com/bootstrap3_upgrader/
Migrating from 2.x to 3.x

Disabling Responsiveness
❏ viewport 메타 태그 삭제
❏ .container의 width 오버라이드
width:970px !important;
❏ 그리드는 .col-xs-* 클래스만 사용
❏ 네비게이션 바의 접히거나 펼쳐지는 동작 제거

Helper Classes
.clearfix
.pull-left
.pull-right

CSS코드를 직접 수정 및 추가하여 확장하거나
CSS 부분수정

Bootstrap 사이트에서 제공하는 커스터마이즈 & 다운로드를 통하여 수정.
Customizer를 이용

프론트엔드 개발 누가 ?

Responsive utilities
@media
Grid system

Reference url
Bootstrap
http://getbootstrap.com/getting-started/
Bootstrap Grid 동작 원리
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
http://fearlessflyer.com/exploring-the-bootstrap-3-0-grid-system/
Bootply Online Editor
http://www.bootply.com/
Bootstrap Theme
http://bootswatch.com/ (Free)
https://wrapbootstrap.com/
Bootstrap Resources
http://bootsnipp.com/resources

응답하라 반응형웹 - 3. bootstrap

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 응답하라 반응형웹 - 3. bootstrap

Similar to 응답하라 반응형웹 - 3. bootstrap (20)

응답하라 반응형웹 - 3. bootstrap