Bootstrap系列 -- 9. 表格

最新推荐文章于 2022-08-25 12:18:24 发布
最新推荐文章于 2022-08-25 12:18:24 发布
阅读量86 收藏
点赞数

 

一. Bootstrap 表格样式支持

　　Bootstrap提供了六种不同风格的样式支持,其中一个基础样式，4个附件样式,1个响应式设计样式

　　1. .table：基础表格

　　2. .table-striped：斑马线表格

　　3. .table-bordered：带边框的表格

　　4. .table-hover：鼠标悬停高亮的表格

　　5. .table-condensed：紧凑型表格

　　6. .table-responsive：响应式表格

 

二. Bootstrap 行样式

<table class="table table-bordered">
  <thead>
    <tr>
      <th>类名</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>.active</td>
      <td>表示当前活动的信息</td>
    </tr>
    <tr class="success">
      <td>.success</td>
      <td>表示成功或者正确的行为</td>
    </tr>
    <tr class="info">
      <td>.info</td>
      <td>表示中立的信息或行为</td>
    </tr>
    <tr class="warning">
      <td>.warning</td>
      <td>表示警告，需要特别注意</td>
    </tr>
    <tr class="danger">
      <td>.danger</td>
      <td>表示危险或者可能是错误的行为</td>
    </tr>
  </tbody>
行样式代码显示

　　其实现效果如下：

 

三. 基础表格样式

<table class="table">
        <thead>
            <tr>
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
        </tbody>
    </table>
基础表格样式

 

四. 斑马线表格

<table class="table table-striped">
        <thead>
            <tr>
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
        </tbody>
    </table>
斑马线表格样式

 

五. 带边框表格

<table class="table table-bordered">
        <thead>
            <tr>
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
        </tbody>
    </table>
带边框表格样式

 

六. 鼠标浮动样式

<table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
        </tbody>
    </table>
鼠标浮动样式

 

七. 紧凑型样式

<table class="table table-condensed table-hover">
        <thead>
            <tr>
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
            <tr>
                <td>表格单元格</td>
                <td>表格单元格</td>
                <td>表格单元格</td>
            </tr>
        </tbody>
    </table>
紧凑型表格样式

 

八. 响应式表格样式

<div class="table-responsive">
        <table class="table table-condensed table-hover">
            <thead>
                <tr>
                    <th>表格标题</th>
                    <th>表格标题</th>
                    <th>表格标题</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>表格单元格</td>
                    <td>表格单元格</td>
                    <td>表格单元格</td>
                </tr>
                <tr>
                    <td>表格单元格</td>
                    <td>表格单元格</td>
                    <td>表格单元格</td>
                </tr>
                <tr>
                    <td>表格单元格</td>
                    <td>表格单元格</td>
                    <td>表格单元格</td>
                </tr>
                <tr>
                    <td>表格单元格</td>
                    <td>表格单元格</td>
                    <td>表格单元格</td>
                </tr>
                <tr>
                    <td>表格单元格</td>
                    <td>表格单元格</td>
                    <td>表格单元格</td>
                </tr>
                <tr>
                    <td>表格单元格</td>
                    <td>表格单元格</td>
                    <td>表格单元格</td>
                </tr>
            </tbody>
        </table>
    </div>
响应式样式

　　这个有点小小的区别，这个响应式样式是在外面嵌套了一个div,单屏幕分辨率较小的时候会出现滚动条

 

weixin_34319374
关注
bootstrap树形表格
01-17
bootstrap风格的树形表格，支持多层级展开，包含事例和源码
表格插件-bootstrap table的使用示例
祈澈菇凉
11-14 1528
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 官网：http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 1：在官网上下载相关的文件之后，步骤下载之后引入： &lt;!-- 引入的css文件 ...
bootstrap可编辑表格完整代码
11-07
bootstrap可编辑表格，包含编辑单元格文本、日期类型、下拉框(代码可运行)
动态加载bootstrap表格数据
11-29
对bootstrap表格的自定义demo，js动态加载表格数据
组合两张表
qq_44156131的博客
01-19 136
表1: Person 列明 类型 personid int FirstName Varchar LastName varchar PersonId 是上表主键 表2: Address 列名 类型 AddressId int PersonId int City varchar State varchar AddressId 是上表主键 编写...
bootstrap-table-editable.js
06-28
在 Bootstrap Table 中，`bootstrap-table-editable.js` 是一个非常重要的组件，它为表格提供了行内编辑的功能，极大地提升了用户体验。通过集成 x-editable 库，用户可以直接在表格中修改单元格内容，而无需跳转到...
bootstrap-table-fixed-columns.js
03-25
总的来说，`bootstrap-table-fixed-columns.js` 是Bootstrap Table的一个强大扩展，为开发人员提供了在Bootstrap环境下轻松实现表格固定列功能的能力。通过正确配置和使用这个插件，你可以创建出更加直观且易于浏览...
bootstrap-table-reorder-rows.js.zip
08-27
7. **API 接口**：Bootstrap Table 提供了一系列 API 方法，如 `toggleRowEditing` 用于切换行的编辑状态，`updateRow` 更新已存在的行，以及 `refresh` 重新加载表格数据。 8. **国际化支持**：对于多语言应用，...
Python库 | django-bootstrap4-0.0.8.tar.gz
03-02
4. **使用**：在模板中，可以直接使用Bootstrap的类来格式化元素，或者利用提供的标签来插入Bootstrap组件，如导航条、按钮、表格等。 **开发语言Python库** 标签表明这个资源是使用Python语言编写的，并且是作为...
Bootstrap系列之表格（Tables）
热门推荐
老__L的博客
05-27 1万+
使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类添加到任何，然后使用自定义样式或我们的各种包含的修饰类进行扩展。使用最基本的表标记，下面是Bootstrap中基于的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。 效果如图：你也可以用将浅色文本在深色背景上的颜色反转。 效果如图：与表和暗表类似，使用修饰符类或使s
bootstrap多列表单布局
12-28
这是一个bootstrap多列表单布局的demo，仅供大家参考参考
列的嵌套
weixin_34334744的博客
03-19 330
2019独角兽企业重金招聘Python工程师标准>>> ...
Bootstrap5 表格
qq_44174346的博客
07-28 199
=""
Bootstraptable建立父子表需要一个属性detailView: true, //父子表 这样就可以建立好父子表了
weixin_41438039的博客
12-18 1万+
我自己写的页面代码。需要引入js src="../../../js/common/jquery.min.js"> src="../../../js/common/bootstrap.min.js"> src="../../../js/common/bootstrap-table.js"> src="../../../js/common/bootstrap-table-zh-CN.js">
BootStrap
qq_55653761的博客
08-25 1846
浅学BootStrap
Bootstrap表格样式使用方法
我的web前端学习
01-16 3635
基本Bootstrap表格样式 Bootstrap最基本的表格样式就是在标签中加入table类，然后在标签内嵌套thead和tbody元素即可。 例如：表头表格内容按照这种形式构建的表格是最为基础的。 间隔型Bootstrap表格样式 这种表格样式是采用不同的tr背景来进行区分，如果想要使用这个样式，需要在table中再加入table-striped类，例如：<table
Bootstrap表格
weixin_44543307的博客
06-17 508
Bootstrap表格 开发工具与关键技术：VS Bootstrap 作者：木林森 撰写时间：2019年6月16日 之前我们分享了layui表格，今天我们就来分享另一种表格——Bootstrap表格。 在写编程时我们经常会用到表格，那我们是使用layui表格还是使用Bootstrap表格，这个就需要根据实际的情况进行选择了。 如果你想要设计一个有自己特点的表格，那就建议使用Bootstrap表格...
BootStrap+jqGrid结合开发表格
菜鸟的自我修养
07-26 2274
什么是jqGrid jqGrid是一个在jQuery基础上封装一个表格控件，以ajax的方式和服务器端通信。简单来说就是简单化表格开发。 废话不多说，直接上代码。 HTML前端代码 首先，需要引人样式文件和js文件，这里我们直接使用整合后的文件 <!--引入样式文件--> <link rel="stylesheet" href="static/bs/css/bo...
//触发行点击事件 $("#bootstrap-table").on("check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table load-success.bs.table", function () { var data = $("#bootstrap-table").bootstrapTable("getSelections"); $("#btn-view").toggleClass('disabled', data.length!=1); //查看按钮 });帮我解释一下这段代码
最新发布
07-11
这段代码是使用jQuery库来操作一个名为"bootstrap-table"的表格元素。通过绑定点击事件处理程序(on)来监听"check.bs.table"、"uncheck.bs.table"、"check-all.bs.table"、"uncheck-all.bs.table"和"load-success.bs....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值