<!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实现网格布局与列表布局之间的切换，这对于创建灵活且用户友好的界面至关重要。 在Bootstrap中，网格系统是基于12列的栅格布局，允许开发者创建响应式的页面布局。通过...
总的来说，jquery.gridstrap.js提供了一个强大的工具，使开发者能够在Bootstrap环境中轻松创建和调整拖拽式网格布局。这个插件对于那些需要构建动态、互动且适应性强的网页项目的人来说，无疑是一个宝贵的资源。通过...
二、什么是Bootstrap网格系统？ Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更...
在这个代码示例中，jQuery被用来增强Bootstrap网格系统的功能，特别是在响应式布局的动态调整上。jQuery允许开发者在用户交互或页面加载后执行特定的JavaScript代码，从而实现更复杂的行为。 可能的实现方式是，当...
Bootstrap图片网格布局是一种高效、灵活的网页设计框架，它允许开发者创建响应式和移动优先的网站。在这个场景中，我们讨论的是一个利用jQuery增强的Bootstrap图片网格系统，它提供了类似于谷歌图片画廊的可伸展效果...
在本主题“基于Bootstrap的网格布局和列表布局切换特效”中，我们将探讨如何利用Bootstrap的网格系统以及jQuery库实现动态的布局转换。 Bootstrap的网格系统是其核心特性之一，它提供了一种灵活的响应式布局方法。...
在“基于Bootstrap的响应式可伸展的网格布局系统”中，我们聚焦于Bootstrap的核心特性——网格系统（Grid System）。这个系统允许开发者创建灵活、自适应的页面布局，无论是在桌面端还是移动设备上都能提供良好的...
1. **栅格系统**：Bootstrap的栅格系统是其布局的核心，它基于12列的网格模型，允许开发者通过简单的类来创建响应式的页面布局。你可以通过调整列的数量和排列方式，轻松地控制内容在不同设备上的展示。 2. **响应...
首先，Bootstrap网格系统是基于12列的模型工作，允许你将页面分成最多12等份。你可以通过设置行(row)和列(column)来创建布局。例如，如果你想要创建一个两列的商品展示，你可以在一个`.row`类容器内放置两个`.col-sm...
通过使用`.container`、`.row` 和 `.col-*-*` 类，开发者可以创建灵活的网格布局，适应不同屏幕尺寸。例如，`.col-md-4` 表示在中等（medium）屏幕尺寸下占据12列中的4列。 ### 2. 响应式设计 (Responsive Design) ...
Bootstrap商品图片网格布局代码是一个基于Bootstrap框架的网页设计资源，主要展示了如何利用Bootstrap的栅格系统来构建一个美观且响应式的商品展示页面。Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，...
Bootstrap的基础布局系统依赖于网格（Grid System），它将页面宽度划分为12列，允许灵活的栅格布局。通过类`.container`、`.container-fluid`定义容器，再利用`.row`类来组织行，并在行内嵌套`.col-*-*`类的列，可以...
js代码 [removed][removed] [removed] $(function() { $('.gridex').gridex(); }) [removed] ... 这是一款基于Bootstrap实现的类似谷歌图片画廊的扩展效果，jQuery图片网格布局代码。
网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里，可以是div,内容放置在列内，网页设计中的网格用于布局内容，让网站易于浏览，下面是一个用bootstrap网格布局的例子。 <div>col2 ...
1. **响应式设计**：Bootstrap采用了网格系统（Grid System），通过12列的栅格布局，可以灵活地适应不同设备的屏幕尺寸，包括手机、平板和桌面电脑。这使得网站在不同设备上都能呈现出良好的视觉效果。 2. **预定义...
代码片段： [removed][removed] [removed][removed] [removed][removed] [removed][removed]
1. **响应式布局**：Bootstrap的网格系统可以自动调整布局以适应不同的屏幕尺寸。 2. **预制组件**：提供了丰富的UI组件，如按钮、表单、导航条、卡片、弹窗等。 3. **定制性**：可以通过Sass变量轻松定制Bootstrap...
bootstrap前端框架教程.zip 1.引入Bootstrap CDN ...5.Bootstrap的网格系统 6.控件 7.插件 8.UI编辑器 9.Bootstrap HTML编码规范 10.CSS编码规范 Less入门文档 使用CSS字体图标 script属性 Bootstrap的全局显示设置
1. **Bootstrap网格系统**：Bootstrap的核心是其12列的网格系统。它允许开发者通过定义行(row)和列(column)来组织内容，根据屏幕尺寸自动调整布局。例如，一个全宽的列在小屏幕上可能是满屏显示，在大屏幕上可能只...
6. **可视化布局系统**：提到的“可视化布局系统”可能指的是Bootstrap的网格系统，它允许开发者通过简单的类名定义列宽，创建灵活的、响应式的布局。网格系统基于12列，可嵌套，具有Offsets（偏移）和Push/Pull...