Module 01 · Getting Started with BootstrapBootstrap 入门
Layouts, Contents, and Forms in BootstrapBootstrap 中的布局、内容与表单
学习目标
通过本视频，您将能够：
- 描述 Bootstrap 的布局（Layouts）。
- 讨论与内容相关的 Bootstrap 功能。
- 解释 Bootstrap 表单的关键概念。
网站的关键组成部分
一个网站通常包含以下部分：
- 布局（Layout）：定义网站的结构和内容排列。
- 内容（Content）：网站的主要信息，包括文本和多媒体。
- 表单（Forms）：用于捕获用户输入的信息。
Bootstrap 提供的功能，如网格系统和预定义的 HTML、CSS 模板，简化了布局、内容和表单的创建与维护。
Bootstrap 的布局系统
12列网格系统
- 网页被划分为 12等宽列。
- 可以通过组合和重新排列列，创建不同的布局。
- 响应式布局：列的宽度会根据屏幕大小自动调整。
实现网格布局的核心类
| 类名 | 功能 |
|---|---|
.container |
创建固定宽度的容器，用于包裹网页内容。 |
.row |
创建行，用于容纳列。在空间不足时，列会自动换行。 |
.col |
定义列的宽度，例如：.col-xs（超小屏），.col-sm（小屏），.col-md（中屏），.col-lg（大屏）。 |
.col-offset |
偏移列的位置，例如：.col-offset-2 将列向右偏移两个宽度单位。 |
常见布局示例
- 两列布局：
- 两列等宽，在小屏幕上垂直堆叠。
- 三列布局：
- 三列等宽，在小屏幕上垂直堆叠。
- 侧边栏布局：
- 主内容区和侧边栏，在小屏幕上侧边栏会堆叠在主内容下方。
Bootstrap 的内容相关功能
文本排版样式
| 类名 | 功能 |
|---|---|
h1-h6 |
定义标题大小。 |
lead |
创建更大、更突出的段落样式。 |
text-muted |
显示柔和或次要的文本。 |
text-primary、text-success、text-info |
设置文本颜色。 |
列表样式
- 去除默认样式：
list-unstyled。 - 内联列表：
list-inline。
实用工具类
| 类名 | 功能 |
|---|---|
text-left、text-center、text-right |
文本对齐。 |
text-uppercase、text-lowercase、text-capitalize |
文本大小写转换。 |
text-bold、text-italic |
字体加粗、斜体。 |
text-decoration-none |
去除文本装饰（如下划线或删除线）。 |
图片与媒体
- 响应式图片：
img-fluid，确保图片根据屏幕大小缩放。 - 媒体嵌入：
embed-responsive和比例类（如embed-responsive-16by9），确保多媒体内容的比例和缩放适应不同设备。
Bootstrap 的表单功能
表单组件
- 包括输入框、复选框、单选按钮和下拉菜单。
- 使用
form-control类轻松设计输入控件。
表单布局
| 类名 | 功能 |
|---|---|
.form-inline |
创建行内表单布局。 |
.form-horizontal |
创建水平表单布局。 |
.form-row |
创建自定义表单行布局。 |
输入组（Input Groups）
- 将输入框与其他元素（如按钮或下拉菜单）组合，使用
.input-group实现。
表单验证
| 类名 | 功能 |
|---|---|
.is-valid |
输入有效时的样式。 |
.is-invalid |
输入无效时的样式。 |
.valid-feedback |
显示输入有效的反馈信息。 |
.invalid-feedback |
显示输入无效的反馈信息。 |
总结
- Bootstrap布局系统 提供12列网格，支持灵活的响应式设计。
- 内容相关功能 包括文本样式、列表样式、图片和多媒体嵌入工具。
- 表单组件 包括丰富的输入控件、验证样式和布局选项。
🎉 恭喜完成本视频学习！继续探索 Bootstrap 的强大功能吧！