[Bootstrap] Grid System, Form Style

Grid System

부트스트랩은 반응형, 모바일 우선 fluid grid system을 포함하며, 장치에 무관하게 View를 12개의 column으로 나눔

도입

1) row class는 contrainer class에 반드시 포함되어야 함. .contrainer는 가로를 고정하는 역할을 하거나, .container-fluid 로 화면 전체 사이즈로 고정하는 역할

2) 하나의 .row안에 hotizontal 그룹 포함. contents는 columns안에 포함되어야 함.

3) column은 padding을 content사이의 간격을 설정할 수 있으며 여기에서 설정된 padding은 .row와 첫번째, 마지막 column과의 padding의 값을 줄임으로써 상쇄됨.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

col class종류

1) .col-xs-?: 모바일(<768px)

2) .col-sm-?: 작은 디바이스(>=768px)

3) .col-md-?: 중간사이즈 데스크탑(>=992px)

4) .col-lg-?: 큰 사이즈 데스크탑(>=1200px)

Form Style

도입

1) .form-control 을 적용한 input, textarea, select 태그는 100%의 width를 가짐

2) .form-group을 적용하면 다수의 label-input 쌍 사이의 적절한 간격을 설정됨

form class종류

1) .form-inline : form contents(or form-group)를 가로 한 줄로 나열해줌

2) .form-horizontal : form contents(or form-group)를 세로 한 줄로 나열해줌

적용

    <div class="container">
      <div class="row" style="padding-top:20%">
        <div class="col-md-4 "></div>
          <div class="col-md-4 border border-light rounded " style="flex-align:center">
          <form style="margin:10px">
            <div class="form-group">
              <label for="InputId">아이디</label>
              <input type="text" class="form-control" id="id" placeholder="ID">
            </div>
            <div class="form-group">
              <label for="InputPassword1">Password</label>
              <input type="password" class="form-control" id="password" placeholder="Password">
            </div>
            <div class="checkbox">
              <label>
              <input type="checkbox"> 아이디 기억하기
              </label>
            </div>
            <button type="submit" class="btn btn-primary text-light">로그인</button>
          </form>
         </div>
    </div>
    </div>