使用Bootstrap模板布局-1

最新推荐文章于 2023-07-25 15:40:01 发布

雨师@

最新推荐文章于 2023-07-25 15:40:01 发布

阅读量705

点赞数

分类专栏： WEB前端文章标签： bootstrap javascript jquery

本文链接：https://blog.csdn.net/wtt234/article/details/124628109

版权

WEB前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.下面是模板；

重点关注栅格布局；

模板布局的内容：

bootstrap中调用的内容，重点强调的是 bootstrap外还有引用jquery.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入BootStrap的样式，提供了大量的样式-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
    body {
        margin: 0;
    }
</style>
<body>
	
	<!-- 主体内容 -->
	
<div class="container-fluid">
	<div class="row">   <!-- 栅格-行内容 --，左右布局，左边3列；右边9列 在一行>
		<div class="col-md-3">  <!-- 前半部分-每行占有3列 -->
			
		</div>
		
		<div class="col-md-9">  <!-栅格- 后半部分 每行占有9列 -->
			
		</div>
		
	</div>
	
</div>
    
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!--引入BootStrap的js，提供了一些动态效果。注意：必须先引入jQuery-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>