bootstrap(부트스트랩)이란, bootstrap 시작하기, bootstrap 개념, 사용법, 소개, 사용방법, 기초 (html/ css / 프론트엔드)

부트스트랩 이란

부트스트랩이란, 반응형 웹 어플리케이션 제작에 특화된 프론트엔드 프레임워크이며
상업적 용도로도 무료로 사용 가능한 오픈 소스 입니다.
간단하고 빠르게 반응형/모바일에 맞춰서 UI를 디자인할 수 있습니다.
가장 유명한 오픈소스 툴킷이며 강력한 자바스크립트 플러그인을 포함합니다.

부트스트랩 설치

설치 방법은 다양하게 제공하고 있습니다.

파일다운로드 방식
설치과정없이, 파일을 다운받아서 프로젝트에 삽입해주면 됩니다.
먼저 아래 사이트에 들어가서 Download 버튼을 눌러 부트스트랩을 다운받습니다.
https://getbootstrap.com/docs/5.1/getting-started/download/

아래는 다운로드한 파일을 참조 해주었을때의 내용입니다

압축을 풀면 많은 파일이 나오는데, 아래와 같이, 앞에서 명시한 bootstrap.bundle.min.js 파일과 bootstrap.min.css 만 사용해줘도 기본적인 bootstrap의 기능을 사용할수 있답니다!

<html>
    <head>
        <link href="./bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
         <button type="button" class="btn btn-primary">Primary </button>
         <script src="./bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js" />
    </body>
<html>

CDN파일을 import 하는방식
파일다운로드 방식이나 CDN 방식은 HTML 문서에 아래와 같이 link / script 태그를 추가하여 import해주면됩니다.
먼저 바탕화면에 test.html 파일을 만들어줍니다.
파일을 열어서 아래와 같이 입력해줍니다.
(메모장이나 vs code 등 아무 에디터나 사용해도 됩니다)

<html>
    <head>
        <link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap">https://cdn.jsdelivr.net/npm/bootstrap</a>@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    <body>
    hello world!
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script>
    </body>
<html>

패키지 매니저로 추가하는 방식으로 설치하기
기존에 패키지 매니저를 사용하고 있다면 아래와 같이 패키지 매니저를 이용한 설치/의존성추가도 가능합니다.

// npm (js)
npm install bootstrap

// yarn (js)
yarn add bootstrap

// gem (ruby)
gem 'bootstrap', '~> 5.1.3'
gem install bootstrap -v 5.1.3

// composer (php)
composer require twbs/bootstrap:5.1.3

// nuget (.NET)
Install-Package bootstrap
Install-Package bootstrap.sass

사용하기

대표적으로 생각되는 컴포넌트인 버튼을 사용해보겠습니다.
body 태그 안에 아래 내용을 입력해줍시다.

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

짠! 아래와 같이 이쁜 버튼이 완성되었습니다.

아래와 같이 class 속성을 바꿔주면 다양한색깔로 표현됩니다.

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

아래와 같이 class에 btn-lg나 btn-sm 을 써주면 크기도 변한답니다.

1 2	<button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-primary btn-sm">Small button</button>

좀 더 다양한 스타일을 보고싶으시다면 아래 문서를 참조하면 확인가능합니다!
https://getbootstrap.com/docs/5.1/components/buttons/

bootstrap을 쓰면 각각의 브라우저에서 동일하게 보일수 있게 할 수 있습니다.
먼저, 부트스트랩을 쓰지 않았을때의 <button>버튼 </button> 모양은 다음과 같습니다.

크롬
인터넷 익스플로러

부트스트랩을 썼을때의 각각의 브라우저에서의 <button>버튼 </button> 모양은 다음과 같습니다.

크롬
인터넷 익스플로러
파이어폭스

이것으로 부트스트랩이 무엇인지, 왜 쓰는지, 라이브러리 기본 사용법을 배웠습니다.
버튼 외에도 다양한 컴포넌트를 보고싶으시면 아래 주소에서 > Component 섹션을 눌러보시면 다양한 예제들이 있습니다!
https://getbootstrap.com/docs/5.1/getting-started/introduction/
bootstrap(부트스트랩)이란, bootstrap 시작하기, bootstrap 개념, 사용법, 소개, 사용방법, 기초 (html/ css / 프론트엔드)
#bootstrap,#twitter,#부트스트랩,#개념,#사용법,#기초,#프론트,#프론트엔드,#css,#framework,#프레임워크,#css프레임워크