:响应式网页设计:Bootstrap开发速成吕国泰,何升隆,曾伟凯 pdf下载

基本信息

书名：响应式网页设计:Bootstrap开发速成

定价：45.00元

作者：吕国泰,何升隆,曾伟凯

出版社：清华大学出版社

出版日期：2017-03-01

ISBN：9787302466314

字数：397000

页码：234

版次：1

装帧：平装

开本：16开

商品重量：0.4kg

编辑推荐

---

热门的Bootstrap让许多企业在招聘网页设计师时都将之列为的技能条件，Bootstrap采用了模组化设计，简易到只要懂得如何套用，就可以快速开发出具有美感的响应式（RWD）网页。n
本书对于许多不擅长视觉设计的网页工程师来说，省去了许多美化的时间与困惑，而对于视觉设计师来说，也能按照自己设计的版型设计出网页，同时支持市面上大部分的主流浏览器，而对于想踏入响应式网页领域的初学者来说，则可以在短时间内学到实用的响应式网页设计技能。 n
本书从认识响应式网页设计与Bootstrap开始，详解网站的开发流程、响应式网页的设计思维、SEO设置以及网页设计趋势，导入视觉设计与网页制作两个不同领域的专业知识，并提供120多个Bootstrap功能范例网页文件，说明如何使用Bootstrap框架所提供的各种CSS与组件等内容，后以3个完整实例制作出响应式网页，让大家综合运用所学知识，提高实战技能。

内容提要

---

本书从认识响应式网页设计与Bootstrap开始，详解网站的开发流程、响应式网页的设计思维、SEO设置以及网页设计趋势，导入视觉设计与网页制作两个不同领域的专业知识，并提供120多个Bootstrap功能范例网页文件，说明如何使用Bootstrap框架所提供的各种CSS与组件等内容，终以3个完整实例（书籍宣传网页、产品推广网页、网站首页）制作出响应式网页，以让大家综合运用所学知识，提高实战技能。n
本书以丰富的范例程序和详细的图解逐一讲解 RWD 技术 + Bootstrap 结合使用的核心技术和方法，既适合负责网页前端和后端的程序人员阅读，也适合网站的企划人员和视觉设计人员参考，还可供想学习和了解响应式网页设计 + Bootstrap 开发网站的人员自学和参考。n

目录

---

作者介绍

---

吕国泰，资深设计师，多媒体兼任讲师。

文摘

---

1章 Bootstrap布局组件的使用n
11.1 字体图标n
Bootstrap约有200个由GlyphicoHalflings 所提供的字体格式符号，让设计者选择使用，而不是像早期那样需通过设计软件来产生符号图片。n
在每个符号的下方都有用于引用的类名称，如图11-1所示，在 HTML 设计中只要在指定的元素中加入此类名称，即可运用该图标。n
n
图11-1 字体图标及其类名称n
在使用图标的过程中，并非所有情况都适用。常发生的问题是，将图标类应用到本身已经应用了非常多类的标签中，这种做法的结果常会导致图标无法顺利显示。因此，佳的用法应该是先加入一个 标签，再将图标类应用其中。n
范例n
可在按钮、工具栏的群组、导航栏或窗体 input 元素使用图标类。本范例以 标签为例，并加入两种图标类进行说明，效果如图11-2所示。n
? 范例：图标类的使用 (ch11.1example.)n
n
n
n
n
Starn
n
n
图11-2 图标类使用的示范 (ch11.1example.)n
11.2 下拉式菜单n
11.2.1 说明n
下拉式菜单通常被用于导航栏或窗体中，将某个类进行分类以呈现一个具有层次关系的菜单。例如，“视频教学”是上层的按钮，当单击后可展开“Android 应用开发”“GameSalad 2D 游戏制作”“Google Web Design”等选项，届时用户再通过单击鼠标选择其一，以便前往对应的页面。下拉式菜单的效果如图11-3所示。n
n
图11-3 下拉式菜单的效果 (ch11.2example.)n
11.2.2 使用的方法n
使用方法有两种，一种为加入 dropdow类，另一种为建立 data 属性做呼应，具体说明如下（参考图11-4）：n
n
图11-4 下拉式菜单的使用方法n
（1）在外层的 标签中设置 dropdow类。n
（2）在 标签中建立 data-toggle='dropdown' 属性，与外层的dropdown类呼应。n
11.2.3 其他辅助项目n
可搭配使用的类如表11-1所示。n
表11-1 辅助项目类n
类 名称 说明 使用方法n
dropdown-menu-right 菜单向右对齐 菜单按钮不变，但菜单项内容会整体靠右对齐 在 标签中的 dropdown-menu 类之后加入此类n
dropdown-menu-left 菜单向左对齐 菜单按钮不变，但菜单项内容会整体靠左对齐 在 标签中的 dropdown-menu 类之后加入此类n
dropdown-header 标题 给下拉菜单加入标题，以呈现出一个群组的概念 在 标签中加入此类n
divider 分隔线 用来分隔每个系列下拉菜单的链接 在 标签中加入此类且此标签不需具有任何内容，只单纯显示分隔线效果，n
disabled 禁用链接 链接完全失去作用 在 标签中加入此类n
相关类的页面展示效果如图11-5~图11-8所示。n
n
图11-5 菜单靠右对齐 (ch11.2alignment.)n
n
图11-6 标题 (ch11.2headers.)n
n
图11-7 分隔线 (ch11.2divider.)n
n
图11-8 禁用链接 (ch11.2disabled menu items.)n
11.2.4 范例n
此范例使用了标题、分隔线、禁用链接3种类，执行结果如图11-9所示。n
? 范例：下拉式菜单的制作 (ch11.2example final.)n
n
n
n
视频教学n
n
n
n
n
双口吕教学n
n
n href='#'>Flash App 游戏开发n
n
n
n href='#'>GameSalad 2D 游戏***
n
n
n href='#'>Google Web Design动画***
n
n
凯弟教学n
n
n href='#'>Unity 5n
n
n
n
n
图11-9 下拉式菜单的制作 (ch11.2example final.)n
11.3 按钮群组n
11.3.1 说明n
通过群组的方式将 标签放置于同一行中，以产生如同单选（radio）或复选（checkbox）效果的操作，如图11-10所示。n
n
图11-10 按钮群组的效果 (ch11.3example.)n
在按钮群组的工具提示与弹出窗口中需要特别设置（参阅第 12.3 或 12.4节的内容）。n
当在 .btn-group 中的元素使用工具提示（Tooltips） 或弹出提示（popovers）时必须指定 container: 'body' 选项，以避免不必要的副作用（例如，工具提示或弹出窗口被触发时会让元素变宽和（或）失去圆角效果）。n
11.3.2 使用方法n
在外层的 标签中加入 .btn-group 类来包覆其他需要群组的 标签即可。在群组的效果部分，左边与右边的按钮会以圆角样式来呈现，如图11-11所示。n
n
图11-11 按钮群组的使用方法n
11.3.3 其他辅助项目n
可搭配使用的类如表11-2所示，各个范例的执行结果如图11-12~图11-16所示。n
表11-2 按钮群组辅助类n
类 名称 说明n
btn-toolbar 按钮工具栏 在 < div class='btn-toolbar' > 内包含多组< div class='btn-group' > 内容n
.btn-group- 大小 为群组内每个button运用大小作用类的替代做法，只需要在.btn- group加入.btn-group-类，尺寸为lg、md、sm、xs四种n
（续表） n
类 名称 说明n
嵌套 在一个按钮组内嵌套另一个按钮组，即在一个 .btn-group 内嵌套另一个 .btn-groupn
.btn-group-vertical 垂直变化 让群组按钮以垂直堆叠方式呈现而不是水平方式n
. btn-group-justi?ed 水平变化 让群组按钮延伸为相同大小（平均分配）以填满父元素的宽度n
n
n
图11-12 按钮工具栏 (ch11.3buttotoolbar.)n
n
图11-13 大小 (ch11.3sizing.)n
n
图11-14 嵌套 (ch11.3nesting.)n
n
图11-15 垂直变化 (ch11.3vertical variation.)n
n
图11-16 水平变化 (ch11.3Justified buttogroups.)n
11.3.4 范例n
此范例使用了工具栏、嵌套、水平变化3种类，范例的执行结果如图11-17所示。n
? 范例：按钮群组的制作 (ch11.3example final.)n
n
n
n href='#'>Flash 1n
n href='#'>GS 1n
n
n href='#'>
Google Web Design

n
n
n href='#'>GWD 1n
n href='#'>GWD 2n
n href='#'>GWD 3n
n
n href='#'>GWD 4n
n
n
n
n
n
图11-17 按钮群组的制作 (ch11.3example final.)n
11.4 输入框群组n
11.4.1 说明n
在输入框（input）群组的使用当中，可在 标签之前、之后加入其他元素，让用户在通过输入框进行相关操作时可更直觉与便利。添加的元素可为美元符号、@符号、按钮等。输入框的效果范例如图11-18所示。n
n
图11-18 输入框的效果 (ch11.4example.)n
11.4.2 使用方法n
为 .input-group 加入 .input-group-addo类，可以让 .form-control 的前面或后面额外加入其他元素。建立的步骤如下：n
在外层的 标签中加入 .input-group 类。n
建立 标签，并加入 .input-group-addo类与内容，并将 标签放置在 标签的前面或后面，如图11-19所示。n
n
图11-19 建立输入框的方法n
11.4.3 其他辅助项目n
可搭配使用的类与其他效果，如表11-3所示，4个辅助项对应的范例如图11-20~图11-23所示。n
表11-3 输入框群组辅助类n
类 / 效果 名称 说明n
.input-group- 大小 为 .input-group 加入对应的大小类，包含的元素会自动重设大小，尺寸为 lg、md、sm、xs 四种n
type='radio'、type='checkbox' 单选与复选 添加单选（radio）或复选（checkbox）选项到 群组，以替换文字n
包覆按钮内容 使用 .input-group-bt替代 .input-group-addo来包覆 butto内容n
下拉式菜单 在输入框群组中添加带有下拉式菜单的按钮，只需要简单地在一个 .input-group-bt类中包裹按钮和下拉式菜单即可。建立的方式请参阅1.2节n
n
图11-20 大小 (ch11.4sizing.)n
n
图11-21 附加checkbox 和 radio 元素 (ch11.4checkboxes and radio addons.)n
n
图11-22 前后包覆按钮 (ch11.4buttoaddons.)n
n
图11-23 下拉式菜单 (ch11.4dropdown.)n
11.4.4 范例n
此范例结合了按钮与下拉式菜单两种项目，同时让单边可呈现多个按钮，且加入粗体与斜体两种图标类（图标类请参阅1.1节）。范例的执行结果如图11-24所示。n
? 范例：多个按钮与图标的运用 (ch11.4example final.)n
n
n
n
n
n
n
n
n
下拉式菜单 n
n
n href='#'>按钮1n
n href='#'>按钮2n
n href='#'>按钮 3n
n
n href='#'>按钮 4n
n
n
n
n
n
n
n
图11-24 多个按钮与图标的运用范例 (ch11.4example final.)n
11.5 导 航n
11.5.1 说明n
导航（见图11-25）在Bootstrap中可共享相同的标签（.nav 类）样式。此方式需搭配 的页签功能，使其呈现切换的效果，页签功能请参阅第 12 章。n
n
图11-25 导航效果 (ch11.5example.)n
11.5.2 使用方法n
导航是一个无项目符号的效果，因此必须使用 与 标签的关系来建立内容。建立的步骤如下（参考图11-26）：n
在外层的 标签中加入 .nav 类。n
在 .nav 类之后加入 .nav-tabs 类。n
n
图11-26 导航的使用方法 (ch11.5example.)n
11.5.3 其他辅助项目n
可搭配使用的类如表11-4的示，各个辅助项目的范例如图11-27~图11-30所示。n
表11-4 导航辅助类n
类 名称 说明n
.nav-pills 按钮样式 使用 .nav-pills 替换 .nav-tabsn
.nav-stacked 垂直堆叠 .nav-stacked 类需加在 .nav-tabs 或 .nav-pills 之后n
.nav-justi?ed 等宽样式 在大于 768px 的屏幕上，通过加入 .nav-justi?ed 很容易让页签或按钮样式以等宽的样式来呈现。另外，在小屏幕上，导航链接会以堆叠方式呈现n
.disabled 禁用链接 对于任何导航组件（ 页签或按钮样式）都可以加入 .disabled 类，以呈现灰色链接和无鼠标滑入的效果n
n
n
图11-27 按钮样式 (ch11.5pills.)n
n
图11-28 垂直堆叠 (ch11.5stacked.)n
n
图11-29 等宽样式 (ch11.5justified.)n
n
图11-30 禁用链接 (ch11.5disabled links.)n
11.5.4 范例n
此范例与下拉式菜单功能进行整合（制作下拉式菜单的方式可参阅第 11.2节的内容），执行结果如图11-31所示。n
n
图11-31 导航加下拉式菜单制作 (ch11.5example final.)n
? 范例：导航加下拉式菜单的制作 (ch11.5example final.)n
n
n
n href='#'>首页n
n href='#'>关于我们n
n
n href='#'>
视频教学
n
n
n href='#'>Android 应用开发n
n href='#'>Google Web Design动画***
n href='#'>GameSalad 2D 游戏***
n
n href='#'>Unity 5n
n
n
n
n
11.6 导 航 栏n
11.6.1 说明n
导航栏可用于应用程序或网站导航标题的响应式基础组件。它们在移动设备的可视区域是以折叠方式呈现的（可切换开关），在可视区域的宽度渐渐增加时（大于移动设备的判断点时）会转为以水平布局方式呈现。范例的执行结果如图11-32所示。n
n
图11-32 导航栏说明 (ch11.6example.)n
11.6.2 使用方法n
建立导航栏的步骤如下，范例如图11-33所示。n
在外层的 标签中按序加入 .navbar 与 .navbar-default 两个类。n
在第二层 标签中加入 .navbar-header 类，且此 标签内的内容必须带有 .navbar-brand 类的 n> 标签。
导航栏需使用 n> 与 两个标签建立无顺序的内容（菜单），且在 标签中需加入 .nav 与 .navbar-nav 两个类。

图11-33 建立导航栏的步骤
11.6.3 其他辅助项目
可搭配使用的类如表11-5所示，范例如图11-34~图11-38所示。
表11-5 导航栏辅助类
类 名称 说明
.navbar-right 靠右对齐 能让导航栏的链接、窗体、按钮、文字靠右对齐
.navbar-left 靠左对齐 能让导航栏的链接、窗体、按钮、文字靠左对齐（默认效果）
.navbar-?xed-top 固定至 加入 .navbar-?xed-top 类可以让导航栏固定至
.navbar-?xed-bottom 固定至底端 加入 .navbar-?xed-bottom 类可以让导航栏固定至底端，包含 .container 或 .container- ?uid 类让导航栏内容居中对齐和左右加入 padding 设置
.navbar-static-top 静止 加入 .navbar-static-top 类可以建立一个 100% 宽度的导航栏，它会随着页面向下滑动而消失，包含 .container 或 .container-?uid 类让导航栏内容居中对齐和左右加入 padding 设置
.navbar-inverse 反向颜色 加入 .navbar-inverse 类以修改导航的外观

图11-34 靠左/右对齐 (ch11.6ponent alignment.)

图11-35 固定至 (ch11.6fixed to top.)

固定至或底端，也就是说，当网页上下滑动时，导航栏并不会从画面上消失，而是保持显示在网页的或底端，就像是“固定”在那里一样。

图11-36 固定至底端 (ch11.6fixed to bottom.)

图11-37 静止 (ch11.6static top.)

图11-38 反向颜色 (ch11.6inverted navbar.)
11.6.4 范例
本范例的导航栏中加入了按钮、窗体与下拉式菜单等功能，执行结果如图11-39所示。
? 范例：导航栏 (ch11.6example final.)



data-target='#bs-example-navbar-collapse-1' aria-expanded='false'>
Toggle navigation




n href='#'>首页n
n
n
n
n href='#'>关于我们 （current）
n
n href='#'>关于我们n
n
n href='#'>视频教学 n
n
n href='#'>Android应用开发n
n href='#'>Google Web Design动画***
n href='#'>GameSalad 2D 游戏***
n
n href='#'>Unity 5n
n
n
n
n
n
n
n
Submitn
n
n
n
n href='#'>视频教学 n
n
n
n
n href='#'>Android应用开发n
n href='#'>Google Web Design动画***
n href='#'>GameSalad 2D 游戏***
n
n href='#'>Unity 5n
n
n
n
n
n
n
n
图11-39 导航栏的示范 (ch11.6example final.)n
11.7 分 页n
11.7.1 说明n
此效果是一种无顺序符号，可为网站的应用程序提供分页链接的多分页组件，提供简单的换页功能。n
11.7.2 使用方法n
因为此效果属于无顺序符号，所以必须使用 与 两个标签建立出顺序的效果。分页效果的显示只需在 标签中加入 .paginatio类即可。分页的范例效果如图11-40所示。n
n
图11-40 分页效果 (ch11.7example.)n
11.7.3 其他辅助项目n
可搭配使用的类如表11-6所示，各个范例如图11-41~图11-44所示。n
表11-6 分页辅助类n
类 名称 说明n
.disabled 禁用 指定为不能单击的链接n
.active 启用 标示为当前的页面n
.pagination- 大小 尺寸为 lg、md、sm、xs 四种n
.pager 换页 默认的状态下，换页链接会居中对齐，且不必使用 .previous与.next两个类n
.previous 上一页 标签中需加入 pager 类才可顺利呈现效果n
.next 下一页 标签中需加入 pager 类才可顺利呈现效果n
n
图11-41 禁用与启用 (ch11.7disabled.)n
n
图11-42 大小 (ch11.7sizing pagination.)n
n
图11-43 换页 (ch11.7pager.)n
n
图11-44 对齐链接 (ch11.7pager aligned links.)n
11.7.4 范例n
此范例以常见的分页方式作为介绍，执行结果如图11-45所示。n
? 范例：分页的制作 (ch11.7example final.)n
n
n
n
n href='#'>
«
n
n
n href='#'>1n
n href='#'>2n
n href='#'>3n
n href='#'>4n
n href='#'>5n
n
n href='#'>
»
n
n
n
n
n
图11-45 分页制作的示范 (ch11.7example final.)n
11.8 提示标志n
11.8.1 说明n
加入 < spaclass='badge' > 元素到链接、导航或其他元素，可呈现出醒目的“新”或“未读”信息的提示效果，如图11-46 所示。n
n
图11-46 提示标志效果 (ch11.8example.)n
11.8.2 范例n
? 范例：提示标志的制作 (ch11.8example final.，见图11-47)n
n
n href='#'>首页 42
n
n href='#'>关于我们n
n href='#'>留言板 3n
n
n
图11-47 提示标志制作的示范 (ch11.8example final.)n
11.9 大屏幕效果n
11.9.1 说明n
此效果能使元素延展至整个浏览器的可视区域，以展示网站的关键内容。这个组件本身已具有响应式的效果。范例的执行结果如图11-48所示。n
n
图11-48 大屏幕的效果 (ch11.9example.)n
11.9.2 范例n
在 标签中加入 .jumbotro类，且搭配 .container 类可使内容显示的区域不是整个浏览器宽度。范例的执行结果如图11-49所示。n
? 范例：大屏幕效果的制作 (ch11.9example final.)n
n
n
Hello, world!n
n

这是一个超大屏幕（Jumbotron）的范例

n
n

href='#'>Learmore

n
n
n
n
图11-49 大屏幕效果制作的示范 (ch11.9example final.)n
11.10 缩 略 图n
11.10.1 说明n
在网页设计中，多数都需要在网格中布局图像、视频、文字等内容。通过thumbnail 类，只需用少的标签就可以展示出带有链接的图片，如图11-50所示。n
n
图11-50 缩略图的效果 (ch11.10example.)n
11.10.2 使用方法n
使用 Bootstrap 创建缩略图的步骤如下（参考范例，如图11-51所示）：n
在 n> 标签中加入 .thumbnail 类。
thumbnail 类会给图像添加4个像素的内边距（padding）和一个灰色的边框。
当鼠标滑到图像上时，就会出现蓝色的轮廓。

图11-51 创建缩略图的方法
11.10.3 范例
在缩略图内容中加入标题、段落与按钮3种标签内容。范例的执行结果如图11-52所示。
? 范例：缩略图的制作 (ch11.10example final.)





缩略图标签

123LERNGO是由一群热爱程序设计、游戏以及视觉设计的人所组成的小团队，初衷是分享自己的学习经验，让人们可以通过我们的网站学习到更多有关信息科技等知识。

缩略图标签

123LERNGO是由一群热爱程序设计、游戏以及视觉设计的人所组成的小团队，初衷是分享自己的学习经验，让人们可以通过我们的网站学习到更多有关信息科技等知识。

n

> href='#'>Button
href='#'>Button

n
n
n
n
n
n
nn
n
缩略图标签n
n

123LERNGO是由一群热爱程序设计、游戏以及视觉设计的人所组成的小团队，初衷是分享自己的学习经验，让人们可以通过我们的网站学习到更多有关信息科技等知识。

n
n

href='#'>Button
href='#'>Button

n
n
n
n
n
n
图11-52 缩略图制作的示范 (ch11.10example final.)n
11.11 进 度 条n
11.11.1 说明n
通过这些简单又具有弹性的进度条，为工作流程或活动进度提供了新的反馈信息，进度条的效果如图11-53所示。n
n
图11-53 进度条效果 (ch11.11example.)n
n
Bootstrap 进度条使用 CSS3 过渡和动画来获得这种效果。IE 9以及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 则不支持进度条动画这个效果。n
11.11.2 使用方法n
创建一个基本的进度条步骤如下（见图11-54）：n
在外层的 标签中加入 .progress 类。n
在第二层的 标签中加入 .progress-bar 类。n
添加一个带有百分比表示的宽度的 style 属性，例如 style='60%'; 属性表示进度条在 60% 的位置。n
n
图11-54 创建进度条的步骤n
11.11.3 其他辅助项目n
可搭配使用的类如表11-7所示，各个辅助项目的范例如图11-55~图11-58所示。n
表11-7 进度条辅助项目n
类 名称 说明n
progress-bar-primary、progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger 显示状态 进度条使用与按钮类和警告类一致的场景颜色样式n
progress-bar-striped 条纹样式 此类需加在 progress-bar 类之后n
active 动画样式 将.active加入.progress-bar-striped类，以呈现从右向左的条纹动画效果n
堆叠样式 将多个进度条（.progress-bar）放置于同一个.progress容器内n
n
图11-55 显示状态 (ch11.11contextual alternatives.)n
n
图11-56 条纹样式 (ch11.11striped.)n
n
图11-57 动画样式 (ch11.11animated.)n
n
图11-58 堆叠样式 (ch11.11stacked.)n
11.11.4 范例n
此范例在每条进度条中加入对应的数值并显示出来，该范例的执行结果如图11-59所示。n
? 范例：进度条的制作 (ch11.11example final.)n
n
35%n
n
n
20%n
n
10%n
n
n
n
图11-59 进度条制作的示范 (ch11.11example final.)n
11.12 面 板n
11.12.1 说明n
建立一个面板，并将需要放置的内容放置在此面板中，以显示出一个区块的效果，如图11-60所示。n
n
图11-60 面板效果 (ch11.12example.)n
11.12.2 使用方法n
创建面板只需在 标签中按序加入 .panel 和 .panel-default 这两个类即可，范例及其执行结果如图11-61所示。n
n
图11-61 创建面板的方法n
11.12.3 其他辅助项目n
可搭配使用的类如表11-8所示，各个辅助项目的范例如图11-62~图11-64所示。n
表11-8 面板辅助项目n
类 名称 说明n
.panel-heading 标题 加入标题类到面板之中，在视觉显示上更为突显主题n
.panel-footer 页脚 将按钮或次要文字放置在 .panel-footer 内。面板页脚不会从状态类继承颜色或边框的设置，因为它们并不是主要的内容n
panel-primary、panel-success、panel-info、panel-warning、panel-danger 显示状态 与其他组件一样，只需要为面板加入状态类，很容易让面板在特定场景下更有意义n
n
图11-62 标题 (ch11.12panel with heading.)n
n
图11-63 页脚 (ch11.12panel with footer.)n
n
图11-64 显示状态 (ch11.12contextual alternatives.)n
11.12.4 范例n
本范例采用了标题与显示状态两个类，并加入表格内容进行显示，如图11-65所示。n
? 范例：面板的制作 (ch11.12example final.)n
n
n
123LearnGon
n
n
我们是一个热爱程序设计、游戏以及视觉设计的小团队n
n
n
AndroidGameSalad n
教学 A教学 An
教学 B教学 Bn
n
n
n
图11-65 面板制作的示范 (ch11.12example final.)n
11.13 响应式嵌入内容n
11.13.1 说明n
在网页设计中，有时会嵌入外部的视频或相关页面，但嵌入的内容并无法应对响应式网页的缩放而实时进行调整，只会以固定的大小显示出来。n
因此，此响应式的嵌入内容可直接运用于 、和 元素上，当想要符合某些属性的样式时，可以选择使用明确的类 .embed-responsive-item。n
11.13.2 范例n
本范例按步骤引导各位读者制作响应式嵌入内容。n
? 完整范例：范例文件ch11ch11.13example.n
复制视频嵌入的程序代码，如图11-66所示。n
n
图11-66 复制视频嵌入的程序代码n
将语句粘贴到 标签中。n
将程序代码中的“宽”与“高”部分删除，如图11-67所示。n
n
图11-67 粘贴程序代码并删除代码中的“宽”与“高”部分n
添加一个 标签并加入 embed-responsive 类，其后再加入embed-responsive embed-responsive-16by9 类即可完成，如图11-68所示。n
n
图11-68 添加一个 标签并加入 embed-responsive 类n
n

> href='#'>Button
href='#'>Button

序言

---