发表于: 2018-08-29 22:36:02
1 636
今天完成的事情:任务七提交了,开始任务八九的学习。
明天计划的事情:看一下 Bootstrap4 和flex弹性盒子。了解之后开始做任务。试着做。
遇到的问题:不太懂bootstrap 4 也不知道从哪里问起来 。怎么在CSS里插入这个框架,插在head里面还是哪里。这些都不清楚。盲人摸象了。看资料看不懂,一些网格系统类理解容易 没用过,用起来会遇到麻烦,也不知道什么时候需要用 ,用在哪里 效果怎么样。很迷茫。
收获:
Bootstrap 4
移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
width=device-width
表示宽度是设备屏幕的宽度。
initial-scale=1
表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
容器类
Bootstrap 4 需要一个容器元素来包裹网站的内容。
我们可以使用以下两个容器类:
- .container 类用于固定宽度并支持响应式布局的容器。
- .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
我们也可以根据自己的需要,定义列数:
1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
4 | 4 | 4 | |||||||||
4 | 8 | ||||||||||
6 | 6 | ||||||||||
12 |
Bootstrap 4 的网格系统是响应式的,列会根据屏幕大小自动重新排列。
网格类
Bootstrap 4 网格系统有以下 5 个类:
- .col- 针对所有设备
- .col-sm- 平板 - 屏幕宽度等于或大于 576px
- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
- .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
- .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
网格系统规则
Bootstrap4 网格系统规则:
- 网格每一行需要放在设置了
.container
(固定宽度) 或.container-fluid
(全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距。 - 使用行来创建水平的列组。
- 内容需要放置在列中,并且只有列可以是行的直接子节点。
- 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
- 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
- 网格列是通过跨越指定的 12 个可用列来创建。 例如,设置三个相等的列,需要使用用三个.col-sm-4 来设置。
- Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox(弹性盒子) 而不是浮动。 Flexbox 的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列 。
任务七总结
自己的脑图:
任务总结:
1. vw和vh
()vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位1,代表类似于1%。
视窗(Viewport)是你的浏览器实际显示内容的区域,换句话说是你的不包括工具栏和按钮的网页浏览器。
vw:视窗宽度的百分比(1vw 代表视窗的宽度为1%)
vh:视窗高度的百分比
2.opacity会继承父元素的opacity属性,而RGBA设置的元素的后代不会继承该属性及属性值。
3.
opacity:0;元素隐藏,位置还在
display:none;元素节点不存在。
visibility:hidden;元素隐藏,位置还在
- 从名字就可以看出明显的区别。display是设置元素的显示方法。display:none;设置元素不显示,这个时候元素会在页面的渲染流中消失。不占据任何空间。display并不会被继承。子节点消失是由于父元素从渲染流中消失造成,通过修改子节点的属性无法显示;
- visibility是规定元素是否可见。可见。也就是前提元素已经存在于渲染流了,通过设置属性值来更改其是否显示出来。visibility:hidden是继承属性,子节点消失是由于继承了hidden,通过设置visibility:visible,可以让子节点显示。
评论