集成引导模板的 ASP .Net MVC Web 应用程序

Posted 2023-03-05

【中文标题】集成引导模板的 ASP .Net MVC Web 应用程序

【英文标题】：ASP .Net MVC Web Application integrating bootstrap templates

【发布时间】：2014-11-20 10:04:18

【问题描述】：

我知道我可能会在这个问题上得到太多反对票，但我就是找不到解决我的问题的教程。

我在 Visual Studio 2013 中创建了一个 ASP .Net MVC 项目（新项目 -> ASP.NET Web 应用程序 -> MVC），我正在尝试更改此项目的默认引导程序，我已经从不同的引导程序模板下载网站，但我不能在我的项目中使用它们。我已经关注了一些关于 SO 和一些教程的问题，但我只能更改一些样式，而不是完全使用我想要使用的模板。

我阅读的教程：

http://www.mytecbits.com/microsoft/dot-net/bootstrap-with-asp-net-mvc-4-step-by-step

http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-with-asp-net-mvc-5

SO 问题：

bootstrap 3 template change mvc5

Bootstrap Jumbotron not becoming full width of Body

在阅读了上述问题和其他一些教程之后，我能够更改主题但不能更改模板，我想使用像这样的视差主题one

我将 css 复制到 bootstrap.css，将 javascript 复制到 bootstrap.js 并将 html 复制到我的页面主页，但随后 _Layout.cshtml 搞砸了显示...

我的问题：

1.) 我做错了吗？

2.) 我应该对_Layout.cshtml 文件进行哪些更改才能正确显示模板？

3.) 我读到有不同版本的引导程序，我创建它时项目中使用的默认版本是 V3.0.0，我下载的一些模板是 V3.1.1，它们是否兼容？我跟随this将我的项目的引导版本升级到V3.1.1，之后我的项目中添加了更多的.js和.css文件，事情变得更加复杂。

4.) 如果我使用 bootstrap V3.0.2，_Layout.cshtml 文件会是什么？

任何帮助将不胜感激...

编辑：

我正在尝试使用此模板：

Template

Template

【参考方案1】：

将引导模板集成到 ASP .Net MVC 5：

首先新建一个项目：

Web Application -> MVC

按F5 运行您的项目，它将如下所示：

现在检查您下载的引导模板文件夹是否包含以下内容：

css (Folder): bootstrap.css bootstrap.min.css js (Folder): bootstrap.js bootstrap.min.js

_{注意：有时bootstrap.css 可能被命名为style.css，而bootstrap.js 可能被命名为style.js}

您将对 ASP .Net MVC 项目中的以下文件进行更改：

bootstrap.css boostrap.min.css bootstrap.js

bootstrap.min.js

在代码编辑器中打开上述所有文件：

现在执行以下操作：

将所有代码从bootstrap.css（模板css文件夹）复制到bootstrap.css（内容文件夹） 将所有代码从bootstrap.min.css（模板css文件夹）复制到bootstrap.min.css（内容文件夹） 将所有代码从bootstrap.js（模板js文件夹）复制到bootstrap.js（脚本文件夹） 将所有代码从bootstrap.min.js（模板js文件夹）复制到bootstrap.min.js（脚本文件夹）

现在是时候根据主题调整您的_Layout.cshtml了。我们将把 Theme 文件夹中的 index.html 文件分成两部分，一部分将进入 _Layout.cshtml，另一部分将进入 'Index.cshtml`：

将您的_Layout.cshtml 代码替换为以下代码：

_Layout.cshtml

将您的Index.cshtml 代码替换为以下代码：

Index.cshtml

现在运行你的项目，它会是这样的：

Link

这就是我解决问题的方法。

【参考方案2】：

有一种很棒且简单的方法可以让您获得所需的一切。使用 Chrome 并按 F12 打开开发者工具。右键单击显示渲染布局的区域并选择“检查元素”。它将打开整个页面的 DOM，但会在 iframe 中选择一个项目。立即在 iframe 中找到该元素，然后右键单击并选择“复制为 HTML”。这将为您提供布局以及脚本 css 和脚本顺序。

bootply 编辑器窗口中显示的 css 不会进入 bootstrap.css 文件。它被内嵌到我向您展示如何获取的代码中，但您可以将它放入它自己的 CSS 文件中。只需确保在引导 css 文件之后加载 CSS 文件。

仅供参考，该模板似乎使用的是 Bootstrap 3.0.2，它不是太旧但不是最新的。

【参考方案3】：

Bootstrap 只是基础。模板还可以添加其他功能以便正确呈现。可能基于或可能不基于引导程序的事物。它也可能是旧版本的 Boostrap，或者是新版本，因为 Boostratp 已经有一段时间了 3.2。

通常，您首先包含主 bootstrap.css，然后是主题使用的 css 文件。在引用 bootstrap.js 文件之前，请加载 jQuery。如果没有

，没有固定的方法可以让您的 _layout.cshtml 看起来不错

1) 知道什么是错的。我们必须查看渲染的代码才能真正理解缺少的内容 2) 您尝试应用什么模板，因为您可能缺少 css 或它使用的某些元素。

【讨论】：

我已经用我想要使用的布局更新了这个问题，如果你能告诉我如何将它与默认的 asp.net 项目一起使用，那会很棒......