그럼에도 불구하고

👨‍💻

[Bootstrap] 부트스트랩이란? 본문

HTML, CSS/CSS Framework

[Bootstrap] 부트스트랩이란?

zenghyun 2022. 12. 27. 16:26

오늘은 부트스트랩에 대해 알아보자

 

 

Bootstrap은 빠르고 간편한 반응형 웹 디자인(responsive web design)을 위한 open-source front-end framework이다.

HTML, CSS JavaScript로 만들어진 typography, 입력양식(forms), 버튼, 테이블, 탭, 네이베이션, 이미지 캐러셀 등을 제공하며 추가적으로 JavaScript plugin들을 제공한다.

 

 

 

https://getbootstrap.com/

 

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

 

한글 버전 

http://bootstrapk.com/

 

부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.

프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드

bootstrapk.com

 

 

[ 사용 방법 ]

 

 

메인 홈페이지에 들어오면, 좌측 상단에 Docs가 있다.

 

 

Docs에서 부트스트랩을 시작하는 방법은 여러가지가 있다. 그중 대표적인 방법 2가지를 알아보자.  

 

1. 컴파일되고 최소화된 CSS, 자바스크립트, 폰트 등이 담긴 부트스트랩 파일을 다운로드한다. 

 

2. Quick start에서 css와 js link를 copy 하여 내 코드에 넣는다. 

 

 

 그 후에 Components에서 내가 사용하고 싶은 기능을 선택해보자 

 

 

 

 

 

Buttons에서 예시를 사용하고자 한다면, HTML 코드를 copy해서 내 코드에 넣고 실행시키면 된다. 

 

 

이런 식으로 사용할 수 있다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</head>
<body>
  <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>
</body>
</html>

 

 

결과

 

 

 

 

 

 

Bootstrap은 이처럼 미리 선언해 놓은 다양한 class와 자바스크립트 코드로 이루어진 프런트엔드 프레임워크이다.

Bootstrap의 class를 지정하는 것으로 빠르고 쉽게 일관된 스타일의 반응형 웹사이트를 작성할 수 있게 한다. 

Comments