Bootstrap中进度条样式详解

最简单的进度条需要几行代码?
在bootstrap中,只需要两句。

<div class="progress">
    <div class="progress-bar" style="width: 60%;">div>
div>

不考虑代码规范的话,,,

<div class="progress"><div class="progress-bar" style="width: 60%;">div>div>

实现效果如图所示:
进度条效果图
下面讲解进度条的语法和样式

  1. 默认进度条,就像上图,没有任何修饰的进度条。进度条宽度是父元素的宽度。
    先创建一个外层div,添加class属性progress,progress作用就是申明进度条的基本样式。
    然后创建一个内部div,添加class属性progress-bar,这个属性作用是关联上边的progress基本进度条样式。
    并添加属性width=60%,用于声明当前进度条位置是在60%。

  2. 常用的进度条颜色。默认的进度条颜色是蓝色,在bootstrap中,还有success、info、warning、danger表达不同意义的颜色样式。使用方法是在内部div的class属性中添加 progress-bar-success/info/warning/danger,注意,是添加,前边的progress-bar仍然需要保留。

    <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 60%;">div>
    div>
    <div class="progress">
            <div class="progress-bar progress-bar-info" style="width: 60%;">div>
    div>
    <div class="progress">
            <div class="progress-bar progress-bar-warning" style="width: 60%;">div>
    div>
    <div class="progress">
            <div class="progress-bar progress-bar-danger" style="width: 60%;">div>
    div>

Bootstrap中进度条样式详解_第1张图片
3. 添加条纹。在外层div的class属性添加progress-striped,可以添加条纹。添加active,可以添加最基础的动画效果。

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

条纹动画效果

进度条样式修改
对于进度条外框修改,可以在外层div中添加css样式来改变,对于进度条内部的修改,则是通过对内部div添加css样式来修改。

    <div class="col-md-6">
        <div class="progress progress-striped" style=" width: 100px; height: 100px;background-color:#d1e2f3;border: 5px groove red;">
            <div class="progress-bar" style="width: 40%; border:2px solid white;">div>
            <div class="progress-bar-success" style="width: 40%">div>         
        div>
    div>

还可以通过多个内层div放入一个外层div的方式,形成进度条堆叠效果。(类似手机内存空间的条形示意图,不同颜色代表不同类型文件)

    <div class="col-md-6">
        <div class="progress progress-striped active" style="height: 10px;">
            <div class="progress-bar progress-bar-info" style="width: 20%">div>
            <div class="progress-bar progress-bar-warning" style="width: 40%">div>
            <div class="progress-bar progress-bar-danger" style="width: 10%">div>    
        div>
    div>

不同进度条样式
本人的坚果Pro2手机的手机内存空间进度条:
Bootstrap中进度条样式详解_第2张图片
制作类似进度条:

    <div class="progress" style="width: 400px;height:30px;background-color: #dfdfdf;">
        <div class="progress-bar" style="width: 1%;background-color: #a0cf3f">div>
        <div class="progress-bar" style="width: 10%;background-color: #fabf3a">div>
        <div class="progress-bar" style="width: 1%;background-color: #e76360">div>
        <div class="progress-bar" style="width: 1%;background-color: #bb5fef">div>
        <div class="progress-bar" style="width: 70%;background-color: #c2c2c2">div> 
    div>

效果图:(渐变效果可以以后加入)
Bootstrap中进度条样式详解_第3张图片

你可能感兴趣的:(前端)