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

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

　　　　代码：

  1. <html>
  2. <head>
  3. 	<meta charset="utf-8">
  4. 	<title>布局</title>
  5. 	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  6. 	<script type="text/javascript" src="bootstrap/js/jquery-1.9.1.js"></script>
  7. 	<script type="text/javascript" src = "bootstrap/js/bootstrap.js"></script>
  8. 	<meta name="viewport" content="width-device-width,initial-scale=1">
  9.  
  10. </head>
  11. <body>
  12. 	<div class="container">
  13.  
  14. 	<div class="col-md-1">.col-md-1</div>
  15. 	<div class="col-md-1">.col-md-1</div>
  16. 	<div class="col-md-1">.col-md-1</div>
  17. 	<div class="col-md-1">.col-md-1</div>
  18. 	<div class="col-md-1">.col-md-1</div>
  19. 	<div class="col-md-1">.col-md-1</div>
  20. 	<div class="col-md-1">.col-md-1</div>
  21. 	<div class="col-md-1">.col-md-1</div>
  22. 	<div class="col-md-1">.col-md-1</div>
  23. 	<div class="col-md-1">.col-md-1</div>
  24. 	<div class="col-md-1">.col-md-1</div>
  25. 	<div class="col-md-1">.col-md-1</div>
  26. 	<div class="col-md-1">.col-md-1</div>
  27. 	<div class="col-md-1">.col-md-1</div>
  28.  
  29.     </div>
  30.  
  31.    	<div class="row show-grid">
  32.    		<div class="col-md-8">.col-md-8</div>
  33.    		<div class="col-md-4">.col-md-4</div>
  34.  
  35.    	</div>
  36.  
  37.    	<div class="row show-grid">
  38.    		<div class="col-md-4">.col-md-4</div>
  39.    		<div class="col-md-4">.col-md-4</div>
  40.    		<div class="col-md-4">.col-md-4</div>
  41.  
  42.    	</div>
  43.  
  44.    	<div class="row show-grid">
  45.    		<div class="col-md-6">.col-md-6</div>
  46.    		<div class="col-md-6">.col-md-6</div>
  47.  
  48.    	</div>
  49.  
  50. </body>
  51. </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. 常见的mysql 进程state<转自网络>

    Analyzing 线程是对MyISAM 表的统计信息做分析(例如, ANALYZE TABLE ). checking permissions 线程是检查服务器是否具有所需的权限来执行该语句. Ch ...

  2. CF 217A Ice Skating

    A. Ice Skating time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  3. 使用zsh 替换 bash

    摘自:http://macshuo.com/?p=676#wechat_redirect Shell是Linux/Unix的一个外壳,你理解成衣服也行.它负责外界与Linux内核的交互,接收用户或其他 ...

  4. 无线路由器无线AP模式的配置

    环境介绍>>>>>>>>>>>>>>>>>>>交换机类型:三层交换机无线路由器品牌:T ...

  5. 关于电信宽带wan口地址变成100.64网段的问题解决

    由于之前笔者一直在使用动态域名连接公司vpn.今天在连接vpn的时候总是失败,因动态域名及vpn配置都从未更改过. 于是首先排查动态域名,是否已更新为公司宽带对外的IP.这里笔者先通过nslookup ...

  6. 【CF845F】Guards In The Storehouse 插头DP

    [CF845F]Guards In The Storehouse 题意:一个n*m的房间,每个格子要么是障碍要么是空地.对于每个空地你可以选择放或者不放守卫.一个守卫能保护到的位置是:他右面的一行空地 ...

  7. JIRA - 使用指南(项目跟踪管理工具)

    第一章.前言    JIRA 是澳大利亚 Atlassian 公司开发的一款优秀的问题跟踪管理软件工具,可以对各种类型的问题进行跟踪管理,包括缺陷.任务.需求.改进等.JIRA采用J2EE技术,能够跨 ...

  8. vue之计算属性和侦听器

    一.计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split('').rev ...

  9. 从经典面试题看java中类的加载机制

    1.概述 类加载是Java程序运行的第一步,研究类的加载有助于了解JVM执行过程,并指导开发者采取更有效的措施配合程序执行,对理解java虚拟机的连接模型和java语言的动态性都有很大帮助. 由于Ja ...

  10. LightOJ 1027 - A Dangerous Maze(求期望)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1027 题意:又一个迷宫,有n个门,每个门又一个值num,如果num>0 说明在n ...