BootStrap - FileUpload美化样式
效果:

代码:
<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美化样式的更多相关文章
- 极简bootstrap file 美化样式(无需第三方插件)
原本的file上传表单非常的丑,但是又不想使用第三方插件,Bootstrap也没有相关的美化,于是用纯CSS完成,美化,JS实现功能,连BootStrap都不需要,十分简单 1.给原版丑表单隐藏了di ...
- 关于bootstrap框架美化的实例教程(python)
经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- [bootstrap] 基本css样式和组件
一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
- bootstrap之css样式
一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和h ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- 修改bootstrap 的全局样式,bootstrap 3.0 是由html5和CSS 3组成的
方法一: 不建议使用 * {}选择器,因为在一些其他样式插件.特殊部分会有更好的字体样式设定,用*就会全部覆盖. 正常引入bootstrap的css样式后,记得将自定义的样式表放到其之后, <l ...
- bootstrap全局css样式
以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...
随机推荐
- System.IO
I/O 1.文件操作:File (1)void AppendAllText(string path, string contents) (2)bool Exist ...
- IDEA 中使用Maven Compile 找不到本地 Jar
本文地址:http://www.cnblogs.com/duwei/p/4656410.html 在IDEA 的子 Maven Module 中使用 compile 进行编译, 一开始提示从私有远程仓 ...
- ZOJ 2853 Evolution 【简单矩阵快速幂】
这道题目第二次看的时候才彻底理解了是什么意思 把题目转化为数学模型分析后就是 有一个初始序列, 有一个进化率矩阵 求的是初始序列 与进化率矩阵进行 m 次运算后, 初始序列最后一位的答案 那么显然,可 ...
- MVC 扩展 Html.ImageFor
Asp.Net MVC 扩展 Html.ImageFor 方法详解 背景: 在Asp.net MVC中定义模型的时候,DataType有DataType.ImageUrl这个类型,但htmlhelpe ...
- 利用Tomcat的用户名和密码构建“永久”后门
从本案例中可以学到: (1)关于JSP的一些基础知识 (2)利用Tomcat的用户名和密码来构建后门 本文首先要感谢<黑客手册>“非安全.后生”编辑为本为提供了帮助,还要感谢网友“伤心的鱼 ...
- python 正则表达式汇总
一. 正则表达式基础 1.1.概念介绍 正则表达式是用于处理字符串的强大工具,它并不是Python的一部分. 其他编程语言中也有正则表达式的概念,区别只在于不同的编程语言实现支持的语法数量不同. 它拥 ...
- 基于visual Studio2013解决算法导论之024双向链表实现
题目 双向链表的实现 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <time.h> #i ...
- Android实现异步处理 -- HTTP请求
原帖:http://www.cnblogs.com/answer1991/archive/2012/04/22/2464524.html Android操作UI的方法不是线程安全的,也就是说开发者自己 ...
- OAuth2.0认证过程
本文以腾讯微博为例,详细介绍OAuth2.0的认证过程. 在使用腾讯微博平台提供的API前,您需要做以下两步工作: 成为开发者,并申请appkey和appsecret 授权获取accesstoken ...
- 分享非常有用的Java程序(关键代码)(七)---抓屏程序
原文:分享非常有用的Java程序(关键代码)(七)---抓屏程序 import java.awt.Dimension; import java.awt.Rectangle; import java.a ...