Module 01 · Getting Started with BootstrapBootstrap 入门
Essential Concepts of BootstrapBootstrap 核心概念
学习目标
完成本视频后，您将能够：
- 描述 Bootstrap 网格系统 的关键概念。
- 识别 Bootstrap 提供的关键类和组件。
- 探索 JavaScript 插件，以增强网页功能。
- 解释 自定义 Bootstrap 的不同方法。
网页设计的核心：外观与用户体验
在构建网站或应用时，需确保其：
- 在各种屏幕尺寸和设备上运行顺畅。
- 呈现出良好的视觉效果和用户体验。
Bootstrap 网格系统 是创建响应式和移动友好型布局的强大工具，它通过 列 和 行 的灵活框架，帮助组织内容。
Bootstrap 网格系统的核心概念
| 概念 | 描述 |
|---|---|
| 容器（Containers） | 包裹整个网页内容，确保内容在不同屏幕上居中并对齐。 - container：创建固定宽度的响应式容器。 - container-fluid：创建全宽容器，横跨整个视窗宽度。 |
| 行（Rows） | 水平排列的列组，确保对齐与间距。每行包含 12 列，可根据需要进一步划分。 |
| 列（Columns） | 定义列宽的方式：使用 col-{number} 类，数字代表列宽。例如：两个列并排显示在大屏上，或在小屏上堆叠。 |
| 偏移（Offset） | 通过将列向右移动来创建列之间的间距，例如使用 offset-{number} 类。 |
| 嵌套（Nesting） | 在列中嵌套更多的行和列，适用于复杂布局。 |
Bootstrap 提供的关键类和组件
1 关键 CSS 类
- 排版（Typography）：修改文本字体、大小、颜色、对齐等属性，例如
text-center实现文本居中。 - 按钮（Buttons）：提供不同设计和大小的按钮类，例如
btn-primary、btn-secondary和btn-success。
- 表单（Forms）：支持输入框、复选框和单选按钮，使用
form-control和form-check等类实现。
2 主要组件
| 组件 | 描述 |
|---|---|
| 导航栏 | 使用 navbar 类创建响应式导航栏，可自动在小屏幕上折叠。 |
| 菜单 | 使用 nav 和 nav-item 类创建水平或垂直菜单，支持下拉菜单。 |
| 警报 | 使用 alert 类显示重要信息。 |
| 徽章与标签 | 使用 badge 或 label 类标记或分类内容。 |
| 模态框（Modals） | 使用 modal 类创建弹出窗口，可显示额外内容或交互选项。 |
| 轮播（Carousel） | 使用 carousel 类创建交互式幻灯片，支持自动播放和导航。 |
Bootstrap JavaScript 插件
| 插件 | 功能 |
|---|---|
| 下拉菜单 | 使用 dropdown 插件为任意 HTML 元素添加下拉功能。 |
| 工具提示 | 使用 tooltip 插件在鼠标悬停时显示提示信息。 |
| 选项卡 | 使用 tab 插件创建标签式导航界面。 |
| 手风琴（Accordion） | 使用 accordion 插件创建可折叠的内容部分。 |
| 轮播与模态框 | 使用 carousel 和 modal 插件实现自动轮播幻灯片及弹出窗口的行为控制。 |
自定义 Bootstrap 的方法
- 覆盖默认样式：
- 创建自定义 CSS 规则，目标特定元素或类，确保设计个性化，同时保留响应性。
- 在 HTML 引用中，将自定义样式放在 Bootstrap CSS 之后。
- 修改网格系统：
- 使用 CSS 媒体查询 自定义列宽和断点，以满足特定布局需求。
- 创建自定义主题：
- 调整颜色、字体和间距等变量，生成与品牌一致的主题。
总结
- Bootstrap 网格系统 是创建响应式布局的强大工具，核心概念包括容器、行、列、偏移和嵌套列。
- 提供丰富的 CSS 类 和 组件，例如导航栏、按钮、表单、警报、轮播等。
- 支持多种 JavaScript 插件，如下拉菜单、工具提示、选项卡、手风琴等。
- 支持多种自定义方法，可根据项目需求调整样式、网格系统及主题。
🎉 恭喜完成本视频学习！继续深入掌握 Bootstrap 的更多功能吧！