我们知道file元素，因为有许多的插件可以使用，往往我们不需要写样式，但是如果要求我们自己写样式（利用bootstrap 3）实现一个file极简样式如何写呢？

下面我们先来看看整个表单的样子！

重点关注 头像

当点击头像中浏览触发file选择！

<!DOCTYPE html>

<html lang="zh-CN">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

        <title>表单样式</title>

        <!-- Bootstrap -->

        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

        <!--[if lt IE 9]>

          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

        <![endif]-->

        <style>

        </style>

    </head>

    <body>

        <div class="container">

            <form action="#">

                <div class="form-group">

                    <label class="control-label" for="username">用户名</label>

                    <input type="text" name="username" id="username" placeholder="请输入用户名" class="form-control">

                    <p class="help-block">消息提示</p>

                </div>

                <div class="form-group has-success">

                    <label class="control-label" for="password">密码</label>

                    <input type="text" name="password" id="password" placeholder="请输入密码" class="form-control">

                    <p class="help-block">消息提示</p>

                </div>

                <div class="form-group">

                    <label class="control-label" for="face">头像</label>

                    <div class="input-group">

                        <input type="text" class="form-control view-result" placeholder="请选择图片" aria-describedby="view-2">

                        <span class="input-group-addon btn btn-default view-file" id="view-2">浏 览</span>

                    </div>

                    <input type="file" name="face" id="face" class="btn btn-danger hide">

                    <p class="help-block">消息提示</p>

                </div>

                <div class="form-group">

                    <div class="checkbox-inline"><label><input type="checkbox">Parents</label></div>

                    <div class="checkbox-inline"><label><input type="checkbox">Examples</label></div>

                    <div class="checkbox-inline"><label><input type="checkbox">Books</label></div>

                </div>

                <div class="form-group">

                    <div class="checkbox"><label><input type="checkbox">Parants</label></div>

                    <div class="checkbox"><label><input type="checkbox">Examples</label></div>

                    <div class="checkbox"><label><input type="checkbox">Books</label></div>

                </div>

                <div class="form-group">

                    <div class="radio"><label><input name="plural" type="radio">Parants</label></div>

                    <div class="radio"><label><input name="plural" type="radio">Examples</label></div>

                    <div class="radio"><label><input name="plural" type="radio">Books</label></div>

                </div>

                <div class="from-group">

                    <input type="submit" value="Submit" class="btn btn-primary" />

                    <input type="reset" value="Reset" class="btn btn-danger" />

                </div>

            </form>

        </div>

        <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

        <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <script src="../code/js/holder.min.js"></script>

        <script src="../code/js/application.js"></script>

        <script>

            $(function () {

                $(".view-file").click(function () {

                    $(this).parents('.form-group').find("[type='file']").trigger('click');

                });

                $("[type='file']").change(function () {

                    var value = this.value;

                    $(this).parents(".form-group").find(".view-result").val(value);

                });

            });

        </script>

    </body>

</html>

首先给file元素一个事件click, 这个事件是change事件，当file值改变，则将获取到的值赋值给头像下的输入框。

当我们点击“浏览”时，触发file的click事件。

bootstrap 3 中表单元素的写法 ---- 重点是 input file 元素的的更多相关文章

  1. chrome 下 input[file] 元素cursor设置pointer不生效的解决

    https://jingyan.baidu.com/article/48b558e32fabb67f38c09a81.html 环境是chrome浏览器,今天发现为html网页中的input [fil ...

  2. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  3. bootstrap 基础表单

    表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. ☑   LESS版本:对应源文 ...

  4. Android：让WebView支持<input type=”file”…>元素

    最近在做一个活动页面:用户上传一张图片进行缩放.旋转后点击下一步填写内容后生成图片! 做好后经过各种测试是没有问题的,基本没有什么明显BUG,流程都能走通,但是嵌入到APP后,问题就来了! 在IOS上 ...

  5. HTML5学习笔记（四）：H5中表单新增元素及改良

    方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...

  6. BootStrap 智能表单系列 八 表单配置json详解

    本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...

  7. Bootstrap CSS 表单

    表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...

  8. HTML5中表单验证的8种方法(转)

    在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义.就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误.换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并 ...

  9. BootStrap 智能表单系列 十 自动完成组件的支持

    web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需 ...

随机推荐

  1. 欢迎加入threejs

    Threejs is the coolest graphics rendering engine I have ever seen, so what is threejs, Now, we have ...

  2. jq 实现无限级地区联动 样式为bootstrap

    HTML 部分 <div class="row" style="margin:100px auto;"> <form method=" ...

  3. node06-path

    目录:node01-创建服务器 node02-util node03-events node04-buffer node05-fs node06-path node07-http node08-exp ...

  4. C#设计模式之工厂方法

    工厂方法模式: 1.不再提供一个按钮工厂类来统一负责所有产品的创建,而是将具体按钮的创建过程交给专门的工厂子类去完成 如果出现新的按钮类型,只需要为这种新类型的按钮定义一个具体的工厂类就可以创建该新按 ...

  5. <select> 默认选中

    不多bb,直接上代码 html代码: <li><span>所属类别</span> <select id="cate" name=" ...

  6. 简单测试flume+kafka+storm的集成

    集成 Flume/kafka/storm 是为了收集日志文件而引入的方法,最终将日志转到storm中进行分析.storm的分析方法见后面文章,这里只讨论集成方法. 以下为具体步骤及测试方法: 1.分别 ...

  7. 中国175个 AAAAA级风景区，去过20个 以上，你就是旅游达人

    省份 数量 景区名称 我 北京 7 故宫博物院 1 天坛公园 颐和园 1 八达岭-慕田峪长城旅游区 1 明十三陵景区(神路-定陵-长陵-昭陵) 恭王府景区 北京奥林匹克公园(鸟巢-水立方-中国科技馆- ...

  8. Logistic回归 python实现

    Logistic回归 算法优缺点: 1.计算代价不高,易于理解和实现2.容易欠拟合,分类精度可能不高3.适用数据类型:数值型和标称型 算法思想: 其实就我的理解来说,logistic回归实际上就是加了 ...

  9. tangram2.6(XE2)\framework框架加载包异常 调试的地方

    添加以下的项目到项目组中, \tangram2.6(XE2)\framework\Core\Tangram_Core.dpk 调试此包的SysModuleMgr.pas的函数,本人还没有测试 func ...

  10. python split函数

    Python split()通过指定分隔符对字符串进行切片,如果参数num 有指定值,则仅分隔 num 个子字符串 例 current_month = "2013-01-02" y ...