bootstrap的強(qiáng)大功能毋庸置疑。所以，網(wǎng)站底部版權(quán)信息區(qū)可以用bootstrap的“柵格系統(tǒng)”完成。
下面是一個(gè)未經(jīng)處理的底部版權(quán)信息區(qū)的樣式：
1 <div class="container"> 2 <p>這里是底部信息的標(biāo)題</p> 3 <div class="row"> 4 <!-- 部分：一 --> 5 <div class="col-md-3"> 6 <p>部分：一</p> 7 <div class="row"> 8 <div class="col-md-6"> 9 <ul> 10 <li>部分：一內(nèi)容</li> 11 <li>部分：一內(nèi)容</li> 12 <li>部分：一內(nèi)容</li> 13 </ul> 14 </div> 15 <div class="col-md-6"> 16 <ul> 17 <li>部分：一內(nèi)容</li> 18 <li>部分：一內(nèi)容</li> 19 <li>部分：一內(nèi)容</li> 20 </ul> 21 </div> 22 </div> 23 </div> 24 <!-- 部分：二 --> 25 <div class="col-md-6"> 26 <p>部分：二</p> 27 <ul> 28 <li>部分：二內(nèi)容</li> 29 <li>部分：二內(nèi)容</li> 30 <li>部分：二內(nèi)容</li> 31 <li>部分：二內(nèi)容</li> 32 <li>部分：二內(nèi)容</li> 33 <li>部分：二內(nèi)容</li> 34 </ul> 35 </div> 36 <!-- 部分：三 --> 37 <div class="col-md-3"> 38 <ul> 39 <li>部分：三內(nèi)容</li> 40 <li>部分：三內(nèi)容</li> 41 <li>部分：三內(nèi)容</li> 42 <li>部分：三內(nèi)容</li> 43 <li>部分：三內(nèi)容</li> 44 <li>部分：三內(nèi)容</li> 45 </ul> 46 </div> 47 </div> 48 49 </div>
直接偷懶引用：
<link rel="stylesheet" href="http://www.sytianying.com/css/bootstrap.min.css"> <script src="http://www.sytianying.com/js/jquery.min.js"></script> <script src="http://www.sytianying.com/js/bootstrap.min.js"></script>
------
到此，基本結(jié)構(gòu)算是ok了，可以根據(jù)自己的需求修改具體的樣式了。
【 微信掃一掃 】
