项目10用Bootstrap重构网页介绍.ppt

芜湖职业技术学院 * 项目10 用Bootstrap重构网页 《HTML5网页设计与实现》 『作 者』徐 琴 『时 间』2015.6 用Bootstrap重构网页——学习情境 冰天美帝公司的小黄在网页学习的过程中，了解到目前有很多成熟的前端开发框架。因为利用框架技术可以极大地提高开发效率，所以小黄希望继续学习前端框架技术，能够利用框架快速布局页面、设置样式和添加动态效果。 * 前端开发框架 随着Web技术的不断发展，前端开发框架层出不穷，各有千秋。目前比较流行的框架有Bootstrap、Foundation 、jQuery UI、jQuery Mobile、Sencha Ext JS等。 * Bootstrap Bootstrap是由Twitter推出的Web前端框架。它是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。它让前端开发更快速、简单，利用该框架开发者能快速上手、所有设备都可以适配、所有项目都能适用。 * Bootstrap Bootstrap源文件下载好后，就可以将Bootstrap提供的编译好的CSS文件和JS文件（本项目将这些文件存放在css和js文件夹中）引入到head中了： !-- 新 Bootstrap 核心 CSS 文件 -- link rel=stylesheet href= css/bootstrap.min.css !-- 可选的Bootstrap主题文件（一般不用引入） -- link rel=stylesheet href= css/bootstrap-theme.min.css !-- jQuery文件。务必在bootstrap.min.js 之前引入 -- script src=js/jquery-1.11.2.min.js/script !-- 最新的 Bootstrap 核心 JavaScript 文件 -- script src=js/bootstrap.min.js/script * 栅格系统（Grid System） Bootstrap为我们提供了一套响应式、移动设备优先的流式栅格系统，它将你的页面最多划分为12列，如果你的页面宽度是960px，最小的单元要素宽度就是80px。 * Bootstrap 的栅格参数 超小屏幕 手机 (768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C .container 最大宽度 None （自动） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 列（column）数 12 最大列（column）宽 自动 ~62px ~81px ~97px 槽（gutter）宽 30px （每列左右均有 15px） 可嵌套 是 偏移（Offsets） 是 列排序 是 * 布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，或者.container-fluid。 .container 类用于固定宽度并支持响应式布局的容器。 div class=container ... /div .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 div class=container-fluid ... /div * 样式及组件 在Bootstrap中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局;.img-rounded可以设置圆角边框图片效果；.img-sircle设置圆形图片效果；.img-thumbnail设置白边框效果。 .center-block的效果是让内容块居中。 .clearfix的效果是清除浮动。 Bootstrap使用的是?Glyphicon Halflings 的图标字体。 * JS插件 Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动，可以简单地一次性引入所有插件，或者逐个引入到页面中。 * 练习题 * 利用Bootstrap框架制作出如下图所示的表单效果。 练习题 利用Bootstrap制作如下图所示的分页效果。 * * THANK YOU! 项目10 用Bootstrap重构网页 《HTML5网页设计与实现》 芜湖职业技术学院