!3693 doc(#I67RTW): update site.css

* doc: 更新 vs  2019 为 vs 2022
* refactor: 移动 page-layout-demo 样式
* doc: 移动 page-layout-demo-list 到样式隔离
* doc: 移动 Menus 样式
This commit is contained in:
Argo 2022-12-28 02:24:37 +00:00
parent 787847f04b
commit 1e4a2eca03
7 changed files with 66 additions and 56 deletions

View File

@ -987,7 +987,7 @@
"NugetP1": "Use <a href='https://www.nuget.org/packages?q=BootstrapBlazor' target='_blank'>nuget.org</a> to install BootstrapBlazor components",
"EnvBuildTitle": "Project Environment Construction",
"EnvLi1": "Install .net core sdk <a href='http://www.microsoft.com/net/download' target='_blan'>Official Website</a>",
"EnvLi2": "Install Visual Studio 2019 and above <a href='https://visualstudio.microsoft.com/vs/getting-started' target='_blank'>Official website",
"EnvLi2": "Install Visual Studio 2022 and above <a href='https://visualstudio.microsoft.com/vs/getting-started' target='_blank'>Official website",
"EnvLi3": "Pull the project code BootstrapBlazor <a href='{0}' target='_blank'>Warehouse URL</a>"
},
"BootstrapBlazor.Shared.Components.Video": {
@ -1125,7 +1125,7 @@
"P8": "After downloading and installing the extension, create a project through the extension",
"P9": "Create a project with Visual Studio 1",
"P10": "Step 1. Create a project",
"P11": "Open Visual Studio 2019 or Visual Studio 2022",
"P11": "Open Visual Studio 2022",
"P12": "Create a new project",
"P13": "choose",
"P14": "and click",
@ -1342,7 +1342,7 @@
"Code10": "Bottom layout, with default style, any element can be nested under it",
"P1": "The above components adopt flex layout, please make sure the target browser is compatible before using. In addition, the child element of <code>Layout</code> can only be the latter four, and the parent element of the latter four can only be <code>Layout</code>",
"b1": "Matters needing attention",
"P2": "In order to make it easy for everyone to use this set of components to quickly build projects, the author has created <b>Project Templates</code></b>, using the <code>dotnet new</code> command line, and < code>Bootstrap Blazor App Extension extension plug-in</code> Create a new project through <code>Visual Studio 2019</code>. For specific usage and steps, please click <a href='template' target='_blank'>Portal</a>",
"P2": "In order to make it easy for everyone to use this set of components to quickly build projects, the author has created <b>Project Templates</code></b>, using the <code>dotnet new</code> command line, and < code>Bootstrap Blazor App Extension extension plug-in</code> Create a new project through <code>Visual Studio 2022</code>. For specific usage and steps, please click <a href='template' target='_blank'>Portal</a>",
"H3": "Common page layout",
"Block1Title": "Top, middle and bottom layout",
"Block1Intro": "Commonly found in Internet website layout",

View File

@ -988,7 +988,7 @@
"NugetP1": "使用 <a href='https://www.nuget.org/packages?q=BootstrapBlazor' target='_blank'>nuget.org</a> 进行 BootstrapBlazor 组件的安装",
"EnvBuildTitle": "项目环境搭建",
"EnvLi1": "安装 .net core sdk <a href='http://www.microsoft.com/net/download' target='_blan'>官方网址</a>",
"EnvLi2": "安装 Visual Studio 2019 以上 <a href='https://visualstudio.microsoft.com/vs/getting-started' target='_blank'>官方网址</a>",
"EnvLi2": "安装 Visual Studio 2022 以上 <a href='https://visualstudio.microsoft.com/vs/getting-started' target='_blank'>官方网址</a>",
"EnvLi3": "拉取项目代码 BootstrapBlazor <a href='{0}' target='_blank'>仓库网址</a>"
},
"BootstrapBlazor.Shared.Components.Video": {
@ -1126,7 +1126,7 @@
"P8": "下载安装扩展后,通过扩展创建项目",
"P9": "使用 Visual Studio 创建项目 1",
"P10": "步骤一、创建项目",
"P11": "打开 Visual Studio 2019 或者 Visual Studio 2022",
"P11": "打开 Visual Studio 2022",
"P12": "创建一个新项目",
"P13": "选择",
"P14": "并单击",
@ -1343,7 +1343,7 @@
"Code10": "底部布局,自带默认样式,其下可嵌套任何元素",
"P1": " 以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。此外,<code>Layout</code> 的子元素只能是后四者,后四者的父元素也只能是 <code>Layout</code>",
"b1": "注意事项",
"P2": "为了方便大家利用这套组件快速搭建项目,作者制作了 <b>项目模板(<code>Project Templates</code></b>,使用 <code>dotnet new</code> 命令行,与 <code>Bootstrap Blazor App Extension 扩展插件</code> 通过 <code>Visual Studio 2019</code> 新建项目创建,具体使用方法与步骤请点击 <a href='template' target='_blank'>传送门</a>",
"P2": "为了方便大家利用这套组件快速搭建项目,作者制作了 <b>项目模板(<code>Project Templates</code></b>,使用 <code>dotnet new</code> 命令行,与 <code>Bootstrap Blazor App Extension 扩展插件</code> 通过 <code>Visual Studio 2022/code> 新建项目创建,具体使用方法与步骤请点击 <a href='template' target='_blank'>传送门</a>",
"H3": "常见页面布局",
"Block1Title": "上中下布局",
"Block1Intro": "常见于互联网网站布局",

View File

@ -0,0 +1,24 @@
.page-layout-demo-option {
margin-top: 1.5rem;
border: 1px solid rgba(0,0,0,.125);
border-radius: var(--bs-border-radius);
padding: 1.5rem 1rem 1rem 1rem;
position: relative;
}
.page-layout-demo-option > p {
position: absolute;
top: -10px;
padding: 0 0.5rem;
background: #fff;
}
.page-layout-demo-option .page-layout-demo-option-height {
display: flex;
align-items: center;
justify-content: space-between;
}
.page-layout-demo-option .tabs-body-content {
margin: 0 -1rem -2rem -1rem;
}

View File

@ -58,3 +58,11 @@
background-color: #dcdfe6;
margin: 0 -1px;
}
.page-layout-demo-list {
margin: 0;
}
.page-layout-demo-list li {
margin: 0.5rem 0;
}

View File

@ -1,4 +1,12 @@
::deep + .layout-menu-demo .layout-side {
.menu-demo-header {
background-color: #17a2b8;
line-height: 50px;
color: #fff;
flex: 1;
padding-left: 80px;
}
::deep + .layout-menu-demo .layout-side {
background-color: var(--bb-disabled-bg);
color: #dcdfe6;
height: 100%;

View File

@ -220,3 +220,22 @@
::deep + .widget .dropdown-item:not(:nth-of-type(odd)):active {
background-color: inherit;
}
.page-layout-demo-option {
margin-top: 1.5rem;
border: 1px solid rgba(0,0,0,.125);
border-radius: var(--bs-border-radius);
padding: 1.5rem 1rem 1rem 1rem;
position: relative;
}
.page-layout-demo-option > p {
position: absolute;
top: -10px;
padding: 0 0.5rem;
background: #fff;
}
.page-layout-demo-option .tabs-body-content {
margin: 0 -1rem -2rem -1rem;
}

View File

@ -42,55 +42,6 @@
top: 0.5rem;
}
.menu-demo-header {
background-color: #17a2b8;
line-height: 50px;
color: #fff;
flex: 1;
padding-left: 80px;
}
.menu-demo-bar i {
transition: transform .3s linear;
}
.menu-demo-bar.is-collapsed i {
transform: rotate(90deg);
}
.page-layout-demo-list {
margin: 0;
}
.page-layout-demo-list li {
margin: 0.5rem 0;
}
.page-layout-demo-option {
margin-top: 1.5rem;
border: 1px solid rgba(0,0,0,.125);
border-radius: var(--bs-border-radius);
padding: 1.5rem 1rem 1rem 1rem;
position: relative;
}
.page-layout-demo-option > p {
position: absolute;
top: -10px;
padding: 0 0.5rem;
background: #fff;
}
.page-layout-demo-option .page-layout-demo-option-height {
display: flex;
align-items: center;
justify-content: space-between;
}
.page-layout-demo-option .tabs-body-content {
margin: 0 -1rem -2rem -1rem;
}
.page-layout-demo-footer-link {
color: #fff;
}