BootStrap基础入门

原创已于 2025-11-11 17:13:19 修改 · 1k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #bootstrap #css

于 2025-11-11 17:11:45 首次发布

文章目录

Bootstrap

Bootstrap

核心基础重难点

安装与配置

安装地址：官网地址

核心依赖：使用 Bootstrap 插件必须先引入 jQuery，再引入 Bootstrap.js，顺序不可颠倒（最新版本早已不依赖jQuery）
视口配置：必须在 <head> 中添加 viewport 元标签，否则响应式布局失效，正确配置为 <meta name="viewport" content="width=device-width, initial-scale=1">
文件引入：需同时引入 Bootstrap.css（样式）和 Bootstrap.js（插件功能），缺失会导致样式或交互异常

布局容器

两类容器区别：
- .container：固定宽度，随屏幕尺寸变化（超小屏自动、小屏 750px、大屏 1170px），自带左右内边距。
- .container-fluid：100% 宽度，占据全部视口，无固定宽度限制。
易错点：栅格系统（row、col）必须嵌套在容器内，否则无法正常实现对齐和响应式效果

栅格网格系统

核心规则

12 列布局：容器内每行（.row）默认平分 12 列，列数之和不可超过 12，超出则自动换行
直接子元素限制：只有列（.col-md-*）能作为行（.row）的直接子元素，不可嵌套其他标签
响应式前缀：超小屏（<768px）用 .col-xs-*、小屏（≥768px）用 .col-sm-*、中屏（≥992px）用 .col-md-*、大屏（≥1200px）用 .col-lg-*

列操作

列组合：通过调整列的数字实现合并，例如 .col-md-4 + .col-md-8 组合占满一行，核心是保证列数之和为 12
列偏移：使用 .col-md-offset-* 实现列向右偏移，偏移值 + 列数之和不可超过 12，否则会换行
列排序：通过 .col-md-push-*（向后移动）和 .col-md-pull-*（向前移动）改变列的显示顺序，基于浮动实现
列嵌套：在列内可嵌套新的 .row，子行同样遵循 12 列规则，实现复杂布局

列偏移无法使用小数，若是使用则无偏移效果

常见易错点

忘记添加 .row：直接在容器内放列会导致布局错乱，行的作用是抵消列的内边距，保证布局整齐
前缀使用错误：混淆不同屏幕的前缀（如小屏用了 .col-md-*），导致响应式效果不符合预期
嵌套未遵循规则：子列未嵌套在 .row 内，导致内边距和排列异常

常用样式与组件重难点

排版与文本样式

强调类：.text-muted（浅灰）、.text-primary（蓝色）等 6 种文本颜色类，需注意与背景色的对比度

<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>

列表样式：
- .list-unstyled **去圆点无序列表，**需手动清除默认内边距。
- .dl-horizontal 水平定义列表，标题宽度超过 160px 时会显示省略号，需注意内容长度控制。
- .list-inline 把垂直列表换成水平列表，而且去掉项目编号
代码显示：
- 多行代码 <pre> 标签，超出高度可添加 .pre-scrollable 实现滚动。
- 快捷键<p>使用<kbd>ctrl+s</kbd>保存</p> 效果：
  使用ctrl+s保存

表格样式

组合样式：基础 .table 可与 .table-striped（斑马线）、.table-bordered（边框）、.table-hover（鼠标悬停高亮）组合使用
行 / 单元格状态：.active、.success、.danger 等类可直接作用于 <tr> 或 <td>，改变背景色，需注意与表格整体样式协调
易错点：紧凑型表格 .table-condensed 会减小单元格内边距，需确保内容不会溢出

表单

表单控件

样式类要求：所有输入类控件（文本框、下拉框、文本域）需添加 .form-control 类，否则无法继承 Bootstrap 统一样式
复选框 / 单选框：
- 垂直排列用 .checkbox 包裹，水平排列用 .checkbox-inline/.radio-inline
- 标签（<label>）必须与控件关联，否则屏幕阅读器无法识别
按钮：
- 禁用状态：disabled 属性实现功能禁用（不可点击），.disabled 类仅实现样式禁用（仍可点击），需根据需求选择
```
方法1：在标签中添加disabled属性
<button class="btn btn-danger" disabled="disabled">禁用按钮</button>

方法2：在元素标签中添加类名"disabled"，样式禁用
<button class="btn btn-danger disabled">禁用按钮</button>  
```
- 多标签支持：<a>、<span>、<div> 等标签添加 .btn 类可实现按钮样式，但需手动处理点击事件

表单布局

水平表单：需添加 .form-horizontal 类，配合 .control-label（标签）和列类（.col-sm-*）实现对齐，核心是通过栅格系统控制标签和控件宽度
内联表单：.form-inline 使控件横向排列，标签默认隐藏，需为控件添加 placeholder 提示用户输入内容
易错点：.form-group 类用于包裹标签和控件，缺失会导致间距异常，影响布局美观

插件使用

1、基本样式: .nav 与 “nav-tabs”、“nav-pills”组合制作导航
2、分类:
1)、标签型 (nav-tabs)导航
2)、胶囊形(nav-pills)导航
3)、堆栈(nav-stacked)导航
4)、自适应(nav-justified)导航
5)、面包屑式(breadcrumb)导航，单独使用样式，不与nav一起使用,直接加入到ol、ul中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）
3、状态:
1)、选中状态 active 样式
2)、禁用状态: disable
4、二级菜单

下拉菜单

结构要求：必须用 .dropdown 或 .btn-group 包裹，按钮需添加 .dropdown-toggle 类和 data-toggle="dropdown" 属性，下拉列表需用 .dropdown-menu 类
扩展功能：
- 向上弹出：添加 .dropup 类
  
  分组分隔：用 <li class="divider"></li> 添加分隔线，<li class="dropdown-header"> 添加分组标题
- 对齐方式：.dropdown-menu-right 实现右对齐，默认左对齐

模态框

触发方式：
- 数据属性触发：按钮添加 data-toggle="modal" 和 data-target="#模态框ID"
- JavaScript 触发：$('#模态框ID').modal('show') 手动打开，支持 toggle（切换）、hide（隐藏）方法
结构要求：
- 必须包含 .modal-dialog（控制尺寸）和 .modal-content（包裹头部、主体、底部）
- 关闭按钮需添加 data-dismiss="modal" 属性，否则无法关闭模态框
易错点：模态框 ID 必须唯一，多个模态框不能共用同一 ID，否则会导致触发异常