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)
blank

相关推荐

  • js的timeout_定时器有哪三种类型

    js的timeout_定时器有哪三种类型js中两种定时器setTimeout和setInterval开发工具与关键技术:DW、Js作者:李宥良撰写时间:2019年1月17日定时器的用法非常之普遍,一般动态变化的效果都会用到定时器;定时器分为setTimeout和setInterval下面是方法和描述计时器类型:一、setTimeout(对象)setTimeout()计时器:在载入后延迟指定时间后,去执行一次表达式,仅执…

  • 看上市公司公告的app_毒APP公告

    看上市公司公告的app_毒APP公告用户为本,让用户成为CSDN产品的主人,为此,我们特开设了CSDN产品公告栏,切实听取大家对新功能的反馈,定期抽取部分反馈用户赠送精美礼品一份!在过去一周,CSDN研发团队又上线了哪些功能呢?让我一起看下:CSDNAPP发布最新版,新增大厂在线刷题功能CSDN博主排名更新,原创优质博文更容易得到曝光MD编辑器优化操作更便捷更加极客酷炫的博客皮肤3.0上线绑定脉脉即可获得专属勋…

  • java map 二维数组_Java二维数组实现简单Map

    java map 二维数组_Java二维数组实现简单Map这些天频繁的在使用二维数组,让我觉得二维数组要比Map更灵活多变,以前和别人提起“数据结构”总能听到有人问:“如果编程语言里没有HashMap,你能自己实现一个Map来用么?”。熟练了二维数组,今天我就来尝试实现一个最简单的Map吧,我没有参考网上的例子,也没去想数据结构书中是怎么讲的,纯粹的自己个一个设计方案,中途遇到很多问题,但还是逐个解决了,还有很多不足之处,希望大家能帮我指点指点,一起交流…

  • 网络编程-UDP编程

    网络编程-UDP编程2.UDP端口和TCP端口虽然都使用0~65535,但他们是两套独立的端口,即一个应用程序用TCP占用了端口1234,不影响另一个应用程序用UDP占用端口1234。在Java中使用UDP编程,仍然需要使用Socket,因为应用程序在使用UDP时必须指定网络接口(IP地址)和端口号。1.UDP和TCP编程相比,UDP编程就简单得多,因为UDP没有创建连接,数据包也是一次收发一个,所以没有流的概念。和服务器端相比,客户端使用UDP时,只需要直接向服务器端发送UDP包,然后接收返回的UDP包。…

  • CentOS7 中使用 firewall-cmd 配置只允许指定ip访问本机的指定端口

    CentOS7 中使用 firewall-cmd 配置只允许指定ip访问本机的指定端口

  • 【SpringBoot】1、创建第一个SpringBoot项目

    【SpringBoot】1、创建第一个SpringBoot项目创建SpringBoot项目可以通过两种方式,1、通过访问:https://start.spring.io/,SpringBoot的官方网站进行创建SpringBoot项目;2、通过工具(例如:Idea)创建SpringBoot项目。本次使用开发工具:Idea创建我的第一个SpringBoot项目。首先,打开我们的Idea开发工具选择CreateNewPoject(创建一个新的项目)…

    2022年10月13日

发表回复

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

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