<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>信息收集卡</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <div class="page-header">

        <h1>信息收集卡

            <small>yigong sanbu</small>

        </h1>

    </div>

    <div class="progress">

        <div class="progress-bar" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100"

             style="width: 77%;">

            77%

        </div>

    </div>

    <div class="panel panel-primary">

        <div class="panel-body">

            基本信息

        </div>

        <div class="panel-footer">

            <div class="row">

                <div class="col-md-6">

                    <form class="form-horizontal">

                        <div class="form-group">

                            <label for="inputEmail39" class="col-sm-2 control-label">姓名</label>

                            <div class="col-sm-10">

                                <input type="email" class="form-control" id="inputEmail39" placeholder="name">

                            </div>

                        </div>

                        <div class="form-group">

                            <label for="inputEmail13" class="col-sm-2 control-label">电话</label>

                            <div class="col-sm-10">

                                <input type="email" class="form-control" id="inputEmail13" placeholder="phone">

                            </div>

                        </div>

                        <div class="form-group">

                            <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

                            <div class="col-sm-10">

                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">

                            </div>

                        </div>

                        <div class="form-group">

                            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>

                            <div class="col-sm-10">

                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">

                            </div>

                        </div>

                        <div class="form-group">

                    <label for="exampleInputFile" class="col-sm-2" >头像</label>

                    <div class="col-sm-10">

                        <input type="file" id="exampleInputFile">

                        <p class="help-block">禁止上传黄色图片</p>

                    </div>

                </div>

                        <hr>

                        <div class="form-group">

                            <div class="row">

                                <div class="col-md-4 col-md-offset-3 ">

                                    <label class="checkbox">

                                        <input type="checkbox" id="inlineCheckbox1" value="option1"> 我是好人吗？

                                    </label>

                                    <label class="checkbox">

                                        <input type="checkbox" id="inlineCheckbox2" value="option1"> 我是坏人吗？

                                    </label>

                                    <label class="checkbox">

                                        <input type="checkbox" id="inlineCheckbox3" value="option1"> 你还是人吗？

                                    </label>

                                </div>

                                <div class="col-md-5 "></div>

                            </div>

                        </div>

                        <div class="form-group">

                            <div class="col-sm-offset-2 col-sm-10">

                                <div class="checkbox">

                                    <label>

                                        <input type="checkbox"> Remember me

                                    </label>

                                </div>

                            </div>

                        </div>

                        <div class="form-group">

                            <div class="col-sm-offset-2 col-sm-10">

                                <button type="submit" class="btn btn-primary">登录</button>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

效果图↓：

基于bootstrap_信息采集的更多相关文章

  1. 基于bootstrap_网站汇总页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 基于bootstrap_博客页面

    <!DOCTYPE html> <!-- saved from url=(0036)http://v3.bootcss.com/examples/blog/ --> <h ...

  3. 基于bootstrap_登陆页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 基于bootstrap_后台管理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. [Arduino] 基于Xbee Pro和网络技术的智能公交系统设计

    转自:http://www.21ic.com/app/rf/201112/99474.htm 引言 公共交通具有个体交通无法比拟的强大优势,优先发展城市公共交通系统是解决大.中城市交通问题的最佳途径. ...

  6. 基于opencv的车牌识别系统

    前言 学习了很长一段时间了,需要沉淀下,而最好的办法就是做一个东西来应用学习的东西,同时也是一个学习的过程. 概述     OpenCV的全称是:Open Source Computer Vision ...

  7. 性能测试 基于Python结合InfluxDB及Grafana图表实时监控Android系统和应用进程

    基于Python结合InfluxDB及Grafana图表实时监控Android系统和应用进程   By: 授客 QQ:1033553122     1． 测试环境 2． 实现功能 3． 使用前提 4． ...

  8. .net 信息采集ajax数据

    .net 信息采集ajax数据 关于.net信息采集的资料很多,但是如果采集的网站是ajax异步加载数据的模式,又如何采集呢?今天就把自己做信息采集时,所遇到的一些问题和心得跟大家分享一下. 采集网站 ...

  9. 基于SOA架构和流媒体技术的在线教育平台的研究

    简介 现代远程教育是指通过音频.视频(直播或录像)以及包括实时和非实时在内的计算机技术把课程传送的教育.现代远程教育是随着现代信息技术的发展而产生的一种新型教育方式.计算机技术.多媒体技术.通信技术的 ...

随机推荐

  1. lua-helloworld

    write script file, a.lua: #!/usr/bin/lua print("hello world!") add excutable prperty to th ...

  2. LINQ-查询表达式基础

    一.LINQ查询的数据源 从应用程序的角度来看,原始源数据的特定类型和结构并不重要. 应用程序始终将源数据视为 IEnumerable<T> 或 IQueryable<T> 集 ...

  3. 编辑被标记为“只读”的Word文档

    从邮件接收到的Word文档,打开时总是被标记为“只读”,在阅读时对其进行编辑,但不能保存,会提示文档为只读的.要想对其进行编辑并保存,需要进行一定的操作. 进入文件所在的目录,鼠标右键点击Word文档 ...

  4. Shell脚本学习指南 [ 第三、四章 ] 查找与替换、文本处理工具

    摘要:第三章讨论的是编写Shell脚本时经常用到的两个基本操作.第四章总共介绍了约30种处理文本文件的好用工具. 第三章 查找与替换 概括:本章讨论的是编写Shell脚本时经常用到的两个基本操作:文本 ...

  5. 如何快速下载maven依赖jar包

    找到settings.xml文件.在mirrors里面添加下面的代码: <mirror> <id>alimaven</id> <mirrorOf>cen ...

  6. Query on The Trees(hdu 4010)

    题意: 给出一颗树,有4种操作: 1.如果x和y不在同一棵树上则在xy连边 2.如果x和y在同一棵树上并且x!=y则把x换为树根并把y和y的父亲分离 3.如果x和y在同一棵树上则x到y的路径上所有的点 ...

  7. EC++学习笔记(六) 继承和面向对象设计

    条款32:确定你的 public 继承塑模出 is-a 关系 public inheritance 意味着 is-a 关系class Derived 以 public 形式继承 class Base, ...

  8. 在GridView中的每一页末尾添加空行

    原文发布时间为:2008-08-03 -- 来源于本人的百度文章 [由搬家工具导入] protected void GridView1_RowCreated(object sender, GridVi ...

  9. css3鼠标点击穿透--摘抄

    有些时候网页中用到了一些绝对定位的Div,因为需要事先这个Div是隐藏的,但是它所在的位置会遮挡住鼠标点击事件.这个时候可以用CCS3中的pointer-events属性来解决.   //穿透该层 p ...

  10. 树莓派静态IP配置

    一.设置隐藏无线静态ip地址 1.用命令产生wpa_psk:wpa_passphrase “MT-WiFi” “@boozhong.com” 2.sudo nano /etc/network/inte ...