Bootstrap 4 사용자 정의 양식

Bootstrap 4는 브라우저 기본값을 대체하기 위한 사용자 정의된 양식 요소와 함께 제공된다.

맞춤 체크박스

사용자 정의 체크박스를 생성하려면 <div>와 같은 컨테이너 요소를 체크박스와 그 주위로 래핑한다.

⭐ 동반 텍스트에 레이블을 사용하는 경우 해당 텍스트에 .custom-control-label 클래스를 추가한다. for 속성의 값은 체크박스의 ID와 일치해야 한다.

예제

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
  </div>
</form>

맞춤형 스위치

예제

<form>
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="switch1">
    <label class="custom-control-label" for="switch1">Toggle me</label>
  </div>
</form>

맞춤 라디오 버튼

예제

<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio</label>
  </div>
</form>

인라인 사용자 정의 양식 컨트롤

사용자 정의 양식 컨트롤을 나란히(인라인) 배치하려면 래퍼/컨테이너에 다음 .custom-control-inline을 추가한다.

예제

<form>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio 1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
  </div>
</form>

사용자 정의 선택 메뉴

사용자 정의 선택 메뉴를 만들려면 <select> 요소에 .custom-select 클래스를 추가한다.

예제

<form>
  <select name="cars" class="custom-select">
    <option selected>Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

사용자 정의 선택 메뉴 크기

작은 선택 메뉴를 만들려면 .custom-select-sm 클래스를 사용 하고 큰 선택 메뉴에는 .custom-select-lg 클래스를 사용한다.

예제

<form>
  <!-- Small -->
  <select name="cars" class="custom-select custom-select-sm">
    <option selected>Small Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

  <!-- Large -->
  <select name="cars" class="custom-select custom-select-lg">
    <option selected>Large Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

맞춤 범위

사용자 정의 범위 메뉴를 만들려면 type=”“를 사용하여 입력에 .custom-range 클래스를 추가한다.

예제

<form>
  <label for="customRange">Custom range</label>
  <input type="range" class="custom-range" id="customRange" name="points1">
</form>

사용자 정의 파일 업로드

특정 파일을 선택할 때 파일 이름이 표시되도록 하려면 일부 jQuery 코드도 포함해야 한다.

예제

<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기