BootStrap < 2021 - 11- 01 >

BootStrap

BootStrap이란?

🔹 웹 페이지 개발 시 화면을 쉽고 일관성있게 구현할 수 있도록 Twitter에서 만든 Framework

🔹 각종 레이아웃, 버튼, input 태그 등 컴포넌트를 CSS, JS 등으로 미리 만들어놓고 제공한다.

🔹 클래스를 지정해서 원하는 속성을 적용시킬 수 있다.

---

BootStrap 개요

버튼 (button) 관련 속성 (컴포넌트)

• 버튼 크기 : .btn-lg , .btn-sm 적용

    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-secondary btn-lg">Large button</button>

• 버튼 비활성화 : disabled

    <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

• 버튼 블록(grid 이용) : class="d-grid gap-2 col-6 mx-auto"

    <div class="d-grid gap-2 col-6 mx-auto">
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-primary" type="button">Button</button>
      </div>

---

BootStrap 유틸리티

배경색 관련 유틸리티

배경색 : bg-
그라데이션 : bg-gradient
불투명도 : bg-opacity-*

  <div class="bg-primary">배경1</div>
  <div class="bg-dark">배경2</div>
  <div class="bg-danger bg-opacity-50">배경3</div>

글자색 관련 유틸리티

글자색 : text-
불투명도 : text-opacity-*

  <div class="text-danger">테스트1</div>
  <div class="text-white bg-dark">테스트2</div>
  <div class="text-white-50 bg-dark">테스트3</div>

테두리 관련 유틸리티

테두리 : border

border-top, border-bottom, border-start, border-end
색상 : border- 색상
두께 : border- *
모서리 : rounded
rounded-top, rounded-bottom, rounded-start, rounded-end, rounded-circle, rounded-pill
모서리 곡률 : rounded-1~3

  <p class="border border-danger border-3 rounded">테두리 테스트 1</p>
  <p class="border-bottom border-success border-2">테두리 테스트 2</p>
  <p class="border-bottom border-warning border-5">테두리 테스트 3</p>

🔸 크기 조절 유틸리티

25% 단위
폭 : w-25, w-50, w-75, w-100, w-auto
높이 : h-25, h-50, h-75, h-100, h-auto

필요에 따라 max-width, max-height 사용 가능 : mw, mh

    <div id="wrapper1" class="border">
    <div class="w-50 h-25 border bg-primary"></div>
    <div class="w-25 h-50 border bg-warning d-inline-block"></div>
    <div class="w-25 h-50 border bg-warning d-inline-block"></div>
    </div>

🔸 간격 조절 유틸리티

m : margin, p : padding
t : top, b : bottom, s : start, e : end, x : x축 이동, y : y축 이동

  <div class="border d-inline-block w-25 mt-3 mb-5">테스트1</div>
  <div class="border d-inline-block w-25 mx-4 p-4">테스트2</div>
  <div class="border">테스트3</div>

텍스트 정렬 유틸리티

fs : font-size, fw : font-weight
왼쪽 정렬 : text-start
오른쪽 정렬 : text-end
중앙 정렬 : text-center

  <p class="border p-3 m-3 text-start fs-3 fw-bold">왼쪽 정렬</p>
  <p class="border p-3 m-3 text-center fs-4">가운데 정렬</p>
  <p class="border p-3 m-3 text-end fs-5"> 오른쪽 정렬</p>

float 관련 유틸리티

float-start
float-end
float-none -> float:none 이므로 다음에 작성할 부분에서 clear:both 처리를 해주어야 겹치지 않음

  <div class="float-start">Float start on all viewport sizes</div><br>
  <div class="float-end">Float end on all viewport sizes</div><br>
  <div class="float-none">Don't float on all viewport sizes</div>