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

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、实现如下表单的样式

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