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


Posted in Javascript onDecember 23, 2016

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栅格栏系统完成网站底部版权信息区,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于Javascript 的 prototype问题。
Jan 03 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 #Javascript
Bootstrap和Java分页实例第一篇
Dec 23 #Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 #Javascript
Bootstrap select多选下拉框实现代码
Dec 23 #Javascript
Bootstrap select实现下拉框多选效果
Dec 23 #Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 #Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 #Javascript
You might like
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
php通过各种函数判断0和空
2020/07/04 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
js资料toString 方法
2007/03/13 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
浅探express路由和中间件的实现
2019/09/30 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
python字典序问题实例
2014/09/26 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
文职个人求职信范文
2013/09/23 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
学校三节实施方案
2014/06/09 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
Python面向对象编程之类的概念
2021/11/01 Python