效果:

代码:

<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. ListActivity的注意点

    有的时候我们需要集成ListActivity,注意点1,这个时候我们的xml中的<ListView>标签中的id属性不能够随便自己命名,而是要固定为android:id="@id ...

  2. git常用命令2

    一. Git 常用命令速查 git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r ...

  3. 基于visual Studio2013解决C语言竞赛题之0520相邻元素

          题目

  4. Servlet 实现文件的上传与下载

    这段时间尝试写了一个小web项目,其中涉及到文件上传与下载,虽然网上有很多成熟的框架供使用,但为了学习我还是选择了自己编写相关的代码.当中遇到了很多问题,所以在此这分享完整的上传与下载代码供大家借鉴. ...

  5. ant学习记录(复制-移动-删除-依赖综合测试)+fileset

    <?xml version="1.0"?> <project name="targetStudy" default="mkdir&q ...

  6. Google出品的自动Web安全扫描程序 Skipfish 下载及安装使用方法

    Skipfish是由google出品的一款自动化的网络安全扫描工具,该工具可以安装在linux.freebsd.MacOS X系统和windows(cygwin). 谷歌工程师Michal Zalew ...

  7. C++静态库中使用_declspec(dllexport) 不能导出函数的问题

    在某项目中,有一些静态库,这些静态库中有类型命名的函数GET_XXX.在一次项目结构调整的时候,我想将调用这静态库的代码编译成DLL,并且将这些Get函数导出,我就直接就这些函数前面添加了_decls ...

  8. CF 338E Optimize! (线段树)

    转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents    by---cxlove 出题人题解没看懂...囧. 然后看了下touris ...

  9. Android事件模型之interceptTouchEvnet ,onTouchEvent关系正解

    首先,看Android的官方文档正解 onInterceptTouchEvent()与onTouchEvent()的机制: 1. down事件首先会传递到onInterceptTouchEvent() ...

  10. opencv视频播放

    在一个界面上显示一张图片.是一件非常easy的事情,但说到要显示视频.刚開始学习的人可能不知道怎么处理,事实上,一般来说能够理解为视频就是图片以人眼察觉不到的速度高速更新. 曾经用摄像头採集视频显示在 ...