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;
    }
');
目录
相关文章
|
6月前
|
JavaScript
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
506 1
|
JavaScript
VUE element-ui之table表格内容样式(颜色)修改
VUE element-ui之table表格内容样式(颜色)修改
928 0
VUE element-ui之table表格内容样式(颜色)修改
|
前端开发 JavaScript 容器
Bootstrap 表格样式-状态类-Table
Bootstrap 表格样式-状态类-Table
59 0
|
缓存 前端开发 JavaScript
修改Antd默认样式总结
修改Antd默认样式总结
1392 0
|
JavaScript
vue admin template 侧边栏及顶部栏演示字体样式修改
vue admin template 侧边栏及顶部栏演示字体样式修改
412 0
laravel-admin1.* 设置modal弹窗宽度方法
laravel-admin1.* 设置modal弹窗宽度方法
209 0
laravel-admin1.* 设置modal弹窗宽度方法
|
JavaScript 前端开发
laravel-admin1.*获取Grid列表页选中的行
laravel-admin1.*获取Grid列表页选中的行
150 0
|
JavaScript 开发工具 git
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
1281 0
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
|
前端开发
前端项目实战192-修改ant design默认样式需要进行:global设定
前端项目实战192-修改ant design默认样式需要进行:global设定
135 0
|
Web App开发 前端开发 iOS开发
Element-ui中 表格 (Table)组件中滚动条样式修改
Element-ui中 表格 (Table)组件中滚动条样式修改
1350 0
Element-ui中 表格 (Table)组件中滚动条样式修改