Bootstrap All Functions #4

Bootstrap All Functions #4

Layout Tutorial - Bootstrap Fixed Layout

class="container"

class="row"

Layout Tutorial - Bootstrap Fluid Layout

class="container-fluid"

class="row-fluid"

Responsive Design - How does responsive web design work

size 마다 알맞은 css 를 적용해야 한다.

Responsive Design - Diving deep into a Responsive Web Design CSS

스크린에 따른 responsive web 을 위해서는 css 파일에 @media 를 명시해주어야 한다.

예를 들어

@media ( max-width:480px ) 은 480px 을 maximum 으로 가지는 web 에서 loading 하고,

@media ( min-width:768px ) and (max-width:979px ) 은 768~979px 을 가진 단말에서 작동한다.

Responsive Design - A little explanation.

반응형 웹을 위해 bootstrap 은 다음의 것들을 한다.

1. grid 에서 width, column 을 조정한다.

2. 필요한 경우 float 대신 stack element ( z-ordering ) 을 사용한다.

3. heading과 text 를 제대로 표시하기 위해 size 를 조정하기도 한다.

Responsive Design - Develop mobile-friendly layouts faster

- .visible-phone

 767px 혹은 그 이하의 phone 에서 보인다.

 768~979px 의 tablet 에서는 감춰진다.

 desktop에서도 감춰진다.

- .visible-tablet

 767px 이하의 폰에서는 감춰진다.

 768~979px 의 tablet 에서는 보여진다.

 desktop 에서도 감춰진다.

- .visible-desktop

  desktop 에서만 보여진다.

- .hidden-phone

 767px 이하의 폰에서는 감춰지고,

 tablet 과 desktop 에서는 보여진다.

- .hidden-tablet

 tablet 에서만 감춰진다.

- .hidden-desktop

 desktop 에서는 감춰진다.

@media, A little explanation, bootstrap, Bootstrap All Functions #4, Bootstrap Fixed Layout, column, Container, container-fluid, css, Develop mobile-friendly layouts faster, Diving deep into a Responsive Web Design CSS, fixed layout, float, fluid layout, GRID, heading, hidden-desktop, hidden-phone, hidden-tablet, How does responsive web design work, layout tutorial, max-width, min-width, Resize, responsive design, Row, row-fluid, Size, stack element, text, visible-desktop, visible-phone, visible-tablet, width, z-ordering, 반응형 디자인, 반응형 웹, 부트스트랩