Bootstrap开发框架界面的调整处理

栏目: CSS · 发布时间: 6年前

内容简介:我在之前介绍了很多关于Boostrap的框架方面的文章,主要是介绍各种插件的使用居多,不过有时候觉得基于Metronic的Boostrap框架的界面效果不够紧凑,希望对它进行一定的调整,那么我们应该如何进行相应的样式调整呢,其实找到对应的CSS进行处理即可。同时也可以结合Chrome浏览器的开发者模式下的Source进行一定的调整修改,得到效果后进行项目源码修改。一般对于框架,我也希望尽可能使用默认的效果样式,毕竟设计师都调整的不错了,不过有时候感觉不好的时候,自己也可以根据需要进行一定的调整,我们首先来

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

1、原始的界面效果

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

Bootstrap开发框架界面的调整处理

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

Bootstrap开发框架界面的调整处理

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

Bootstrap开发框架界面的调整处理

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

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

Bootstrap开发框架界面的调整处理

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

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

Bootstrap开发框架界面的调整处理

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


以上所述就是小编给大家介绍的《Bootstrap开发框架界面的调整处理》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Fortran95程序设计

Fortran95程序设计

彭国伦 / 中国电力出版社 / 2002-9 / 59.00元

本书介绍了当前国际上广泛流行的高级算法语言Fortran的全新版本Fortran 95。 本书循序渐进、由浅到深,使用结构化及面向对象程序设计观念,以简捷明了的方式把Fortran 95介绍给读者。书中主要讲述了Fortran 95程序设计的方法,包括数值计算、计算机绘图、窗口程序设计、与Visual C/Visual Basic/Delphi的链接、甚至是游戏程序的编写。 本书语言简洁,实......一起来看看 《Fortran95程序设计》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具