Bootstrap不在页面上工作

时间：2017-08-29 10:19:11

标签： html css twitter-bootstrap

我的html页面无法正常工作，但是bootstrap应该让它与我想要的一样工作。我下载bootstrap并将css文件包含在font-awesome page的font-awesome.min.css页面中。我也确保我都写得很好。我注意控制台和dound我的文件不包括页面。如果您有疑问，可以在评论中问我。

这是我的代码：

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

文档中缺少一些标记重要标记。全部为您修好：         

<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>

答案 1 :(得分：0)

你好试试下面的代码我觉得它的工作。

@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>

相关问题
最新问题