我在之前介绍了很多关于Boostrap的框架方面的文章，主要是介绍各种插件的使用居多，不过有时候觉得基于Metronic的Boostrap框架的界面效果不够紧凑，希望对它进行一定的调整，那么我们应该如何进行相应的样式调整呢，其实找到对应的CSS进行处理即可。同时也可以结合Chrome浏览器的开发者模式下的Source进行一定的调整修改，得到效果后进行项目源码修改。

1、原始的界面效果

一般对于框架，我也希望尽可能使用默认的效果样式，毕竟设计师都调整的不错了，不过有时候感觉不好的时候，自己也可以根据需要进行一定的调整，我们首先来看看标准界面下的Portlet界面。

上面是一个标准的界面，包括查询、表格数据展示等功能，我把内容区域分为了这两块，使用Portlet界面进行了分区，整体看来界面还是挺美观的，不过就是觉得绿色横条有点偏大了，我们是否可以调整一下呢？

当然可以了，我们对这个样式进行跟踪，找到对应的CSS样式进行修改即可。

我们从对应的CSS文件里面找到这个portlet-title进行调整就好了。

CSS文件的内容是在文件 metronic/assets/global/css/components-rounded.css 里面的，因此我们找到并修改对应样式即可。

可以对他们进行测试进行查看最终效果，然后确定具体的偏移量和高度是否满足即可。

我们可以通过Chrome浏览器进行直接的修改查看，马上可以看到效果，非常方便

最后看看我们调整后的界面效果吧。

Bootstrap开发框架界面的调整处理的更多相关文章

  1. 基于Metronic的Bootstrap开发框架经验总结（8）--框架功能总体界面介绍

    在前面介绍了一系列的<基于Metronic的Bootstrap开发框架经验总结>的随笔文章,随笔主要是介绍各个知识点的内容,对框架的总体性界面没有很好的阐述,本篇随笔主要介绍这个Boots ...

  2. 基于Metronic的Bootstrap开发框架经验总结（13）--页面链接收藏夹功能的实现2（利用Sortable进行拖动排序）

    在上篇随笔<基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现>上,我介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按 ...

  3. 基于Metronic的Bootstrap开发框架经验总结（12）--页面链接收藏夹功能的实现

    在一个系统里面,往往有很多菜单项目,每个菜单项对应一个页面,一般用户只需要用到一些常用的功能,如果每次都需要去各个层次的菜单里面去找对应的功能,那确实有点繁琐.特别是在菜单繁多,而客户又对系统整体不熟 ...

  4. 基于Metronic的Bootstrap开发框架总览

    基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理 最近一直很多事情,博客停下来好久没写了,整理下思路,把最近研究的基于Metronic的Bootstrap开发框 ...

  5. 基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理

    最近一直很多事情,博客停下来好久没写了,整理下思路,把最近研究的基于Metronic的Bootstrap开发框架进行经验的总结出来和大家分享下,同时也记录自己对Bootstrap开发的学习研究的点点滴 ...

  6. 基于Metronic的Bootstrap开发框架经验总结（15）-- 更新使用Metronic 4.75版本

    在基于Metronic的Bootstrap开发框架中,一直都希望整合较新.较好的前端技术,结合MVC的后端技术进行项目的开发,随着时间的推移,目前Metronic也更新到了4.75版本,因此着手对这个 ...

  7. 基于Metronic的Bootstrap开发框架经验总结（18）-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

    在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...

  8. 基于Metronic的Bootstrap开发框架经验总结（17）-- 使用 summernote插件实现HTML文档的编辑和图片插入操作

    在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序.APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML ...

  9. 基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...

随机推荐

  1. 经典面试题|讲一讲JVM的组成

    JVM(Java 虚拟机)算是面试必问的问题的了,而但凡问 JVM 一定会问的第一个问题就是:讲一讲 JVM 的组成?那本文就注重讲一下 JVM 的组成. 首先来说 JVM 的组成分为,整体组成部分和 ...

  2. 痞子衡嵌入式：语音处理工具Jays-PySPEECH诞生记（3）- 音频显示实现(Matplotlib, NumPy1.15.0)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是语音处理工具Jays-PySPEECH诞生之音频显示实现. 音频显示是Jays-PySPEECH的主要功能,Jays-PySPEECH借 ...

  3. SpringBoot整合系列-PageHelper分页插件

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9971043.html SpringBoot整合MyBatis分页插件PageHelper ...

  4. vue实用组件——圆环百分比进度条

    因为所在公司临近年底突然宣布Game Over,导致我等小码农又要踏上一个艰辛的求职道路了.才眨眼功夫,年就过完了,快乐的时光总是很匆忙呀. 开年的第一个面试,面试官问我会不会自己写一个圆环进图圈,这 ...

  5. iOS 循环引用讲解（中）

    谈到循环引用,可能是delegate为啥非得用weak修饰,可能是block为啥要被特殊对待,你也可能仅仅想到了一个weakSelf,因为它能解决99%的关于循环引用的事情.下面我以个人的理解谈谈循环 ...

  6. ASP.net core 使用UEditor.Core 实现 ueditor 上传功能

    ASP.net core 使用UEditor.Core 实现 ueditor 上传功能 首先通过nuget 引用UEditor.Core,作者github:https://github.com/bai ...

  7. c++中求数组长度

    #include <iostream> using namespace std; template <class T> int getArrSize(T& arr){ ...

  8. JS 关于 bind ,call,apply 和arguments p8

    关于这3个货,网上有很多文章介绍,我这边还是记录下并加上自己的理解,还有arguments函数内置对象顺便也记录下: 简单的说apply和call 会绑定第一个参数的作用域给调用函数对象实例,并会执行 ...

  9. git push origin与git push -u origin master的区别

    $ git push origin 上面命令表示,将当前分支推送到origin主机的对应分支. 如果当前分支只有一个追踪分支,那么主机名都可以省略. $ git push 如果当前分支与多个主机存在追 ...

  10. SAP MM 无价值物料管理的一种实现思路

    SAP MM 无价值物料管理的一种实现思路 笔者所在的项目,客户工厂处于先期试生产阶段,尚未开始大规模的商业化生产,但是这并不影响客户集团总部的SAP项目实施.笔者于7月初加入该工厂的第2期SAP项目 ...