부트스트랩에는 어떤 테이블 클래스가 있나요?-프런트엔드 Q&A-php.cn

부트스트랩에는 어떤 테이블 클래스가 있나요?

青灯夜游

풀어 주다： 2022-01-10 12:06:54

원래의

2730명이 탐색했습니다.

Bootstrap의 테이블 클래스에는 다음이 포함됩니다. 1. ".table", 기본 테이블 2. ".table-striped", 얼룩말 교차 테이블 3. ".table-bordered", 테두리가 있는 테이블 4. ".table- hover" ", 마우스 오버 등으로 강조 표시된 테이블

부트스트랩에는 어떤 테이블 클래스가 있나요?

이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 3.3.7, DELL G3 컴퓨터

Bootstrap Table

Bootstrap은 테이블 생성을 위한 명확한 레이아웃을 제공합니다. 다음 표에는 Bootstrap에서 지원하는 일부 테이블 요소가 나열되어 있습니다.

내에 얼룩말 줄무늬 추가(IE8에서는 지원되지 않음)

태그

설명

). )입니다. 내에서 사용해야 합니다.


테이블에 기본 스타일을 추가합니다.

테이블 열을 식별하는 데 사용되는 테이블 헤더 행의 컨테이너 요소(

테이블 본문의 테이블 행에 대한 컨테이너 요소(

단일 행에 나타나는 테이블 셀 그룹에 대한 컨테이너 요소(	또는	).
		기본 테이블 셀.
번째>	열이나 행을 식별하는 데 사용되는 특수 테이블 셀(범위 및 위치에 따라 다름)

테이블 저장소 내용에 대한 설명 또는 요약입니다. bootstrap은 주로 다음을 포함하여 다른 스타일의 테이블에 대해 다른 클래스 이름을 제공합니다 수평 구분선)

.table-striped

.table-bordered모든 테이블 셀에 추가 Border .table- hover.table-densedCompact table.table-ResponseResponsive table .table-bordered 내의 모든 행에 마우스 오버 상태를 활성화합니다. 테두리가 있는 테이블

기본 테이블

패딩과 가로 분할만 있는 기본 테이블을 원할 경우 다음 예와 같이 .table 클래스를 추가하세요.

예

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
	<caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

로그인 후 복사

결과

부트스트랩에는 어떤 테이블 클래스가 있나요?

선택적 테이블 클래스

기본 테이블 마크업 및 .table 클래스 외에도 마크업 스타일을 정의하는 데 사용할 수 있는 몇 가지 클래스가 있습니다. 아래에서 해당 수업을 소개합니다.

줄무늬 테이블

.table-striped 클래스를 추가하면 아래 예와 같이

내부 행에 줄무늬가 표시됩니다.

Instance

<table class="table table-striped">
  <caption>条纹表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

로그인 후 복사

결과 아래와 같습니다. :

부트스트랩에는 어떤 테이블 클래스가 있나요?

Border table

.table-bordered 클래스를 추가하면 아래 예와 같이 각 요소 주위에 테두리가 있고 전체 테이블이 둥글게 표시되는 것을 볼 수 있습니다.

Instance

<table class="table table-bordered">
  <caption>边框表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

로그인 후 복사

결과는 다음과 같습니다:

부트스트랩에는 어떤 테이블 클래스가 있나요?

hover table

.table-hover 클래스를 추가하면 포인터가 회색 배경 행 위로 마우스를 가져갈 때 얕은 영역이 나타납니다. 아래 예는 다음과 같습니다.

예

<table class="table table-hover">
  <caption>悬停表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

로그인 후 복사

결과는 다음과 같습니다.

부트스트랩에는 어떤 테이블 클래스가 있나요?

Condensed table

.table-densed 클래스를 추가하여 padding)을 반으로 잘라서 만듭니다. 아래 예와 같이 테이블이 더 컴팩트해 보입니다. 이는 정보를 보다 간결하게 표시하려는 경우에 유용합니다.

Instance

<table class="table table-condensed">
  <caption>精简表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td></tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td></tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td></tr>
  </tbody></table>

로그인 후 복사

결과는 다음과 같습니다.

부트스트랩에는 어떤 테이블 클래스가 있나요?

컨텍스트 클래스

아래 표에 나열된 컨텍스트 클래스를 사용하면 테이블 행이나 개별 셀의 배경색을 변경할 수 있습니다.

은 다음을 나타냅니다. 주의가 필요한 경고 는 위험하거나 잠재적으로 부정적인 행동을 나타냅니다. 이 클래스는 ,

클래스	설명
.active	특정 행이나 셀에 마우스 오버 색상 적용
.success	성공 또는 긍정적인 작업을 나타냅니다. .warning
	.danger

또는 <

examplic r

<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td></tr>
    <tr class="success">
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td></tr>
    <tr class="warning">
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td></tr>
    <tr class="danger">
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td></tr>
  </tbody></table>

로그인 후 복사

결과는 다음과 같습니다. 작은 장치(768px 미만)에 적합합니다. 너비가 768px보다 큰 대형 장치에서 볼 때 아무런 차이가 없습니다.

예

<div class="table-responsive">
  <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td></tr>
      <tr>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td></tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td></tr>
      <tr>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td></tr>
    </tbody>
  </table></div>

로그인 후 복사

결과는 다음과 같습니다.

부트스트랩에는 어떤 테이블 클래스가 있나요?