我们知道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. mac下剪切文件或文件夹

    首先选中文件,按Command+C复制文件:然后按Command+Option+V:就可以把你的文件剪走了!

  2. Python字符串倒序-7. Reverse Integer

    今天做了下LeetCode上面字符串倒序的题目,突然想Python中字符串倒序都有哪些方法,于是网上查了下,居然有这么多种方法: 个人觉得,第二种方法是最容易想到的,因为List中的reverse方法 ...

  3. SQL查询第m条到第n条的方法

    SQL查询第m条到第n条的方法 如表名为GOOD Sselect top (n-m) * from GOODS where (某一列名) not in (select top m (某一列名) fro ...

  4. 分布式追踪系统dapper

    http://www.cnblogs.com/LBSer/p/3390852.html 最近单位需要做自己的分布式监控系统,因此看了一些资料,其中就有google的分布式追踪系统dapper的论文:h ...

  5. 搭建高可用MongoDB集群（一）：配置MongoDB

    在大数据的时代,传统的关系型数据库要能更高的服务必须要解决高并发读写.海量数据高效存储.高可扩展性和高可用性这些难题.不过就是因为这些问题Nosql诞生了. NOSQL有这些优势: 大数据量,可以通过 ...

  6. java.lang.ClassNotFoundException: org.apache.catalina.startup.VersionLoggerListener

    解决办法 找到Tomcat配置文件server.xml   apache-tomcat-7.0.57/conf 将<Listener className="org.apache.cat ...

  7. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  8. 分享Kali Linux 2016.2第50周镜像文件

    分享Kali Linux 2016.2第50周镜像文件Kali Linux官方于12月11日发布Kali Linux 2016.2的第50周镜像.这次保持以往规律,仍然是11个镜像文件.默认的Gnom ...

  9. BZOJ 1455 罗马游戏 ——左偏树

    [题目分析] 左偏树的模板题目,大概就是尽量维护树的深度保持平衡,以及尽可能的快速合并的一种堆. 感觉和启发式合并基本相同. 其实并没有快很多. 本人的左偏树代码自带大常数,借鉴请慎重 [代码] #i ...

  10. android--asp.net webservice 返回json

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...