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 | 31 |
Tags
- SPC
- react
- Spring
- MSSQL
- hadoop
- vaadin
- mapreduce
- window
- tomcat
- Eclipse
- JavaScript
- Kotlin
- 보조정렬
- es6
- Android
- SQL
- GIT
- NPM
- IntelliJ
- 정렬
- 공정능력
- Java
- Sqoop
- table
- Express
- xPlatform
- R
- mybatis
- maVen
- Python
Archives
- Today
- Total
DBILITY
독거 가능성 100% 노후에 라면값이라도 하게 센스를 발휘합시다!😅
Please click on the ad so that I can pay for ramen in my old age!
点击一下广告，让老后吃个泡面钱吧!
老後にラーメン代だけでもするように広告を一回クリックしてください。
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