Bootstrap - form 메모

Bootstrap을 사용하여 form을 만들 때 항상 당황하기 때문에 몇 가지 패턴으로 메모.



/app/views/moving_items/new.html.haml
.row
  .col-sm-6
    .form-group
      = f.label :name
      = f.text_field :name, class: "form-control", placeholder: "Name"

  .col-sm-3
    .form-group
      = f.label :room
      = f.text_field :room, class: 'form-control', placeholder: "Room"

  .col-sm-3
    .form-group
      = f.label :category
      = f.text_field :category, class: 'form-control', placeholder: "Category"
.clearfix

.row
  .col-sm-6
    .form-group
      = f.label :volume
      = f.number_field :volume, in: 0..200, step: 0.5, value: 3, class: "form-control"
    .form-group
      = f.range_field :volume, value: 3, id: "volume_slider"
  .col-sm-6
    .form-group
      = f.label :quantity
      = f.number_field :quantity, in: 0..999, step: 1, class: "form-control", value: 1
.clearfix

.form-group
  = f.label :description
  = f.text_area :description, class: 'form-control', placeholder: "Description"
.clearfix

좋은 웹페이지 즐겨찾기