本文共 1145 字，大约阅读时间需要 3 分钟。

特点

响应式布局，能够自动适应电脑、平板和手机等多种设备。

传统框架固定大小，在手机上显示效果差异很大，而 Bootstrap 则通过自动适应屏幕尺寸实现了灵活布局。

网格结构

采用 12 列的网格系统，将屏幕划分为行和列，形成标准化的布局结构。每个列可以通过类名控制宽度和偏移量，实现灵活的布局需求。

基础层次结构

Bootstrap 的布局体系基于 container、row 和 col 这三个基本层次，容器类负责整个页面的布局，row 类定义行，col 类控制列的宽度和偏移。

...

列偏移

默认情况下，列内容左对齐，可以通过设置 offset 类实现居中布局。例如，使用 col-sm-offset-3 可以将列内容向右偏移 3 个单位。

表格

表格样式

表格支持多种样式，包括基本样式、带条纹样式、带单元格线样式以及紧凑样式。具体实现如下：

.table {  
  基础样式，适用于普通表格；  
}  
.table-striped {  
  行与列之间添加条纹样式；  
}  
.table-bordered {  
  给表单单元格添加边框；  
}  
.table-condensed {  
  将表单单元格水平缩小，显示更紧凑的布局；  
}

行样式

表格行可以通过类名添加不同样式，例如 .active 表示当前行处于活动状态，.success 表示成功提示信息，.info 表示信息提示，.danger 表示警告信息。

表单

表单组件支持三种布局方式：垂直布局、内联布局和水平布局。使用方法如下：

1. 给 form 标签添加 role="form"；  
2. 将表单控件（如 input、textarea、select 等）放置在 class="form-group" 的 div 中；  
3. 将控件标签和输入字段放在同一个 form-group div 中，以便获得最佳间距。

按钮组件支持多种样式控制，包括大小、颜色和分割按钮功能，能够灵活满足不同场景的需求。

导航栏

导航栏支持多种风格，包括 tab 栏和 pill 胶囊风格。基本上，导航栏通过 nav 类标记来实现，内部可以使用 ul 和 li 元素来组织导航项目。

模态对话框

模态对话框适用于在不离开当前页面的情况下显示对话内容，常用于新增、编辑等操作。使用方法如下：

1. 定义模态对话框 ；  
2. 在按钮或链接中添加 data-toggle="modal" data-target="#addUserModal"；  
3. 模态对话框内部通过 class 属性添加不同的样式，例如 class="modal-dialog" 定义对话框容器，class="modal-header" 定义顶部标题栏等。