发布于 2015-11-20 06:57:48 | 823 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的Bootstrap入门,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


前端时间鼓捣的一个简单的手机网站,今天又拿出来弄一弄

因为主要是给手机访问,用的是bootstrap响应式布局,今天的任务是做一个数据展示页面

但是由于数据的列比较多,所以横向显示不下,为了较好的显示,将table包裹在了一个.table-responsive元素里

那么在较小的视口(viewport)时,则可以通过滑动来查看整条数据,从而能保证整体页面的协调性。

刚才说了,数据列比较多,且第一列是后面数据的所有者,那么观察者在看数据的时候肯定是要对应着数据所有者来看的,那么问题来了

若是滑动到后面,那么很容易忘记本条的所有者,那是相当不方便的!比如我们在看NBA比赛数据的时候,有很多项统计(也就是很多列)

第一列显示的是名字,那么随着我们往后滑动,会出现这样的结果:

这样我们根本不知道数据对应的人是谁!哎~怎么办呢?

一般的方法都是将“所有者”一列固定下来,滑动时仅滑动后面的列。

不过之前用这个功能都是在前端框架中封装好了的,比如easyUI中有frozen columns,但是在bootstrap中倒是没用过(它本身也没提供这个)

那么自己写一个吧~也没什么思路,之后终于想到一种“非主流”一点的方法:用2个table

左边的table用来显示固定信息,而右边的table用来滑动看数据

实现起来比较简单,将几个要点:

1、使用float:left来将2个table排列到一行上,但是两者和起来的width不能超过总width

2、注意2个table单元格的对齐

最后实现的效果如下:



相关阅读 :
bootstrap中固定table的表头的方法
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
bootstrap中添加额外的图标实例代码
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Bootstrap中的Panel和Table全面解析
全面解析Bootstrap中Carousel轮播的使用方法
全面解析Bootstrap中tooltip、popover的使用方法
全面解析Bootstrap中transition、affix的使用方法
全面解析Bootstrap中form、navbar的使用方法
BootStrap中的table实现数据填充与分页应用小结
全面解析Bootstrap中nav、collapse的使用方法
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务