How to set the progress bar in bootstrap-Bootstrap Tutorial-php.cn

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">

Copy after login

(2) Add a

;

(3) Add a< in

div class="progress-bar">

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

Copy after login

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">



    默认的进度条

Copy after login

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>

Copy after login

How to set the progress bar in bootstrap

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>

Copy after login

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>

Copy after login

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!

Related labels：

bootstrap progress bar

source：php.cn

Previous article：How to implement paging technology in bootstrap Next article：How to implement adaptive height in bootstrap

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn