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 相关文章推荐
select标记美化--JS式插件、后期加载
Apr 01 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
js实现自定义路由
Feb 04 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
js html实现计算器功能
Nov 13 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
python分割列表(list)的方法示例
2017/05/07 Python
浅谈Python基础之I/O模型
2017/05/11 Python
对python 调用类属性的方法详解
2019/07/02 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
助人为乐模范事迹材料
2014/06/02 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
单位单身证明样本
2014/10/11 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js