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 ...
随机推荐
- swift 第七课 xib 约束的优先级
前期要实现 一个自适应的label 的时候,就知到xib 约束是有优先级的,一直为深入研究: 乘写这个 博客的机会 ,试验下xib 约束的等级 …… 抱歉要查资料,在重新实践,先把主要浏览的网页 连接 ...
- python基础----pymysql模块
安装pymysql ----pip install mysql 步骤: 1.建立连接 指定ip.端口号.密码.账号.数据库 2.建立游标 3.执行sql语句 4.获取结果或提交 5.关闭游标, ...
- selenium+python自动化框架
流程: 环境准备 eclipse :需安装pydev.testng插件 python :安装python完成后,需 pip下安装selenium:命令: pip install selenium 我现 ...
- redis设置密码和其它服务器连接
在cenos中 vim /etc/redis.conf 中 /输入 requirepass enter件一下 小写 n 一下 吧 # requirepass #去掉,后面写你的密码 #其它机器连接 v ...
- [转帖]什么是WAL？
什么是WAL? https://www.cnblogs.com/hzmark/p/wal.html 原来数据库与消息中间件 用的是相同的模式 都是基于 顺序写的性能优于 离散写 series 强于sc ...
- 把Javascript 对象转换为键值对连接符字符串的方法总结
307down votefavorite 93 Do you know a fast and simple way to encode a Javascript Object into a strin ...
- Kubernetes组件-CronJob（定时任务）
⒈简介: Kubernetes的Job资源在创建时会立即运行pod.但是许多批处理任务需要在特定的时间运行,或者在指定的时间间隔内重复运行.在Linux和类UNIX操作系统中,这些任务通常被称为cro ...
- Kernel--试题
1. 内核堆栈区别: 1.栈自动分配回收,函数里面声明的变量:2.堆:malloc kmalloc申请的空间,需要自己释放 https://blog.csdn.net/tainjau/article/ ...
- Devexpress WinForm TreeList的三种数据绑定方式(DataSource绑定、AppendNode添加节点、VirtualTreeGetChildNodes(虚拟树加载模式))
第一种:DataSource绑定,这种绑定方式需要设置TreeList的ParentFieldName和KeyFieldName两个属性,这里需要注意的是KeyFieldName的值必须是唯一的. 代 ...
- k8s-prometheus 数据采集(node redis kubelet等)
apiVersion: v1 kind: ConfigMap metadata: name: prometheus-config namespace: kube-ops data: prometheu ...