深入浅出flask(11):h-ui前端框架的响应式的列重置

caimouse caimouse     2022-12-23     702

关键词:

在开发WEB应用程序时,经常会遇到不同的显示屏大小的问题,导致显示页面不能满足不同的电脑屏幕大小,或者手机屏幕的大小,这样会让大家用起来不爽的大原因。所以屏幕的适应才是一个大的问题,它是一个排版的问题,这种问题会伴随着UI所有的开发过程。

bootstrap的栅格系统

bootstrap包含了一个响应式的,移动设备优先,不固定的网格系统,可以随着屏幕的伸缩,改变列的大小和数量,同行最多12列。

代码使用@media根据屏幕的大小控制样式。

Bootstrap 网格系统(Grid System)的工作原理

网格系统通过一系

深入浅出flask(32):h-ui前端框架的警告窗口

这里实现一些可以关闭的提示性窗口,比如下面的例子:在这里看到四个等级的提示窗口,这些窗口可以点击后面的X关闭,这是可以响应关闭的小窗口。在演示的例子里,使用下面的代码:   <p>成功状态</p>&... 查看详情

深入浅出flask:调试h-ui前端框架一点心得

在开发网站时,经常要选择一套前端的页面显示,这样不用自己重新去创造轮子,有利于复用现成的代码,也能提高开发速度,以及代码的稳定性。这样也便于学习一些先进的经验,也可以使自己的工作更加有趣。在使用flask开... 查看详情

深入浅出flask(35):h-ui前端框架的面板滚动

面板是一种比较特殊的显示,它是由标题和内容组成。它是比较适合用来显示一些总结性的报表结果。像下面这样的案例:在这里来学习的例子显示如下:这是普通的两个面板,面板与面板之间没有间隔。 查看详情

深入浅出flask(26):h-ui前端框架的顶部导航

前面学习了几种导航,是比较常用的,现在还有两种导航的方式,如下:对于顶部导航,在以前很多网站都是这样的,方便收藏和查看,它的实现代码如下:   <divclass="topnav"> 查看详情

深入浅出flask(14):h-ui前端框架的表格

表格应该是前端里比较重要的一个数据显示的方式,特别是制作各种各样报表,都需要使用表格来列举数据,这样才可以清晰地显示数据。先来看一个普通默认的表格:这样看起来就像普通的文字排列一样,无线条和颜色,代码... 查看详情

深入浅出flask(27):h-ui前端框架的下拉菜单

前面已经学习过一些下拉菜单的例子,这里再次来学习下面两个例子,因为它有一点是不同的,就是需要点击才弹出的菜单,前面学习的都是鼠标经过就会显示出来的菜单。本例学习的菜单如下图: 当我们去点击第一个菜单... 查看详情

深入浅出flask(20):h-ui前端框架的表单验证

前面学习了怎么样进行表单布局,接着下来就是进行表单验证了。验证的方法有很多,比如使用前端验证,也可以采用后端验证。可以采用不同的组件验证,比如jQuery.Validate.js验证,也可以采用Validform.js验证。在这里采用jQuery.Va... 查看详情

深入浅出flask(25):h-ui前端框架的导航

前面学习了按钮组,在这里更加深入地学习了组合各种组件,不但要有按钮组合,还有菜单的组合,这样才能更加适合ERP或者MES等操作的系统,因为这样的系统需要选择的参数比较多,所以采用导航条或工具条,都是比较常用的... 查看详情

深入浅出flask(24):h-ui前端框架的按钮组件

WEB的应用越来越像桌面的应用程序,比如在顶端上出现一条工具条,这种例子数不胜数,如下面的CSDN的编辑器: 这里一串的按钮,就是利用这样的技术来实现的。本文将来实现像下面这样的界面: 在这里分来两组按钮... 查看详情

深入浅出flask(12):h-ui前端框架的排版

标题和强调:显示这段内容的CSS设置:<div>   <h1>h1.大标题<small>小标题</small></h1>   <h2>h2.大标题<small>小标题</small></h2> 查看详情

深入浅出flask(21):h-ui前端框架的按钮

如果是一个ERP的软件系统,可能按钮比较多,这时候也可以把按钮理解为连接,只要点击一下连接,就可以操作一个功能,或者显示一个页面。因此按钮也是常用的控件,本例子实现下面的按钮的显示:按钮的显示比较简单一些... 查看详情

深入浅出flask(22):h-ui前端框架的字体图标

在使用H-ui的网页模板时,经常会碰到一些图标显示,这些图标显示是使用一种特殊的字体,而不是像素图来显示的,比如像下面的代码:<iclass="iconHui-iconfont">&#xe684;</i>可以看到使用是一串数字:&#xe684;。这样使用... 查看详情

深入浅出flask(13):h-ui前端框架的显示代码

当一个网站需要显示一段代码时,最好的方式,就是使用编辑器的显示的方式,这里可采用prettify.min.js组件来显示代码。这个代码是google开发显示代码的项目,使用这个组件比较简单,只要下面添加代码加载:<bodyοnlοad="pretty... 查看详情

深入浅出flask(15):h-ui前端框架的表单

表单也是前端必须学会的内容,并且是优先学习的内容,因为页面的数据收集功能,就依赖于表单的输入,才会进入到后端处理,或者保存到数据库,又或者发送给别的服务器。因此输入是一个必备的功能。可以说掌握了表单的... 查看详情

深入浅出flask(30):h-ui前端框架的选项卡

在开发的过程中,经常会遇到一些功能介绍的展示,由于介绍内容比较少,但是有两三个选择,用户一般不清楚选择那一个,这时就要派选项卡上场了,因为它可以把内容放在下面,用户可以通过点击选项卡实现切换,从而看到... 查看详情

深入浅出flask(31):h-ui前端框架的标签和标号

有时候用一些显眼的标签来标注一些文本,以便提醒人们注意事项,比如本例实现的显示如下图:这些分级的警告在一些信息管理系统会比较重要,因为这些信息涉及到设备的安全,或者人身的安全,都需要明显的对比效果。这... 查看详情

深入浅出flask(35):h-ui前端框架的广告效果

广告是一个网站的基本的需求,比如公司需要展示产品,网站需要招聘员工。另外广告也是一个网站最基本的收入,这样才能维持着一个网站能够生存下去的经济支柱。可以这样说,网络的发展,大部分都是基于广告的收入,比... 查看详情

深入浅出flask(37):h-ui前端框架的折叠框

有时候会有比较多的内容要展示,但限制屏幕的面积有限,不能同时展示那么多内容,这时候就会需要使用折叠框的设计,动态地根据用户的需求来展示出来,让用户使用起来更加方便快捷。这种方式在导航和内容显示方面使用... 查看详情