Bootstrap 시작하기

Build fast, responsive sites with Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

Bootstrap 공식 홈페이지에 나와있듯이 Bootstrap은 프론트엔드 툴킷으로 반응형 웹을 더 빠르게 만들 수 있게 해줍니다.

1. Bootstrap 설치 방법

CDN 이용

HTML 파일에 다음과 같이 <head> 태그 안에 Bootstrap CSS를 추가합니다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

npm 이용

npm i bootstrap@5.3.3

2. Bootstrap 사용 방법

Bootstrap을 이용하면 버튼과 같은 UI 요소를 손쉽게 스타일링할 수 있습니다.

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-light">Light Button</button>
<button class="btn btn-dark">Dark Button</button>

위와 같이 미리 정의된 class를 통해 스타일을 제공해줍니다.

3. Bootstrap 수정 방법

Bootstrap 스타일을 수정할 때 CSS 선택자를 활용해 특정 HTML 요소에만 스타일을 적용할 수도 있습니다. 이때, 고유한 클래스를 추가해 선택자를 명확히 지정하는 것이 좋습니다.

<button class="btn btn-primary custom-btn">Custom Button</button>

위와 같이 custom-btn이라는 고유한 클래스를 추가하면 위 요소만을 지정하여 특정 요소만 수정하기에 좋습니다.

FrontEnd-Dev