浅析BootStrap栅格系统


Posted in Javascript onJune 07, 2016

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栅格系统

以上所述是小编给大家介绍的BootStrap栅格系统的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
node.js基础知识小结
Feb 26 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 #Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 #Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 #Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 #Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 #Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 #Javascript
Javascript之Number对象介绍
Jun 07 #Javascript
You might like
php之Smarty模板使用方法示例详解
2014/07/08 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
Python中分数的相关使用教程
2015/03/30 Python
python实现清屏的方法
2015/04/30 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
详解python itertools功能
2020/02/07 Python
python中remove函数的踩坑记录
2021/01/04 Python
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
职高毕业生自我鉴定
2013/10/21 职场文书
法制教育演讲稿
2014/09/10 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
公务员个人考察材料
2014/12/23 职场文书
匿名检举信范文
2015/03/02 职场文书
2015年班组工作总结
2015/04/20 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
法律服务所工作总结
2015/08/10 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python