我们知道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. spring aop 环绕通知around和其他通知的区别

    前言: spring 的环绕通知和前置通知,后置通知有着很大的区别,主要有两个重要的区别: 1) 目标方法的调用由环绕通知决定,即你可以决定是否调用目标方法,而前置和后置通知   是不能决定的,他们只 ...

  2. 我常用的find命令

    查找某种类型文件中包含特定字符的文件 find /* -type f -name "*.php" |xargs grep "rename(" find ./|x ...

  3. appium 处理动态控件

    环境怎么搭建,参考:http://www.cnblogs.com/tobecrazy/p/4562199.html 知乎Android客户端登陆:http://www.cnblogs.com/tobe ...

  4. spring加载多个配置文件

    首先我们都知道要使用spring,则需要在web.xml中增加如下代码: web.xml: 1:<listener><listener-class>org.springfram ...

  5. python之OS模块详解

    python之OS模块详解 ^_^,步入第二个模块世界----->OS 常见函数列表 os.sep:取代操作系统特定的路径分隔符 os.name:指示你正在使用的工作平台.比如对于Windows ...

  6. winform 多个label绑定一个事件

    1当多个label帮到到一个事件后 private void jiandao_Click(object sender, EventArgs e) { //sender显示的是窗体上接受事件的label ...

  7. Python中使用递归输出嵌套列表并转化为大写

  8. win7修改护眼色

    一. 手动修改 记得qq管家有一个功能就是护眼模式 那如何不通过第三方软件修复系统护眼色呢.百度后我在此记录下: 1.在桌面右键单击,选择“个性化”,在下面找到如图所示,点击进去 2.高级外观设置 3 ...

  9. google 在线代理浏览

    谷歌访问不了,你又N多方法,比如搭建VPN,买VPN,或查找google多个IP访问, 或通过第三方反代理网站访问, 或通过客户端代理(类似goagent)等 下面罗列出可以访问google的几个代理 ...

  10. SpringMVC 常用注解(1)

    /**  * @RequestMapping 除了修饰方法 还可以修饰类  * 1).类定义处:提供初步的请求映射信息,相当于WEB应用的根目录  * 2).方法定义处,提供进一步的细分映射信息,相对 ...