bootstrap中form-group、controls、control-label、form-control用法实例

1、html

<form class="form-inline search-box" role="form" name="logFilter_form">
                <div class="operate-wrap">
                    <div class="row-fluid">
                        <div class="form-group span12">
                            <label  class="control-label">{{'zeus.systemLog.operationLog.resourceName'| translate}}</label>
                            <div class="controls">
                                <input type="text" class="form-control resourceName" ng-model="filterData.resource"/>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="form-group span6">
                            <label  class="control-label">{{'zeus.systemLog.operationLog.event_type'| translate}}</label>
                            <div class="controls " >
                                <select2 ng-model="filterData.event_type"
                                         s2-options="item.name as item.title for item in event_type" >
                                </select2>
                            </div>
                        </div>
                        <div class="form-group span6">
                            <label  class="control-label">{{'zeus.systemLog.operationLog.event_status'| translate}}</label>
                            <div class="controls ">
                                <select2 ng-model="filterData.result"
                                         s2-options="item.name as item.title for item in result">
                                </select2>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="form-group time-picker start span6">
                            <label  class="control-label">开始时间</label>
                            <div class="controls">
                                <div class="input-group date form_date col-md-5">
                                    <input class="form-control fromTime" name="startTime" autocomplete="off" type="text" size="16"
                                           get-timepicker  ng-model="filterData.stime"
                                           ng-pattern="/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/"
                                           placeholder="{{'zeus.systemLog.click2choseStartTime'| translate}}">
                                    <span class="input-group-addon">
                                      <span class="glyphicon glyphicon-remove fa fa-remove"></span>
                                    </span>
                                    <span class="input-group-addon calendar-cont" get-timepicker>
                                      <span class="glyphicon glyphicon-calendar fa fa-calendar"></span>
                                    </span>
                                    <div class="error" ng-messages="logFilter_form.startTime.$error">
                                        <div ng-message="pattern">{{'zeus.errors.systemLog.timeFormatError'| translate}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group time-picker end span6">
                            <label  class="control-label">结束时间</label>
                            <div class="controls">
                                <div class="input-group date form_date col-md-5">
                                    <input class="form-control endTime" name="endTime" type="text" size="16" autocomplete="off"
                                           get-timepicker  ng-model="filterData.etime"
                                           ng-pattern="/^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])-([0][1-9]|[1][0-2])-([0-2][1-9]|[3][0-1])\s([0-1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9])$/"
                                           placeholder="{{'zeus.systemLog.click2choseEndTime'| translate}}">
                                    <span class="input-group-addon">
                                      <span class="glyphicon glyphicon-remove fa fa-remove"></span>
                                    </span>
                                    <span class="input-group-addon calendar-cont" get-timepicker>
                                      <span class="glyphicon glyphicon-calendar fa fa-calendar"></span>
                                    </span>
                                    <div class="error" ng-messages="logFilter_form.endTime.$error">
                                        <div ng-message="pattern">{{'zeus.errors.systemLog.timeFormatError'| translate}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class=" btn-operate">
                        <div class="form-group" >
                            <button type="submit" class="btn btn-default" ng-click="queryFun()" ng-disabled="logFilter_form.$invalid">{{'zeus.systemLog.query'| translate}}</button>
                        </div>
                    </div>
                </div>

            </form>

 2、css

.operate-wrap{
        .form-group{
          display: block;
          padding:0 5px;
          margin-bottom:8px;
          input{
            border: 1px solid #dce3e5;
            border-radius: 7px;
          }
          .control-label{
            float:left;
            width:80px;
            text-align:right;
            line-height:40px;
            margin-bottom:0;
          }
          .controls{
            margin-left:90px;
            display:block;
            .form-control{
              width:100%;
              max-width:none;
              box-sizing:border-box;
              height:40px;
            }
            .select2-container{
              width:100%;
              a{
                border: 1px solid #dce3e5;
                height: 35px;
                line-height: 35px;
              }
              span{
                &.select2-arrow{
                  border: 1px solid #ccc;
                }
              }

            }
          }
          .input-group{
            .input-group-addon{
                display: inline-block;
                border: 1px solid #dce3e5;
                padding:0 5px;
                border-left: none;
                height: 38px;
                line-height: 34px;
                margin-left: -4px;
                color: #43b49e;
            }
            .calendar-cont{
               border-bottom-right-radius: 5px;
               border-top-right-radius: 5px;
             }

          }
          .form_date{
            position: relative;
            .input-group-addon{
              position:absolute;
              right:30px;
              top:0;
              padding:0;
              width:30px;
              text-align:center;
            }
            .calendar-cont{
              position:absolute;
              right:0;
              top:0;
            }
          }
        }
        .btn-operate{
          margin-left:90px;
          .btn{
            position: static;
            background: #43b49e;
            font-size: 16px;
            color: #fff;
            border-radius: 8px;
            border: 1px solid #43b49e;
            padding: 0 40px;
            width:auto
          }
        }
      }