网站底部版权信息区,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