<!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. 20190925-02配置redis服务在后台启动 000 023

    多端口要加 -p 可以进入指定端口

  2. BIO应用-RPC框架

    为什么要有RPC?  我们最开始开发的时候,一个应用一台机器,将所有功能都写在一起,比如说比较常见的电商场景. 随着我们业务的发展,我们需要提示性能了,我们会怎么做?将不同的业务功能放到线程里来实现异 ...

  3. AWD攻防技战法

    round1 弱口令 cat /etc/passwd  查看用户信息 修改用户密码(passwd  username) 通过ssh弱口令批量getshell  (通过msf的auxiliary/sca ...

  4. GuestOS？ HostOS？

    起因 今天在网上看到一篇文章  有几个陌生的关键词不太熟悉,就随笔记一下. 名词解释 # OS :操作系统 # VM(虚拟机)    里的OS 称为        GuestOS # 物理机      ...

  5. Selenium-WebDriver安装

    一.chrome浏览器: 根据chrome浏览器版本,下载对应的驱动 chromedriver版本 支持的Chrome版本 v2.37 v64-66 v2.36 v63-65 v2.35 v62-64 ...

  6. 【高并发】Redis如何助力高并发秒杀系统，看完这篇我彻底懂了！！

    写在前面 之前,我们在<[高并发]高并发秒杀系统架构解密,不是所有的秒杀都是秒杀!>一文中,详细讲解了高并发秒杀系统的架构设计,其中,我们介绍了可以使用Redis存储秒杀商品的库存数量.很 ...

  7. Robotframework自动化3-APP启动

    前言 前两节已经讲述了环境的搭建,这节介绍APP是如何运行的 介绍 1.创建项目 2.创建测试套件 3.创建测试用例 4.APP运行 一.创建项目 打开ride,开始创建项目,左上角File--> ...

  8. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  9. Redis的五大数据类型以及key的相关操作命令

    Redis的五大数据类型 redis的数据都是以key/value存储,所以说,五大类型指的是value的数据类型 String 字符串,作为redis的最基本数据类型 redis中的string类型 ...

  10. vue学习08 v-bind指令

    目录 vue学习08 v-bind指令 v-bind指令的作用是为元素绑定属性 完整写法是v-bind:属性名,可简写为:属性名 练习代码为: 运行效果为: vue学习08 v-bind指令 v-bi ...