응답하라 반응형웹 - 3. bootstrap
DESCRIPTION
응답하라 반응형 웹 발표 세번째 시간 - 부트스트랩TRANSCRIPT
응답하라 반응형웹3.부트스트랩
Speaker
Server-side Engineer강환기 (http://www.facebook.com/xangfi)
Server-side Engineer변용훈 (http://www.facebook.com/yhbyun)
반응형 웹 개발자를 위한가장 인기 있는
프론트엔드 프레임워크
http://www.getbootstrap.com
Bootstrap
Everyone
Every device
All sizes
make front-end web development
easier & faster
Hello Bootstrapbasic 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>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
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>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
Mobile first모바일 환경에서 보여지는 컨텐츠의 처리를 최우선으로 하자.
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
meta tag
http-equiv(전처리구문) : http-equiv를 먼저 실행하고 페이지를 로딩
viewport : 뷰포트 : 장치의 화면에 출력되어 보여지는 영역
<!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>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
Internet Explorer 8 and Respond.js (Polyfills)
부트스트랩 버젼 2에서는 IE 7까지 지원을 했었다. 버젼 3도 IE7에서 동작은 한다.
버젼3에서는 HTML5 , CSS3 요소를 많이 사용하여 IE9 이하에서는 동일하게 보여지지 않을 수 있다.
때문에 html5shiv.js , respond.js를 링크 시켜야 한다.
Supported browsers
8-11
그림의 브라우저는 모두 마지막 버전을 기준으로 지원하고 있다.
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
makes
faster & easier
부트스트랩에 포함되어있는 플러그인들은 제이쿼리 기반으로 동작한다.
플러그인이 정상 동작하기 위해서 제이쿼리를 링크시켜야 한다.
부트스트랩의 사용환경 설정은 빠르고 쉽다.
Install BootstrapDownload
CDN
Bower Install
Downloadbootstrap-3.1.1-dist.zip
현재 부트스트랩 버전 3은 MIT라이센스를 따르고 있다.
CDN<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript --><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
Responsive tables & images
Responsive utilities
@media
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 class="col-xs-3">03</div> <div class="col-xs-6">06</div> <div class="col-xs-3">03</div> </div>
<div class="row"> <div class="col-xs-4">04</div> <div class="col-xs-4">04</div> <div class="col-xs-4">04</div> </div>
<div class="row"> <div class="col-xs-6">06</div> <div class="col-xs-6">06</div> </div>
<div class="row"> <div class="col-xs-8">08</div> <div class="col-xs-6">06</div> </div></div>
Grid System Demohttp://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 optionsprefix
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="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
Responsive tables & images
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-xs
.visible-sm
.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그리드 시스템
반응형 테이블과 이미지
반응형 유틸리티
Add more@media
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
Customizing
CSS코드를 직접 수정 및 추가하여 확장하거나
CSS 부분수정
Less code 직접 수정
Bootstrap 사이트에서 제공하는 커스터마이즈 & 다운로드를 통하여 수정.
Customizer를 이용
Conclusion
프론트엔드 개발 누가 ?
Everyone
All sizes
Responsive utilities
@media
Grid system
Bootstrap
아!반응형
Reference urlBootstrap
http://getbootstrap.com/getting-started/
Bootstrap Grid 동작 원리http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-workshttp://fearlessflyer.com/exploring-the-bootstrap-3-0-grid-system/
Bootply Online Editorhttp://www.bootply.com/
Bootstrap Themehttp://bootswatch.com/ (Free)https://wrapbootstrap.com/
Bootstrap Resourceshttp://bootsnipp.com/resources