在平时工作中,文件上传下载功能属于不可或缺的一部分。bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式。
后续会使用spring MVC框架实现文件上传的全部代码,敬请期待。
直接先上代码,最后讲解:
在平时工作中,文件上传下载功能属于不可或缺的一部分。bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式。
后续会使用spring MVC框架实现文件上传的全部代码,敬请期待。
直接先上代码,最后讲解:
主要涉及到的技术有:bootstrap;css3的pointer-events;html5
显示不同的效果。
可以使用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:与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同 none:
.input-group 和 .input-group-addon的使用。
具体的css渲染自行查看bootstrap源代码。
.has-Feedback和.form-control-Feedback的使用
如果还没有学习够的话大家可以点击进行学习,再为大家附一个精彩的专题:
以上就是本文的全部内容,希望对大家学习Bootstrap程序设计有所帮助。