Bootstrap4 기본 튜토리얼

Bootstrap4 입력 그룹

우리는 .input-group 클래스를 사용하여 양식 입력 필드에 더 많은 스타일을 추가할 수 있습니다. 아이콘, 텍스트 또는 버튼과 같은 것들.

사용 .input-group-prepend 클래스를 사용하여 입력 필드 앞에 텍스트 정보를 추가할 수 있습니다., .input-group-append 클래스를 입력 필드 뒤에 추가해야 합니다.

마지막으로, 우리는 .input-group-text 클래스를 사용하여 텍스트 스타일을 설정합니다.

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-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-group .input-group 클래스를 사용하여 양식 입력 필드에 더 많은 스타일을 추가할 수 있습니다. 아이콘, 텍스트 또는 버튼과 같은 것들, .input-group-prepend　클래스를 앞에 추가합니다，.input-group-append　뒤에 추가합니다。</p>
　　<p>사용　.input-group-text　클래스를 사용하여 텍스트의 스타일을 설정합니다。</p>
　　
　　<form　action="/action_page.php">
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">@</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="사용자 이름"　id="usr"　name="username">
　　　　</div>
　　　　<div　class="input-group　mb-3">
　　　　　　<input　type="text"　class="form-control"　placeholder="Email"　id="mail"　name="email">
　　　　　　<div　class="input-group-append">
　　　　　　　　<span　class="input-group-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　　　<button　type="submit"　class="btn　btn-primary">제출</button>
　　</form>
</div>
</body>
</html>

테스트해 보세요 ‹/›

실행 결과如下：

입력창 크기

사용 .input-group-sm　클래스를 사용하여 작은 입력창을 설정합니다， .input-group-lg　클래스를 사용하여 큰 입력창을 설정합니다：

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-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">
　　<h1>입력창 크기</h1>
　　<p>사용　.input-group-sm　클래스를 사용하여 작은 입력창을 설정합니다，　.input-group-lg　클래스를 사용하여 큰 입력창을 설정합니다：</p>
　　<form>
　　　　<div　class="input-group　mb-3　input-group-sm">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">Small</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control">
　　　　</div>
　　</form>
　　<form>
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">Default</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control">
　　　　</div>
　　</form>
　　<form>
　　　　<div　class="input-group　mb-3　input-group-lg">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">Large</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

테스트해 보세요 ‹/›

실행 결과如下：

여러 입력창과 텍스트

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-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>
　　
　　<form>
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">Person</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="First　Name">
　　　　　　<input　type="text"　class="form-control"　placeholder="Last　Name">
　　　　</div>　　
　　</form>
　　
　　<form>
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">One</span>
　　　　　　　　<span　class="input-group-text">Two</span>
　　　　　　　　<span　class="input-group-text">Three</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

테스트해 보세요 ‹/›

실행 결과如下：

체크박스와 라디오 박스

텍스트 정보는 체크박스와 라디오 박스로 대체할 수 있습니다：

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-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>텍스트 정보는 체크박스와 라디오 박스로 대체할 수 있습니다：</p>
　　<form>
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<div　class="input-group-text">
　　　　　　　　　　<input　type="checkbox">　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="w3codebox">
　　　　</div>
　　</form>
　　
　　<form>
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<div　class="input-group-text">
　　　　　　　　　　<input　type="radio">　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="GOOGLE">
　　　　</div>
　　</form>
</div>
</body>
</html>

테스트해 보세요 ‹/›

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

입력창에 버튼 그룹 추가

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-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">
　　<h1>입력창에 버튼 그룹 추가</h1>
　　<div　class="input-group　mb-3">
　　　　<div　class="input-group-prepend">
　　　　　　<button class="btn btn-outline-secondary"　type="button">Basic　Button</button>　　
　　　　</div>
　　　　<input　type="text"　class="form-control"　placeholder="Some　text">
　　</div>
　　<div　class="input-group　mb-3">
　　　　<input　type="text"　class="form-control"　placeholder="Search">
　　　　<div　class="input-group-append">
　　　　　　<button class="btn btn-success"　type="submit">Go</button>　　
　　　　　</div>
　　</div>
　　<div　class="input-group　mb-3">
　　　　<input　type="text"　class="form-control"　placeholder="Something　clever..">
　　　　<div　class="input-group-append">
　　　　　　<button class="btn btn-primary" type="button">OK</button>　　
　　　　　　<button class="btn btn-danger" type="button">Cancel</button>　　
　　　　　</div>
　　</div>
</div>
</body>
</html>

테스트해 보세요 ‹/›

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

드롭다운 메뉴 설정

입력 필드에 드롭다운 메뉴를 추가할 때는 .dropdown 클래스를 사용하지 않아야 합니다。

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-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>입력 필드에 드롭다운 메뉴를 추가할 때는 .dropdown 클래스를 사용하지 않아야 합니다。</p>
　　<form>
　　　　<div　class="input-group mt-3　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
　　　　　　　　　　웹 사이트 선택
　　　　　　　　</button>
　　　　　　　　<div class="dropdown-menu">
　　　　　　　　　　<a class="dropdown-item" href="https://www.google.com">GOOGLE</a>
　　　　　　　　　　<a class="dropdown-item" href="https://ko.oldtoolbag.com">w3codebox</a>
　　　　　　　　　　<a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a>
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control" placeholder="웹 주소">
　　　　</div>
　　</form>
</div>
</body>
</html>

테스트해 보세요 ‹/›

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

입력 필드 그룹 태그

입력 필드 그룹을 통해 입력 필드 그룹 주위의 레이블을 설정하여 태그를 설정하고, 태그의 for 속성이 입력 필드 그룹의 id와 일치해야 하며, 태그를 클릭하면 입력 필드에 포커스가집니다：

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-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>입력 그룹 외곽의 label을 사용하여 레이블을 설정합니다. 레이블의 for 속성은 입력 그룹의 id와 일치해야 합니다.</p>
　　<p>레이블을 클릭하면 입력 필드에 포커스를 맞출 수 있습니다：</p>
　　<form>
　　　　<label　for="demo">여기에 이메일을 입력하세요:</label>
　　　　<div　class="input-group　mb-3">
　　　　　　<input　type="text"　class="form-control"　placeholder="이메일"　id="demo"　name="email">
　　　　　　<div　class="input-group-append">
　　　　　　　　<span　class="input-group-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　</form>
</div>
</body>
</html>

테스트해 보세요 ‹/›

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

Bootstrap4 사용자 정의 폼 Bootstrap4 폼 컨트롤