bootstrap_scaffolding

1. Bootstrap
lsh00124@naver.com 이상훈
Scaffolding

2. Contents
1. Preview
2. Schedule
3. Grid system
4. Grid options
- Prefix
- Offset
- Nesting
5. Fluid grid system

3. Bootstrap
트위터에서 개발한 UI 툴킷 : 적은 코딩으로도 유려하고 풍부한 결과를 얻을 수 있는 강력한 라이브러리
반응형 웹이라는 트랜드를 반영 : 한번의 개발로 PC와 모바일 모두에 대응할 수 있어 개발시간 단축, 유지보수의 이점
최고 수준의 UI 디자이너 : 디자이너가 아니라도 일정 수준 이상의 결과물을 얻음
매끄럽고, 직관적이고, 강력한!!

4. Bootstrap
트위터에서 개발한 UI 툴킷 : 적은 코딩으로도 유려하고 풍부한 결과를 얻을 수 있는 강력한 라이브러리
반응형 웹이라는 트랜드를 반영 : 한번의 개발로 PC와 모바일 모두에 대응할 수 있어 개발시간 단축, 유지보수의 이점
최고 수준의 UI 디자이너 : 디자이너가 아니라도 일정 수준 이상의 결과물을 얻음
매끄럽고, 직관적이고, 강력한!!

5. ``
``
``
``
Get started
Base css
``Scaffolding
``Component
``
``
Javascript
이미지 갤러리 site
Schedule 이미지 갤러리 사이트 사진 보여주기

6. ``
``
``
``
Get started
Base css
``Scaffolding
``Component
``
``
Javascript
이미지 갤러리 site
Schedule 이미지 갤러리 사이트 사진 보여주기

7. Scaffolding
건축공사 때에 높은 곳에서 일할 수
있도록 설치하는 임시가설물로, 재료
운반이나 작업원의 통로 및 작업을
위한 발판

8. Grid system
12개의 Columns
미리 지정된 CSS
간단한 레이아웃 옵션

9. Grid system
<div class = “row”>
<div class = “container”>
<div class = “col-md-4”>
…
</div>
<div class = “col-md-4”>
…
</div>
<div class = “col-md-4”>
…
</div>
</div>
</div>

10. Grid system
.col 디바이스 크기 그리드 숫자
<div class = “col-md-4”>
Extra small
(초소형)
Small
(소형)
Medium
(보통)
Large
(대형)
.col-xs-* .col-sm-* .col-md-* .col-lg-*

11. Grid system
<div class = “row”>
<div class = “col-md-3”> 첫번째 span </div>
<div class = “col-md-3”> 두번째 span </div>
<div class = “col-md-3”> 세번째 span </div>
<div class = “col-md-3”> 네번째 span </div>
</div>
row
12
첫번째
column
3
두번째
column
3
세번째
column
3
네번째
column
3

12. <div class = “row”>
<div class = “col-md-12”>12</div>
</div>
<div class = “row”>
<div class = “col-md-3”>03</div>
<div class = “col-md-6”>06</div>
<div class = “col-md-3”>03</div>
</div>
<div class = “row”>
<div class = “col-md-6”>06</div>
<div class = “col-md-6”>06</div>
</div>
<div class = “row”>
<div class = “col-md-8”>08</div>
<div class = “col-md-6”>06</div>
</div>
12
03 06 03
06 06
08
06
Grid system

13. Grid options
1. Prefix
2. Offset
3. Nesting

14. Prefix (접두사)
.col 디바이스 크기 그리드 숫자
<div class = “col-md-4”>
Extra small
(초소형)
Small
(소형)
Medium
(보통)
Large
(대형)
.col-xs-* .col-sm-* .col-md-* .col-lg-*

15. Offset (상쇄)
04 04
08

16. Nesting(둥지)
Level 1 column
Level 2 Level 2

17. fluid 그리드 시스템은 칼럼의 폭이 퍼센트 대신에 픽셀을 이용한다.
그래서 각각의 디바이스의 화면 해상도에 맞춰진 비율을 보장한다.
Fluid grid system
http://www.designinfluences.com/fluid960gs/12/fixed/
Q) Container에서 Fixed와의 차이점은 ?
1. Fixed
<div class = “container”> 로 감싸주면 고정된 div가 중간정렬이 된다.
2. Fluid
<div class = “container-fluid”> & <div class = “row-fluid”>를 하게 되면 fluid
상태에서 (해상도에 맞춰진) 중간 정렬이 된다.

18. 궁금한 점이 있으시면 질문해주세요!