ASP.NET MVC引導程序-_Layout.cshtml有什么問題？
[英]ASP.NET MVC Bootstrap - What is wrong with my _Layout.cshtml?
問題描述
問題背景：
我正在嘗試使用Twitter引導程序來創建一個簡單的ASP.NET MVC網站。 我在MVC項目上使用Microsoft VS2013 Express。
問題：
我已經下載了Bootstrap網站，該網站應如下所示：
我的當前看起來像：
到目前為止，我沒有進行以下操作：
刪除_layout.cshtml頁面的內容，添加我下載的Index.html頁眉和頁腳“ MetroMan”主題的頁眉和頁腳。
2.將“ Scripts”文件夾的內容替換為MetroMan主題的“ Scripts”文件夾的內容。
3.在項目的“目錄”文件夾下創建一個“模板”文件夾。 在此，我添加了img，css，字體文件夾以及MetroMan主題中的相應內容。
_Layout.cshtml文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Title here -->
<title>MetroMan</title>
<!-- Description, Keywords and Author -->
<meta name="description" content="Your description">
<meta name="keywords" content="Your,Keywords">
<meta name="author" content="ResponsiveWebInc">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" href="css/settings.css" media="screen" />
<!-- Navigation menu -->
<link rel="stylesheet" href="css/ddlevelsmenu-base.css">
<link rel="stylesheet" href="css/ddlevelsmenu-topbar.css">
<!-- PrettyPhoto -->
<link rel="stylesheet" href="css/prettyPhoto.css">
<!-- cSlider -->
<link rel="stylesheet" href="css/slider.css">
<!-- Font awesome CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="#">
</head>
<body>
<!-- Sliding panel starts-->
<div class="slidepanel">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="spara">
<!-- Contact details -->
<p>
<i class="fa fa-envelope-o lightblue"></i> something@gmail.com
@*<i class="fa fa-twitter lightblue"></i> @something *@
<i class="fa fa-desktop lightblue"></i> 123-456-7890
</p>
</div>
</div>
<div class="col-md-4">
<div class="social">
<!-- Social media icons. Repalce # with your profile links -->
<a href="#" class="bblue"><i class="fa fa-facebook"></i></a>
<a href="#" class="borange"><i class="fa fa-google-plus"></i></a>
<a href="#" class="blightblue"><i class="fa fa-twitter"></i></a>
<a href="#" class="bviolet"><i class="fa fa-linkedin"></i></a>
<a href="#" class="bred"><i class="fa fa-pinterest"></i></a>
<a href="#" class="borange"><i class="fa fa-rss"></i></a>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Sliding panel ends-->
<!-- Header starts -->
<header>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4">
<!-- Logo starts -->
<div class="logo">
<div class="logo-image">
<!-- Image link -->
<a href="index.html"><i class="fa fa-desktop blue"></i></a>
</div>
<div class="logo-text">
<h1><a href="index.html">Metro<span class="lightblue">Man</span></a></h1>
<div class="logo-meta">Cool Metro Theme</div>
</div>
<div class="clearfix"></div>
</div>
<!-- Logo ends -->
</div>
<div class="col-md-9 col-sm-8">
<!-- Navbar starts -->
<div class="navi pull-right">
<div id="ddtopmenubar" class="mattblackmenu">
<!-- Main navigation -->
<!-- Use the background color class in anchor tag for colorful menu -->
<ul>
<li>
<a href="#" rel="ddsubmenu2" class="blightblue"> <i class="fa fa-home"></i> Home</a>
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="index.html">Revolution Slider</a></li>
<li><a href="index-parallax.html">Parallax Slider</a></li>
</ul>
</li>
<!-- Main navigation -->
<li>
<a href="#" rel="ddsubmenu2" class="bred"> <i class="fa fa-desktop"></i> Pages</a>
<!-- Sub Navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="landingpage.html">Landing Page</a></li>
<li><a href="comingsoon.html">Coming Soon</a></li>
<li><a href="features2.html">Features</a></li>
<li><a href="service1.html">Service</a></li>
<li><a href="team.html">Our Team</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li>
<a href="#">Sub Navigation</a>
<ul>
<li><a href="#">Nav Level #3</a></li>
</ul>
</li>
</ul>
</li>
<!-- Main navigation -->
<li>
<a href="#" rel="ddsubmenu2" class="bviolet"> <i class="fa fa-tablet"></i> Pages</a>
<!-- Sub Navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="404.html">404</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="pricingtable.html">Pricing Table</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</li>
<li>
<a href="#" rel="ddsubmenu2" class="bgreen"> <i class="fa fa-comments"></i> Blog</a>
<!-- Sub navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="blog2.html">Blog #1</a></li>
<li><a href="blog1.html">Blog #2</a></li>
<li><a href="blogsingle.html">Blog Single</a></li>
</ul>
</li>
<li><a href="portfolio.html" class="borange"> <i class="fa fa-camera"></i> Portfolio</a></li>
<li><a href="contactus.html" class="bblue"> <i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
<div class="navis"></div>
<!-- Navbar ends -->
<div class="clearfix"></div>
</div>
</div>
</div>
</header>
<div class="clearfix"></div>
<!-- Header ends -->
@RenderBody()
<!-- Footer -->
<!-- Below area is for testimonial -->
<div class="foot blightblue">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- User icon -->
<span class="twitter-icon text-center"><i class="fa fa-user"></i></span>
<p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum dolor eget nisi <br />fermentum quis hendrerit magna vestibulum."</em></p>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="widgets">
<div class="col-md-3">
<div class="fwidget">
<h4>Contact</h4>
<p>Nullam justo nunc, dignissim at convallis posuere, sodales eu orci. </p>
<hr />
<i class="fa fa-home"></i> 123, Some Area. Los Angeles, CA, 54321.
<hr />
<i class="fa fa-phone"></i> +239-3823-3434
<hr />
<i class="fa fa-envelope-o"></i> <a href="mailto:#">someone@company.com</a>
<hr />
<div class="social">
<a href="#" class="bblue"><i class="fa fa-facebook"></i></a>
<a href="#" class="borange"><i class="fa fa-google-plus"></i></a>
<a href="#" class="blightblue"><i class="fa fa-twitter"></i></a>
<a href="#" class="bviolet"><i class="fa fa-linkedin"></i></a>
<a href="#" class="bred"><i class="fa fa-pinterest"></i></a>
<a href="#" class="borange"><i class="fa fa-rss"></i></a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Categories</h4>
<ul>
<li><a href="#">Condimentum - Condimentum gravida</a></li>
<li><a href="#">Etiam at - Condimentum gravida</a></li>
<li><a href="#">Fusce vel - Condimentum gravida</a></li>
<li><a href="#">Vivamus - Condimentum gravida</a></li>
<li><a href="#">Pellentesque - Condimentum gravida</a></li>
<li><a href="#">Fusce vel - Condimentum gravida</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Subscribe</h4>
<p>Duis leo risus, condimentum ut posuere ac, vehicula luctus nunc. Quisque rhoncus, a sodales enim arcu quis turpis.</p>
<p>Enter you email to Subscribe</p>
<form class="form-inline" role="form">
<div class="input-group">
<input type="text" class="form-control" id="subscribe" placeholder="Subscribe...">
<span class="input-group-btn">
<button type="submit" class="btn btn-danger">Subscribe</button>
</span>
</div>
</form>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Recent Posts</h4>
<ul>
<li><a href="#">Sed eu leo orci, condimentum gravida metus</a></li>
<li><a href="#">Etiam at nulla ipsum, in rhoncus purus</a></li>
<li><a href="#">Fusce vel magna faucibus felis dapibus facilisis</a></li>
<li><a href="#">Vivamus scelerisque dui in massa</a></li>
<li><a href="#">Pellentesque eget adipiscing dui semper</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copy">
<p>Copyright © <a href="#">Your Site</a> - <a href="index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="faq.html">FAQ</a> | <a href="contactus.html">Contact Us</a></p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</footer>
<!-- Scroll to top -->
<span class="totop"><a href="#"><i class="fa fa-angle-up"></i></a></span>
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script src="js/jquery.themepunch.plugins.min.js"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>
<!-- prettyPhoto -->
<script src="js/jquery.prettyPhoto.js"></script>
<!-- isotope -->
<script src="js/jquery.isotope.js"></script>
<!-- Navigation menu -->
<script src="js/ddlevelsmenu.js"></script>
<!-- jQuery cSlider / Extra script for cslider -->
<script src="js/jquery.cslider.js"></script>
<script src="js/modernizr.custom.28468.js"></script>
<!-- Support -->
<script src="js/filter.js"></script>
<!-- Respond JS for IE8 -->
<script src="js/respond.min.js"></script>
<!-- HTML5 Support for IE -->
<script src="js/html5shiv.js"></script>
<!-- Custom JS -->
<script src="js/custom.js"></script>
<!-- This page JS -->
<script>
/* JS for SLIDER REVOLUTION */
jQuery(document).ready(function () {
jQuery('.tp-banner').revolution(
{
delay: 9000,
startheight: 500,
hideThumbs: 10,
navigationType: "none",
hideArrowsOnMobile: "on",
touchenabled: "on",
onHoverStop: "on",
navOffsetHorizontal: 0,
navOffsetVertical: 20,
stopAtSlide: -1,
stopAfterLoops: -1,
shadow: 0,
fullWidth: "on",
fullScreen: "off"
});
});
</script>
</body>
</html>
2 個解決方案
解決方案1
1 2014-05-18 14:32:50
_Layout.cshtml似乎需要網站運行時瀏覽器無法找到的CSS鏈接。
將所需文件添加到scripts文件夾，然后創建一個樣式包。 有關捆綁包的更多信息，請訪問： http : //www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
現在，您可以在_Layout.cshtml中渲染包
創建腳本包，並根據需要在_Layout.cshtml中呈現它。
解決方案2
0 已采納 2014-05-18 16:00:04
當一個網站顯示為您的示例圖像損壞時，是因為沒有CSS加載。 這幾乎可以肯定是因為CSS文件的路徑不正確。
為了輕松評估：
- 在Firefox / Chrome中加載頁面，然后查看源代碼。
- 單擊源中突出顯示的指向每個CSS文件的鏈接，然后查看它們是否實際加載。 他們很可能會返回
404 Not Found。
查看您的代碼，最可能的解決方案是您需要更改：
<link href="css/bootstrap.min.css" rel="stylesheet">
至
<link href="/css/bootstrap.min.css" rel="stylesheet">
要么
<link href="/MyApplication/css/bootstrap.min.css" rel="stylesheet">
Asp.Net Core 6 添加 Bootstrap 到腳手架 Identity _Layout.cshtml
[英]Asp.Net Core 6 Add Bootstrap to scaffolded Identity _Layout.cshtml
ASP.NET，MVC，C＃應用程序-為不同的視圖修改_Layout.cshtml
[英]ASP.NET, MVC, C# application - modify _Layout.cshtml for different Views
ASP.Net MVC 3從HTTP-POST方法發送字符串到_Layout.cshtml
[英]ASP.Net MVC 3 Sending string from HTTP-POST Method to _Layout.cshtml
如何在Asp.net MVC中將值從部分視圖傳遞到共享視圖_Layout.cshtml？
[英]How to pass value from partial view to shared view _Layout.cshtml in asp.net MVC?
ASP.NET MVC 5-將用戶選擇的樣式表傳遞給_Layout.cshtml
[英]ASP.NET MVC 5 - Passing user chosen stylesheet to _Layout.cshtml
ASP.NET MVC 5 捆綁腳本未在 _Layout.cshtml 中調用
[英]ASP.NET MVC 5 bundled scripts not being called in _Layout.cshtml
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
ASP.NET MVC中_layout.cshtml中的布局
將Bootstrap連接到ASP.NET _Layout.cshtml文件
將常見數據傳遞到ASP.Net MVC中的_Layout.cshtml中
Asp.Net Core 6 添加 Bootstrap 到腳手架 Identity _Layout.cshtml
ASP.NET，MVC，C＃應用程序-為不同的視圖修改_Layout.cshtml
ASP.Net MVC 3從HTTP-POST方法發送字符串到_Layout.cshtml
如何在Asp.net MVC中將值從部分視圖傳遞到共享視圖_Layout.cshtml？
ASP.NET MVC 5-將用戶選擇的樣式表傳遞給_Layout.cshtml
ASP.NET MVC 5 捆綁腳本未在 _Layout.cshtml 中調用
在 Layout.cshtml Asp.net 中調用模型時出錯
相關標簽