• Q&A
  • 회원가입
  • 로그인

[basic] BS3 - Input2 (BS입력창2 = BS인풋2) 일반텍스트 + Input Group(BS인풋그룹) + 아이콘추가 + 폼제어상태


Static Control (정적 제어요소 = 일반텍스트 추가)

 

<form class="form-horizontal">

  <div class="form-group">

    <label class="control-label col-sm-2" for="email">Email:</label>

    <div class="col-sm-10">

      <p class="form-control-static"></p>

    </div>

  </div>

</form>

 

예제보기


Input Group (인풋그룹) + 입력창 앞 아이콘 + 입력창 뒤 아이콘

Input 에 아이콘 배치 : .input-group-addon 클래스 이용. 

 

<form>

  <div class="input-group">

    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

    <input id="email" type="text" class="form-control" name="email" placeholder="Email">

  </div>

  <div class="input-group">

    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>

    <input id="password" type="password" class="form-control" name="password" placeholder="Password">

  </div>

  <div class="input-group">

    <span class="input-group-addon">Text</span>

    <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">

  </div>

</form>

 

예제보기 


Input 에 아이콘 배치 : .input-group-btn 클래스 이용.

 

<form>

  <div class="input-group">

    <input type="text" class="form-control" placeholder="Search">

    <div class="input-group-btn">

      <button class="btn btn-default" type="submit">

        <i class="glyphicon glyphicon-search"></i>

      </button>

    </div>

  </div>

</form>

 

예제보기 

 

BS Form Control State (폼제어상태) - 수평폼 경우

 

<form class="form-horizontal">

  <div class="form-group">

    <label class="col-sm-2 control-label">Focused</label>

    <div class="col-sm-10">

      <input class="form-control" id="focusedInput" type="text" value="Click to focus">

    </div>

  </div>

  <div class="form-group">

    <label for="disabledInput" class="col-sm-2 control-label">Disabled</label>

    <div class="col-sm-10">

      <input class="form-control" id="disabledInput" type="text" disabled>

    </div>

  </div>

  <fieldset disabled>

    <div class="form-group">

      <label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>

      <div class="col-sm-10">

        <input type="text" id="disabledTextInput" class="form-control">

      </div>

    </div>

    <div class="form-group">

      <label for="disabledSelect" class="col-sm-2 control-label"></label>

      <div class="col-sm-10">

        <select id="disabledSelect" class="form-control">

          <option>Disabled select</option>

        </select>

      </div>

    </div>

  </fieldset>

  <div class="form-group has-success has-feedback">

    <label class="col-sm-2 control-label" for="inputSuccess">

    Input with success and icon</label>

    <div class="col-sm-10">

      <input type="text" class="form-control" id="inputSuccess">

      <span class="glyphicon glyphicon-ok form-control-feedback"></span>

    </div>

  </div>

  <div class="form-group has-warning has-feedback">

    <label class="col-sm-2 control-label" for="inputWarning">

    Input with warning and icon</label>

    <div class="col-sm-10">

      <input type="text" class="form-control" id="inputWarning">

      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>

    </div>

  </div>

  <div class="form-group has-error has-feedback">

    <label class="col-sm-2 control-label" for="inputError">

    Input with error and icon</label>

    <div class="col-sm-10">

      <input type="text" class="form-control" id="inputError">

      <span class="glyphicon glyphicon-remove form-control-feedback"></span>

    </div>

  </div>

</form>

 

예제보기 

 

BS Form Control State (폼제어상태) - 인라인폼 경우

 

<form class="form-inline">

  <div class="form-group">

    <label for="focusedInput">Focused</label>

    <input class="form-control" id="focusedInput" type="text">

  </div>

  <div class="form-group">

    <label for="disabledInput">Disabled</label>

    <input class="form-control" id="disabledInput" type="text" disabled>

  </div>

  <div class="form-group has-success has-feedback">

    <label for="inputSuccess2">Input with success</label>

    <input type="text" class="form-control" id="inputSuccess2">

    <span class="glyphicon glyphicon-ok form-control-feedback"></span>

  </div>

  <div class="form-group has-warning has-feedback">

    <label for="inputWarning2">Input with warning</label>

    <input type="text" class="form-control" id="inputWarning2">

    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>

  </div>

  <div class="form-group has-error has-feedback">

    <label for="inputError2">Input with error</label>

    <input type="text" class="form-control" id="inputError2">

    <span class="glyphicon glyphicon-remove form-control-feedback"></span>

  </div>

</form>

 

예제보기

 

 

[참고]

 

.form-horizontal .form-group {

    margin-right: -15px;

    margin-left: -15px;

}

 

.has-feedback {

    position: relative;

}

 

.input-group {

    position: relative;

    display: table;

    border-collapse: separate;

}

 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012