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 ...
随机推荐
- Hadoop 部署之 Hive (五)
目录 一.Hive 简介 1.什么是 Hive 2.为什么使用 Hive 3.Hive 的特点 4.Hive 的架构 二.Hive 安装 1.MySQL 安装(datanode01) 2.MySQL ...
- dlopen, dlsym今天才刚知道干什么用的，羞死人了
dlopen, dlsym今天才刚知道干什么用的,羞死人了
- xshell和Xftp连接虚拟机(转载)
首先连接虚拟机之前,先配置自己的IP地址,见博客https://www.cnblogs.com/xuzhaoyang/p/11264573.html xshell和Xftp下载请到官网http://w ...
- ORACLE-JDK非收费版本下载链接
这个链接下可以下载oracleJDK的所有版本 https://www.oracle.com/technetwork/java/javase/archive-139210.html 其中jdk192之 ...
- ztree根据ztreeId【节点id】设置展开、选中、触发点击节点事件
有时候我们要默认选中某个节点,根据ztreeId // 这里的ztreeId就是ztree存放在页面的元素id,比如div的id // treeObj就是ztree对象 var treeObj = $ ...
- Java基础篇---多线程
内容导航: 1.多线程的实现方式 2.线程安全问题 3.线程间通信 4.生产者消费者模式 第一部分多线程的实现方式 在java中多线程实现方式有2种 一.自定义一个类A,继承Thread类 publi ...
- 深度学习-LeCun、Bengio和Hinton的联合综述
深度学习其实要入门也很简单,不要被深度学习.卷积神经网络CNN.循环神经网络RNN等某些“高大上”的专有名词所吓到或被忽悠,要相信大道至简,一个高中生只要愿意学也完全可以入门级了解并依赖一些成熟的Te ...
- 一文看懂java io系统 (转)
出处: 一文看懂java io系统 学习java IO系统,重点是学会IO模型,了解了各种IO模型之后就可以更好的理解java IO Java IO 是一套Java用来读写数据(输入和输出)的A ...
- linux mysql 数据库操作导入导出 数据表导出导入
linux mysql 数据库操作导入导出 数据表导出导入 1,数据库导入 mysql -uroot -p show databases; create database newdb; use 数据库 ...
- rabbitmq消息队列，消息发送失败，消息持久化，消费者处理失败相关
转:https://blog.csdn.net/u014373554/article/details/92686063 项目是使用springboot项目开发的,前是代码实现,后面有分析发送消息失败. ...