tableHover

<! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < meta name ="viewport" content ="width=device-width, initial-scale=1.0" > < meta http-equiv ="X-UA-Compatible" content ="ie=edge" > < title > Document </ title > < script src ="./lib/vue-2.4.0.js" ></ script > < script src ="./lib/vue-resource-1.3.4.js" ></ script > < link rel ="stylesheet" href ="./lib/bootstrap-3.3.7.css" > </ head > < body > < div id ="app" > < div class ="panel panel-primary" > < div class ="panel-heading" > < h3 class ="panel-title" > 添加品牌 </ h3 > </ div > < div class ="panel-body form-inline" > <

常用样式                             如果需要更多资料点击下方图片⬇(备注来意)                     排版 标题 ​ Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题<small></small>或使用.small <h1>h1. Bootstrap heading<small>副标题</small></h1> <div class="h1">Bootstrap标题1<span class="small">副标题</span></div> 段落 ​ 段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。可以使用以下标签给文本做突出样式处理： ​ <small>:小号字 ​ <b><strong>:加粗 ​ <i><em>:斜体 <p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p> 强调 ​ 定义了一套类名

话不多说直接上代码 第一步：导入jquery的插件 https://github.com/rainabba/jquery-table2excel HTML部分： 第二步 ： 添加一个按钮 <button type="button" class="btn btn-default bt_derive">导出</button> 以及添加一个表格， 这里需要注意一个地方，下面表格中有一个class类（ class="noExl" ）他的目的就是让不要显示的列显示出来 <div class="table-responsive"> <table class="table table-hover" id="test_table"> <thead> <tr> <th>序号</th> <th>模具编号></th> <th>模具名称</th> <th模具照片</th> <th>产品图号</th> <th>产品名称</th> <th>入账时间</th> <th>生产班次</th> <th>操作工</th> <th>操作工号</th> <th工单号</th> <th>地域</th> <th>模具状态</th> <th class="noExl">模具详细</th> <th class="noExl">模具保养</th> <th class="noExl">模具维修</th> <th style=

layer代码 $(".info_detail").on('click', function () { var uid = $(this).data('uid'); //iframe层 layer.open({ type: 2, title: '查看金额明细', shadeClose: true, shade: 0.6, area: ['780px', '600px'], // content: 'money_log?uid=' + uid + '&utype=3' content: '__APP__/Public/money_log?uid=' + uid + '&utype=3' }); }); php代码 /** * 金额日志 */ public function money_log() { $uid = $_GET['uid']; $utype = $_GET['utype']; $money_log = M('money_log'); $page = 1; if(!empty($_GET['page'])){ $page=(int)$_GET['page']; } $this->assign('page',$page); $step = C('PAGE_NORMAL_COUNT'); $model = D('Page'); $start = ($page-1)*$step

基础样式 .table <table class="table"> ... </table> 条纹状表格 .table-striped <table class="table table-striped"> ... </table> 条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。 带边框的表格 .table-bordered <table class="table table-bordered"> ... </table> 鼠标悬停 .table-hover <table class="table table-hover"> ... </table> 紧缩表格 .table-condensed <table class="table table-condensed"> ... </table> 行样式 .active .sucess .info Class 描述 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作 <!-- On rows --> <tr class="active">...</tr> <tr class=