简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > 부트스트랩 튜토리얼 > 본문

bootstrap4에서 테이블을 설정하는 방법

爱喝马黛茶的安东尼
풀어 주다： 2019-07-17 16:18:14
원래의
2546명이 탐색했습니다.

bootstrap4에서 테이블을 설정하는 방법

Bootstrap4 기본 테이블

Bootstrap4는 .table 클래스를 사용하여 기본 테이블의 스타일을 설정합니다. 예제는 다음과 같습니다.

Example

<table class="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>
로그인 후 복사

bootstrap4에서 테이블을 설정하는 방법

Striped 테이블

.table- 스트라이프 클래스를 추가하면 아래 예와 같이 내부 행에 줄무늬가 표시됩니다. 테이블에 테두리 추가

Example

<table class="table table-striped">    
<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>
로그인 후 복사

bootstrap4에서 테이블을 설정하는 방법

Mouseover 상태 테이블

.table-hover 클래스는 테이블의 각 행에 마우스 오버 효과(회색 배경)를 추가할 수 있습니다.

Instance

<table class="table table-bordered">    
<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>
로그인 후 복사

bootstrap4에서 테이블을 설정하는 방법

검은색 배경 테이블

.table-dark 클래스는 테이블에 검은색 배경을 추가할 수 있습니다:

Instance

<table class="table 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>
로그인 후 복사

bootstrap4에서 테이블을 설정하는 방법

관련 권장 사항: "Bootstrap 시작 튜토리얼"

검은 줄무늬 테이블

.table-dark 및 .table-striped 클래스를 함께 사용하여 검은 줄무늬 테이블을 만듭니다. bootstrap4에서 테이블을 설정하는 방법Example

<table class="table table-dark">    
<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>
로그인 후 복사

마우스 오버 효과 - 검은 배경 테이블

사용합니다. table together -dark 및 .table-hover 클래스는 검정색 배경 테이블의 마우스 호버 효과를 설정할 수 있습니다.

Instance

<table class="table table-dark table-striped">    
<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>
로그인 후 복사

bootstrap4에서 테이블을 설정하는 방법

의미의 색상 클래스 지정

색상을 지정할 수 있습니다. 테이블 행에 대한 의미 클래스 또는 셀 색상 설정: 

<table class="table 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>
로그인 후 복사

bootstrap4에서 테이블을 설정하는 방법

Header color

Bootstrap v4.0.0-beta.2에서는 .thead-dark 클래스가 사용됩니다. 테이블 헤더에 검정색 배경을 추가하고 .thead-light 클래스는 테이블 헤더에 회색 배경을 추가하는 데 사용됩니다.

Bootstrap v4.0.0-beta에서 .thead-inverse 클래스는 검정색을 추가하는 데 사용됩니다. 배경을 테이블 헤더에 추가하고 .thead-default 클래스를 사용하여 테이블 헤더에 회색 배경을 추가합니다.

bootstrap4에서 테이블을 설정하는 방법

Smaller tables

.table-sm 클래스는 패딩을 줄여 더 작은 테이블을 설정하는 데 사용됩니다.

Instances

.table-primary蓝色: 指定这是一个重要的操作
.table-success绿色: 指定这是一个允许执行的操作
.table-danger红色: 指定这是可以危险的操作
.table-info浅蓝色: 表示内容已变更
.table-warning橘色: 表示需要注意的操作
.table-active灰色: 用于鼠标悬停效果
.table-secondary灰色: 表示内容不怎么重要
.table-light浅灰色，可以是表格行的背景
.table-dark深灰色，可以是表格行的背景
로그인 후 복사

bootstrap4에서 테이블을 설정하는 방법

반응형 테이블

.테이블- 반응형 클래스는 반응형 테이블을 만드는 데 사용됩니다. 화면 너비가 992px보다 작으면 가로 스크롤 막대가 생성되고, 시각적 영역 너비가 992px보다 크면 다른 효과가 표시됩니다(스크롤 막대 없음):

Instance

<table class="table table-bordered table-sm">    
<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>
로그인 후 복사

bootstrap4에서 테이블을 설정하는 방법

다음 클래스를 통해 지정된 화면 너비 아래에 스크롤 막대가 표시되도록 설정할 수 있습니다. 

<div class="table-responsive"><table class="table">    
<thead>      
<tr>        
<th>#</th>        
<th>Firstname</th>        
<th>Lastname</th>        
<th>Age</th>        
<th>City</th>        
<th>Country</th>        
<th>Sex</th>        
<th>Example</th>        
<th>Example</th>        
<th>Example</th>        
<th>Example</th>      
</tr>    
</thead>    
<tbody>      
<tr>        
<td>1</td>        
<td>Anna</td>        
<td>Pitt</td>        
<td>35</td>        
<td>New York</td>        
<td>USA</td>        
<td>Female</td>        
<td>Yes</td>        
<td>Yes</td>        
<td>Yes</td>        
<td>Yes</td>      
</tr>    
</tbody></table></div>
로그인 후 복사
Instance

<div class="table-responsive-sm">  <table class="table">    ...  </table></div>
로그인 후 복사

bootstrap4에서 테이블을 설정하는 방법

위 내용은 bootstrap4에서 테이블을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
bootstrap4 设置表格
원천：php.cn
이전 기사：부트스트랩 페이지 매김을 사용하는 방법 다음 기사：bootstrap4에서 이미지 모양을 설정하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1480
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
1647
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1400
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1329
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1381
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！