Bootstrap自定义文件上传下载样式

在平时工作中,文件上传下载功能属于不可或缺的一部分。bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式。

后续会使用spring MVC框架实现文件上传的全部代码,敬请期待。

先看图片示例: 本示例包括下载样本文件样式和上传文件样式。

直接先上代码,最后讲解:

Feedback" id="file">

主要涉及到的技术有:bootstrap;css3的pointer-events;html5

1. html5的基本文件上传样式

显示不同的效果

2. 字体图标

可以使用bootstrap内置的glyphicons字体图标,也可以使用Font Awesome的字体图标。具体使用教程参考官网:

glyphicons:

Font Awesome:

本例中使用到两个图标

或者

3. css3 :pointer-events

在bootstrap中, .form-control-Feedback 的pointer-events设置为none, 导致在点击下载样本按钮时无法选取元素,现在设置为auto。

语法:

pointer-events:

auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

auto

适用于:

所有元素

继承性:有

动画性:否

计算值:指定值

取值:

auto:与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同 none:

。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。 其他值只能应用在SVG上。

4. 上传文件的按钮实现 ----- bootstrap组合框的使用

.input-group 和 .input-group-addon的使用。

具体的css渲染自行查看bootstrap源代码

5. 下载样本按钮的实现 --- 参考bootstrap的表单错误提示样式

.has-Feedback和.form-control-Feedback的使用

如果还没有学习够的话大家可以点击进行学习,再为大家附一个精彩的专题:

以上就是本文的全部内容,希望对大家学习Bootstrap程序设计有所帮助。

相关文章

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap...
顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所...
一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不...
在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了...
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有...
BootStrap是基于HTML、CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前...