项目10 用Bootstrap重构网页课件.ppt

《项目10 用Bootstrap重构网页课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目10用Bootstrap重构网页《HTML5网页设计与实现》『作者』徐琴『时间』2015.61用Bootstrap重构网页——学习情境冰天美帝公司的小黄在网页学习的过程中，了解到目前有很多成熟的前端开发框架。因为利用框架技术可以极大地提高开发效率，所以小黄希望继续学习前端框架技术，能够利用框架快速布局页面、设置样式和添加动态效果。2前端开发框架随着Web技术的不断发展，前端开发框架层出不穷，各有千秋。目前比较流行的框架有Bootstrap、Foundation、jQueryUI、jQueryMobile、SenchaExtJS等。3Boot

2、strapBootstrap是由Twitter推出的Web前端框架。它是目前最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。它让前端开发更快速、简单，利用该框架开发者能快速上手、所有设备都可以适配、所有项目都能适用。4BootstrapBootstrap源文件下载好后，就可以将Bootstrap提供的编译好的CSS文件和JS文件（本项目将这些文件存放在css和js文件夹中）引入到中了：

3、otstrap.min.css">5栅格系统（GridS

4、ystem）Bootstrap为我们提供了一套响应式、移动设备优先的流式栅格系统，它将你的页面最多划分为12列，如果你的页面宽度是960px，最小的单元要素宽度就是80px。6Bootstrap的栅格参数超小屏幕手机(<768px)小屏幕平板(≥768px)中等屏幕桌面显示器(≥992px)大屏幕大桌面显示器(≥1200px)栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C.container最大宽度None（自动）750px970px1170px类前缀.col-xs-.col-sm-.col-md-.col-lg-

5、列（column）数12最大列（column）宽自动~62px~81px~97px槽（gutter）宽30px（每列左右均有15px）可嵌套是偏移（Offsets）是列排序是7布局容器Bootstrap需要为页面内容和栅格系统包裹一个.container容器，或者.container-fluid。.container类用于固定宽度并支持响应式布局的容器。...