<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap 网格布局</title>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.css" />
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</p>
<div class="row" >
<div class="col-xs-12" style="border: 1px solid;">
安全生产
</div>
</div>
<div class="row" >
<div class="col-xs-6" style="border: 1px solid;">
部门树
</div>
<div class="col-xs-6" style="border: 1px solid;">
主页
</div>
</div>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam,
</p>
</div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
</p>
<div class="row" >
<div class="
col-xs-6" style="border: 1px solid;">
左边
</div>
<div class="col-xs-6" style="border: 1px solid;">
右边
</div>
</div>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
jQuery Bootstrap网格布局和列表布局切换代码
jquery.gridstrap.js是一款基于Bootstrap的可拖拽式网格系统插件。该插件可以快速生成基于bootstrap响应式网格的、可以自由拖拽的网格布局。
在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。这篇文章主要介绍了Bootstrap 网格系统布局,需要的朋友可以参考下
jQuery可伸展的Bootstrap图片网格布局代码
这是一款基于Bootstrap的网格布局和列表布局切换特效。该特效通过jQuery来为元素切换不同的class类，来将布局显示为网格布局或列表布局。
Bootstrap商品图片网格布局代码是一款基于bootstrap响应式框架制作商城商品图片网格列表布局，鼠标悬停图片滑动显示快捷小功能。
这是一款基于Bootstrap实现的类似谷歌图片画廊的扩展效果，jQuery图片网格布局代码。
gridex是一款基于Bootstrap的响应式可伸展的网格布局系统插件。它通过简单设置，就可以制作出像谷歌图片画廊那样的扩展效果。同时它具有响应式的特点，非常的实用。
js代码 [removed][removed] [removed] $(function() { $('.gridex').gridex(); }) [removed] ... 这是一款基于Bootstrap实现的类似谷歌图片画廊的扩展效果，jQuery图片网格布局代码。
网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里，可以是div,内容放置在列内，网页设计中的网格用于布局内容，让网站易于浏览，下面是一个用bootstrap网格布局的例子。 <div>col2 ...
代码片段： [removed][removed] [removed][removed] [removed][removed] [removed][removed]
bootstrap前端框架教程.zip 1.引入Bootstrap CDN ...5.Bootstrap的网格系统 6.控件 7.插件 8.UI编辑器 9.Bootstrap HTML编码规范 10.CSS编码规范 Less入门文档 使用CSS字体图标 script属性 Bootstrap的全局显示设置
这是一款HTML5响应式垂直时间轴效果。该HTML5响应式垂直时间轴采用bootstrap网格布局，通过CSS3代码来对时间轴进行美化，简单实用。
=== 响应式网格布局块 (Bootstrap 4) === 插件 URI： : 作者：Joe Bailey-Roberts 作者 URI： : 版本：1.5.2 稳定标签：树干标签：古腾堡，布局，引导至少需要：5.5 测试高达：5.6 许可证：GPL2+ 许可证 URI： : ...
Bootstrap商品图片网格布局代码是一款基于bootstrap响应式框架制作商城商品图片网格列表布局，鼠标悬停图片滑动显示快捷小功能。
非常实用好看的特效代码，可以完美运行，可以二次修改！
这是一款Bootstrap公司业务分类布局界面设计。该设计的目的是在页面上介绍公司的主要业务。它使用bootstrap网格系统进行布局，并用CSS3制作鼠标hover时的动画效果。