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

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

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

• 添加一个带有 .progress 类的
  。
• 接着，在上面的
  内，添加一个带有 class .progress-bar 的空的

  。
• 添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置

 

基本进度条

 

要创建一个默认的进度条，可以在容器元素上添加 .progress 类，在子元素上添加 progress-bar 类，并设置进度条进度情况：:

 

   

50%

 

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

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

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

progress-bar是默认的颜色    蓝色

 

多种颜色的进度条

 

Bootstrap4 提供了以下几种进度条颜色:

 
 

   

 

 

 

   

 

 

 

   

 

 

 

   

 

 

 

   

 

条纹进度条：progress-bar-striped

   

 

 

   

 

 

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

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

 

混合色彩进度条

 

进度条可以设置多种颜色:

 
 

   

      Free Space
   

   

      Warning
   

   

      Danger
   

 

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

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

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

要创建一个基本的分页可以在 

 元素上添加 .pagination 类。然后在 
•  元素上添加 .page-item 类：
  
   

  分页

  
   

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

                    
   

  
     
  • Previous
  
     
  • 1
  
     
  • 2
  
     
  • 3
  
     
  • Next
  
   

  
  

  
  

  
  

  当前页页码状态

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

  
   

  当前页页码状态

  
   

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

                    
   

  
     
  • Previous
  
     
  • 1
  
     
  • 2
  
     
  • 3
  
     
  • Next
  
   

  
  

  
  

  
  

  
  

  不可点击的分页链接

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

  <ul class="pagination">

  <li class="page-item disabled"><a class="page-link" href="#">Previousa>li>

  <li class="page-item"><a class="page-link" href="#">1a>li> <

  li class="page-item"><a class="page-link" href="#">2a>li>

  <li class="page-item"><a class="page-link" href="#">3a>li>

  <li class="page-item"><a class="page-link" href="#">Nexta>li>ul>
  

  
  

  
  

  分页显示大小

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

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

  
   

  分页显示大小

  
   

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

     

  
   

  分页显示大小

  
   

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

                    
   

  
     
  • Previous
  
     
  • 1
  
     
  • 2
  
     
  • 3
  
     
  • Next
  
   

  
     
   

  
     
  • Previous
  
     
  • 1
  
     
  • 2
  
     
  • 3
  
     
  • Next
  
   

  
  

  
  

  
  

  
  

  
  

  面包屑导航

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

  
  

  
   

  面包屑导航

  
   

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

                    
   

  
     
  • Photos
  
     
  • Summer 2017
  
     
  • Italy
  
     
  • Rome