Bootstrap 4

부트스트랩 (Bootstrap)은 화면의 너비를 12 분할(12 격자, Grid)하여 웹페이지를 만든다.

Bootstrap 3의 격자형 레이아웃 시스템(Grid Layout System)은 4 가지 화면 너비를 기준으로 반응하도록 정의되어 있었다. 768px 미만(스마트폰), 768px 이상(태블릿), 992px 이상(작은 화면의 데스크탑), 1200px이상(큰 화면의 데스크탑)에 따라 신축성있게 화면이 바뀌어 반응형이 가능하도록 했다.

Bootstrap 4부터는 이 격자형 레이아웃시스템이 더 정교하고 세밀하게 발전했다. 화면의 너비를 12 분할하는 것은 동일하지만 반응하는 화면의 기준너비는 4가지 에서 5가지로 세분화되었다.

Document

https://www.w3schools.com/bootstrap4/default.asp https://getbootstrap.com/docs/4.0/getting-started/introduction/

ReactStrap https://reactstrap.github.io/components/alerts/

LayOut

Breakpoints

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

Introduction

col, col-sm, col-md, col-lg

	Extra small<576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width 실제 적용되는 너비	None (auto)	540px	720px	960px	1140px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
# of columns	12분할
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

.ml-auto, .mr-auto
- css의 margin-left:auto; margin-right:auto;가 column에 적용된다. (.ml-auto, .mr-auto )
  - 왼쪽여백을 브라우저가 자동계산하여 적용
m- 여백을 설정
p- 패딩을 설정합니다
t- 여백 상단 또는 패딩 상단을 설정
b- 여백 하단 또는 패딩 하단을 설정합니다
l- 왼쪽 여백 또는 왼쪽 여백 설정
r- 오른쪽 여백 또는 오른쪽 여백을 설정
x- 왼쪽 여백과 오른쪽 여백 또는 여백 왼쪽과 여백 오른쪽
y- 패딩 상단 및 패딩 하단 또는 여백 상단 및 여백 하단을 설정합니다
0 - 세트의 마진 이나 패딩 0
1- 여백 또는 패딩 을 .25rem으로 설정합니다 (글꼴 크기가 16px 인 경우 4px).
2- 여백 또는 패딩 을 .5rem으로 설정합니다 (글꼴 크기가 16px 인 경우 8px).
3- 여백 또는 패딩 을 1rem으로 설정합니다 (글꼴 크기가 16px 인 경우 16px).
4- 여백 또는 패딩 을 1.5rem으로 설정합니다 (글꼴 크기가 16px 인 경우 24px).
5- 여백 또는 패딩 을 3rem으로 설정합니다 (글꼴 크기가 16px 인 경우 48px).
자동 -여백을 자동으로 설정
Vertical alignment
- <div class="row align-items-start">: row에 포함되는 컨텐츠가 ‘위로 정렬’
- <div class="row align-items-center">: row에 포함되는 컨텐츠가 ‘가운데 정렬’
- <div class="row align-items-end">: row에 포함되는 컨텐츠가 ‘아래 정렬’
- <div class="col align-self-start">: row에서 이 column만 ‘위로 정렬’
- <div class="col align-self-center">: row에서 이 column만 ‘가운데 정렬’
- <div class="col align-self-end">: row에서 이 column만 ‘아래 정렬’
Horizontal alignment
- <div class="row justify-content-start">: row에 포함된 column이 왼쪽정렬(기본)
- <div class="row justify-content-center">: row에 포함된 column이 중앙정렬
- <div class="row justify-content-end">: row에 포함된 column이 오른쪽 정렬
- <div class="row justify-content-around">: row를 column의 수만큼 나눈 다음에 그 영역에 포함된 column을 중앙정렬
- <div class="row justify-content-between">: row를 column의 수만큼 나눈 다음에 그 영역에 포함된 column을 왼쪽끝에 있는 column은 왼쪽정렬, 오른쪽끝에 있는 column은 오른쪽정렬, 중앙에 위치한 column은 모두 중앙정렬
No gutters
- 여백없음. 부트스트랩의 column은 기본적으로 양쪽에 15px씩 여백(Padding)이 잡혀있다. padding-right:15px; padding-left:15px; - <div class="row no-gutters">: row에 포함되는 모든 column의 여백을 없앤다.
Reordering
- <div class="col-sm-4 order-1">: order class를 사용한 column 중 첫번째에 배치
- <div class="col-sm-4 order-2">: order class를 사용한 column 중 두번째에 배치
- <div class="col-sm-4 order-12">: order class를 사용한 column 중 열두번째(마지막)에 배치
- <div class="col-sm-4 order-first">: order class를 사용한 column 중 첫번째에 배치
- <div class="col-sm-4 order-last">: order class를 사용한 column 중 마지막에 배치
Offset classes
- offset-_, offset-sm-_, offset-md-_, offset-lg-_, offset-xl-_ column의 왼쪽에 지정한 (_/12)만큼 여백을 둔다.
  - <div class="col-md-6 offset-md-4">: 768px 이상에서 4/12만큼 왼쪽에 여백을 두고 6/12영역의 column을 둔다. 768px 미만에서는 여백이 생기지 않는다.
  - <div class="col-md-6 offset-sm-6">: 540px이상에서 6/12만큼 왼쪽에 여백을 두고 6/12영역의 column을 둔다. 576px 미만에서는 여백이 생기지 않는다.
  - <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">: 576px이상에서 2/12만큼 여백을 두지만 768px이상에서는 여백을 초기화한다(여백을 없앤다).
  - <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">: 768px이상에서 2/12만큼 여백을 두지만 960px이상에서는 여백을 초기화한다(여백을 없앤다).
Margin
- css의 margin-left:auto; margin-right:auto;가 column에 적용된다. (.ml-auto, .mr-auto )
  - <div class="col-md-4"></div> <div class="col-md-4 ml-auto"></div>: 왼쪽여백을 브라우저가 자동계산하여 적용. (margin-left:auto;) ==> [참조] https://www.w3schools.com/cssref/pr_margin-left.asp
  - <div class="col-md-3 ml-md-auto"></div> <div class="col-md-3 ml-md-auto"></div>: 768px 이상에서 왼쪽여백을 브라우저가 자동계산하여 적용.
  - <div class="col-auto mr-auto"></div><div class="col-auto">: ‘col-auto’ (width:auto; )는 브라우저가 너비를 자동으로 계산하여 1/12의 너비가 column에 적용 ==> [참조] https://www.w3schools.com/cssref/pr_dim_width.asp
  - 'mr-auto' (margin-right:auto;) 오른쪽 여백을 브라우저가 자동계산하여 적용 ==> [참조] https://www.w3schools.com/cssref/pr_dim_width.asp
Nesting (중첩)
- Column 영역을 또 다시 분할할 수 있다. 이를테면 Column 영역이 그 내부에 Row를 포함할 수 있다. 특정 Column에 포함되는 Row도 마찬가지로 12분할된다.

container

컨테이너(container, container-fluid)
- container 클래스는 보면 화면의 넓이에 따라서 750px, 970px, 그리고 1170px로 달라지는 것을 확인할 수 있고, container-fluid는 넓이를 설정하고 있지 않아서 화면에 꽉차도록 하는 wrapper이다

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
- Small : Default(12분할)
- Medium
@media (min-width: 768px) {
    .container { width: 750px; }
}
- Large
@media (min-width: 992px) {
    .container { width: 970px; }
}
- Extra Large
@media (min-width: 1200px) {
    .container { width: 1170px; }
}
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Grid

<div class="container jumbotron">
    <div class="row">
        <div class="col-md-5">.col-md-5</div>
        <div class="col-md-5">.col-md-5</div>
    </div>
    <div class="row">
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-5">.col-md-5</div>
        <div class="col-md-5">.col-md-5</div>
        <div class="col-md-5">.col-md-5</div>
    </div>
</div>

Bootstrap 4

Bootstrap 4

Document

목차

LayOut

Breakpoints

Introduction

container

Grid

mamma1234