diff --git a/admin/public/css/card.css b/admin/public/css/card.css new file mode 100644 index 0000000000000000000000000000000000000000..1d1dcf722aa2ce5b8178121799fcedd4100f77ef --- /dev/null +++ b/admin/public/css/card.css @@ -0,0 +1,25 @@ +.app-card .card-body p { + margin-bottom: .75rem; +} +.app-card li.caption { + height: 2rem; + line-height: 2rem; + margin-bottom: .75rem; + font-size: 1.6rem; + font-weight: bold; +} +.app-card .demo-row:before { + width: 80px; + height: 2rem; + line-height: 2rem; + text-align: right; + top: 0; + left: -55px; + padding: 0; + margin: 0; + font-size: 1.8rem; + font-weight: bold; +} +.app-card .caption:nth-child(3), .app-card .caption:nth-child(5) { + margin-top: .75rem; +} diff --git a/admin/views/components/card.njk b/admin/views/components/card.njk index 3bd7248678476148c6eeea06a24a0d30dff13b0c..4728347f24459fc52fd2f5a427568536f52b2432 100644 --- a/admin/views/components/card.njk +++ b/admin/views/components/card.njk @@ -1,16 +1,14 @@ {% extends "../layouts/_base.njk" %} {% block title %} - 公告板 Button + 公告板 card {% endblock %} -{% block js_head %} - +{% block css %} + {% endblock %} {% block content %} -
-
提示内容222
-
-
+ +
@@ -23,7 +21,7 @@
    -
  1. 示例
    2. +
  2. 示例
  3. 卡片的标记和样式尽可能少，但仍能提供大量控制和自定义功能。它们与flexbox一起构建，可以轻松对齐并与其他Bootstrap组件很好地混合。它们margin默认情况下没有，因此请根据需要使用空格实用程序。 以下是具有混合内容和固定宽度的基本卡的示例。卡没有固定的宽度开始，因此它们自然会填满其父元素的整个宽度。通过我们的各种尺寸选择，可以轻松自定义此尺寸。 @@ -56,10 +54,10 @@
      -
    1. 标题，文本和链接
      2. -
    2. 卡片标题通过添加.card-title到标签来使用。以相同的方式，通过添加.card-link到标签来添加链接并将链接彼此相邻放置。 +
    3. 标题，文本和链接
      4. +
    4. 卡片标题通过添加.card-title到<h*>标签来使用。以相同的方式，通过添加.card-link到标签来添加链接并将链接彼此相邻放置。 - 字幕通过.card-subtitle在标签中添加来使用。如果将.card-title和.card-subtitle项目放在一个.card-body项目中，则卡片标题和副标题会很好地对齐。 + 字幕通过.card-subtitle在<h*>标签中添加来使用。如果将.card-title和 .card-subtitle项目放在一个.card-body项目中，则卡片标题和副标题会很好地对齐。
    @@ -89,8 +87,8 @@
      -
    1. 图片
      2. -
    2. .card-img-top将图像放置在卡的顶部。使用.card-text，可以将文本添加到卡中。其中的文本.card-text也可以使用标准HTML标记设置样式。 +
    3. 图片
      4. +
    4. .card-img-top将图像放置在卡的顶部。使用.card-text，可以将文本添加到卡中。其中的文本.card-text也可以使用标准HTML标记设置样式。
    @@ -117,7 +115,7 @@
      -
    1. 清单群组
      2. +
    2. 清单群组
    3. 在带有刷新列表组的卡中创建内容列表。
    @@ -164,7 +162,7 @@
      -
    1. 厨房水槽
      2. +
    2. 厨房水槽
    3. 混合并匹配多种内容类型以创建所需的卡，或将所有内容丢在其中。下面显示的是图像样式，块，文本样式和列表组，它们都包裹在定宽卡中。
    @@ -201,7 +199,7 @@
      -
    1. 页眉和页脚
      2. +
    2. 页眉和页脚
    3. 在卡中添加可选的页眉和/或页脚。
    @@ -284,10 +282,10 @@
      -
    1. 尺寸
      2. -
    2. 卡片没有具体规定width，因此除非另有说明，否则卡片的宽度为100％。您可以根据需要使用自定义CSS，网格类，网格Sass mixins或实用程序来更改此设置。 +
    3. 尺寸
      4. +
    4. 卡片没有具体规定width，因此除非另有说明，否则卡片的宽度为100％。您可以根据需要使用自定义CSS，网格类，网格Sass mixins或实用程序来更改此设置。
      5. -
    5. 使用网格标记
      6. +
    6. 使用网格标记
    7. 使用网格，根据需要将卡包装在列和行中。
    @@ -328,7 +326,7 @@
      -
    1. 使用实用程序
      2. +
    2. 使用实用程序
    3. 使用我们少数可用的大小调整实用程序来快速设置卡片的宽度。
    @@ -344,7 +342,10 @@ 按钮
    - +
    +
    +
    +
    卡标题
    @@ -364,7 +365,7 @@
      -
    1. 使用自定义CSS
      2. +
    2. 使用自定义CSS
    3. 在样式表中或作为内联样式使用自定义CSS来设置宽度。
    @@ -392,7 +393,7 @@
      -
    1. 文字对齐
      2. +
    2. 文字对齐
    3. 您可以使用我们的文本对齐类快速更改任何卡的整体或特定部分的文本对齐方式。
    @@ -408,7 +409,10 @@ 去某地
    - +
    +
    +
    +
    特殊标题处理
    @@ -416,7 +420,10 @@     去某地
    - +
    +
    +
    +
    特殊标题处理
    @@ -436,7 +443,7 @@
      -
    1. 导航
      2. +
    2. 导航
    3. 使用Bootstrap的nav组件在卡的头（或块）中添加一些导航。
    @@ -505,7 +512,7 @@
      -
    1. 图像帽
      2. +
    2. 图像帽
    3. 与页眉和页脚相似，卡片可以包含顶部和底部的“图像上限”，即图像顶部或底部的图像。
    @@ -544,7 +551,7 @@
      -
    1. 图像叠加
      2. +
    2. 图像叠加
    3. 将图像变成卡片背景并覆盖卡片的文本。根据图像，您可能需要也可能不需要其他样式或实用程序。
    @@ -575,8 +582,8 @@
      -
    1. 卧式
      2. -
    2. 结合使用网格和实用程序类，可以以移动友好且响应迅速的方式使卡水平放置。在下面的示例中，我们使用删除网格装订线，.no-gutters并使用.col-md-*类使卡在md断点处水平。根据您的卡内容，可能需要进一步调整。 +
    3. 卧式
      4. +
    4. 结合使用网格和实用程序类，可以以移动友好且响应迅速的方式使卡水平放置。在下面的示例中，我们使用删除网格装订线，.no-gutters并使用.col-md-*类使卡在md断点处水平。根据您的卡内容，可能需要进一步调整。
    @@ -612,10 +619,10 @@
      -
    1. 卡片样式
      2. +
    2. 卡片样式
    3. 卡片包含用于自定义背景，边框和颜色的各种选项。
      4. -
    4. 背景和颜色
      5. +
    5. 背景和颜色
    6. 使用文本和背景实用程序来更改卡的外观。
    @@ -694,8 +701,8 @@
      -
    1. 边框
      2. -
    2. 使用边界实用程序仅更改border-color卡的。请注意，您可以将.text-{color}类放在父级.card或卡内容的子集中，如下所示。 +
    3. 边框
      4. +
    4. 使用边界实用程序仅更改border-color卡的。请注意，您可以将.text-{color}类放在父级.card或卡内容的子集中，如下所示。
    @@ -773,8 +780,8 @@
      -
    1. Mixins实用程序
      2. -
    2. 您还可以更改卡上的页眉和页脚所需的边界，甚至删除其background-color用.bg-transparent。 +
    3. Mixins实用程序
      4. +
    4. 您还可以更改卡上的页眉和页脚所需的边界，甚至删除其background-color用.bg-transparent。
    @@ -804,11 +811,11 @@
      -
    1. 卡布局
      2. +
    2. 卡布局
    3. 除了在卡片中设置内容的样式外，Bootstrap还提供了一些用于布置一系列卡片的选项。目前，这些布局选项尚未响应。
      4. -
    4. 卡组
      5. -
    5. 使用卡组将卡呈现为具有相等宽度和高度列的单个附加元素。卡组从堆叠开始，并用于display: flex;从sm断点开始以统一的尺寸连接。 +
    6. 卡组
      7. +
    7. 使用卡组将卡呈现为具有相等宽度和高度列的单个附加元素。卡组从堆叠开始，并用于display: flex;从sm断点开始以统一的尺寸连接。
    @@ -856,7 +863,7 @@
      -
    1. 卡套
      2. +
    2. 卡套
    3. 需要一组彼此不连接的宽度和高度相等的卡吗？使用卡片组。
    @@ -943,7 +950,7 @@
      -
    1. 网格卡
      2. +
    2. 网格卡
    3. 使用Bootstrap网格系统及其.row-cols类来控制每行显示多少个网格列（卡周围）。例如，这里.row-cols-1将卡片布置在一列上，然后.row-cols-md-2从中等的断点开始，将四张卡片分成相等的宽度，跨多行。
    @@ -1091,10 +1098,10 @@
      -
    1. 卡列
      2. -
    2. 只需将CSS包裹在卡片中，就可以将其组织成类似Masonry的列.card-columns。卡是使用CSS column属性而不是flexbox构建的，以便于对齐。卡的排列顺序是从上到下，从左到右。 +
    3. 卡列
      4. +
    4. 只需将CSS包裹在卡片中，就可以将其组织成类似Masonry的列.card-columns。卡是使用CSS column属性而不是flexbox构建的，以便于对齐。卡的排列顺序是从上到下，从左到右。
      5. -
    5. 小心！您使用信用卡栏的里程可能会有所不同。为防止卡跨列断裂，我们必须将其设置display: inline-block为column-break-inside: avoid还不是防弹解决方案。
      6. +
    6. 小心！您使用信用卡栏的里程可能会有所不同。为防止卡跨列断裂，我们必须将其设置display: inline-block为column-break-inside: avoid还不是防弹解决方案。
    @@ -1170,30 +1177,35 @@
    + + +
    +
    + + +
    +
    -

    卡列也可以扩展并使用一些其他代码进行自定义。下面显示的是.card-columns使用与我们使用的相同CSS（即CSS列）的类的扩展，以生成一组用于更改列数的响应层。

    +
      +
    1. 卡列扩展
      2. +
    2. 卡列也可以扩展并使用一些其他代码进行自定义。下面显示的是.card-columns使用与我们使用的相同CSS（即CSS列）的类的扩展，以生成一组用于更改列数的响应层。
      3. +
    -
    -
    -
    - - .card-columns { - @include media-breakpoint-only(lg) { +
    +
    - - - +