冯娜 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. 导航栏:水平导航栏、垂直导航栏、高亮显示、折叠导航栏、其他导航栏。

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

标签

评论

this is is footer