栅格系统的原理就是在这个界面中这个栅格被分成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. javah 错误: 无法访问android.app.Activity问题解决

    cd /Users/musictom/Documents/source/ky/app/build/intermediates/classes/debug javah -jni -classpath / ...

  2. MyBatis学习之SpringMvc和MyBatis整合

    1. 整合流程 Dao层: 1. SqlMapConfig.xml,空文件即可,需要文件头. 2. applicationContext-dao.xml. a) 数据库连接池 b) SqlSessio ...

  3. aws.s3的 upload 和putObject有什么区别

    相同点:上传或新增一个object : <template> <div class="page"> <!-- 参考:https://blog.csdn ...

  4. 去除select边框和三角-----appearance:none

    今天发现一个比较有意思的属性,appearance:none 可能有朋友不认识,但是有一个标签你肯定认识:select. 这个标签的样式是这样的: 一般情况下,我们所使用的border:0; 去除边框 ...

  5. github的README.md文件格式

    一.在线编辑器:stackedit 网址:https://stackedit.io/ README.md是使用Markdown语法.基本规则如下: Markdown 语法速查表 1 标题与文字格式 标 ...

  6. Windows系统的文件浏览器如何触发刷新

    最近开发一个Drive程序,修改注册表添加System Folder Drive后需要通知已打开的每个文件浏览器刷新.最初选择获取对应窗体的句柄并发送WM_KEYDOWN.WM_KEYUP的VK_F5 ...

  7. 2016中国app年度排行榜：十大行业、25个领域、Top 500 和2017趋势预测

    本文为猎豹全球智库联合猎豹移动大数据平台libra.科技顶尖媒体36kr联合发布,如需转载必须在文章开头注明“来源:猎豹全球智库”和作者姓名,且不得更改或增删文中所有信息. 本文作者:猎豹全球智库 容 ...

  8. openstack 部署（Q版)-----keystone认证服务安装配置

    一.新建数据库及用户 CREATE DATABASE keystone; GRANT ALL PRIVILEGES ON keystone.* TO 'keystone'@'localhost' ID ...

  9. POJ-2346 Lucky tickets（线性DP）

    Lucky tickets Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3298 Accepted: 2174 Descrip ...

  10. R数据可视化手册学习简单的绘制常见的图形

    1.绘制散点图 # 使用ggplot2 library(ggplot2) ggplot(data = mtcars, aes(x = wt, y = mpg)) + geom_point() 2.绘制 ...