Copyright © 1998-2023 maxiaoke.com All rights reserved.

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

小册名称：编程入门课：Bootstrap从入门到实战

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

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

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

  1. <h1 class="h1">这是一级标题</h1>
  2. <h2 class="h2">这是二级标题</h2>
  3. <h3 class="h3">这是三级标题</h3>
  4. <h4 class="h4">这是四级标题</h4>
  5. <h5 class="h5">这是五级标题</h5>
  6. <h6 class="h6">这是六级标题</h6>
  8. <p class="lead">这是一个带有领先效果的段落。</p>

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

  1. <button class="btn btn-primary">主要按钮</button>
  2. <button class="btn btn-secondary">次要按钮</button>
  3. <button class="btn btn-success">成功按钮</button>

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

  1. <table class="table">
  2.   <thead>
  3.     <tr>
  4.       <th>名称</th>
  5.       <th>价格</th>
  6.       <th>库存</th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td>苹果</td>
  12.       <td>¥5</td>
  13.       <td>100</td>
  14.     </tr>
  15.     <tr>
  16.       <td>香蕉</td>
  17.       <td>¥3</td>
  18.       <td>200</td>
  19.     </tr>
  20.   </tbody>
  21.   <tfoot>
  22.     <tr>
  23.       <td colspan="2">总计</td>
  24.       <td>300</td>
  25.     </tr>
  26.   </tfoot>

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

  1. <form>
  2.   <div class="mb-3">
  3.     <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
  4.     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  5.     <div id="emailHelp" class="form-text">我们不会分享您的邮箱地址。</div>
  6.   </div>
  7.   <div class="mb-3">
  8.     <label for="exampleInputPassword1" class="form-label">密码</label>
  9.     <input type="password" class="form-control" id="exampleInputPassword1">
  10.   </div>
  11.   <div class="mb-3 form-check">
  12.     <input type="checkbox" class="form-check-input" id="exampleCheck1">
  13.     <label class="form-check-label" for="exampleCheck1">记住我</label>
  14.   </div>
  15.   <button type="submit" class="btn btn-primary">提交</button>
  16. </form>

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

  1. <button type="button" class="btn btn-primary">普通按钮</button>
  2. <button type="button" class="btn btn-outline-secondary">轮廓按钮</button>
  4. <div class="dropdown">
  5.   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
  6.     下拉按钮
  7.   </button>
  8.   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  9.     <li><a class="dropdown-item" href="#">选项一</a></li>
  10.     <li><a class="dropdown-item" href="#">选项二</a></li>
  11.     <li><a class="dropdown-item" href="#">选项三</a></li>
  12.   </ul>
  13. </div>

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

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

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2.   <div class="container-fluid">
  3.     <a class="navbar-brand" href="#">网站名称</a>
  4.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  5.       <span class="navbar-toggler-icon"></span>
  6.     </button>
  7.     <div class="collapse navbar-collapse" id="navbar>
  8.         <ul class="navbar-nav">
  9.             <li class="nav-item">
  10.                 <a class="nav-link active" aria-current="page" href="#">首页</a>
  11.             </li>
  12.             <li class="nav-item">
  13.                 <a class="nav-link" href="#">产品</a>
  14.             </li>
  15.             <li class="nav-item">
  16.                 <a class="nav-link" href="#">关于我们</a>
  17.             </li>
  18.         </ul>
  19.     </div>
  20.   </div>
  21. </nav>

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

  1. <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  2.   <ol class="carousel-indicators">
  3.     <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
  4.     <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
  5.     <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
  6.   </ol>
  7.   <div class="carousel-inner">
  8.     <div class="carousel-item active">
  9.       <img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="...">
  10.       <div class="carousel-caption d-none d-md-block">
  11.         <h5>第一张图片</h5>
  12.         <p>这里是图片描述</p>
  13.       </div>
  14.     </div>
  15.     <div class="carousel-item">
  16.       <img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="...">
  17.       <div class="carousel-caption d-none d-md-block">
  18.         <h5>第二张图片</h5>
  19.         <p>这里是图片描述</p>
  20.       </div>
  21.     </div>
  22.     <div class="carousel-item">
  23.       <img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="...">
  24.       <div class="carousel-caption d-none d-md-block">
  25.         <h5>第三张图片</h5>
  26.         <p>这里是图片描述</p>
  27.       </div>
  28.     </div>
  29.   </div>
  30.   <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
  31.     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  32.     <span class="visually-hidden">上一张</span>
  33.   </a>
  34.   <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
  35.     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  36.     <span class="visually-hidden">下一张</span>
  37.   </a>
  38. </div>

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

  1. <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  2.   弹出对话框
  3. </button>
  4. <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  5.   <div class="modal-dialog">
  6.     <div class="modal-content">
  7.       <div class="modal-header">
  8.         <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
  9.         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  10.       </div>
  11.       <div class="modal-body">
  12.         这里是模态框内容。
  13.       </div>
  14.       <div class="modal-footer">
  15.         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
  16.         <button type="button" class="btn btn-primary">保存</button>
  17.       </div>
  18.     </div>
  19.   </div>
  20. </div>

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

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

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

  1. <ul class="nav nav-tabs">
  2.   <li class="nav-item">
  3.     <a class="nav-link active" aria-current="page" href="#">首页</a>
  4.   </li>
  5.   <li class="nav-item">
  6.     <a class="nav-link" href="#">个人资料</a>
  7.   </li>
  8.   <li class="nav-item">
  9.     <a class="nav-link" href="#">设置</a>
  10.   </li>
  11. </ul>

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

  1. <nav aria-label="Page navigation example">
  2.   <ul class="pagination">
  3.     <li class="page-item"><a class="page-link" href="#">上一页</a></li>
  4.     <li class="page-item"><a class="page-link" href="#">1</a></li>
  5.     <li class="page-item"><a class="page-link" href="#">2</a></li>
  6.     <li class="page-item"><a class="page-link" href="#">3</a></li>
  7.     <li class="page-item"><a class="page-link" href="#">下一页</a></li>
  8.   </ul>
  9. </nav>

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

  1. <div class="dropdown">
  2.   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
  3.     下拉菜单
  4.   </button>
  5.   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  6.     <li><a class="dropdown-item" href="#">选项一</a></li>
  7.     <li><a class="dropdown-item" href="#">选项二</a></li>
  8.     <li><a class="dropdown-item" href="#">选项三</a></li>
  9.   </ul>
  10. </div>

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

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

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

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

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

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

暂无相关推荐.