最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】AdminLTE中添加简单表格及其中的进度条

AdminLTE crifan 1384浏览 0评论

折腾:

【记录】用AdminLTE实现报表的原型

期间,需要去实现,类似于:

的效果。

每个box中body是个简单的table

其中中间的还是个进度条,且最好加上数字的

左边是文字,右边是总数字

如果实在不好实现,暂时也可以去用:

https://adminlte.io/themes/AdminLTE/index2.html

https://adminlte.io/themes/AdminLTE/pages/UI/general.html

https://adminlte.io/themes/AdminLTE/pages/tables/simple.html

然后用代码:

<div class=”col-md-3″>
  <div class=”box box-primary”>
    <div class=”box-header with-border”>
      <h3 class=”box-title”>车型</h3>
      <div class=”box-tools pull-right”>
        <button type=”button” class=”btn btn-box-tool” data-widget=”collapse” data-toggle=”tooltip” title=”Collapse”>
        <i class=”fa fa-minus”></i></button>
      </div>
    </div>
    <div class=”box-body”>
      <div class=”box-body no-padding”>
        <table class=”table table-striped”>
          <tr>
            <td>新明锐</td>
            <td style=”width: 100px”>
              <div class=”progress progress-sm progress-striped active”>
                <div class=”progress-bar progress-bar-danger” style=”width: 45%”></div>
              </div>
            </td>
            <td><span class=”badge bg-red”>11000</span></td>
          </tr>
          <tr>
            <td>柯迪亚克</td>
            <td>
              <div class=”progress progress-sm progress-striped active”>
                <div class=”progress-bar progress-bar-success” style=”width: 300%”></div>
              </div>
            </td>
            <td><span class=”badge bg-green”>600</span></td>
          </tr>
          <tr>
            <td>晶锐</td>
            <td>
              <div class=”progress progress-sm progress-striped active”>
                <div class=”progress-bar progress-bar-yellow” style=”width: 65%”></div>
              </div>
            </td>
            <td><span class=”badge bg-yellow”>1200</span></td>
          </tr>
          <tr>
            <td>速派</td>
            <td>
              <div class=”progress progress-sm progress-striped active”>
                <div class=”progress-bar progress-bar-success” style=”width: 87%”></div>
              </div>
            </td>
            <td><span class=”badge bg-green”>4000</span></td>
          </tr>
          <tr>
            <td>野帝</td>
            <td>
              <div class=”progress progress-sm progress-striped active”>
                <div class=”progress-bar progress-bar-success” style=”width: 91%”></div>
              </div>
            </td>
            <td><span class=”badge bg-green”>1100</span></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

效果是:

接着希望实现给progress进度条,加上数字

【总结】

详细代码和效果,以及缺点,见帖子:

【已解决】给AdminLTE中进度条progress bar添加当前进度值

转载请注明:在路上 » 【已解决】AdminLTE中添加简单表格及其中的进度条

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
67 queries in 0.093 seconds, using 18.85MB memory