全部文档

【行】的基本概念和应用

更新时间:2024年9月6日

一、行的基本概念

1.在响应式建站中,【行】是相当重要的概念,它对我们网站在规划布局的时候是必不可少的。【行】的一些特性如下:

  • 行可以进行拆分,可以分成多【列】,行在拆分的时候有单位,例如24代表的是一行一列,12+12代表的是一行两列,无论怎么拆分必须等于24。
  • 【行】里面可以含有N个【组件】,当我们移动整行时,在【行】内的组件会一起跟随移动,相当于一个小“容器”
  • 【行】不属于组件,在添加【组件】时,每个【组件】都会天生自带【行】,也就是说在添加任意【组件】的时候,他本身就占据一行了
  • 【行】与【行】之间是隔离的,一行里面不会再嵌套另外一行
  • 删除【行】的时候,会将行内的所有【组件】一并删除

 

二、行的操作和应用

案例一:将一行一列拆分成一行两列,左边一列放文字,右边一列放图片。

1.随便添加任意一个组件,这里因为我们需要用到文字或者图片,我这里直接添加一个组件【图片】。

2.找到【行】里面的【行布局】,我们可以看到当前是一行一列(24),我们可以输入12+12或者直接点预设布局,把行进行拆分分列,点击保存。

保存后的效果如下图,我们会发现把【行】分成两列后,右边这一列多出来了一个加号添加按钮,这时候我们就可以往第二列添加我们需要的【组件】【富文本】了,同时可以看到现在有多个添加按钮,它们都有各自的用途。

3.点击第二列的添加按钮,添加【组件】【富文本】。

添加后如下图,后续我们可以自由设置对应列内的组件的参数了,如替换图片,修改文字。

案例二:将一行一列拆分成一行三列,第一列放图片,第二列放文字,第三列放视频,第一列占据一半的宽度。

1.随便添加任意一个组件,这里因为我们需要用到文字或者图片,我这里直接添加一个组件【图片】。

2.找到【行】里面的【行布局】,我们可以看到当前是一行一列(24),我们可以输入12+6+6(必须等于24),把行进行拆分分成一行三列,第一列占据了一半的宽度,点击保存。

保存后变成一行三列,如下图。

3.往对应的【列】内添加需要的【组件】,添加后如下图。

案例三:调整【行】内组件的位置,如将第一列的组件移动到第二列。

案例四:调整现有【行】布局,如新增列会在右侧继续增加空白【列】,而减少【列】会删除列内已有的【组件】。

案例五:用【行复制】复制一模一样的行,包含里面的组件。

 

意见反馈