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

Question

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

我在 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

Answer 1

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

1. 首先新建一个项目：

   Web Application -> MVC

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

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

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

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

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

   • bootstrap.css
   • boostrap.min.css
   • bootstrap.js

   • bootstrap.min.js

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

6. 现在执行以下操作：

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

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

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

   _Layout.cshtml

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

   Index.cshtml

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

    Link

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

Answer 2

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

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

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

Answer 3

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

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

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

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