基于Web标准的网页设计-火龙果软件.PPT

选项卡面板设置 1. 选项卡面板的样式设置 2. 将选项卡变成滑动式触发 9.2.5 媒体对象 媒体对象是一组HTML元素，通常包括以下几个部分： ① media元素：媒体对象的容器，用来容纳媒体对象的所有内容； ② media-object元素：媒体对象的对象，常常是图片，但也可以为其他元素。 ③ media-body元素：媒体对象的主体，可以是任何元素，常常是图片侧边内容。 ④ media-heading元素：媒体对象的标题，用来描述对象的标题，此部分是可选的。 ? ? ? ? ? ? ? ? 火龙果·整理 第9章 Bootstrap响应式网页设计 ? ? ? ? ? ? ? ? 火龙果·整理 引言 网站各模块代码如何重用？如何快速制作响应式网站 解决方案：Bootstrap框架 9.1 Bootstrap的使用 Bootstrap内置了非常多的网页组件和漂亮样式，只要在HTML元素中调用相关的类名就可使用这些组件和样式，而无需编写CSS代码，从而减少了代码的编写，提高了网站的开发效率 移动设备优先： 浏览器支持：。 响应式设计： 组件丰富：Bootstrap包含了很多功能强大的内置组件 9.1.1 下载和引用Bootstrap框架 Bootstrap的中文官方网站是：。 目前Bootstrap最新的正式版为3.3.7，该版本压缩文件大小为362KB。 2. 在网站中引入Bootstrap 第一步：将ZIP压缩包解压后的3个文件夹（css、js和fonts）复制到网站根目录下 第二步：在HTML文件中引入Bootstrap，一个引入了Bootstrap的HTML文件（9-1.html） 注意 要在网页中使用Bootstrap，必须引入bootstrap.min.css、jquery.min.js和bootstrap.min.js 为了使Bootstrap能够兼容IE 8浏览器，必须采用条件注释[if lt IE 9]的方式引入2个js文件，其中respond.min.js文件的作用是使IE 8支持媒体查询，html5shiv.js是使IE8能够支持HTML 5新增的标记。 9.1.2 Bootstrap栅格系统 栅格系统通过一系列的行（row）与列（col）的组合来创建页面布局，开发者只要将网页模块放入这些创建好的栅格（格子）中就可以了 “行”必须包含在布局容器.container类或container-fluid类中，以便为其赋予合适的对齐方式（alignment）和内边距（padding）。 每一行（row）在水平方向包含若干列（col），并且只有“列”可以作为“行”的直接子元素。 行使用类名“row”来定义，列使用类名“col-*-*”来定义，网页的内容应放在“列”中。 每一行最多可等分为12列 2. 栅格参数 Bootstrap区分了4种类型的浏览器尺寸（超小屏、小屏、中屏和大屏） 其像素的分界点分别是768px、992px和1200px @media (min-width:768px){.container{width:750px}} /*小型屏幕*/ @media (min-width:992px){.container{width:970px}} /*中型屏幕*/ @media (min-width:1200px) {.container{width:1170px}} /*大型屏幕*/ 栅格系统的具体参数 屏幕尺寸 超小屏幕手机 768px 小屏幕平板 ≥768px 中等屏幕桌面 ≥992px 大屏幕大桌面 ≥1200px 栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值将变为水平排列 container元素 最大宽度 None(自动) 750px 970px 1170px 类名前缀 .col-xs- .col-sm- .col-md- .col-lg- 基础列数 12 最大列宽 自动 约62px 约81px 约97px 列中内容间隔 30px（每列左右均有15px填充） 可嵌套、可排序 是 可偏移（offsets） 是 9.1.3 使用栅格系统进行响应式布局 1. 列合并 形如col-md-3的类名表示把3个基础列合并成一列。因此列的类名“col-*-*”又称为列合并属性。 列的col-类名是向大兼容的 .例如col-md-3就暗含了col-lg-3，col-xs-6也暗含了col-sm-6 div class=container div class=row div class=col-md-3 col-sm-61/div div class=col-md-3 col-sm-62/div d