浅析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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
5个实用的JavaScript新特性
Jun 16 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高手?学会“懒惰”的编程
2006/12/05 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
JavaScript函数详解
2014/11/17 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
手写一个python迭代器过程详解
2019/08/27 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
银行会计财务工作个人的自我评价
2013/10/29 职场文书
护士节策划方案
2014/05/19 职场文书
春节慰问信范文
2015/02/15 职场文书
学生会任命书范本
2015/09/21 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android