学习目标
完成本单元后，您将能够：
- 使用Design System设计一个基本的Visualforce页面。
- 描述设计系统的类结构和块元素修饰符（BEM）语法。
创建一个首页
在本模块其余部分的过程中，我们将使用设计系统构建Visualforce页面。让我们创建第一个Visualforce页面并包含设计系统。然后，我们将通过测试页面来解释设计系统的类结构。
进入安装程序，然后为“页面”快速查找，创建一个Visualforce页面。完成表格如下：
- 标签:
Trailhead_SLDS_Basic - 名称: 应该自动默认为
Trailhead_SLDS_Basic
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Salesforce Lightning Design System Trailhead Module</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 导入设计系统样式表-->
<apex:slds />
</head>
<body>
<!-- 需要的SLDS包装-->
<div class="slds-scope">
<!-- MASTHEAD -->
<p class="slds-text-heading--label slds-m-bottom--small">
Salesforce Lightning Design System Trailhead Module
</p>
<!-- / MASTHEAD -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<!-- 部分 - 徽章组件 -->
<section aria-labelledby="badges">
<h2 id="badges" class="slds-text-heading--large slds-m-vertical--large">Badges</h2>
<div>
<span class="slds-badge">Badge</span>
<span class="slds-badge slds-theme--inverse">Badge</span>
</div>
</section>
<!-- / SECTION - BADGE COMPONENTS -->
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
</div>
<!-- / 需要的SLDS包装 -->
</body>
</html>
</apex:page>
看起来像新的闪电设计，而不必自己写任何CSS。相当漂亮，是吧？
哦，不要为这些徽章数量太多而感到兴奋。他们是设计系统的组件，而不是Trailhead徽章！我们很乐意帮助你创造自己的，但是Trailhead警察会感到不安。
虽然这个例子非常简单，但它引入了很多设计系统的概念。在进入更多令人兴奋的布局之前，我们会对这些进行评估
与所有Visualforce页面一样，标记的外层包装是<apex：page>元素。
在你的html标签上，一定要包含xmlns =“http://www.w3.org/2000/svg”xmlns：xlink =“http://www.w3.org/1999/xlink”属性。这对于在Visualforce中启用对SVG图标精灵贴图的支持非常重要。注意：我们的示例显示标题，侧栏和内置样式表已关闭。目前，如果您需要使用Salesforce标题或侧栏，则无法在<html>元素上指定额外的属性。在这种情况下，不支持SVG图标。
在我们的<head>部分，我们使用<apex：slds />导入设计系统，它将加载文档中的CSS。
现在进入包含我们的第一个设计系统标记的<body>标签。我们将一行一行地通过它。由于有相当多的事情发生，我们建议在您最喜欢的编辑器中同时打开页面。我们走吧。
每次在Visualforce中使用“设计系统”标记时，都应将其放在具有slds-scope作用域类的外部包装器<div>中。每次。无论您是否拥有Visualforce标题并留下导航，或者不是。得到它了？它会在稍后的测验中。
接下来我们有一个简单的桅杆头标签，其中应用了两个设计系统类。首先，slds-text-heading – 标签应用文本标题样式。第二个类slds-m-bottom-small是一个间隔工具类，用于在标题下添加一些填充。你可能会问这些疯狂的类名是什么？这是双下划线错字？继续阅读，所有将被解释。
在<section>元素中，我们有另一个标题，这次是<h2>，用slds-m-vertical-large spacing工具类来添加顶部和底部填充。
您可能会惊讶于需要明确添加此垂直填充。重要的是要记住，设计系统侧重于应用程序的构建，而不是布置网页。因此，从排版中删除了默认页边距，以便应用程序生成器可以精确地指定他们需要的内容。
最后，我们看到我们的第一个真正的设计系统组件，一个徽章组件。其实有两个，但是谁在计数？每个通过将一个slds-badge类应用到span元素来创建。第二个徽章有一个slds主题 – 逆主题实用程序类，以反转配色方案。请注意如何将多个Design System类应用于同一个元素以逐步自定义它。在这种情况下应用徽章样式，然后反转颜色。稍后你会在模块中看到更多的内容。
这里的所有都是它的！布置你的标记，并应用相应的设计系统类为最新的闪电视觉设计。看马，没有CSS！
所有的设计系统类都记录在设计系统网站上。
SLDS类命名
在我们继续之前，让我们先谈谈在Design System类名称中提到的那些双连字号。我们的CSS使用一个叫做块元素修饰语法（BEM）的标准类命名约定来使得类名不那么含糊：
- 块表示高级组件（例如.car）
- 元素表示组件的后代（例如.car_door）
- 修饰符表示块或元素的特定状态或变体（例如，车门 – 红色）
现在炙手可热的问题，为什么双连字符和下划线？首先，他们可以更容易地看到CSS规则正在被应用（通过分离出块/元素和修饰符）。而且，使用双精度而不是单个连字符和下划线表示块或修饰符本身可以包含连字符或下划线，例如.slds-button__icon-x-small。给它一个去，我们认为你会发现它一样有用，因为我们一旦你习惯了。