自定义 ASP.NET MVC Bootstrap 模板

syed shanu

4.61/5 (20投票s)

2017 年 2 月 12 日

CPOL

5分钟阅读

96645

3154

在本文中，我们将详细介绍自定义 ASP.ENT MVC 应用程序的方法。在此文中，我们将介绍三种自定义 ASP.NET MVC Bootstrap 模板的方法。

下载示例 - 1.5 MB

引言

在本文中，我们将详细介绍自定义 ASP.ENT MVC 应用程序的方法。在此文中，我们将介绍三种自定义 ASP.NET MVC Bootstrap 模板的方法。

使用 ASP.NET MVC Bootstrap Bundle 模板
在我们的 MVC 应用程序中使用 Bootstrap Bundle 模板 CSS
为 Bootstrap ASP.NET MVC 使用 Bootswatch 免费主题。

使用代码

安装 Bootstrap Bundle

首先，我们需要下载并安装 Bootstrap Bundle 模板。要安装 Bootstrap Bundle 模板，请打开 Visual Studio 2015 > 点击“工具” > 点击“扩展和更新”

在搜索框中输入“Bootstrap Bundle”并搜索。

点击“下载”以获取 Bootstrap Bundle。

点击“安装”以安装 Bootstrap Bundle 模板。

要开始使用 Bootstrap Bundle 模板，请关闭 Visual Studio 并重新打开 Visual Studio 2015。

创建 Bootstrap Bundle MVC 应用程序

点击左侧的“模板”下的“Bootstrap Bundle”。选择“Bootstrap Bundle MVC 站点”，选择项目路径，输入应用程序名称，然后点击“确定”。

在这里，我们可以看到 Bootstrap Bundle 模板有两种样式：“Bootstrap 示例布局”和“Start Bootstrap 模板”。

在这里，我们将首先介绍如何开始使用“Bootstrap 示例布局”

方法 1：使用 Bootstrap 示例布局的 Bootstrap Bundle 样式

选择“Bootstrap 示例布局”并点击“下一步”按钮。

选择主布局样式。这里我们选择了“狭窄的巨型广告牌”布局，然后点击“下一步”按钮。

现在我们需要为我们的布局选择主题。在这里，我们可以在下拉列表中看到一组主题。

在这里，我们为我们的网站选择了“Darkly”主题。

点击“下一步”，在文本框中输入您的网站名称，然后点击“下一步”。

点击“完成”，我们可以看到我们的 MVC 应用程序已经创建，按 F5 运行我们的应用程序，您将看到带有新 bootstrap 模板的 MVC 应用程序。

方法 2：使用 Start Bootstrap 模板的 Bootstrap Bundle 样式

选择“Start Bootstrap 模板”布局，然后点击“下一步”按钮。

接下来，我们需要为我们的 MVC Web 应用程序选择主题。这里我们选择“Modern Business”，然后点击“下一步”按钮。

接下来，我们可以通过勾选来添加新的自定义控制器或视图。选择后点击“下一步”按钮。

这里我们选择了一些控制器和视图添加到我们的 MVC 应用程序中，选择后点击“下一步”。

这里我们为我们的网站选择了“Default”主题。

点击“下一步”，在文本框中输入您的网站名称，然后点击“下一步”。

点击“完成”，我们可以看到我们的 MVC 应用程序已经创建，按 F5 运行我们的应用程序，您将看到带有新 bootstrap 模板的 MVC 应用程序。

2) 在我们的 MVC 应用程序中使用 Bootstrap Bundle 模板 CSS

方法 3：使用 Bootstrap Bundle 模板自定义 ASP.NET MVC 应用程序

现在我们创建一个 ASP.NET MVC 应用程序，并将 Bootstrap Bundle 模板添加到我们的 MVC 应用程序中。第一步是创建我们的 ASP.NET MVC 应用程序。打开 Visual Studio 2015 > 点击“Web” > 选择“ASP.NET Web 应用程序（.Net Framework）”

选择 MVC，然后点击“确定”来创建我们的 ASP.NET MVC 应用程序。

创建 MVC 应用程序后，运行以查看默认的 MVC bootstrap 模板。

现在让我们为我们的 MVC 应用程序添加 Bootstrap Bundle 的“Modern Business”模板。从我们的 Bootstrap Bundle “Modern Business” Web 项目中，选择 CSS 文件夹，然后我们需要将 CSS 文件夹粘贴到我们新的 MVC Web 应用程序项目中。

将复制的 CSS 文件夹粘贴到我们的 Web 应用程序中

接下来，在我们的 _Layout.cshtml 文件中，我们需要添加 Bootstrap Bundle 的“css”样式来更改我们的模板。

打开“Views”文件夹 > 打开“Shared”文件夹，然后打开 _Layout.cshtml。

打开 _Layout.cshtml 文件以更改默认 CSS 为新的 Bootstrap Bundle 布局 CSS。

打开您的 Bootstrap Bundle “_Layout.cshtml”文件并检查 CSS 名称。

注释掉现有的默认 CSS，然后添加 Bootstrap Bundle 模板 CSS。

运行应用程序，我们可以看到我们的 ASP.NET MVC 应用程序已经应用了新的 Bootstrap Bundle 模板。

3) 为 Bootstrap ASP.Net MVC 使用 Bootswatch 免费主题。

方法 3：使用 Bootswatch 模板自定义 ASP.NET MVC 应用程序

现在我们创建一个 ASP.NET MVC 应用程序，并将 Bootswatch 主题添加到我们的 MVC 应用程序中。第一步是创建我们的 ASP.NET MVC 应用程序。打开 Visual Studio 2015 > 点击“Web” > 选择“ASP.NET Web 应用程序（.Net Framework）”

选择 MVC，然后点击“确定”来创建我们的 ASP.NET MVC 应用程序。

创建 MVC 应用程序后，运行以查看默认的 MVC bootstrap 模板。

Bootswatch 提供免费的 Bootstrap 主题。Bootswatch 主题易于应用于我们的 Asp.NET MVC 应用程序。访问 www.bootswatch.com 查看所有适用于 MVC 应用程序的免费主题。

在这里，我们从网站上选择了“Superhero Theme”，在顶部菜单中我们可以看到“bootstrap.css”和“bootstrap.min.css”。这是一个开源项目，我们可以复制“bootstrap.css”和“bootstrap.min.css”的样式代码，并替换为我们默认的 CSS 主题。