使用bootstrap实现的管理系统知识点总结

深藏阁楼爱情的钟 2022-05-07 08:16 224阅读 0赞

1、实现的效果图如下所示

![70][]

效果描述：随着屏幕的变大和缩小，线的长度也随着变长和变短，当处于最小屏幕时，线段消失，文字排成一列，如下图所示

![70 1][]

实现代码如下所示

<div class="row">
                <div class="col-md-11 col-md-offset-1">
                    <div class="mt-element-step col-md-12">
                        <div class="row step-line">
                            <div class="col-md-4 col-sm-12">
                                <div class="mt-step mt-step-num bg-white pull-left">1</div>
                                <div class="step-content clearfix">
                                    <h2 class="pull-left">个人信息复合</h2>
                                    <div class="line pull-left hidden-sm hidden-xs">
                                        <span></span>
                                    </div>
                                </div>
                                <p class="step-detail">处理描述有点多有点多不得不换行</p>
                            </div>
                            <div class="col-md-4  col-sm-12">
                                <div class="mt-step mt-step-num bg-white pull-left">2</div>
                                <div class="step-content clearfix">
                                    <h2 class="pull-left">工作小时统计</h2>
                                    <div class="line pull-left hidden-sm  hidden-xs">
                                        <span></span>
                                    </div>
                                </div>
                                <p class="step-detail">处理描述有点多有点多不得不换行</p>
                            </div>
                            <div class="col-md-4  col-sm-12 act">
                                <div class="mt-step mt-step-num bg-white pull-left">3</div>
                                <div class="step-content clearfix">
                                    <h2 class="pull-left">其他参与考评项目</h2>
                                </div>
                                <p class="step-detail">处理描述有点多有点多不得不换行</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

less代码如下所示：

.mt-element-step .step-line .mt-step-num{
      height:32px;
      width:32px;
      line-height:32px;
      color: rgba(0, 0, 0, 0.447058823529412);
      border-radius: 50%;
      text-align: center;
      border:1px solid rgba(0, 0, 0, 0.3);
    }
    .mt-element-step .step-line .step-wrap{
    position:relative;
      left:50%;
      transform:translateX(-50%);
    }
    
    .step-content h2{
      height:32px;
      vertical-align: top;
      line-height:40px;
      font-size: 16px;
      margin-left:4px;
      margin-right:4px;
      color: rgba(0, 0, 0, 0.447058823529412);
    }
    .step-content .line{
      margin-left:6px;
      height:32px;
      width:calc(100% - 150px);
    }
    .step-content .line span{
      display:inline-block;
      height:1px;
      width:100%;
      position:relative;
      top:50%;
      transform: translateY(-50%);
      background:rgba(0, 0, 0, 0.3);
    }
    .mt-step p{
      width:100%;
      word-break: break-all;
      line-height: 22px;
      font-size: 14px;
    
    }
    .step-detail{
      margin-left:40px;
      width:50%;
      color: rgba(0, 0, 0, 0.447058823529412);
    }
    .step-line .act .mt-step-num{
      background:dodgerblue ;
      color:#fff;
      border:none;
    }
    .step-line .act h2{
      font-size: 16px;
      color: rgba(0, 0, 0, 0.847058823529412);
    }
    .lawer-info{
      margin-top:12px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.847058823529412);
      .form-group{
        margin-bottom:32px;
        input{
          margin-left:-20px;
        padding-left:12px;
        color: rgba(0, 0, 0, 0.247058823529412);
        text-align: left;
        line-height: 22px;
        height:32px;
        border:1px solid rgba(217, 217, 217, 1);
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 1);
      }
      }
    
    
    }

2、实现如下表单的样式

![70 2][]

<div class="row">
            <div  class="form-group text-center">
                <label class="col-sm-3 control-label">所内及所外媒体投稿：</label>
                <div class="col-md-8  input-group">
                    <div class="input-group-addon"><span>未用</span></div>
                    <input type="text" class="form-control" placeholder="请输入">
                    <div class="input-group-addon"><span>篇</span></div>
                </div>
            </div>
        </div>

[70]: /images/20220506/332307a21bfc482da8ef2b7460b02f8b.png
[70 1]: /images/20220506/714e3753b4944165a8c8f8c5e6e9252b.png
[70 2]: /images/20220506/66624435a9a149d58a5d075611f4b886.png