응답하라 반응형웹 - 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

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>



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

















</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 BootstrapDownload

CDN

Bower Install

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

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를 사용하는

❏ 쉬운 레이아웃 옵션

http://getbootstrap.com/css/#grid-example-basic

http://getbootstrap.com/css/#grid-less

http://getbootstrap.com/css/#grid-less

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

http://codepen.io/kangki/pen/Jvwtq

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


.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 & 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;를 적용.


.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


@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

http://getbootstrap.com/getting-started/

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

http://fearlessflyer.com/exploring-the-bootstrap-3-0-grid-system/

http://fearlessflyer.com/exploring-the-bootstrap-3-0-grid-system/

http://www.bootply.com/

http://bootswatch.com/

https://wrapbootstrap.com/

http://bootsnipp.com/resources

Technology

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