Visual Studio 2013 中的引导模板迁移问题答案

【问题标题】：Bootstrap Template Migration issue within Visual Studio 2013Visual Studio 2013 中的引导模板迁移问题
【发布时间】：2015-03-18 23:26:15
【问题描述】：

我有一个类似的问题CSS Not Linking 1：CSS not linking to my index.html。

我能够在本地运行作为引导模板一部分的 HTMLPage1。当它未包含在 Visual Studio 2013 项目中时，它运行良好。

引导模板使用这种格式：

    <!-- Web Fonts -->
<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&amp;subset=cyrillic,latin'>

<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">

<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-default.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<link rel="stylesheet" href="assets/css/theme-colors/dark-blue.css"> 

<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/animate.css">
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/owl-carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/plugins/layer-slider/layerslider/css/layerslider.css">

<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">

但是，在 Visual Studio 中，CSS 没有链接，我不确定问题是否与我为包含所有 CSS 的项目所做的 .NET 4.5 捆绑有关。在将 HTMLPage1 添加到项目之前，我提供了所有用于捆绑的脚本和 css。此 HTMLPage1 不引用 BundleConfig.cs 或 Bundle.Config。所有 CSS 链接和脚本引用都包含在 HTMLPage1 中。

我已经尝试过：

<link rel="stylesheet" href="Content/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="Content/style.css" type="text/css">

我也尝试过这种格式，它是 VS 2010 的 ASP.NET 协议：

 <link rel="Stylesheet" href="~/Content/bootstrap.min.css"  type="text/css" />
 <link rel="stylesheet" href="~/Content/style.css" type="text/css">

还有几个其他的 CSS 链接是 HTMLPage1 的一部分，似乎没有一个被引用。

这里是HTMLPage1 Link

这是 DAV3 文件结构的屏幕截图。这包括默认的 ASP.NET 4.5 Forms Default.aspx。我添加了 HTMLPage1.html，脚本中的脚本，内容文件夹中的 CSS：

希望这个问题不是太简单，有人可以让我对这个问题有所了解。

【问题讨论】：

你能把你的文件结构的截图也贴出来吗？当我点击链接“HTMLPage1 Link”并查看它的源代码时，Boorstrap.min.css 和 style.css 都完美链接。所以我对实际问题有点困惑。
嗯，您链接的html 文件的css 链接很好。波浪号 ~ 仅被 ASP.net 理解为它处理的文件 - .html 不是其中之一（除非您修改 ASP.net 的设置以处理“静态”.html）....
@KiranVarsani 你指的是我从哪里复制的原始模板的文件结构？我几乎复制了 CSS 和图像并将它们放入 .NET 项目中的不同文件夹中。
我想检查一下您的 css 文件在您的文件夹结构中的确切位置？您如何尝试运行您的网站？如果您从 localhost 运行您的站点并且您的 html 页面不在根文件夹中，那么您的引用将不起作用。
@KiranVarsani 请告诉我此屏幕截图是否适合您

标签： asp.net css visual-studio-2013

【解决方案1】：

试试这个。我所做的只是在href 的内容之前添加一个正斜杠。如果您的本地 url 类似于 http://localhost/SiteName/Default.aspx 即作为虚拟应用程序托管的 IIS，这将不工作

但是当你的网址是这样的时候，这肯定会起作用， http://localhost:portnumber/Default.aspx 或 http://SiteName/Default.aspx

<link rel="stylesheet" href="/Content/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="/Content/style.css" type="text/css">

希望这能解决您的问题。

【讨论】：

没有帮助抱歉

【解决方案2】：

有几个迁移问题：

缺少 1 个 CSS：assets/plugins/layer-slider/layerslider/skins/fullwidth/skin.css。

缺少 4 个字体文件，这些在引导模板中不明显。

App 初始化 App.Init() 需要在 App.js 之后发生。这个 App.Init() 被放在图层滑块之后，导致了问题。

bootstrap.min.css 3.0.0 并且旧版本不适用于此模板，所以我不得不升级到 bootstrap.min.css 3.3.2

【讨论】：