Bootstrap响应式网页设计

1、第9章 Bootstrap响应式网页设计,引言,网站各模块代码如何重用？如何快速制作响应式网站 解决方案：Bootstrap框架,9.1 Bootstrap的使用,Bootstrap内置了非常多的网页组件和漂亮样式，只要在HTML元素中调用相关的类名就可使用这些组件和样式，而无需编写CSS代码，从而减少了代码的编写，提高了网站的开发效率 移动设备优先： 浏览器支持：。 响应式设计： 组件丰富：Bootstrap包含了很多功能强大的内置组件,9.1.1 下载和引用Bootstrap框架,Bootstrap的中文官方网站是：。 目前Bootstrap最新的正式版为3.3.7，该版本压缩文件大小为3

2、62KB。,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是使

3、IE8能够支持HTML 5新增的标记。,9.1.2 Bootstrap栅格系统,栅格系统通过一系列的行（row）与列（col）的组合来创建页面布局，开发者只要将网页模块放入这些创建好的栅格（格子）中就可以了 “行”必须包含在布局容器.container类或container-fluid类中，以便为其赋予合适的对齐方式（alignment）和内边距（padding）。 每一行（row）在水平方向包含若干列（col），并且只有“列”可以作为“行”的直接子元素。 行使用类名“row”来定义，列使用类名“col-*-*”来定义，网页的内容应放在“列”中。 每一行最多可等分为12列,2. 栅格参数,Bo

4、otstrap区分了4种类型的浏览器尺寸（超小屏、小屏、中屏和大屏） 其像素的分界点分别是768px、992px和1200px media (min-width:768px).containerwidth:750px /*小型屏幕*/ media (min-width:992px).containerwidth:970px /*中型屏幕*/ media (min-width:1200px) .containerwidth:1170px /*大型屏幕*/,栅格系统的具体参数,9.1.3 使用栅格系统进行响应式布局,1. 列合并 形如col-md-3的类名表示把3个基础列合并成一列。因此列的类名“

5、col-*-*”又称为列合并属性。 列的col-类名是向大兼容的 .例如col-md-3就暗含了col-lg-3，col-xs-6也暗含了col-sm-6 1 2 3 4 ,2. 清除浮动问题, 5 6 7 8,3. 列偏移,使用col-md-offset-*的类名就可以将列向右偏移n列 在Bootstrap源码中，列偏移是通过margin-left属性实现的： .col-md-offset-6 margin-left: 50%;,3. 列隐藏,以hidden-开头的类表示在当前屏幕上隐藏，在其他屏幕上可见，以visible开头的表示在当前屏幕上显示，在其他屏幕上都隐藏。,4. 列排序,列排序

6、是通过col-md-push-*和col-md-pull-*来实现的。其中，push表示把列向右推，pull表示把列向左拉。 ,5. 列嵌套,栅格系统还支持列的嵌套，即在一个列元素中再插入一个或者多个行（row）。此时，内部嵌套行（row）的宽度就是当前外部列的宽度。,9.2 Bootstrap中的网页组件,9.2 Bootstrap中的网页组件,Bootstrap组件能帮助开发者快速构建出绚丽的页面。其中最常用的组件有： 导航条（navbar） 轮播图（Carousel） Tab面板（Tab） 媒体对象（Media Object）,9.2.1 基于组件的网页制作方法,基于组件的网页制作技术，

7、是指将网页中可能需要的各个组件（如导航条、栏目框）先制作出来，然后将这些组件装配进网页的布局框架中形成网页。 （1）建立标准组件库 （2）建立网页布局代码库 （3）组装网页,9.2.2 导航条,（1）插入一个容器或标记，为其添加navbar类名和navbar-default类名 （3）向导航条中添加导航项，方法是插入一个标记，再设置该标记的类名为nav类和navbar-nav类。如果要将某个导航项设置为当前导航项，可对该标记添加active类。,导航条实例, 研究机构 船山学人船山科普 ,2. 响应式导航条,（1）导航项折叠（隐藏）的实现。 在标记外包裹一个标记，并且为该添加collapse和

8、navbar-collapse两个类名，以及一个navbar-collapse的id属性值。 （2）添加右侧的汉堡按钮，在标记中添加一个标记，并为该标记添加navbar-toggle和collapsed两个类名，以及data-toggle= collapse的属性，表示实现折叠。,响应式导航条实例, ,3. 带有下拉菜单的导航条, 船山科普 王船山其人 ,4. 修改导航条的默认样式,.navbar-default background-color: #900; /*导航条背景色*/ .navbar-default .navbar-navlia color: #f9f9f9; /*导航条前景色*

9、/ .navbar-navlia padding: 10px 20px; /*每个导航项的大小*/ .navbar-default .navbar-navlia:focus, .navbar-default .navbar-navlia:hover color: #fff; background-color:#8b8; /*导航项hover时的样式*/ .navbar border-radius: 0; min-height:40px; /*导航条的高度*/ margin-bottom:10px; /*导航条的下边界*/,4. 修改下拉菜单的默认样式,.dropdown-menu backgr

10、ound-color: #9c9; /*下拉菜单的背景色*/ .dropdown-menulia padding: 8px 20px; color: #333; /*下拉菜单项的大小*/ .dropdown-menulia:focus, .dropdown-menulia:hover color: #fff; background-color: #c33; /*下拉菜单项的hover样式*/ .navbar-default .navbar-brand color: #fff; /*导航条头部的样式*/,5. 带有搜索表单的导航条, 提交,9.2.3 轮播插件,Bootstrap轮播插件是响应式

11、的。轮播插件由三个部分组成：轮播的图片、计数器和控制按钮。,轮播图的组成,1. 轮播图的容器 插入一个容器标记如，为其添加carousel类和slide类，其中carousel类名使它成为一个轮播容器 2. 轮播项目 轮播项目必须放在一个类名为carousel-inner的div中，每个项目是一个类名为item的div 3. 轮播计数器 用一个类名为carousel-indicators的元素定义的，有几张图片就在里面放几个li元素。 4. 轮播导航 是一个类名为carousel-control的标记,5. 轮播图的选项修改,改变轮播图的切换速度为1秒，只要对轮播图的容器carousel元素添

12、加data-interval=“1000”就可以了。 当鼠标滑动到轮播图上时，轮播图会停止播放，如果不希望停止播放，可对carousel元素添加data-pause=false。,9.2.4 选项卡面板,选项卡面板组成：上方是一组导航链接按钮，下方是一组内容面板 （1）选项卡导航条。一个标记，对其应用nav和nav-tabs类（或nav-pills类，表示胶囊式） （2）制作内容面板组。添加一个类名为tab-content的标记，作为所有内容面板的容器。在该容器中，插入若干个类名为tab-pane的标记，作为内容面板,选项卡面板设置,1. 选项卡面板的样式设置 2. 将选项卡变成滑动式触发,9

13、.2.5 媒体对象,媒体对象是一组HTML元素，通常包括以下几个部分： media元素：媒体对象的容器，用来容纳媒体对象的所有内容； media-object元素：媒体对象的对象，常常是图片，但也可以为其他元素。 media-body元素：媒体对象的主体，可以是任何元素，常常是图片侧边内容。 media-heading元素：媒体对象的标题，用来描述对象的标题，此部分是可选的。,媒体对象代码示例, 王船山的哲学思想 首先、反对禁欲主义 ,2. 媒体对象的嵌套,在一个media-body元素中，又嵌入一个media元素，就构成媒体对象的嵌套,9.2.6 折叠面板组,折叠面板组主要由以下几个HTML

14、元素定义： panel-group：定义折叠面板组。 panel和panel-default：定义一个折叠面板。 panel-heading：定义折叠面板的头部。 panel-collapse：定义折叠面板的折叠区域。 panel-body：定义折叠面板的内容区域。,9.2.7 提示框与弹出框,提示框效果 代码实现 $(data-toggle=tooltip).tooltip(); 联系电话 ” data-html=”true”关注微信,9.2.7 提示框与弹出框,弹出框 $(data-toggle=popover).popover(); 官方微信,9.2.8 模态弹窗, 类名为modal的元素表示模态弹出窗的灰色背景层，应用fade类可使其具有渐隐动画效果。 类名为modal-dialog的元素表示弹出窗，虽然可以在该元素内直接添加内容，但是效果很不美观。 类名为modal-content的元素表示弹窗框内容，该元素下最好具有modal-header、modal-body、modal-footer三个子元素，使弹窗框显得整齐美观。,9.3 Bootstrap网页重构实例,大屏幕,中等屏幕,小屏和超小屏,习