web开发：Bootstrap应用及内存管理
2024-09-03 17:55:06
一、栅格系统
二、移动端适配
三、栅格系统案例
四、表格
五、表单
六、循环应用
一、栅格系统
<!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)
最新文章
- [WPF系列]-Data Validation
- 模板题 codevs 1993 草地排水 想学习的请看链接
- javaweb学习总结(二十三)——jsp自定义标签开发入门
- nodejs的安装和配置
- GDI+与图形编程研究
- ionic获取事件中的对象
- Python(2.7.6) ConfigParser - 读写配置文件
- Python全栈开发-web框架之django
- Android学习小Demo（20）关于Fragment的应用
- 在ASP.NET Core中使用brotli压缩
- echarts 折线图点击高亮
- 什么是IaaS, PaaS和SaaS及其区别
- BZOJ3175[Tjoi2013]攻击装置——二分图最大独立集
- js类型判断-丰富加好用
- php5.6-lumen与php5.6-phalcon性能对比
- 获取 Google USB 驱动程序
- 在idea中关闭vim模式
- 使用COSBench工具对ceph s3接口进行压力测试--续
- Redis的一些结构
- docker是PaaS,与openstack是IaaS的关系