脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap table

Bootstrap table表格简单操作

 更新时间：2017年02月07日 09:21:00   作者：逆方向  
这篇文章主要为大家详细介绍了Bootstrap table表格简单操作的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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" />

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>

3.页面效果

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

您可能感兴趣的文章:

相关文章

  • 微信小程序之滑动页面隐藏和显示组件功能的实现代码

    微信小程序之滑动页面隐藏和显示组件功能的实现代码

    这篇文章主要介绍了微信小程序之滑动页面隐藏和显示组件功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • Js+Flash实现访问剪切板操作

    Js+Flash实现访问剪切板操作

    最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥,最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作
    2012-11-11
  • ES6正则的扩展实例详解

    ES6正则的扩展实例详解

    这篇文章主要介绍了ES6正则的扩展,结合实例形式详细分析了ES6正则操作常用的修饰符、模式、属性、方法及相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • KnockoutJs快速入门教程

    KnockoutJs快速入门教程

    这篇文章主要为大家分享了KnockoutJs快速入门教程，了解KnockoutJs到底是什么？如何使用KnockoutJS中的data-bind语法来将模型数据绑定到DOM元素中，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • bootstrap使用validate实现简单校验功能

    bootstrap使用validate实现简单校验功能

    这篇文章主要为大家详细介绍了bootstrap使用validate实现简单校验功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 二级域名或跨域共享Cookies的实现方法

    二级域名或跨域共享Cookies的实现方法

    适用于Asp。 在主域名设置的Cookie，在各子域名共用；适用于博客等提供二级域名。这个问题，以网上有众多帖子，可惜都没有完整解决。
    2008-08-08
  • JS document form表单元素操作完整示例

    JS document form表单元素操作完整示例

    这篇文章主要介绍了JS document form表单元素操作,结合完整实例形式详细分析了JavaScript form表单元素获取、输出、遍历等相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • JS正则表达式修饰符中multiline(/m)用法分析

    JS正则表达式修饰符中multiline(/m)用法分析

    这篇文章主要介绍了JS正则表达式修饰符中multiline(/m)用法,结合实例形式分析了JS正则中多行模式multiline的功能、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • uniapp与webview之间的相互传值的实现

    uniapp与webview之间的相互传值的实现

    这篇文章主要介绍了uniapp与webview之间的相互传值的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • JavaScript中计算网页中某个元素的位置

    JavaScript中计算网页中某个元素的位置

    这篇文章主要介绍了JavaScript中计算网页中某个元素的位置,本文先是讲解了一些必要的知识和实现难点,然后给出实现代码,需要的朋友可以参考下
    2015-06-06

最新评论