mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-05 13:39:39 +08:00
!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:
parent
787847f04b
commit
1e4a2eca03
@ -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",
|
||||
|
@ -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": "常见于互联网网站布局",
|
||||
|
24
src/BootstrapBlazor.Shared/Samples/LayoutPages.razor.css
Normal file
24
src/BootstrapBlazor.Shared/Samples/LayoutPages.razor.css
Normal 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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
@ -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%;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user