20200820+袁鑫

知识总结：

媒体查询，响应式都是css3的内容

文本不换行，但是超出用省略号表示

overflow:hidden;

text-overflow:ellipsis;

white-space:nowarp;

栅格布局

web网页布局方式：

• table布局（简单容易控制，但是语义错误 渲染效率低）
• div+css布局（语义正确，渲染效率高，但是控制起来很麻烦）
• 栅格布局（简单，容易控制，语义正确，渲染效率高，支持响应式，但是太复杂的网页不建议使用）

什么是栅格布局？

​ 随屏幕或者视口(viewport)尺寸的增加，系统会自动分为最多12列，通过一系列的行(row)与列(column)的组合来创建页面布局。

栅格的使用

​ 注意：.row必须写在.container或者.container-fluid中

​ 注意：如果只使用col而不加数字，系统会自动处理布局，甚至一行可以会超过12个col

列偏移（offset-n n:1-11）：

​ 相当于margin-left 向右移动多少份

弹性布局

​ 弹性容器：

​ d-flex/d-inline-flex

​ 一般类名都是flex加属性

按钮组(btn-group)

​ btn-group-vertical创建垂直的按钮组

​ btn-group-lg/sm/xs 设置按钮组的大小

​ btn-toolbar 按钮工具栏

下拉菜单（dropdown）

注意要自定义类：data-toggle="dropdown" （事件）

dropup(上弹出)dropleft(左弹出)dropright(右弹出)

dropdown-header 下拉菜单中的标题

active 和 disabled 类可用于 下拉菜单中的可用项和禁用项

心得

今天的学习任务有点重， 自己很多东西都只是知道是怎么回事，还没有一一落实到都去用一遍，今天都在写huawei官网，但是有个布局问题出现了问题，我慢慢改了半天，后来还是选择了重新开始，这无疑是个教训，可能就是写的官网太少了 格局不够。明天加油！