bootstrap3.0实例教程之多种多样报表实际效果(条纹

日期:2021-03-08 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

序言

本文关键解读的是报表,这个实际上针对做过网站的人来讲,其实不生疏,并且能够说是最为常见的各种各样目录的展现,有时也会由于客户或老板的要求而觉得头疼。下面大家看来1下,Bootstrap早已为大家提前准备那些种类的报表呢?以下所示:

1.基础实例

2.条纹状报表

3.带边框的报表

4.电脑鼠标悬停

5.缩紧报表

6.情况class

7.回应式报表

8.总结

基础实例

为随意<table>标识加上.table能够为其授予基础的款式—小量的内补(padding)和水平方位的隔开线。这类方法看起来许多余!?可是大家感觉,报表元素应用的很普遍,假如大家为其授予默认设置款式将会会危害比如日历和时间挑选之类的软件,因此大家挑选将其款式单独出来。

1个简易的Table示例

拷贝编码
编码以下:

<div class="container">
<table class="table">
<caption>Table基础实例</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<tr>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
</tbody>
</table>
</div>


条纹状报表

运用.table-striped能够给<tbody>以内的每样提升斑马条纹款式。

在上面示例的table元素上再加上1个款式类

拷贝编码
编码以下:

<tableclass="tabletable-striped">

看如今的实际效果,還是有点转变的。

带边框的报表

运用.table-bordered为报表和在其中的每一个模块格提升边框。

還是将第1个示例中的table元素上再加上1个款式类

拷贝编码
编码以下:

<tableclass="tabletable-bordered">


电脑鼠标悬停

运用.table-hover可让<tbody>中的每行回应电脑鼠标悬停情况。

拷贝编码
编码以下:

<tableclass="tabletable-hover">

将电脑鼠标移到那1行那1行就会合理果的

缩紧报表

运用.table-condensed可让报表更为紧凑型,模块格中的內部(padding)均会递减。

拷贝编码
编码以下:

<tableclass="tabletable-condensed">

这个实际效果没那末显著,关键便是模块格中內容padding递减了。

情况Class

根据这些情况class能够为行货模块格设定色调。



拷贝编码
编码以下:

<tableclass="tabletable-condensed">
<caption>Table</caption>
<thead>
<tr>
<th>#</th>
<th>FirstName</th>
<th>LastName</th>
<th>UserName</th>
</tr>
</thead>
<tbody>
<trclass="active">
<td>1</td>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<trclass="success">
<td>2</td>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
<trclass="warning">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<trclass="danger">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr>
<tdclass="success">5</td>
<tdclass="danger">Amdy</td>
<tdclass="warning">Amy</td>
<tdclass="active">@Amdy</td>
</tr>
</tbody>
</table>


回应式报表

将任何.table包裹在.table-responsive中便可建立回应式报表,其会在小显示屏机器设备上(小于768px)水平翻转。当显示屏超过768px宽度时,水平翻转条消退。


拷贝编码
编码以下:

<divclass="table-responsive">
<tableclass="table">
<caption>Table</caption>
<thead>
<tr>
<th>#</th>
<th>FirstName</th>
<th>LastName</th>
<th>UserName</th>
</tr>
</thead>
<tbody>
<trclass="active">
<td>1</td>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<trclass="success">
<td>2</td>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
<trclass="warning">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<trclass="danger">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr>
<tdclass="success">5</td>
<tdclass="danger">Amdy</td>
<tdclass="warning">Amy</td>
<tdclass="active">@Amdy</td>
</tr>
</tbody>
</table>
</div>


看翻转条出現了额。

上一篇:杭州市企业网站建设 返回下一篇:没有了