Bootstrap4 기본 튜토리얼

Bootstrap4 자체 표单

　　 Bootstrap4 브라우저 기본 스타일을 대체하기 위해 일부 표单의 스타일을自定义할 수 있습니다.

자체 복选框

자체 복选框을自定义하려면, <div>를 부모 요소로 설정하고, 클래스로 .custom를 설정할 수 있습니다.-control과 .custom-checkbox, 복选框로서 자식 요소로서 해당 <div> 안에 배치되고, 그 다음 복选框을 설정합니다. type="checkbox"클래스는 .custom로 설정됩니다-control-input。

다중 선택 상자 텍스트는 사용합니다 label 또한 태그는 .custom을 사용합니다.-control-label　류를 사용합니다.label 의 for 속성 값이 다중 선택 상자의 id와 일치해야 합니다。

Bootstrap4 예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>자동 다중 선택 상자</h2>
　　<p>다중 선택 상자를自定义하려면，<div>를 부모 요소로 설정하고 클래스를　.custom로 설정할 수 있습니다。-control과　.custom-checkbox，다중 선택 상자는 해당　<div>에 자식 요소로 배치되며，그런 다음 다중 선택 상자를　type="checkbox"로 설정하고，클래스는　.custom로 설정합니다。-control-input。</p>
　　<p>다중 선택 상자 텍스트는　label　태그를 사용하며，태그는　.custom를 사용합니다。-control-label　클래스，label의　for　속성 값이 다중 선택 상자의　id와 일치해야 합니다。</p>
　　<form　action="/action_page.php">
　　　　<div class="custom-control custom-checkbox　mb-3">
　　　　　　<input　type="checkbox"　class="custom-control-input"　id="customCheck"　name="example1">
　　　　　　<label class="custom-control-label"　for="customCheck">자동 다중 선택 상자</label>
　　　　</div>
　　　　<input　type="checkbox"　id="defaultCheck"　name="example2">
　　　　<label　for="defaultCheck">기본 다중 선택 상자</label>
　　　　<br>
　　　　<button type="submit" class="btn btn-primary">제출</button>
　　</form>
</div>
</body>
</html>

테스트를 보세요.‹/›

실행된 결과는 다음과 같습니다:

자동 선택 상자

자동 선택 상자를自定义하려면 <div> 부모 요소로 설정하고 클래스는 .custom로 설정합니다-control과 .custom-radio，선택 상자는 해당 div에 자식 요소로 배치됩니다 <div> 안에 설정하고 그런 다음 선택 상자를 type="radio"클래스는 .custom로 설정됩니다-control-input。

선택 상자 텍스트는 사용합니다 label 또한 태그는 .custom을 사용합니다.-control-label　류를 사용합니다.label 의 for 속성 값이 선택 상자의 id와 일치해야 합니다。 id。

Bootstrap4 예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>자동 선택 상자</h2>
　　<p>자동 선택 상자를自定义하려면，div를 부모 요소로 설정하고 클래스를　.custom로 설정할 수 있습니다。-control과　.custom-radio，다중 선택 상자는 해당　div에 자식 요소로 배치되며，그런 다음 선택 상자를　type="radio"로 설정하고，클래스는　.custom로 설정합니다。-control-input。</p>
　　<p>선택 상자 텍스트는　label　태그를 사용하며，태그는　.custom를 사용합니다。-control-label　클래스，label의　for　속성 값이 선택 상자의　id와 일치해야 합니다。</p>
　　<form　action="/action_page.php">
　　　　<div class="custom-control custom-radio">
　　　　　　<input type="radio" class="custom-control-input"　id="customRadio"　name="example1">
　　　　　　<label class="custom-control-label"　for="customRadio">자동 선택 상자</label>
　　　　</div>　　　　
　　　　<input　type="radio"　id="defaultRadio"　name="example2">
　　　　<label for="defaultRadio">기본 단일 선택 상자</label>
　　　　<br>
　　　　<button type="submit" class="btn btn-primary">제출</button>
　　</form>
</div>
</body>
</html>

테스트를 보세요.‹/›

실행된 결과는 다음과 같습니다:

사용자 정의 컨트롤이 같은 줄에 표시됨

외부 요소에서 .custom를 사용할 수 있습니다-control-inline 클래스를 사용하여 사용자 정의 양식 컨트롤을 감싸면, 사용자 정의 양식 컨트롤이 같은 줄에 표시될 수 있습니다：

Bootstrap4 예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>사용자 정의 컨트롤이 같은 줄에 표시됨</h2>
　　<p>외부 요소에서 .custom를 사용할 수 있습니다-control-inline 클래스를 사용하여 사용자 정의 양식 컨트롤을 감싸면, 사용자 정의 양식 컨트롤이 같은 줄에 표시될 수 있습니다：</p>
　　<form　action="/action_page.php">
　　　　<div class="custom-control custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio1" name="example1">
　　　　　　<label class="custom-control-label" for="customRadio1">사용자 정의 단일 선택 상자　1</label>
　　　　</div>
　　　　<div class="custom-control custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio2" name="example2">
　　　　　　<label class="custom-control-label" for="customRadio2">사용자 정의 단일 선택 상자　2</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">제출</button>
　　</form>
</div>
</body>
</html>

테스트를 보세요.‹/›

실행된 결과는 다음과 같습니다:

사용자 정의 선택 메뉴

사용자 정의 선택 메뉴를 생성하려면 <select> 요소에 .custom를 추가합니다-select 클래스:

Bootstrap4 예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>사용자 정의 선택 메뉴</h2>
　　<p>사용자 정의 선택 메뉴를 생성하려면 select 요소에 .custom를 추가할 수 있습니다-select 클래스:</p>
　　<form>
　　<select name="cars" class="custom-select-sm">
　　　　<option selected>사용자 정의 선택 메뉴</option>
　　　　<option value="Google">Google</option>
　　　　<option value="w3codebox">w3codebox</option>
　　　　<option value="Taobao">Taobao</option>
　　</select>
　</form>
</div>
</body>
</html>

테스트를 보세요.‹/›

실행된 결과는 다음과 같습니다:

사용자 정의 선택 메뉴 크기를 설정하려면 .custom를 사용할 수 있습니다-select-sm, .custom-select-lg로 그들의 크기를 설정합니다:

Bootstrap4 예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>사용자 정의 선택 메뉴 크기</h2>
　　<p>사용자 정의 선택 메뉴 크기를 설정하려면 .custom를 사용할 수 있습니다-select-sm, .custom-select-lg로 그들의 크기를 설정하려면 :/p>
　　<form>
　　　　<!--　소　-->
　　　　<select name="cars" class="custom-select-sm">
　　　　　　<option selected>비교적으로 작은 사용자 정의 선택 메뉴</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　　
　　　　<!--　대　-->
　　　　<select name="cars" class="custom-select-lg">
　　　　　　<option selected>비교적으로 큰 사용자 정의 선택 메뉴</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　</form>
</div>
</body>
</html>

테스트를 보세요.‹/›

실행된 결과는 다음과 같습니다:

사용자 정의 슬라이더 컨트롤

우리는 input 　으로 type="range" 의 입력 상자에 .custom를 추가합니다-사용자 정의 슬라이더 컨트롤을 설정하기 위해 range 클래스를 사용합니다:

Bootstrap4 예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>사용자 정의 슬라이더 컨트롤</h2>
　　<p>우리는 input 타입이 "range"인 입력 상자에 .custom를 추가할 수 있습니다-range　류를 사용하여 사용자 정의 슬라이더 컨트롤러를 설정합니다:/p>
　　<form　action="/action_page.php">
　　　　<label　for="customRange">사용자 정의 슬라이더 컨트롤러</label>
　　　　<input　type="range"　class="custom-range"　id="customRange"　name="points1">
　　　　<label　for="defaultRange">기본 슬라이더 컨트롤러</label>
　　　　<input　type="range"　id="defaultRange"　name="points2">
　　　　<p><button　type="submit"　class="btn　btn-primary">제출</button></p>
　　</form>
</div>
</body>
</html>

테스트를 보세요.‹/›

실행된 결과는 다음과 같습니다:

사용자 정의 파일 업로드 컨트롤러

부모 요소에 추가할 수 있습니다. .custom-file 류를 설정한 후 　input 을 설정합니다. type="file" 을 추가합니다.-file-input:

업로드 컨트롤러의 텍스트는 label 또한 태그는 .custom을 사용합니다.-file-label　류를 사용합니다.label 의 for 속성 값은 업로드 컨트롤러와 일치해야 합니다 id。

Bootstrap4 예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>사용자 정의 파일 업로드 컨트롤러</h2>
　　<p>부모 요소에　.custom을　추가할 수 있습니다.-file　류를　입력한 후　input을　type="file"로　설정하고　.custom을　추가합니다.-control-label:</p>
　　<form　action="/action_page.php">
　　　　<p>커스텀 파일 업로드 스타일:/p>
　　　　<div class="custom-file mb-3">
　　　　　　<input type="file" class="custom-file-input" id="customFile" name="filename">
　　　　　　<label class="custom-file-label" for="customFile">파일 선택</label>
　　　　</div>
　　　　
　　　　<p>기본 파일 업로드 스타일:/p>
　　　　<input type="file" id="myFile" name="filename2">
　　
　　　　<div class="mt-3">
　　　　　　<button type="submit" class="btn btn-primary">제출</button>
　　　　</div>
　　</form>
</div>
</body>
</html>

테스트를 보세요.‹/›

실행된 결과는 다음과 같습니다:

Bootstrap4 슬라이드 쇼 Bootstrap4 입력 그룹