前言
刚刚大三对前端开发不是很熟练，之前学过html和Javascrip课程但是掌握的并不是很熟练，希望能够借助Bootstrap课程巩固前端课程。
一、Grid布局
https://www.runoob.com/bootstrap/bootstrap-grid-system.html
主要应用网格布局做一些响应式网页开发。
二、Grid测试
1.题目1
按以下要求创建一个栅格系统布局：创建一个8-4列栅格，在第一个8列中插入8-4列，在第二个4列中插入9-3列（备注：以中屏md（970px）为例）。
简单的测试题
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content ="width=device-width,initial-scale=1,shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
<title>栅格系统布局</title>
</head>
<body class="container">
<div class="row">
<div class="col-md-8 border py-3 bg-light">
<div class="col-md-8 border py-3 bg-light">col-md-8</div>
<div class="co-md-4 border py-3 bg-light">co-md-4</div>
</div>
<div class="col-md-4 border py-3 bg-light">
<div class="col-md-9 border py-3 bg-light">col-md-9</div>
<div class="co-md-3 border py-3 bg-light">co-md-3</div>
</div>
</div>
</body>
</html>
2.题目2
- 用栅格系统布局一个网页：顶部有一个logo区域，同时跨越两栏。左栏内容，右栏导航，两栏下方还有一个footer区域。
footer区域随便写了一下，具体还是看格式，歌单形式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
<title>bootstrap1</title>
</head>
<style type="text/css">
div.logo{
overflow: hidden;
}
div.img{
overflow: hidden;
}
div.logo aside{
width: 100%;
height: 300px;
background-image: url(1.png)
}
div.img aside{
width:100%;
height:200px;
background-image: url(2.png)
}
</style>
<body>
<div class="container">
<div class="col-12">
<div class="logo">
<aside></aside>
</div>
</div>
<div class="row">
<div class="col-6 ">
<div class="img">
<aside></aside>
</div>
</div>
<div class="col-6 ">
<ul><h3>查询歌曲</h3></ul>
<ul><h3>我喜欢的</h3></ul>
<ul><h3>我喜欢的</h3></ul>
<ul><h3>我喜欢的</h3></ul>
</div>
</div>
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2020-09-24"></time></p>
</footer>
</div>
</body>
</html>
3.题目3
网页制作布局题，目标达成网页响应。
字和图片排版出了点问题，希望有人指点一下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>网格测试</title>
<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
</head>
<style>
.lmg{
overflow: hidden;
}
.lmg aside{
width: 100%;
height: 341px;
background-image: url(image1/1.png);
}
.hlong *{
display:inline-block;
vertical-align:middle
}
</style>
<body >
<div class="container">
<h3 align="center" ><font color="#11F44E">我们的使命</font></h3>
<div class="row">
<div class="col-md-6 col-sm-12 border py-3 bg-warning">
<div class="lmg">
<aside></aside>
</div>
</div>
<div class="col-md-6 col-sm-12 border py-3 bg-warning">
<div class="hlong">
<img src="image1/i1.gif">
<font color="#11F44E">治理污染</font>
<span>1.环境污染和生态破坏。将环境保护纳入国民经济与社会发展计划和年度计划，在经济发展中防治</span>
<img src="image1/i2.gif">
<font color="#11F44E">垃圾分类</font>
<span>2.关心垃圾分类，特别是可回收垃圾，进行回收再生，减少对森林树木的采集砍伐</span>
<img src="image1/i3.gif">
<font color="#11F44E">节能低碳</font>
<span>3.开始低碳生活吧，节能减排，减少对资源的浪费，并还自己一片蓝天!</span>
</div>
</div>
</div>
</div>
</body>
</html>效果
总结
一些html的知识比如盒子和排列的问题需要再去复习一下。
参阅：