栅格系统与布局

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. MyEclipse开启Jquery智能提示

    myeclipse 增加javascript提示和jquery提示等不用安装插件自带功能 (对着需要提示的项目右键,点击properties) 不行的话就得安装插件: http://www.spket ...

  2. Dragger2解析（一）

    依赖注入(DI-Dependency Injection) 什么是依赖注入 这是一种设计思想,一个面向对象的编程法则. DI能够让开发者写出低耦合代码,更加优良的程序. 更容易测试,代码健壮性更强. ...

  3. Linux修改ssh端口，减少暴力破解

    版本centos7   注意:操作时请勿断开当前的ssh连接,以免发生情况登陆不了.   1.修改的是 /etc/ssh/sshd_config 文件 打开文件之后会发现Port是注释掉的,默认为22 ...

  4. sql语句中截取字符串

    今天在开发过程中因为要用到合并单元格,在程序里实现了以后,查出来的数据太长,都把格式撑大了,后来想想可以在sql语句查询的时候就截取,就去网上找了一下,挺好用,就转了过来: 合并单元格: /// &l ...

  5. flex布局（主要分清楚容器和条目）

    设置在容器上面的属性:flex-direction.flex-wrap.flex-flow.justify-content.align-items.align-content1.flex-direct ...

  6. 虚拟机centOs Linux与Windows之间的文件传输

    一.配置环境 虚拟机Linux:Fedora 9 文件传输工具:SSHSecureShellClient-3.2.9 二.实现步骤 1. 在Windows中安装文件传输工具SSHSecureShell ...

  7. 迅为7寸Android嵌入式安卓触摸屏，工业一体机方案

    嵌入式安卓触摸屏板卡介绍-工业级核心板: 嵌入式安卓触摸屏功能接口介绍: 品质保障: 核心板连接器:进口连接器,牢固耐用,国产连接器无法比拟(为保证用户自行设计的产品品质,购买核心板用户可免费赠送底板 ...

  8. Flex 布局 （两个div居中自适应 宽度变小变一列，宽度够就是两列）

    https://www.runoob.com/w3cnote/flex-grammar.html display: flex; justify-content: center; align-items ...

  9. web.xml的简单解释以及Hello1中web.xml的简单分析

    一.web.xml的加载过程 ①当我们启动一个WEB项目容器时,容器包括(JBoss,Tomcat等).首先会去读取web.xml配置文件里的配置,当这一步骤没有出错并且完成之后,项目才能正常的被启动 ...

  10. 第2节 mapreduce深入学习：12、reducetask运行机制（多看几遍）

    ReduceTask的运行的整个过程 背下来1.启动线程到mapTask那里去拷贝数据,拉取属于每一个reducetask自己内部的数据2.数据的合并,拉取过来的数据进行合并,合并的过程,有可能在内存 ...