Bootstrap基本布局
1. 容器（.container、.container-fluid）
Bootstrap中的容器用于提供固定宽度或流式宽度的布局，它是栅格系统的基础。Bootstrap有两种主要的容器类型：
-
.container：-
这是一个固定宽度的容器，宽度随着屏幕尺寸的变化而变化。对于不同的屏幕宽度，
.container会有不同的最大宽度：- 小屏幕（<576px）：100%宽度
- 中屏幕（≥576px）：540px
- 大屏幕（≥768px）：720px
- 超大屏幕（≥992px）：960px
- 最大屏幕（≥1200px）：1140px
-
示例：
<div class="container"> <h1>固定宽度容器</h1> <p>这是一个固定宽度的容器示例。</p> </div>
-
-
.container-fluid：-
这是一个流式容器，宽度始终为100%，适应屏幕的整个宽度。
-
示例：
<div class="container-fluid"> <h1>流式容器</h1> <p>这是一个流式容器示例。</p> </div>
-
2. 栅格系统（Grid system）
Bootstrap的栅格系统允许你通过划分页面为12列来实现灵活的布局。你可以使用类来定义每一列的宽度，列的数量可以根据需要进行调整。
-
基本结构：
<div class="container"> <div class="row"> <div class="col">列1</div> <div class="col">列2</div> <div class="col">列3</div> </div> </div> -
列的宽度： 你可以使用不同的列类（
.col-）来定义列的宽度。比如，.col-6表示该列占据6列的宽度，即一半的空间。<div class="container"> <div class="row"> <div class="col-6">列1（6列宽）</div> <div class="col-6">列2（6列宽）</div> </div> </div> -
响应式栅格： Bootstrap支持不同屏幕尺寸下的响应式布局，你可以根据屏幕大小定义列的宽度。
<div class="container"> <div class="row"> <div class="col-12 col-md-6">列1（小屏幕占满，medium屏幕占6列）</div> <div class="col-12 col-md-6">列2（小屏幕占满，medium屏幕占6列）</div> </div> </div>
3. 列的嵌套和排版
Bootstrap允许列的嵌套，以创建更复杂的布局。你可以在列内再次使用行（.row）和列（.col）类。
-
嵌套列示例：
<div class="container"> <div class="row"> <div class="col-md-8"> 列1（占8列） <div class="row"> <div class="col-6">嵌套列1（占6列）</div> <div class="col-6">嵌套列2（占6列）</div> </div> </div> <div class="col-md-4">列2（占4列）</div> </div> </div> -
列的排版： Bootstrap提供了一些排版类，可以帮助你调整文本的样式、对齐方式和间距。
<div class="container"> <div class="row"> <div class="col"> <h2 class="text-center">居中标题</h2> <p class="lead">这是一个引导文本，展示了如何使用Bootstrap进行基本排版。</p> <p class="text-muted">这是一个辅助文本，用于补充说明。</p> </div> </div> </div>
总结
Bootstrap的基本布局通过容器、栅格系统和列的嵌套，使得创建响应式网页变得简单。使用Bootstrap可以快速构建各种复杂的布局，提升开发效率。