使用Bootsrap创建的网站无法正确显示

我创建了一个网站，在“WebMatrix”中使用它时看起来很棒。当我尝试发布它时（在通过“Bahnhof”托管的服务器上，仅使用HTML），没有看到Bootstrap效果。使用Bootsrap创建的网站无法正确显示

可能是什么问题？我曾经通过同一台服务器上传了一个网站，然后才依赖于CSS，但之后它运行正常。我已经使用朋友的服务器测试过这个网站，然后运行。 “Bahnhof”说他们的服务器是基于Linux的，并且它只支持HTML和浏览器提供支持的其他东西。

Ex。在index.html的代码（我知道这是一个有点长，但我知道网站的编码，大部分CSS的是东西我已经通过教程发现＃1）：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Home</title> 
<link rel="stylesheet" href="bootstrap.css"> 
<link href="/css/bootstrap.min.css" rel="stylesheet"> 
<style type="text/css"> 
    .navbar-inner { 
     background: #FFF; /* Old browsers */ 
     background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 
     100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba 
     (69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); 
     background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 
     100%); 
     background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);/
     background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); 
     background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 
     100%); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484d', 
     endColorstr='#000000',GradientType=0); 
     border: 0px solid black; 
     } 

    .navbar .nav > li > a { 
     color: #000; 
     background: #ffffff !important; 
     padding: 80px; 
     font-weight:bolder; 
     font-family: 'Simplified Arabic Fixed'; 
    }  

    .navbar .nav > li > a:hover{ 
     color:#000 !important; 
     background: #ffffff !important; 
     font-family: 'Simplified Arabic Fixed'; 
     font-weight:bolder; 
     -webkit-transition:background 1s ease; 
     -moz-transition:background 1s ease; 
     -o-transition:background 1s ease; 
     transition:background 1s ease; 
    } 

    .navbar .nav .active > a, 
    .navbar .nav .active > a:hover, 
    .navbar .nav .active > a:focus { 
     color: #000; 
     background: #ffffff !important; 
     font-weight:bolder !important;; 
     font-family: 'Simplified Arabic Fixed'; 
     font-size: 18px; 
     box-shadow:none; 
     background: #ffffff !important; 
     outline: none; 
     -moz-outline-style: none; 
     -webkit-outline: none; 
     -o-outline: none; 
     -ms-outline: none; 
    } 

    .nav-collapse a { 
     background: #ffffff !important; 
     font-weight:bolder !important; 
     font-family: 'Simplified Arabic Fixed'; 
     font-size: 18px; 
     text-shadow:none !important; 
     outline: none; 
     -moz-outline-style: none; 
     -webkit-outline: none; 
     -o-outline: none; 
     -ms-outline: none; 
    } 

    .navbar .nav > li > a:visited { 
     color: #000; 
     background: #ffffff !important; 
     font-weight:bolder !important; 
     font-family: 'Simplified Arabic Fixed'; 
     font-size: 18px; 
     outline: none; 
     -moz-outline-style: none; 
     -webkit-outline: none; 
     -o-outline: none; 
     -ms-outline: none; 
     } 

    .hero-unit { 
     padding:20% 30% 20% 30%; 
     margin-bottom: 0px; 
     font-size: 18px; 
     font-weight: 200; 
     font-family: 'Simplified Arabic Fixed'; 
     line-height: 30px; 
     color: inherit; 
     background-color: #FFF; 
     border:0px solid #cacaca; 
     -webkit-border-radius: 10px; 
     -moz-border-radius: 10px; 
     border-radius: 10px; 
    } 

    .nav { 
     padding-right: 10%; 
     padding-left: 10%; 
    } 

    .body { 
     padding-bottom: 20%; 
    } 


</style> 
<script src="jquery-1.9.0.js"></script> 
<script src="bootstrap.js"></script> 
<script type="text/javascript"> </script> 
<script src="/js/jquery.js"></script> 
<script src="/js/bootstrap.min.js"></script> 
</head> 
<body style="background-color: #FFF"> 

<div class="navbar navbar-fixed-bottom center"> 
<div class="navbar-inner-inverse"> 
<div class="container-fluid"> 
     <ul class="nav"> 
      <li class="active"><a href="#">HOME</a></li> 
      <li><a href="about.html">ABOUT</a></li> 
      <li><a href="report.html"">REPORTS</a></li> 
      <li><a href="contact.html">CONTACT</a></li> 
    </ul> 
</div> 
</div> 
</div> 
</div> 
    <div class="hero-unit"> 
     <div class="row-fluid"> 
     <div class="span12"> 
      <h2>Home</h2> 
      <p> </p> 
     </div> 
    </div> 
    </div> 

    </body> 
    </html>

来源

2013-04-14 Nanaki

仔细检查网址到bootstrap.min.css是正确的，请检查它是否存在于您的服务器上的路径中，并将其包含在链接标记中。

记住链接与

看在服务器上的根目录和链接，只是

bootstrap.css

将寻求在文件中的链接的同一目录开始标签处于打开状态。

您可以使用浏览器调试器来检查资源是否真的被加载，例如Chrome中的开发人员工具。

此外，包括bootstrap.min.css是一样的，包括bootstrap.css（假设你没有从他们的原件修改两个文件。

bootstrap.min.css是所谓缩小的版本，这意味着空白已经从文件中删除，使其更小，并应允许您的网页加载更快。

来源

2013-04-14 14:24:42 tlcowling

它没有帮助。我用Opera的蜻蜓检查错误，它们都似乎绑在Bootstrap上。）。看起来像一个绝望的情况？ – Nanaki

使用Bootsrap创建的网站无法正确显示

回答

相关问题