Bootstrap⾃定义⽂件上传下载样式
在平时⼯作中，⽂件上传下载功能属于不可或缺的⼀部分。bootstrap前端样式框架也使⽤的⽐较多，现在根据bootstrap强⼤的样式模板，⾃
定义⼀种⽂件下载的样式。
后续会使⽤spring MVC框架实现⽂件上传的全部代码，敬请期待。
先看图⽚⽰例：本⽰例包括下载样本⽂件样式和上传⽂件样式。
直接先上代码，最后讲解：
<div class="form-group col-md-12 has-feedback" id="file">
<label for="" class="control-label col-md-4">选择⽂件:</label>
<div class="col-md-4 input-group">
<input id="lefile" type="file" >
<span class="input-group-addon" onclick="$('input[id=lefile]').click();" ><i class="fa fa-folder-open"></i>Browse</span>    <input id="photoCover" class="form-control" type="text">
<span class="fa fa-download form-control-feedback" ></span>
</div>
</div>
主要涉及到的技术有：bootstrap；css3的pointer-events；html5
1. html5的基本⽂件上传样式
<input type="file" name="file">样式会根据不同的浏览器显⽰不同的效果。
2. 字体图标
可以使⽤bootstrap内置的glyphicons字体图标，也可以使⽤Font Awesome的字体图标。具体使⽤教程参考官⽹：
本例中使⽤到两个图标， <i class="fa fa-folder-open"><i class="fa fa-download">
或者<i class="glyphicons glyphicons-folder-open"><i class="glyphicons glyphicons-download-alt">
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：元素永远不会成为⿏标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，⿏标事件可以指向后代元素，在这种
情况下，⿏标事件将在捕获或冒泡阶触发⽗元素的事件侦听器。
其他值只能应⽤在SVG上。
4. 上传⽂件的按钮实现 ----- bootstrap组合框的使⽤
.input-group 和 .input-group-addon的使⽤。
具体的css渲染⾃⾏查看bootstrap源代码。
5. 下载样本按钮的实现 --- 参考bootstrap的表单错误提⽰样式
.has-feedback和.form-control-feedback的使⽤
如果还没有学习够的话⼤家可以点击进⾏学习，再为⼤家附⼀个精彩的专题：
bootstrap 5
以上就是本⽂的全部内容，希望对⼤家学习Bootstrap程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。