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

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

我在之前介绍了很多关于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开发框架界面的调整处理

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101428.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Maven配置阿里云仓库下载依赖「建议收藏」

    Maven配置阿里云仓库下载依赖「建议收藏」用过Maven的都知道Maven的方便便捷,但由于某些网络原因,访问国外的Maven仓库不便捷,maven默认使用的是国外的中央仓库,下载jar时有时候会因为网络不好等原因下载不全或失败,好在国内像阿里云、网易、JBoos、开源中国等大厂搭建了国内的maven仓库,阿里云的maven仓库使用的比较多:需要使用的话,要在maven的settings.xml文件里配置mirrors的子节点,添加…

  • 网络工程师 PK 软件工程师

    网络工程师 PK 软件工程师

  • 微信公众号开发-超级简单[通俗易懂]

    微信公众号开发-超级简单[通俗易懂]1自动回复功能【图片模糊的双击图片,就清晰了】公众号注册网上一大把,搜下就可以了这个功能就是别人给公众号发什么消息,就返回指定内容关键词回复:输入关键词,返回指定内容收到消息回复:当你不是输入关键词时,自动发送当前消息,如果输入的是关键词,就返回关键词所指定的内容被关注回复:当公众号被关注时,自动给用户发的消息1案例,添加关键…

  • idea2021.8.4激活码(JetBrains全家桶)

    (idea2021.8.4激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html9071407CR5-eyJsaWN…

  • java加密工具类,可设置对应的加解密key

    java加密工具类,可设置对应的加解密key

  • java线程join方法

    java线程join方法java线程join方法1.join方法​ join方法的作用是进行线程插队,也就是说调用了join方法的线程相对于调用它的上级线程拥有跟高的执行权。调用join方法的线程的上级线程必须等待调用join方法的线程执行完成才能继续执行。举个小例子:publicclasstestjoin{ publicstaticvoidmain(String[]args)throwsI…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号