栅格系统的原理就是在这个界面中这个栅格被分成12个格子，你根据自己的想要的布局就把这个界面分割成你想要的部分就行了。一般如果我们用电脑作为显示器的我们用的样式是col-md

如果你用的显示期变小的情况下，他是会堆叠显示的。如果不想堆叠显示的话你就col-sm等其他的样式，如果是手机显示屏的话你需要用col-xs.

　　　　代码：

<html>

<head>

	<meta charset="utf-8">

	<title>布局</title>

	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

	<script type="text/javascript" src="bootstrap/js/jquery-1.9.1.js"></script>

	<script type="text/javascript" src = "bootstrap/js/bootstrap.js"></script>

	<meta name="viewport" content="width-device-width,initial-scale=1">

</head>

<body>

	<div class="container">

	<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 class="col-md-1">.col-md-1</div>

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

    </div>

   	<div class="row show-grid">

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

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

   	</div>

   	<div class="row show-grid">

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

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

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

   	</div>

   	<div class="row show-grid">

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

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

   	</div>

</body>

</html>

　　

Bootstrap学习笔记-栅格系统的更多相关文章

  1. BootStrap学习02栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Bootstrap学习笔记之整体架构

    之前有粗略地看过一下Bootstrap的内容,不过那只是走马观花式地看下是怎么用的,以及里面有什么控件,所以就没想着记笔记.现在由于要给部门做分享,所以不得不深入地去学习下,不然仅是简单地说下怎么用, ...

  3. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  4. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  5. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  6. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  7. Symfony2 学习笔记之系统路由

    mfony2 学习笔记之系统路由   漂亮的URL绝对是一个严肃的web应用程序必须做到的,这种方式使index.php?article_id=57这类的丑陋URL被隐藏,由更受欢迎的像 /read/ ...

  8. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  9. Linux学习笔记-Linux系统简介

    Linux学习笔记-Linux系统简介 UNIX与Linux发展史 UNIX是父亲,Linux是儿子. UNIX发行版本 操作系统 公司 硬件平台 AIX IBM PowerPC HP-UX HP P ...

随机推荐

  1. minix中时间转换的实现（asctime.c）

    在minix2.0源代码中,有相当经典的时间转换函数实现(src\ src\ lib\ ansi\ asctime.c),今天我们就来分析一下asctime.c中的源码 首先引入几个相关的头文件: 1 ...

  2. FPGA时序约束的几种方法 （转）

    FPGA时序约束的几种方法 对自己的设计的实现方式越了解,对自己的设计的时序要求越了解,对目标器件的资源分布和结构越了解,对EDA工具执行约束的效果越了解,那么对设计的时序约束目标就会越清晰,相应地, ...

  3. BeanWrapper

    BeanWrapper是对Bean的包装,其接口中所定义的功能很简单包括设置获取被包装的对象,获取被包装bean的属性描述器,由于BeanWrapper接口是PropertyAccessor的子接口, ...

  4. 图论-桥/割点/双连通分量/缩点/LCA

    基本概念: 1.割点:若删掉某点后,原连通图分裂为多个子图,则称该点为割点. 2.割点集合:在一个无向连通图中,如果有一个顶点集合,删除这个顶点集合,以及这个集合中所有顶点相关联的边以后,原图变成多个 ...

  5. 0002python中dict和list的特殊构造

    >>> myinfor = {"name":"qiwsir","site":"qiwsir.github.io& ...

  6. FZU - 2150 Fire Game bfs+双起点枚举

    题意,10*10的地图,有若干块草地“#”,草地可以点燃,并在一秒后点燃相邻的草地.有墙壁‘·‘阻挡.初始可以从任意两点点火.问烧完最短的时间.若烧不完输出-1. 题解:由于100的数据量,直接暴力. ...

  7. YARN Architecture

    The fundamental idea of YARN is to split up the functionalities of resource management and job sched ...

  8. Oracle性能优化之普通用户使用dbms_xplan包需要有的权限

    普通用户使用dbms_xplan包查看执行计划需要对v$sql.v$sql_plan.v$session及v$sql_plan_statistics_all这四个视图同时具有select权限. 如果普 ...

  9. CAP 一致性协议及应用解析

    https://mp.weixin.qq.com/s/26x8O1bRzurl84e3nM6TTA CAP 一致性协议及应用解析 原创: 有赞技术 有赞coder 1周前 文 | 云开 on 用户中心 ...

  10. linux UVC and hardware viewer

    至于从哪个版本开始内核支持UVC,官方的话是“Linux 2.6.26 and newer includes the Linux UVC driver natively.” 1.查看摄像头ID: [r ...