1. 背景

响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页，本篇就来讲解下如何使用Bootstrap构建符合标准规范的响应式网页。

2. 创建标准HTML5页面

首先创建一个标准的HTML5网页，代码如下：

<!DOCTYPE html>
<html><head><title>boostrap-responsive</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1">
</head><body>
</body></html>

注意其中<!DOCTYPE html>是为了告诉浏览器，当前文档是HTML5文档。

<meta http-equiv="X-UA-Compatible" content="IE=edge">告诉IE浏览器，以尽可能高的仿真版本显示当前网页。所谓仿真版本，指的是IE浏览器可以仿照运行的其他版本的IE，如下图：

<meta name="viewport" content="width=device-width,initial-scale=1">改行代码则指示了页面的初始宽度为设备宽度，初始缩放比例为100%，这样的话能支持网页在屏幕较小但DPI较高的设备(例如iPhone)上正确显示。

3. 添加响应式内容

首先添加对Bootstrap支持。


<head><title>boostrap-responsive</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- 引入jQuery --><script src=" https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>

注意Bootstrap对响应式的支持，是通过控制网格列在不同容器宽度下占据不同的列数来实现的。

当浏览器容器宽度小于768像素时，Bootstrap会采用.col-xs-开头的列。
当浏览器容器宽度处于[768,992)是，将采用.col-sm-开头的列。
当浏览器容器宽度处于[992,1200)是，将采用.col-md-开头的列。
当浏览器容器宽度大于1200是，将采用.col-lg-开头的列。

注意上面四个宽度尺寸，实际上对应的是手机、平板、小型PC显示器、大型PC显示器，但是随着显示设备的发展，目前这样的预设已经不再精准，需要根据实际情况来具体设置。

好的，有了上面的理论基础，我们来实现一个可以同时支持电脑显示器和手机显示器的网页，代码如下：

<body><div class="container-fluid"><div class="row"><div class="col-sm-12 col-md-3"><img src="bootstrap-logo.jpg" /></div><div class="col-sm-12 col-md-3"><img src="bootstrap-logo.jpg" /></div><div class="col-sm-12 col-md-3"><img src="bootstrap-logo.jpg" /></div><div class="col-sm-12 col-md-3"><img src="bootstrap-logo.jpg" /></div></div></div>
</body>

按照上面的设置，当屏幕尺寸较大时，会采用.col-md-3的列显示方式，所以每个图片会占据3/12容器宽度，效果如下：

而当屏幕尺寸较小时，会采用.col-sm-12的列显示方式，所以每个图片会占据12/12，即全部的容器宽度，效果如下：

4. 小结

Bootstrap实现响应式网页的方式十分简洁优雅，用同一套代码，就能支持各类不同分辨率的设备，优秀！

零基础Bootstrap入门教程(4)--开发标准的响应式网页相关推荐

零基础Bootstrap入门教程(0)--教程背景与目录
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
零基础Bootstrap入门教程(26)–轮播的实现
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 基本轮播 3. 添加轮播指示器 4. 添加轮播控件 5. 小结 1. 概述要想从头到尾来实现一个比较好看且稳定的轮播控件,还是有一定难 ...
零基础Bootstrap入门教程(9)--使用表单控件
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 基本输入控件 3. 调整表单控件的大小 4. 表单控件的特殊用法 4.1 单选框用法 4.2 复选框用法 5. 小结 1. 概述表单控 ...
零基础Bootstrap入门教程(16)--模态框
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 模态框样式 3. 按钮直接关联模态框 4. 通过JS方法打开/关闭模态框 5. 调整大小 6. 动画效果 7. 小结 1. 概述模态框 ...
零基础Bootstrap入门教程(25)--折叠面板、折叠面板导航
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 折叠面板 3. 折叠面板导航 4. 小结 1. 概述上一篇我们讲述了折叠插件的用法,可以将任意的div元素包含的内容进行动态的折叠/显 ...
零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...
零基础SSM入门教程(0)--教程背景与目录
点此查看零基础JavaWeb全栈文章目录及源码下载 1. 背景本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...
零基础CSS入门教程(1)–初识CSS
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
取得数组下标_《零基础C++入门教程》——（8）搞定二维数组与循环嵌套
一.学习目标了解二维数组的使用方法了解循环嵌套的使用方法目录预备第一篇,使用软件介绍在这一篇,C++与C使用的软件是一样的,查看这篇即可:<零基础看得懂的C语言入门教程>--(二) ...

零基础Bootstrap入门教程(4)--开发标准的响应式网页

本文目录

1. 背景

2. 创建标准HTML5页面

3. 添加响应式内容

4. 小结

零基础Bootstrap入门教程(4)--开发标准的响应式网页相关推荐

最新文章

热门文章