在平时工作中，文件上传下载功能属于不可或缺的一部分。bootstrap前端样式框架也使用的比较多，现在根据bootstrap强大的样式模板，自定义一种文件下载的样式。 后续会使用spring MVC框架实现文件上传的全部代码，敬请期待。 先看图片示例： 本示例包括下载样本文件样式和上传文件样式。 [img]http://files.jb51.net/file_images/article/201605/2016526143754000.png?2016426143816[/img] 直接先上代码，最后讲解： 主要涉及到的技术有：[b]bootstrap；css3的pointer-events；html5[/b] [b]1. html5的基本文件上传样式[/b] <input type="file" name="file"> 样式会根据不同的浏览器显示不同的效果。 [b]2. 字体图标[/b] 可以使用bootstrap内置的glyphicons字体图标，也可以使用Font Awesome的字体图标。具体使用教程参考官网： glyphicons： http://v3.bootcss.com/components/#glyphicons Font Awesome： http://fontawesome.io/ 本例中使用到两个图标，[b] <i class="fa fa-folder-open"><i class="fa fa-download">[/b] 或者[b]<i class="glyphicons glyphicons-folder-open"><i class="glyphicons glyphicons-download-alt">[/b] [b]3. css3 ：pointer-events[/b]  在bootstrap中， .form-control-feedback 的pointer-events设置为none， 导致在点击下载样本按钮时无法选取元素，现在设置为auto。 语法： [b]pointer-events：[/b]auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all [b]默认值：[/b]auto [b]适用于：[/b]所有元素 [b]继承性：[/b]有 [b]动画性：[/b]否 [b]计算值：[/b]指定值 [b]取值：[/b] auto：与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同 none：[b]元素永远不会成为鼠标事件的target[/b]。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。 其他值只能应用在SVG上。 [b]4. 上传文件的按钮实现 ----- bootstrap组合框的使用[/b]  .input-group 和 .input-group-addon的使用。 [img]http://files.jb51.net/file_images/article/201605/2016526144203289.png?2016426144215[/img]  具体的css渲染自行查看bootstrap源代码。 [b]5. 下载样本按钮的实现 --- 参考bootstrap的表单错误提示样式[/b]  .has-feedback和.form-control-feedback的使用 [img]http://files.jb51.net/file_images/article/201605/2016526143713647.jpg?2016426143725[/img] 如果还没有学习够的话大家可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附一个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] 以上就是本文的全部内容，希望对大家学习Bootstrap程序设计有所帮助。