집 > 기사 > 웹 프론트엔드 > Bootstrap (1)_javascript 기술을 사용하여 양식을 작성하는 세 가지 형식에 대한 자세한 설명

Bootstrap (1)_javascript 기술을 사용하여 양식을 작성하는 세 가지 형식에 대한 자세한 설명

WBOY원래의: 2016-05-16 15:22:031362검색

이번 장에서는 부트스트랩을 이용하여 폼을 생성하는 방법을 배워보겠습니다. Bootstrap은 간단한 HTML 태그와 확장 클래스를 통해 다양한 스타일의 양식을 만들 수 있습니다.

부트스트랩 양식 유형은 세로 또는 기본 형식, 인라인 형식, 가로 형식의 세 가지 형식으로 구분됩니다.

세로형 또는 기본형(디스플레이:블록;)

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

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

클래스 .form-group을 사용하여 dc6dce4a544fdca2df29d5ac0ea9906b에 라벨과 컨트롤을 배치합니다. 이는 최적의 간격을 확보하는 데 필요합니다.

모든 텍스트 요소 d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3에 클래스 .form-control을 추가합니다.

<!doctype html> 
<html lang="en"> 
 <head> 
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="关键词一，关键词二"> 
  <meta name="Description" content="网站描述内容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 ">   
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
 </head> 
 <body style="padding: 20px;"> 
  <div class = "col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
   <form role = "form"> 
    <div class = "form-group"> 
     <label for = "name">姓名</label> 
     <input type = "text" class = "form-control" id = "name" 
       placeholder = "请输入姓名"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "tel">电话号码</label> 
     <input type="text" class="form-control" id = "tel" 
       placeholder = "请输入您的电话号码"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "idCard">请上传身份证</label> 
     <input type = "file" id = "idCard"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "profession">选择职业</label> 
     <select id = "profession" class = "form-control"> 
      <option>软件工程师</option> 
      <option>测试工程师</option> 
      <option>硬件工程师</option> 
      <option>质量分析师</option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <button type = "submit" class="btn-info btn-lg">提交</button> 
    </div> 
   </form> 
  </div> 
 </body> 
</html>

효과는 다음과 같습니다.

select의 form-control을 제거하고 input type = "file"에 form-control을 추가하면 어떤 효과가 있는지 살펴보겠습니다.

위 효과와 차이점이 보이시나요? 이렇게 하면 너비, 높이 및 get을 포함한 주변 테두리 효과를 설정하는 양식 제어의 역할을 이해할 수 있습니다
초점이 맞춰졌을 때의 양식 스타일입니다.

인라인 형식(모두 같은 줄에 표시되며 인라인 블록으로 표시됨)

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

머리 부분의 내용이 동일하기 때문에 본문 부분의 내용만 나열합니다.

<body style="padding: 20px;"> 
 <form role = "form" class="form-inline"> 
  <div class = "form-group"> 
   <label for = "name">姓名</label> 
   <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "tel">电话号码</label> 
   <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "idCard">请上传身份证</label> 
   <input type = "file" id = "idCard"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "profession">选择职业</label> 
   <select id = "profession" class = "form-control"> 
    <option>软件工程师</option> 
    <option>测试工程师</option> 
    <option>硬件工程师</option> 
    <option>质量分析师</option> 
   </select> 
  </div> 
  <div class="form-group"> 
   <button type = "submit" class="btn-info btn-lg">提交</button> 
  </div> 
 </form>   
</body>

디스플레이 효과:

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

인라인 양식 태그를 숨기려면 .sr-only 클래스를 사용하세요.

참고: sr-only는 일반 리더가 아닌 스크린 리더에 표시됩니다.

다른 요소의 폼 클래스가 form-inline인 경우 디스플레이는 inLine-block이지만 입력 tyoe = "file"은 여전히 디스플레이:블록인 것을 볼 수 있습니다. 시간은 별도로 설정할 수 있습니다. 디스플레이는 인라인 블록입니다.

가로형(레이블, 입력 등의 형식요소가 같은 줄에 위치)

가로형은 태그 수뿐만 아니라 형태 표현에서도 다른 형태와 다릅니다. 가로 레이아웃 양식을 만들려면 다음 단계를 따르세요.

1. 상위 ff9c23ada1bcecdd1a0fb5d5a0f18437 요소에 .form-horizontal 클래스를 추가합니다.
2. .form-group 클래스를 사용하여 dc6dce4a544fdca2df29d5ac0ea9906b에 라벨과 컨트롤을 배치합니다.
3. 레이블에 .control-label 클래스를 추가합니다.
4. 라벨과 그 형제 div의 너비를 설정합니다(입력 등의 기본 너비는 100%이므로).

<body style="padding: 20px;"> 
 <form role = "form" class="form-horizontal"> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "name">姓名</label> 
   <div class="col-sm-2"> 
    <input type = "text" class = "form-control" id = "name" 
     placeholder = "请输入姓名"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "tel">电话号码</label> 
   <div class="col-sm-2"> 
    <input type="text" class="form-control" id = "tel" 
      placeholder = "请输入您的电话号码"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "idCard">请上传身份证</label> 
   <div class="col-sm-2"> 
    <input type = "file" id = "idCard" style="display:inline-block;"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "profession">选择职业</label> 
   <div class="col-sm-2"> 
    <select id = "profession" class = "form-control"> 
     <option>软件工程师</option> 
     <option>测试工程师</option> 
     <option>硬件工程师</option> 
     <option>质量分析师</option> 
    </select> 
   </div> 
  </div> 
  <div class="form-group"> 
   <div class="col-sm-2 col-sm-offset-2"> 
    <button type = "submit" class="btn-info btn-lg">提交</button> 
   </div>    
  </div> 
 </form> 
</body>

효과:

위 콘텐츠는 Bootstrap을 사용하여 양식을 만드는 관련 콘텐츠를 소개합니다.

성명：

이전 기사：grunt를 사용하여 JavaScript 및 CSS 프로그램을 패키징하는 방법을 배우는 튜토리얼다음 기사：grunt를 사용하여 JavaScript 및 CSS 프로그램을 패키징하는 방법을 배우는 튜토리얼

Bootstrap (1)_javascript 기술을 사용하여 양식을 작성하는 세 가지 형식에 대한 자세한 설명

관련 기사