ASP.NET MVC Bootstrap - 我的_Layout.cshtml出了什么问题？
问题背景：
我试图使用Twitter bootstrap创建一个简单的ASP.NET MVC网站。我在MVC项目上使用Microsoft VS2013 Express。
问题：
我已经下载了一个Bootstrap网站，该网站应如下所示：
我到目前为止做了以下无济于事：
-
删除了_layout.cshtml页面的内容，添加了我已下载的“MetroMan”主题的Index.html页眉和页脚的页眉和页脚。
2.使用MetroMan主题的Scripts文件夹的内容替换'Scripts'文件夹的内容。
3.处理项目“内容”文件夹下的“模板”文件夹。在这里我添加了img，css，fonts文件夹以及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 个答案:
答案 0 :(得分：1)
_Layout.cshtml似乎需要浏览器在网站运行时无法找到的CSS链接。
将所需文件添加到scripts文件夹，然后创建样式包。有关Bundles的更多信息：http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
您现在可以在_Layout.cshtml
中渲染Bundle创建一个脚本包，并在需要时在_Layout.cshtml中呈现它。
答案 1 :(得分：0)
如果网站显示的是您的示例图片，那是因为没有加载CSS。这几乎可以肯定是因为CSS文件的路径不正确。
轻松评估此事：
- 在Firefox / Chrome和View Source中加载页面。
- 点击源文件中突出显示的链接到每个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">
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？