[basic] BS3 - Input Sizing (BS입력창크기 = BS인풋크기)

BS Form Input 크기

 

Input 높이 설정 클래스

• .input-lg
• .input-sm

 

Input 너비 설정 클래스 (※ Grid 클래스 사용)

• .col-lg-*
• .col-md-*
• .col-sm-*
• .col-xs-*

 

BS Form Input Height (높이) 방법1 - .form-group 클래스 경우

Label과 Input 수직정렬

 

<form>

  <div class="form-group">

    <label for="a">작은 입력창</label>

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

  </div>

   <div class="form-group">

    <label for="b">기본 입력창</label>

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

  </div>

  <div class="form-group">

    <label for="c">큰 입력창</label>

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

  </div>

</form>

 

---

Label과 Input 수평정렬
※ .form-group-* 클래스 : 수평폼에서 레이블 및 폼 컨트롤 요소의 크기를 빠르게 설정.

 

<div class="container">

  <form class="form-horizontal">

    <div class="form-group form-group-lg">

      <label class="col-sm-2 control-label" for="a">form-group-lg</label>

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

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

      </div>

    </div>

    <div class="form-group form-group-sm">

      <label class="col-sm-2 control-label" for="b">form-group-sm</label>

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

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

      </div>

    </div>

  </form>

</div> 

BS Form Input Height (높이) 방법2 - .input-group 클래스 경우 

[큰 인풋창]

 

<div class="container">

  <form>

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

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

</div>

 

---

[작은 인풋창]

 

<div class="container">

  <form>

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

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

</div>

 

BS Form Input Width (너비)

 

• .col-xs-열개수 : 768px 미만 화면너비  - 초소형기기 (Extra Small Device : 스마트폰)
• .col-sm-열개수  :  768px 이상 화면너비 - 소형기기 (Small Device : 태블릿)
• .col-md-열개수 :   992px 이상 화면너비 - 중형기기 (Middle Device : 소형노트북)
• .col-lg-열개수 :  1200px 이상 화면너비 - 대형기기 (Large Device : 노트북 및 데스크톱)

 

그리드 자세히 보기

---

 

<div class="form-group row">

  <div class="col-xs-2">

    <label for="ex1">col-xs-2</label>

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

  </div>

  <div class="col-xs-3">

    <label for="ex2">col-xs-3</label>

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

  </div>

  <div class="col-xs-4">

    <label for="ex3">col-xs-4</label>

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

  </div>

</div>

 

---

 

[참고] .row 클래스

 

.row {

    margin-right: -15px;

    margin-left: -15px;

}

 

BS Input - Help Text (도움말)

 

<div class="form-group">

  <label for="pwd">비밀번호:</label>

  <input type="password" class="form-control" id="pwd" placeholder="password 입력">

  <span class="help-block">도움말 텍스트</span>

</div>

 

---

 

[참고]

 

.help-block {

    display: block;

    margin-top: 5px;

    margin-bottom: 10px;

    color: #737373;

}