twitter-bootstrap ASP .Net MVC Web 应用程序集成引导程序模板

ASP .Net MVC Web Application integrating bootstrap templates

提问by Syed Farjad Zia Zaidi

I know I will probably get too many down votes for this question, but I just could not find a tutorial to my problem.

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

I have created a ASP .Net MVC project in Visual Studio 2013 (New Project -> ASP.NET Web Application -> MVC) and I am trying to change the default bootstrap for this project, I have downloaded bootstrap templates from different websites but I just can not use them in my project. I have followed a few questions on SO and some tutorials but all I could was change some styling, not entirely use the template I want to use.

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

Tutorial that I read:

我读过的教程：

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

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

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

SO Questions:

问题：

bootstrap 3 template change mvc5

引导程序 3 模板更改 mvc5

Bootstrap Jumbotron not becoming full width of Body

Bootstrap Jumbotron 没有变成 Body 的全宽

After reading above questions and a few more tutorials here and there, I was able to change the theme but not the template, I want to use a parallax theme like this one

在阅读了上面的问题，还有一些人在这里的教程后，有，我可以更改主题，但没有模板，我想用视差主题这样一个

I copied the css into bootstrap.css, javascript into bootstrap.jsand HTML into my page Home page but then _Layout.cshtmlis messing up the display...

我将 css 复制到bootstrap.css、javascriptbootstrap.js和 HTML 中，然后将其复制到我的主页主页中，但后来_Layout.cshtml弄乱了显示...

My Questions:

我的问题：

1.) Am I doing this the wrong way?

1.) 我这样做是错误的吗？

2.) What changes should I make to the _Layout.cshtmlfile to display the template properly?

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

3.) I read that there are different versions of bootstraps, the default version that is used in the project when I created it is V3.0.0 and some templates that I downloaded are V3.1.1, Will they be compatible? I followed thisto upgrade the bootstrap version of my project to V3.1.1 after that some more .js and .css files were added to my project and things got more complicated.

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

4.) What will be the _Layout.cshtmlfile if I use bootstrap V3.0.2 ?

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

Any help will be appreciated...

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

EDIT:

编辑：

I am trying to use this template:

我正在尝试使用此模板：

Template

模板

Template

模板

回答by Syed Farjad Zia Zaidi

Integrating Bootstrap Template into ASP .Net MVC 5:

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

1. First of all create a new Project:

   Web Application -> MVC

2. Run your Project by pressing F5, it will look like:

3. Now check that your downloaded Bootstrap Template Folder contains following:

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

   _{Note: Sometime bootstrap.cssmay be named as style.cssand bootstrap.jsmay be named as style.js}

4. You will be making changes to following files in ASP .Net MVC Project:

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

   • bootstrap.min.js

     

5. Open your all the files mentioned above in code editor:

   

6. Now do the following:

   • Copy all of the code from bootstrap.css(Template cssFolder) to bootstrap.css(Content Folder)
   • Copy all of the code from bootstrap.min.css(Template cssFolder) to bootstrap.min.css(Content Folder)
   • Copy all of the code from bootstrap.js(Template jsFolder) to bootstrap.js(Scripts Folder)
   • Copy all of the code from bootstrap.min.js(Template jsFolder) to bootstrap.min.js(Scripts Folder)

7. Now its time to adjust your _Layout.cshtmlaccording to the Theme. We will be splitting the index.htmlfile from the Theme folder into two parts, one part will go into _Layout.cshtmland one part will go into 'Index.cshtml`:

   

8. Replace your _Layout.cshtmlcode with the code below:

   _Layout.cshtml

9. Replace your Index.cshtmlcode with the code below:

   Index.cshtml

10. Now run your Project it will be like:

    Link

1. 首先新建一个项目：

   Web Application -> MVC

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

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

   • 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根据主题调整你的了。我们将把index.htmlTheme 文件夹中的文件分成两部分，一部分进入_Layout.cshtml，另一部分进入“Index.cshtml”：

   

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

   _Layout.cshtml

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

   索引.cshtml

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

    关联

This is how I solved my problem.

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

回答by Mark Fitzpatrick

Bootstrap is just the basis. A template may also add additional features in order to be rendered correctly. Things that may or may not be based upon bootstrap. It could also be an older version of Boostrap, or a newer as Boostratp has been at 3.2 for a while.

Bootstrap 只是基础。模板还可以添加附加功能以便正确呈现。可能基于也可能不基于 bootstrap 的事情。它也可能是较旧版本的 Boostrap，或者更新版本，因为 Boostratp 已经在 3.2 上运行了一段时间。

Usually, you include the main bootstrap.css first, then the css file(s) that the theme uses. Before you reference the bootstrap.js file, load jQuery. There is no set way to make your _layout.cshtml look good without

通常，您首先包含主 bootstrap.css，然后是主题使用的 css 文件。在引用 bootstrap.js 文件之前，请加载 jQuery。没有固定的方法可以让您的 _layout.cshtml 看起来不错

1) knowing what is wrong. We have to see the rendered code to really understand what is missing 2) What template you are attempting to apply since you may be missing the css or some elements that it uses.

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

回答by Mark Fitzpatrick

There's a great and simple way to get everything you need to get going. Use Chrome and hit F12 to open the developer tools. Right-click over the area that displays the rendered layout and choose "Inspect Element". It will open the DOM for the entire page but will select an item within an iframe. Find the element immediately within the iframe and right-click and select "Copy as HTML". This will give you the layout as well as script css and script order.

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

The css that shows in the bootply editor window doesn't go into the bootstrap.css file. It's rendered inline into the code that I showed you how to get at but you can place it into it's own CSS file. Just make sure that CSS file is loaded after the bootstrap css file.

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

Just for reference, the template appears to be using Bootstrap 3.0.2, which isn't too old but isn't the most current.

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