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 相关文章推荐
jQuery的学习步骤
Feb 23 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
js 操作符汇总
Nov 08 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
JS实现京东商品分类侧边栏
2020/12/11 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python学生管理系统代码实现
2020/04/05 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
大学军训感言200字
2014/02/26 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
初中信息技术教学计划
2015/01/22 职场文书
红与黑读书笔记
2015/06/29 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
2019各种保证书范文
2019/06/24 职场文书
python实现过滤敏感词
2021/05/08 Python
MySQL8.0.18配置多主一从
2021/06/21 MySQL
常用的Python代码调试工具总结
2021/06/23 Python
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server