顺义建站:如何用CSS网格复制Bootstrap网格

2019.07.01 顺义建站

190

在过去的几年里各种各样的方法用于创建网页布局。CSS网格是最新的,也可能是最改变游戏布局的技术之一,我们可以使用。如果你还没有开始修补它,现在是时候了。对于定位内容,这是一种完全不同的思维方式,目前在所有流行的Web浏览器中几乎都得到了完全的支持。

为了复制Bootstrap 3网格系统的大部分功能,我们只需要CSS Grid提供的一小部分功能。

我们将复制的Bootstrap 3网格系统中引入的关键概念是,能够为每个响应断点显式定义网格容器的比例。相比之下,Bootstrap 2只为桌面设置比例,任何小于767 px的视口都会将所有网格项呈现为全宽度,垂直叠加在一列中。

首先,我们可以定义类名,类似于Bootstrap 3中使用的类名:顺义建站

  • .row

    对于网格容器
  • .col-[screenSize]-[numColumns]

    对于网格项,其中

    [screenSize]

    是我们的缩写之一(xs,sm,md,lg,xl)和

    [numColumns]

    是从1到12的数字。

要使用CSS网格,我们只需应用display: grid敬我们row班级:

优于Bootstrap 3

这个CSS网格实现与Bootstrap 3的网格相比有几个优点:

1.一行中的所有项目都与最高项的高度相匹配。.

  • 在引导带3,不同的项目高度会导致包装项目的位置不当,这是一个大的头痛。

2.不需要物品内部的元素来利用水槽。

  • 引导3的沟槽被应用于项目容器中的内容,而不是容器本身。如果您希望在项目上有边框或背景色,以便在它们之间有一个凹槽空间,则必须在网格项中包含另一个元素。顺义建站
  • 在CSSGrid中,您可以将边框和背景直接应用到项上,并且它将使排水沟保持为空。

3.没有令人尴尬的四舍五入百分比。

  • 引导3依赖于精心四舍五入的百分比与重复的小数。
  • CSSGrid使用显式定义的分数,并为我们计算。

4.无负差攻击。

  • 引导3沟槽是精心制作的,在每一项上填充,并将负边距应用于行,以否定每一行第一项上的填充。
  • CSSGrid提供了合适的开箱即用的排水沟。顺义建站

5.没有明确的修补程序。.

  • 引导3网格项被左浮动包装,并依靠清除黑客推动下的内容。


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP