栅格系统的原理就是在这个界面中这个栅格被分成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. HTTP协议详解（真的很经典）(转载)

    HTTP协议详解(真的很经典):http://www.cnblogs.com/li0803/archive/2008/11/03/1324746.html 引言 HTTP是一个属于应用层的面向对象的协 ...

  2. [NOI2005]月下柠檬树[计算几何（simpson）]

    1502: [NOI2005]月下柠檬树 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1169  Solved: 626[Submit][Status] ...

  3. 安装sqlite3.8的方法

    wget http://www.sqlite.org/2015/sqlite-autoconf-3081101.tar.gz tar -xvzf sqlite-autoconf-3081101.tar ...

  4. [SQL] 命令远程恢复数据库

    sp_configure ; RECONFIGURE; GO sp_configure ; RECONFIGURE; GO EXEC master..xp_cmdshell 'net use \\70 ...

  5. html5播放器制作小结

    链接:http://snowinmay.net/6rooms/html/music.php 9月份前的版本: 播放,暂停,点赞,播放状态显示. 9.2版本: 下载歌曲,静音,时间倒计时(点击暂停时倒计 ...

  6. vue--双向数据绑定

    <template> <div id="app"> <p>{{msg}}</p> <input v-model="m ...

  7. python pandas 豆瓣电影 top250 数据分析

    豆瓣电影top250数据分析 数据来源(豆瓣电影top250) 爬虫代码比较简单 数据较为真实,可以进行初步的数据分析 可以将前面的几篇文章中的介绍的数据预处理的方法进行实践 最后用matplotli ...

  8. 2018牛客网暑期ACM多校训练营（第一场） D - Two Graphs - [无向图同构]

    题目链接:https://www.nowcoder.com/acm/contest/139/D 题目描述 Two undirected simple graphs  and  where  are i ...

  9. SQL Fundamentals || DCL(Data Control Language) || 系统权限&对象权限管理（GRANT&REVOKE）

    SQL Fundamentals || Oracle SQL语言 语句 解释 Create user Creates a user(usually performed by a DBA) Grant ...

  10. echarts 数据统计报表

    官网   http://echarts.baidu.com/index.html 我们下载好开发包后就可以开始了,第一步引入开发包,和需要的主题文件(可定义自己的主体文件),并定义好页面布局.2.0以 ...