Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 보조정렬
- Python
- mybatis
- Eclipse
- es6
- window
- tomcat
- Express
- vaadin
- table
- Java
- react
- mapreduce
- GIT
- hadoop
- SSL
- xPlatform
- IntelliJ
- SQL
- Android
- JavaScript
- MSSQL
- plugin
- 공정능력
- Kotlin
- R
- NPM
- Spring
- Sqoop
- SPC
Archives
- Today
- Total
DBILITY
bootstrap grid system 본문
반응형
div에 css를 통해 가로길이를 정해주는 기능으로 정해준 길이만큼 공간 점유
가로 한줄을 12등분하여 비율로 정해 배치할 수 있다.
기본 코드형태는 다음과 같다.
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
col-칸수 형태는 bootstrap4에서만 지원한다.
bootstrap3에선 col-scale-숫자 형태로 12등분 중 몇칸을 점유할지 설정한다.
scale은 extra small,small, middle, large, extra large순이다.
- col-sm-숫자 : 576px이하면 세로로 배치
- col-md-숫자 : 768px이하면 세로로 배치
- col-lg-숫자 : 992px이하면 세로로 배치
- col-xl-숫자 : 1200px이하면 세로로 배치
쉽게 사용하도록 도움이 되는 사이트는 아래와 같다.
Shoelace - Visual Bootstrap 3 Grid Builder
반응형
'front-end & ui > bootstrap' 카테고리의 다른 글
bootstrap 3 col height 100% (0) | 2021.04.22 |
---|
Comments