Bootstrap
what is Bootststrap?
Bootstrap | Bootstrap은 프론트엔드 개발을 위한, 특히 css 스타일링과 responsive grid system을 쉽고 빠르게 구현할 수 있도록 도와주는 css framework이다. link와 script 태그에서 bootstrap cdn 링크를 연결하면, 해당 프로젝트에서 Bootstrap이 제공하는 편의를 이용할 수 있다.
+) bootstrap과 비슷한 기능을 하는 bulma, foundation, semantic UI와 같은 css framework도 존재한다.
- cdn | content delivery network
- 서버에 데이터를 요청할 때, 서버가 딱 한곳에만 위치한다면 데이터를 받아올 때 delay가 발생할 수 있다.
- 그래서 서버를 여러 곳에 두고, 데이터를 요청하는 사용자의 위치에서 가장 가까운 서버가 데이터를 보내준다.
- 만약 사용자가 이전에 이 링크에 방문한 기록이 있다면 local cache에 저장되기 때문에, 매번 데이터를 다운로드 할 필요가 없다.
- 동적인 처리(ex. drop down menu)가 아니라 grid system만 이용할 것이라면, css 파일만 연결해도 된다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
defer
></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
why people use bootstrap?
1. Grid System | grid 문서
<body>
<div class="container">
<div class="row">
<div class="col-4">
<!-- elements here -->
<p>col-4</p>
</div>
<div class="col-8">
<p>col-8</p>
</div>
</div>
</div>
</body>
- 반드시 container > row > col의 구조를 지켜야 한다.
- container | grid system이 적용되는 전체 영역
- row | grid system에서 한 줄의 영역
- 반드시 container의 direct child이어야 함
- col | 1 row = 12 col
- 반드시 row의 direct child이어야 함
- column의 좌우에는 항상 12px의 padding이 지정되어 있고, 이것이 gutter의 역할을 한다.
- container, row, col에는 이미 좌우 방향의 padding이나 margin이 설정되어있기 때문에, styling할 때 이 값들은 건들지 않는다(상하 방향은 값 조정해도 괜찮음).
2. Responsive Grid System | breakpoints, container
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-6 col-md-4">
<p>column</p>
</div>
</div>
</div>
- row에는 justify-content 클래스를 이용해서 정렬할 수 있도록 셋팅되어있다.
- column에는 576px 미만(모바일)에서는 col-12 크기로, 화면의 width가 576px 이상(sm)일 때에는 col-6의 크기로, 768px 이상일 때에는 col-4의 크기로 표기되도록 반응형 디자인을 쉽게 구현할 수 있다.
3. Pre-styled Components
- bootstrap은 스타일이 적용되어있는 여러 component를 제공하는데 그 중에서도 가장 많이 사용되는 컴포넌트는 navbar이다.
- navbar toggle이 closing 되지 않을 때
'Study > Bootstrap' 카테고리의 다른 글
| Form (0) | 2022.06.13 |
|---|---|
| Alignment (0) | 2022.06.10 |
| Grid system (0) | 2022.06.10 |
