` 标签的样式，用于展示引用内容。 * **默认引用样式:** `

` 标签自带 Bootstrap 样式，左侧带有深灰色边框，并有一定的内边距和外边距。 * **辅助类:** * `.blockquote-reverse`: 用于将引用内容右对齐，并将引用来源放在左侧。 * ``: 在 `

` 标签内使用 `` 标签表示引用来源，并可以使用 `` 标签包裹来源名称。 **代码实践：引用示例** ```html

这是一个默认的块引用示例。

这是一个右对齐的块引用示例。

引用来源：Source Title

``` **内容详解：引用** `

` 标签用于展示来自其他来源的引用内容。`.blockquote-reverse` 类可以改变引用的对齐方式，使其更灵活地适应不同的布局需求。`` 和 `` 标签用于语义化地表示引用来源，提升内容的可理解性。 **2.1.7 列表 (Lists)** Bootstrap 提供了无序列表 `

`、有序列表 `
` 和定义列表 `

` 的样式。 * **无序列表 `

`:** 默认样式带有项目符号。 * **辅助类:** * `.list-unstyled`: 移除默认的项目符号和内边距，常用于创建自定义列表样式。 * `.list-inline`: 将列表项水平排列，常用于创建导航菜单或水平列表。 * **有序列表 `
`:** 默认样式带有数字编号。 * **定义列表 `

`:** 用于展示术语及其定义。 * **辅助类:** * `.dl-horizontal`: 使定义列表的术语和定义水平排列，在较大屏幕上效果更佳。 **代码实践：列表示例** ```html

无序列表 (Unordered List)

• 列表项 1
• 列表项 2
• 列表项 3

无序列表 - 无样式 (Unstyled)

• 列表项 1
• 列表项 2
• 列表项 3

无序列表 - 内联 (Inline)

• 列表项 1
• 列表项 2
• 列表项 3

有序列表 (Ordered List)

1. 列表项 1
2. 列表项 2
3. 列表项 3

定义列表 (Definition List)

术语 1

定义 1

术语 2

定义 2

定义列表 - 水平排列 (Horizontal)

术语 1

定义 1

术语 2

定义 2

``` **内容详解：列表** Bootstrap 提供了多种列表样式，可以根据不同的内容展示需求选择合适的列表类型和辅助类。`.list-unstyled` 类常用于创建自定义导航菜单或去除列表默认样式的场景。`.list-inline` 类适用于水平排列的列表，如标签云或社交媒体链接。`.dl-horizontal` 类在展示术语和定义时，可以更有效地利用水平空间，提高可读性。 **2.1.8 水平线 (Horizontal Rules)** Bootstrap 提供了 `` 标签的样式，用于在内容之间创建分隔线。 * **水平线样式:** `` 标签自带 Bootstrap 样式，显示为一条细灰色的水平线。 **代码实践：水平线示例** ```html

上方内容

下方内容

``` **内容详解：水平线** `` 标签用于在视觉上分隔内容块，增强页面的结构感和可读性。Bootstrap 的默认样式简洁清晰，符合现代网页设计风格。 **2.2 代码 (Code)** Bootstrap 提供了多种方式来展示代码片段，包括行内代码、代码块和变量。 * **行内代码 ``:** 用于展示行内的代码片段，例如函数名、变量名等。 * **代码块 `

`:**  用于展示多行代码块，保留代码的格式和空格。

    *   **辅助类:**

        *   `.pre-scrollable`:  当代码块内容超出容器高度时，添加垂直滚动条。



**代码实践：代码示例**



```html

    
行内代码示例：使用 <span> 标签。
    
代码块示例
    
<div class="container">
    <div class="row">
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
    </div>
</div>
    
可滚动代码块示例
    
<div class="container">
    <div class="row">
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
    </div>
</div>

```



**内容详解：代码**



`` 标签用于在段落文本中插入代码片段，通常用于表示编程语言的关键词、函数名、变量名等。`
` 标签用于展示多行代码块，Bootstrap 默认对其进行了样式化，使其更易于阅读。`.pre-scrollable` 类可以解决代码块内容过长导致页面布局混乱的问题，通过添加滚动条，保证代码块在有限的空间内完整展示。



**2.3 表格 (Tables)**



Bootstrap 提供了丰富的表格样式和辅助类，用于创建美观且响应式的表格。



*   **基本表格样式:**  为 `

    
基本表格
    
` 标签添加 `.table` 类，可以应用基本的表格样式，包括内边距和水平分隔线。

*   **辅助类:**

    *   `.table-striped`:  隔行变色，提高表格的可读性。

    *   `.table-bordered`:  添加边框，使表格更加清晰。

    *   `.table-hover`:  鼠标悬停时，表格行高亮显示。

    *   `.table-condensed`:  紧凑型表格，减小内边距，适用于数据密集的表格。

    *   **状态类 (Contextual Classes):**  `.active`, `.success`, `.info`, `.warning`, `.danger` 可以用于表格行或单元格，添加语义化的背景颜色。



**代码实践：表格示例**



```html

        

            

                
#
                
姓名
                
年龄
            
        
        

            

                
1
                
张三
                
25
            
            

                
2
                
李四
                
30
            
        
    
    
条纹表格
    
        ... (表格内容同上) ...
    
    
带边框表格
    
        ... (表格内容同上) ...
    
    
鼠标悬停表格
    
        ... (表格内容同上) ...
    
    
紧凑型表格
    
        ... (表格内容同上) ...
    
    
状态类表格行
    

        

            

                
Success
                
表格行背景色为绿色
            
            

                
Danger
                
表格行背景色为红色