跳到主要内容

Bootstrap 术语表

前端开发与 Bootstrap 常用术语中英对照解释

共收录 40+ 个前端开发与 Bootstrap 专业术语，按首字母排列，点击快速跳转。

A B C D E F G H I J K L M N O P R S T U V W

A

折叠面板组件，允许用户通过点击标题来展开或折叠内容区域。同一时间内通常只展开一个面板，常用于 FAQ、设置页面等场景。

用于展示重要消息的轻量级组件，支持 primary、success、danger 等语义颜色。可添加关闭按钮，支持图标和链接。

Accessible Rich Internet Applications 的缩写，一组 HTML 属性，用于增强网页的可访问性。如 aria-label、aria-expanded、role 等，帮助屏幕阅读器理解页面结构。

B

Bootstrap 响应式设计的核心概念。预定义的屏幕宽度阈值（xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px），用于在不同设备尺寸下切换布局和样式。

C

网格系统中的列，使用 .col-{breakpoint}-{n} 类定义。每行最多 12 列，列宽由 n 值占 12 的比例决定。如 .col-md-6 表示在中等屏幕及以上占半宽。

Bootstrap 预构建的可复用 UI 元素，如按钮（Button）、卡片（Card）、导航栏（Navbar）、模态框（Modal）等。每个组件都带有预定义样式和交互行为。

Bootstrap 布局的最外层包裹元素，提供响应式最大宽度和水平居中。三种类型：.container（固定宽度）、.container-fluid（全宽）、.container-{breakpoint}（指定断点全宽）。

Bootstrap 5.3 大量使用的 CSS 自定义属性（以 --bs- 前缀命名），允许在不重新编译 Sass 的情况下动态修改主题颜色、间距等值，是深色模式实现的基础。

D

Bootstrap 5.3 引入的色彩模式功能，通过 data-bs-theme="dark" 属性启用。所有颜色自动切换为暗色调，支持跟随系统偏好和 JavaScript 动态切换。

Bootstrap 5 的 JavaScript 插件使用 HTML data 属性来初始化和配置组件，替代了 Bootstrap 4 中的 data-* 属性。如 data-bs-toggle="modal"。

E

通过阴影模拟的视觉层级效果。Bootstrap 使用 .shadow-sm、.shadow、.shadow-lg 等工具类控制元素的投影大小，创造深度感。

Bootstrap 的扩展机制，通过 Sass @extend 指令或 CSS 类继承来扩展现有组件样式。也可以通过覆盖 Sass 变量来修改默认行为。

F

CSS 布局模型，Bootstrap 5 的网格系统基于 Flexbox 构建。通过 .d-flex 启用，支持方向、对齐、分配空间等控制。Bootstrap 提供了丰富的 Flexbox 工具类。

G

Bootstrap 5 新增的网格间距工具类，替代了 v4 中的 .no-gutters。使用 .g-{size}、.gx-{size}、.gy-{size} 控制网格列之间的间距。

网格列之间的间隔空间，通过 .g-* 工具类或 Sass 变量 $gutters 控制。默认值为 1.5rem（24px）。

I

Bootstrap Icons 是官方图标库，提供 2000+ 个 SVG 图标。通过 CSS 类 .bi-{name} 或 SVG sprite 方式使用，支持尺寸、颜色和旋转控制。

将文本前缀/后缀、按钮或按钮组附加到表单控件的组件。使用 .input-group 包裹，支持 .input-group-text 前后缀文本和 .input-group-btn 按钮。

J

Bootstrap 4 及之前版本依赖的 JavaScript 库。Bootstrap 5 已完全移除 jQuery 依赖，使用原生 JavaScript 重写所有插件，体积更小、性能更好。

K

通过 Tab、Enter、Esc 等键盘按键操作页面元素的能力。Bootstrap 组件内置键盘导航支持，如模态框的 Esc 关闭、下拉菜单的方向键选择等。

L

页面的整体结构安排，包括容器（Container）、行（Row）、列（Col）的组合。Bootstrap 提供响应式布局系统，通过断点自动适应不同屏幕尺寸。

M

覆盖在当前页面上的弹出对话框，用于显示重要信息或交互。Bootstrap 模态框支持自定义大小、动画、滚动和嵌套。

N

网站顶部的导航组件，支持品牌标识、导航链接、表单和折叠菜单。使用 .navbar 和响应式断点类实现自适应导航。

O

Bootstrap 5 新增的侧边抽屉组件，可以从页面边缘滑出。支持左侧、右侧、顶部、底部四个方向，常用于移动端导航或辅助面板。

通过 .offset-{breakpoint}-{n} 类将列向右推移 n 列宽度，用于创建空白间隔或居中布局。如 .offset-md-3 在中等屏幕左侧留出 3 列空白。

P

点击元素时显示的弹出内容框，比 Tooltip 更丰富，可包含标题和正文。基于 Popper.js 定位，需要手动初始化。

Bootstrap 使用的定位引擎库，用于计算 Tooltip、Popover 等浮动元素的位置。Bootstrap 5 使用 @popperjs/core v2。

R

网格系统的水平分组，使用 .row 类包裹列。基于 Flexbox 实现，支持列对齐、分配和包裹。行必须放在容器（Container）内。

S

CSS 预处理器，Bootstrap 使用 Sass 编写样式源码。通过覆盖 Sass 变量（如 $primary）可以深度自定义主题。Bootstrap 5 同时支持 CSS 变量进行运行时定制。

通过 .m-{size}（margin）和 .p-{size}（padding）工具类控制元素间距。size 从 0 到 5，对应 0 到 3rem。支持方向前缀：.mt-3（上）、.mb-4（下）、.mx-auto（水平居中）。

Bootstrap 5 提供的 1000+ 个原子化 CSS 类，用于快速控制颜色、间距、排版、边框、阴影等样式，无需编写自定义 CSS。如 .text-primary、.rounded-circle。

Bootstrap 提供的基本 HTML 模板，包含 CSS、JS 引入和基础页面结构。是快速开始新项目的推荐起点，可在此基础上添加组件和自定义样式。

Sass 中使用 #{$variable} 语法将变量值插入字符串。Bootstrap 源码大量使用此特性生成动态类名和 CSS 值。

T

轻量级消息提示组件，类似手机通知。自动消失，支持堆叠显示。常用于操作成功/失败反馈，不需要用户交互。

鼠标悬停时显示的简短提示文本。通过 data-bs-toggle="tooltip" 和 title 属性使用，支持方向和触发方式配置。

通过标签切换显示不同内容面板的组件。Bootstrap 的 Tab 组件基于 nav-tabs 和 tab-content 实现，支持淡入淡出动画和键盘导航。

U

单用途的 CSS 类，每个类只做一件事。Bootstrap 5 的工具类遵循 {property}{side}-{size} 命名约定，如 .mt-3（上边距）、.px-4（水平内边距）。

V

CSS 视口相对单位。vh = 视口高度的 1%，vw = 视口宽度的 1%。Bootstrap 提供 .vh-100（满视口高度）和 .vw-100（满视口宽度）工具类。

W

通过 .w-{size} 和 .h-{size} 工具类设置元素宽高。如 .w-100（100% 宽度）、.h-75（75% 高度）、.mw-100（最大宽度 100%）。

本网站使用 Cookie 来提升您的浏览体验。隐私政策