Boostrap을 사용하여 테이블 인스턴스 생성-HTML 튜토리얼-php.cn

Boostrap을 사용하여 테이블 인스턴스 생성

零下一度

풀어 주다： 2017-06-23 10:05:57

원래의

2172명이 탐색했습니다.

말하자면

Bootstrap은 매우 아름답고 사용하기 쉬운 테이블 스타일을 제공합니다. Boosttrap을 사용하여 다양한 스타일의 테이블을 빠르게 만들 수 있습니다. 이 기사에서는 Boosttrap 테이블을 자세히 소개합니다.

기본 예제

Boostrap 변환. 테이블 < 테이블의 스타일 재설정은 다음과 같습니다

table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
}

로그인 후 복사

<table>
  <caption>Optional table caption.</caption>
  <thead><tr>  <th>#</th>  <th>First Name</th>  <th>Last Name</th>  <th>Username</th></tr>
  </thead>
  <tbody><tr>  <th scope="row">1</th>  <td>Mark</td>  <td>Otto</td>  <td>@mdo</td></tr><tr>  <th scope="row">2</th>  <td>Jacob</td>  <td>Thornton</td>  <td>@fat</td></tr><tr>  <th scope="row">3</th>  <td>Larry</td>  <td>the Bird</td>  <td>@twitter</td></tr>
  </tbody></table><div class="cnblogs_code"></div>
</h3>
<p><br>　 <code><table></code> 태그에 <code>.table</code> 클래스를 추가합니다. 기본 스타일 제공 — 소량의 패딩 및 가로 구분선 </p>
<p></p>
<pre class="brush:php;toolbar:false"><table class="table">
  ...</table>

로그인 후 복사

<table>标签添加.table类可以为其赋予基本的样式—少量的内边距(padding)和水平方向的分隔线

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

로그인 후 복사

条纹状表格

　　通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式

　　[注意]条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被IE8-支持

<table class="table table-striped">
  ...</table>

로그인 후 복사

<table class="table table-bordered">
  ...</table>

로그인 후 복사

带边框表格

　　添加 .table-bordered

줄무늬 테이블

은 .table-striped 클래스 &lt로 지정할 수 있습니다. ; tbody> 내의 각 행에 얼룩말 줄무늬 스타일을 추가합니다. [참고] 줄무늬 테이블은 :nth-child CSS 선택기에 의존하며 이 기능은 IE8 지원에서 지원되지 않습니다.

<table class="table table-hover">
  ...</table>

로그인 후 복사

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

로그인 후 복사

Bordered table

.table-bordered 클래스를 추가하여 테이블과 각 셀에 테두리를 추가했습니다.

<table class="table table-condensed">
  ...</table>

로그인 후 복사

悬 마우스 가리키기

.table-Hover 클래스를 추가하여 < tbody & gt; 각 줄이 마우스 호버 상태에 응답하도록 합니다

Class    　　描述
.active     鼠标悬停在行或单元格上时所设置的颜色
.success    标识成功或积极的动作
.info    　　标识普通的提示信息或动作
.warning    标识警告或需要用户注意
.danger     标识危险或潜在的带来负面影响的动作

로그인 후 복사

rreeee

빡빡한 테이블

.table 압축 클래스를 추가하면 테이블이 더 컴팩트해지며 셀의 패딩이 절반으로 줄어듭니다. 작은 화면 장치(768px 미만)에서 보기 좋게 표시되는 반응형 테이블을 생성하기 위한 테이블 반응형 요소는 가로로 스크롤됩니다. 화면이 768px 너비보다 크면 가로 스크롤 막대가 사라집니다

<table class="table">
  <thead><tr>  <th>#</th>  <th>Column heading</th>  <th>Column heading</th>  <th>Column heading</th></tr>
  </thead>
  <tbody><tr class="active">  <th scope="row">1</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="success">  <th scope="row">2</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="info">  <th scope="row">3</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="warning">  <th scope="row">4</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="danger">  <th scope="row">5</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr>  <th scope="row">6</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr>
  </tbody></table>

로그인 후 복사

위 내용은 Boostrap을 사용하여 테이블 인스턴스 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!