3. Bootstrap 组件 (Components)

文档摘要

Bootstrap 组件 (Components) Bootstrap 组件 (Components) 详解与代码实践 1. 组件概述 Bootstrap 组件是构成用户界面的基本构建块。它们涵盖了导航、表单、数据展示、提示信息、模态框等多个方面，几乎覆盖了Web应用常见的 UI 需求。使用组件，开发者无需从零开始编写复杂的 HTML、CSS 和 JavaScript 代码，只需通过简单的类名调用和结构调整，即可快速搭建美观且功能完善的页面。 Bootstrap 的组件设计理念强调语义化 HTML 和关注点分离。组件的结构基于标准的 HTML 元素，通过预定义的 CSS 类名来赋予样式和行为。JavaScript 则负责处理组件的动态交互部分。这种设计使得代码更易于维护、理解和扩展。 2.

3. Bootstrap 组件 (Components)

Bootstrap 组件 (Components) 详解与代码实践

1. 组件概述

Bootstrap 组件是构成用户界面的基本构建块。它们涵盖了导航、表单、数据展示、提示信息、模态框等多个方面，几乎覆盖了Web应用常见的 UI 需求。使用组件，开发者无需从零开始编写复杂的 HTML、CSS 和 JavaScript 代码，只需通过简单的类名调用和结构调整，即可快速搭建美观且功能完善的页面。

Bootstrap 的组件设计理念强调语义化 HTML 和 关注点分离。组件的结构基于标准的 HTML 元素，通过预定义的 CSS 类名来赋予样式和行为。JavaScript 则负责处理组件的动态交互部分。这种设计使得代码更易于维护、理解和扩展。

2. 核心组件分类详解

为了更好地理解和应用 Bootstrap 组件，我们可以将其进行分类，并逐一深入学习。以下是根据功能和用途进行的一种分类方式：

2.1. 导航组件 (Navigation Components)

导航组件是引导用户浏览网站内容的关键，Bootstrap 提供了多种导航组件，包括导航栏、导航菜单、面包屑和分页等。

2.1.1. 导航栏 (Navbar)

导航栏是网站头部常用的导航组件，通常包含网站名称、导航链接、搜索框等元素。Bootstrap 的导航栏具有响应式特性，在不同屏幕尺寸下会自动调整布局。

代码实践：


<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Bootstrap 示例</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">产品 <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">产品 1</a></li>
            <li><a href="#">产品 2</a></li>
            <li><a href="#">产品 3</a></li>
            <li class="divider"></li>
            <li><a href="#">其他产品</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="搜索">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

代码详解：

<nav class="navbar navbar-default" role="navigation">: 定义导航栏容器，navbar 类是导航栏的基础类，navbar-default 定义默认样式（灰色背景），role="navigation" 增加语义化，方便辅助技术识别。
<div class="container-fluid">: 使用容器类 container-fluid 使导航栏宽度铺满屏幕，可以使用 container 实现固定宽度居中布局。
<div class="navbar-header">: 导航栏头部区域，通常放置品牌 logo 或网站名称。
- <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">: 移动设备下的折叠按钮，navbar-toggle 类定义按钮样式，collapsed 类表示初始状态为折叠，data-toggle="collapse" 和 data-target="#bs-example-navbar-collapse-1" 关联折叠行为和目标元素。
- <a class="navbar-brand" href="#">Bootstrap 示例</a>: 品牌链接，navbar-brand 类定义品牌样式。
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">: 导航栏主体内容，collapse 和 navbar-collapse 类使内容在移动设备下可以折叠，id 与折叠按钮的 data-target 属性值一致。
- <ul class="nav navbar-nav">: 导航链接列表，nav 和 navbar-nav 类定义导航链接样式。
  - <li class="active"><a href="#">首页</a></li>: 当前激活状态的导航链接，active 类高亮显示。
  - <li class="dropdown"> ... </li>: 下拉菜单项，dropdown 类定义下拉菜单容器，dropdown-toggle 和 data-toggle="dropdown" 启用下拉功能，dropdown-menu 定义下拉菜单列表。
- <form class="navbar-form navbar-left" role="search">: 导航栏表单，navbar-form 类定义表单样式，navbar-left 使表单靠左显示。
- <ul class="nav navbar-nav navbar-right">: 右侧导航链接列表，navbar-right 使列表靠右显示。

Mermaid 图示：

graph TD subgraph navbar direction TB navbar-container(navbar) --> navbar-header navbar-container --> navbar-collapse navbar-header --> navbar-brand navbar-header --> navbar-toggle navbar-collapse --> nav-links(ul.nav.navbar-nav) navbar-collapse --> navbar-form navbar-collapse --> nav-right(ul.nav.navbar-nav.navbar-right) nav-links --> nav-item1(li.active) nav-links --> nav-item2(li) nav-links --> dropdown-item(li.dropdown) dropdown-item --> dropdown-toggle dropdown-item --> dropdown-menu end

2.1.2. 导航菜单 (Navs)

导航菜单用于在页面内或页面之间进行导航，Bootstrap 提供了多种导航菜单样式，包括标签页 (Tabs)、胶囊式菜单 (Pills) 和列表式菜单 (List Navs)。

代码实践 (标签页 Tabs)：


<ul class="nav nav-tabs">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">个人资料</a></li>
  <li><a href="#">消息</a></li>
</ul>

代码实践 (胶囊式菜单 Pills)：


<ul class="nav nav-pills">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">个人资料</a></li>
  <li><a href="#">消息</a></li>
</ul>

代码详解：

<ul class="nav nav-tabs">: 定义标签页导航菜单，nav 类是导航菜单的基础类，nav-tabs 定义标签页样式。
<ul class="nav nav-pills">: 定义胶囊式导航菜单，nav-pills 定义胶囊式样式。
<li class="active"><a href="#">首页</a></li>: 当前激活状态的导航项，active 类高亮显示。

2.1.3. 面包屑 (Breadcrumbs)

面包屑导航用于显示用户在网站中的路径，帮助用户了解当前位置并方便返回上一级页面。

代码实践：


<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">分类</a></li>
  <li class="active">当前页面</li>
</ol>

代码详解：

<ol class="breadcrumb">: 定义面包屑导航容器，breadcrumb 类定义面包屑样式，使用有序列表 <ol> 更具语义化。
<li class="active">当前页面</li>: 当前页面，active 类表示当前位置。

2.1.4. 分页 (Pagination)

分页组件用于将大量内容分页显示，提高页面加载速度和用户体验。

代码实践：


<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

代码详解：

<ul class="pagination">: 定义分页容器，pagination 类定义分页样式。
<li><a href="#">«</a></li>: 上一页按钮，« 是左双引号实体字符。
<li class="active"><a href="#">1</a></li>: 当前页码，active 类高亮显示。
<li><a href="#">»</a></li>: 下一页按钮，» 是右双引号实体字符。

2.2. 表单组件 (Form Components)

表单组件用于收集用户输入的数据，Bootstrap 提供了丰富的表单控件和布局方式。

2.2.1. 表单控件 (Form Controls)

Bootstrap 提供了多种表单控件，包括文本输入框、密码输入框、文本域、下拉选择框、单选框和复选框等。

代码实践 (文本输入框)：


<div class="form-group">
  <label for="exampleInputEmail1">邮箱地址</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
</div>

代码实践 (下拉选择框)：


<div class="form-group">
  <label for="exampleSelect1">选择框</label>
  <select class="form-control" id="exampleSelect1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

代码详解：

<div class="form-group">: 表单组容器，form-group 类用于包裹 label 和控件，增加间距和布局。
<label for="exampleInputEmail1">邮箱地址</label>: 表单标签，for 属性关联控件的 id 属性，增强可访问性。
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">: 文本输入框，form-control 类定义表单控件的通用样式，使其宽度自适应父容器。
<select class="form-control" id="exampleSelect1"> ... </select>: 下拉选择框，form-control 类同样适用。

2.2.2. 表单布局 (Form Layouts)

Bootstrap 提供了多种表单布局方式，包括默认垂直表单、内联表单和水平表单。

代码实践 (内联表单)：


<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="密码">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 记住密码
    </label>
  </div>
  <button type="submit" class="btn btn-default">登录</button>
</form>

代码实践 (水平表单)：


<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="邮箱">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="密码">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> 记住密码
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">登录</button>
    </div>
  </div>
</form>

代码详解：

<form class="form-inline" role="form">: 定义内联表单，form-inline 类使表单元素水平排列。
<form class="form-horizontal" role="form">: 定义水平表单，form-horizontal 类使 label 和控件水平排列。
<label class="col-sm-2 control-label" for="inputEmail3">邮箱</label>: 水平表单的 label，col-sm-2 类使用栅格系统占据 2 列宽度，control-label 类使 label 右对齐。
<div class="col-sm-10"> ... </div>: 水平表单的控件容器，col-sm-10 类使用栅格系统占据 10 列宽度。
<div class="col-sm-offset-2 col-sm-10"> ... </div>: 水平表单的偏移列，col-sm-offset-2 类使内容向右偏移 2 列宽度。

2.2.3. 按钮 (Buttons)

按钮用于触发操作或提交表单，Bootstrap 提供了多种按钮样式和尺寸。

代码实践：


<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-link">链接按钮</button>

代码详解：

<button type="button" class="btn btn-default">默认按钮</button>: 默认按钮样式，btn 类是按钮的基础类，btn-default 定义默认样式（灰色）。
btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link: 分别定义不同语义的按钮样式，例如 btn-primary 表示主要操作，btn-success 表示成功操作，btn-danger 表示危险操作。

2.3. 数据展示组件 (Data Display Components)

数据展示组件用于呈现结构化数据，Bootstrap 提供了表格、列表组、面板、Well 和媒体对象等组件。

2.3.1. 表格 (Tables)

表格用于展示结构化数据，Bootstrap 提供了多种表格样式，包括基本表格、条纹表格、边框表格、鼠标悬停表格和紧凑表格。

代码实践 (基本表格)：


<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>姓名</th>
      <th>班级</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>一班</td>
      <td>90</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>二班</td>
      <td>85</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>三班</td>
      <td>92</td>
    </tr>
  </tbody>
</table>

代码详解：

<table class="table">: 定义基本表格，table 类定义表格基础样式。
<thead> ... </thead>: 表头区域，<thead> 元素定义表头行。
<tbody> ... </tbody>: 表体区域，<tbody> 元素定义数据行。
<tr> ... </tr>: 表格行，<tr> 元素定义表格行。
<th> ... </th>: 表头单元格，<th> 元素定义表头单元格，默认加粗居中。
<td> ... </td>: 数据单元格，<td> 元素定义数据单元格。

2.3.2. 列表组 (List Groups)

列表组用于展示一组相关内容，例如导航菜单、设置列表等。

代码实践：


<ul class="list-group">
  <li class="list-group-item">列表项 1</li>
  <li class="list-group-item">列表项 2</li>
  <li class="list-group-item">列表项 3</li>
  <li class="list-group-item">列表项 4</li>
</ul>

代码详解：

<ul class="list-group">: 定义列表组容器，list-group 类定义列表组样式。
<li class="list-group-item">列表项 1</li>: 列表项，list-group-item 类定义列表项样式。

2.3.3. 面板 (Panels)

面板用于将内容包裹在一个带边框和标题的容器中，常用于分组展示相关信息。

代码实践：


<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">面板标题</h3>
  </div>
  <div class="panel-body">
    面板内容...
  </div>
</div>

代码详解：

<div class="panel panel-default">: 定义面板容器，panel 类是面板的基础类，panel-default 定义默认面板样式（灰色边框）。
<div class="panel-heading"> ... </div>: 面板头部区域，panel-heading 类定义面板头部样式。
- <h3 class="panel-title">面板标题</h3>: 面板标题，panel-title 类定义面板标题样式。
<div class="panel-body"> ... </div>: 面板主体内容区域，panel-body 类定义面板主体内容样式。

2.3.4. Well

Well 组件用于在页面中创建一个凹陷或凸起的区域，用于突出显示内容。

代码实践：


<div class="well">
  这是一个 Well 组件，用于突出显示内容。
</div>

代码详解：

<div class="well"> ... </div>: 定义 Well 组件容器，well 类定义 Well 组件样式。

2.3.5. 媒体对象 (Media Objects)

媒体对象组件用于展示图片、视频等媒体内容，并可以与文本内容并排显示。

代码实践：


<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="image.jpg" alt="媒体对象图片">
  </a>
  <div class="media-body">
    <h4 class="media-heading">媒体对象标题</h4>
    媒体对象内容...
  </div>
</div>

代码详解：

<div class="media">: 定义媒体对象容器，media 类定义媒体对象样式。
<a class="pull-left" href="#"> ... </a>: 媒体对象左侧内容，pull-left 类使内容左浮动。
- <img class="media-object" src="image.jpg" alt="媒体对象图片">: 媒体对象图片，media-object 类定义媒体对象图片样式。
<div class="media-body"> ... </div>: 媒体对象主体内容区域，media-body 类定义媒体对象主体内容样式。
- <h4 class="media-heading">媒体对象标题</h4>: 媒体对象标题，media-heading 类定义媒体对象标题样式。

2.4. 提示信息组件 (Alerts & Messaging Components)

提示信息组件用于向用户显示各种类型的提示信息，包括警告、错误、成功和信息提示。

2.4.1. 警告框 (Alerts)

警告框用于向用户显示警告、错误或成功等提示信息，并可以包含关闭按钮。

代码实践：


<div class="alert alert-success" role="alert">
  <strong>成功！</strong> 操作已成功完成。
</div>
<div class="alert alert-info" role="alert">
  <strong>提示！</strong> 这是一个提示信息。
</div>
<div class="alert alert-warning" role="alert">
  <strong>警告！</strong> 请注意某些事项。
</div>
<div class="alert alert-danger" role="alert">
  <strong>错误！</strong> 发生错误，请重试。
</div>

代码详解：

<div class="alert alert-success" role="alert">: 定义成功提示框，alert 类是警告框的基础类，alert-success 定义成功提示样式（绿色）。
alert-info, alert-warning, alert-danger: 分别定义不同类型的警告提示样式，例如 alert-info 表示信息提示，alert-warning 表示警告提示，alert-danger 表示错误提示。
role="alert": 增加语义化，方便辅助技术识别。

2.4.2. 徽章 (Badges)

徽章用于在导航或其他组件中显示计数或状态信息。

代码实践：


<a href="#">消息 <span class="badge">42</span></a>
<button type="button" class="btn btn-primary">
  通知 <span class="badge">7</span>
</button>

代码详解：

<span class="badge">42</span>: 定义徽章，badge 类定义徽章样式。

2.4.3. 标签 (Labels)

标签用于标记或分类内容，类似于徽章，但样式略有不同。

代码实践：


<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

代码详解：

<span class="label label-default">默认标签</span>: 默认标签样式，label 类是标签的基础类，label-default 定义默认样式（灰色）。
label-primary, label-success, label-info, label-warning, label-danger: 分别定义不同语义的标签样式，与按钮样式类似。

2.4.4. 进度条 (Progress Bars)

进度条用于显示任务的完成进度。

代码实践：


<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% 完成</span>
  </div>
</div>

代码详解：

<div class="progress">: 定义进度条容器，progress 类定义进度条样式。
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">: 进度条主体，progress-bar 类定义进度条样式。
- role="progressbar": 增加语义化，表示这是一个进度条。
- aria-valuenow="60": 当前进度值。
- aria-valuemin="0": 最小值。
- aria-valuemax="100": 最大值。
- style="width: 60%;": 设置进度条宽度，表示进度百分比。
- <span class="sr-only">60% 完成</span>: 为屏幕阅读器提供文本描述，增强可访问性。

2.5. 模态框与叠加层组件 (Modals & Overlays Components)

模态框和叠加层组件用于在当前页面之上显示额外的内容，例如弹窗提示、对话框和工具提示等。

2.5.1. 模态框 (Modals)

模态框是一种弹出窗口，用于在当前页面之上显示额外内容，并阻止用户与页面其他部分进行交互，常用于提示用户确认操作或显示重要信息。

代码实践：


<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  启动模态框
</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
      </div>
      <div class="modal-body">
        模态框内容...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

代码详解：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> ... </button>: 触发模态框的按钮，data-toggle="modal" 和 data-target="#myModal" 关联模态框行为和目标元素。
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">: 模态框容器，modal 类是模态框的基础类，fade 类添加淡入淡出动画效果，id="myModal" 与触发按钮的 data-target 属性值一致，tabindex="-1" 使模态框可以通过键盘 focus，role="dialog" 和 aria-labelledby="myModalLabel" 增强可访问性，aria-hidden="true" 初始状态隐藏模态框。
<div class="modal-dialog"> ... </div>: 模态框对话框容器，modal-dialog 类定义对话框样式。
<div class="modal-content"> ... </div>: 模态框内容容器，modal-content 类定义内容样式。
<div class="modal-header"> ... </div>: 模态框头部区域，modal-header 类定义头部样式。
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>: 关闭按钮，close 类定义关闭按钮样式，data-dismiss="modal" 关闭模态框，× 是乘号实体字符。
- <h4 class="modal-title" id="myModalLabel">模态框标题</h4>: 模态框标题，modal-title 类定义标题样式，id="myModalLabel" 与模态框容器的 aria-labelledby 属性值一致。
<div class="modal-body"> ... </div>: 模态框主体内容区域，modal-body 类定义主体内容样式。
<div class="modal-footer"> ... </div>: 模态框底部区域，modal-footer 类定义底部样式，通常放置操作按钮。