Bootstrap中进度条的使用

zoukankan html css js c++ java

Bootstrap中进度条的使用

<div class="container">
        <h3> 普通的进度条</h3>
        <div class="progress">
            <div class="progress-bar" style=" 40%" role="progress-bar" aria-valuesnow="60"
                aria-valuesmin="0" aria-vluesmax="100">
                <span class="sr-only">40% compelete</span>
            </div>
        </div>
    </div>

    <div class="container">
        <h3>交替的进度条</h3>
        <div class="progress">
            <div class="progress-bar progress-bar-danger" role="progreess-danger" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 60%">
                <span class="sr-only">60% compelete</span>
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-info" role="progreess-info" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 50%">
                <span class="sr-only">50% compelete</span>
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-success" role="progreess-success" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 40%">
                <span class="sr-only">40% compelete</span>
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progreess-warning" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 30%">
                <span class="sr-only">30% compelete</span>
            </div>
        </div>
    </div>

    <div class="container">
        <h3>条纹的进度条</h3>
        <div class="progress progress-striped">
            <div class="progress-bar progress-bar-danger" role="progreess-danger" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 60%">
                <span class="sr-only">60% compelete</span>
            </div>
        </div>
        <div class="progress progress-striped">
            <div class="progress-bar progress-bar-info" role="progreess-info" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 50%">
                <span class="sr-only">50% compelete</span>
            </div>
        </div>
        <div class="progress progress-striped">
            <div class="progress-bar progress-bar-success" role="progreess-success" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 40%">
                <span class="sr-only">40% compelete</span>
            </div>
        </div>
        <div class="progress progress-striped">
            <div class="progress-bar progress-bar-warning" role="progreess-warning" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 30%">
                <span class="sr-only">30% compelete</span>
            </div>
        </div>
    </div>

    <div class="container">
        <h3> 动画的进度条</h3>
        <div class="progress progress-striped active">
            <div class="progress-bar progress-bar-danger" role="progreess-danger" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 60%">
                <span class="sr-only">60% compelete</span>
            </div>
        </div>
        <div class="progress progress-striped active">
            <div class="progress-bar progress-bar-info" role="progreess-info" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 50%">
                <span class="sr-only">50% compelete</span>
            </div>
        </div>
        <div class="progress progress-striped active">
            <div class="progress-bar progress-bar-success" role="progreess-success" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 40%">
                <span class="sr-only">40% compelete</span>
            </div>
        </div>
        <div class="progress progress-striped active">
            <div class="progress-bar progress-bar-warning" role="progreess-warning" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 30%">
                <span class="sr-only">30% compelete</span>
            </div>
        </div>
    </div>

    <div class="container">
        <h3>堆叠的进度条</h3>
        <div class="progress">
            <div class="progress-bar progress-bar-danger" role="progreess-danger" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 60%">
                <span class="sr-only">60% compelete</span>
            </div>
            <div class="progress-bar progress-bar-info" role="progreess-info" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 5%">
                <span class="sr-only">5% compelete</span>
            </div>
            <div class="progress-bar progress-bar-success" role="progreess-success" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 10%">
                <span class="sr-only">10% compelete</span>
            </div>
            <div class="progress-bar progress-bar-warning" role="progreess-warning" aria-valuenow="60"
                aria-valuemin="0" aria-valuesmax="100" style=" 20%">
                <span class="sr-only">20% compelete</span>
            </div>
        </div>
    </div>

效果图如下：

查看全文

相关阅读:
MYSQL57密码策略修改
 dataSource' defined in class path resource [org/springframework/boot/autocon
ubuntu14.04 red5
hadoop中修改端口号
 FATAL org.apache.hadoop.hdfs.server.datanode.DataNode: Initialization failed for Block pool <registering> (Datanode Uuid unassigned) service to controller/192.168.1.183:9000. Exiting. java.io.IOExcep
hadoop ssh 问题WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
openstack安装dashboard后访问horizon出错 End of script output before headers: django.wsgi
sqlalchemy.exc.OperationalError: (sqlite3.OperationalError) Cannot add a NOT NULL column with default value NULL [SQL: u'ALTER TABLE address_scopes ADD COLUMN ip_version INTEGER NOT NULL']
mysql ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2 "No such file or directory")
OpenStack安装keyston 错误BError: (pymysql.err.InternalError) (1071, u‘Specified key was too long; max key length is 767 bytes‘) [SQL: u‘ CREATE TABLE migrate_ver

原文地址：https://www.cnblogs.com/professional-NET/p/4768114.html