Bootstrap無法正常工作

我的html頁面無法正常工作，但bootstrap使它與我想要的一樣工作。我下載了bootstrap並將css文件包含到了font-awesome page的font-awesome.min.css中。另外我確保我全部寫得很好。我注意控制檯，並說我的文件不包含在頁面中。如果你有一些問題，你可以在評論中問我。Bootstrap無法正常工作

這裏是我的代碼：

@import url('https://fonts.googleapis.com/css?family=Lato|Raleway'); 
 
body { 
 
    background-color: #f2f2f2; 
 
    font-family: "Lato"; 
 
    font-weight: 300; 
 
    font-size: 16px; 
 
    color: #555; 
 
    -webkit-font-smoothing: antialiased; 
 
    -webkit-overflow-scrolling: touch; 
 
    margin-top: 60px; 
 
} 
 

 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    font-family: Raleway; 
 
    font-weight: 300; 
 
    color: #333; 
 
} 
 

 
p { 
 
    line-height: 28px; 
 
    margin-bottom: 25px; 
 
} 
 

 
.centered { 
 
    text-align: center; 
 
} 
 

 
a { 
 
    color: #f85c37; 
 
} 
 

 
a:hover, 
 
a:focus { 
 
    color: #7b7b7b; 
 
    text-decoration: none; 
 
    outline: 0; 
 
} 
 

 
hr { 
 
    display: block; 
 
    height: 1px; 
 
    border: 0px; 
 
    border-top: 1px solid #ccc; 
 
    margin: 1em 0; 
 
    padding: 0; 
 
} 
 

 
.navbar { 
 
    font-weight: 800; 
 
    fin-sise: 14px; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
} 
 

 
.navbar-inverse { 
 
    background: #2d2d2d; 
 
    border-color: #2d2d2d; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Bootstrap сайт</title> 
 
    <link rel="stylesheet" href="css/bootstrap.css"> 
 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="css/stylesheet.css"> 
 
</head> 
 

 
<body> 
 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
     <a class="navbar-brand" href="#">PR<i class="fa fa-circle"></i>GER</a> 
 
     </div> 
 
     <div class="navbar-collapse collapse"> 
 
     <!--class="navbar-collapse collapse"--> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">Домой</a></li> 
 
      <li><a href="#">Про нас</a></li> 
 
      <li><a href="#">Сервсиы</a></li> 
 
      <li><a href="#">Работы</a></li> 
 
      <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-08-29 Dimas Karpus

你嘗試使用CDN，而不是使用本地文件？ https://www.bootstrapcdn.com/ 注意，bootstrap也使用JS文件。 – JohnnyBizzle

定義「不起作用」 –

你是什麼意思：「不能正常工作」？什麼不工作？你看看控制檯網絡選項卡，以確保實際上加載的CSS？ – Tomer

你好嘗試下面的代碼，我認爲它的工作。

@import url('https://fonts.googleapis.com/css?family=Lato|Raleway'); 
 

 
body { 
 
    background-color: #f2f2f2; 
 
    font-family: "Lato"; 
 
    font-weight: 300; 
 
    font-size: 16px; 
 
    color:#555; 
 

 
    -webkit-font-smoothing: antialiased; 
 
    -webkit-overflow-scrolling:touch; 
 

 
    margin-top:60px; 
 
} 
 

 
h1, h2, h3, h4, h5, h6{ 
 
    font-family: Raleway; 
 
    font-weight: 300; 
 
    color:#333; 
 
} 
 

 
p{ 
 
    line-height:28px; 
 
    margin-bottom: 25px; 
 
} 
 

 
.centered{ 
 
    text-align: center; 
 
} 
 

 
a{ 
 
    color:#f85c37; 
 
} 
 

 
a:hover, a:focus{ 
 
    color:#7b7b7b; 
 
    text-decoration: none; 
 
    outline: 0; 
 
} 
 

 
hr{ 
 
    display:block; 
 
    height:1px; 
 
    border:0px; 
 
    border-top:1px solid #ccc; 
 
    margin:1em 0; 
 
    padding:0; 
 
} 
 

 
.navbar { 
 
    font-weight: 800; 
 
    fin-sise:14px; 
 
    padding-top:15px; 
 
    padding-bottom:15px; 
 
} 
 

 
.navbar-inverse { 
 
    background: #2d2d2d; 
 
    border-color:#2d2d2d; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
@import url('https://fonts.googleapis.com/css?family=Lato|Raleway'); 
 

 
body { 
 
    background-color: #f2f2f2; 
 
    font-family: "Lato"; 
 
    font-weight: 300; 
 
    font-size: 16px; 
 
    color:#555; 
 

 
    -webkit-font-smoothing: antialiased; 
 
    -webkit-overflow-scrolling:touch; 
 

 
    margin-top:60px; 
 
} 
 

 
h1, h2, h3, h4, h5, h6{ 
 
    font-family: Raleway; 
 
    font-weight: 300; 
 
    color:#333; 
 
} 
 

 
p{ 
 
    line-height:28px; 
 
    margin-bottom: 25px; 
 
} 
 

 
.centered{ 
 
    text-align: center; 
 
} 
 

 
a{ 
 
    color:#f85c37; 
 
} 
 

 
a:hover, a:focus{ 
 
    color:#7b7b7b; 
 
    text-decoration: none; 
 
    outline: 0; 
 
} 
 

 
hr{ 
 
    display:block; 
 
    height:1px; 
 
    border:0px; 
 
    border-top:1px solid #ccc; 
 
    margin:1em 0; 
 
    padding:0; 
 
} 
 

 
.navbar { 
 
    font-weight: 800; 
 
    fin-sise:14px; 
 
    padding-top:15px; 
 
    padding-bottom:15px; 
 
} 
 

 
.navbar-inverse { 
 
    background: #2d2d2d; 
 
    border-color:#2d2d2d; 
 
} 
 
</style> 
 
    
 
</head> 
 
<body> 
 

 
<div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">PR<i class="fa fa-circle"></i>GER</a> 
 
     </div> 
 
     <div class="navbar-collapse collapse"> <!--class="navbar-collapse collapse"--> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">?????</a></li> 
 
      <li><a href="#">??? ???</a></li> 
 
      <li><a href="#">???????</a></li> 
 
      <li><a href="#">??????</a></li> 
 
      <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 
</html>

來源

2017-08-29 10:28:30

謝謝你！它真的和我想要的一樣）） –

歡迎！樂於幫助。 –

你必須在文件中丟失了一些重要的標籤標記。所有爲您解決：

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head --> 
    <title>Bootstrap 101 Template</title> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
    <link rel="stylesheet" href="css/stylesheet.css"> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
</head> 

<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">PR<i class="fa fa-circle"></i>GER</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <!--class="navbar-collapse collapse"--> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active"><a href="#">Домой</a></li> 
        <li><a href="#">Про нас</a></li> 
        <li><a href="#">Сервсиы</a></li> 
        <li><a href="#">Работы</a></li> 
        <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
</body> 

</html>

來源

2017-08-29 10:29:56

Bootstrap無法正常工作

回答

相關問題