<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!--屏幕和设备的屏幕保持一致，初始缩放为100%，禁止用户缩放-->

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

    <title>表单</title>

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

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

    <script src="js/bootstrap.js"></script>

    <script src="js/jquery-3.2.1.min.js"></script>

    <script src="js/bootstrap.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

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

    <script src="js/jquery-2.0.3.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="js/bootstrap.min.js"></script>

</head>

<body style="background-color: gray">

<div class="container-fluid" style="background-color: white;">

    <form class="form-horizontal">

        <div class="form-group">

            <label for="cemail">邮箱</label>

            <input type="email" name="cemail" id="cemail" class="form-control"/>

        </div>

        <div class="form-group">

            <label for="pwd">密码</label>

            <input type="password" name="pwd" id="pwd" class="form-control"/>

        </div>

        <div class="form-group">

            <label for="tel">手机</label>

            <input type="text" name="tel" id="tel" class="form-control"/>

        </div>

        <div class="form-group">

            <label class="checkbox-inline">

                <input type="checkbox" name="hobby"/>唱歌</label>

            <label class="checkbox-inline">

                <input type="checkbox" name="hobby"/>跳舞</label>

            <label class="checkbox-inline">

                <input type="checkbox" name="hobby"/>旅游</label>

            <label class="checkbox-inline disabled">

                <input type="checkbox" name="hobby" disabled="disabled"/>敲代码</label>

        </div>

        <div class="form-group">

            <label class="radio-inline">

                <input type="radio" name="sex"/>男</label>

            <label class="radio-inline disabled">

                <input type="radio" name="sex" disabled="disabled"/>女</label>

        </div>

        <div class="form-group">

            <div class="input-group">

                <span class="input-group-addon">搜索</span>

                <input type="search" name="sc" id="sc" class="form-control"/>

            </div>

        </div>

        <div class="form-group">

            <div class="input-group">

                <input type="search" name="sear" id="sear" class="form-control"/>

                <div class="input-group-addon">查询内容</div>

            </div>

        </div>

        <div class="form-group">

            <div class="input-group">

                <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>

                <input type="text" name="username" id="username" class="form-control"/>

            </div>

        </div>

        <div class="form-group">

            <div class="input-group">

                <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>

                <input type="password" name="password" id="password" class="form-control"/>

            </div>

        </div>

        <!--到bootstap官网去“组件”菜单去找-->

        <span class="glyphicon glyphicon-euro"></span>

        <span class="glyphicon glyphicon-pencil"></span>

        <br/>

        <input type="button" value="按钮" class="btn"/>

        <button class="btn">按钮</button>

        <a href="#" class="btn">按钮</a>

        <br/>

        <button class="btn btn-primary">按钮</button>

        <button class="btn btn-default">按钮</button>

        <button class="btn btn-info">按钮</button>

        <button class="btn btn-warning">按钮</button>

        <button class="btn btn-danger">按钮</button>

        <button class="btn btn-success">按钮</button>

        <button class="btn btn-link">按钮</button>

        <a href="#" class="btn btn-success active">激活按钮</a>

        <br/>

        <button class="btn btn-lg">按钮</button>

        <button class="btn">按钮</button>

        <button class="btn btn-sm">按钮</button>

        <button class="btn btn-xs">按钮</button>

        <br/>

        <div class="btn-group">

            <button class="btn btn-warning">按钮1</button>

            <button class="btn btn-success">按钮2</button>

            <button class="btn btn-primary">按钮3</button>

        </div>

    </form>

</div>

</body>

<div class="container-fluid" style="background-color: white">

    栅格系统

    <!--xs超小型，适合手机-->

    <!--sm小型，适合平板-->

    <!--md中等，适合PC-->

    <!--lg大型，适合大桌面显示器-->

    <div class="row">

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

        <div class="col-md-1">col-2</div>

        <div class="col-md-1">col-3</div>

        <div class="col-md-1">col-4</div>

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

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

        <div class="col-md-1">col-7</div>

        <div class="col-md-1">col-8</div>

        <div class="col-md-1">col-9</div>

        <div class="col-md-1">col-10</div>

        <div class="col-md-1">col-11</div>

        <div class="col-md-1">col-12</div>

        <div class="col-md-1">over</div>

        <div class="col-md-1">over</div>

        <div class="col-md-1">over</div>

        <div class="col-md-1">over</div>

        <div class="col-md-1">over</div>

        <div class="col-md-1">over</div>

        <div class="col-md-1">over</div>

    </div>

    <div class="row">

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

            <img src="fig.jpg" class="img-responsive img-thumbnail"/>

            <h3 class="page-header">h3</h3>

            <p>句子句子句子句子句子句子句子句子句子</p>

        </div>

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

            <img src="fig.jpg" class="img-responsive img-thumbnail"/>

            <h3 class="page-header">h3</h3>

            <p>句子句子句子句子句子句子句子句子句子</p>

        </div>

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

            <img src="fig.jpg" class="img-responsive img-thumbnail"/>

            <h3 class="page-header">h3</h3>

            <p>句子句子句子句子句子句子句子句子句子</p>

        </div>

    </div>

    <div class="row">

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

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

    </div>

    <div class="row">

        <div class="col-md-2">col-1</div>

        <div class="col-md-3">col-2</div>

        <div class="col-md-7">col-3</div>

    </div>

    <div class="row">

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

            内容

        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

            内容

        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

            内容

        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

            内容

        </div>

    </div>

    <div class="row">

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

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

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

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

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

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

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

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

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

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

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

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

    </div>

    <div class="row">

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

        <div class="col-md-2 col-md-offset-3">2</div>

    </div>

    <div class="row">

        <div class="col-md-4 col-md-push-8">4</div>

        <div class="col-md-8 col-md-pull-4">8</div>

    </div>

</div>

</body>

</html>

bootStrap小结3的更多相关文章

  1. Bootstrap 小结

    Bootstrap 小结 Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本 Bootstrap组成:1. ...

  2. bootstrap小结

    bootstrap总结 bootstrap总结 base css 我分为了几大类 1,列表 .unstyled(无样式列表),.dl-horizontal(dl列表水平排列) 2,代码 code(行级 ...

  3. bootStrap小结2

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  4. bootStrap小结1

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

  5. Node.js + Express 构建的订餐系统

    Node.js的版本 - v0.8.12 Express的版本 – v3.3.3  (安装 $ npm install -g express) 系统的登录逻辑是:获取用户名 + 密码,向内网RTX服务 ...

  6. 关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结

    关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结 Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件, ...

  7. Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结

    Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min ...

  8. Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

    Bootstrap表格插件bootstrap-table配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...

  9. bootstrap与Select2使用小结

    这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...

随机推荐

  1. 在Windows上安装PHP（将PHP加载到Apache中）

    第一步:在 windows.php.net 下载软件包 第二步:解压压缩包,将解压后的目录放到指定目录并重命名 第三步: 创建PHP配置文件,修改Apache配置文件(httpd.conf),将PHP ...

  2. linux（centos）下密码有效期和密码复杂度设置

    1.密码有效期 方法一: chage -l 用户名 查看用户的过期时间 chage -M 99999 用户名 用命令修改过期时间为永久 chage -M 90 用户名 设置密码有效期为90天 chag ...

  3. sqli-labs 1-10关

    学习sql注入的必做靶场我终于来尝试一下下了. 第一关 ?id=1'时出现 在测试?id=1' and '1'='1,页面正常 ?id=1' and '1'='2  页面错误 判断存在单引号字符型注入 ...

  4. [LeetCode]1083. 销售分析 II(Mysql,having+if)

    题目 编写一个 SQL 查询,查询购买了 S8 手机却没有购买 iPhone 的买家. 题解 使用having + sum+if,而不是自查询. 代码 # Write your MySQL query ...

  5. 内存管理初始化源码5：free_area_init_nodes

    start_kernel ——> setup_arch ——> arch_mem_init ——> |——> bootmem_init  |——> device_tree ...

  6. openstack核心组件——neutron网络服务 抓取ip（9）

    云计算openstack核心组件——neutron网络服务(9)   一.虚拟机获取 ip: 用 namspace 隔离 DHCP 服务   Neutron 通过 dnsmasq 提供 DHCP 服务 ...

  7. 14个Spring MVC顶级技巧，随时用随时爽，一直用一直爽~

    通常,在Spring MVC中,我们编写一个控制器类来处理来自客户端的请求.然后,控制器调用业务类来处理与业务相关的任务,然后将客户端重定向到逻辑视图名称,该名称由Spring的调度程序Servlet ...

  8. Django request

    ''' 1.HttpRequest.GET 一个类似于字典的对象,包含 HTTP GET 的所有参数.详情请参考 QueryDict 对象. 2.HttpRequest.POST 一个类似于字典的对象 ...

  9. Halcon使用骨架法处理激光条并拟合直线

    dev_close_window () * 设置颜色 dev_set_color ('green') * 读取图像 read_image (Image, 'images3/1') * 获得图像尺寸 g ...

  10. 获取NX装配结构信息

    最近在做一个项目,需要获取NX装配结构信息,这里把代码分享给大家,希望对各位有帮助,注意以下几点: 1)代码获取了PART的属性.表达式等,因此一些细节可能需要您根据实际情况修改. 2)读写XML用的 ...