HTML5+CSS3+Bootstrap响应式Web前端设计（慕课版）（第2版） 课件 第06章 响应式设计与Bootstrap

第6章响应式设计与BootstrapWeb前端技术学习目标/Target了解Bootstrap的概念掌握Bootstrap的下载和环境安装掌握使用媒体查询进行响应式设计的方法学习目标/Target掌握Bootstrap表单、按钮和其它组件的使用熟悉Bootstrap辅助样式的使用掌握Bootstrap布局容器的使用章节概述/Summary在本章将会使用一个工具来让响应式变得容易实现，它就是Bootstrap。Bootstrap为大多数标准的UI设计场景提供了用户友好、跨浏览器的解决方案，提高了前端开发的工作效率。本章将针对如何使用Bootstrap进行响应式Web设计进行详细讲解。目录/Contents030402Bootstrap框架概述Bootstrap的下载和环境安装媒体查询01响应式设计概述目录/Contents0607Bootstrap样式Bootstrap常用组件08【项目】轮播图/PC端登录05Bootstrap布局容器响应式设计概述6.1开发者在搭建网站时，需要兼顾电脑端和移动端用户。台式机或笔记本电脑的显示器宽度大于或等于1024px。处理方案：制作一个宽度固定为960px的页面。弊端：移动设备得到的是按比例缩小的屏幕，通过放大、缩小和左右滚动才能完全浏览页面。常用的响应式布局框架：Bootstrap，foundation,MaterialDesignforBootstrap(MDB)…15个优秀的响应式CSS框架-腾讯云开发者社区-腾讯云()必要性响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。定义视口，即viewport，是指浏览器窗口内的内容区域，不包含工具栏、标签栏等区域，也就是网页实际显示的区域。问题：设备不同，如台式机、平板电脑、手机方案：1024px对应桌面768px对应pad480px对应手机问题：屏幕尺寸多种多样方案：需要确定一个区间值，设计师需要寻找一个临界点—即当视觉效果开始不符合人们的审美或影响了内容获取时对应的值，这个临界点才是响应式设计中的断点。定义视口可以通过一个名称为viewport的元（meta）标签来进行控制，其基本规则如下：其中，视口设置中几个常用关键词的含义如下：width:控制viewport的大小，可以指定一个值或字符串“device-width”。device-width为设备的实际宽度。height:和width相对应，指定高度。initial-scale:初始缩放比例。<metaname="viewport"content="width=device-width,initial-scale=1">视口响应式网站要针对各种不同屏幕尺寸的设备进行测试，大多数测试可以通过改变浏览器窗口的大小来完成。也可以通过第三方插件和浏览器扩展功能将浏览器窗口或视口设定为指定像素来测试。下图所示网页为例，当浏览器宽度大于768像素时，网页中菜单项完整显示，图片呈四列并排显示。设计案例演示示例：设计案例当浏览器宽度小于768像素时，菜单项被隐藏，显示菜单图标。左图所示，网页布局中图片呈两列并排显示。右图为模拟手机端测试结果。设计案例媒体查询6.2CSS3引入了媒体查询。媒体查询打破了独立样式表，通过一些条件查询语句来确定目标样式，从而控制同一个页面在不同尺寸的设备浏览器中呈现出与之适配的样式，使浏览者在不同的设备下都能得到理想的体验。目前媒体查询已经被浏览器广泛支持。媒体查询1.媒介查询的一般结构：媒体查询以@media开头，利用and|not|only这些逻辑关键字把媒介类型和条件表达式串联起来形成布尔表达式，判断是否满足当前浏览器的运行环境。如果满足，则上面的styles部分的样式就会起作用，进而改变页面元素的样式，否则，页面效果不产生任何变化。@mediamediatypeand|not|only(mediafeature){ CSS-Code;}媒体查询2.环境参数媒体类型只能识别显示设备的类型，还需要针对运行设备监测环境参数，比如长宽或分辨率等，下面列举了一些常用的参数：max-width:定义输出设备中的页面最大可见区域宽度min-width:定义输出设备中的页面最小可见区域宽度orientation:设备的方向，portrait和landscape分别表示竖直和水平resolution:设备的分辨率，以dpi(DotsPerInch)或者dpcm(DotsPerCentimeter)表示媒体查询3.条件表达式条件表达式用来判断设备环境参数，从而确定相应的显示方法，例如：表示当屏幕设备宽度小于960px时，屏幕设备的背景色将被设为红色，其中and关键字用来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式。@mediascreenand(max-width:960px){ body{background-color:red;}}媒体查询将下面示例的这段代码插入到css文件的后面，会使页面背景色在改变浏览器窗口大小时发生改变。

@mediascreenand(max-width:960px){ body{background-color:red;} } @mediascreenand(max-width:768px){ body{background-color:orange;} } @mediascreenand(max-width:550px){ body{background-color:yellow;} } @mediascreenand(max-width:320px){ body{background-color:green;} }媒体查询举例（media-background-color.html）浏览该示例时，调整浏览器窗口宽度，页面背景颜色就会根据当前视口尺寸变化而变化。浏览器最大化时，如果宽度超过960px，背景为浏览器默认色，一般为白色；尝试更改视口宽度为768px到960px之间，背景变为红色；缩小视口宽度范围550px到768px之间，背景为桔色；缩小视口宽度范围550px到320px之间，背景为黄色，继续缩小视口宽度范围320px以内，背景为绿色，如下图所示：视口小于550px时背景黄色视口小于320px时背景绿色举例（media-background-color.html）媒体查询4.逻辑关键字（1）andand将多个媒体属性连接成一条媒体查询，只有当每个属性都为真时，结果才为真，等同逻辑运算符中的“且”条件。（2）notnot用来对一条媒体查询的结果进行取反，等同逻辑运算符中的“非”条件。上面代码针对非手持且彩色设备应用系列样式。@medianothandheldand(color){…}媒体查询（3）onlyonly仅在媒体查询匹配成功的情况下被用于应用一个样式

当视口宽在320px~350px范围时，应用系列样式。

（4）逗号分隔列表逻辑媒体查询中使用逗号分隔效果等同于or逻辑操作符。当任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。@mediaonlyscreenand(min-width:320px)and(max-width:350px){…}媒体查询例如，如果想在最小宽度为320px或是横屏的手持设备上应用样式，代码如下：其中，handheldand(orientation:landscape)横屏手持设备，min-width:320px表示最小宽度值。如果是一个800像素宽的屏幕设备，媒体语句将会返回真，如果是500像素宽的横屏手持设备，媒体查询返回也会为真。@media(min-width:320px),handheldand(orientation:landscape){…}在媒体查询中如果没有明确指定MediaType，那么其默认为all媒体查询5.常用引用方式作为CSS的media属性，其引用方式分为内嵌方式和外联方式。（1）内嵌方式内嵌方式是将媒介查询的样式和通用样式写在一起，比如我们要在宽度超过320px的情况下为链接加上下划线，如下面代码所示。注意：媒介查询需要声明在普通样式后面，否则声明将不会起作用。a{text-decoration:none;}@mediascreenand(min-width:320px){a{text-decoration:underline;}}媒体查询（2）外联方式CSS属性外联方式使用link标记，带有媒介查询的外联方式也不例外，如下面代码所示。如果使用这种方式，那么在media-handheld.css中，我们就可以直接声明CSS样式了：外联引入方式是源码和属性值分开写，与内嵌方式相比，代码更加简洁清晰。<linkhref="media-handheld.css"media="onlyscreenand(min-width:320px)"/>a{text-decoration:underline;}媒体查询尝试利用媒体查询，结合本次动手实验的素材，搭配合适的样式属性，设计出如下组图片所示的简易响应式网页。难点分析：正确使用媒体查询参数与表达式。灵活运用浮动进行网页布局设计。随堂练习（1）唐诗八首屏幕宽度在640px以内的页面效果屏幕宽度在960px以上的页面效果屏幕宽度在640px~960之间的页面效果演示示例：唐诗八首Bootstrap框架概述6.3Bootstrap来历：它是由Twitter公司的设计师开发的一个前端开源框架，它于2011年8月在GitHub上发布。Bootstrap框架：它是基于HTML、CSS和JavaScript等前端技术实现的，它预定义了一套CSS样式。Bootstrap框架应用：我们只需提供固定的HTML结构，并添加Bootstrap中提供的class名称，即可达到指定的效果。课件中示例使用的是Bootstrap的4.6.x版本，目前最新版是5.3.0。6.3.1什么是BootstrapBootstrap框架中提供的内容如下。基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。CSS：Bootstrap自带全局的CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的栅格系统。布局组件：创建图像、下拉菜单、导航、警告框、弹出框的组件等等。图标库：开源的图标库，格式为SVG，能够轻松快捷地进行缩放，并可以通过CSS设置样式。JavaScript插件：例如，模态框（Model）插件、下拉菜单插件、滚动监听插件等。定制：开发人员可以自由定制Bootstrap的组件、Sass变量和jQuery插件来得到一套自定义的版本，提高了开发的灵活性。6.3.1什么是BootstrapBootstrap的优势6.3.2Bootstrap的优势移动设备优先：移动设备优先的样式贯穿于整个库。浏览器支持：主流浏览器都支持Bootstrap。学习成本低，容易上手：具备HTML和CSS和JavaScript的基础知识。响应式设计：Bootstrap框架的栅格系统，能够自适应于台式机、平板电脑和手机的屏幕大小。良好的代码规范：Bootstrap为开发人员创建接口提供了一个简洁统一的解决方案，减少了测试的工作量，使开发人员站在巨人的肩膀上，不重复造轮子。组件：Bootstrap包含了功能强大的内置组件。Bootstrap的下载和环境安装6.46.4.1Bootstrap的下载方式访问Bootstrap的官方网站或者中文网站，单击“Download”按钮，进入下载页面。Bootstrap官网首页进入官网Bootstrap中文网V4版本首页6.4.2下载Bootstrap预编译文件Bootstrap中文网方式一：下载预编译文件单击下载6.4.2下载Bootstrap预编译文件软件包中的内容解压后6.4.2下载Bootstrap预编译文件在HTML中引入预编译的Bootstrap的核心CSS和JavaScript文件。<!--引入Bootstrap核心CSS文件--><linkrel="stylesheet"href="css/bootstrap.min.css"><!--JavaScript文件是可选的。从以下两种建议中选择一个即可！--><!--选项1：jQuery和Bootstrap集成包（集成了Popper）--><scriptsrc="js/jquery.slim.min.js"></script><scriptsrc="js/bootstrap.bundle.min.js"></script><!--选项2：Popper和Bootstrap的JS插件各自独立--><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/popper.min.js"></script><scriptsrc="js/bootstrap.min.js"></script>因为Bootstrap的一些插件需要用到JQuery的支持，因此我们也需要包含JQuery的相关内容。CDN的全称是ContentDeliveryNetwork，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。Bootstrap中文网联合国内CDN服务商共同为Bootstrap专门构建了免费的CDN加速服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。BootstrapCDN还为大量的前端开源工具库提供了CDN加速服务。直接在网页中加入对CDN的引用即可。6.4.3使用CDN加载Bootstrap方式二：使用CDN6.4.3使用CDN加载Bootstrap方式二：使用CDN<!--Bootstrap4核心CSS文件--><linkrel="stylesheet"href="/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"crossorigin="anonymous"><!--Bootstrap4核心JavaScript文件--><scriptsrc="/npm/jquery@3.5.1/dist/jquery.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc="/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04"crossorigin="anonymous"></script>在使用CDN加载引用文件时，通常选择带有min的文件，这是因为带有min的JavaScript和CSS文件是经过压缩之后的文件，体积比较小。6.4.3使用CDN加载Bootstrap小提示6.4.4建立第一个Bootstrap页面1.添加HTML5DOCTYPEBootstrap要求使用HTML5文件类型，所以需要添加HTML5DOCTYPE声明。如果在Bootstrap创建的网页开头不使用HTML5的文档类型（DOCTYPE），可能会面临一些浏览器显示不一致的问题，或者一些特定情境下的不一致，导致代码不能通过W3C标准的验证。<!DOCTYPEhtml><html>……</html>6.4.4建立第一个Bootstrap页面2.移动设备优先为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之间添加viewportmeta标签，如下所示。其中，width属性控制设备的宽度。当网站被带有不同屏幕分辨率的设备浏览，那么把它设置为device-width可以确保它能正确呈现在不同设备上。initial-scale=1.0确保网页加载时，以1:1的比例呈现，不会有任何的缩放。<metaname="viewport"content="width=device-width,initial-scale=1">3.在页面中引入编译好的CSS和JavaScript文件<head><linkhref="css/bootstrap.min.css"rel="stylesheet"><!--引入Bootstrap核心CSS文件--><scriptsrc="js/jquery.min.js"></script><!--Bootstrap的JavaScript插件需要引入jQuery--><scriptsrc="js/popper.min.js"></script><!--用于弹窗、提示、下拉菜单--><scriptsrc="js/bootstrap.min.js"></script><!--包括所有已编译的插件--></head><body></body><scriptsrc="js/bootstrap.bundle.min.js"></script>6.4.4建立第一个Bootstrap页面6.4.4建立第一个Bootstrap页面4.容器类Bootstrap需要一个容器元素来包裹网站的内容。我们可以使用以下两个容器类：.container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。例如：<divclass="container">...</div>演示示例：第一个Bootstrap页面改变浏览器窗口大小，我们会发现页面显示内容随窗口缩放发生了变化，以适应不同浏览器视口尺寸。6.4.4建立第一个Bootstrap页面

<!DOCTYPEhtml><html><head><title>第一个Bootstrap页面</title><metacharset="utf-8">

<metaname="viewport"content="width=device-width,initial-scale=1"><linkhref="css/bootstrap.min.css"rel="stylesheet"><!--引入Bootstrap核心CSS文件--><scriptsrc="js/jquery.min.js"></script><!--Bootstrap的JavaScript插件需要引入jQuery--><scriptsrc="js/popper.min.js"></script><!--用于弹窗、提示、下拉菜单--><scriptsrc="js/bootstrap.min.js"></script><!--包括所有已编译的插件--></head><body>演示示例：第一个Bootstrap页面6.4.4建立第一个Bootstrap页面<divclass="jumbotrontext-center"><h1>我的第一个Bootstrap页面</h1><p>改变浏览器大小查看效果!</p></div><divclass="container"><divclass="row"><divclass="col-sm-4"><h3>第一列</h3><p>bootstrap</p></div><divclass="col-sm-4"><h3>第二列</h3><p>bootstrap</p></div><divclass="col-sm-4"><h3>第三列</h3><p>bootstrap</p></div></div></div></body></html>演示示例：第一个Bootstrap页面如何提高页面的加载速度：在HTML代码的末尾处引入JavaScript文件。Bootstrap的JavaScript插件依赖于jQuery，因此在加载这些插件前需要先行去加载jQuery。JavaScript文件的加载顺序依次为jquery-3.5.1.slim.min.js、bootstrap.bundle.min.js。其中，jquery-3.5.1.slim.min.js是Bootstrap4官网使用的简化版的jQuery文件，相比普通版本缺少了Ajax和特效模块。6.4.4在HTML中引入Bootstrap小提示Bootstrap布局容器6.56.5.1初识布局容器布局容器：是Bootstrap中最基本的布局元素，在使用默认网格系统时，布局容器是必需的。作用：它用于容纳、填充一些内容，以及有时需要使内容居中。布局容器包含：.container类和.container-fluid类。在前面讲解的内容中，媒体查询需要使用@media关键字检测设备的宽度变化。在Bootstrap中，我们不需要编写媒体查询的代码，而是使用一些内置的类名，用来检测不同的设备的宽度。6.5.1初识布局容器.container类和.container-fluid类布局容器区别：这两种容器类最大的不同之处在于宽度的设定。.container类可以根据屏幕宽度的不同，利用媒体查询设定固定的宽度，当浏览器窗口大小改变时，页面效果也会随之发生改变。.container-fluid类在不同设备下始终保持宽度为100%，如果一个元素需要占据全部视口时可以使用.container-fluid类。1它在每个响应断点处设置了一个max-width最大宽度.container容器2它在每个响应断点处设置布局容器的宽度为100%.container-fluid容器STEP016.5.1初识布局容器.container类和.container-fluid类在不同设备宽度下页面元素的显示效果新建demo01.html文件，编写HTML代码。<!DOCTYPE

html><html><head>

<meta

charset="UTF-8">

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0,shrink-to-fit=no">

<link

rel="stylesheet“

href="css/bootstrap.min.css">

<title>布局容器</title></head><body>

<div

class="container-fluid

bg-dark

text-light

mb-1">.container-fluid设置布局容器</div>

<div

class="container

bg-dark

text-light">.container设置布局容器</div></body></html>布局容器STEP02运行程序在浏览器中查看demo01.html文件运行效果。6.5.1初识布局容器演示示例：布局容器

先定一个小目标！了解栅格系统，能够说出栅格系统的作用，能够列举栅格系统的类前缀6.5.2栅格系统6.5.2栅格系统栅格系统：是一个基于12列的布局，它具有的5种响应尺寸分别对应不同的屏幕大小。栅格系统作用：通过一系列的行（row）与列（column）的组合来创建页面布局。建议：开发者可以将内容放入这些创建好的布局中，并且会根据父元素盒子（布局容器）尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。响应式栅格系统例如，在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。栅格系统基本使用步骤栅格系统基本使用步骤：Bootstrap栅格系统为不同屏幕宽度定义了不同的类，使用非常方便，直接为元素添加类名即可。行使用样式

.row，列使用样式

.col-*-*，可用于快速创建网格布局。每一行（row）必须包含在布局容器.container类或.container-fluid类中，这样方便为其自动设置外边距（margin）和内边距（padding）。通过行可以创建水平方向的列组，并且只有列（column）可以作为行（row）的直接子元素。例如，可以使用3个.col-xs-4来创建3个等宽的列。内容只能放置于列内，列大于12时，将会另起一行排列。6.5.3栅格基本使用网格系统通过指定横跨的12个可用的列来创建，例如：要创建三个相等的列，则可使用三个.col-*-4。我们也可以根据自己的需要，定义列数，如下所示：1111111111114444866126.5.3栅格基本使用6.5.2栅格系统超小屏幕(<576px)小屏幕(≥576px)中等屏幕(≥768px)大屏幕(≥992px)超大屏幕(≥1200px).container最大容器宽度自动（100%）540px720px960px1140px类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-栅格系统的类前缀栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-*、.col-sm-*、.col-md-*、.col-lg-*和.col-xl-*类名。当同时使用这些类的时候，它会根据当前屏幕的大小来使相应的类生效，实现在不同屏幕下展示不同的页面结构。通过类前缀设置每列的宽度6.5.3栅格基本使用col-栅格的数量(设置超小设备);col-sm-栅格的数量(设置平板);col-md-栅格的数量(设置桌面显示器);col-lg-栅格的数量(设置大桌面显示器);col-xl-栅格的数量(设置超大桌面显示器);由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。如何利用上面的类来控制列的宽度以及在不同设备上的显示呢？我们来看先创建一行（<divclass="row">），然后在这一行内添加需要的列（col-*-*类中设置）。第一个星号（*）表示响应的设备：sm,md,lg或xl，第二个星号（*）是一个数字，表示占据的列数，同一行的数字相加最大12。 <divclass="row"> <divclass="col-*-*"></div> </div> <divclass="row"> <divclass="col-*-*"></div> <divclass="col-*-*"></div> <divclass="col-*-*"></div> </div>6.5.3使用类前缀设置列的宽度案例：不同的屏幕下设置不同的列的宽度<head>

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0">

<link

rel="stylesheet"

href="css/bootstrap.min.css"><style></style></head><body>

<div

class="container">

<div

class="row">

<div

class="col-sm-6

col-md-3">第一列</div>

<!--省略其他两列-->

</div>

</div></body>6.5.3使用类前缀设置列的宽度编写HTML结构<style>

.row

{background-color:

#eee;}

.col-sm-6

{

background-color:

#eee;

border:

1px

solid

#fff;

text-align:

center;

font-size:30px;

}</style>6.5.3使用类前缀设置列的宽度编写CSS样式代码平板设备平板设备下页面效果。桌面显示器使用鼠标拖动，放大浏览器窗口至桌面显示器，页面网格会变成四列。6.5.3使用类前缀设置列的宽度演示示例：布局（1）等宽列

下面示例演示了如何在不同设备上显示等宽度的响应式列<divclass="container"style="border:1pxsolidblack"><divclass="row"><divclass="col-sm-3"style="border:1pxsolidblack">col-sm-3</div><divclass="col-sm-3"style="border:1pxsolidblack">col-sm-3</div><divclass="col-sm-3"style="border:1pxsolidblack">col-sm-3</div><divclass="col-sm-3"style="border:1pxsolidblack">col-sm-3</div></div></div>6.5.3使用类前缀设置列的宽度举例（column-equal.html）当设备屏幕宽度大于576px时，四个等宽列会显示在一行内，如下所示。在移动设备上，即屏幕宽度小于576px时，四个列将会上下堆叠排版。如下所示。举例（column-equal.html）6.5.3使用类前缀设置列的宽度（2）非等宽列<divclass="container"style="border:1pxsolidblack"><divclass="row"><divclass="col-sm-3"style="border:1pxsolidblack">col-sm-3</div><divclass="col-sm-3"style="border:1pxsolidblack">col-sm-3</div><divclass="col-sm-6"style="border:1pxsolidblack">col-sm-6</div></div></div>6.5.3使用类前缀设置列的宽度举例（column-not-equal.html）当设备屏幕宽度大于576px时，三个不等宽列会显示在一行内。如下所示。在移动设备上，即屏幕宽度小于576px时，三个列会上下堆叠排版。如下所示。举例（column-not-equal.html）6.5.3使用类前缀设置列的宽度（3）组合列在页面布局时，很多时候等宽列和非等宽列会同时存在，多个类也会一起组合使用，以满足在多种不同设备上显示的需要，从而创建更灵活的页面布局。下面两个示例就演示了这两种情况。<!--等宽和非等宽列--><divclass="container"style="border:1pxsolidblack"><divclass="row"><divclass="col-sm-8"style="border:1pxsolidblack">col-sm-8</div><divclass="col-sm-4"style="border:1pxsolidblack">col-sm-4</div></div><divclass="row"><divclass="col-sm-6"style="border:1pxsolidblack">col-sm-6</div><divclass="col-sm-6"style="border:1pxsolidblack">col-sm-6</div></div></div>6.5.3使用类前缀设置列的宽度当设备屏幕宽度大于576px时，效果如下所示。当设备屏幕宽度小于576px时，如下所示。举例（column-combination.html）6.5.3使用类前缀设置列的宽度多个类组合使用<!--多个类组合使用--><divclass="container"style="border:1pxsolid"><divclass="row"><divclass="col-xs-12col-sm-8col-md-6col-lg-3"style="border:1pxsolid">此处显示内容1</div><divclass="col-xs-12col-sm-4col-md-6col-lg-3"style="border:1pxsolid">此处显示内容2</div><divclass="col-xs-12col-sm-8col-md-6col-lg-3"style="border:1pxsolid">此处显示内容3</div><divclass="col-xs-12col-sm-4col-md-6col-lg-3"style="border:1pxsolid">此处显示内容4</div></div></div>举例（column-mix-combination.html）做练习6.5.3使用类前缀设置列的宽度当屏幕尺寸小于576px的时候，用col-xs-12类对应的样式，四个div显示为四行，如下所示。屏幕尺寸在576到768之间的时候，第一个第三个div用col-sm-8类对应的样式；第二个第四个div用col-sm-4类对应的样式。如图所示。举例（column-mix-combination.html）6.5.3使用类前缀设置列的宽度屏幕尺寸在768px到992px之间的时候，用col-md-6类对应的样式，四个div分别显示在两行上。如下所示。大于992px的时候，用col-lg-3类对应的样式，四个div显示在一行上。如下所示。注意：所有“列（column）”必须放在“.row”内。（4）嵌套列如果想在一列中嵌套另外的列，那么可以在原来的列中添加新的元素和一组.col-*-*列。6.5.3使用类前缀设置列的宽度在下面的示例中，布局有两个列，第二列被分为两行四个盒子。举例（column-box.html）<divclass="container"><h4>嵌套列</h4><divclass="row"><divclass="col-md-3"style="border:1pxsolidblack"><h4>第一列</h4><p>我是第一列</p></div><divclass="col-md-9"style="border:1pxsolidblack"><h4>第二列-分为四个盒子</h4><divclass="row"><divclass="col-md-6"style="background-color:#dedef8;border:1pxsolidblack">

我是第二列</div>做练习6.5.3使用类前缀设置列的宽度<divclass="col-md-6"style="background-color:#dedef8;border:1pxsolidblack">我是第二列</div></div><divclass="row"><divclass="col-md-6"style="background-color:#dedef8;border:1pxsolidblack">我是第二列</div><divclass="col-md-6"style="background-color:#dedef8;border:1pxsolidblack">我是第二列</div></div></div></div></div>6.5.3使用类前缀设置列的宽度举例（column-box.html）屏幕尺寸大于768px时，第一列用.col-md-3对应的样式，第二列用.col-md-9对应的样式，第二列内嵌套的四个盒子分别采用.col-md-6样式。总之，我们可以使用Bootstrap提供的这些类定义在不同设备上的界面排版。6.5.3使用类前缀设置列的宽度举例（column-box.html）

先定一个小目标！熟悉利用栅格系统实现导航栏效果【案例】利用栅格系统实现导航栏效果【案例】利用栅格系统实现导航栏效果导航栏的实现思路：首先定义导航栏页面结构，通过Bootstrap栅格系统中的.container设置导航栏的布局容器。在导航栏布局容器的每一行中设置不同的列数。在中等屏幕设备下，占3份，即每列宽度为25%；在小屏幕设备下，占12份，即每列宽度为100%。然后再去定义导航栏的页面样式。导航栏效果演示示例：导航栏案例：实现导航栏效果<head>

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0">

<link

rel="stylesheet"

href="css/bootstrap.min.css"></head><body>

<div

class="container">

<ul

class="row">

<li

class="col-md-3

col-sm-12">首页</li>

<!--省略其他3个<li>标签-->

</ul>

</div></body>编写HTML结构【案例】利用栅格系统实现导航栏效果<style>

*

{margin:

0;padding:

0;}

li

{list-style:

none;}

.row

{margin-bottom:

0;}

.container

{background-color:

#eee;}

.col-sm-12

{text-align:

center;padding:10px;font-size:30px;}

li:hover

{

background-color:

#fff;}</style>编写CSS样式代码【案例】利用栅格系统实现导航栏效果平板设备平板设备下页面效果。【案例】利用栅格系统实现导航栏效果演示示例：导航栏iPhone12pro模式切换到手机模式（在这里选择使用iPhone12Pro），页面效果。【案例】利用栅格系统实现导航栏效果常用样式6.66.6.1文字排版在HTML中，可以使用不同的标签来定义不同的文本样式，例如文字的大小、粗体、删除线等。Bootstrap通过覆写元素的默认样式，实现对页面布局的优化，让页面在用户面前呈现得更加美观。举例（text.html）<h1>h1.Bootstrapheading<small>Secondarytext</small></h1><spanclass="h1">行内元素具有h1的class，就是不一样</span><p>我被设置了1rem(16px)的底部外边距</p><pclass="lead">加了lead的class样式，我会突出显示</p><p>在文本<abbrtitle="WorldHealthOrganization">WHO</abbr>底部显示虚线边框</p><p>Bootstrap<mark>教程</mark></p><del>对于被删除的文本使用</del><br/><u>为文本添加下划线</u><!--通过文本对齐类，可以简单方便地将文字重新对齐--><pclass="text-left">Leftalignedtext.</p><pclass="text-center">Centeralignedtext.</p><pclass="text-right">Rightalignedtext.</p><pclass="text-justify">Justifiedtext.</p><pclass="text-nowrap">Nowraptext.</p>6.6.1文字排版举例（text.html）<!--通过这几个类可以改变文本的大小写，即大小写转换--><pclass="text-lowercase">Lowercasedtext.</p><pclass="text-uppercase">Uppercasedtext.</p><pclass="text-capitalize">Capitalizedtext.</p> <!--移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。--><ulclass="list-unstyled"> <li>列表类</li> <li>列表类</li> <li>列表类</li></ul><!--通过设置display:inline-block;将所有元素放置于同一行--><ul> <liclass="list-inline-item">同一行的列表</li> <liclass="list-inline-item">同一行的列表</li> <liclass="list-inline-item">同一行的列表</li></ul>6.6.1文字排版

先定一个小目标！熟悉Bootstrap文本颜色和背景色的设置，能够说出Bootstrap有哪些常用的文本颜色和背景色，能够设置相应颜色6.6.2颜色类名描述类名描述.text-primary首选文本颜色，重要的文本.text-warning警告信息文本颜色.text-secondary副标题颜色.text-dark深灰色文本.text-success成功文本颜色.text-bodybody文本颜色.text-muted柔和颜色.text-light浅灰色文本.text-danger危险提示文本颜色.text-white白色文本.text-info一般提示信息文本颜色.text-black黑色文本常用的文本颜色6.6.2颜色举例（color.html）类名描述类名描述.bg-primary重要的背景颜色.bg-dark深灰色背景.bg-secondary副标题背景颜色.bg-light浅灰色背景.bg-success成功背景颜色.bg-white白色背景.bg-danger危险提示背景颜色.bg-transparent透明背景色.bg-info一般提示信息背景颜色.bg-warning警告信息背景颜色背景色6.6.2颜色举例（bgcolor.html）

先定一个小目标！熟悉Bootstrap表格的设置，能够设置表格的样式6.6.3表格Bootstrap提供了一系列类来设置表格的样式，如下所示下表中的类可用于表格的行或者单元格。类描述.table为任意<table>添加基本样式(只有横向分隔线).table-striped在<tbody>内添加斑马线形式的条纹(IE8不支持).table-bordered为所有表格的单元格添加边框.table-hover在<tbody>内的任一行启用鼠标悬停状态.table-condensed让表格更加紧凑类描述.active将悬停的颜色应用在行或者单元格上.success表示成功的操作.info表示信息变化的操作.warning表示一个警告的操作.danger表示一个危险的操作6.6.3表格使用.table类来改变表格基本样式。<divclass="container"><h3>使用.table类创建基本表格布局</h3><tableclass="table"> <thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>小明</td><td>16</td></tr><tr><td>小芳</td><td>14</td></tr></tbody></table></div>举例（table.html）6.6.3表格在上面示例中添加“.table-striped”类，就会在<tbody>内的行上看到条纹，如下所示举例（table-striped.html）<tableclass="tabletable-striped">……//表格内容同table1.html，此处代码省略</table>6.6.3表格.table-bordered类可以为表格添加边框。<tableclass="tabletable-bordered">

……//表格内容同table1.html，此处代码省略</table>举例（table-bordered.html）6.6.3表格.table-hover类可以为表格的每一行添加鼠标悬停效果（灰色背景）。当鼠标在表格不同行悬停的时候，当前行会显示为灰色背景，离开后恢复原背景色。效果如下所示。<tableclass="tabletable-hover">

……//表格内容同table1.html，此处代码省略</table>举例（table-hover.html）6.6.3表格我们还可以联合使用多个类来创建组合效果。引入maxcdn的样式，使用.table-dark和.table-striped类可以创建黑色的条纹表格。举例（table-dark&table-striped.html）6.6.3表格.thead-dark类用于给表头添加黑色背景，.thead-light类用于给表头添加灰色背景。.thead-inverse类用于给表头添加黑色背景，.thead-default类用于给表头添加灰色背景。举例（thead-inverse&thead-default.html）6.6.3表格为任意<table>标签添加.table类可以为其赋予基本的样式，如果想创建响应式的表格，将.table元素包裹在.table-responsive元素内，即可创建响应式表格。在屏幕宽度小于992px时会创建水平滚动条，如果可视区域宽度大于992px则显示不同效果（没有滚动条）。举例（table-responsive.html）6.6.3表格类名描述.img-fluid设置响应式图片，主要应用于响应式设计中.img-thumbnail缩略图片，给图片设置一个空心边框.rounded给元素添加圆角边框.rounded-circle设置元素形状（圆形或者椭圆形）Bootstrap框架中提供了几种图像的样式风格，只需要在<img>标签上添加对应的类名，即可实现不同的风格。常见的图像样式如下表所示。需要注意的是，因为.rounded样式和.rounded-circle样式需要用到border-radius属性，而border-radius属性是基于CSS3的圆角样式来实现的，所以在低版本的浏览器下是没有效果的。6.6.4图片.img-fluid是Bootstrap预定义好的，用来实现图片响应式的类，它给图片设置了max-width:100%,height:auto;的效果，在开发中可以直接拿来使用。6.6.4图片在网页制作中，通常会使用浮动来设置元素在页面中的显示位置。当然，Bootstrap中也提供了一系列的样式来设置图片或文字的显示位置，具体内容如下表所示。类名描述.float-left设置元素左浮动.float-right设置元素右浮动.clearfix清除浮动下面示例展示了应用不同类后图片呈现的不同样式。<divclass="container"><p>.rounded类可以让图片显示圆角效果</p><imgsrc="images/flower.jpg"class="rounded"alt="漂亮的花"><p>.rounded-circle类可以设置椭圆形图片</p><imgsrc="images/flower.jpg"class="rounded-circle"alt="漂亮的花"><p>.img-thumbnail类用于设置图片缩略图(图片有边框)</p><imgsrc="images/flower.jpg"class="img-thumbnail"alt="漂亮的花"><p>.img-fluid类可以设置响应式图片，重置浏览器大小查看效果</p><imgsrc="images/fluid.jpg"class="img-fluid"><p>使用.float-right类来设置图片右对齐，使用.float-left类设置图片左对齐</p><imgsrc="images/left.jpg"class="float-left"width="200px"height="200px"><imgsrc="images/right.jpg"class="float-right"width="200px"height="200px"></div>举例（image.html）6.6.4图片

先定一个小目标！熟悉图文样式-使用HTML5提供的<picture>标签【案例】响应式图片<picture>标签是HTML5新增的标签元素，可以实现图片的响应式效果。常适用于在固定的区域下使用固定的图片尺寸，例如在大屏幕下使用大尺寸图片，在小屏幕下使用小尺寸图片，这样可以减少流量的使用。使用HTML5提供的<picture>标签【案例】响应式图片<link

rel="stylesheet"

href="css/bootstrap.min.css"><body>

<picture>

<sourcesrcset="images/banner1.jpg"media="(max-width:500px)">

<imgsrc="images/banner.jpg"class="img-fluid"alt="响应式大图">

</picture></body><picture>标签的使用上述代码中，实现了屏幕宽度不超过500px时(见左图)，使用banner1.jpg图片；当屏幕超过该数值时(见右图)，使用banner.jpg图片。编写页面结构演示示例：响应式图片【案例】响应式图片多学一招：实现图片居中对齐在Bootstrap中可以给图片添加两个公用的类.mx-auto和.d-block来实现图片的居中显示。除此之外，考虑到图片本身是内联元素，因此可以给图片包裹一层容器，并给该容器设置.text-center样式来实现居中效果。6.6.4图片编写如下代码来实现图片在页面中的居中效果。<divclass="text-center">

<imgsrc="images/load-pic3.jpg"class="rounded-circle"></div>页面效果如下图所示。6.6.4图片演示示例：图片显示位置在制作网页时，常常会遇到图片和文字组合显示的效果，Bootstrap中提供了<figure>和<figcaption>标签来实现图文组合效果。图文组合6.6.4图片<link

rel="stylesheet"

href="bootstrap/css/bootstrap.min.css"><body>

<divclass="text-center">

<figureclass="figure">

<imgsrc="images/load-pic4.jpg"class="img-fluidfigure-img">

<figcaptionclass="figure-captiontext-center">

我是一张笑脸

</figcaption>

</figure>

</div></body>图文在页面中的展示效果编写页面结构6.6.4图片在浏览器中打开案例，页面效果如下图所示。6.6.4图片演示示例：图文组合在前端页面开发的过程中，表单也是页面结构中重要的组成部分。表单主要包括form、button和input等元素，通过在form元素中定义input和button等元素来实现表单页面结构。6.6.5表单和表单控件<body>

<formaction="#">

<div

class="form-group">

<label

for="User">用户名</label>

<input

type="text"

class="form-control"

id="User">

<label

for="Password">密码</label>

<input

type="password"

class="form-control"

id="Password">

<label

for="Email1">邮箱地址</label>

<input

type="email"

class="form-control"

id="Email1">

</div>

<button

type="submit"

class="btn

btn-primary">提交</button>

</form></body>编写页面结构把标签和控件放在一个带有.form-group类的中，这是获取最佳间距所必需的。向所有的文本元素<input><textarea>和<select>添加class="form-control"

举例（form-normal.html）（form-control.html）6.6.5表单和表单控件

先定一个小目标！掌握Bootstrap按钮的使用，能够设置按钮样式、按钮大小，能够创建按钮组6.6.6按钮Bootstrap提供了大量的图标按钮和多种按钮风格，可以快速实现优雅的界面设计。例如，导航条中的下拉式按钮组，表单中的提交按钮、登录和注册按钮等。6.6.6按钮类描述.btn基类，也就是按钮的基本样式.btn-primary主要的按钮样式，蓝色.btn-success表示成功的按钮，绿色.btn-secondary次要的按钮样式，灰色.btn-info一般提示信息的按钮，青色.btn-warning警告信息按钮，黄色.btn-danger危险提示按钮操作，红色.btn-link让按钮看起来像个链接(仍然保留按钮行为).btn-light浅灰色按钮.btn-dark暗黑色按钮按钮样式6.6.6按钮举例（button-control.html）取值描述.btn-lg大按钮.btn-sm小按钮.btn-block创建块级的按钮，会横跨父元素的全部宽度按钮大小6.6.6按钮举例（button-control.html）STEP046.6.6按钮按钮组按钮组：是将多个按钮集合成一个组件，在Bootstrap中只需要在类名为.btn-group的父元素中添加多个按钮即可创建按钮组。使用建议：在按钮组中不要混合使用<a>、<input>和<button>标签，而是尽量使用同一个标签。HTML代码<body>

<div

class="btn-group"

role="group">

<button

type="button"

class="btn

btn-primary">按钮1</button>

<button

type="button"

class="btn

btn-secondary">按钮2</button>

<button

type="button"

class="btn

btn-success">按钮3</button>

</div></body>6.6.6按钮组编写页面结构举例（button-group.html）页面效果如下图所示。按钮组举例（button-group.html）6.6.6按钮组组件6.7<navclass="navbarnavbar-expand-mdnavbar-darkbg-dark"><aclass="navbar-brand"href="#">诗人画像</a> <ulclass="navbar-nav"id="navbarSupportedContent"> <liclass="nav-item"><aclass="n