3. 테이블
테이블 클래스
BS3, BS4는 테이블 클래스가 추가되거나 이름이 바뀌는 등 조금 다름.
Ex) 같은 기능이지만 이름 다른 table-condensed(BS3), table-sm(B4)
모든 class는 중첩해서 사용할 수 있음.
<table class="table">table : 테이블 기본 클래스. 테이블 형태 만든다. BS3는 테이블 크기가 조금 더 작음.
<table class="table table-striped">table-striped : row 색상이 번갈아서 나옴
<table class="table table-bordered">table table-bordered : row의 세로 테두리도 생김
<table class="table table-bordered">table table-hover : row에 커서 올릴 때 색상 변환
<table class="table table-dark">table table-dark (BS4) : table 배경색 검게. table-striped 쓰면 색상 번갈아서 나오는 것도 같음 (잘 쓰이지 않음?)
<table class="table table-borderless">table-borderless : 테이블 테두리 모두 제거
<table class="table table-condensed">
<table class="table table-sm">table-sm(BS4), table-condensed(BS3) : row의 높이가 줄어듦.
<tbody>
<tr class="table-primary">
<td>데이터1-1</td>
<td>데이터1-2</td>
<td>데이터1-3</td>
</tr>
<tr class="table-success">
<td>데이터2-1</td>
<td>데이터2-2</td>
<td>데이터2-3</td>
</tr>
<tr class="table-danger">
<td>데이터3-1</td>
<td>데이터3-2</td>
<td>데이터3-3</td>
</tr>
<tr class="table-info">
<td>데이터4-1</td>
<td>데이터4-2</td>
<td>데이터4-3</td>
</tr>
<tr class="table-warning">
<td>데이터5-1</td>
<td>데이터5-2</td>
<td>데이터5-3</td>
</tr>
<tr class="table-active">
<td>데이터6-1</td>
<td>데이터6-2</td>
<td>데이터6-3</td>
</tr>
<tr class="table-secondary">
<td>데이터7-1</td>
<td>데이터7-2</td>
<td>데이터7-3</td>
</tr>
<tr class="table-light">
<td>데이터8-1</td>
<td>데이터8-2</td>
<td>데이터8-3</td>
</tr>
<tr class="table-dark">
<td>데이터9-1</td>
<td>데이터9-2</td>
<td>데이터9-3</td>
</tr>
</tbody>table-color, color : 각 row별로 색상 지정 가능
BS4 : 더 많은 색상을 지원하고 있음.
BS3 : secondary부터 지원하지 않으며 table- 빼고 그냥 단어로 클래스 적으면 적용됨.
Ex) sucess, danger, info, warning, active, default
<thead class="thead-dark">
<tr>
<th>항목1</th>
<th>항목2</th>
<th>항목3</th>
</tr>
</thead>thead-dark, thrad-light (BS4) : 헤더 색상 설정
<div class="table-responsive">table-responsive, table-responsive-size(BS4) : 반응형 테이블
테이블 가로 길이가 길어지면 좌우로 스크롤바가 생김, BS4는 이러한 내용이 심화됨.
but 한글 데이터가 테이블에 존재하면 적용 X -> 우리나라에선 사실상 효과를 볼 수 없는..
