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에 스타일을 추가하여 행이나 셀에 지정된 스타일의 배경색을 추가하여 컨텍스트와 일반적으로 사용되는 스타일을 강조 표시하는 활성이 있고, 성공, 정보, 위험 및 경고. 아래와 같이:
上下文表格布局
| 省份 |
省会 |
地级市数量 |
| 福建 |
福州 |
9 |
| 广东 |
广州 |
21 |
| 广西 |
南宁 |
14 |
| 海南 |
海口 |
4 |
렌더링:
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”：
Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px。
更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！
위 내용은 부트스트랩의 테이블 스타일은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
