`

Bootstrap--表格

 
阅读更多
支持<table>标签、<thead>标签、<tbody> 标签、<tr>标签、<td>标签、<th>标签、<caption>标签。

<table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr  class="success">
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr class="warning">
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>



.table
很少的内补(padding)并只增加水平分隔线。

.table-striped
封装了:nth-child CSS选择器 (IE7-8不支持)为表格中的行添加斑马纹样式,隔行变色。

.table-bordered
为表格增加边框(border)和圆角(rounded corner)。

.table-hover
为 <tbody> 中的每一行赋予鼠标悬停样式。

.table-condensed
每个单元格的内补(padding)减半可使表格更紧凑。

行属性选择情景(contextual)类为表格添加颜色。
.success 表示成功或积极的行为。
.error   表示一个危险或存有潜在危险的行为。
.warning 表示警告,可能需要注意。
.info    作为一个默认样式的一个替代样式。
http://v2.bootcss.com/base-css.html#tables
  • 大小: 40 KB
  • 大小: 61.7 KB
分享到:
评论

相关推荐

    bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

    Bootstrap Table 是一个基于Bootstrap框架的开源前端组件,用于创建功能丰富的、响应式的表格。它提供了很多高级特性,如排序、过滤、分页、列切换等。在本话题中,我们聚焦于Bootstrap Table的一个扩展功能——可...

    将bootstrap-table表格翻译为中文

    Bootstrap表格是前端开发中常用的组件,它为网页提供了一种美观、响应式的表格展示方式。Bootstrap-table 是基于Bootstrap框架的扩展插件,它允许开发者在网页中创建功能丰富的表格,包括排序、过滤、分页、行编辑等...

    bootstrap-table-export.js bootstrap-table表格导出js

    bootstrap-table-export.js bootstrap-table表格导出js

    bootstrap-table实现 行拖拽 插件jquery.tablednd.js bootstrap-table-reorder-rows.js

    bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css

    bootstrap-editable.zip

    可编辑bootstrap-table及相关组件:bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css; 配合起来,可以实现可编辑bootstrap-table列表。代码实现: ...

    bootstrap-table-pagejump.zip

    在JavaScript中,通过`bootstrapTable`方法初始化表格,并配置必要的参数。 ```javascript $(function () { $('#table').bootstrapTable({ url: 'data.json', // 数据源 columns: [ /* 列定义 */ ], // 其他...

    bootstrap-table-fixed-columns(css,js)

    总的来说,`bootstrap-table-fixed-columns`是一个增强Bootstrap表格功能的工具,它通过CSS和JavaScript实现了固定列效果,使得用户在处理大量数据时能更有效地导航。了解并熟练掌握这个扩展的使用,将有助于提升...

    BootStrap-table.js 官网下载

    Bootstrap-table.js 是一个基于Bootstrap框架的前端数据展示插件,它允许用户在网页上创建功能丰富的、可操作的表格。这个插件的核心理念是提供一个简单而强大的方式来展示动态数据,同时保持良好的用户体验和响应式...

    bootstrap-table-fixed-columns.zip

    "bootstrap-table-fixed-columns.zip" 是一个专为 Bootstrap Table 设计的插件,用于解决表格滚动时表头固定不动的问题,使得用户在浏览长表格时始终能清晰地看到列名。 FastAdmin 是一个基于 ThinkPHP5 开发的开源...

    bootstrap-table-fixed-columns-v1.0.2.zip

    FastAdmin使用bootstrap-table作为前端表格的基础组件库,通常列表交互展示已经够用了,包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也...

    Bootstrap-table分页+汇总统计

    Bootstrap-table 是一个基于 Bootstrap 框架的前端插件,用于创建功能丰富的表格。这个插件不仅提供了基本的表格展示,还支持数据分页、排序、过滤、自定义列显示等高级特性,使得在网页上展示大量数据变得更加便捷...

    bootstrap-table-fixed-columns冻结列,并完善排序、列宽和合并行

    "bootstrap-table-fixed-columns" 是这个库的一个扩展插件,旨在提供固定列的功能,使得在宽屏或窄屏设备上查看表格时,重要的列始终保持可见,增强用户体验。 在原版的 `bootstrap-table-fixed-columns` 插件中,...

    bootstrap-table-fixed-columns-master.zip

    Bootstrap表格是前端开发中常用的组件,它为网页中的数据展示提供了灵活且美观的解决方案。Bootstrap Table是由Wenzhao Xie开发的一个开源项目,它基于Twitter Bootstrap框架,为HTML表格添加了丰富的功能,如排序、...

    bootstrap-table-export.js和tableExport.js

    Bootstrap表格是前端开发中常用的组件,它为网页中的数据展示提供了美观且响应式的解决方案。而“bootstrap-table-export.js”和“tableExport.js”是针对Bootstrap表格的导出插件,它们扩展了表格的功能,允许用户...

    bootstrap-table-fixed-columns.js

    Bootstrap Table 是一个流行的开源JavaScript库,它允许开发者创建功能丰富的响应式表格。"bootstrap-table-fixed-columns.js" 是这个库的一个扩展插件,专门用于处理表格中的固定列问题。在网页设计中,固定列是一...

    bootstrap-table.js

    Bootstrap Table 是一个基于Bootstrap框架的前端插件,用于创建功能丰富的、响应式的表格。这个插件使得在网页中展示和操作数据变得更加简单和直观。在标题"bootstrap-table.js"中,我们可以看出它主要包含两个核心...

    bootstrap-table-editable.js

    在 Bootstrap Table 中,`bootstrap-table-editable.js` 是一个非常重要的组件,它为表格提供了行内编辑的功能,极大地提升了用户体验。通过集成 x-editable 库,用户可以直接在表格中修改单元格内容,而无需跳转到...

    bootstrap-table-reorder-rows.js.zip

    Bootstrap Table 行内编辑功能允许用户直接在表格单元格内编辑数据,提供了一种直观且高效的数据输入方式。这通常涉及到以下关键知识点: 1. **行内编辑模式**:通过点击表格行或特定单元格,可以切换到编辑模式,...

    bootstrap-table-export.js

    bootstrap-table-export.js,实现bootstrap-table的表格导出

    基于bootstrap-table 实现 右侧列固定

    基于bootstrap-table 实现 右侧列固定,也可以针对左侧列固定,针对操作列使用起来非常方便,引用jquery、bootstrap-table-fixed 样式和js文件后,可以随意设置,灵活。 fixedColumns: true,//fixedtNumber:2, //...

Global site tag (gtag.js) - Google Analytics