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>
时间: 2024-09-30 15:20:38

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

bootstrap全局css样式

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

bootstrap 全局 CSS 样式

http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 复制 <!DOCTYPE html> <html lang="zh-CN"> ...

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

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

bootstrap全局CSS样式学习

参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置.在使用全局bootstrap的样式时,只需=设置每个元素的class属性值即可. 同意基础样式,防止不同浏览器的样式不同,使用了Normalize.css. bootstrap需要为页面内容和栅格系统包裹一个 在一个容器中.共有两个有此作用的class .container 类用于固定宽度并支持响应

重修课程day54(bootstrap之css样式)

一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和https协议.CDN是一种前端的优化方式. jquery的代码放在body标签里面的最下面. 二 全局css样式 全局css样式是为了确保分辨率的样式,需要在head标签中加上viewport元数据标签 <meta name="viewport" content="widt

bootstrap表单中样式class=‘form-group’与class=&#39;form-control&#39;

{# 一种 #} 用户名: {# 另一种 #} 密码: bootstrap表单中样式class='form-group'与class='form-control' 原文地址:https://www.cnblogs.com/Zhao159461/p/11023640.html

matplotlib 自带的几种美化样式

1.用 matplotlib.pyplot.style.avaliable 可查看 matplotlib 自带的美化样式如下: ['bmh', 'classic', 'dark_background', 'fast', 'fivethirtyeight', 'ggplot', 'grayscale', 'seaborn-bright', 'seaborn-colorblind', 'seaborn-dark-palette', 'seaborn-dark', 'seaborn-darkgrid'

Bootstrap全局CSS样式之按钮和图片

.btn-default--按钮的默认样式: .btn-primary--按钮的首选样式: .btn-success--按钮的成功样式: .btn-info--按钮的一般信息样式:' .btn-warning--按钮的警告样式: .btn-danger--按钮的危险样式: .btn-link--按钮的链接样式: .btn-lg--大按钮样式: .btn-sm--小按钮样式: .btn-xs--超小按钮样式: .btn-block--将按钮设置为充满父元素: .active--设置按钮为激活状态:

Bootstrap全局CSS样式之排版

Bootstrap能完全友好的支持html5的文本元素,这里不再赘述,具体可参考我另一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. .small--当前元素字体大小的 85%,常用作副标题时,也可用<small>来代替: .lead--让段落突出显示; .text-left..text-center..text-right--将文字于左.居中.于右对齐: .text-lowercase..text-uppercase..text