Bootstrap响应式网页设计.ppt

第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}} /*大型屏幕*/ 栅格系统的具体参数 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 div class=col-md-3 col-sm-63/div div class=col-md-3 col-sm-64/div /div /div 2. 清除浮动问题 div class=row div class=col-md-3 col-xs-65/div div class=col-md-3 col-xs-66/div div class=clearfix/div div class=col-md-3 col-xs-67/div div class=col-md-3 col-xs-68/div/div 3. 列偏移 使用col-md-offset-*的类名就可以将列向右偏移n列 在Bootstrap源码中，列偏移是通过margin-left属性实现的： .col-md-offset-6 { margin-left: 50%;} 3. 列隐藏 以hidden-开头的类表示在当前屏幕上隐藏，在其他屏幕上可见，以visible开头的表示在当前屏幕上显示，在其他屏幕上都隐藏。 4. 列排序 列排序是通过col-md-push-*和col-md-pull-*来实现的。其中，push表示把列向右推，pull表示把列向左拉。 div class=row div clas