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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
shiro授权的实现原理
Sep 21 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 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
完美解决PHP中文乱码
2009/11/26 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
htm调用JS代码
2007/03/15 Javascript
JS 控件事件小结
2012/10/31 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
js实现简单模态框实例
2018/11/16 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
社区工作者先进事迹
2014/01/18 职场文书
公司司机岗位职责
2014/02/07 职场文书
政府采购方案
2014/06/12 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
保外就医申请书范文
2015/08/06 职场文书
珍爱生命主题班会
2015/08/13 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android
nginx配置限速限流基于内置模块
2022/05/02 Servers