我们知道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. js的包管理工具bower安装

    bower需要:node 和 git node安装包下载:http://blog.csdn.net/myan/article/details/2028545 Git安装: 选择第二项:Use Git ...

  2. Qt5.7中使用MySQL Driver

    Qt5.7中使用MySQL Driver 1.使用环境 Qt5.7的安装安装就已经带了MySQL Driver,只需要在安装的时候选择一下即可. 如果没有安装,可以采取自己编译的方式. 在Qt的源码包 ...

  3. phpstorm的使用教程

    1.设置行号:file->settings->Editor->Appearance->Show line numbers 2.设置字体和背景 :file->setting ...

  4. Python 开发轻量级爬虫07

    Python 开发轻量级爬虫 (imooc总结07--网页解析器BeautifulSoup) BeautifulSoup下载和安装 使用pip install 安装:在命令行cmd之后输入,pip i ...

  5. java utils

    1.获取resouces中文件的绝对路径 String filePath = XXX.class.getClassLoader().getResource("/configs/interfa ...

  6. MAC 远程桌面链接 证书或链接无效

    RDC --> 首选项  -->  安全性 --> 勾选即使验证失败也要链接.   问题解决.

  7. iOS创建自定义的xib视图，不带控制器调用

    1 我们平常使用视图都是在控制器中加载各种视图,但是有时候一个单独的视图,弄一个控制器未免有些显得太沉重了,所以我们现在来创建一个带xib加载视图的自定义视图 2 创建一个视图类集成uiview 3 ...

  8. BubbleSort冒泡排序

    #include <stdio.h>void BubbleSort(int *a,int n);int main(void){ int arr[10] = {2,4,6,8,0,1,3,5 ...

  9. mysql 分表

    1.分表,即把一个很大的表达数据分到几个表中,这样每个表数据都不多. 优点:提高并发量,减小锁的粒度 缺点:代码维护成本高,相关sql都需要改动 2.分区,所有的数据还在一个表中,但物理存储数据根据一 ...

  10. error-unable-to-access-the-iis-metabase或者无法加载VS项目中的网站

    参考:http://stackoverflow.com/questions/12859891/error-unable-to-access-the-iis-metabase 1.确定IIS是否安装完整 ...