布局和版面

列表

一栏列表

• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项

<ul>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
</ul>

两栏列表

• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项

<ul class="columns-2">
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
</ul>

三栏列表

• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项

<ul class="columns-3">
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
    <li>这是一个列表项</li>
</ul>

列表多栏只在较大的显示器上显示，较小显示器，例如手机，将自动调整为一栏列表。

无序列表第二种样式

• 这是一个列表项
• 这是一个列表项
• 这是一个列表项
• 这是一个列表项

<ul class="alt">

  <li>这是一个列表项</li>

  <li>这是一个列表项</li>

  <li>这是一个列表项</li>

  <li>这是一个列表项</li>

</ul>

有序列表第二种样式

1. 这是一个列表项
2. 这是一个列表项
3. 这是一个列表项
4. 这是一个列表项

<ol class="alt">

  <li>这是一个列表项</li>

  <li>这是一个列表项</li>

  <li>这是一个列表项</li>

  <li>这是一个列表项</li>

</ol>

步骤导航

使用说明

使用于指导完成一个多步骤的程序，例如申请加入学联会。

1. 下载并填写申请表

   加入学联会，成为众多精彩活动的策划者、组织者和领导者。无论你有何经验，我们都会为您提供相关工作的帮助和指导。您作为学联会的一员，还可享受到众多精彩活动，构建更大的社交圈，并获得由学校授予的实践证书。

   下载申请表
   申请加入学联会

2. 提交申请表

   将填写好的申请表发送至 hr@trucssa.ca，我们会尽快与你联系。

[steps]
[step]
<h3>下载并填写申请表</h3>
加入学联会，成为众多精彩活动的策划者、组织者和领导者。无论你有何经验，我们都会为您提供相关工作的帮助和指导。您作为学联会的一员，还可享受到众多精彩活动，构建更大的社交圈，并获得由学校授予的实践证书。
<a class="button action" href="https://trucssa.ca/wp-content/uploads/2020/12/TRUSU-CSSA-Board-Enrollment-Application.pdf"><strong>下载申请表</strong>
申请加入学联会</a>
[/step]
[step]
<h3>提交申请表</h3>
将填写好的申请表发送至 <a href="mailto:hr@trucssa.ca">hr@trucssa.ca</a>，我们会尽快与你联系。
[/step]
[/steps]

用

和

作为外壳包裹所有具体的

和 包裹每一个具体的步骤，每一个具体步骤内的标题请使用 <h3>。

字体颜色

blue

grey

red

white

标签

这是一个标签

[label]这是一个标签[/label]

颜色背景

边框

<div class="panel border">这里是文字内容</div>

边距

v1pad

v2pad

v3pad

v1top

v2top

v3top

v1bottom

v2bottom

v3bottom

h1pad

h2pad

h3pad

可展开项

可展开项标题

这里是可展开项的内容部分。内容部分默认隐藏，只有在点击可展开项标题后，内容才会展开。这里是可展开项的内容部分。内容部分默认隐藏，只有在点击可展开项标题后，内容才会展开。这里是可展开项的内容部分。内容部分默认隐藏，只有在点击可展开项标题后，内容才会展开。

[accordion title="可展开项标题"]

这里是可展开项的内容部分。内容部分默认隐藏，只有在点击可展开项标题后，内容才会展开。这里是可展开项的内容部分。内容部分默认隐藏，只有在点击可展开项标题后，内容才会展开。这里是可展开项的内容部分。内容部分默认隐藏，只有在点击可展开项标题后，内容才会展开。

[/accordion]

选项卡

<div id="tabs">
    <ul>
        <li><a href="#tab-1">标题一</a></li>
        <li><a href="#tab-2">标题二</a></li>
        <li><a href="#tab-3">标题三</a></li>
    </ul>
    <div id="tab-1">
        这里显示标题一的内容。这里显示标题一的内容。这里显示标题一的内容。这里显示标题一的内容。这里显示标题一的内容。这里显示标题一的内容。这里显示标题一的内容。这里显示标题一的内容。
    </div>
    <div id="tab-2">
        这里显示标题二的内容。这里显示标题二的内容。这里显示标题二的内容。这里显示标题二的内容。这里显示标题二的内容。这里显示标题二的内容。这里显示标题二的内容。这里显示标题二的内容。
    </div>
    <div id="tab-3">
        这里显示标题三的内容。这里显示标题三的内容。这里显示标题三的内容。这里显示标题三的内容。这里显示标题三的内容。这里显示标题三的内容。这里显示标题三的内容。这里显示标题三的内容。
    </div>
</div>

动画

新增功能

为页面中的显示内容增加动画功能。请注意一个页面中的动画应该是辅助，不要增加过多的动画以免影响页面渲染速度或喧宾夺主。动画添加的方式是在标签后添加 data-aos=“动画名称” 参数。可以参考下面的添加方式：

为 div 元素添加动画

<div data-aos="fade-up" class="panel bg-tru">这里是元素内容，这里是元素内容</div>

为文本段落添加动画

这里是文本段内容，这里是元素内容，这里是元素内容

<p data-aos="fade-up">这里是文本段内容，这里是元素内容，这里是元素内容</p>

动画表

其它辅助动效参数

data-aos-duration="3000", data-aos-easing="linear", data-aos-offset="300", data-aos-anchor="#example-anchor", data-aos-delay="300"

Anchor Placements

• top-bottom
• top-center
• top-top
• center-bottom
• center-center
• center-top
• bottom-bottom
• bottom-center
• bottom-top

Easing Options

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• ease-in-back
• ease-out-back
• ease-in-out-back
• ease-in-sine
• ease-out-sine
• ease-in-out-sine
• ease-in-quad
• ease-out-quad
• ease-in-out-quad
• ease-in-cubic
• ease-out-cubic
• ease-in-out-cubic
• ease-in-quart
• ease-out-quart
• ease-in-out-quart