浅析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 相关文章推荐
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 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
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
php查询内存信息操作示例
2019/05/09 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
出纳的岗位职责
2013/11/09 职场文书
后勤部长岗位职责
2013/12/14 职场文书
环境科学专业求职信
2014/08/04 职场文书
秋冬农业生产标语
2014/10/09 职场文书
立春观后感
2015/06/18 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python