《bootstrap布局(bootstrap布局容器)》
在网页开发中，实现响应式布局是提升用户体验的关键。Bootstrap框架提供了一种简单而强大的解决方案——Bootstrap布局容器。通过使用Bootstrap的容器类，可以轻松创建适应不同屏幕尺寸、具有合理间距和对齐方式的页面布局。
1. 使用.container类创建固定宽度容器
这是最常用的方式之一。它会根据不同的屏幕尺寸设置固定的宽度，并且水平居中显示内容。
html
</p>
<title>Document</title>
<!-- 引入 Bootstrap CSS -->
<div class="container">
<h1>Hello, world!</h1>
<p>This is a container with fixed width.</p>
</div>
<p>
2. 使用.container-fluid类创建全宽容器
当需要让内容充满整个浏览器窗口时，可以选择此方法。它不会限制宽度，而是根据屏幕大小自动调整。
html
</p>
<title>Document</title>
<!-- 引入 Bootstrap CSS -->
<div class="container-fluid">
<h1>Hello, world!</h1>
<p>This is a container with full width.</p>
</div>
<p>
3. 自定义容器宽度
如果默认的.container类提供的宽度不能满足需求，还可以自定义容器的宽度。可以通过添加额外的CSS样式来实现。
html
</p>
<title>Document</title>
<!-- 引入 Bootstrap CSS -->
.custom-container {
max-width: 800px;
margin: 0 auto;
}
<div class="custom-container">
<h1>Hello, world!</h1>
<p>This is a container with custom width.</p>
</div>
<p>在实际项目中，我们可以根据具体的设计需求选择合适的Bootstrap布局容器，从而快速构建出美观、响应式的页面布局。
