• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Bootstrap table表格简单操作

Bootstrap table表格简单操作

作者:逆方向 字体:[增加 减小] 来源:互联网 时间:2017-05-11

逆方向通过本文主要向大家介绍了bootstrap table表格,bootstrap table,bootstrap table样式,bootstraptable api,bootstrap table插件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

Bootstrap table表格简单实例分享给大家,供大家参考,具体内容如下

使用类 Class="table" 既可让table美化样式

 table 相关的Class

隔行换色 : table-striped

鼠标悬停效果: table-hover

表格的边框:table-bordered

表头颜色:class="danger"  Success  等几种颜色

 1.页面添加引用

<script src="../Bootstrap/jquery-3.1.1.js"></script>
 <script src="../Bootstrap/js/bootstrap.min.js"></script>
 <link href="../Bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> 
</div>

2. 代码实现

 <table class="table table-striped table-hover table-bordered">
   <thead>
    <tr class="danger"> <%--表头颜色--%>
     <td>姓名</td>
     <td>年龄</td>
     <td>性别</td>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>张三</td>
     <td>20</td>
     <td>男</td>
    </tr>
   </tbody>
   </table>
</div>

3.页面效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • bootstrap table表格使用方法详解
  • bootstrap table 数据表格行内修改的实现代码
  • Bootstrap table表格简单操作

相关文章

  • 2017-05-11基于JavaScript实现的快速排序算法分析
  • 2017-05-11Bootstrap 3浏览器兼容性问题及解决方案
  • 2017-05-11AngularJS 防止页面闪烁的方法
  • 2017-05-11Bootstrap笔记之缩略图、警告框实例详解
  • 2017-05-11jQuery实现鼠标悬停3d菜单展开动画效果
  • 2017-05-11js手机号批量滚动抽奖实现代码
  • 2017-05-11JS简单实现获取元素的封装操作示例
  • 2017-05-11微信小程序实战之顶部导航栏(选项卡)(1)
  • 2017-05-11JavaScript字符集编码与解码详谈
  • 2017-05-11Vue 进阶教程之v-model详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JavaScript实现打地鼠小游戏
    • 详解Vue中使用v-for语句抛出错误的解决方案
    • Vue分页组件实例代码
    • javascript实现数据双向绑定的三种方式小结
    • 微信小程序 textarea 组件详解及简单实例
    • js仿新浪微博消息发布功能
    • 基于Vue2.0的分页组件
    • JS表格组件神器bootstrap table使用指南详解
    • js实现表格筛选功能
    • jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有