From 03deece83d61f93ab117ce12854e78fec31a647a Mon Sep 17 00:00:00 2001 From: wangzhiming <8449761382@qq.com> Date: Wed, 3 Jun 2020 14:39:34 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E7=BB=84=E4=BB=B6-=E5=8D=A1=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/views/components/card.njk | 1214 ++++++++++++++++++++++++++++++ admin/views/layouts/_sidebar.njk | 2 +- package.json | 44 ++ 3 files changed, 1259 insertions(+), 1 deletion(-) create mode 100644 admin/views/components/card.njk create mode 100644 package.json diff --git a/admin/views/components/card.njk b/admin/views/components/card.njk new file mode 100644 index 0000000..eb380c3 --- /dev/null +++ b/admin/views/components/card.njk @@ -0,0 +1,1214 @@ +{% extends "../layouts/_base.njk" %} +{% block title %} + 公告板 Button +{% endblock %} +{% block js_head %} + +{% endblock %} +{% block content %} + +
+
提示内容222
+
+
+
+
+
+
+

基础用法

+
+
+
+
+
+
+
    +
  1. 示例
    2. +
  2. 卡片的标记和样式尽可能少，但仍能提供大量控制和自定义功能。它们与flexbox一起构建，可以轻松对齐并与其他Bootstrap组件很好地混合。它们margin默认情况下没有，因此请根据需要使用空格实用程序。 + + 以下是具有混合内容和固定宽度的基本卡的示例。卡没有固定的宽度开始，因此它们自然会填满其父元素的整个宽度。通过我们的各种尺寸选择，可以轻松自定义此尺寸。 +
    3. +
+
+
+
+
+
+
+ ... +
+
卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+ 去某地 +
+
+
+
+
+ +
+
+ + + +
+
+
+
+
    +
  1. 标题，文本和链接
    2. +
  2. 卡片标题通过添加.card-title到标签来使用。以相同的方式，通过添加.card-link到标签来添加链接并将链接彼此相邻放置。 + + 字幕通过.card-subtitle在标签中添加来使用。如果将.card-title和.card-subtitle项目放在一个.card-body项目中，则卡片标题和副标题会很好地对齐。 +
    3. +
+
+
+
+
+
+
+
+
卡片标题
+
卡片子标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+ 链接 + 另一个链接 +
+
+
+
+
+ +
+
+ + +
+
+
+
+
    +
  1. 图片
    2. +
  2. .card-img-top将图像放置在卡的顶部。使用.card-text，可以将文本添加到卡中。其中的文本.card-text也可以使用标准HTML标记设置样式。 +
    3. +
+
+
+
+
+
+
+ ... +
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
+
+ +
+
+ + +
+
+
+
+
    +
  1. 清单群组
    2. +
  2. 在带有刷新列表组的卡中创建内容列表。 +
    3. +
+
+
+
+
+
+
+
    +
  • 明天只是讨厌
    • +
  • 蛋白质和抗氧化剂
    • +
  • 制造色情
    • +
+
+
+
+
+
+
+
+
+
+ 精选 +
+
    +
  • 明天只是讨厌
    • +
  • 蛋白质和抗氧化剂
    • +
  • 制造色情
    • +
+
+
+
+
+ + +
+
+ + + +
+
+
+
+
    +
  1. 厨房水槽
    2. +
  2. 混合并匹配多种内容类型以创建所需的卡，或将所有内容丢在其中。下面显示的是图像样式，块，文本样式和列表组，它们都包裹在定宽卡中。 +
    3. +
+
+
+
+
+
+
+ ... +
+
卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
    +
  • 明天只是讨厌
    • +
  • 蛋白质和抗氧化剂
    • +
  • 制造色情
    • +
+
+ 卡链接 + 另一个链接 +
+
+
+
+
+ +
+
+ +
+
+
+
+
    +
  1. 页眉和页脚
    2. +
  2. 在卡中添加可选的页眉和/或页脚。 +
    3. +
+
+
+
+
+
+
+
+ 精选 +
+
+
特殊标题处理
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 去某地 +
+
+
+
+
+
+
+
+
+
+ 精选 +
+
+
特殊标题处理
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 去某地 +
+
+
+
+
+
+
+
+
+
+ 引用 +
+
+
+

Lorem ipsum dolor坐下来，一直保持良好的状态。整体从正面布置。

+
著名的人来源标题中
+
+
+
+
+
+
+
+
+
+
+
+ 精选 +
+
+
特殊标题处理
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 去某地 +
+
+ 2天前 +
+
+
+
+
+ +
+
+ +
+
+
+
+
    +
  1. 尺寸
    2. +
  2. 卡片没有具体规定width，因此除非另有说明，否则卡片的宽度为100％。您可以根据需要使用自定义CSS，网格类，网格Sass mixins或实用程序来更改此设置。 +
    3. +
  3. 使用网格标记
    4. +
  4. 使用网格，根据需要将卡包装在列和行中。 +
    5. +
+
+
+
+
+
+
+
+
+
+
特殊标题处理
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 去某地 +
+
+
+
+
+
+
特殊标题处理
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 去某地 +
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
    +
  1. 使用实用程序
    2. +
  2. 使用我们少数可用的大小调整实用程序来快速设置卡片的宽度。 +
    3. +
+
+
+
+
+
+
+
+
卡标题
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 按钮 +
+
+ +
+
+
卡标题
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 按钮 +
+
+
+
+
+ +
+
+ +
+
+
+
+
    +
  1. 使用自定义CSS
    2. +
  2. 在样式表中或作为内联样式使用自定义CSS来设置宽度。 +
    3. +
+
+
+
+
+
+
+
+
特殊标题处理
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 去某地 +
+
+
+
+
+ +
+
+ +
+
+
+
+
    +
  1. 文字对齐
    2. +
  2. 您可以使用我们的文本对齐类快速更改任何卡的整体或特定部分的文本对齐方式。 +
    3. +
+
+
+
+
+
+
+
+
特殊标题处理
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 去某地 +
+
+ +
+
+
特殊标题处理
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 去某地 +
+
+ +
+
+
特殊标题处理
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 去某地 +
+
+
+
+
+ +
+
+ +
+
+
+
+
    +
  1. 导航
    2. +
  2. 使用Bootstrap的nav组件在卡的头（或块）中添加一些导航。 +
    3. +
+
+
+
+
+
+
+
+ +
+
+
特殊标题处理
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 去某地 +
+
+
+
+
+
+
+
+
+
+ +
+
+
特殊标题处理
+

在下面提供支持文字，自然而然地引入了其他内容。

+ 去某地 +
+
+
+
+
+ +
+
+ + + +
+
+
+
+
    +
  1. 图像帽
    2. +
  2. 与页眉和页脚相似，卡片可以包含顶部和底部的“图像上限”，即图像顶部或底部的图像。 +
    3. +
+
+
+
+
+
+
+ ... +
+
卡标题
+

这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此内容要长一点。

+

最近更新3分钟前

+
+
+
+
+
卡标题
+

这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此内容要长一点。

+

最近更新3分钟前

+
+ ... +
+
+
+
+ +
+
+ + + +
+
+
+
+
    +
  1. 图像叠加
    2. +
  2. 将图像变成卡片背景并覆盖卡片的文本。根据图像，您可能需要也可能不需要其他样式或实用程序。 +
    3. +
+
+
+
+
+
+
+ ... +
+
卡标题
+

这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此内容要长一点。

+

最近更新3分钟前

+
+
+
+
+
+ +
+
+ + + +
+
+
+
+
    +
  1. 卧式
    2. +
  2. 结合使用网格和实用程序类，可以以移动友好且响应迅速的方式使卡水平放置。在下面的示例中，我们使用删除网格装订线，.no-gutters并使用.col-md-*类使卡在md断点处水平。根据您的卡内容，可能需要进一步调整。 +
    3. +
+
+
+
+
+
+
+
+
+ ... +
+
+
+
卡标题
+

这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此内容要长一点。

+

最近更新3分钟前

+
+
+
+
+
+
+
+ +
+
+ + + +
+
+
+
+
    +
  1. 卡片样式
    2. +
  2. 卡片包含用于自定义背景，边框和颜色的各种选项。 +
    3. +
  3. 背景和颜色
    4. +
  4. 使用文本和背景实用程序来更改卡的外观。 +
    5. +
+
+
+
+
+
+
+
头部
+
+
主卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
副卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
成功卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
危险卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
警告卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
信息卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
亮卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
暗卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
+
+ +
+
+ + + +
+
+
+
+
    +
  1. 边框
    2. +
  2. 使用边界实用程序仅更改border-color卡的。请注意，您可以将.text-{color}类放在父级.card或卡内容的子集中，如下所示。 +
    3. +
+
+
+
+
+
+
+
头部
+
+
主卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
副卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
成功卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
危险卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
警告卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
信息卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
亮卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
头部
+
+
暗卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
+
+
+
+ +
+
+ + + +
+
+
+
+
    +
  1. Mixins实用程序
    2. +
  2. 您还可以更改卡上的页眉和页脚所需的边界，甚至删除其background-color用.bg-transparent。 +
    3. +
+
+
+
+
+
+
+
头部
+
+
成功卡标题
+

一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。

+
+
页脚
+
+
+
+
+ +
+
+ + + +
+
+
+
+
    +
  1. 卡布局
    2. +
  2. 除了在卡片中设置内容的样式外，Bootstrap还提供了一些用于布置一系列卡片的选项。目前，这些布局选项尚未响应。 +
    3. +
  3. 卡组
    4. +
  4. 使用卡组将卡呈现为具有相等宽度和高度列的单个附加元素。卡组从堆叠开始，并用于display: flex;从sm断点开始以统一的尺寸连接。 +
    5. +
+
+
+
+
+
+
+
+ ... +
+
卡标题
+

这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此内容要长一点。

+

最近更新3分钟前

+
+
+
+ +
+
卡标题
+

该卡片下方具有辅助文字，可以自然地引入其他内容。

+

最近更新3分钟前

+
+
+
+ +
+
卡标题
+

这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此卡片的内容比第一个显示相同高度动作的卡片更长。

+

最近更新3分钟前

+
+
+
+
+
+
+ +
+
+ + + +
+
+
+
+
    +
  1. 卡套
    2. +
  2. 需要一组彼此不连接的宽度和高度相等的卡吗？使用卡片组。 +
    3. +
+
+
+
+
+
+
+
+ ... +
+
卡标题
+

这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此内容要长一点。

+

最近更新3分钟前

+
+
+
+ ... +
+
卡标题
+

该卡片下方具有辅助文字，可以自然地引入其他内容。

+

最近更新3分钟前

+
+
+
+ ... +
+
卡标题
+

这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此卡片的内容比第一个显示相同高度动作的卡片更长。

+

最近更新3分钟前

+
+
+
+
+
+
+
+
+
+
+
+ ... +
+
卡标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。

+
+
+ 最近更新3分钟前 +
+
+
+ ... +
+
卡标题
+

该卡片下方具有辅助文字，可以自然地引入其他内容。

+
+
+ 最近更新3分钟前 +
+
+
+ ... +
+
卡标题
+

这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此卡片的内容比第一个显示相同高度动作的卡片更长。

+
+
+ 最近更新3分钟前 +
+
+
+
+
+
+ +
+
+ + + +
+
+
+
+
    +
  1. 网格卡
    2. +
  2. 使用Bootstrap网格系统及其.row-cols类来控制每行显示多少个网格列（卡周围）。例如，这里.row-cols-1将卡片布置在一列上，然后.row-cols-md-2从中等的断点开始，将四张卡片分成相等的宽度，跨多行。 +
    3. +
+
+
+
+
+
+
+
+
+ ... +
+
卡标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。

+
+
+
+
+
+ ... +
+
卡标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。

+
+
+
+
+
+ ... +
+
卡标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。

+
+
+
+
+
+ ... +
+
卡标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。

+
+
+
+
+
+
+
+
+
+
+
+
+
+ ... +
+
卡标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。

+
+
+
+
+
+ ... +
+
卡标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。

+
+
+
+
+
+ ... +
+
卡标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。

+
+
+
+
+
+ ... +
+
卡标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。

+
+
+
+
+
+
+
this.$refs[] + +
+
+
+
+
+
+ ... +
+
卡标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。

+
+
+
+
+
+ ... +
+
卡标题
+

这是一张短牌。

+
+
+
+
+
+ ... +
+
卡标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。

+
+
+
+
+
+ ... +
+
卡标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。

+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
    +
  1. 卡列
    2. +
  2. 只需将CSS包裹在卡片中，就可以将其组织成类似Masonry的列.card-columns。卡是使用CSS column属性而不是flexbox构建的，以便于对齐。卡的排列顺序是从上到下，从左到右。 +
    3. +
  3. 小心！您使用信用卡栏的里程可能会有所不同。为防止卡跨列断裂，我们必须将其设置display: inline-block为column-break-inside: avoid还不是防弹解决方案。
    4. +
+
+
+
+
+
+
+
+ ... +
+
换行的卡片标题
+

这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。

+
+
+
+
+

Lorem ipsum dolor坐下来，一直保持良好的状态。整体从正面布置。

+
+ + 著名的人 来源标题中 + +
+
+
+
+ ... +
+
卡标题
+

该卡片下方具有辅助文字，可以自然地引入其他内容。

+

最近更新3分钟前

+
+
+
+
+

Lorem ipsum dolor坐下来，一直保持良好的状态。整个躺在那里。

+
+ + 著名的人 来源标题中 + +
+
+
+
+
+
卡标题
+

这张卡的标题为常规标题，下面有一段简短的文字。

+

最近更新3分钟前

+
+
+
+ ... +
+
+
+

Lorem ipsum dolor坐下来，一直保持良好的状态。整体从正面布置。

+
+ + 著名的人 来源标题中 + +
+
+
+
+
+
卡标题
+

这是另一张下方带有标题和支持文字的卡片。此卡还包含一些其他内容，使其整体上略高

+

最近更新3分钟前

+
+
+
+
+
+
+ + +
+
+

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

+
+
+
+
+
+ + .card-columns { + @include media-breakpoint-only(lg) { + column-count: 4; + } + @include media-breakpoint-only(xl) { + column-count: 5; + } + } + +
+
+
+ + + +
+
+ + + +
+ +
+
+
+ + + +
+ +{% endblock %} +{% block js_footer %} +{% endblock %} diff --git a/admin/views/layouts/_sidebar.njk b/admin/views/layouts/_sidebar.njk index b93f1ae..e933abb 100644 --- a/admin/views/layouts/_sidebar.njk +++ b/admin/views/layouts/_sidebar.njk @@ -56,7 +56,7 @@
  • - 卡片 Card + 卡片 Card
  • diff --git a/package.json b/package.json new file mode 100644 index 0000000..7758d53 --- /dev/null +++ b/package.json @@ -0,0 +1,44 @@ +{ + "name": "bootstrap-admin", + "version": "1.0.0", + "description": "#### 介绍 bootstrap版本的admin", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "dev": "npm run start", + "start": "nodemon app.js", + "lint": "eslint --fix --ext .js ." + }, + "repository": { + "type": "git", + "url": "https://gitee.com/jikey/bootstrap-admin.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "body-parser": "^1.19.0", + "cookie-parser": "^1.4.4", + "cors": "^2.8.5", + "eslint": "^5.16.0", + "eslint-config-prettier": "^5.0.0", + "eslint-plugin-node": "^9.2.0", + "eslint-plugin-prettier": "^3.1.1", + "jsonwebtoken": "^8.5.1", + "koa": "^2.11.0", + "koa-bodyparser": "^4.3.0", + "koa-json": "^2.0.2", + "koa-jwt": "^3.6.0", + "koa-nunjucks-2": "^3.0.2", + "koa-router": "^8.0.8", + "koa-session": "^5.13.1", + "koa-static": "^5.0.0", + "koa-views": "^6.2.1", + "koa2-cors": "^2.0.6", + "nunjucks": "^3.2.0", + "utility": "^1.16.1" + }, + "devDependencies": { + "nodemon": "^2.0.3" + } +} -- Gitee From 2d1f4e4df1f4a63459e4a9ba6c462038a07935c0 Mon Sep 17 00:00:00 2001 From: wangzhiming <8449761382@qq.com> Date: Wed, 3 Jun 2020 14:41:47 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E7=BB=84=E4=BB=B6-=E5=8D=A1=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/views/components/card.njk | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/admin/views/components/card.njk b/admin/views/components/card.njk index eb380c3..3bd7248 100644 --- a/admin/views/components/card.njk +++ b/admin/views/components/card.njk @@ -1036,9 +1036,9 @@ -this.$refs[] + -
    +
    -- Gitee