我们知道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. Python~recursive function递归函数

    尾递归实现循环 def fact(n): if n==1: return 1 else : return n * fact(n-1) raw_input() 字符而非数字 unsupported op ...

  2. 关于awk的逗号问题

    对于awk逗号的问题,我昨天看的一本书有提过: <Linux就是这个范儿>挺好的书,大家可以看看~~~~ 测试过,总结如下(不知道总结有没有错,欢迎大家吐槽,欢迎大家吐槽,吐槽,吐槽... ...

  3. 51nod1130(斯特林近似)

    题目链接: https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1130 题意: 中文题诶~ 思路: 直接斯特林公式就好了~ ...

  4. python初学杂记

    python常用命令: 1.python 或者 python3  打开交互式python解释器 2.python hello.py   通过命令提示符运行python脚本 交互式python解释器常用 ...

  5. Java中String,StringBuffer与StringBuilder的差别

    String 字符串常量: StringBuffer 字符串变量〈缓冲区〉(线程安全): StringBuilder 字符串变量〈缓冲区〉(非线程安全): 简要的说, String 类型和 Strin ...

  6. Power BI for Office 365（三）Power Pivot

    在Power Pivot中可以从各种数据源中根据你的需求来创建数据模型,并且可以根据需要随时刷新这些数据.在上一篇中,Anna已经准备好了加载到Power Pivot中的数据.Power Pivot就 ...

  7. 滚动div至底部

    document.getElementById("chat").scrollTop=document.getElementById("chat").scroll ...

  8. Linux Mysql 忘记用户密码

    1.停止mysql 服务 /etc/init.d/mysqld stop 2.启动mysql服务跳过授权表并在后台运行  /etc/init.d/mysqld  start  -u root --sk ...

  9. 【转】有关Oracle随机字符串的生成方法及具体应用

    Oracle生成随机字符串的方法是通过dbms_random.string实现的. 1.dbms_random.string用法Oracle官方文档参考链接:http://download.oracl ...

  10. fork()创建子进程

    fork()系统调用是Unix下以自身进程创建子进程的系统调用,一次调用,两次返回,如果返回是0,则是子进程,如果返回值>0,则是父进程(返回值是子进程的pid) 在fork()的调用处,整个父 ...