web09

###Bootstrap

• 此框架是目前比较流行的前端框架,基于html/css/javascript/jQuery,由Twitter公司研发,框架作用:提高前端页面的开发效率
• 工作原理:Bootstrap框架提供了n种常见的样式效果(提前写好了市面中常见的样式代码),在前端页面开发时,如果需要使用这些常见样式时只需要给元素添加特定的class属性即可,这个class属性填写什么由Bootstrap框架决定, 具体class值参考Bootstrap开发文档
• 学习Bootstrap框架主要学习的就是如何从文档中找到自己想要的效果,复制粘贴即可

###如何使用Bootstrap框架

1. 下载框架文件

• 访问doc.canglaoshi.org 找到web开发文档中 BootStrap v3.3.7 Starter下载
• 加压出里面的两个文件夹(Bootstrap和template),把两个文件夹复制到工程的2003web下面
• 以后创建页面复制starter.html改名字,不再新建html页面

###文档介绍

• 文档位置: 苍老师文档服务器
• 全局CSS样式: 对某个元素的样式修改比如:按钮/图片/表单
• 组件:多个元素的组合称为组件

###按钮相关 参考代码及文档:01.html
###字体图标 参考代码及文档:02.html
###导航组件 参考代码及文档:03.html

###响应式布局

• 根据不同的设备显示不同的样式及页面结构
• 有哪些设备:手机/pad平板/桌面显示器/大显示器(高分辨率屏幕或电视)
• 媒体查询: 是Bootstrap框架中实现响应式布局的实现方式.
  ###栅格系统 参考文档