화면 크기에 따라 테이블 등을 변동되게 만들 수 있다.
responsive util
- visible-mode : mode일 때 보이기
- hidden-mode : mode일 때 숨기기
- offset : 빈 여백으로 남김
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11_responsive.html</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.b {border:solid 1px black;}
</style>
</head>
<body>
visible-md : md 모드일때만 PYTHON 보이기
<div class="container-fluid">
<div class="row">
<div class="col-md-3 b">JAVA</div>
<div class="col-md-6 b visible-md">PYTHON</div>
<div class="col-md-3 b">ORACLE</div>
</div>
</div>
<br>
hidden-md : md 모드일때 숨기기
<div class="container-fluid">
<div class="row hidden-md">
<div class="col-md-3 b">대한민국</div>
<div class="col-md-6 b">오필승</div>
<div class="col-md-3 b">코리아</div>
</div>
</div>
<br>
offset : 빈 여백으로 남김
<div class="container-fluid">
<div class="row">
<div class="col-md-6 b">라일락</div> <!-- 6크기의 그리드가 왼쪽에서 3크기 만큼 여백을 줌-->
<div class="col-md-offset-3 col-md-3 b">개나리</div>
</div>
</div>
<br>
row안에 row 가능
<div class="container-fluid">
<div class="row">
<div class="col-md-3 b">JAVA</div>
<div class="col-md-6 b">
<div class="row">
<div class="col-md-4 b">HTML</div>
<div class="col-md-4 b">CSS</div>
<div class="col-md-4 b">jQuery</div>
</div>
</div>
<div class="col-md-3 b">ORACLE</div>
</div>
</div>
</body>
</html>
'웹개발 교육 > Bootstrap' 카테고리의 다른 글
| [46일] bootstrap (12) - myweb 인트로 (0) | 2022.09.30 |
|---|---|
| [46일] bootstrap (10) - grid (0) | 2022.09.30 |
| [45일] bootstrap (9) - icon (0) | 2022.09.29 |
| [45일] bootstrap (8) - modal (0) | 2022.09.29 |
| [45일] bootstrap (7) - container (0) | 2022.09.29 |
