本帖最后由 谷粒姐姐 于 2018-5-11 14:15 编辑
1.1 案例二：使用BootStrap设计一个响应式的页面：1.1.1 需求：设计一套页面能够通用在不同的设备上,在手机,pad上,电脑上都可以浏览这个网页,而不影响正常的浏览的方式. 1.1.2 分析：1.1.2.1 技术分析：【BootStrap的概述】 Ø 什么是BootStrap Ø BootStrap可以在那些地方使用: BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问. Ø BootStrap的使用: 下载BootStrap: 引入的文件 添加一个<meta>标签： 【BootStrap的全局CSS】 BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用. Ø 布局容器： Ø 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 使用.row样式定义栅格的行. 定义列：.col-lg-n .col-md-n .col-sm-n .col-xs-n Ø 排版： 【BootStrap的组件】 【BootStrap的JS的插件】 1.1.3 代码实现
| 
收藏
淘帖
踩
