laravel-admin1.x改变grid表格默认样式

简介: laravel-admin1.x改变grid表格默认样式

javascript方式


1.x的表格是bootstrap3实现的,因此完全支持bootstrap3的表格样式,具体参考:表格 · 全局 CSS 样式 · Bootstrap v3 中文文档,因此我们只需要通过js控制表格类就可实现控制grid样式的改变,将以下代码添加到grid实例化后面(位置很重要,不然可能不起作用),添加完后清除缓存强制刷新浏览器

  • 条纹表格:table-striped
  • 表格边框:table-bordered
  • 紧缩表格:table-condensed
\Encore\Admin\Admin::script('
    $(function(){
        $(".grid-table").addClass("table-striped table-bordered table-condensed");
    })
');    

image.png

css方式


直接重写table的css样式来改变,适合自定义样式,只需要添加到grid方法中就行

\Encore\Admin\Admin::style('
    .table-responsive>.table{
        border: 1px solid #eeeeee;
    }
    .table-responsive>.table>tbody>tr>td, 
    .table-responsive>.table>tbody>tr>th, 
    .table-responsive>.table>tfoot>tr>td, 
    .table-responsive>.table>tfoot>tr>th, 
    .table-responsive>.table>thead>tr>td, 
    .table-responsive>.table>thead>tr>th {
        white-space:nowrap;
        border: 1px solid #777;
    }
');
目录
相关文章
|
11月前
修改elementui table 组件滚动条样式
修改elementui table 组件滚动条样式
100 0
|
3月前
|
前端开发 容器
bootstrap table 设置自定义列宽
【5月更文挑战第4天】bootstrap table 设置自定义列宽
|
9月前
|
前端开发
bootstrap table分页悬停颜色改变
bootstrap table分页悬停颜色改变
30 0
|
JavaScript
VUE element-ui之table表格内容样式(颜色)修改
VUE element-ui之table表格内容样式(颜色)修改
866 0
VUE element-ui之table表格内容样式(颜色)修改
|
11月前
|
前端开发 JavaScript 容器
Bootstrap 表格样式-状态类-Table
Bootstrap 表格样式-状态类-Table
48 0
element-plus 自动引入修改主题色
element-plus 自动引入修改主题色
984 0
|
缓存 前端开发 JavaScript
修改Antd默认样式总结
修改Antd默认样式总结
1310 0
|
JavaScript
vue admin template 侧边栏及顶部栏演示字体样式修改
vue admin template 侧边栏及顶部栏演示字体样式修改
357 0
laravel-admin1.* 设置modal弹窗宽度方法
laravel-admin1.* 设置modal弹窗宽度方法
174 0
laravel-admin1.* 设置modal弹窗宽度方法
|
JavaScript 前端开发
laravel-admin1.*获取Grid列表页选中的行
laravel-admin1.*获取Grid列表页选中的行
132 0