bootstrap [CSS]폼

기본폼

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">이메일 주소</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">암호</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">파일 업로드</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">여기에 블록레벨 도움말 예제</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 입력을 기억합니다
    </label>
  </div>
  <button type="submit" class="btn btn-default">제출</button>
</form>

주의점 

Form group 과 input group 을 직접 같이 쓰면 안됩니다. 대신, input group 을 form group 내에 넣도록 하세요.

인라인 폼

한줄에 폼을 표시하는 것입니다.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

주의점

1. 너비를 자동으로 맞추기게 되어 있습니다. with:100% 와 width:auto; 로 초기화하여 사용합니다. 사용하는 화면에 따라 맞춤너비가 필요할수도 있습니다. 

2. 항상 라벨을 추가해야합니다. 그렇지 않으면 폼에 문제가 생길수도 있습니다.  하지만 라벨을 숨기는 방법은 있습니다. 

.sr-only  클래스에 sr-only 을 주면 라벨을 숨길수 있습니다.  그리고 placeholder= 이외의 스크린 리더는 권장하지 않습니다. 

수평 폼 

<form class="form-horizontal">

  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

폼(<form> 이 아니어도 됨)에 .form-horizontal 를 추가하여 라벨들과 폼콘트롤들의 그룹들을 정렬하기 위해 부트스트랩의 미리정의된 그리드 클래스들을 사용하세요. 그리드행 역할은 .form-group 가 하기 때문에 .row 는 필요가 없습니다.

하다보니 계속 복붙만 하게되는것 같습니다. 

CSS에 대해서는 여기까지만 하고 

http://bootstrapk.com/css/ 에서 필요한 부분만 찾아서 사용하는 편이 더 효율적이라고 생각됩니다.