栅格系统与布局

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.（摘自bootStrap官方文档）。

The BootStrap is so Great ！now we will Learn the flexbox grid by using eclipse.

For example if we use 12 grid:

 <%@ page language="java" contentType="text/html; charset=utf-8"

     pageEncoding="utf-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html lang="zh-ch">

 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.min.css"/>

 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.theme.min.css"/>

 <script src="${pageContext.request.contextPath }/bootstrap3/js/jquery-1.11.2.min.js"></script>

 <script src="${pageContext.request.contextPath }/bootstrap3/js/bootstrap.min.js"></script>

 <title>Grid12</title>

 <style type="text/css">

     .c{ border: 1px solid gray //显示边框 宽度 1px  实体 灰色

         }

 </style>

 </head>

 <body>

 <div class="container">

     <div class="row">//十二列

       <div class="col-md-1 c ">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c ">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c" >.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

     </div>

 </div>

 </body>

 </html>

others:

 <%@ page language="java" contentType="text/html; charset=utf-8"

     pageEncoding="utf-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html lang="zh-ch">

 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.min.css"/>

 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.theme.min.css"/>

 <script src="${pageContext.request.contextPath }/bootstrap3/js/jquery-1.11.2.min.js"></script>

 <script src="${pageContext.request.contextPath }/bootstrap3/js/bootstrap.min.js"></script>

 <title>Grid栅格12个格子</title>

 <style type="text/css">

     .c{

             border: 1px solid gray

         }

 </style>

 </head>

 <body>

 <div class="container">

     <div class="row">

       <div class="col-md-1 c ">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c ">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c" >.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

     </div>

         <div class="row">

           <div class="col-md-8 c">.col-md-8</div>

           <div class="col-md-4 c">.col-md-4</div>

         </div>

         <div class="row">

           <div class="col-md-4 c">.col-md-4</div>

           <div class="col-md-4 c">.col-md-4</div>

           <div class="col-md-4 c">.col-md-4</div>

         </div>

         <div class="row">

           <div class="col-md-6 c">.col-md-6</div>

           <div class="col-md-6 c">.col-md-6</div>

         </div>

 </div>

 </body>

 </html>

The photo of result:

How it works ?

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

Second

 <%@ page language="java" contentType="text/html; charset=utf-8"

     pageEncoding="utf-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html lang="zh-ch">

 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.min.css"/>

 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.theme.min.css"/>

 <script src="${pageContext.request.contextPath }/bootstrap3/js/jquery-1.11.2.min.js"></script>

 <script src="${pageContext.request.contextPath }/bootstrap3/js/bootstrap.min.js"></script>

 <title>Grid栅格12个格子</title>

 <style type="text/css">

     .c{

             border: 1px solid gray

         }

 </style>

 </head>

 <body>

 <p class="bg-primary">使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。</p>

 <div class="container">

         <div class="row c">

           <div class="col-md-4 c">.col-md-4</div>

           <div class="col-md-4 col-md-offset-4 c">.col-md-4 .col-md-offset-4</div>

         </div>

         <div class="row">

           <div class="col-md-3 col-md-offset-3 c">.col-md-3 .col-md-offset-3</div>

           <div class="col-md-3 col-md-offset-3 c">.col-md-3 .col-md-offset-3</div>

         </div>

         <div class="row">

           <div class="col-md-6 col-md-offset-3 c">.col-md-6 .col-md-offset-3</div>

         </div>

 </div>

 </body>

 </html>

Third：

 <%@ page language="java" contentType="text/html; charset=utf-8"

     pageEncoding="utf-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html lang="zh-ch">

 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.min.css"/>

 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.theme.min.css"/>

 <script src="${pageContext.request.contextPath }/bootstrap3/js/jquery-1.11.2.min.js"></script>

 <script src="${pageContext.request.contextPath }/bootstrap3/js/bootstrap.min.js"></script>

 <title>列偏移</title>

 <style type="text/css">

     .c{

             border: 1px solid gray

         }

 </style>

 </head>

 <body>

     <p class="bg-primary"></p>

 <div class="container">

         <div class="row c">

           <div class="col-md-8 ">

               <div class="col-md-6 ">第二层6列</div>

               <div class="col-md-6 c">第二层6列</div>

           </div>

           <div class="col-md-4 ">

                   第一层4列

           </div>

         </div>

 </div>

 </body>

 </html>

fluid Layout！

 <%@ page language="java" contentType="text/html; charset=utf-8"

     pageEncoding="utf-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html lang="zh-ch">

 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.min.css"/>

 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.theme.min.css"/>

 <script src="${pageContext.request.contextPath }/bootstrap3/js/jquery-1.11.2.min.js"></script>

 <script src="${pageContext.request.contextPath }/bootstrap3/js/bootstrap.min.js"></script>

 <title>container</title>

 <style type="text/css">

     .c{

             border: 1px solid yellow

         }

 </style>

 </head>

 <body>

 <div class="container">

     <div class="row">

       <div class="col-md-1 c ">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c ">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c" >.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       </div>

 </div>

 <br/>

 <div class="container-fluid ">

 <div class="row">

       <div class="col-md-1 c ">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c ">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c" >.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       <div class="col-md-1 c">.col-md-1</div>

       </div>

 </div>

 </body>

 </html>

Use .container-fluid for a full width container, spanning the entire width of the viewport.

BootStrap3栅格系统与布局的更多相关文章

  1. 深入理解BootStrap之栅格系统（布局）

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

  2. [bootstrap] 栅格系统和布局

    1.简介 栅格系统(grid systems),也称为“网格系统”,运用固定的格子设计版面布局,风格工整简洁.是从平面栅格系统演变而来. Bootstrap建立在12列栅格系统.布局.组件之上.以规则 ...

  3. Bootstrap栅格系统（布局）

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  4. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  5. Bootstrap3 栅格系统-简介

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...

  6. Bootstrap3 栅格系统-嵌套列

    为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含的列(column)的个 ...

  7. Bootstrap3 栅格系统-实例：从堆叠到水平排列

    使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列.所有"列( ...

  8. Bootstrap3 栅格系统-栅格参数

    通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的. -–下面有个"顶"字,你懂得O(∩_∩)O哈哈~ -–乐于分享,共同进步! -–更多文章请看:h ...

  9. Bootstrap3 栅格系统-媒体查询

    在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值. /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 B ...

随机推荐

  1. Java语法基础-异常处理

    异常处理类层次结构图 检查异常与非检查异常 非检查异常(unckecked exception):Error 和 RuntimeException 以及他们的子类.javac在编译时,不会提示和发现这 ...

  2. RDO、SAD、SATD、λ相关概念【转】

    率失真优化概述: 率失真优化(Rate D isto r t i on Op t i m ized)策略是在率失真理论[3 ]的基础上提出的一种代价函数方案, RDO 的主要思想是, 在计算代价函数时 ...

  3. CentOS 7 安装Oracle VirtualBox

    1. 下载VirtualBox的repo文件: 登陆 https://www.virtualbox.org/wiki/Linux_Downloads 在网页的最下端的repo链接上右键下载,或者wge ...

  4. 解剖嵌入式设备开发时以SD卡启动时SD卡的存储结构（以三星exynos4412为例）

    目前面对高性能产品的嵌入式开发中,用SD卡来代替以往的JLINK显得备受大家喜欢,而且MCU厂家也对以SD卡启动的支持度越来越大,反而对JLINK不在那么重视(不过依旧保留着).一些以开发开发板的公司 ...

  5. ALTER TABLE - 修改表的定义

    SYNOPSIS ALTER TABLE [ ONLY ] name [ * ] ADD [ COLUMN ] column type [ column_constraint [ ... ] ] AL ...

  6. 用npm来部署快速一个httpweb服务器

    https://blog.csdn.net/u012182627/article/details/55060594 http-server的安装######注意事项 安装http-server的时候 ...

  7. Java 类执行顺序

    1.如果父类有静态成员赋值或者静态初始化块,执行静态成员赋值和静态初始化块2.如果类有静态成员赋值或者静态初始化块,执行静态成员赋值和静态初始化块3.将类的成员赋予初值(原始类型的成员的值为规定值,例 ...

  8. cuda输出

    cuda的输出就是printf 可以在屏幕上显示出来,但你修改之后一定要make编译,不然只是修改了源代码,但生成的可执行文件还是之前编译的

  9. vue工程化

    很多人在玩完了官方文档的小例子之后,又不知道如何下手了.所以我这边帮大家把断层补上.大家首先要把vue的基本语法都熟悉了,然后再来这边学习. 有了前面webpack的铺垫,我们直接从vue的工程化开始 ...

  10. 解决java web项目导入后出现的问题 ---cannot be read or is not a valid ZIP file

    导入以前的web项目后会出现以下三个错误: 1. Archive for required library: ‘WebContent/WEB-INF/lib/readme.txt’ in projec ...