一套代码可以兼容不同的屏幕设备。响应式网页就是在大屏里看是一种布局，在小一点的屏幕看又是另一种布局，在更小的屏幕看又换了一种布局。如图所示：

一、媒体查询

作用：根据条件的不同，设置不同的css样式。

1、写法1

min-width（从小到大），max-width（从大到小）

<!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"><title>Document</title><style>/* 视口宽度小于等于768px， 网页背景色是粉色 */@media (max-width: 768px) {body {background-color: pink;}}/* 视口宽度大于等于1200px， 网页背景色是skyblue */@media (min-width: 1200px) {body {background-color: skyblue;}}</style>
</head>
<body></body>
</html>

2、写法2

外链式CSS引入

<!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"><title>Document</title><!-- 视口宽度 >= 992px，网页背景色为粉色 --><!-- 视口宽度 >= 1200px，网页背景色为绿色 --><link rel="stylesheet" href="./one.css" media="(min-width: 992px)"><link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
</head>
<body></body>
</html>

3、隐藏

市面上，电商站做响应式页面是用了隐藏内容的。

<!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"><title>Document</title><style>* {margin: 0;padding: 0;}.box {display: flex;width: 100%;}.left {width: 300px;min-height: 500px;background-color: pink;}.main {flex: 1;min-height: 500px;background-color: skyblue;}/* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */@media (max-width: 768px) {.left {display: none;}}</style>
</head>
<body><div class="box"><div class="left">left</div><div class="main">响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果</div></div>
</body>
</html>

二、Bootstrap

bootstrap里面是封装好的代码，有做响应式页面的功能；里面有base.css

UI框架概念：将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。

作用：基于框架开发，效率高，稳定性高。

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: https://www.bootcss.com/

Bootstrap不仅封装了css，还有html，js。

1、Bootstrap的使用

先下载，再用。有dist的是框架，没有dist的是源码。

使用步骤：先引入css样式表，然后调用类名。

bootstrap.css和bootstrap.min.css是一样的，只是有min的那个代码压缩到了同一行。做项目，且不改里面的代码的时候，用min的那个，这样加载快，省流量。

container：响应式布局版心类

<!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"><title>BootStrap使用方法</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>div {height: 50px;background-color: pink;}</style>
</head>
<body><div class="container">1</div>
</body>
</html>

2、Bootstrap栅格系统

栅格系统：把网页等分成12等份，每个内容占12份中的份数。

栅格化是指将整个网页的宽度分成若干等份。

BootStrap3默认将网页分成12等份。

BootStrap3将所有屏幕分为4类。下图中的 * 代表占的份数。768，992，1200这几个数要记下来，类前缀也要记下来。

在下面的代码中，col-lg-这些类前缀代码里面是写了浮动的，这样就可以在一行了。

<!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"><title>栅格系统</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>.container div {height: 50px;background-color: pink;}</style>
</head>
<body><!-- 需求: 大屏: 一行排列4个内容; 中屏:一行排列2个内容 --><div class="container"><div class="col-lg-3 col-md-6">1</div><div class="col-lg-3 col-md-6">2</div><div class="col-lg-3 col-md-6">3</div><div class="col-lg-3 col-md-6">4</div></div></body>
</html>

Bootstrap框架的作用:布局响应式网页。里面的间距padding，margin这些都是写的15px，如果不想要这个间距，可以自己写css，也可以用.row类，.row类带有-15px的间距

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。左右有15px的padding

.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。，左右有15px的padding。

1. container类自带间距15px;

2. row类自带间距-15px

<!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"><title>栅格系统-类</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>div {height: 50px;background-color: pink;margin-bottom: 50px;}</style>
</head>
<body><!-- 版心样式:自带左右各15px的padding --><div class="container">1</div><!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 --><div class="container"><div class="row">2</div></div><!-- 宽度100%:自带左右各15px的padding --><div class="container-fluid">3</div>
</body>
</html>

3、全局样式

可以在网站上去看全局样式、组件、插件。

全局css就是控制单独标签的样式的。

组件：在网页中有导航、下拉菜单、有分页效果、有搜索功能等，这些区域的功能的css在组件里。

Js插件：交互效果。

在这些里面复制粘贴以后，改成自己想要的。

定制：这个框架也不可能满足项目的所有要求，在定制页面输入自己的，重新生成一份框架。

BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。、

网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类。

举例子：

在全局样式中，单击表格：

原本的代码和运行效果如图所示：

<!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"><title>全局CSS样式-表格</title></head>
<body><table><tr><th>数字1</th><th>数字2</th><th>数字3</th></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></table></body>
</html>

在框架中复制出类名，加上：

<!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"><title>全局CSS样式-表格</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body><table class="table table-striped"><tr><th>数字1</th><th>数字2</th><th>数字3</th></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></table></body>
</html>

table是基本样式的类名，后面的那些类名都是table-XX，table-XX都是在table类加上以后添加的。

4、组件

使用方法：先引入BootStrap样式，再复制结构，修改内容。

引入字体图标：Glyphicons字体图标的使用步骤：

HTML页面引入BootStrap样式文件；

准备字体文件 (注意路径)；

空标签调用对应类名：glyphicon和图标类。（官网手册里面就已经有两个类名了）

<!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"><title>字体图标</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body><i class="glyphicon glyphicon-user"></i>
</body>
</html>

5、插件

封装了html,css为一体，可以让网页有交互效果。

插件的使用步骤：

1、引入BootStrap样式；

2、引入js文件：jQuery.js + BootStrap.min.js（引入的是两个js文件，且有先后顺序，jQuery必须在前面）

3、复制HTML结构, 并适当调整结构或内容。

<!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"><title>Document</title><link rel="stylesheet" href="./02-bootstrap基本使用/bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body><div class="dropdown"><button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown trigger<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dLabel"><li>1</li><li>1</li><li>1</li></ul></div><script src="./02-bootstrap基本使用/js/jquery.js"></script><script src="./02-bootstrap基本使用/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

CSS——响应式网页(Bootstrap)相关推荐

css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
重学前端，万字入门 HTML+CSS+响应式网页设计
响应式网页设计认证 | freeCodeCamp.org 观前提醒:擅用 Ctrl+F,笔记不求详细,但求理解,部分难以理解的内容我给了实例或者文档的链接,还有一些我推荐的小游戏,希望能给个三连
响应式布局——Bootstrap
二.BootStrap 1.1 BootStrap简介目标:使用BootStrap框架快速开发响应式网页 Bootstrap是由Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样 ...
响应式布局（响应式网页的构成bootstrap框架）
一.响应式布局 1.概念响应式又叫自适应网页,可以根据网页窗口的调整而自动布局,不会导致页面效果的错乱,主要是针对移动端浏览器:通过响应式布局,可以使一套代码同时兼容多个尺寸的屏幕 2.响应式网页的 ...
html大作业网页代码——电竞游戏介绍响应式网页(7页) HTML+CSS+JavaScript
HTML5期末大作业:电竞游戏网站设计--电竞游戏介绍响应式网页(7页) HTML+CSS+JavaScript 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
零基础Bootstrap入门教程(4)--开发标准的响应式网页
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 创建标准HTML5页面 3. 添加响应式内容 4. 小结 1. 背景响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页, ...
Bootstrap写一个简单的响应式网页
响应式网页响应式网页设计采用css的媒体查询技术,将包括弹性布局,弹性图片.媒体和媒体查询整合在一起,为响应式网页设计. 页面会随着窗口的尺寸变化做出相应的改变. 视口是浏览器显示的内容区域,不包括 ...
响应式网页设计工具：Bootstrap Studio for Mac
未来软件园为大家推荐一款可以快速进行响应式网站设计的Mac软件,Bootstrap Studio为大家提供了大量内置组件,使得大家只需要通过拖放方式就可以组装响应式网页,十分方便.Bootstrap ...
Bootstrap 框架响应式网页开发
Bootstrap Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定 HTML 结构及JavaScript,快速编写功能 ...
HTML5期末大作业：美食主题网站设计——美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:美食主题网站设计--美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品常见网 ...

CSS——响应式网页(Bootstrap)