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

  • 相关阅读:
    pythonic奇淫技巧收集
    广联达软件关闭非必要后台进程、服务
    寒假集训Day6 H(二分答案)
    GJSxCXzcjw
    生活新的篇章~
    Apex: SOQL语句未查询到数据时的返回值
    VS Code关联Salesforce失效
    一个sql和C#代码结合的分组求和的查询
    2022开发上的一些常见技术问题整理
    2021迷惘惆怅的一年
  • 原文地址:https://www.cnblogs.com/gwcyulong/p/6214010.html
Copyright © 2020-2023  润新知