Jumbotron
페이지 맨 상단에 표시되는 곳 꾸미기
부트스트랩에서 기본 제공하는거 말고도
커스터마이징이 가능하다 !
-- 기본점보에서 배딩과 마진 줄이고, 배경색과 글자색 변경, 반응형으로 변경함.
<style>
/*점보트론 세로폭,마진밑 줄이기, 링크 밑에다가 적용!*/
.jumbotron {
padding-top:1.5rem;
padding-bottom:1.5rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="jumbotron jumbotron-fluid bg-dark">
<div class="container text-white">
<h5>한국소프트웨어 인재개발원 <small class="text-muted">https://www.ikosmo.com</small></h5>
</div>
</div>
/*이건 그냥 내용 넣어놓은거*/
<div class="container">
<div class="row">
<div class="col-md-6"> <!--그리드 적용 !!-->
<h2>Hoverable Dark Table</h2>
<table class="table table-bordered table-dark table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<h2>Borderless Table</h2>
<table class="table table-borderless"> <!--기본 table을 지우면 안됨-->
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div><!---col-->
</div> <!--row-->
</div>
</body>
'학원 > BS(부트스트랩4)' 카테고리의 다른 글
| 11/14 42-8 [BS] Buttons (0) | 2022.11.14 |
|---|---|
| 11/14 42-7 [BS] Alerts (0) | 2022.11.14 |
| 11/14 42-5 [BS] Image (0) | 2022.11.14 |
| 11/14 42-4 [BS] Tables (0) | 2022.11.14 |
| 11/14 42-3 [BS] Colors (0) | 2022.11.14 |