栅格系统的原理就是在这个界面中这个栅格被分成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. 电子邮件 -- 图解TCP_IP_第5版

    图解TCP_IP_第5版 作者: [日]竹下隆史 / [日]村山公保 / [日]荒井透 / [日]苅田幸雄 出版社: 人民邮电出版社原作名: マスタリングTCP/IP 入門編 第5版译者: 乌尼日其其 ...

  2. C# 给主程序签名及第三方dll强签名操作

    1.给主程序添加签名   添加完成后会自动生成一个*.pfx文件.     2.给第三方程序添加强签名方法:   本文以WAPIWrapperCSharp.dll为例,使用vs Tools下的工具命令 ...

  3. 【咸鱼教程】Egret中可长按复制的文本（例如复制优惠码)

    一 实际效果二 实现原理三 源码下载 在egret中实现长按复制文本效果,一般用于复制优惠码什么的. 一 实际效果         二 实现原理 在egret的游戏元素都是绘制在canvas上的,我们 ...

  4. vs 的git插件

    在vs2013上Tfs提供的git管理完全无法理解他的管理方式,还是 Git Source Control Provider 好用用. 下载地址: [http://gitscc.codeplex.co ...

  5. Unity3D笔记 切水果三 切水果

    一.创建一个Apple00,拖拽Prfabs下的Sprite命名为Apple00,添加碰撞器Box Collider,编写代码Knife Rey1.js 二.做被切的苹果 步骤和一是一样的,但是被切的 ...

  6. iOS - UIScreen的 bound、frame、scale属性

    A UIScreen object contains the bounding rectangle of the device’s entire screen. When setting up you ...

  7. Apache服务器301重定向去掉.html和.php

    在做优化网站的时候,会考虑到网站整站的集权: 考虑到网站可以生成静态,首先,让网站优先访问 index.html 之后考虑:去掉 .html 和 .php. 利用 .htaccess <IfMo ...

  8. 树形DP总结，持续更新

    自己做了动态规划的题目已经有了一个月,但是成效甚微,所以来总结一下动态规划,希望自己能够温故知新.这个博客是关于树形dp的,动态规划的一类题目. 首先从最简单的树形DP入手,树形DP顾名思义就是一棵树 ...

  9. Ubuntu 16.04: How to install OpenCV

    参考:https://www.pyimagesearch.com/2016/10/24/ubuntu-16-04-how-to-install-opencv/ 步骤# 1:安装opencv的依赖项 本 ...

  10. Django模板的加深

    网站模板的设计,一般的,都有一些通用的设计,有导航.底部.统计等相关代码:nav.html.bottom.html.tongji.html 在我前面Django工程的基础上建立一个base.html包 ...