https://getbootstrap.kr/docs/5.2/, https://getbootstrap.kr/docs/5.3/
https://getbootstrap.com/docs/5.2, https://getbootstrap.com/docs/5.3
목차
Getting started
Introduction
- 모바일에서의 proper responsive behavior(적절한 반응형 동작)을 위해
<meta name="viewport">를 넣어주세요.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
- width: 픽셀(1~10000)이나 디바이스 너비
- initial-scale: 페이지가 처음 로드되었을 때 줌 레벨 (0.1~10, default: 1)
Important globals
HTML5 doctype
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky(지독한) and incomplete styling.
<!doctype html>
<html lang="ko">
...
</html>
Viewport meta
우리는 모바일 디바이스에 코드를 최적화하고, CSS 미디어 쿼리를 사용해서 필요한 컴포넌트를 scale up하는 mobile first 전략으로 부트스트랩은 개발한다. 모든 디바이스에서 적절한 렌더링과 터치 줌을 보장하기 위해서, responsive viewport meta 태그를 <head>에 넣어라.
<meta name="viewport" content="width=device-width, initial-scale=1">
Customize
Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
Sass
Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
File structure
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Layout
Breakpoints
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
뷰포트나 장치의 크기에서 레이아웃이 적응할 수 있는 너비이다.
Core concepts
- Breakpoints are the building blocks of responsive design.
- Use media queries to architect your CSS by breakpoint.
- Mobile first, responsive design is the goal.
Available breakpoints
These breakpoints can be customized if you’re using our source Sass files.
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm
|
≥576px |
| Medium | md
|
≥768px |
| Large | lg
|
≥992px |
| Extra large | xl
|
≥1200px |
| Extra extra large | xxl
|
≥1400px |
Media queries
Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces.