728x90
반응형
반응형 웹페이지에서 디스플레이 크기에 따라 일부 <td>를 제거하는 방법입니다.
아래의 부트스트랩페이지를 확인하면 더 자세한 정보를 찾을 수 있다.
Display property
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
getbootstrap.com
display 속성을 변경하는 것이기에 해당하는 클래스명을 먼져 찾아준다. none, inline, inline-block, block, grid, table, table-cell, table-row, flex, inline-flex 가 있고, 테이블의 <td>에 적용하기 때문에 table-cell 속성을 사용할 것이다.
먼져 사용방법을 보자면 아래와 같다.
<tr>
<th class="d-none d-lg-table-cell">카테고리</th> //1번
<th class="d-table-cell">제목</th> //2번
</tr>
"d-none" 은 모든 디스플레이 크기에서 제거되는 것을 말하고.
"d-lg-table-cell" 는 lg사이즈(992px이상)의 디스플레이에서 노출된다는 것을 말한다.
"d-table-cell" 는 "d-none"과는 반대인 모든 디스플레이 사이즈에서 노출되는 것을 말한다.
위의 설명은 부트스트랩페이지에서 block 속성으로 표시하고 있다.
완성 예시
display lg 화면
display md 화면
display sm 화면
728x90
반응형
'Web Programming > Bootstrap' 카테고리의 다른 글
| bootstrap / modal 사용하기 (0) | 2021.07.28 |
|---|---|
| bootstrap / 그리드(grid) (0) | 2021.07.28 |
| Bootstrap / 부트스트랩 다운로드,적용 (2) | 2021.06.03 |
