基于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 广告后加载,加载完页面再加载广告
Nov 25 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
BootStrap selectpicker
Jun 20 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
js图片上传的封装代码
Aug 01 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 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中的字符串函数
2006/10/09 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
基于python 字符编码的理解
2017/09/02 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python基于百度云文字识别API
2018/12/13 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
文秘专业个人求职信
2013/12/22 职场文书
竞选班长演讲稿
2013/12/30 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
大学生实习思想汇报
2014/01/12 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
员工工作自我评价
2014/09/26 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
nginx部署多前端项目的几种方法
2021/05/25 Servers
浅谈Python数学建模之线性规划
2021/06/23 Python