Bootstrap - Intro

Bootstrap이란?

- 웹 디자인용 오픈소스 프레임워크

- HTML, CSS, JS 사용

- 트위터에서 개발

그런데 Framework란?

- 소프트웨어의 생산성을 높이기 위해 개발된 방법

- 반복된 구조나 기능들을 추상화시켜 재사용이 가능하도록 하는 소프트웨어 환경

- 즉, 미리 만들어놓은 기능을 어플리케이션에서 손쉽게 재사용할 수 있도록 해준다

- 따라서 라이브러리에 비해 프레임워크의 주도권이 강함 (전용 문법 多)

Bootstrap의 장점

- 오픈소스

- 디자인 코딩 부담 완화

- Grid disply를 바탕으로 다양한 사이즈와 비율을 지원

- 반응형 웹 대응 쉬움

Bootstrap의 단점

- 기존 코드와 충돌

- 추가 메모리 소요 (부트스트랩 전체 이용시 126kb의 CSS, 29kb의 JS 코드 포함하게됨)

- 디자인 보편화

- 불필요한 class 발생 (DOM이 불필요한 class로 가득 채워짐)

 

타이포그래피

- 단순히 class 명을 추가하는 것만으로 텍스트 정렬을 구현할 수 있다

 

  <p class="text-start">Start aligned text on all viewport sizes.</p>
  <p class="text-center">Center aligned text on all viewport sizes.</p>
  <p class="text-end">End aligned text on all viewport sizes.</p>

 

 

테이블

- 테이블에도 스타일을 추가할 수 있다 (zebra-stripe를 추가)

 

  <table class="table table-striped">
    <thead>
      <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>