Bootstrap 粘頁腳(你必須得學會的簡單技能),說得具體一點就是“将固定高度的頁腳緊貼頁面底部”。說完這句話,王二我有點誠惶誠恐,其實這句話出自bootstrap入門介紹,不過呢,請原諒我的粗魯(靈感非原創),畢竟項目的實際情況和模闆有所差別,是以參照模闆,也不能確定快速的完成“粘頁腳”的效果,那麼還是聽我來唠叨一下吧!
一、頁面效果

頁面非常簡單,注意亮線為火狐邊緣,可以很清楚的看到,頁腳灰色部分沉浸在頁面底部。
二、執行個體講解(無navbar-fixed-top)
①、代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="/ymeng/components/bootstrap/css/bootstrap.css" />
<style type="text/css">
html,body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
margin: 0 auto -200px;
}
#push
height: 200px;
}
.footer {
border-top: 1px solid #e5e5e5;
color: #777;
padding: 19px 0;
background-color: #f5f5f5;
}
</style>
<title>釋出項目</title>
</head>
<body>
<div id="wrap">
<nav class="navbar navbar-default navbar-fixed">
</nav>
<div class=" container project_choose">
<div class="row">
<div class="col-md-5 project_general">
<span class="f14">我有一個夢想,有創意項目,有創意産品,點選釋出回報</span>
<div class="blank20"></div>
<div>
<a type="button" class="btn btn-danger" href="/ymeng/deal/initDealCaluseConfirm">立即釋出産品</a>
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-5 project_agency">
<span class="f14">我有創業夢想,有融資需求,點選釋出股權</span>
<div class="blank20"></div>
<div>
<button type="button" class="btn btn-primary">立即發股權</button>
</div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div class="footer ">
<div class="container">
<div class="row footer-top">
<div class="col-sm-6 col-lg-6">
<h4></h4>
<p>歡迎你加入,這裡有你想要的.</p>
</div>
<div class="col-sm-6 col-lg-5 col-lg-offset-1">
<div class="row about">
<div class="col-xs-3">
<h4>關于</h4>
<ul class="list-unstyled">
<li>
<a href="">關于我們</a>
</li>
</ul>
</div>
<div class="col-xs-3">
<h4>聯系方式</h4>
<ul class="list-unstyled">
<li>
<a target="_blank" title="雲夢網官方微網誌" href="">新浪微網誌</a>
</li>
<li>
<a href="">電子郵件</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<div class="row footer-bottom">
<ul class="list-inline text-center">
<li>Copyright ©2016. n 洛陽限公司 Software All Rights Reserved.</li>
</ul>
</div>
</div>
</div>
</body>
</html>
②、頁面body布局
<body>
<div id="wrap">
<nav class="navbar navbar-default navbar-fixed">
</nav>
<div class=" container">
</div>
<div id="push"></div>
</div>
<div class="footer ">
</div>
</body>
body中第一級元素,兩個div,分别為wrap和footer
第二級元素中,一個nav,兩個div,分别為container和push(如果你忘記了push這個div,ok,你的頁面在縮放時會錯亂的)
以上列出的元素自然粘頁腳必不可少的。