基于BootStrap栅格栏系统完成网站底部版权信息区

 更新时间:2016年12月23日 13:40:16   作者:屏幕后的无奈  
网站底部版权信息区可以用bootstrap的“栅格系统”完成,下面给大家分享一个未经处理的底部版权信息区的样式,大家可以做个参考

bootstrap的强大功能毋庸置疑。所以,网站底部版权信息区可以用bootstrap的“栅格系统”完成。

下面是一个未经处理的底部版权信息区的样式:

<div class="container">
  <p>这里是底部信息的标题</p>
  <div class="row">
    <!-- 部分:一 -->
    <div class="col-md-3">
      <p>部分:一</p>
      <div class="row">
        <div class="col-md-6">
          <ul>
            <li>部分:一内容</li>
            <li>部分:一内容</li>
            <li>部分:一内容</li>
          </ul>
        </div>
        <div class="col-md-6">
          <ul>
            <li>部分:一内容</li>
            <li>部分:一内容</li>
            <li>部分:一内容</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 部分:二 -->
    <div class="col-md-6">
      <p>部分:二</p>
      <ul>
        <li>部分:二内容</li>
        <li>部分:二内容</li>
        <li>部分:二内容</li>
        <li>部分:二内容</li>
        <li>部分:二内容</li>
        <li>部分:二内容</li>
      </ul>
    </div>
    <!-- 部分:三 -->
    <div class="col-md-3">
      <ul>
        <li>部分:三内容</li>
        <li>部分:三内容</li>
        <li>部分:三内容</li>
        <li>部分:三内容</li>
        <li>部分:三内容</li>
        <li>部分:三内容</li>
      </ul>
    </div>
  </div>
</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了,可以根据自己的需求修改具体的样式了。

以上所述是小编给大家介绍的基于BootStrap栅格栏系统完成网站底部版权信息区,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • uniapp开发小程序的开发规范总结

    uniapp开发小程序的开发规范总结

    uni-app 是一个使用 vue.js 开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于uniapp开发小程序的开发规范,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • layui实现二维码弹窗、并下载到本地的方法

    layui实现二维码弹窗、并下载到本地的方法

    今天小编就为大家分享一篇layui实现二维码弹窗、并下载到本地的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS表单数据验证的正则表达式(常用)

    JS表单数据验证的正则表达式(常用)

    这篇文章主要介绍了JS表单数据验证的正则表达式,这种方法比较常用,以及使用正则表达式验证表单的方法,本文给大家介绍非常详细,需要的的朋友参考下
    2017-02-02
  • JavaScript防抖与节流详解

    JavaScript防抖与节流详解

    这篇文章主要介绍了JS中的防抖与节流及作用详解,本文通过文字说明加示例代码的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • 详解ES6 Fetch API HTTP请求实用指南

    详解ES6 Fetch API HTTP请求实用指南

    本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解。具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • javascript实现简单下拉菜单效果

    javascript实现简单下拉菜单效果

    这篇文章主要为大家详细介绍了javascript实现简单下拉菜单效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一
    2022-08-08
  • 原生JavaScrpit中异步请求Ajax实现方法

    原生JavaScrpit中异步请求Ajax实现方法

    这篇文章主要介绍了原生JavaScrpit中异步请求Ajax实现方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-11-11
  • 原生js配合cookie制作保存路径的拖拽

    原生js配合cookie制作保存路径的拖拽

    这篇文章主要介绍了原生js配合cookie制作保存路径的拖拽效果,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JS实现微信摇一摇原理解析

    JS实现微信摇一摇原理解析

    这篇文章主要为大家详细介绍了JS微信摇一摇的实现原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 微信小程序页面与组件之间信息传递与函数调用

    微信小程序页面与组件之间信息传递与函数调用

    不管是vue还是react中,都在强调组件思想,所以下面这篇文章主要给大家介绍了关于微信小程序页面与组件之间信息传递与函数调用的相关资料,需要的朋友可以参考下
    2021-05-05

最新评论