Bootstrap에서 많이 쓰는 것들.

다음은 Bootstrap4 시스템을 기반으로 기술한 것입니다.

배치

container

가장 바깥쪽의div에 사용됩니다.
전체적인 배치.

<div class="container">
</div>

row, col

별열판식을 사용하다.

<div class="row">
  <div class="col">
    AAA
  </div>
  <div class="col">
    BBB
  </div>
</div>

열 폭을 조정할 때 전체 열을 12부분으로 분할한 후의 몇 가지 사용을 지정할 수 있다.

<div class="row">
  <div class="col-4">
    AAA
  </div>
  <div class="col-8">
    BBB
  </div>
</div>

margin, padding

0에서 5까지 지정할 수 있습니다.

<div class="m-2 p-2">
</div>

상하좌우를 별도로 지정할 수도 있다.
또는 위아래(y) 및 좌우(x)로도 지정할 수 있습니다.

<div class="mt-2 mb-5">
</div>

<div class="mx-2">
</div>

auto를 지정하면 반대 방향으로 압축됩니다.

<div class="ml-auto">
  このdivは右寄せになる
</div>

text-center, text-left, text-right

글자를 긁어모으다.
주의점으로div와 p 등 Block 요소에만 효과가 있습니다.
스핀 등 인라인 요소로 설정돼도 무시된다.

<div class="text-center">
  some text here
</div>

display

이동 및 표시 여부 전환에 자주 사용됩니다.

<div class="d-none d-sm-block">
  スマホ画面のときだけ表示
</div>
<div class="d-block d-sm-none">
  スマホ画面以外のときだけ表示
</div>

요소 장식

text-{color}

문자 색상을 설정합니다.

<div class="text-dark">
</div>

bg-{color}

배경색을 설정합니다.

<div class="bg-light">
</div>

navbar

보통 페이지에서navbar만 사용합니다.필요에 따라 여러 개의 nav가 가능합니다.

<nav class="navbar">
</nav>

nav

<ul class="nav">
  <li class="nav-item">
    <a href="" class="nav-link">some link</a>
  </li>
</ul>

에 flex-column을 더하면vertical이 된다.

<ul class="nav flex-column">
  <li class="nav-item">
    <a href="" class="nav-link">some link</a>
  </li>
</ul>

table

테이블이 자동으로 장식됩니다.

<table class="table">
</table>

img

그림을 스펀지 모양으로 만들다.

<img src="..." class="img-fluid" alt="...">

button

<button type="button" class="btn btn-primary">
</button>

form

<form>
  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control">
  </div>
</form>