1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <!--屏幕和设备的屏幕保持一致，初始缩放为100%，禁止用户缩放-->
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
  7.     <title>表单</title>
  8.     <link rel="stylesheet" href="css/bootstrap.css">
  9.     <link rel="stylesheet" href="css/bootstrap-theme.css">
  10.     <script src="js/bootstrap.js"></script>
  11.     <script src="js/jquery-3.2.1.min.js"></script>
  12.     <script src="js/bootstrap.js"></script>
  13.     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  14.     <link href="css/bootstrap.min.css" rel="stylesheet"/>
  15.     <script src="js/jquery-2.0.3.js"></script>
  16.     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  17.     <script src="js/bootstrap.min.js"></script>
  19. </head>
  20. <body style="background-color: gray">
  21. <div class="container-fluid" style="background-color: white;">
  22.     <form class="form-horizontal">
  23.         <div class="form-group">
  24.             <label for="cemail">邮箱</label>
  25.             <input type="email" name="cemail" id="cemail" class="form-control"/>
  26.         </div>
  27.         <div class="form-group">
  28.             <label for="pwd">密码</label>
  29.             <input type="password" name="pwd" id="pwd" class="form-control"/>
  30.         </div>
  31.         <div class="form-group">
  32.             <label for="tel">手机</label>
  33.             <input type="text" name="tel" id="tel" class="form-control"/>
  34.         </div>
  35.         <div class="form-group">
  36.             <label class="checkbox-inline">
  37.                 <input type="checkbox" name="hobby"/>唱歌</label>
  38.             <label class="checkbox-inline">
  39.                 <input type="checkbox" name="hobby"/>跳舞</label>
  40.             <label class="checkbox-inline">
  41.                 <input type="checkbox" name="hobby"/>旅游</label>
  42.             <label class="checkbox-inline disabled">
  43.                 <input type="checkbox" name="hobby" disabled="disabled"/>敲代码</label>
  44.         </div>
  45.         <div class="form-group">
  46.             <label class="radio-inline">
  47.                 <input type="radio" name="sex"/>男</label>
  48.             <label class="radio-inline disabled">
  49.                 <input type="radio" name="sex" disabled="disabled"/>女</label>
  50.         </div>
  51.         <div class="form-group">
  52.             <div class="input-group">
  53.                 <span class="input-group-addon">搜索</span>
  54.                 <input type="search" name="sc" id="sc" class="form-control"/>
  55.             </div>
  56.         </div>
  57.         <div class="form-group">
  58.             <div class="input-group">
  59.                 <input type="search" name="sear" id="sear" class="form-control"/>
  60.                 <div class="input-group-addon">查询内容</div>
  61.             </div>
  62.         </div>
  63.         <div class="form-group">
  64.             <div class="input-group">
  65.                 <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
  66.                 <input type="text" name="username" id="username" class="form-control"/>
  67.             </div>
  68.         </div>
  69.         <div class="form-group">
  70.             <div class="input-group">
  71.                 <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
  72.                 <input type="password" name="password" id="password" class="form-control"/>
  73.             </div>
  74.         </div>
  75.         <!--到bootstap官网去“组件”菜单去找-->
  76.         <span class="glyphicon glyphicon-euro"></span>
  77.         <span class="glyphicon glyphicon-pencil"></span>
  78.         <br/>
  79.         <input type="button" value="按钮" class="btn"/>
  80.         <button class="btn">按钮</button>
  81.         <a href="#" class="btn">按钮</a>
  82.         <br/>
  83.         <button class="btn btn-primary">按钮</button>
  84.         <button class="btn btn-default">按钮</button>
  85.         <button class="btn btn-info">按钮</button>
  86.         <button class="btn btn-warning">按钮</button>
  87.         <button class="btn btn-danger">按钮</button>
  88.         <button class="btn btn-success">按钮</button>
  89.         <button class="btn btn-link">按钮</button>
  90.         <a href="#" class="btn btn-success active">激活按钮</a>
  91.         <br/>
  92.         <button class="btn btn-lg">按钮</button>
  93.         <button class="btn">按钮</button>
  94.         <button class="btn btn-sm">按钮</button>
  95.         <button class="btn btn-xs">按钮</button>
  96.         <br/>
  97.         <div class="btn-group">
  98.             <button class="btn btn-warning">按钮1</button>
  99.             <button class="btn btn-success">按钮2</button>
  100.             <button class="btn btn-primary">按钮3</button>
  101.         </div>
  102.     </form>
  103. </div>
  105. </body>
  106. <div class="container-fluid" style="background-color: white">
  107.     栅格系统
  108.     <!--xs超小型，适合手机-->
  109.     <!--sm小型，适合平板-->
  110.     <!--md中等，适合PC-->
  111.     <!--lg大型，适合大桌面显示器-->
  112.     <div class="row">
  113.         <div class="col-md-1">col-1</div>
  114.         <div class="col-md-1">col-2</div>
  115.         <div class="col-md-1">col-3</div>
  116.         <div class="col-md-1">col-4</div>
  117.         <div class="col-md-1">col-5</div>
  118.         <div class="col-md-1">col-6</div>
  119.         <div class="col-md-1">col-7</div>
  120.         <div class="col-md-1">col-8</div>
  121.         <div class="col-md-1">col-9</div>
  122.         <div class="col-md-1">col-10</div>
  123.         <div class="col-md-1">col-11</div>
  124.         <div class="col-md-1">col-12</div>
  125.         <div class="col-md-1">over</div>
  126.         <div class="col-md-1">over</div>
  127.         <div class="col-md-1">over</div>
  128.         <div class="col-md-1">over</div>
  129.         <div class="col-md-1">over</div>
  130.         <div class="col-md-1">over</div>
  131.         <div class="col-md-1">over</div>
  132.     </div>
  133.     <div class="row">
  134.         <div class="col-md-4">
  135.             <img src="fig.jpg" class="img-responsive img-thumbnail"/>
  136.             <h3 class="page-header">h3</h3>
  137.             <p>句子句子句子句子句子句子句子句子句子</p>
  138.         </div>
  139.         <div class="col-md-4">
  140.             <img src="fig.jpg" class="img-responsive img-thumbnail"/>
  141.             <h3 class="page-header">h3</h3>
  142.             <p>句子句子句子句子句子句子句子句子句子</p>
  143.         </div>
  144.         <div class="col-md-4">
  145.             <img src="fig.jpg" class="img-responsive img-thumbnail"/>
  146.             <h3 class="page-header">h3</h3>
  147.             <p>句子句子句子句子句子句子句子句子句子</p>
  148.         </div>
  149.     </div>
  150.     <div class="row">
  151.         <div class="col-md-6">col-1</div>
  152.         <div class="col-md-6">col-2</div>
  153.     </div>
  154.     <div class="row">
  155.         <div class="col-md-2">col-1</div>
  156.         <div class="col-md-3">col-2</div>
  157.         <div class="col-md-7">col-3</div>
  158.     </div>
  159.     <div class="row">
  160.         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  161.             内容
  162.         </div>
  163.         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  164.             内容
  165.         </div>
  166.         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  167.             内容
  168.         </div>
  169.         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  170.             内容
  171.         </div>
  172.     </div>
  173.     <div class="row">
  174.         <div class="col-md-1">1</div>
  175.         <div class="col-md-1">1</div>
  176.         <div class="col-md-1">1</div>
  177.         <div class="col-md-1">1</div>
  178.         <div class="col-md-1">1</div>
  179.         <div class="col-md-1">1</div>
  180.         <div class="col-md-1">1</div>
  181.         <div class="col-md-1">1</div>
  182.         <div class="col-md-1">1</div>
  183.         <div class="col-md-1">1</div>
  184.         <div class="col-md-1">1</div>
  185.         <div class="col-md-1">1</div>
  186.     </div>
  187.     <div class="row">
  188.         <div class="col-md-4">4</div>
  189.         <div class="col-md-2 col-md-offset-3">2</div>
  190.     </div>
  192.     <div class="row">
  193.         <div class="col-md-4 col-md-push-8">4</div>
  194.         <div class="col-md-8 col-md-pull-4">8</div>
  195.     </div>
  196. </div>
  198. </body>
  199. </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. Fabric1.4 kafka共识的多orderer集群

    https://www.cnblogs.com/zhangmingcheng/p/10556469.html#FeedBack https://yq.aliyun.com/articles/63746 ...

  2. docker打包项目

    nginx镜像制作实战 docker容器的主业 docker理念里,容器启动时,应当为它指定主业是什么,如nginx容器主业就是nginx代理服务,tomcat容器就是web服务等等 1.容器创建时, ...

  3. Java 后端开发常用的 10 种第三方服务

    请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题. 严格意义上 ...

  4. 【GDKOI2004】汉诺塔

    题目描述 古老的汉诺塔问题是这样的:用最少的步数将N个半径互不相等的圆盘从1号柱利用2号柱全部移动到3号柱,在移动的过程中小盘要始终在大盘的上面. 现在再加上一个条件:不允许直接把盘从1号柱移动到3号 ...

  5. [LeetCode]面试题67. 把字符串转换成整数

    题目 写一个函数 StrToInt,实现把字符串转换成整数这个功能.不能使用 atoi 或者其他类似的库函数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们 ...

  6. NX二次开发-NX访问SqlServer数据库(增删改查)C#版

    版本:NX9+VS2012+SqlServer2008r2 以前我写过一个NX访问MySQL数据库(增删改查)的文章https://www.cnblogs.com/nxopen2018/p/12297 ...

  7. CSDN博客图片水印自定义及去除方法

    小图上传说明 尺寸较小的图片上传后默认不加水印,而且默认水平居中显示.你可以更改markdown格式后面的#pic_center,这是设置图片水平对齐的方式.#pic_left就是左对齐,#pic_r ...

  8. 八皇后问题（n-皇后问题）

    JAVA 作为一道经典的题目,那必然要用经典的dfs来做 dfs:深度优先搜索----纵向搜索符合条件的内容,走到底时回到上一个路口再走到底再回去,套娃至结束. 条件:在一个n*n的国际棋盘上摆放n个 ...

  9. 2.2 spring5源码 -- ioc加载的整体流程

    之前我们知道了spring ioc的加载过程, 具体如下图. 下面我们就来对照下图, 看看ioc加载的源代码. 下面在用装修类比, 看看个个组件都是怎么工作的. 接下来是源码分析的整体结构图. 对照上 ...

  10. php bypass disable function

    前言 最近开学,事太多了,好久没更新了,然后稍微闲一点一直在弄这个php bypass disable function,一开始自己的电脑win10安装蚁剑的插件,一直报错.怀疑是必须linux环境. ...