bootstrap插件进度条progress以及分页pagination

Myth丶恋晨 2021-09-15 01:42 508阅读 0赞

进度条可以显示用户任务的完成过程。

创建一个基本的进度条的步骤如下：

*  添加一个带有 **.progress** 类的 <div>。
 *  接着，在上面的 <div> 内，添加一个带有 class **.progress-bar** 的空的 <div>。
 *  添加一个带有百分比表示的宽度的 style 属性，例如** style="width:70%"** 表示进度条在 70% 的位置

<div class="container">  
  <h2>基本进度条</h2>  
  <p>要创建一个默认的进度条，可以在容器元素上添加 .progress 类，在子元素上添加 progress-bar 类，并设置进度条进度情况：:</p>  
  <div class="progress">  
    <div class="progress-bar" style="width:50%">50%</div>  
  </div>

</div>

![Image 1][]

上面的代码可以加上进度条的高度height设置进度条的大小

进度条高度默认为 16px。我们可以使用 CSS 的 `height` 属性来修改他：

<divclass="progress"><divclass="progress-bar"style="width:40%;height:20px"></div></div>

![Image 1][]

progress-bar是默认的颜色    蓝色

<div class="container">  
  <h2>多种颜色的进度条</h2>  
  <p>Bootstrap4 提供了以下几种进度条颜色:</p>   
  <div class="progress">  
    <div class="progress-bar" style="width:30%"></div>  
  </div>  
  <br>  
  <div class="progress">  
    <div class="progress-bar bg-success" style="width:40%"></div>  
  </div>  
  <br>  
  <div class="progress">  
    <div class="progress-bar bg-info" style="width:50%"></div>  
  </div>  
  <br>  
  <div class="progress">  
    <div class="progress-bar bg-warning" style="width:60%"></div>  
  </div>  
  <br>  
  <div class="progress">  
    <div class="progress-bar bg-danger" style="width:70%"></div>  
  </div>

</div>

![Image 1][]

条纹进度条：progress-bar-striped

<br>

![Image 1][]

动画进度条：使用 `.progress-bar-animated` 类可以为进度条添加动画：

< div  class = " progress-bar progress-bar-striped progress-bar-animated "  style = " width: 40% " > </ div >

<div class="container">  
  <h2>混合色彩进度条</h2>  
  <p>进度条可以设置多种颜色:</p>   
  <div class="progress">  
    <div class="progress-bar bg-success" style="width:40%">  
      Free Space  
    </div>  
    <div class="progress-bar bg-warning" style="width:10%">  
      Warning  
    </div>  
    <div class="progress-bar bg-danger" style="width:20%">  
      Danger  
    </div>  
  </div>

</div>

![Image 1][]

\--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

网页开发过程，如果碰到内容过多，一般都会做分页处理。

Bootstrap 4 可以很简单的实现分页效果。

要创建一个基本的分页可以在 **<ul>** 元素上添加 **.pagination** 类。然后在 **<li>** 元素上添加 **.page-item** 类：

<div class="container">  
  <h2>分页</h2>  
  <p>要创建一个基本的分页可以在 ul 元素上添加 .pagination 类。然后在 li 元素上添加 .page-item 类：</p>                    
  <ul class="pagination">  
    <li class="page-item"><a  href="\#">Previous</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="\#">Next</a></li>  
  </ul>

</div>

![Image 1][]

##     ##

## 当前页页码状态 ##

当前页可以使用 **.active** 类来高亮显示：

<div class="container">  
  <h2>当前页页码状态</h2>  
  <p>当前页可以使用 .active 类来高亮显示：</p>                    
  <ul class="pagination">  
    <li class="page-item"><a class="page-link" href="\#">Previous</a></li>  
    <li class="page-item"><a class="page-link" href="\#">1</a></li>  
    <li class="page-item active"><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="\#">Next</a></li>  
  </ul>

</div

![Image 1][]

## 不可点击的分页链接 ##

**disabled** 类可以设置分页链接不可点击:

<ulclass="pagination">

<liclass="page-item disabled"><aclass="page-link"href="\#">Previous</a></li>

<liclass="page-item"><aclass="page-link"href="\#">1</a></li><

liclass="page-item"><aclass="page-link"href="\#">2</a></li>

<liclass="page-item"><aclass="page-link"href="\#">3</a></li>

<liclass="page-item"><aclass="page-link"href="\#">Next</a></li></ul>

![Image 1][]

##  ##

## 分页显示大小 ##

可以将分页条目设置为不同的大小。

**.pagination-lg** 类设置大字体的分页条目，**.pagination-sm** 类设置小字体的分页条目:

<div class="container">  
  <h2>分页显示大小</h2>  
  <p>.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:</p>   <div class="container">  
  <h2>分页显示大小</h2>  
  <p>.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:</p>                    
  <ul class="pagination pagination-lg">  
    <li class="page-item"><a class="page-link" href="\#">Previous</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="\#">Next</a></li>  
  </ul>  
     
  <ul class="pagination pagination-sm">  
    <li class="page-item"><a class="page-link" href="\#">Previous</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="\#">Next</a></li>  
  </ul>  
</div>

![Image 1][]

## 面包屑导航 ##

**.breadcrumb** 和 **.breadcrumb-item** 类用于设置面包屑导航：

<div class="container">  
  <h2>面包屑导航</h2>  
  <p>.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航：</p>                    
  <ul class="breadcrumb">  
    <li class="breadcrumb-item"><a href="\#">Photos</a></li>  
    <li class="breadcrumb-item"><a href="\#">Summer 2017</a></li>  
    <li class="breadcrumb-item"><a href="\#">Italy</a></li>  
    <li class="breadcrumb-item active">Rome</li>  
  </ul>  
</div>

## ![Image 1][]    ##

[Image 1]: