使用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創建的網站無法正確顯示

回答

相關問題