부트스트랩 형식


이 장에서는 부트스트랩을 사용하여 폼을 만드는 방법을 알아봅니다. Bootstrap은 간단한 HTML 태그와 확장 클래스를 통해 다양한 스타일의 양식을 만들 수 있습니다.

양식 레이아웃

Bootstrap은 다음 유형의 양식 레이아웃을 제공합니다.

  • 세로 형식(기본값)

  • 인라인 형식

  • 가로 형식

세로 또는 기본 형식

기본 형태 단일 구조 Bootstrap과 함께 제공되며 개별 양식 컨트롤은 자동으로 일부 전역 스타일을 받습니다. 기본 양식을 만드는 단계는 다음과 같습니다.

role="form"
    을 상위 <form> 요소에 추가합니다.

  • 클래스

    .form-group
    • 을 사용하여 <div>에 라벨과 컨트롤을 넣으세요. 이는 최적의 간격을 얻기 위해 필요합니다.

  • 모든 텍스트 요소 <input>, <textarea>에 클래스

    .form-control
    • 을 추가합니다.

  • <!DOCTYPE html>
    • <html>
<head>
<title>부트스트랩 예 - 기본 양식</title>
<link rel="stylesheet" href="http: / /apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1 / jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js">< ; /script>
</head>
<body>

<form role="form">
<div class="form-group">
<label for="name"> ; 이름</라벨>
                                                                                                       > ~                   블록">다음은 블록 수준 도움말 텍스트의 예입니다. </p>
                                                             ​ /div>
  <button type="submit" class="btn btn-default">제출</button>
</form>

</body>
</html>


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本表单</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <label for="name">名称</label>
      <input type="text" class="form-control" id="name" 
         placeholder="请输入名称">
   </div>
   <div class="form-group">
      <label for="inputfile">文件输入</label>
      <input type="file" id="inputfile">
      <p class="help-block">这里是块级帮助文本的实例。</p>
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 请打勾
      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

인라인 양식

모든 요소가 인라인이고 왼쪽 정렬되고 레이블이 나란히 있는 양식을 만들어야 하는 경우 <form> 태그에 .form-inline 클래스를 추가하세요. 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 内联表单</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="name">名称</label>
      <input type="text" class="form-control" id="name" 
         placeholder="请输入名称">
   </div>
   <div class="form-group">
      <label class="sr-only" for="inputfile">文件输入</label>
      <input type="file" id="inputfile">
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 请打勾
      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

  • 기본적으로 Bootstrap의 입력, 선택 및 텍스트 영역 너비는 100%입니다. 인라인 양식을 사용하는 경우 양식 컨트롤에서 너비를 설정해야 합니다.

  • 클래스 .sr-only를 사용하면 인라인 양식의 레이블을 숨길 수 있습니다.

가로형

가로형은 마크 수뿐만 아니라 형태의 표현 형태에서도 다른 형태와 다릅니다. 가로로 배치된 양식을 만들려면 다음 단계를 따르세요.

  • 클래스 .form-horizontal을 상위 <form> 요소에 추가하세요.

  • 클래스 .form-group을 사용하여 <div>에 라벨과 컨트롤을 넣으세요.

  • 레이블에 클래스 .control-label을 추가합니다. 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 水平表单</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label for="firstname" class="col-sm-2 control-label">名字</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="firstname" 
            placeholder="请输入名字">
      </div>
   </div>
   <div class="form-group">
      <label for="lastname" class="col-sm-2 control-label">姓</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="lastname" 
            placeholder="请输入姓">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <div class="checkbox">
            <label>
               <input type="checkbox"> 请记住我
            </label>
         </div>
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">登录</button>
      </div>
   </div>
</form>

</body>
</html>

지원되는 양식 컨트롤

Bootstrap은 주로 입력, 텍스트 영역, 체크박스, 라디오 및 선택과 같은 가장 일반적인 양식 컨트롤을 지원합니다.

입력 상자(Input)

가장 일반적인 양식 텍스트 필드는 입력 상자 입력입니다. 사용자는 여기에 가장 필요한 양식 데이터를 입력할 수 있습니다. 부트스트랩은 텍스트, 비밀번호, 날짜/시간, 날짜/시간-로컬, 날짜, 월, 시간, 주, 숫자, 이메일, URL, 검색, tel 및 color을 포함한 모든 기본 HTML5 입력 유형을 지원합니다. input을 완전히 스타일 지정하려면 적절한 type 선언이 필요합니다. 

实例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 输入框</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
  <div class="form-group">
    <label for="name">标签</label>
    <input type="text" class="form-control" placeholder="文本输入">
  </div>
 </form>

</body>
</html>

텍스트 영역(Textarea)

여러 줄을 입력해야 하는 경우 텍스트 상자 텍스트 영역을 사용할 수 있습니다. 필요한 경우 rows 속성을 변경합니다(더 적은 행 = 더 작은 상자, 더 많은 행 = 더 큰 상자). 

实例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 文本框</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

</body>
</html>

체크박스 및 라디오 버튼

체크박스와 라디오 버튼은 사용자가 다양한 사전 설정 옵션 중에서 선택할 수 있도록 하는 데 사용됩니다.

  • 양식을 생성할 때 사용자가 목록에서 여러 옵션을 선택하도록 하려면 를 사용하세요. checkbox. 사용자가 하나의 옵션만 선택하도록 제한하려면 일련의 확인란과 라디오 버튼에

    • 을 사용하세요.
  • .checkbox-inline

    또는 .radio-inline 클래스를 사용하여 제어하세요.

    • 다음 예에서는 두 가지 유형(기본값과 인라인)을 모두 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 复选框和单选按钮</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
   <label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
   <label><input type="checkbox" value="">选项 2</label>
</div>

<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" 
         value="option1" checked> 选项 1
   </label>
</div>
<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" 
         value="option2">
         选项 2 - 选择它将会取消选择选项 1
   </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
         value="option1" checked> 选项 1
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
         value="option2"> 选项 2
   </label>
</div>

</body>
</html>

Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

Select

사용자가 여러 옵션 중에서 선택할 수 있도록 하려는 경우 선택 상자를 사용하지만 기본적으로 하나의 옵션만 선택할 수 있습니다.

  • <select>를 사용하면 일반적으로 상태나 숫자 등 사용자에게 친숙한 목록 옵션이 표시됩니다.

  • 사용자가 여러 옵션을 선택할 수 있도록 하려면 multiple="multiple"을 사용하세요.

다음 예에서는 두 가지 유형(선택 및 다중)을 모두 보여줍니다.


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 选择框</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <label for="name">选择列表</label>
      <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for="name">可多选的选择列表</label>
      <select multiple class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div>
</form>

</body>
</html>

Run Instance»

온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

정적 제어

가로 양식 내에서 양식 태그 뒤에 일반 텍스트를 배치해야 하는 경우 <p>에서 .form-control-static 클래스를 사용하세요. 

实例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 静态控件</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" 
         placeholder="请输入密码">
    </div>
  </div>
</form>

</body>
</html>

양식 제어 상태

:focus 상태(예: 사용자가 입력을 클릭하거나 탭 키를 사용하여 입력에 집중) 외에도 Bootstrap은 비활성화된 입력 상자에 대한 스타일을 정의하고 다음에 대한 클래스를 제공합니다. 양식 유효성 검사.

입력 상자 포커스

입력 상자 입력이 :focus를 받으면 입력 상자의 윤곽선이 제거되고 box-shadow가 적용됩니다.

입력 상자 입력 비활성화

입력 상자 입력을 비활성화하려면 disabled 속성을 추가하기만 하면 됩니다. 그러면 입력 상자가 비활성화될 뿐만 아니라 입력 상자의 스타일과 마우스 포인터가 움직일 때의 스타일도 변경됩니다. is hovering 요소 위에 있을 때 마우스 포인터의 스타일입니다.

Disabled fieldset fieldset

<fieldset>에 비활성화된 속성을 추가하여 <fieldset> 내의 모든 컨트롤을 비활성화합니다.

검증 상태

Bootstrap에는 오류, 경고 및 성공 메시지에 대한 검증 스타일이 포함되어 있습니다. 유효성 검사 상태는 적절한 클래스(.has-warning, .has-error 또는 .has-success)를 상위 요소에 추가하기만 하면 사용할 수 있습니다.

다음 예는 모든 컨트롤 상태를 보여줍니다.


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 表单控件状态</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="col-sm-2 control-label">聚焦</label>
      <div class="col-sm-10">
         <input class="form-control" id="focusedInput" type="text" 
            value="该输入框获得焦点...">
      </div>
   </div>
   <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">
         禁用
      </label>
      <div class="col-sm-10">
         <input class="form-control" id="disabledInput" type="text" 
            placeholder="该输入框禁止输入..." disabled>
      </div>
   </div>
   <fieldset disabled>
      <div class="form-group">
         <label for="disabledTextInput"  class="col-sm-2 control-label">
            禁用输入（Fieldset disabled）
         </label>
         <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" 
               placeholder="禁止输入">
         </div>
      </div>
      <div class="form-group">
         <label for="disabledSelect"  class="col-sm-2 control-label">
            禁用选择菜单（Fieldset disabled）
         </label>
         <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
               <option>禁止选择</option>
            </select>
         </div>
      </div>
   </fieldset>
   <div class="form-group has-success">
      <label class="col-sm-2 control-label" for="inputSuccess">
         输入成功
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputSuccess">
      </div>
   </div>
   <div class="form-group has-warning">
      <label class="col-sm-2 control-label" for="inputWarning">
         输入警告
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputWarning">
      </div>
   </div>
   <div class="form-group has-error">
      <label class="col-sm-2 control-label" for="inputError">
         输入错误
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputError">
      </div>
   </div>
</form>

</body>
</html>

인스턴스 실행»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

양식 컨트롤 크기

클래스를 사용할 수 있습니다. 각각 .input-lg 및 .col-lg-*을 사용하여 양식의 높이와 너비를 설정합니다. 다음 예에서는 이를 보여줍니다.


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 表单控件大小</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <input class="form-control input-lg" type="text" 
         placeholder=".input-lg">
   </div>

   <div class="form-group">
      <input class="form-control" type="text" placeholder="默认输入">
   </div>

   <div class="form-group">
      <input class="form-control input-sm" type="text" 
         placeholder=".input-sm">
   </div>
   <div class="form-group">
   </div>
   <div class="form-group">
      <select class="form-control input-lg">
         <option value="">.input-lg</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control">
         <option value="">默认选择</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control input-sm">
         <option value="">.input-sm</option>
      </select>
   </div>

   <div class="row">
      <div class="col-lg-2">
         <input type="text" class="form-control" placeholder=".col-lg-2">
      </div>
      <div class="col-lg-3">
         <input type="text" class="form-control" placeholder=".col-lg-3">
      </div>
      <div class="col-lg-4">
         <input type="text" class="form-control" placeholder=".col-lg-4">
      </div>
   </div>
</form>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

양식 도움말 텍스트

Bootstrap 양식 컨트롤은 입력 상자 입력에 블록 수준 도움말 텍스트를 가질 수 있습니다. 전체 너비를 차지하는 콘텐츠 블록을 추가하려면 <input> 뒤에 .help-block을 사용하세요. 다음 예에서는 이를 보여줍니다.


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 表单帮助文本</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <span>帮助文本实例</span>
   <input class="form-control" type="text" placeholder="">
   <span class="help-block">一个较长的帮助文本块，超过一行，
   需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요


←
→