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="en">
<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>
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="en">
...
</html>
Responsive meta tag
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <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.