什么是响应式布局?
响应式布局,指的是一个网站能够兼容多个终端,而不是为了一个终端做一个特定的版本,如下图所示:

响应式开发
1.1、响应式开发原理
响应式开发原理,指的就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。
设备划分 | 尺寸区间 |
超小屏幕(手机) | <768px |
小屏设备(平板) | >=768px ~ <992px |
中等屏幕(桌面显示器) | >=992px ~ <1200px |
宽屏设备(大桌面显示器) | >= 1200px |
1.2、响应式布局容器
响应式需要一个父级作为布局容器,来配合子级元素的大小和布局变化的效果。
它的原理就是在不同的屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
常规响应式的尺寸划分
屏幕类型 | 宽度值 |
超小屏幕(手机,小于768px) | 设置宽度为100% |
小屏幕(平板,大于等于768px) | 设置宽度为750px |
中等屏幕(桌面显示器,大于等于992px) | 宽度设置为970px |
大屏幕(大桌面显示器,大于等于1200px) | 宽度设置为1170px |
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应式布局</title> <style> .root-container { height: 100px; margin: 0 auto; background: red; } /* 1、超小屏幕(手机,小于768px) 设置宽度为100% max-width: 767px 表示<=767px */ @media screen and (max-width: 767px){ .root-container { width: 100%; } } /* 2、小屏幕(平板,大于等于768px) 设置宽度为750px min-width: 768px 表示 >= 768px */ @media screen and (min-width: 768px) { .root-container { width: 750px; } } /* 3、中等屏幕(桌面显示器,大于等于992px) 宽度设置为970px min-width: 992px 表示 >= 992px */ @media screen and (min-width: 992px){ .root-container { width: 970px; } } /* 4、大屏幕(大桌面显示器,大于等于1200px)宽度设置为1170px min-width: 1200px 表示 >= 1200px */ @media screen and (min-width: 1200px){ .root-container { width: 1170px; } } </style> </head> <body> <!-- 通过媒体查询来检测当前屏幕不同的宽度,然后来改变容器的大小即可 --> <!-- 响应式开发里面,首先需要一个布局容器 --> <div class="root-container"> </div> <table border="1" style="margin-top: 20px"> <thead> <th colspan="2">常规响应式的尺寸划分</th> </thead> <tbody> <tr><td>屏幕类型</td><td>宽度值</td></tr> <tr><td>超小屏幕(手机,小于768px)</td><td>设置宽度为100%</td></tr> <tr><td>小屏幕(平板,大于等于768px)</td><td>设置宽度为750px</td></tr> <tr><td>中等屏幕(桌面显示器,大于等于992px)</td><td>宽度设置为970px</td></tr> <tr><td>大屏幕(大桌面显示器,大于等于1200px)</td><td>宽度设置为1170px</td></tr> </tbody> </table> </body> </html>
示例图:

案例:响应式导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应式导航</title> <style> * { padding: 0; margin: 0; } .root-container { width: 750px; margin: 0 auto; } .root-container ul { height: 100%; } .root-container ul li { width: 12.5%; height: 50px; float: left; list-style: none; text-align: center; line-height: 50px; color: white; background: darkblue; } .root-container ul li:hover { background: darkcyan; color: darkblue; } /* max-width: 767px 表示<=767像素(<768px) */ @media screen and (max-width: 767px) { .root-container { width: 100%; } .root-container ul li { width: 33.33%; } } </style> </head> <body> <!-- 需求分析: 1、当屏幕大于等于768px时,我们给布局root-container的宽度设置为750px 2、root-container 里面包含8个小盒子,每个盒子的宽度为 12.5% (100/8 = 12.5),高度为50像素,浮动显示 3、当屏幕的宽度小于 768像素时,root-container的宽度为100% 4、此时里面有8个li,宽度修改为33.33%,这样一行就只能显示3个li标签,剩余部分换行显示 --> <div class="root-container"> <ul> <li>导航一</li> <li>导航二</li> <li>导航三</li> <li>导航四</li> <li>导航五</li> <li>导航六</li> <li>导航七</li> <li>导航八</li> </ul> </div> </body> </html>
效果图:

Bootstrap前端开发框架
Bootstrap简介
Bootstrap来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和Javascript的,它简洁灵活,使用web 开发更加快捷。
Bootstrap通过CDN的方式引入并使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 第一步、引入bootstrap相关链接 --> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> </head> <body> <!-- 第二步、使用bootstrap中的组件 --> <div class="alert alert-success" role="alert">这是警告框</div> </body> </html>
效果图:

Bootstrap组件介绍
Bootstrap布局容器
Bootstrap需要为页面内容和栅格系统包裹一个布局容器,而Bootstrap预先定义好了这个类,类名为 .container
1、container类选择器
.container 是响应式的布局容器,它的宽度是固定的 ,具体类型和宽度如下:
类型 | 宽度 |
大屏(>=1200px) | 宽度定位1170px |
中屏(>=992px) | 宽度定位970px |
小屏(>=768px) | 宽度定位750px |
超小屏 | 宽度定位100% |
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 第一步、引入bootstrap相关链接 --> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> </head> <body> <!-- 第二步、使用bootstrap中的布局容器(.container) --> <div class="container"> 我是Bootstrap中的布局容器 </div> </body> </html>
效果图 :

container类选择器默认的样式如下:
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

2、container-fluid类选择器
.container-fluid是流式布局容器,它的宽度是100%,也就是百分比布局,它会占据全部视口(viewport)容器,该类选择器适合做移动端开发。
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 第一步、引入bootstrap相关链接 --> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <style> .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } </style> </head> <body> <!-- 第二步、使用bootstrap中的流体布局容器(.ontainer-fluid) --> <div class="container-fluid"> 我是Bootstrap中的流体布局容器 </div> </body> </html>
效果图如下:

Bootstrap栅格系统
栅格系统,也称 “网格系统”,它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列