Bootstrap栅格系统学习笔记


Posted in Javascript onNovember 25, 2016

Bootstrap栅格系统知多少?

1、简介
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。

2、栅格选项
bootstrap3.x使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项,我们姑且以前缀命名这四种栅格选项,他们分别是col-xs、col-sm、col-md、col-lg,我们懂英文的就知道,lg是large的缩写,md是mid的缩写,sm是small的缩写,xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。

通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。

Bootstrap栅格系统学习笔记

3、列偏移
使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如,.col-md-offset-4将.col-md-4向右移动了4个列的宽度。

4、嵌套列
为了使用内置的栅格将内容嵌套,通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。

5、列排序
通过使用.col-md-push-* .col-md-pull-*就可以很容易的改变列的顺序。

案例

<%@ page language="java" pageEncoding="UTF-8"%>
<%
 String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-cn">
 <head>
  <title>栅格</title>
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Language" content="zh-cn" />
  <meta name="author" content="linjiqin218@126.com" />
  <meta name="Copyright" content="parami|厦门波罗密网络科技有限公司" />

  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <jsp:include page="/demo/base/js_bootstrap.jsp" />
  <style type="text/css">
  .show-grid [class ^="col-"] {
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: #eee;
   border: 1px solid #ddd;
   background-color: rgba(86, 61, 124, .15);
   border: 1px solid rgba(86, 61, 124, .2);
  }
  </style>
  <script type="text/javascript">
  $(function(){
  });
  </script>
 </head>
 <body>
  <b>col-lg-*用法</b> 
  <br/> 
  <div class="row show-grid">
   <div class="col-lg-8">.col-lg-8</div>
   <div class="col-lg-4">.col-lg-4</div>
  </div>
  <br/>   
  <b>col-md-*用法</b>
  <div class="row show-grid">
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
  </div>
  <br/> 
  <div class="row show-grid">
   <div class="col-md-8">.col-md-8</div>
   <div class="col-md-4">.col-md-4</div>
  </div>
  <br/> 
  <b>col-sm-*用法</b>
  <div class="row show-grid">
   <div class="col-sm-8">.col-sm-8</div>
   <div class="col-sm-4">.col-sm-4</div>
  </div>
  <br/>    
  <b>col-xs-*用法</b>
  <div class="row show-grid">
   <div class="col-xs-8">.col-xs-8</div>
   <div class="col-xs-4">.col-xs-4</div>
  </div> 
  <br/>  
  <b>列偏移: col-md-offset-*</b>
  <div class="row show-grid">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  </div>
  <div class="row show-grid">
   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  </div>
  <div class="row show-grid">
   <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  </div>
  <br/>  
  <b>嵌套列: 嵌套row所包含的列加起来应该等于12</b>
  <div class="row show-grid">
   <div class="col-md-9">
    Level 1: .col-md-9
    <div class="row show-grid">
     <div class="col-md-6">Level 2: .col-md-6</div>
     <div class="col-md-6">Level 2: .col-md-6</div>
    </div>
   </div>
  </div>
  <br/>  
  <b>列排序: .col-md-push-*和.col-md-pull-*</b> 
  <div class="row show-grid">
   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  </div>  
 </body>
</html>

演示效果:

Bootstrap栅格系统学习笔记

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据出生日期自动取得星座的js代码
Jul 20 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
Node.js插件安装图文教程
May 06 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 #Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 #Javascript
javaScript语法总结
Nov 25 #Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 #Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 #Javascript
javascript简单进制转换实现方法
Nov 24 #Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 #Javascript
You might like
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
Jquery实现动态切换图片的方法
2015/05/18 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python抽象类的新写法
2015/06/18 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
一文读懂Python 枚举
2020/08/25 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
教师演讲稿范文
2014/01/08 职场文书
一分钟演讲稿
2014/04/30 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
民政局个人整改措施
2014/09/24 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书