Bootstrap栅格系统详解：响应式布局与嵌套
Bootstrap 提供了一个强大的响应式栅格系统，该系统能够根据屏幕尺寸的变化自动调整布局，最多可分为12列。这使得开发者能够轻松创建适应不同设备的网页。下面将深入探讨其核心概念和用法。
基础网格布局
要创建一个基本的网格布局，首先需要将内容包裹在 .container 类中，以实现内容居中和固定宽度。每一行内容则需要使用 .row 类进行包裹。在一个 .row 内部，列（columns）可以被定义，总列数不能超过12。例如，要将一行内容平均分成三等份，可以使用三个 .col-md-4 类，其中 md 表示其中等屏幕尺寸（≥768px），4 表示占据4列。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap Grid Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstrap 网格系统演示<small>基础布局</small></h1>
<div class="row">
<div class="col-md-4">
<h2>区块一</h2>
<p>这是第一个区块的内容。</p>
</div>
<div class="col-md-4">
<h2>区块二</h2>
<p>这是第二个区块的内容。</p>
</div>
<div class="col-md-4">
<h2>区块三</h2>
<p>这是第三个区块的内容。</p>
</div>
</div>
</div>
</body>
</html>
嵌套网格
Bootstrap 栅格系统支持嵌套，即在一个列（column）的内部可以再包含一个行（row）和更多的列。嵌套的列的宽度是相对于其父列的宽度计算的。例如，在一个 .col-md-4 元素内，可以再创建两个 .col-md-6 来平分父列的宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap Grid Nesting</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstrap 网格系统演示<small>嵌套布局</small></h1>
<div class="row">
<div class="col-md-4">
<h2>父区块一</h2>
<p>这是父区块一的内容。</p>
</div>
<div class="col-md-4">
<h2>父区块二</h2>
<p>这是父区块二的内容。</p>
</div>
<div class="col-md-4">
<h2>父区块三</h2>
<p>这是父区块三的内容。</p>
<div class="row">
<div class="col-md-6">
<p>嵌套区块 A</p>
</div>
<div class="col-md-6">
<p>嵌套区块 B</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
流式布局
要实现全屏宽度的布局，可以将 .container 类替换为 .container-fluid。这样，布局内容将占据整个视口宽度，并根据浏览器窗口大小进行动态缩放，提供真正的流动性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap Fluid Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1 class="page-header">Bootstrap 网格系统演示<small>流式布局</small></h1>
<div class="row">
<div class="col-md-4">
<h2>区块一</h2>
<p>这是流式布局下的第一个区块。</p>
</div>
<div class="col-md-4">
<h2>区块二</h2>
<p>这是流式布局下的第二个区块。</p>
</div>
<div class="col-md-4">
<h2>区块三</h2>
<p>这是流式布局下的第三个区块。</p>
<div class="row">
<div class="col-md-6">
<p>嵌套内容 A</p>
</div>
<div class="col-md-6">
<p>嵌套内容 B</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
响应式布局
响应式布局是现代网页设计的关键，它能让网页在不同尺寸的设备上（如桌面、平板、手机）都能提供良好的用户体验。Bootstrap的栅格系统通过预定义的屏幕断点（breakpoints）来实现响应式设计。开发者可以通过为列指定不同断点下的类来控制其在不同屏幕尺寸下的显示行为。例如，.col-xs-* (超小屏幕), .col-sm-* (小屏幕), .col-md-* (中等屏幕), .col-lg-* (大屏幕)。
CSS3的媒体查询（Media Queries）是实现响应式布局的基础。通过媒体查询，可以根据视口（viewport）的尺寸应用不同的CSS样式。例如，可以设置当视口宽度在700px到900px之间时，改变背景颜色和字体大小。
@media (min-width: 700px) and (max-width: 900px) {
body {
background-color: red;
font-size: 55px;
}
}
Bootstrap 已经内置了响应式断点，例如在桌面浏览器中，当屏幕宽度大于992px时，会应用标准的12列栅格布局。当屏幕宽度小于992px时，布局会自动调整。以下是一个结合了响应式样式和Bootstrap栅格的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap Responsive Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #269ABC; /* 默认背景色 */
transition: background-color 0.3s ease; /* 平滑过渡效果 */
}
/* 针对特定屏幕尺寸范围应用样式 */
@media (min-width: 700px) and (max-width: 900px) {
body {
background-color: red;
font-size: 55px;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">响应式网格演示<small>适应不同屏幕</small></h1>
<p>内容区域，将在不同屏幕尺寸下有不同的显示效果。</p>
<div class="row">
<div class="col-sm-6 col-md-4">
<h3>区块A</h3>
<p>在小屏幕设备上，此区块占据一半宽度；在中等及以上屏幕，占据三分之一宽度。</p>
</div>
<div class="col-sm-6 col-md-4">
<h3>区块B</h3>
<p>与区块A类似，响应式地调整宽度。</p>
</div>
<div class="col-md-4 hidden-sm hidden-xs">
<h3>区块C</h3>
<p>此区块仅在中等及以上屏幕显示。</p>
</div>
</div>
</div>
</body>
</html>
实例应用
以下是一个简单的实例，展示了如何使用Bootstrap的响应式类来创建包含图片内容的布局。根据屏幕尺寸的不同，图片可以有不同的排布方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap Grid Example 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
.img-responsive { /* 确保图片在容器内自适应 */
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">响应式布局实例<small>图片展示</small></h1>
<div class="row">
<div class="col-xs-6 col-md-4" onclick="alert('Phone Image Clicked')">
<img src="placeholder_phone.jpg" alt="智能手机" class="img-responsive"/>
</div>
<div class="col-xs-6 col-md-4" onclick="alert('Tablet Image Clicked')">
<img src="placeholder_tablet.jpg" alt="平板电脑" class="img-responsive"/>
</div>
<div class="col-xs-12 col-md-4" onclick="alert('Desktop Image Clicked')">
<img src="placeholder_desktop.jpg" alt="桌面电脑" class="img-responsive"/>
</div>
</div>
</div>
</body>
</html>
在这个例子中，图片在超小屏幕（xs）上会堆叠显示，每行一个（col-xs-12，或者在上面例子中是 col-xs-6，表示在小屏幕下占据一半宽度）。在中等屏幕（md）及以上，每行显示三张图片（col-md-4）。
通过理解并运用 Bootstrap 的栅格系统，开发者可以高效地构建出适应各种设备屏幕的响应式网页。
