【达内课程】H5前端开发Bootstrap

最新推荐文章于 2023-08-23 06:00:47 发布

Errol_King

最新推荐文章于 2023-08-23 06:00:47 发布

阅读量423

点赞数

分类专栏： # 达内安卓培训文章标签： bootstrap

本文链接：https://blog.csdn.net/u010356768/article/details/102623809

版权

达内安卓培训专栏收录该内容

188 篇文章 19 订阅

订阅专栏

文章目录

不同设备不同样式
展开伸缩

下载Bootstrap

不同设备不同样式

正常情况下的3个Div
在这里插入图片描述
引入bootstrap

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-6 col-md-4" style="background-color:red">1</div>
				<div class="col-xs-12 col-sm-6 col-md-4" style="background-color:green">2</div>
				<div class="col-xs-12 col-sm-6 col-md-4" style="background-color:blue">3</div>
			</div>
		</div>
	</body>
</html>

在浏览器不同大小时，三个div的显示结果
在这里插入图片描述

展开伸缩

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.4.1.js"></script>
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<style type="text/css">
			body{
				margin: 100px;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="mail" class="panel-group">
			<div class="panel panel-success">
				<div data-parent="#mail" class="panel-heading" data-toggle="collapse" href="#receiveMail">收件箱</div>
					<div id="receiveMail" class="collapse in">
						<div class="panel-body">入职通知</div>
					</div>
			</div>
		
			<div class="panel panel-success">
				<div data-parent="#mail" class="panel-heading" data-toggle="collapse" href="#sendMail">发件箱</div>
					<div id="sendMail" class="collapse">
						<div class="panel-body">明年去西藏</div>
					</div>
			</div>
		</div>
	</body>
</html>

Errol_King

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【达内课程】H5前端开发Bootstrap

文章目录不同设备不同样式展开伸缩下载Bootstrap不同设备不同样式正常情况下的3个Div引入bootstrap<html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" hre...
复制链接

扫一扫

专栏目录