2016-09-27 74 views
0

我有使用Bootstrap博客模板,但頁腳不工作。任何幫助? 我複製代碼從http://getbootstrap.com/examples/blog/爲什麼Bootstrap頁腳不起作用?

標頭部分和頁腳部分不起作用。

這是我的代碼。

<!DOCTYPE html> 
<html lang="en"> 
<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; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <title>Blog Template for Bootstrap</title> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</head> 

<body> 

    <div class="blog-masthead"> 
     <div class="container"> 
      <nav class="blog-nav"> 
       <a class="blog-nav-item active" href="#">Home</a> 
       <a class="blog-nav-item" href="#">New features</a> 

      </nav> 
     </div> 
    </div> 

    <div class="container"> 

     <div class="blog-header"> 
      <h1 class="blog-title">The Bootstrap Blog</h1> 
      <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p> 
     </div> 

     <div class="row"> 

      <div class="col-sm-8 blog-main"> 

       <div class="blog-post"> 
        <h2 class="blog-post-title">Sample blog post</h2> 
        <p class="blog-post-meta">January 1, 2014 by <a  href="#">ABC</a></p> 


        <hr> 

        <h2>Heading</h2> 
        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
        <h3>Sub-heading</h3> 
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
        <pre><code>Example code block</code></pre> 
        <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> 
        <h3>Sub-heading</h3> 
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. amet risus.</p> 

        <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p> 
        <ol> 
         <li>Vestibulum id ligula porta felis euismod semper.</li> 
         <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li> 
         <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li> 
        </ol> 
        <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p> 
       </div><!-- /.blog-post --> 





       <nav> 
        <ul class="pager"> 
         <li><a href="#">Previous</a></li> 
         <li><a href="#">Next</a></li> 
        </ul> 
       </nav> 

      </div><!-- /.blog-main --> 

      <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> 
       <div class="sidebar-module sidebar-module-inset"> 
        <h4>About</h4> 
        <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur .</p> 
       </div> 


      </div><!-- /.blog-sidebar --> 

     </div><!-- /.row --> 

    </div><!-- /.container --> 

    <footer class="blog-footer"> 
     <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> 
     <p> 
      <a href="#">Back to top</a> 
     </p> 
    </footer> 


    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
    <script src="../../dist/js/bootstrap.min.js"></script> 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 
</body> 

我用引導博客模板,但頁腳是行不通的。任何幫助?

回答

1

試試這個你缺少blog.css

<!DOCTYPE html> 
<html lang="en"> 
<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; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <title>Blog Template for Bootstrap</title> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

    <link rel="stylesheet" href="http://getbootstrap.com/examples/blog/blog.css"> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

</head> 

<body> 

<div class="blog-masthead"> 
    <div class="container"> 
     <nav class="blog-nav"> 
      <a class="blog-nav-item active" href="#">Home</a> 
      <a class="blog-nav-item" href="#">New features</a> 

     </nav> 
    </div> 
</div> 

<div class="container"> 

    <div class="blog-header"> 
     <h1 class="blog-title">The Bootstrap Blog</h1> 
     <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p> 
    </div> 

    <div class="row"> 

     <div class="col-sm-8 blog-main"> 

      <div class="blog-post"> 
       <h2 class="blog-post-title">Sample blog post</h2> 
       <p class="blog-post-meta">January 1, 2014 by <a  href="#">ABC</a></p> 


       <hr> 

       <h2>Heading</h2> 
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
       <h3>Sub-heading</h3> 
       <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
       <pre><code>Example code block</code></pre> 
       <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> 
       <h3>Sub-heading</h3> 
       <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. amet risus.</p> 

       <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p> 
       <ol> 
        <li>Vestibulum id ligula porta felis euismod semper.</li> 
        <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li> 
        <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li> 
       </ol> 
       <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p> 
      </div><!-- /.blog-post --> 





      <nav> 
       <ul class="pager"> 
        <li><a href="#">Previous</a></li> 
        <li><a href="#">Next</a></li> 
       </ul> 
      </nav> 

     </div><!-- /.blog-main --> 

     <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> 
      <div class="sidebar-module sidebar-module-inset"> 
       <h4>About</h4> 
       <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur .</p> 
      </div> 


     </div><!-- /.blog-sidebar --> 

    </div><!-- /.row --> 

</div><!-- /.container --> 

<footer class="blog-footer"> 
    <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> 
    <p> 
     <a href="#">Back to top</a> 
    </p> 
</footer> 


<!-- Bootstrap core JavaScript 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
<script src="../../dist/js/bootstrap.min.js"></script> 
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 
</body> 
1

把這個CSS在樣式表或頁面

.blog-footer { 
    padding: 40px 0; 
    color: #999; 
    text-align: center; 
    background-color: #f9f9f9; 
    border-top: 1px solid #e5e5e5; 
} 

你缺少blog.css也因此可以從這裏下載和集成在您的代碼 http://getbootstrap.com/examples/blog/blog.css

看看代碼筆現在它正在工作

http://codepen.io/santoshkhalse/pen/ozWaNA

+0

謝謝,它的沃金,但我還有一個問題。頁腳部分來自頁尾處,但我希望它在底部。 –

+0

如果這項工作請投我的答案 –

1

看起來像這是因爲您缺少該模板站點使用的額外CSS文件。

如果你去,你所提供的鏈接,查看源,您將看到文件「blog.css」。

這將工作,一旦你有。

1

使用此css文件 - http://getbootstrap.com/examples/blog/blog.css ,缺少blog.css

.blog-footer { 
    padding: 40px 0; 
    color: #999; 
    text-align: center; 
    background-color: #f9f9f9; 
    border-top: 1px solid #e5e5e5; 

/* 
 
* Globals 
 
*/ 
 

 
body { 
 
    font-family: Georgia, "Times New Roman", Times, serif; 
 
    color: #555; 
 
} 
 

 
h1, .h1, 
 
h2, .h2, 
 
h3, .h3, 
 
h4, .h4, 
 
h5, .h5, 
 
h6, .h6 { 
 
    margin-top: 0; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-weight: normal; 
 
    color: #333; 
 
} 
 

 

 
/* 
 
* Override Bootstrap's default container. 
 
*/ 
 

 
@media (min-width: 1200px) { 
 
    .container { 
 
width: 970px; 
 
    } 
 
} 
 

 

 
/* 
 
* Masthead for nav 
 
*/ 
 

 
.blog-masthead { 
 
    background-color: #428bca; 
 
    -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); 
 
     box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); 
 
} 
 

 
/* Nav links */ 
 
.blog-nav-item { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    font-weight: 500; 
 
    color: #cdddeb; 
 
} 
 
.blog-nav-item:hover, 
 
.blog-nav-item:focus { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
/* Active state gets a caret at the bottom */ 
 
.blog-nav .active { 
 
    color: #fff; 
 
} 
 
.blog-nav .active:after { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: -5px; 
 
    vertical-align: middle; 
 
    content: " "; 
 
    border-right: 5px solid transparent; 
 
    border-bottom: 5px solid; 
 
    border-left: 5px solid transparent; 
 
} 
 

 

 
/* 
 
* Blog name and description 
 
*/ 
 

 
.blog-header { 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 
.blog-title { 
 
    margin-top: 30px; 
 
    margin-bottom: 0; 
 
    font-size: 60px; 
 
    font-weight: normal; 
 
} 
 
.blog-description { 
 
    font-size: 20px; 
 
    color: #999; 
 
} 
 

 

 
/* 
 
* Main column and sidebar layout 
 
*/ 
 

 
.blog-main { 
 
    font-size: 18px; 
 
    line-height: 1.5; 
 
} 
 

 
/* Sidebar modules for boxing content */ 
 
.sidebar-module { 
 
    padding: 15px; 
 
    margin: 0 -15px 15px; 
 
} 
 
.sidebar-module-inset { 
 
    padding: 15px; 
 
    background-color: #f5f5f5; 
 
    border-radius: 4px; 
 
} 
 
.sidebar-module-inset p:last-child, 
 
.sidebar-module-inset ul:last-child, 
 
.sidebar-module-inset ol:last-child { 
 
    margin-bottom: 0; 
 
} 
 

 

 
/* Pagination */ 
 
.pager { 
 
    margin-bottom: 60px; 
 
    text-align: left; 
 
} 
 
.pager > li > a { 
 
    width: 140px; 
 
    padding: 10px 20px; 
 
    text-align: center; 
 
    border-radius: 30px; 
 
} 
 

 

 
/* 
 
* Blog posts 
 
*/ 
 

 
.blog-post { 
 
    margin-bottom: 60px; 
 
} 
 
.blog-post-title { 
 
    margin-bottom: 5px; 
 
    font-size: 40px; 
 
} 
 
.blog-post-meta { 
 
    margin-bottom: 20px; 
 
    color: #999; 
 
} 
 

 

 
/* 
 
* Footer 
 
*/ 
 

 
.blog-footer { 
 
    padding: 40px 0; 
 
    color: #999; 
 
    text-align: center; 
 
    background-color: #f9f9f9; 
 
    border-top: 1px solid #e5e5e5; 
 
} 
 
.blog-footer p:last-child { 
 
    margin-bottom: 0; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 

 
    <div class="blog-masthead"> 
 
     <div class="container"> 
 
      <nav class="blog-nav"> 
 
       <a class="blog-nav-item active" href="#">Home</a> 
 
       <a class="blog-nav-item" href="#">New features</a> 
 

 
      </nav> 
 
     </div> 
 
    </div> 
 

 
    <div class="container"> 
 

 
     <div class="blog-header"> 
 
      <h1 class="blog-title">The Bootstrap Blog</h1> 
 
      <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p> 
 
     </div> 
 

 
     <div class="row"> 
 

 
      <div class="col-sm-8 blog-main"> 
 

 
       <div class="blog-post"> 
 
        <h2 class="blog-post-title">Sample blog post</h2> 
 
        <p class="blog-post-meta">January 1, 2014 by <a  href="#">ABC</a></p> 
 

 

 
        <hr> 
 

 
        <h2>Heading</h2> 
 
        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
 
        <h3>Sub-heading</h3> 
 
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
 
        <pre><code>Example code block</code></pre> 
 
        <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> 
 
        <h3>Sub-heading</h3> 
 
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. amet risus.</p> 
 

 
        <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p> 
 
        <ol> 
 
         <li>Vestibulum id ligula porta felis euismod semper.</li> 
 
         <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li> 
 
         <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li> 
 
        </ol> 
 
        <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p> 
 
       </div><!-- /.blog-post --> 
 

 

 

 

 

 
       <nav> 
 
        <ul class="pager"> 
 
         <li><a href="#">Previous</a></li> 
 
         <li><a href="#">Next</a></li> 
 
        </ul> 
 
       </nav> 
 

 
      </div><!-- /.blog-main --> 
 

 
      <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> 
 
       <div class="sidebar-module sidebar-module-inset"> 
 
        <h4>About</h4> 
 
        <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur .</p> 
 
       </div> 
 

 

 
      </div><!-- /.blog-sidebar --> 
 

 
     </div><!-- /.row --> 
 

 
    </div><!-- /.container --> 
 

 
    <footer class="blog-footer"> 
 
     <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> 
 
     <p> 
 
      <a href="#">Back to top</a> 
 
     </p> 
 
    </footer>

相關問題