正文

掌握Bootstrap4，轻松打造实用网页：50个实战CSS案例解析

/0 浏览量
0825

Bootstrap 4 是一个流行的前端框架，它提供了一套响应式、移动优先的 CSS 框架，可以帮助开发者快速构建美观、一致性的网页。通过学习 Bootstrap 4 的 CSS 案例解析，你可以轻松掌握其用法，并应用于实际项目中。本文将为你详细介绍 50 个实战 CSS 案例解析，让你从入门到精通。

案例一：响应式导航栏

Bootstrap 4 的导航栏组件支持响应式布局，可以根据屏幕大小自动调整。以下是一个简单的响应式导航栏示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></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>
</nav>

案例二：卡片布局

Bootstrap 4 的卡片组件可以方便地构建卡片布局，适用于展示信息、图片、列表等。以下是一个简单的卡片布局示例：

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">卡片标题</h5>
      <p class="card-text">这是一些关于卡片内容的描述。</p>
      <a href="#" class="btn btn-primary">了解更多</a>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">卡片标题</h5>
      <p class="card-text">这是一些关于卡片内容的描述。</p>
      <a href="#" class="btn btn-primary">了解更多</a>
    </div>
  </div>
</div>

案例三：轮播图

Bootstrap 4 的轮播图组件可以方便地实现图片轮播效果。以下是一个简单的轮播图示例：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

案例四：表单组件

Bootstrap 4 提供了一系列表单组件，可以帮助你快速构建美观、易用的表单。以下是一个简单的表单示例：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱地址">
    <small id="emailHelp" class="form-text text-muted">我们会为您保护隐私。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="check1">
    <label class="form-check-label" for="check1">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

案例五：分页组件

Bootstrap 4 的分页组件可以帮助你实现分页功能。以下是一个简单的分页示例：

<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">上一页</span>
    </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>

案例六：下拉菜单

Bootstrap 4 的下拉菜单组件可以帮助你构建下拉菜单。以下是一个简单的下拉菜单示例：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">选项 1</a>
    <a class="dropdown-item" href="#">选项 2</a>
    <a class="dropdown-item" href="#">选项 3</a>
  </div>
</div>

案例七：模态框

Bootstrap 4 的模态框组件可以帮助你实现模态框功能。以下是一个简单的模态框示例：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  打开模态框
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        模态框内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

案例八：折叠面板

Bootstrap 4 的折叠面板组件可以帮助你实现折叠效果。以下是一个简单的折叠面板示例：

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    折叠面板内容
  </div>
</div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  点击折叠
</button>

案例九：警告框

Bootstrap 4 的警告框组件可以帮助你实现警告提示效果。以下是一个简单的警告框示例：

<div class="alert alert-success" role="alert">
  操作成功！
</div>
<div class="alert alert-danger" role="alert">
  操作失败！
</div>
<div class="alert alert-warning" role="alert">
  注意：操作可能存在风险！
</div>
<div class="alert alert-info" role="alert">
  信息提示：请查看您的邮箱。
</div>

案例十：进度条

Bootstrap 4 的进度条组件可以帮助你实现进度展示效果。以下是一个简单的进度条示例：

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>

案例十一：按钮

Bootstrap 4 的按钮组件可以帮助你实现各种按钮效果。以下是一个简单的按钮示例：

<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-light">浅色按钮</button>
<button type="button" class="btn btn-dark">深色按钮</button>
<button type="button" class="btn btn-link">链接按钮</button>

案例十二：输入框

Bootstrap 4 的输入框组件可以帮助你实现各种输入框效果。以下是一个简单的输入框示例：

<div class="form-group">
  <label for="exampleInputEmail1">邮箱地址</label>
  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱地址">
  <small id="emailHelp" class="form-text text-muted">我们会为您保护隐私。</small>
</div>
<div class="form-group">
  <label for="exampleInputPassword1">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
</div>
<div class="form-group">
  <label for="exampleInputFile">文件输入</label>
  <input type="file" class="form-control-file" id="exampleInputFile">
  <small class="form-text text-muted">选择文件上传。</small>
</div>
<div class="form-group">
  <label for="exampleTextarea">文本域</label>
  <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>

案例十三：自定义样式

Bootstrap 4 允许你自定义样式，以适应你的项目需求。以下是一个简单的自定义样式示例：

.my-custom-class {
  color: red;
  font-size: 16px;
  background-color: yellow;
}

<div class="my-custom-class">这是一个自定义样式的元素。</div>

案例十四：响应式表格

Bootstrap 4 的表格组件支持响应式布局，可以根据屏幕大小自动调整。以下是一个简单的响应式表格示例：

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th scope="col">编号</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>李四</td>
      <td>30</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>王五</td>
      <td>35</td>
    </tr>
  </tbody>
</table>

案例十五：缩略图

Bootstrap 4 的缩略图组件可以帮助你实现图片缩略图效果。以下是一个简单的缩略图示例：

<div class="row">
  <div class="col-6 col-md-4">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  <div class="col-6 col-md-4">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  <div class="col-6 col-md-4">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
</div>

案例十六：标签

Bootstrap 4 的标签组件可以帮助你实现标签效果。以下是一个简单的标签示例：

<span class="badge badge-primary">标签 1</span>
<span class="badge badge-secondary">标签 2</span>
<span class="badge badge-success">标签 3</span>
<span class="badge badge-danger">标签 4</span>
<span class="badge badge-warning">标签 5</span>
<span class="badge badge-info">标签 6</span>
<span class="badge badge-light">标签 7</span>
<span class="badge badge-dark">标签 8</span>

案例十七：面包屑导航

Bootstrap 4 的面包屑导航组件可以帮助你实现导航效果。以下是一个简单的面包屑导航示例：

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">首页</a></li>
  <li class="breadcrumb-item active" aria-current="page">当前位置</li>
</ol>

案例十八：分页器

Bootstrap 4 的分页器组件可以帮助你实现分页功能。以下是一个简单的分页器示例：

<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">上一页</span>
    </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>

案例十九：垂直堆叠的表单

Bootstrap 4 允许你将表单元素垂直堆叠。以下是一个简单的垂直堆叠表单示例：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱地址">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <div class="form-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check1">
      <label class="form-check-label" for="check1">记住我</label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

案例二十：水平堆叠的表单

Bootstrap 4 允许你将表单元素水平堆叠。以下是一个简单的水平堆叠表单示例：

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱地址">
  </div>
  <div class="form-group mx-sm-3">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check1">
    <label class="form-check-label" for="check1">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

案例二十一：响应式工具栏

Bootstrap 4 的工具栏组件支持响应式布局，可以根据屏幕大小自动调整。以下是一个简单的响应式工具栏示例：

”`html 

<div class="col-sm-12 col-md-8">
  <h1>标题</h1>
</div>
<div class="col-sm-12 col-md-4">
  <p>副标题</p>
</div>

“

-- 展开阅读全文 --