BootStrap으로 열을 반응형 디자인으로 만들기

HTML, CSS뿐이라면 반응이 어려워하지만 Bootstrap을 사용하면 간단!

우선 【전제】WEB사이트의 가로폭은 12개의 BOX로 되어 있다

←------------------WEB 사이트의 가로폭-----------------→


1
2
3
4
5
6
7
8
9
10
11
12



Bootstrap의 Grid System에서는 Width가 12개의 BOX로 깔려 있다.

PC, 타블렛, 스마트폰에 의해, 그 12개의 BOX중 몇개를 사용하는지를 각각 지정할 수 있다. 설명 어렵기 때문에 우선 코드.

column-responsive.html

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red; border: 1px solid;">
        コンテンツ
    </div>
  </div>
</div>

우선 div class="row(행)"안에 column(열) div를 작성한다.

여기서 포인트가
①col-lg-2 (PC표시때는 12개의 BOX 중 2개의 스페이스 사용해요)
②col-md-3 (태블릿 표시 시에는 12개의 BOX 중 3개의 스페이스 사용해요)
③col-sm-12 (스마트폰 표시시는 12개의 BOX 중 12개의 스페이스 사용해요)

즉
①2/12 = 6 분할 (6 칼럼)
②3/12 = 4분할(4열)
③12/12 = 1분할(1칼럼)
된다.

덧붙여서 lg는 PC, md는 태블릿, sm은 스마트폰의 표시 칼럼이라고 했지만, 엄밀하게는 가로폭의 Pixcel수로 단락하고 있는 것 같다.


(BootStrap의 HP에서 발췌)

반응형화, Bootstrap을 사용하면 엄청 간단하기 때문에 매우 추천.
덧붙여서 칼럼의 반응형화할 때는, 기본적으로 최초로 class="container"의 div를 사용하기 때문에 조심해.

덧붙여서 이쪽이 공식 문서
htps : // 게이 t보오 tst et al p. 이 m / cs / 4.4 / t / g d /

덧붙여서, Bootstrap을 사용할 때는 head 태그안에 아래와 같이 넣지 않으면 사용할 수 없기 때문에 주의를.

getstarted.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Udemy의 Angela 님의 강좌의 메모입니다. (영어이지만 매우 이해하기 쉽습니다!) → 링크