2014-09-25 198 views
2

我知道我可能會爲此問題得到太多的贊成票,但我無法找到針對我的問題的教程。我已經在Visual Studio 2013(新建項目 - > ASP.NET Web應用程序 - > MVC)中創建了一個ASP .Net MVC項目,我試圖更改此項目的默認引導程序,我已經下載了引導程序模板不同的網站,但我不能在我的項目中使用它們。我跟着幾個關於SO和一些教程的問題,但我只能改變一些樣式,並不完全使用我想要使用的模板。ASP .Net MVC Web應用程序集成引導程序模板

教程,我讀:

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.)如果我使用引導V3.0.2,那麼_Layout.cshtml文件是什麼?

任何幫助將不勝感激...

編輯:

我試圖用這個模板:

Template

Template

回答

7

集成自舉模板到的ASP.NET MVC 5:

  1. 首先,創建一個新項目:

    Web Application -> MVC enter image description here enter image description here

  2. F5運行項目,它看起來像: enter image description here

  3. 現在檢查您下載的引導模板文件夾包含以下內容:

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

    注:有時bootstrap.css可能被命名爲style.cssbootstrap.js可能被命名爲style.js

  4. 你會被更改到以下文件ASP。淨MVC項目:

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

      enter image description here

  5. 打開所有文件提編輯在代碼編輯器的上方:

    enter image description here

  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.html分成兩個部分,一部分將進入_Layout.cshtml和一部分將進入「Index.cshtml`:

    enter image description here

  8. 的代碼替換您_Layout.cshtml代碼如下:

    _Layout.cshtml

  9. 替換您Index.cshtml代碼代碼如下:

    Index.cshtml

  10. 現在運行你的項目就會像:

    Link

這是我如何解決我的問題。

2

引導只是基礎。模板還可以添加其他功能以便正確呈現。可能或不可能基於引導的東西。它也可能是Boostrap的老版本,或者Boostratp已經在3.2一段時間的更新版本。

通常,首先包含主bootstrap.css,然後包含主題使用的css文件。在引用bootstrap.js文件之前,請加載jQuery。沒有一種方法可以使你的_layout.cshtml看起來不錯,沒有

1)知道什麼是錯的。我們必須看到呈現的代碼才能真正理解缺失的內容 2)您嘗試應用的模板是什麼,因爲您可能缺少css或它使用的某些元素。

+0

我已更新與我想要使用的佈局的問題,如果你可以告訴我如何使用默認的asp.net項目,這將是偉大的... ... – 2014-09-25 18:18:22

1

有一個偉大而簡單的方式來獲得你需要的一切。使用Chrome並點擊F12打開開發者工具。在顯示渲染布局的區域上單擊鼠標右鍵,然後選擇「檢查元素」。它會打開整個頁面的DOM,但會選擇一個iframe中的項目。立即在iframe中查找元素並右鍵單擊並選擇「以HTML格式複製」。這會給你佈局以及腳本的CSS和腳本順序。

在bootply編輯器窗口中顯示的css不會進入bootstrap.css文件。它被內嵌到代碼中,我向您展示瞭如何獲取,但您可以將它放入它自己的CSS文件中。只要確保CSS文件在引導CSS文件後加載。

僅供參考,該模板似乎使用Bootstrap 3.0.2,它不太舊,但不是最新的。