Defining a Horizontal Box Layout with SLDS

DEX601 - Unit 5 Implementing Navigation and Layouts

📄 第 374 页 🎬 视频课程

课程章节介绍

让我们来聊聊如何使用Salesforce Lightning Design System(SLDS)中的类来定义一个水平箱布局。这个布局可以帮助我们在页面上并排显示内容,就像你在代码中看到的那样。 首先,我们有一个`
`元素,它使用了`slds-grid`类。这个类告诉浏览器,我们要创建一个网格布局。网格布局是一种非常灵活的方式,可以让我们在页面上排列内容,无论是水平还是垂直。 在这个网格内部,我们有两个`
`元素,每个都使用了`slds-col`类。这个类表示这些`
`是网格中的列。默认情况下,这些列会平均分配可用空间,所以它们会并排显示,每个占据大约一半的宽度。 所以,这段代码的效果就是创建了一个包含两列的布局,第一列显示“这是第1列”,第二列显示“这是第2列”。这两列会水平排列,占据页面的宽度。 这类似于你在表格中看到的行和列,但更加灵活和现代化。你可以根据需要添加更多的列,或者调整列的宽度,来创建复杂的布局。希望这个解释对你有帮助!