前言
刚刚大三对前端开发不是很熟练，之前学过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的知识比如盒子和排列的问题需要再去复习一下。
参阅：
