Bootstrap响应式Web开发（第2版）-课件 第5章 Bootstrap常用样式.pptx

第5章Bootstrap常用样式;学习目标/Target;学习目标/Target;章节概述/Summary;目录/Contents;目录/Contents;标题样式;;Bootstrap中有3种设置标题样式的方式。;;h1到h6标签设置的标题字号：;5.1标题样式;5.1标题样式;5.1标题样式;;5.1标题样式;5.1标题样式;5.1标题样式;5.1标题样式;;5.1标题样式;5.1标题样式;5.1标题样式;5.1标题样式;文本样式;;5.2.1强调文本;5.2.1强调文本;5.2.1强调文本;;创建textInline.html文件，在该文件中创建基础HTML5文档结构并引入bootstrap.min.css文件。;在浏览器中打开textInline.html文件，内联文本标签效果如下图所示。;5.2.1强调文本;;创建textParagraph.html文件，在该文件中创建基础HTML5文档结构并引入bootstrap.min.css文件。;在浏览器中打开textParagraph.html文件，段落突出效果如下图所示。;5.2.2引用文本;5.2.2引用文本;5.2.2引用文本;5.2.2引用文本;;创建textQuote.html文件，在该文件中创建基础HTML5文档结构并引入bootstrap.min.css文件。;在浏览器中打开textQuote.html文件，引用文本效果如下图所示。;5.2.3文本颜色;5.2.3文本颜色;5.2.3文本颜色;5.2.3文本颜色;;创建textColor.html文件，在该文件中创建基础HTML5文档结构并引入bootstrap.min.css文件。;在浏览器中打开textColor.html文件，文本颜色效果如下图所示。;5.2.4文本格式;;Bootstrap中提供了一系列的文本格式相关样式，包括文本对齐样式、文本变换样式和文本换行样式等，具体如下表所示。;接上表;接上表;;创建textFormat.html文件，在该文件中创建基础HTML5文档结构并引入bootstrap.min.css文件。;在浏览器中打开textFormat.html文件，文本格式效果如下图所示。;列表样式;;5.3列表样式;无序列表和有序列表默认带有项目符号或数字等列表样式，但在某些情况下需要去除这些默认的列表样式。使用Bootstrap，可以将.list-unstyled类应用于ul标签或ol标签以去除默认列表样式。;5.3列表样式;复制本章配套源代码中的bootstrap-icons-1.10.5文件夹并放入chapter05目录下，该文件夹保存了图标相关文件。;在浏览器中打开inlineList.html文件，图标列表效果如下图所示。;图文样式;;Bootstrap中提供了一些预定义的图像样式类，可以直接应用于img标签来实现不同的图像展示风格。;;创建pictureStyle.html文件，在该文件中创建基础HTML5文档结构并引入bootstrap.min.css文件。;在浏览器中打开pictureStyle.html文件，原图、响应式图和缩略图效果如下图所示。;;在Bootstrap中可以使用浮动样式控制图像的对齐方式，浮动样式可以使图像与周围的内容对齐，并实现文字环绕的效果。;;5.4.2图像对齐方式;在浏览器中打开pictureFloat.html文件，图像对齐效果如下图所示。;5.4.2图像对齐方式;;;在浏览器中打开pictureAlignment.html文件，图像对齐效果如下图所示。;;;5.4.3图文组合方式;;;在浏览器中打开pictureText.html文件，图像组合效果如下图所示。;表格样式;;;常见的作用于table标签的类如下表所示。;当需要设置表格的颜色时，可以在table、tr和td标签上添加.table-*类来分别设置整个表格、表格中的行和表格中的单元格的背景色，具体介绍如下。;创建具有水平滚动功能的响应式表格：;;;在浏览器中打开table.html文件，学生成绩表格的隔行换色效果如下图所示。;辅助样式;;;常见的背景样式类如下表所示。;;;在浏览器中打开bgColor.html文件，背景色效果如下图所示。;;;常见的边框样式类如下表所示。;接上表;;创建borderStyle.html文件，在该文件中创建基础HTML5文档结构并引入bootstrap.min.css文件。;在浏览器中打开borderStyle.html文件，边框效果如下图所示。;本章小结