1.bootstrap网格系统与panel面板组件
一、网格系统
1.基本使用方式
网格系统是bootstrap用来分配页面空间的一种方法,把每一行看成12份,分的越多空间越大,基本使用方式如下
代码
<!DOCTYPE html>
<html>
<head>
<title>bootstrap</title>
<!--使用网格系统的引用-->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="height:800px;background-color:#333333 "></div>
<div class="col-md-4" style="height:800px;background-color:#444444"></div>
<div class="col-md-4" style="height:800px;background-color:#222222"></div>
</div>
</body>
</html>
结果
2.container与container-fluid的区别
后者这个容器可以随着浏览器大小的变化自动填充,不使用自动填充如下图所示
3.分配大小的属性区别
(xs-sm-md-lg)
col-xs-4:小于768px的小设备
col-sm-4:>=768px的设备
col-md-4:>=998px的设备
col-lg-4:1200px的设备
4.行布局与列布局
网格系统只要进行行布局,列布局可以通过设置容器的高度实现,如下
貌似边边上的白边去不掉?
代码:
<!DOCTYPE html>
<html>
<head>
<title>bootstrap</title>
<!--下面的引用决定了这个panel能否使用-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--使用网格系统的引用-->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="height:800px">
<div style="height:200px; background-color:#111111">
</div>
<div style="height:200px; background-color:#555555">
</div>
<div style="height:200px; background-color:#666666">
</div>
<div style="height:200px; background-color:#777777">
</div>
</div>
<div class="col-md-4" style="height:800px;background-color:#444444"></div>
<div class="col-md-4" style="height:800px;background-color:#222222"></div>
</div>
</body>
</html>
二、面板组件
1.基本使用方法
代码:
<!DOCTYPE html>
<html>
<head>
<title>bootstrap</title>
<!--下面的引用决定了这个panel能否使用-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--使用网格系统的引用-->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">我是猪</h3>
</div>
<div class="panel-body">我是主体</div>
<div class="panel-footer">我在底下</div>
</div>
</body>
</html>
演示
2.panel颜色主体
panel-default
panel-primary
panel-success
panel-info
panel-warning
panel-danger
三、今日小结
1.class属性可以有多个属性值,用空格隔开
2.toggle-开关
3.a href="#" 还是留在当前页
<a href = "#" > 与 <a href = "javascript:void(0)" > 待解决
4.collapse下拉框
5.panel-title 不用这个属性的话,panel的标题会有点飘
6.网格系统的列布局是否有更好的实现方法?边上的白边如何去除?