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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python中元组,列表,字典的区别
2017/05/21 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
购买一个高级域名:BuyDomains
2018/03/11 全球购物
财务会计应届生求职信
2013/11/24 职场文书
餐饮业的创业计划书范文
2013/12/26 职场文书
工程班组长岗位职责
2013/12/30 职场文书
家长给小学生的评语
2014/01/30 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
简单的辞职信模板
2015/05/12 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
Redis过期数据是否会被立马删除
2022/07/23 Redis