使用bootstrap實現的天達共和管理系統知識點總結
阿新 • • 發佈:2018-12-15
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>