HTML5+CSS3_Web前端设计基础教程_第2版（第10章）.html5+css3_web前端设计基础教程_第2版（第10章）.ppt

Web前端设计基础教程HTML5+CSS3第②版

Chapter/09多设备响应式页面的实现【本章导读】本章将围绕响应式页面的设计理念，向读者介绍此类页面布局的实现过程。

10.1Bootstrap框架10.1.1Bootstrap的环境配置1．下载Bootstrap访问Bootstrap中文网，在其网站的下载页面，按照需要下载不同使用场景的代码，这里下载预编译的Bootstrap。图10-1Bootstrap框架文件目录结构

2．使用Bootstrap创建第一个网页图10-2使用Bootstrap创建第一个网页预览效果10.1Bootstrap框架

10.1.2Bootstrap栅格系统1．栅格系统概述Bootstrap框架中的栅格系统是通过一系列的行（row）与列（column）的组合来创建页面布局。此栅格系统向用户提供了一套响应式、移动设备优先的页面布局方式，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。10.1Bootstrap框架

10.1.2Bootstrap栅格系统2．使用栅格系统快速实现适应手机、平板和PC端的页面布局10.1Bootstrap框架图10-4超小屏幕（手机）端预览效果图10-5小屏幕（平板）端预览效果

10.1.2Bootstrap栅格系统2．使用栅格系统快速实现适应手机、平板和PC端的页面布局10.1Bootstrap框架图10-6中等屏幕（桌面显示器）端预览效果

10.1.3Bootstrap表格10.1Bootstrap框架图10-7Bootstrap表格预览效果

10.1.4Bootstrap表单在Bootstrap框架中，提供了三种类型的表单布局，即垂直表单（默认）、内联表单和水平表单，其中垂直表单布局是最常见的布局形式。此外，在创建表单过程中Bootstrap支持最常见的表单控件有input、textarea、checkbox、radio和select。10.1Bootstrap框架图10-9内联表单预览效果

10.1.5Bootstrap图片在Bootstrap框架中，提供了三种可对图片进行变形的类规则，可以让图片呈现不同的形状。10.1Bootstrap框架图10-10Bootstrap图片预览效果

10.1.6Bootstrap导航栏Bootstrap框架为用户提供了一种基本的导航栏功能，而其中用于导航的元素都是基于nav类进行扩展的。在Bootstrap导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。10.1Bootstrap框架图10-13Bootstrap导航栏预览效果

10.2.1页面结构分析10.2使用Bootstrap框架搭建简单页面

10.2.2页面搭建过程10.2使用Bootstrap框架搭建简单页面1．环境搭建与页面顶部导航的实现2．Banner区域页面搭建3．主体区域页面搭建4．Footer区域页面搭建

谢谢观看！