Bootstrap布局之栅格系统学习笔记

zh000 2017-05-04

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="[email protected]" />
  <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布局之栅格系统学习笔记

zh000

zh000

相关推荐

如何创建栅格系统？

首先，设计你的删格.你是要使用等宽的还是不等宽的网格列？间隔和列的大小是多少？当你回答了上面的问题你只能做出正确的网格计算。为了解决大家的困扰，我写了一篇。如果你正想学习设计一个删格系统可以读一下。在明确的分界点上你要改变删格列的数量么？最后，你愿意在HT

zhanghao / 0评论 2019-12-21

css3 Grid栅格系统

display: grid;display: grid;grid-template-rows: 50% 50%;grid-template-columns: 20% 20% 20% 20% 20%;display: grid;grid-template-r

zengni / 0评论 2019-11-06

css栅格系统在项目中的灵活运用

前言css栅格通常捆绑在各种框架中，但有时你需要自己去定制一个css栅格来满足实际的业务需要，本文聊聊css栅格系统在项目中的灵活运用。需求UI设计了如下布局，其中左上角橙色部分是固定的，蓝色部分是动态渲染的，从前往后依次展示，有一个就显示一块，有二个就显

afeichuanqi / 0评论 2019-06-28

bootstrap源码分析系列：二，栅格和响应式布局

bootstrap把response单独分开作为一个独立模块这样整个栅格系统实际上分为了栅格grid和响应式布局response。非响应式的栅格是940固定宽度的，并且分为固定和流式两种，响应式布局就是通过media query增加了对不同屏幕宽度的适应。

乔乔 / 0评论 2015-06-13

栅格系统

Boostrap排版、链接样式设置了基本的全局样式。这些样式在scaffoliding.less文件中可以找到对应的源码。Bootstrap提供了两个作此用处的类。由于padding等属性的原因，这两种容器类不能相互嵌套。.container类用于固定宽度

pangbianlaogu / 0评论 2014-09-27

100行less实现bootstrap的12栅格布局

使用过bootstrap的都知道，bootstrap的强大的12栅格系统；在响应式布局中这12栅格布局是非常有用的。有时候做个简单的页面并不想把所有整个bootstrap引入到页面中，于是便在空余时间写了这个栅格布局，参照了bootstrap的做法，类名，

nicepainkiller / 0评论 2019-06-21

有关css栅格系统的故事

像这样，通过固定的格子结构，来进行布局设计。这是一种设计风格，而且一直以来很广泛地应用于网页设计领域。这样的风格清晰、工整，可以让网页具有更友好的浏览体验。而随着响应式设计的流行，栅格系统开始被赋予新的意义，那就是，一种响应式设计的实现方式。栅格与响应式响

nicepainkiller / 0评论 2019-06-20

网页的栅格系统设计

看看吧 对设计有用哦 不对！！是对要求高的设计师有用栅格系统的形成。他们的首要任务是设计出科学的、合理的，重视功能性的新字体。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。我们拿yahoo作例，来看一下栅

菜鸟进化史 / 0评论 2011-03-11

Bootstrap整体框架之CSS12栅格系统

表现形式 CSS组件 JS插件 基础支撑平台 CSS12栅格系统 基础布局组件 jQuery 响应式设计。12栅格系统是BootStrap的核心功能，也是响应式设计核心理念的一个实现方式。栅格布局原理：定义容器大小，平分12分，在调整内外边距，最后结合媒体

zuncle / 0评论 2016-12-15

Bootstrap布局之栅格系统详解

前些天学习了bootstrap,把其中的栅格系统整理出来，如有错误，欢迎指正。概要，栅格系统针对pc,pad,移动端开发出响应式web页面，根据不同屏幕分辨率有针对不同的解决方法。(0.1, 屏幕设备尺寸大于1200px 选择col-lg(0.2. 屏幕设

乔乔 / 0评论 2016-06-13

Bootstrap每天必学之栅格系统（布局）

它就是通过一系列的行与列的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：。Bootstrap框架中的网格系统就是将容器平分成12份。

soulis / 0评论 2015-11-25

基础知识！UI设计师需要掌握的栅格设计原理和技巧

栅格系统可以辅助我们制定网页设计的规则，了解栅格的基本原理和前端应用对于网页设计来说就变得非常重要了。

木叶 / 0评论 2018-11-23

移动新设计：卡片式设计与响应式设计的结合

最近看到一个响应式设计的教程，里面讲到将页面元素一切弹性化，不仅有些感慨。以前我也是一切弹性化的坚定拥趸，还钻研了一下可缩放矢量图形svg，想用之来替代页面的一切UI元素，也非常认同Android与分辨率无关的dp思想。但是现在，我不得不承认，固定分辨率，

panduola0 / 0评论 2013-09-22

使用mediaquery自制栅格系统初探

/*box-sizing:border-box 可以实现width = content width + padidng 的效果，比默认的盒模型更加好用和直观*/

清醒疯子 / 0评论 2018-04-08

栅格化系统在设计中的运用

刚开始对栅格系统有很多疑惑，什么是栅格化系统？后来发现有很多小伙伴也都有这样的疑问，最近又看到大神Sky密圈的经验分享，于是决定自己也整理一下栅格系统的理解和学习总结。对于栅格系统栅格就是网格，我们很小就会接触到网格，比如小时候的方格本作文本，画的表格等等

稀土 / 0评论 2017-10-15

Bootstrap 我的学习记录2 栅格系统初始

以下理论内容copy自bootstrap中文网。栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。简介栅格

前端开发探路者 / 0评论 2016-12-13