效果:

代码:

<div class="panel panel-default" style="border: 1px solid #ffd800;">
<div class="panel-heading" style="background-color: #ffd800; color: #ffffff;">
<h5><b>请,选择上传文件:</b></h5>
</div>
<div class="panel-body">
<table>
<tr>
<td>
<label for="exampleInputFile">选择上传文件:</label>
</td>
<td>
<input id="lefile" type="file" style="display: none;"/>
<div class="input-append">
<input id="photoCover" class="input-large" type="text" style="height: 30px; border-radius:5px; border:1px solid #CCCCCC; padding-left:10px;" placeholder="FileUpload" />
<a class="btn" onclick="$('input[id=lefile]').click();" style ="background-color:#FFD800; height:30px; color:#ffffff; width:100px;">上传</a>
</div> <script type="text/javascript">
$('input[id=lefile]').change(function () {
$('#photoCover').val($(this).val());
});
</script>
</td>
</tr>
<tr>
<td>
<label for="exampleInputEmail1">打印份数:</label>
</td>
<td>
<input type="email" class="form-control" id="pagenum" placeholder="PageNum" style="width: 100px;" />
</td>
</tr>
</table>
</div>
</div>

BootStrap - FileUpload美化样式的更多相关文章

  1. 极简bootstrap file 美化样式(无需第三方插件)

    原本的file上传表单非常的丑,但是又不想使用第三方插件,Bootstrap也没有相关的美化,于是用纯CSS完成,美化,JS实现功能,连BootStrap都不需要,十分简单 1.给原版丑表单隐藏了di ...

  2. 关于bootstrap框架美化的实例教程(python)

    经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...

  3. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  4. [bootstrap] 基本css样式和组件

    一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...

  5. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  6. bootstrap之css样式

    一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和h ...

  7. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  8. 修改bootstrap 的全局样式,bootstrap 3.0 是由html5和CSS 3组成的

    方法一: 不建议使用 * {}选择器,因为在一些其他样式插件.特殊部分会有更好的字体样式设定,用*就会全部覆盖. 正常引入bootstrap的css样式后,记得将自定义的样式表放到其之后, <l ...

  9. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

随机推荐

  1. Ubuntu15.04上为火狐浏览器安装Adobe Flash Player插件

    前言:最新版的ubuntu好像没有flashplayer,而且更新源也无法更新成功,找些资料终于发现 这个需要自己手动配置.由于flashplayer无法安装,导致视频,百度上传等功能都无法使用: 安 ...

  2. BZOJ 1036: [ZJOI2008]树的统计Count( 树链剖分 )

    树链剖分... 不知道为什么跑这么慢 = = 调了一节课啊跪.. ------------------------------------------------------------------- ...

  3. hdu2289Cup(神坑题,精度+二分,以半径二分不能过,以高度为二分就过了)

    Problem Description The WHU ACM Team has a big cup, with which every member drinks water. Now, we kn ...

  4. bresenham算法的FPGA的实现1

    接着上一篇的 计算实现给出屏幕上任意两个点,求出这两个点之间直线上的所有的点.http://www.cnblogs.com/sepeng/p/4042464.html 这种直接算法的确是被鄙视了 强大 ...

  5. qt5_qml_Opengl_shader 第一弹----------------------openglunderqml的简化及介绍

    最近得知opengl可以通过纹理贴图来渲染yuv的数据,这就免去了yuv-rgb,这个过程在arm上还是很耗时间的,于是就接触了opengl. 写这篇文章的目的是方便初学者使用qml来调用opengl ...

  6. Citrix XenApp6.5 另类发布文档

    快捷方式.文档发布 第一种方式: 1.    创建快捷方式 2.    创建批处理文件(例如:lnk.bat),并输入以下内容: Start c:\users\public\desktop\adobe ...

  7. Android 改变窗口标题栏的布局

    Android改变窗口标题栏的布局  第一种方式 --在XML文件里面引入配置文件作为标题. 第二种方式  --动态的代码加入进去. 第三种方式(网上的): 一. 重点 一般应用的Title都是建立应 ...

  8. Flash键盘钢琴谱

    http://hi.baidu.com/%CC%EC%CA%B9%D2%FE%D2%ED/blog/item/e763d4eac3dcfb242cf53468.html <童话>Flash ...

  9. ACM比赛(第二次A)

    ime Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Description There is ...

  10. 关于Dropdownlist使用的心得体会

    2013-07-23关于Dropdownlist使用的心得体会: Dropdownlist使用最多的几个属性: 一.Dropdownlist.Items,负责包含所有选项的容器 DropDownLis ...