網站底部版權信息區(bootstrap)


bootstrap的強大功能毋庸置疑。所以,網站底部版權信息區可以用bootstrap的“柵格系統”完成。

下面是一個未經處理的底部版權信息區的樣式:

 1 <div class="container">
 2     <p>這里是底部信息的標題</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>部分:一內容</li>
11                         <li>部分:一內容</li>
12                         <li>部分:一內容</li>
13                     </ul>
14                 </div>
15                 <div class="col-md-6">
16                     <ul>
17                         <li>部分:一內容</li>
18                         <li>部分:一內容</li>
19                         <li>部分:一內容</li>
20                     </ul>
21                 </div>
22             </div>
23         </div>
24         <!-- 部分:二 -->
25         <div class="col-md-6">
26             <p>部分:二</p>
27             <ul>
28                 <li>部分:二內容</li>
29                 <li>部分:二內容</li>
30                 <li>部分:二內容</li>
31                 <li>部分:二內容</li>
32                 <li>部分:二內容</li>
33                 <li>部分:二內容</li>
34             </ul>
35         </div>
36         <!-- 部分:三 -->
37         <div class="col-md-3">
38             <ul>
39                 <li>部分:三內容</li>
40                 <li>部分:三內容</li>
41                 <li>部分:三內容</li>
42                 <li>部分:三內容</li>
43                 <li>部分:三內容</li>
44                 <li>部分:三內容</li>
45             </ul>
46         </div>
47     </div>
48 
49 </div>

 直接偷懶引用:

<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

------

到此,基本結構算是ok了,可以根據自己的需求修改具體的樣式了。

更多的信息可以參考:http://v3.bootcss.com/css/ 中的“柵格系統” 和網頁:http://www.runoob.com/bootstrap/bootstrap-grid-system.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM