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


Posted in Javascript onMay 26, 2016

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

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

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

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

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

<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" style="display:none">
    <span class="input-group-addon" onclick="$('input[id=lefile]').click();" style="cursor: pointer; background-color: #e7e7e7"><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" style="cursor: pointer;pointer-events: auto;"></span>
    </div>
   </div>

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

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

<input type="file" name="file">
样式会根据不同的浏览器显示不同的效果。

2. 字体图标

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

glyphicons: http://v3.bootcss.com/components/#glyphicons

Font Awesome: http://fontawesome.io/

本例中使用到两个图标 <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的使用。

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

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

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

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

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

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

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

Javascript 相关文章推荐
jquery select 设置默认选中的示例代码
Feb 07 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
什么是SOLID
Mar 24 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 #Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 #Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 #Javascript
怎么引入(调用)一个JS文件
May 26 #Javascript
JS加载器如何动态加载外部js文件
May 26 #Javascript
jquery获取复选框的值的简单实例
May 26 #Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 #Javascript
You might like
当海贼王变成JOJO风
2020/03/02 日漫
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
js实现弹窗效果
2020/08/09 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python Selenium参数配置方法解析
2020/01/19 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
市级文明单位申报材料
2014/05/07 职场文书
区级文明单位申报材料
2014/05/15 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
紧急迫降观后感
2015/06/15 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
nginx常用配置conf的示例代码详解
2022/03/21 Servers