zoukankan      html  css  js  c++  java
  • 网站底部版权信息区(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

  • 相关阅读:
    tornado简单的验证码
    python分页和session和计算时间差
    初始tornado框架
    Jquery小实例
    DOM+Javascript一些实例
    Javascript
    CSS拾遗+技巧集合
    css样式基础
    KVM NAT网络模式配置
    Ultimate guide to learning AngularJS in one day
  • 原文地址:https://www.cnblogs.com/gwcyulong/p/6214010.html
Copyright © 2011-2022 走看看