부트스트랩의 테이블 스타일은 무엇입니까?

7가지 테이블 스타일이 있습니다. 1. 가로 구분선만으로 기본 테이블을 정의할 수 있는 ".table" 스타일 2. 조명으로 얼룩말 교차 테이블을 정의할 수 있는 ".table-striped" 스타일 테이블의 다른 모든 행에 회색 배경색 적용 3. ".table-bordered" 스타일, 모든 테이블 셀에 테두리 스타일 추가 등

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

Bootstrap 테이블 스타일

.table: 기본 테이블, 모든 <에 기본 추가 ;table> 스타일(가로 구분선만 해당)

xml .table-striped: 얼룩말 줄무늬 테이블

xml .table-bordered: 테두리가 있는 테이블

xml .table-hover: 마우스 오버로 강조 표시된 테이블

xml .table-densed: 컴팩트 테이블

tax .table-반응형: 반응형 테이블

xml 상황별 테이블

다음은 위 테이블 스타일에 대한 간략한 소개입니다.

1 . 기본 테이블

Bootstrap에서 기본 테이블은 클래스 이름 ".table"을 통해 제어됩니다.

요소에 클래스 이름을 추가하지 않으면 테이블에 스타일 효과가 없습니다. 기본 테이블을 얻으려면 요소에 ".table" 클래스 이름만 추가하면 Bootstrap의 기본 테이블을 얻을 수 있습니다.

                                                                                                                                                    

基础表格

省份	城市
广东	深圳
广西	桂林
海南	三亚

렌더링은 다음과 같습니다.

세 가지 주요 ".table" 기능:

• 테이블에 margin-bottom: 20px를 설정하고 셀 패딩을 설정합니다.

• 광고 하단에 2px 밝은 회색 실선을 설정합니다.

• 상단에 1px를 설정합니다. 각 셀에 대해 밝은 회색 실선

2. 줄무늬 테이블

때로는 테이블의 가독성을 높이기 위해 테이블을 얼룩말 교차 효과와 유사하게 만드는 것이 필요합니다. 쉽게 말하면 테이블에 배경 스트라이프 효과를 주는 것입니다. Bootstrap에서 이 테이블 효과를 얻는 것은 어렵지 않습니다.

을 기반으로 클래스 이름 ".table-striped"만 추가하면 됩니다.

렌더링:

기본 테이블과 비교하면 t바디에 한 줄씩 연한 회색 배경색이 있다는 효과만 있을 뿐입니다. 구현 원리도 매우 간단하여 CSS3의 구조 선택기 ":nth-child"를 사용하여 구현하므로 IE8 이하 브라우저에서는 배경 줄무늬 효과가 없습니다.

3. 테두리 테이블

기본 테이블은 테이블의 일부에만 테두리가 있지만 때로는 테이블 전체에 테두리 효과를 주어야 할 때도 있습니다. 실용적인 목적을 위해 Bootstrap은 이 테이블 효과도 고려합니다. 즉, 모든 셀에 1px 테두리가 있습니다.

Bootstrap에서 테두리가 있는 테이블을 사용하는 것은 얼룩말 교차 테이블을 사용하는 것과 유사합니다. 기본 테이블

에 ".table-bordered" 클래스 이름만 추가하면 됩니다.

렌더링:

4. 마우스 오버 테이블

테이블의 행 위로 마우스를 가져가면 강조된 배경색이 있습니다. 이러한 테이블은 사람들을 편안하게 만들고 항상 사용자에게 읽고 있다는 것을 알려줍니다. 테이블의 어느 행에 데이터가 포함되어 있는지. Bootstrap은 여러분을 실망시키지 않았습니다. 또한 이 효과를 고려하여 이 테이블 효과를 달성하기 위해 ".table-hover" 클래스 이름을 제공했습니다.

마우스를 가리키면 강조 표시된 테이블도 사용하기 쉽습니다.

요소에 "table-hover"만 추가하면 됩니다.

Rendering:

마우스 호버 강조 효과는 주로 "hover" 이벤트를 통해 달성됩니다. "tr:hover"가 설정되면 th 및 td의 배경색이 새로운 색상이 됩니다.

참고: 실제로 마우스 오버로 강조 표시된 테이블은 다른 부트스트랩 테이블과 혼합될 수 있습니다. 간단히 말해서, 테이블에 마우스 오버 강조 효과를 적용하려면 "table-hover" 클래스 이름을 테이블에 추가하기만 하면 됩니다. 예를 들어 앞서 소개한 여러 테이블을 결합합니다:

<table class="table table-striped table-bordered table-hover">
…
</table>

5. 상황별 테이블

tr 및 td에 스타일을 추가하여 행이나 셀에 지정된 스타일의 배경색을 추가하여 컨텍스트와 일반적으로 사용되는 스타일을 강조 표시하는 활성이 있고, 성공, 정보, 위험 및 경고. 아래와 같이:

<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>省份</th>
      <th>省会</th>
      <th>地级市数量</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>福建</td>
      <td>福州</td>
      <td>9</td></tr>
    <tr class="success">
      <td>广东</td>
      <td>广州</td>
      <td>21</td></tr>
    <tr class="warning">
      <td>广西</td>
      <td>南宁</td>
      <td>14</td></tr>
    <tr class="danger">
      <td>海南</td>
      <td>海口</td>
      <td>4</td></tr>
  </tbody>
</table>

렌더링:

6. 반응형 양식

随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。

Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将

置于这个容器当中，这样表格也就具有响应式效果。

Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下：

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

七、紧凑型表格：

何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中，通过类名“table-condensed”重置了单元格内距值。

紧凑型表格的运用，也只是需要在

基础上添加类名“table-condensed”：

<table class="table table-condensed">

Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

위 내용은 부트스트랩의 테이블 스타일은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!