冯娜 8 20

学习日志

今天学习了BootStrap的响应式布局，栅格布局，弹性布局，组件。

一、BootStrap的响应式布局：

1. 什么是BootStrap的响应式布局： 响应式网页/自适应布局(Responsive Web Page)，根据浏览器设备的不同(pc、pad、phone、print)而自动改变页面布局，图片文字的效果，不影响用户体验 。
2. 响应式网页的构成：流式布局、文字和图片的大小随着容器的大小而改变、使用CSS提供的媒体查询技术。
3. 测试响应式网页：使用真实物理设备测试、使用第三方模拟器软件测试、使用浏览器提供的设备模拟器测试。
4. 手写响应式网页：移动端响应式，需要设置视口、媒体查询、屏幕划分。

二、栅格布局：

1. 什么是栅格布局： 随屏幕或者视口(viewport)尺寸的增加，系统会自动分为最多12列，通过一系列的行(row)与列(column)的组合来创建页面布局 。
2. 工作原理： 每行12列，通过不同的列来划分元素的占地宽度，内容放置在column中，只有列可以做row的直接子元素 。
3. 不同屏幕上的兼容性问题
4. 栅格的使用：父级要写：.row；子元素要写：.col-n。
5. 响应式栅格布局
6. 列偏移

三、弹性布局：

1. 弹性容器
2. 主轴的方向
3. 主轴排列方式
4. 交叉轴排列
5. 主轴换行
6. 内容垂直对齐
7. 单个元素对齐
8. 设置子元素等宽
9. 扩展
10. 收缩
11. 排列

四、组件：

1. 按钮组：
   按钮
   按钮
   按钮
   按钮
2. 下拉菜单：结构：父元素div：.dropdown|.dropup|.dropleft|.dropright。
3. 信息提示框：alert、提示框样式、提示框添加链接、关闭提示框、提示框动画、事件。
4. 导航：水平导航、垂直导航、选项卡导航、胶囊导航、面包屑导航。
5. 导航栏：水平导航栏、垂直导航栏、高亮显示、折叠导航栏、其他导航栏。

今天的学习量对我来说很大，没有听懂...