<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>BootStrap</title>

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

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

     <script type="text/javascript" src="../../resources/jQuery/jquery-1.12.4.min.js"></script>

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

     <!--解决手机上的显示问题-->

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

     <!--解决IE低版本问题-->

     <!--[if lt IE9]>

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

     <![endif]-->

 </head>

 <body>

 <div class="container">

     <h1 class="page-header">布局

         <small>使用BootStrap网格布局</small>

     </h1>

     <p>段落文字</p>

     <div class="row">

         <div class="span4">

             <h2 class="page-header">区块1</h2>

             <p>段落文字</p>

         </div>

         <div class="span4">

             <h2 class="page-header">区块2</h2>

             <p>段落文字</p>

         </div>

         <div class="span4">

             <h2 class="page-header">区块3</h2>

             <p>段落文字</p>

         </div>

     </div>

 </div>

 </body>

 </html>

说明：

container作为网格布局的容器，设置后，内部的所有内容，都会左右两边空出一定距离后居中显示
row内部的所有元素，都横向排列
span4 表示内部元素占用4格，同理：span1就是一格

对于BootStrap而言，其将显示屏幕横向分成了12格（这也就是为什么叫它网格布局的原因了）
显示效果如下：

BootStrap3和BootStrap2是不兼容的，类名发生了变化
如上面的span4，是BootStrap2中的类名，在BootStrap3中，其类名为 col-sm-4

　　

使用BootStrap网格布局进行一次演示的更多相关文章

  1. BootStrap网格布局

    如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...

  2. bootstrap 网格布局

    一:基本的网格布局 <div class="container"> <div class="row"> <div class=&q ...

  3. CSS进阶之模拟Bootstrap网格布局

    目前暂时实现效果,容后面整理心得,先贴上源代码. 源码 <!DOCTYPE html> <html> <head> <title>demo bootst ...

  4. 第三篇bootstrap 网格基础

    Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 网格系统类似一个表格,有行和列,它必须放置在一个类型设置为c ...

  5. Bootstrap系列 -- 10. 网格布局

    一. 实现原理 网格布局是通过容器的大小,平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别. 实现步骤如下: (1) 数据行.row 必须包含在容器.container 中 ...

  6. bootstrap学习总结-02 网格布局

    1  网格布局 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. <!DOCTYPE html> ...

  7. 转:Bootstrap研究 精巧的网格布局系统

    本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System).本文讨论第一种 ...

  8. 不用bootstrap，只用CSS创建网格布局

    本文译自[http://j4n.co/blog/Creating-your-own-css-grid-system],英语好的,可直接查看原网页,不需要FQ. 翻译拿不准的地方会有英文原文,方便大家理 ...

  9. 【精心挑选】15款最好的 jQuery 网格布局插件（Grid Plugins）

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

随机推荐

  1. UVA1363 - Joseph's Problem（数学，迷之优化）

    题意:给出n和k,1≤n,k≤1e9,计算 切入点是k/i 和 k/(i+1)差距不大.令pi = k/i, ri = k%i.如果pi+1 == pi,那么ri+1 == k - pi(i+1) = ...

  2. SSM框架快速搭建

    1.   新建Maven项目 ssm 2.    pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xml ...

  3. springboot集成shiro的session污染问题

    问题起因是这样的,有两套系统,系统a和系统b.两套系统均使用shiro做的权限管理,之前部署在两台机器上.使用浏览器打开a系统后另开页签打开b系统,互不干扰都能正常使用,后因业务迁移,两套系统部署到了 ...

  4. Andrew NG 自动化所演讲(20140707)：DeepLearning Overview and Trends

    出处 以下内容转载于 网友 Fiona Duan,感谢作者分享 (原作的图片显示有问题,所以我从别处找了一些附上,小伙伴们可以看看).最近越来越觉得人工智能,深度学习是一个很好的发展方向,应该也是未来 ...

  5. 谷歌SwitchySharp && SwitchyOmega插件

    http://pan.baidu.com/s/1jOwgu 谷歌SwitchySharp插件 http://pan.baidu.com/s/1mgl7e2k SwitchySharp的升级版Switc ...

  6. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  7. Hotkeys.js 2.0.2 发布，JS 网页快捷键设置，捕获键盘输入和输入的组合键快捷键，它没有依赖

    这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k. 更新内容: 添加测试用例: 添加更多特殊键支持: 修复bug. __ ...

  8. Vmware 不能上网

    Vmware 安装 WIN7 不能上网,如何解决? 情况一: 虚拟机右下角出现红色叉号,检查物理的服务是否开启“VMware NAT Service” 1 .开启方法:WIN + R -> 输入 ...

  9. css分层,实现遮罩底层弹出新窗口里可以操作，最下层能看到单不能操作

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

  10. Linux 下PHP获取服务器状态CPU、MEM使用率、磁盘使用率、IP地址获取、MAC地址获取等信息记录

    获取服务器状态记录使用的是SHELL命令方式进行获取输出结果  然后进行字符串拆分处理等方式进行获取到自己有用信息 贴出获取方式以及常用处理方式 <?PHP $fp = popen('执行SHE ...