<!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. 20190923-08Linux压缩和解压类 000 016

    gzip/gunzip 压缩 1．基本语法 gzip 文件 (功能描述:压缩文件,只能将文件压缩为*.gz文件) gunzip 文件.gz (功能描述:解压缩文件命令) 2．经验技巧 (1)只能压缩文 ...

  2. css常用属性：居中展示、内边距、外边距

    1.横向居中.纵向居中 2.纵向展示3个块级(div标签即可纵向展示) 3.横向展示3个块级 4.在横向块级上加上边框的两种方法 法一:在父级div上加上和样式一样高的height 法二:在父级div ...

  3. HTML页面的基本信息

    1.python中生成的html页面,每一段的基本解释,以及header中的应用 2.body中的应用 2.1.a href链接点击baidu直接跳转百度网址,如果需要重新打开一个页面,详情看2.16 ...

  4. Centos7，PHP7安装swoole

    Swoole详细介绍及如何使用,这里暂时不做说明,可以参考一下文档:https://wiki.swoole.com/ 源码编译安装 下载地址如下: https://github.com/swoole/ ...

  5. 1. spring5源码 -- Spring整体脉络 IOC加载过程 Bean的生命周期

    可以学习到什么? 0. spring整体脉络 1. 描述BeanFactory 2. BeanFactory和ApplicationContext的区别 3. 简述SpringIoC的加载过程 4. ...

  6. hystrix元素详解

    转自https://www.cnblogs.com/wanggangblog/p/8550218.html package com.example.demo.service; import org.s ...

  7. java8的::

    public static void main(String[] args) throws Exception { // 第一种方法引用的类型是构造器引用,语法是Class::new,或者更一般的形式 ...

  8. Oracle学习（五）DBLINK

    一.DBLINK学习 目的:为了解决跨库访问的需求. 场景如下:tnsnames.ora(oracle的库配置文件)下配置了2个库的环境地址,现在要实现跨库访问. PS:DBLINK和是否同一个主机无 ...

  9. idea开启Run DashBoard

    0-前言 IDEA中,run dashboard是一个直观.方便好用的面板,谁用谁知道: 但是它不是默认开启的,开启有两种方式: 方式一: 1.新项目中,有时会弹出面板让我们点击开启,点击一下就能开启 ...

  10. Go 分支流程

    if/else 基本使用 if/else应该是每个编程语言中都具备的基本分支结构. 需要注意的是if||else与{要放在同一行上,否则会抛出异常. 另外,当多个else if出现时,不同分支只会执行 ...