在平时工作中，文件上传下载功能属于不可或缺的一部分。bootstrap前端样式框架也使用的比较多，现在根据bootstrap强大的样式模板，自定义一种文件下载的样式。
后续会使用spring MVC框架实现文件上传的全部代码，敬请期待。
直接先上代码，最后讲解：
主要涉及到的技术有：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程序设计有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
