文档布局

文档布局是一个用于文档页面的双列模式——左侧是描述，右侧是代码——在移动设备上折叠为单列。

结构

使用 .doc 作为外部包装，.doc-section 作为每一行。每个部分都有 .doc-section--description 和 .doc-section--code 列。

基本部分

一个典型的部分将描述块与代码片段配对。

演示内容

<div class="doc">
  <div class="doc-section">
    <div class="doc-section--description">
      <h3>Title</h3>
      <p>Description</p>
    </div>
    <div class="doc-section--code">
      <!-- code snippet -->
    </div>
  </div>
</div>

带有代码块

在 .doc-section--code 内使用代码块部分以获取语法高亮示例。

演示内容

{{ include('@Bundle/partials/code-block.html.twig', {
  lang: 'bash',
  code: 'curl https://api.example.com/resource'
}) }}