Bootstrap
/
BootstapStudy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加页面

Browse Source
main
bicijinlian 1 year ago
parent adac98d532
commit a82b72c135
7 changed files with 290 additions and 6 deletions
Show Stats Download Patch File Download Diff File

9
BlazorStudy.Bootstrap5Study/BlazorStudy.Bootstrap5Study.csproj
Unescape Escape View File

@ -1,4 +1,4 @@
<Project Sdk="Microsoft.NET.Sdk.Web">
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>
@ -37,4 +37,11 @@
<None Include="wwwroot\bootstrap\js\bootstrap.min.js.map" />
</ItemGroup>
<ItemGroup>
<Content Update="wwwroot\pages\Helpers\清除浮动.html">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</Content>
</ItemGroup>
</Project>

9
BlazorStudy.Bootstrap5Study/wwwroot/index.html
Unescape Escape View File

@ -39,10 +39,11 @@
辅助菜单
</div>
<div class="card-body">
<a target="_blank" href="pages/Helpers/颜色与背景.html">颜色与背景</a>
</div>
<div class="card-body">
<a target="_blank" href="pages/Helpers/多彩连接.html">多彩连接</a>
<div><a target="_blank" href="pages/Helpers/清除浮动.html">清除浮动</a></div>
<div><a target="_blank" href="pages/Helpers/颜色与背景.html">颜色与背景</a></div>
<div><a target="_blank" href="pages/Helpers/多彩连接.html">多彩连接</a></div>
<div><a target="_blank" href="pages/Helpers/快速定位.html">快速定位</a></div>
<div><a target="_blank" href="pages/Helpers/宽高比.html">宽高比</a></div>
</div>
</div>
</div>

76
BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/宽高比.html
Unescape Escape View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽高比</title>
<base href="/" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="/plugs/holder/holder.min.js"></script>
<style>
.bd-example-ratios .ratio {
display: inline-block;
width: 10rem;
color: var(--bs-secondary-color);
background-color: var(--bs-tertiary-bg);
border: var(--bs-border-width) solid var(--bs-border-color)
}
.bd-example-ratios .ratio>div {
display: flex;
align-items: center;
justify-content: center
}
</style>
</head>
<body>
<div class="container">
<div class="card mt-3">
<div class="card-header .bg-dark-subtle">
<strong>宽高比: </strong> 使用生成的伪元素使元素保持您选择的纵横比。非常适合根据父项的宽度响应式处理视频或幻灯片嵌入。
</div>
<div class="card-body">
<h4>将父元素中的任何嵌入（如 ）包装为纵横比类。由于我们的通用选择器，直接子元素会自动调整大小。.ratio .ratio-21x9</h4>
<div class="ratio ratio-21x9">
<iframe src="http://www.ifiredoor.com" title="上海防火门" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header .bg-dark-subtle">
<strong>纵横比: </strong> 纵横比可以使用修饰符类进行自定义。默认情况下，提供以下比率类：
</div>
<div class="card-body bd-example-ratios">
<div class="ratio ratio-1x1">
<div class="border border-2 bg-body-secondary">1x1</div>
</div>
<div class="ratio ratio-4x3">
<div class="border border-2 bg-body-secondary">4x3</div>
</div>
<div class="ratio ratio-16x9">
<div>16x9</div>
</div>
<div class="ratio ratio-21x9">
<div>21x9</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header .bg-dark-subtle">
<strong>自定义比例: </strong>
</div>
<div class="card-body bd-example-ratios">
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
</div>
</div>
</div>
<script src="jquery/jquery-3.6.4.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

94
BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/快速定位.html
Unescape Escape View File

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速定位</title>
<base href="/" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="/plugs/holder/holder.min.js"></script>
</head>
<body>
<div class="container">
<div class="sticky-top">
<img class="sticky-top" src="holder.js/100px100?theme=sky&text=黏着在顶部" alt="" />
</div>
<div class="card mt-3">
<div class="card-header .bg-dark-subtle">
<strong>快速定位: </strong>
</div>
<div class="card-body">
利用这些工具类快速设置元素的位置
</div>
</div>
<div class="card mt-3">
<div class="card-header .bg-dark-subtle">
<strong>固定在顶部: </strong>
</div>
<div class="card-body">
将一个元素固定在视口（viewport）的顶部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。
<div class="fixed-top">
<img src="holder.js/100x50?theme=sky&text=固定在顶部" alt="" />
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header .bg-dark-subtle">
<strong>固定在底部: </strong>
</div>
<div class="card-body">
将一个元素固定在视口（viewport）的底部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。
<div class="fixed-bottom">
<img src="holder.js/100x50?theme=sky&text=固定在底部" alt="" />
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header .bg-dark-subtle">
<strong>黏着在顶部 sticky: </strong>
</div>
<div class="card-body">
当页面滚动并经过某个元素之后，该元素被固定在视口（viewport）的顶部且边缘对齐。
</div>
</div>
<div class="card mt-3">
<div class="card-header .bg-dark-subtle">
<strong>黏着在底部 sticky: </strong>
</div>
<div class="card-body">
当页面滚动并经过某个元素之后，该元素被固定在视口（viewport）的顶部且边缘对齐。
<img class="card-body" data-src="holder.js/100px500?outline=yes">
</div>
</div>
<div class="card mt-3">
<div class="card-header .bg-dark-subtle">
<strong>黏着在底部-响应式: </strong>
</div>
<div class="card-body">
支持响应式
<div class="sticky-sm-bottom">当视口（viewport）是 SM (small) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
<div class="sticky-md-bottom">当视口（viewport）是 MD (medium) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
<div class="sticky-lg-bottom">当视口（viewport）是 LG (large) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
<div class="sticky-xl-bottom">当视口（viewport）是 XL (extra-large) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
<div class="sticky-xxl-bottom">当视口（viewport）是 XXL (extra-extra-large) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
</div>
</div>
<div class="sticky-bottom">
<img src="holder.js/100px100?theme=lava&text=黏着在底部" alt="" />
</div>
</div>
<script src="jquery/jquery-3.6.4.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

56
BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/清除浮动.html
Unescape Escape View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>清除浮动</title>
<base href="/" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="/plugs/holder/holder.min.js"></script>
</head>
<body>
<div class="container">
<div class="card mt-3">
<div class="card-header .bg-dark-subtle">
<strong>清除浮动: </strong>通过添加 clearfix 工具类，可以快速轻松地清除容器中浮动的内容。
</div>
<div class="card-body">
<h4>为父级元素 添加 .clearfix 类可以很容易地清除内部的浮动。还可以作为 mixin 使用</h4>
<div class="clearfix border border-2 rounded-2 p-3 bg-body-secondary">
&lt;div class="clearfix">...&lt;/div>
</div>
</div>
<div class="card-body">
<h4>引用该 mixin 的源码</h4>
<div class="clearfix border border-2 rounded-2 p-3 bg-body-secondary">
@mixin clearfix() {
&::after {
display: block;
clear: both;
content: "";
}
}
</div>
</div>
<div class="card-body">
<h4>在 SCSS 中作为 mixin 使用：</h4>
<div class="clearfix border border-2 rounded-2 p-3 bg-body-secondary">
.element { @include clearfix;}
</div>
</div>
<div class="card-body">
<h4>.clearfix 的用法: 如果没有 .clearfix ，父级<code>&lt;div&gt;</code>元素是无法覆盖住两个按钮的，从而导致布局被破坏。</h4>
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary float-start">向左浮动（float）的示例按钮</button>
<button type="button" class="btn btn-secondary float-end">向右浮动（float）的示例按钮</button>
</div>
</div>
</div>
</div>
<script src="jquery/jquery-3.6.4.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

50
BlazorStudy.Bootstrap5Study/wwwroot/pages/holder.html
Unescape Escape View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>holder.js 插件学习</title>
<link rel="icon" type="image/png" href="favicon.png" />
<style>
*{
margin: 1px;
padding: 1px;
}
</style>
<script src="/plugs/holder/holder.js"></script>
<script>
//自定义主题
Holder.addTheme("custom-theme", {
bg: "#B0E3E6",
fg: "#FF0000",
size: 15,
font: "微软雅黑",
fontweight: "normal"
});
</script>
</head>
<body>
<!--默认：指定完与高x是小字字母x -->
<img class="card-body" data-src="holder.js/290x200">
<!--指定参数：完x高?参数名1=参数值1&参数名2=参数值2&参数名3=参数值3 -->
<!--指定显示文本-->
<img class="card-body" data-src="holder.js/290x200?text=自定义显示文本">
<!--指定主题：默认6个，可自定义-->
<img class="card-body" data-src="holder.js/290x200?theme=sky&text=sky 主题">
<img class="card-body" data-src="holder.js/290x200?theme=vine&text=vine 主题">
<img class="card-body" data-src="holder.js/290x200?theme=gray&text=gray 主题">
<img class="card-body" data-src="holder.js/290x200?theme=industrial&text=industrial 主题">
<img class="card-body" data-src="holder.js/290x200?theme=social&text=social 主题">
<img class="card-body" data-src="holder.js/290x200?theme=lava&text=lava 主题">
<img class="card-body" data-src="holder.js/290x200?random=yes&text=随机主题">
<img class="card-body" data-src="holder.js/290x200?theme=custom-theme&text=自定义主题 custom-theme">
<img class="card-body" data-src="holder.js/290x200?fg=#ccc&text=指定前景色 cccccc">
<img class="card-body" data-src="holder.js/290x200?bg=#666&text=指定背景色 666666">
<img class="card-body" data-src="holder.js/290x200?outline=yes&text=显示对角线">
<img class="card-body" data-src="holder.js/290x200?auto=yes&text=自动大小">
<!--百分比完和高: p-->
<img class="card-body" data-src="holder.js/100px200?text=百分之百宽度" style="margin-bottom: 5px;">
</body>
</html>

2
BlazorStudy.Bootstrap5Study/wwwroot/pages/模板页.html
Unescape Escape View File

@ -13,7 +13,7 @@
<div class="container">
<div class="card mt-3">
<div class="card-header .bg-dark-subtle">
模板页
<strong>模板页: </strong> 普通说明
</div>
<div class="card-body">
<img src="holder.js/300x200?text=模板页" alt="" />

Write Preview
Loading…
Cancel
Save