Bootstrap基础样式和组件-编程入门课：Bootstrap从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：Bootstrap从入门到实战

Bootstrap 提供了一套基础样式和组件，帮助开发者快速构建现代化、响应式的网站和应用程序。在本章节中，将介绍 Bootstrap 的基础样式和常用组件。

-----------------------------

**一、基础样式**
Bootstrap 的基础样式包括了常用的 HTML 元素的样式，包括排版、颜色、表格、表单、按钮等。开发者可以直接在 HTML 元素上添加相应的类名，来应用 Bootstrap 的样式。

**1、排版**
Bootstrap 提供了一些排版相关的类，可以快速实现文字、标题、段落等元素的样式。例如，h1 到 h6 元素可以使用 h1 到 h6 类来应用对应的样式，而段落元素 p 可以使用 lead 类来实现带有领先效果的样式。

```
<h1 class="h1">这是一级标题</h1>
<h2 class="h2">这是二级标题</h2>
<h3 class="h3">这是三级标题</h3>
<h4 class="h4">这是四级标题</h4>
<h5 class="h5">这是五级标题</h5>
<h6 class="h6">这是六级标题</h6>

<p class="lead">这是一个带有领先效果的段落。</p>
```

**2、颜色**
Bootstrap 的颜色系统定义了一组颜色变量，用于在网站和应用程序中实现一致的颜色风格。例如，primary 类代表主色调，secondary 类代表次要颜色，success 类代表成功提示颜色等等。

```
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-success">成功按钮</button>
```

**3、表格**
Bootstrap 的表格样式可以让表格更加易读和美观。表格元素 table 可以使用 table 类来应用 Bootstrap 的样式，而 thead、tbody、tfoot 分别代表表头、表体、表脚。

```
<table class="table">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>¥5</td>
      <td>100</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>¥3</td>
      <td>200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">总计</td>
      <td>300</td>
    </tr>
  </tfoot>
```

**4、表单**
Bootstrap 的表单样式可以让表单更加美观和易读。输入框、下拉框、单选框、复选框等表单元素都可以应用 Bootstrap 的样式。

```
<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">我们不会分享您的邮箱地址。</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
```

**5、按钮**
Bootstrap 的按钮样式包括了多种类型的按钮，例如普通按钮、轮廓按钮、下拉按钮等等。开发者可以使用不同的类来应用不同类型的按钮样式。

```
<button type="button" class="btn btn-primary">普通按钮</button>
<button type="button" class="btn btn-outline-secondary">轮廓按钮</button>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    下拉按钮
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">选项一</a></li>
    <li><a class="dropdown-item" href="#">选项二</a></li>
    <li><a class="dropdown-item" href="#">选项三</a></li>
  </ul>
</div>
```

**二、常用组件**
除了基础样式，Bootstrap 还提供了许多常用的组件，例如导航栏、轮播图、模态框等等。下面我将介绍一些常用组件，并结合代码示例进行说明。

**1、导航栏**
Bootstrap 的导航栏样式可以让网站和应用程序的导航更加美观和易读。导航栏元素 nav 可以使用 navbar 类来应用 Bootstrap 的样式，而导航链接 a 可以使用 nav-link 类来实现链接的样式。

```
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">网站名称</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar>
		<ul class="navbar-nav">
			<li class="nav-item">
				<a class="nav-link active" aria-current="page" href="#">首页</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">产品</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">关于我们</a>
			</li>
		</ul>
	</div>
  </div>
</nav>
```

**2、轮播图**
Bootstrap 的轮播图组件可以实现多张图片轮播播放的效果，可以用于产品展示、图片集等场景。

```
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>第一张图片</h5>
        <p>这里是图片描述</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>第二张图片</h5>
        <p>这里是图片描述</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>第三张图片</h5>
        <p>这里是图片描述</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">上一张</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">下一张</span>
  </a>
</div>
```

**3、模态框**
Bootstrap 的模态框组件可以实现弹出对话框的效果，可以用于提示信息、登录框等场景。

```
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  弹出对话框
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
	<div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        这里是模态框内容。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
```

**4、进度条**
Bootstrap 的进度条组件可以用于展示任务的进度，比如上传文件、下载文件等。

```
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
```

**5、标签页**
Bootstrap 的标签页组件可以用于切换不同的内容。

```
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">个人资料</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">设置</a>
  </li>
</ul>
```

**6、分页**
Bootstrap 的分页组件可以用于分页展示内容，提高用户体验。

```
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
	<li class="page-item"><a class="page-link" href="#">1</a></li>
	<li class="page-item"><a class="page-link" href="#">2</a></li>
	<li class="page-item"><a class="page-link" href="#">3</a></li>
	<li class="page-item"><a class="page-link" href="#">下一页</a></li>
  </ul>
</nav>
```

**7、下拉菜单**
Bootstrap 的下拉菜单组件可以用于展示多个选项，提高用户体验。

```
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    下拉菜单
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">选项一</a></li>
    <li><a class="dropdown-item" href="#">选项二</a></li>
    <li><a class="dropdown-item" href="#">选项三</a></li>
  </ul>
</div>
```

**8、响应式工具**
Bootstrap 的响应式工具可以根据不同的屏幕大小设置不同的样式。

```
<div class="row">
  <div class="col-sm-4 col-md-3">1</div>
  <div class="col-sm-4 col-md-3">2</div>
  <div class="col-sm-4 col-md-3">3</div>
  <div class="col-sm-4 col-md-3">4</div>
</div>
```

在上面的示例中，col-sm-4 表示在小屏幕设备上占据 4 个格子，col-md-3 表示在中等屏幕设备上占据 3 个格子。在小屏幕设备上，四个列会在同一行上显示；而在中等屏幕设备上，四个列会分成两行，每行两个列。

Bootstrap 的响应式工具还包括了很多其他的类，例如 .d-none 表示在任何设备上都隐藏元素，.d-block 表示在任何设备上都显示元素，并将元素显示为块级元素，等等。

**小结**
Bootstrap 是一款非常优秀的前端框架，它提供了很多基础样式和组件，可以帮助开发者快速构建网站和 Web 应用程序。在实际开发中，使用 Bootstrap 可以大大提高开发效率和代码质量，同时也可以减少跨浏览器兼容性问题。当然，Bootstrap 也有一些缺点，例如在大型项目中可能会导致样式冲突，而且可能会导致页面加载速度变慢。总之，Bootstrap 是一个非常实用的前端框架，值得开发者掌握和使用。

该分类下的相关小册推荐：

暂无相关推荐.