Skip to content

Commit ffad431

Browse files
ArgoZhangArgoZhang
committed
doc: 更新安装文档
1 parent b64545c commit ffad431

File tree

1 file changed

+95
-28
lines changed

1 file changed

+95
-28
lines changed

‎src/BootstrapBlazor.Server/Components/Pages/Install.razor‎

Lines changed: 95 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,89 @@
55

66
<h3>@Localizer["InstallTitle"]</h3>
77

8-
<h4>Git</h4>
8+
<h4>开始使用 BootstrapBlazor 进行更快、更舒服的 .NET Web 开发</h4>
9+
10+
<p class="code-label">使用模板</p>
11+
12+
<p>为了快速入门，您可以使用我们的 <code>dotnet</code> 模板。它们基于 Microsoft Web App 模板，但已修改为包含 <code>BootstrapBlazor</code> 组件，请查看 <a href="template">[传送门]</a></p>
13+
14+
<p class="code-label">手动安装</p>
15+
16+
<p>如果您已经有一个项目并希望从默认模板或工作应用程序向其中添加 <code>BootstrapBlazor</code>。</p>
17+
18+
<p class="code-label">1. 安装包</p>
19+
<p>通过 <code>NuGet</code> 包管理器找到该包或使用以下命令安装它。</p>
20+
<Pre class="mb-3">dotnet add package BootstrapBlazor</Pre>
21+
22+
<p class="code-label">2. 添加导入</p>
23+
<p><code>_Imports.razor</code> 文件并添加一下内容</p>
24+
<Pre class="mb-3">@@using BootstrapBlazor.Components</Pre>
25+
26+
<p class="code-label">3. 添加引用</p>
27+
<p>将以下内容添加到您的 <code>HTML</code> 头部部分，它是 <code>App.razor</code> <code>_Layout.cshtml</code> <code>_Host.cshtml</code> <code>index.html</code>，取决于您运行的是 <code>Server</code> 还是 <code>WebAssembly</code></p>
28+
<Tab IsBorderCard="true" class="mb-3">
29+
<TabItem Text="NET10/NET9">
30+
<Pre>// FontAwesome 字体图标样式 注意需要引用 BootstrapBlazor.FontAwesome 包
31+
&lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css"]" /&gt;
32+
// 组件样式已集成 Bootstrap 最新版
33+
&lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css"]" /&gt;
34+
// Motronic 主题可选建议添加
35+
&lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor/css/motronic.min.css"]" /&gt;</Pre>
36+
</TabItem>
37+
<TabItem Text="其他">
38+
<Pre>// FontAwesome 字体图标样式 注意需要引用 BootstrapBlazor.FontAwesome 包
39+
&lt;link rel="stylesheet" href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" /&gt;
40+
// 组件样式已集成 Bootstrap 最新版
41+
&lt;link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" /&gt;
42+
// Motronic 主题可选建议添加
43+
&lt;link rel="stylesheet" href="_content/BootstrapBlazor/css/motronic.min.css" /&gt;</Pre>
44+
</TabItem>
45+
</Tab>
46+
47+
<p class="code-label">4. 添加脚本</p>
48+
<p>结尾位置添加如下内容它应与默认 blazor 脚本位于同一位置</p>
49+
<Tab IsBorderCard="true" class="mb-3">
50+
<TabItem Text="NET10/NET9">
51+
<Pre>// 添加 BootstrapBlazor 脚本
52+
&lt;script src="@@Assets["_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"]"&gt;&lt;/script&gt;</Pre>
53+
</TabItem>
54+
<TabItem Text="其他">
55+
<Pre>// 添加 BootstrapBlazor 脚本
56+
&lt;script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"&gt;&lt;/script&gt;</Pre>
57+
</TabItem>
58+
</Tab>
59+
60+
<p class="code-label">5. 删除原 <code>Bootstrap</code> 资源</p>
61+
<p>删除 <code>bootstrap</code> 样式，请同时删除 <code>wwwroot</code> 文件夹下的 <code>bootstrap</code> 和 <code>open-iconic</code> 文件夹</p>
62+
63+
<p class="code-label">6. 注册服务</p>
64+
<p><code>Program.cs</code> 文件中注入 <code>BootstrapBlazor</code> 服务</p>
65+
<Pre class="mb-3">// 增加 BootstrapBlazor 服务
66+
builder.Services.AddBootstrapBlazor();</Pre>
67+
68+
<p class="code-label">7. 添加 <code>BootstrapBlazorRoot</code> 组件</p>
69+
<p>在母版页中添加 <code>BootstrapBlazorRoot</code> 组件</p>
70+
<Pre class="mb-3">&lt;BootstrapBlazorRoot&gt;
71+
&lt;Header&gt;&lt;/Header&gt;
72+
&lt;main&gt;
73+
@@Body
74+
&lt;/main&gt;
75+
&lt;/BootstrapBlazorRoot&gt;</Pre>
976

1077
<p>@Localizer["GitP1"]</p>
1178

1279
<div class="row mb-sm-3">
13-
<div class="git col-12 col-sm-6 mb-3 mb-sm-0">
14-
<a class="git-fork" href="https://fork.dev/" target="_blank">
15-
<img alt="fork" src="@WebsiteOption.Value.GetAssetUrl("images/fork.png")" />
16-
<span>Fork</span>
17-
</a>
18-
</div>
19-
<div class="git col-12 col-sm-6 mb-3 mb-sm-0">
20-
<a href="https://tortoisegit.org/download/" target="_blank">
21-
<img alt="tortoisegit" src="@WebsiteOption.Value.GetAssetUrl("images/tortoisegit.svg")" />
22-
</a>
23-
</div>
80+
<div class="git col-12 col-sm-6 mb-3 mb-sm-0">
81+
<a class="git-fork" href="https://fork.dev/" target="_blank">
82+
<img alt="fork" src="@WebsiteOption.Value.GetAssetUrl("images/fork.png")" />
83+
<span>Fork</span>
84+
</a>
85+
</div>
86+
<div class="git col-12 col-sm-6 mb-3 mb-sm-0">
87+
<a href="https://tortoisegit.org/download/" target="_blank">
88+
<img alt="tortoisegit" src="@WebsiteOption.Value.GetAssetUrl("images/tortoisegit.svg")" />
89+
</a>
90+
</div>
2491
</div>
2592

2693
<p>@((MarkupString)Localizer["GitP2"].Value)</p>
@@ -32,25 +99,25 @@
3299
<h4>@Localizer["EnvBuildTitle"]</h4>
33100

34101
<ol class="ul-demo">
35-
<li>@((MarkupString)Localizer["EnvLi1"].Value)</li>
36-
<li>@((MarkupString)Localizer["EnvLi2"].Value)</li>
37-
<li>@((MarkupString)string.Format(Localizer["EnvLi3"].Value, WebsiteOption.Value.GiteeRepositoryUrl))</li>
102+
<li>@((MarkupString)Localizer["EnvLi1"].Value)</li>
103+
<li>@((MarkupString)Localizer["EnvLi2"].Value)</li>
104+
<li>@((MarkupString)string.Format(Localizer["EnvLi3"].Value, WebsiteOption.Value.GiteeRepositoryUrl))</li>
38105
</ol>
39106

40107
<Pre class="no-highlight">git clone @WebsiteOption.Value.GiteeRepositoryUrl</Pre>
41108

42109
@code {
43-
/// <summary>
44-
/// 获得/设置 版本号字符串
45-
/// </summary>
46-
private string Version { get; set; } = "fetching";
47-
48-
/// <summary>
49-
/// OnInitializedAsync 方法
50-
/// </summary>
51-
/// <returns></returns>
52-
protected override async Task OnInitializedAsync()
53-
{
54-
Version = await VersionManager.GetVersionAsync();
55-
}
110+
/// <summary>
111+
/// 获得/设置 版本号字符串
112+
/// </summary>
113+
private string Version { get; set; } = "fetching";
114+
115+
/// <summary>
116+
/// OnInitializedAsync 方法
117+
/// </summary>
118+
/// <returns></returns>
119+
protected override async Task OnInitializedAsync()
120+
{
121+
Version = await VersionManager.GetVersionAsync();
122+
}
56123
}

0 commit comments

Comments
 (0)