Front/CSS
Bootstrap
by Hyeon_
2021. 12. 6.
Bootstrap
- HTML, CSS, JS 라이브러리
- jQuery 기반의 HTML5 Web Framework
- 프론트엔드에서 작동되는 프레임워크
- 트위터에서 사용하던 각종 레이아웃, 버튼, 입력 요소 등 UI 요소들을 누구나 사용할 수 있도록 만들어진 오픈소스 프레임워크 (라이브러리)
- HTML/CSS 기반의 템플릿 양식, 버튼, 내비게이션 등 다양한 UI 요소 포함
- 자바스크립트 선택적 확장 가능
특징
- 쉽고 편리한 사용 가능
- HTML/CSS 기본 지식만 있으면 누구나 사용 가능
- 반응형 웹 디자인
- PC 또는 스마트폰이나 태블릿 등의 모바일용 디자인 지원
- 모든 최신 브라우저와 호환
기능
- CSS 기능 : 디자인이나 스타일 적용
- 컴포넌트 기능 : 내비게이션 바, 탭, 버튼 등의 기능을 간단하게 수정해서 사용 가능
- 자바스크립트 기능 : 사용자그이 액션과 상호작용하는 기능 제공
장점
- 쉽고 빠르게 다양한 기능 개발 가능
- 모바일 환경과 반응형 웹 제작 가능
- 수준 높은 퀄리티 제공
- 개발 시간 단축 -> 개발 비용 절감
- 오픈 소스이며, 상업적 이용 가능
단점
사용 방법
다운로드
Bootstrap 사용방법
- 부트스트랩에 정의된 다양한 클래스들을 HTML 태그에 적용하고(class 속성에 지정) 부가적인 속성들을 정의한 클래스들을 조합해서 사용
- <태그 class="부트스트랩에 지정된 클래스 이름">
<button type="button" class="btn btn-primary"></button>
<div class="container bg-primary text-white"></div>
Bootstrap 색상
주요 기능
- Containers
- Jumbotron
- Grid
- button
- Table
- Image
Containers
- 레이아웃 최상위 요소로 다른 요소 포함
- <div class="container"></div>
- .container : 반응형 고정 폭 컨테이너
- .container-fulid : 뷰포트 전체 폭까지 늘어나는 최대 폭 컨테이너
Containers 예제
- viewport 포함
- <link> : css/bootstrap.min.css
- <script> : jQuery 파일 소스 지정
- <script> : js/bootstrap.min.js 소스 지정
- 주의!!
container.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=divice-width, initial-scale=1">
<title>Bootstrap 컨테이너</title>
<!--link -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- jQuery가 먼저 와야함!!!! -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container bg-primary text-white">
<h1>Bootstrap</h1>
<p>Container</p>
</div>
<div class="container-fluid bg-danger text-white">
<h1>Bootstrap</h1>
<p>Container</p>
</div>
</body>
</html>
