一、栅格系统

二、移动端适配

三、栅格系统案例

四、表格

五、表单

六、循环应用

一、栅格系统

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>栅格系统</title>
  6.     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
  7.     <style>
  8.         .row div {
  9.             height: 60px;
  10.         }
  11.         .box {
  12.             width: 800px;
  13.             height: 60px;
  14.             /*margin: 0 0000;*/
  15.             background-color: black;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="container">
  21.         <div class="row bg-pink">
  22.             <!--栅格系统-->
  23.             <!--1.将父级的width等分为12等分, 子级占父级宽度的多少等分-->
  24.             <!--2.子级们的总占比不要超过12等分-->
  25.             <!--3.在12等分内,子级同行显示-->
  26.             <div class="bg-danger col-md-4"></div>
  27.             <div class="bg-info col-md-9"></div>
  28.         </div>
  29.         <div class="row box bg-warning">
  30.             <!--4.总占比小于12等分,偏移通过col-?-offset-?来偏移-->
  31.             <!--5.设置一个平面宽度下的栅格, 大于该屏幕尺寸,可以运用此套css
  32.             小于该屏幕尺寸,不适用, 但可以接着设置更小屏幕尺寸的栅格-->
  33.             <div class="bg-danger col-md-4 col-sm-6 col-xs-10"></div>
  34.             <div class="bg-info col-md-7 col-md-offset-1 col-sm-6 col-xs-12"></div>
  35.         </div>
  36.     </div>
  37. </body>
  38. <script src="js/jquery-3.3.1.js"></script>
  39. <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  40. </html>

二、移动端适配

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>移动端适配</title>
  6.     <!--注: 当页面没有适配移动端设备-->
  7.     <!--注; 移动端设备不再以屏幕像素px作为布局宽度, 以屏幕像素点作为屏幕布局宽度-->
  8.     <meta name="viewport" content="width=device-width, user-scalable=no">
  9.     <!--<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
  10.  
  11.     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
  12.  
  13.     <style>
  14.         .row.bg-pink {
  15.             height: 60px;
  16.             width: 375px;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <div class="container-fluid">
  22.     <nav class="navbar navbar-inverse">
  23.         <div class="container-fluid">
  24.             <!-- Brand and toggle get grouped for better mobile display -->
  25.             <div class="navbar-header">
  26.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  27.                         data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  28.                     <span class="sr-only">Toggle navigation</span>
  29.                     <span class="icon-bar"></span>
  30.                     <span class="icon-bar"></span>
  31.                     <span class="icon-bar"></span>
  32.                 </button>
  33.                 <a class="navbar-brand" href="#">Brand</a>
  34.             </div>
  35.  
  36.             <!-- Collect the nav links, forms, and other content for toggling -->
  37.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  38.                 <ul class="nav navbar-nav">
  39.                     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
  40.                     <li><a href="#">Link</a></li>
  41.                     <li class="dropdown">
  42.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
  43.                            aria-expanded="false">Dropdown <span class="caret"></span></a>
  44.                         <ul class="dropdown-menu">
  45.                             <li><a href="#">Action</a></li>
  46.                             <li><a href="#">Another action</a></li>
  47.                             <li><a href="#">Something else here</a></li>
  48.                             <li role="separator" class="divider"></li>
  49.                             <li><a href="#">Separated link</a></li>
  50.                             <li role="separator" class="divider"></li>
  51.                             <li><a href="#">One more separated link</a></li>
  52.                         </ul>
  53.                     </li>
  54.                 </ul>
  55.                 <form class="navbar-form navbar-left">
  56.                     <div class="form-group">
  57.                         <input type="text" class="form-control" placeholder="Search">
  58.                     </div>
  59.                     <button type="submit" class="btn btn-default">Submit</button>
  60.                 </form>
  61.                 <ul class="nav navbar-nav navbar-right">
  62.                     <li><a href="#">Link</a></li>
  63.                     <li class="dropdown">
  64.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
  65.                            aria-expanded="false">Dropdown <span class="caret"></span></a>
  66.                         <ul class="dropdown-menu">
  67.                             <li><a href="#">Action</a></li>
  68.                             <li><a href="#">Another action</a></li>
  69.                             <li><a href="#">Something else here</a></li>
  70.                             <li role="separator" class="divider"></li>
  71.                             <li><a href="#">Separated link</a></li>
  72.                         </ul>
  73.                     </li>
  74.                 </ul>
  75.             </div><!-- /.navbar-collapse -->
  76.         </div><!-- /.container-fluid -->
  77.     </nav>
  78. </div>
  79. <div class="container">
  80.     <div class="row bg-pink">
  81.  
  82.     </div>
  83. </div>
  84. </body>
  85. <script src="js/jquery-3.3.1.js"></script>
  86. <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  87. </html>

三、栅格系统案例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>案例</title>
  6.     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
  7.     <style>
  8.         .row {
  9.             /*background-color: yellow;*/
  10.         }
  11.         .box {
  12.             height: 60px;
  13.             /*margin: 0 -15px;*/
  14.         }
  15.         .left {
  16.             margin-right: 25px;
  17.         }
  18.         .right {
  19.             margin-left: 25px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <!--需求1-->
  25. <!--两个盒子之间间距为30px-->
  26. <div class="container">
  27.     <div class="row">
  28.         <div class="container col-md-6">
  29.             <div class="box bg-warning"></div>
  30.         </div>
  31.         <div class="container col-md-6">
  32.             <div class="box bg-danger"></div>
  33.         </div>
  34.     </div>
  35. </div>
  36. <!--两个盒子之间间距50px, 且左右没有留白-->
  37. <div class="container">
  38.     <div class="row">
  39.         <div class="col-md-6">
  40.             <div class="row">
  41.                 <div class="box bg-warning left"></div>
  42.             </div>
  43.         </div>
  44.         <div class="col-md-6">
  45.             <div class="row">
  46.                 <div class="box bg-danger right"></div>
  47.             </div>
  48.         </div>
  49.     </div>
  50. </div>
  51. <!--重点: 在任何结构下, 需要容器就可以设置容器来嵌套显示内容,
  52. 需要row来配个容器布局,就可以在容器内部设置row-->
  53. </body>
  54.  
  55. </html>

四、表格

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格</title>
  6.     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
  7.     <style>
  8.         .row {
  9.             /*border: 1px solid #333;*/
  10.         }
  11.         th {
  12.             text-align: center;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <div class="container">
  18.     <div class="row">
  19.         <table class="table table-striped table-bordered table-hover">
  20.             <tr>
  21.                 <th>标题</th>
  22.                 <th>标题</th>
  23.                 <th>标题</th>
  24.             </tr>
  25.             <tr>
  26.                 <td>单元格</td>
  27.                 <td>单元格</td>
  28.                 <td>单元格</td>
  29.             </tr>
  30.             <tr class="success">
  31.                 <td>单元格</td>
  32.                 <td>单元格</td>
  33.                 <td>单元格</td>
  34.             </tr>
  35.             <tr>
  36.                 <td>单元格</td>
  37.                 <td class="danger">单元格</td>
  38.                 <td>单元格</td>
  39.             </tr>
  40.             <tr>
  41.                 <td>单元格</td>
  42.                 <td class="info" colspan="2" style="text-align: center">单元格</td>
  43.                 <!--<td>单元格</td>-->
  44.             </tr>
  45.         </table>
  46.  
  47.     </div>
  48. </div>
  49.  
  50. </body>
  51. <script src="js/jquery-3.3.1.js"></script>
  52. <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  53. </html>

五、表单

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单</title>
  6.     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
  7.     <style>
  8.         .form-group {
  9.             /*margin-bottom: 0;*/
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14. <div class="container">
  15.     <div class="row">
  16.  
  17.         <form action="">
  18.             <div class="form-group">
  19.                 <!--label的for是关联匹配的input的id, 当label点击时会让input获取焦点-->
  20.                 <label for="usr">用户名:</label>
  21.                 <input class="form-control" type="text" name="usr" id="usr">
  22.             </div>
  23.             <div class="form-group">
  24.                 <label for="pwd">密码:</label>
  25.                 <input class="form-control" type="password" name="pwd" id="pwd">
  26.             </div>
  27.             <div class="form-group checkbox">
  28.                 <!--复选框-->
  29.                 <label>
  30.                     <input type="checkbox" value="reading" name="sk">请阅读
  31.                 </label>
  32.             </div>
  33.         </form>
  34.         <!--总结: form中分行用form-group, 采用bs的js处理,input添加form-control-->
  35.  
  36.     </div>
  37.     <hr>
  38.     <div class="row">
  39.         <form class="form-inline">
  40.             <!--<div class="row">-->
  41.             <div class="form-group">
  42.                 <label for="usr1">用户名:</label>
  43.                 <input type="text" class="form-control" name="usr1" id="usr1" placeholder="请输入用户名">
  44.             </div>
  45.             <!--</div>-->
  46.             <!--<div class="row">-->
  47.             <div class="form-group">
  48.                 <label for="pwd1">密码:</label>
  49.                 <input type="password" class="form-control" name="pwd1" id="pwd1">
  50.             </div>
  51.             <!--</div>-->
  52.             <button type="submit" class="btn btn-default">提交</button>
  53.         </form>
  54.     </div>
  55.     <hr>
  56.     <div class="row">
  57.         <div class="col-sm-6">
  58.             <form action="" class="form-horizontal">
  59.                 <div class="form-group has-warning">
  60.                     <label for="usr2" class="col-sm-2 control-label">用户名:</label>
  61.                     <div class="col-sm-10">
  62.                         <input type="text" class="form-control" name="usr2" id="usr2" placeholder="请输入用户名">
  63.                     </div>
  64.                 </div>
  65.                 <div class="form-group has-success">
  66.                     <label for="pwd2" class="col-sm-2 control-label">密码:</label>
  67.                     <div class="col-sm-10">
  68.                         <input type="password" class="form-control" name="pwd2" id="pwd2">
  69.                     </div>
  70.                 </div>
  71.                 <div class="form">
  72.                     <div class="col-sm-6 col-sm-offset-6">
  73.                         <div class="row">
  74.                             <button type="submit" class="btn-block">提交</button>
  75.                         </div>
  76.                     </div>
  77.                 </div>
  78.  
  79.             </form>
  80.  
  81.         </div>
  82.  
  83.     </div>
  84.  
  85.     <div class="row">
  86.         <div class="row">
  87.             <button type="button" class="btn">按钮</button>
  88.         </div>
  89.         <button class="btn btn-danger">按钮</button>
  90.         <div class="row">
  91.             <button class="btn btn-block">按钮</button>
  92.         </div>
  93.         <div class="row">
  94.             <button disabled class="my-btn btn btn-lg btn-warning" style="outline: none">按钮按钮按钮按钮按钮</button>
  95.         </div>
  96.  
  97.     </div>
  98.  
  99.     <div class="row">
  100.         <i class="glyphicon glyphicon-step-backward" style="font-size: 100px"></i>
  101.     </div>
  102.  
  103. </div>
  104. </body>
  105. <script src="js/jquery-3.3.1.js"></script>
  106. <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  107. <script>
  108.     $('.my-btn').click(function () {
  109.         alert(123)
  110.     })
  111. </script>
  112. </html>

六、循环应用

  1. l1 = [1, ]
  2. l2 = ['a', ]
  3.  
  4. l1.append(l2)
  5. l2.append(l1)
  6.  
  7. del l1
  8. del l2
  9.  
  10. print(l1)

web开发：Bootstrap应用及内存管理的更多相关文章

  1. Webpack: 为Web开发而生的模块管理器[转]

    Webpack: 为Web开发而生的模块管理器 原文地址:http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/ 10 Se ...

  2. iOS开发系列—Objective-C之内存管理

    概述 我们知道在程序运行过程中要创建大量的对象,和其他高级语言类似,在ObjC中对象时存储在堆中的,系统并不会自动释放堆中的内存(注意基本类型是由系统自己管理的,放在栈上).如果一个对象创建并使用后没 ...

  3. Swift开发必备技巧：内存管理、weak和unowned

    因为 Playground 本身会持有所有声明在其中的东西,因此本节中的示例代码需要在 Xcode 项目环境中运行.在 Playground 中可能无法得到正确的结果. 不管在什么语言里,内存管理的内 ...

  4. [Windows驱动开发]（四）内存管理

    一.内存管理概念 1. 物理内存概念(Physical Memory Address)     PC上有三条总线,分别是数据总线.地址总线和控制总线.32位CPU的寻址能力为4GB(2的32次方)个字 ...

  5. 【python测试开发栈】python内存管理机制（一）—引用计数

    什么是内存 在开始进入正题之前,我们先来回忆下,计算机基础原理的知识,为什么需要内存.我们都知道计算机的CPU相当于人类的大脑,其运算速度非常的快,而我们平时写的数据,比如:文档.代码等都是存储在磁盘 ...

  6. 【python测试开发栈】—python内存管理机制（二）—垃圾回收

    在上一篇文章中(python 内存管理机制-引用计数)中,我们介绍了python内存管理机制中的引用计数,python正是通过它来有效的管理内存.今天来介绍python的垃圾回收,其主要策略是引用计数 ...

  7. 内存管理内幕mallco及free函数实现

    原文:https://www.ibm.com/developerworks/cn/linux/l-memory/ 为什么必须管理内存 内存管理是计算机编程最为基本的领域之一.在很多脚本语言中,您不必担 ...

  8. PHP内核(一)内存管理

    本文链接:http://www.orlion.ml/tag/php-internal/ 一.内存管理基础 用c语言开发时,开发者要手动进行内存管理.PHP经常作为web服务器的模块,内存管理与预防内存 ...

  9. <转载>内存管理内幕-动态分配的选择、折衷和实现 对malloc内存分配有个简单的描述，对内存管理有个大致的说明

    这篇文章看后感觉不错,和我在glibc下的hurdmalloc.c文件里关于malloc的实现基本意思相同,同时,这篇文章还介绍了一些内存管理方面的知识,值得推荐. 原文链接地址为:http://ww ...

随机推荐

  1. hibernate 第二次深入接触

    1.session 到底如何进行脏处理? 当一个Dept对象加入到session缓存时,Session会为Dept对象的值属性复制一份快照,当Session刷新缓存时,会进行脏处理. 2.OID 用来 ...

  2. Python3 Selenium自动化web测试 ==>FAQ：PyCharm中脚本不执行main函数内容解决方案

    FAQ: 情景:之前写好可以正常执行的python脚本,突然main函数下的代码不运行 原因:pycharm中,会设置py脚本按照unittest的方式运行,也就是只运行用例,不运行main函数下代码 ...

  3. Bootstrap, 模态框实现值传递,自动勾选

    目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: ​ 有一个这样的需求, 在父页面有一个table, ...

  4. ArcMap 制作广州 18 级地图切片需要多少时间？

    制作地图切片包会随着级别的上升,瓦片数量会指数级地上升,所需的计算时间也是指数级的. 但是 ArcMap 并不会提示时间信息,只有一个圈没完没了地转... 就在这无聊地等待中,我写了这篇帖子. 电脑配 ...

  5. 解决Linux：Too many levels of symbolic links

    Too many levels of symbolic links 解决:创建链接时使用绝对路径

  6. WhatsApp Group vs WhatsApp Broadcast for Business

    WhatsApp Group vs WhatsApp Broadcast for Business By Iaroslav Kudritskiy If you've read our Ultimate ...

  7. 【Gstreamer开发】用 GStreamer 简化 Linux 多媒体开发

    原文:http://www.ibm.com/developerworks/cn/linux/l-gstreamer/ 一.基本概念 GStreamer 作为 GNOME 桌面环境推荐的流媒体应用框架, ...

  8. java -io 读取文件操作

    主要分为字节读取和字符读取,字节读取可以一个一个读取和字节数组读取,字符读取同样之,字符读取适合文本读取,字节读取皆可以 这里直接上代码,读取文件的9个小demo package com.io; im ...

  9. win10配置Keras及GPU环境

    今天搭建了Keras深度学习的环境 详细记录一下 安装Anaconda3 Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项. Anac ...

  10. Python+requests维持会话

    Python+requests维持会话 一.使用Python+requests发送请求,为什么要维持会话? 我们是通过http协议来访问web网页的,而http协议是无法维持会话之间的状态.比如说我们 ...