web开发：Bootstrap应用及内存管理
一、栅格系统
二、移动端适配
三、栅格系统案例
四、表格
五、表单
六、循环应用
一、栅格系统
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>栅格系统</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.row div {
height: 60px;
}
.box {
width: 800px;
height: 60px;
/*margin: 0 0000;*/
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="row bg-pink">
<!--栅格系统-->
<!--1.将父级的width等分为12等分, 子级占父级宽度的多少等分-->
<!--2.子级们的总占比不要超过12等分-->
<!--3.在12等分内,子级同行显示-->
<div class="bg-danger col-md-4"></div>
<div class="bg-info col-md-9"></div>
</div>
<div class="row box bg-warning">
<!--4.总占比小于12等分,偏移通过col-?-offset-?来偏移-->
<!--5.设置一个平面宽度下的栅格, 大于该屏幕尺寸,可以运用此套css
小于该屏幕尺寸,不适用, 但可以接着设置更小屏幕尺寸的栅格-->
<div class="bg-danger col-md-4 col-sm-6 col-xs-10"></div>
<div class="bg-info col-md-7 col-md-offset-1 col-sm-6 col-xs-12"></div>
</div>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
二、移动端适配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端适配</title>
<!--注: 当页面没有适配移动端设备-->
<!--注; 移动端设备不再以屏幕像素px作为布局宽度, 以屏幕像素点作为屏幕布局宽度-->
<meta name="viewport" content="width=device-width, user-scalable=no">
<!--<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">--> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> <style>
.row.bg-pink {
height: 60px;
width: 375px;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="container">
<div class="row bg-pink"> </div>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
三、栅格系统案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.row {
/*background-color: yellow;*/
}
.box {
height: 60px;
/*margin: 0 -15px;*/
}
.left {
margin-right: 25px;
}
.right {
margin-left: 25px;
}
</style>
</head>
<body>
<!--需求1-->
<!--两个盒子之间间距为30px-->
<div class="container">
<div class="row">
<div class="container col-md-6">
<div class="box bg-warning"></div>
</div>
<div class="container col-md-6">
<div class="box bg-danger"></div>
</div>
</div>
</div>
<!--两个盒子之间间距50px, 且左右没有留白-->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="box bg-warning left"></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="box bg-danger right"></div>
</div>
</div>
</div>
</div>
<!--重点: 在任何结构下, 需要容器就可以设置容器来嵌套显示内容,
需要row来配个容器布局,就可以在容器内部设置row-->
</body> </html>
四、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.row {
/*border: 1px solid #333;*/
}
th {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-striped table-bordered table-hover">
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr class="success">
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td class="danger">单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td class="info" colspan="2" style="text-align: center">单元格</td>
<!--<td>单元格</td>-->
</tr>
</table> </div>
</div> </body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
五、表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.form-group {
/*margin-bottom: 0;*/
}
</style>
</head>
<body>
<div class="container">
<div class="row"> <form action="">
<div class="form-group">
<!--label的for是关联匹配的input的id, 当label点击时会让input获取焦点-->
<label for="usr">用户名:</label>
<input class="form-control" type="text" name="usr" id="usr">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input class="form-control" type="password" name="pwd" id="pwd">
</div>
<div class="form-group checkbox">
<!--复选框-->
<label>
<input type="checkbox" value="reading" name="sk">请阅读
</label>
</div>
</form>
<!--总结: form中分行用form-group, 采用bs的js处理,input添加form-control--> </div>
<hr>
<div class="row">
<form class="form-inline">
<!--<div class="row">-->
<div class="form-group">
<label for="usr1">用户名:</label>
<input type="text" class="form-control" name="usr1" id="usr1" placeholder="请输入用户名">
</div>
<!--</div>-->
<!--<div class="row">-->
<div class="form-group">
<label for="pwd1">密码:</label>
<input type="password" class="form-control" name="pwd1" id="pwd1">
</div>
<!--</div>-->
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
<hr>
<div class="row">
<div class="col-sm-6">
<form action="" class="form-horizontal">
<div class="form-group has-warning">
<label for="usr2" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="usr2" id="usr2" placeholder="请输入用户名">
</div>
</div>
<div class="form-group has-success">
<label for="pwd2" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="pwd2" id="pwd2">
</div>
</div>
<div class="form">
<div class="col-sm-6 col-sm-offset-6">
<div class="row">
<button type="submit" class="btn-block">提交</button>
</div>
</div>
</div> </form> </div> </div> <div class="row">
<div class="row">
<button type="button" class="btn">按钮</button>
</div>
<button class="btn btn-danger">按钮</button>
<div class="row">
<button class="btn btn-block">按钮</button>
</div>
<div class="row">
<button disabled class="my-btn btn btn-lg btn-warning" style="outline: none">按钮按钮按钮按钮按钮</button>
</div> </div> <div class="row">
<i class="glyphicon glyphicon-step-backward" style="font-size: 100px"></i>
</div> </div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
$('.my-btn').click(function () {
alert(123)
})
</script>
</html>
六、循环应用
l1 = [1, ]
l2 = ['a', ] l1.append(l2)
l2.append(l1) del l1
del l2 print(l1)
web开发：Bootstrap应用及内存管理的更多相关文章
- Webpack: 为Web开发而生的模块管理器[转]
Webpack: 为Web开发而生的模块管理器 原文地址:http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/ 10 Se ...
- iOS开发系列—Objective-C之内存管理
概述 我们知道在程序运行过程中要创建大量的对象,和其他高级语言类似,在ObjC中对象时存储在堆中的,系统并不会自动释放堆中的内存(注意基本类型是由系统自己管理的,放在栈上).如果一个对象创建并使用后没 ...
- Swift开发必备技巧：内存管理、weak和unowned
因为 Playground 本身会持有所有声明在其中的东西,因此本节中的示例代码需要在 Xcode 项目环境中运行.在 Playground 中可能无法得到正确的结果. 不管在什么语言里,内存管理的内 ...
- [Windows驱动开发]（四）内存管理
一.内存管理概念 1. 物理内存概念(Physical Memory Address) PC上有三条总线,分别是数据总线.地址总线和控制总线.32位CPU的寻址能力为4GB(2的32次方)个字 ...
- 【python测试开发栈】python内存管理机制（一）—引用计数
什么是内存 在开始进入正题之前,我们先来回忆下,计算机基础原理的知识,为什么需要内存.我们都知道计算机的CPU相当于人类的大脑,其运算速度非常的快,而我们平时写的数据,比如:文档.代码等都是存储在磁盘 ...
- 【python测试开发栈】—python内存管理机制（二）—垃圾回收
在上一篇文章中(python 内存管理机制-引用计数)中,我们介绍了python内存管理机制中的引用计数,python正是通过它来有效的管理内存.今天来介绍python的垃圾回收,其主要策略是引用计数 ...
- 内存管理内幕mallco及free函数实现
原文:https://www.ibm.com/developerworks/cn/linux/l-memory/ 为什么必须管理内存 内存管理是计算机编程最为基本的领域之一.在很多脚本语言中,您不必担 ...
- PHP内核(一)内存管理
本文链接:http://www.orlion.ml/tag/php-internal/ 一.内存管理基础 用c语言开发时,开发者要手动进行内存管理.PHP经常作为web服务器的模块,内存管理与预防内存 ...
- <转载>内存管理内幕-动态分配的选择、折衷和实现 对malloc内存分配有个简单的描述，对内存管理有个大致的说明
这篇文章看后感觉不错,和我在glibc下的hurdmalloc.c文件里关于malloc的实现基本意思相同,同时,这篇文章还介绍了一些内存管理方面的知识,值得推荐. 原文链接地址为:http://ww ...
随机推荐
- 安装“Microsoft SQL Server 2014 Management Objects”时报错"Error Writing to file: Microsoft.SqlServer.XEvent.Linq.dll."
问题: 当安装的软件依赖Microsoft SQL Server 2014 Management Objects时,会把这个组件打进安装包里,但是在服务器上安装时却报如下错误: “Error Writ ...
- 如何用最快的速度读出大小为10G的文件的行数?弄懂 python 的迭代器
with open('rm_keys.txt', 'r', encoding = 'utf-8') as f: count = 0 for line in f: 7 count += 1 print( ...
- linux系统，CentOs7加新硬盘
1,打开Vmware软件,添加一块新的硬盘,然后一直下一步. 2.通过CRT等终端软件,连接到机器 [root@Mysql ~]# lsblk //检查一下硬盘分区信息 [root@Mysql ...
- Tomcat 部署web 项目
转载,原文链接: https://www.cnblogs.com/ysocean/p/6893446.html 侵删 回到顶部 3.Tomcat 的目录结构 回到顶部 4.部署项目的第一种方法(项目直 ...
- 洛谷 题解 P1133 【教主的花园】
$n<=10^5 $ O(n)算法 状态 dp[i][j][k]表示在第i个位置,种j*10的高度的树,且这棵树是否比相邻两棵树高 转移 dp[i][1][0]=max(dp[i-1][2][1 ...
- mybatis缓存机制与装饰者模式
mybatis 缓存 MyBatis的二级缓存的设计原理 装饰者模式
- 我学会了正确的dinic
以前写Isap的时候,总是被卡,然后学了一发Isap的当前弧优化,好像可以水过很多题 但是一直没明白为啥Isap会走一个环??? 然后写dinic了,听说不容易被卡(来自去年九省联考的指导) 然而-- ...
- SpringBoot 项目如何在tomcat容器中运行
一. SpringBoot内嵌容器的部署方式 SpringBoot内部默认提供内嵌的tomcat容器,所以可以直接打成jar包,丢到服务器上的任何一个目录,然后在当前目录下执行java -jar de ...
- Kubernetes---Pod phase
⒈Pod phase Pod的status字段是一个PodStatus对象,PodStatus中有一个 phase字段. Pod的相位(phase)是Pod 在其生命周期中的简单宏观概述.该阶段并不是 ...
- 虚拟机（VM）安装openwrt-koolshare软路由
⒈创建虚拟机 **软路由选择Windows操作系统,因为我们需要在PE环境中进行软路由的写入,固件类型选择BIOS,网络类型选择使用仅主机模式网络,虚拟磁盘类型选择IDE[一定要选择IDE模式],SC ...