부트스트랩 4 사용자 정의 양식

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

사용자 정의 범위:

기본 범위:

사용자 정의 체크박스

사용자 지정 확인란을 만들려면 <div>와 같은 컨테이너 요소를 확인란의 클래스로 래핑 .custom-control합니다 .custom-checkbox. 그런 다음 .custom-control-inputtype="checkbox"를 사용하여 입력에 추가합니다.

팁: 수반되는 텍스트에 레이블을 사용하는 경우 .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>

커스텀 스위치

사용자 지정 "토글 스위치"를 만들려면 <div>와 같은 컨테이너 요소를 확인란 의 클래스 .custom-control로 래핑합니다. .custom-switch그런 다음 .custom-control-input확인란에 클래스를 추가합니다.

예시

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

사용자 정의 라디오 버튼

사용자 정의 라디오 버튼을 생성하려면 <div>와 같은 컨테이너 요소를 라디오 버튼의 클래스로 래핑 .custom-control합니다 .custom-radio. 그런 다음 .custom-control-inputtype="radio"를 사용하여 입력에 추가합니다.

팁: 수반되는 텍스트에 레이블을 사용하는 경우 .custom-control-label클래스를 추가하십시오. for 속성의 값은 라디오의 ID와 일치해야 합니다.

예시

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

사용자 지정 선택 메뉴

사용자 지정 선택 메뉴를 만들려면 .custom-select<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>

<select name="cars" class="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>


<select name="cars" class="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>

사용자 정의 범위

사용자 지정 범위 메뉴를 만들려면 .custom-rangetype="<range>"를 사용하여 입력에 클래스를 추가합니다.

예시

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

사용자 정의 파일 업로드

사용자 정의 파일 업로드를 생성하려면 .custom-filetype="file"인 입력 주위의 클래스로 컨테이너 요소를 래핑합니다. 그런 다음 추가하십시오 .custom-file-input.

팁: 수반되는 텍스트에 레이블을 사용하는 경우 .custom-file-label클래스를 추가하십시오. for 속성의 값은 체크박스의 ID와 일치해야 합니다.

특정 파일을 선택할 때 파일 이름을 표시하려면 일부 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>

부트스트랩 4 튜토리얼

부트스트랩 4 그리드

부트스트랩 4 기타

부트스트랩 4 참조

부트스트랩 4 사용자 정의 양식