发表于: 2018-08-29 22:36:02

1 639


今天完成的事情:任务七提交了,开始任务八九的学习。 
明天计划的事情:看一下 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 列。

我们也可以根据自己的需要,定义列数:

111111111111
444
48
66
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;元素隐藏,位置还在

  1. 从名字就可以看出明显的区别。display是设置元素的显示方法。display:none;设置元素不显示,这个时候元素会在页面的渲染流中消失。不占据任何空间。display并不会被继承。子节点消失是由于父元素从渲染流中消失造成,通过修改子节点的属性无法显示;
  1. visibility是规定元素是否可见。可见。也就是前提元素已经存在于渲染流了,通过设置属性值来更改其是否显示出来。visibility:hidden是继承属性,子节点消失是由于继承了hidden,通过设置visibility:visible,可以让子节点显示。






返回列表 返回列表
评论

    分享到