Bootstrap 进度条和 Jumbotron

本文介绍了 Bootstrap 中的进度条和 Jumbotron 组件，这些组件可以帮助程序员在网页中展示进度和突出重要内容。

进度条

Bootstrap 提供了一个简单易用的进度条组件，可以用来展示进度或加载状态。

基本用法

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

上述代码会创建一个进度条，宽度为 60%。通过调整 style="width: 60%;" 的值，可以改变进度条的宽度。

不同样式的进度条

Bootstrap 还提供了不同样式的进度条，包括有颜色的条纹效果和动画效果。

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

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

上述代码分别创建了一个带有条纹效果的进度条和一个带有动画效果的进度条。

Jumbotron

Jumbotron 是 Bootstrap 中的一个组件，用来突出显示重要的内容或信息。

基本用法

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple jumbotron component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

上述代码创建了一个基本的 Jumbotron 组件，包括一个标题、一段引导文字、一条分割线和一个按钮。

自定义样式

通过调整 Jumbotron 组件的样式类，可以改变其外观和布局。

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a fluid jumbotron that takes up the full width of its parent container.</p>
  </div>
</div>

<div class="jumbotron">
  <div class="container">
    <h1 class="display-4">Narrow jumbotron</h1>
    <p class="lead">This is a narrow jumbotron with additional padding and horizontal centering.</p>
  </div>
</div>

上述代码分别创建了一个占据父容器整个宽度的 Jumbotron 和一个较窄的 Jumbotron，后者具有额外的内边距和水平居中。

以上就是 Bootstrap 中进度条和 Jumbotron 的基本使用方法和示例。你可以根据自己的需求调整样式和布局，让网页更加吸引人。详细的文档可以参考 Bootstrap 官方文档。