Web移动 06
一、响应式布局
1.媒体查询初体验：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"/><title>02-媒体查询体验.html</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}/* 800px black */@media screen and (width: 800px) {body {background-color: black;}}/* 600px red */@media screen and (width: 600px) {body {background-color: red;}}</style></head><body></body></html>
2.媒体查询-选择一定范围的屏幕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>03-媒体查询-选择一定范围的屏幕.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 屏幕小于 600px black */
/* 屏幕宽度最大只能是600px */
@media screen and (max-width: 600px) {
body {
background-color: black;
}
}
/* 屏幕大于 800px yellow */
/* 屏幕宽度 最小都是 800px */
@media screen and (min-width: 800px) {
body {
background-color: yellow;
}
}
/* 当屏幕 是 710 - 790 blue */
/* 最小也是 710 最大也是 790 */
@media screen and (min-width: 710px) and (max-width: 790px) {
body {
background-color: blue;
}
}
</style>
</head>
<body></body>
</html>
3.响应式布局尝试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>04-响应式布局的尝试.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
width: 1000px;
margin: 200px auto;
height: 200px;
}
@media screen and (min-width: 722px) {
li {
width: 25%;
float: left;
height: 200px;
border: 1px solid #000;
}
}
@media screen and (max-width: 722px) {
li {
width: 50%;
float: left;
height: 200px;
border: 1px solid #000;
}
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
二、Bootstrap框架
1.Bootstrap下载与使用
简介：Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
使用步骤：
1.输入网址打开网页
2.点击导航栏的Bootstrap3中文文档
3.点击下载，进入选择下载{用于生产环境的Bootstrap}
4.下载完成之后 解压之后就可以引入文件进行使用了
5.引入文件
需要引入Bootstrap框架的.css文件，引入jquery.js文件，引入bootstrap.js文件 共三个文件
根据自身文件路径 进行引入
同时 拷贝代码组 验证是否引入成功
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<title>05-boostrap初体验.html</title>
<!-- 1 引入 框架的css文件 -->
<link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.css" />
</head>
<body>
<!-- 4 拷贝一下 组件的代码 看一看有没有效果 -->
<div class="progress">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 60%"
>
<span class="sr-only">60% Complete</span>
</div>
</div>
<!-- 2 引入 jquery.js -->
<script src="./lib/jquery.js"></script>
<!-- 3 引入 bootstrap js 文件 -->
<script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>
2.使用Bootstrap做导航栏
利用框架 简单制作一个导航栏 根据自己喜欢的导航栏样式制作一个导航栏效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.css">
<title>导航栏</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid ">
<!-- 版心居中 无需自己封装代码 框架已经封装好了 直接使用类名即可 -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="./images/tubiao.png" alt="">
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">首页</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">生活用品</a></li>
<li><a href="#">护肤首选</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<script src="./lib/js/jquery.js"></script>
<script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>
效果图：（想要添加修改其他样式可自行修改，一些已经封装好的代码也可以去看看，直接使用）
三、栅格系统
1.栅格系统简介：
- 大屏幕 l g >1200 px 中屏幕md 992px - 1200 px
- 小屏幕 s m 768 - 992 px 极小屏幕 x s <768 px
- 先写一个容器
container-fluid 全屏宽度
1 .container(版心) 和 row写死
2 .row 再写一行
3 先想清楚在什么样的屏幕下 每一列占几份
栅格系统把屏幕一行分成12份 每一列占一份
注意：能清除父容器左右15px内边距的类是 row
2.栅格尝试案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>05-boostrap初体验.html</title>
<!-- 1 引入 框架的css文件 -->
<link
rel="stylesheet"
href="./lib/bootstrap-3.4.1-dist/css/bootstrap.css"
/>
<style>
.row > div {
box-shadow: 0px 0px 1px 1px black;
}
</style>
</head>
<body>
<!--
1 container 和 row 写死！
1 container-fluid 全屏宽度
2 container 版心
2 一行一共是12份 默认情况下 一列占一份
-->
<div class="container-fluid">
<div class="row">
<!--
只在lg 大屏幕下有效 有什么效果 一列占4份
没有在 md sm xs 下怎么放 （默认就是div div 分块显示！！ ）
lg 一列占4份
md 一列占6份
去观察别人如何设计的
1 什么宽度的屏幕下
2 一列占几份
-->
<div class="col-lg-4 col-md-6">1</div>
<div class="col-lg-4 col-md-6">2</div>
<div class="col-lg-4 col-md-6">3</div>
</div>
</div>
<!-- 2 引入 jquery.js -->
<script src="./lib/jquery.js"></script>
<!-- 3 引入 bootstrap js 文件 -->
<script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>
3.二次尝试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>07-栅格的尝试</title>
<link
rel="stylesheet"
href="./lib/bootstrap-3.4.1-dist/css/bootstrap.css"
/>
<style>
.row > div {
box-shadow: 0px 0px 1px 1px black;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">1</div>
<div class="col-lg-3 col-md-4 col-sm-6">2</div>
<div class="col-lg-3 col-md-4 col-sm-6">3</div>
<div class="col-lg-3 col-md-4 col-sm-6">4</div>
</div>
</div>
<script src="./lib/jquery.js"></script>
<script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>
较大屏幕会沿用较小屏幕栅格的设置
如果只设置较大屏幕的栅格，较小屏幕等于没设置栅格一样
如果只设置较小屏幕的栅格，比它大的屏幕都会沿用较小屏幕的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>08-较大屏幕会沿用较小屏幕栅格的设置</title>
<link
rel="stylesheet"
href="./lib/bootstrap-3.4.1-dist/css/bootstrap.css"
/>
<style>
.row > div {
box-shadow: 0px 0px 1px 1px black;
}
</style>
</head>
<body>
<!--
1 如果 我只设置了较大屏幕 的栅格， 较小屏幕的 相等于没设置栅格一样 一个列占一行
2 如果 我只设置了较小屏幕 的栅格，比它大的屏幕都会沿用较小屏幕的设置
1 col-xs-3 相当于
col-xs-3 = col-xs-3 col-sm-3 col-md-3 col-lg-3
2 col-md-3 = col-md-3 col-lg-3
-->
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
<script src="./lib/jquery.js"></script>
<script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>
三、布局的总结:
若有收获，就点个赞吧
0 人点赞
