How to set the progress bar in bootstrap

1. The implementation method is as follows:

(1) Introduce bootap File:

 <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">

(2) Add a

;

(3) Add a div class="progress-bar">

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

aria-valuenow="40"——The current progress value of the progress bar.

aria-valuemax="100"——Maximum progress value.

aria-valuemin=“0”——Minimum progress value.

style="width:40%;"——Let the progress bar point to the 40% position.

The complete code is as follows:

    
    
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">



    
默认的进度条
    

        

        
    

The above is to implement a default progress bar, the background color is gray, and the progress color is blue. We can also add different progress bar based on the default progress bar. style to achieve colorful progress bars.

2. Specify color.

progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger

<div class="progress">
    <div class="progress-bar progress-bar-success"style="width: 90%;">
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width: 30%;">
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width: 20%;">
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width: 10%;">
    </div>
</div>

3. Striped shape, you can add progress-striped to the root div.

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width: 90%;">
    </div>
   </div>

4. Add active to the root div to achieve an animated progress bar.​

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

Recommended: bootstrap introductory tutorial

The above is the detailed content of How to set the progress bar in bootstrap. For more information, please follow other related articles on the PHP Chinese website!