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官网,但是有个布局问题出现了问题,我慢慢改了半天,后来还是选择了重新开始,这无疑是个教训,可能就是写的官网太少了 格局不够。明天加油!

标签

评论

this is is footer