1.bootstrap网格系统与panel面板组件

最新推荐文章于 2023-07-25 18:37:50 发布

yellingf

最新推荐文章于 2023-07-25 18:37:50 发布

阅读量671

点赞数

分类专栏： bootstrap 文章标签： bootstrap 网格系统 panel

本文链接：https://blog.csdn.net/ylf12341/article/details/89300863

版权

bootstrap 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、网格系统

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/bootstrap@3.3.7/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/bootstrap@3.3.7/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.网格系统的列布局是否有更好的实现方法?边上的白边如何去除？

yellingf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.bootstrap网格系统与panel面板组件

一、网格系统1.基本使用方式网格系统是bootstrap用来分配页面空间的一种方法，把每一行看成12份，分的越多空间越大，基本使用方式如下代码<!DOCTYPE html><html> <head> <title>bootstrap</title>  <...
复制链接

扫一扫