Bootstrap 양식(양식 스타일)_javascript 기술 사용 방법에 대한 종합 분석

1. 기본형

 <form >
 <div class="form-group">
 <label>邮箱：</label>
 <input type="email" class="form-control" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
 <label >密码</label>
 <input type="password" class="form-control" placeholder="请输入您的邮箱密码">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> 记住密码
 </label>
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>

이러한 요소 외에도 양식에는 입력, 선택, 텍스트 영역 및 기타 요소가 있습니다. 부트스트랩 프레임워크에서는 'form-control' 클래스 이름이 사용자 정의됩니다. "양식 제어"는 일부 디자인 사용자 정의 효과를 달성합니다.

1. 너비가 100%가 됩니다

2. 연한 회색(#ccc) 테두리를 설정합니다

3. 4px의 둥근 모서리

4. 그림자 효과를 설정하고 요소에 초점이 맞춰지면 그림자와 테두리 효과가 변경됩니다

5. 자리표시자 색상을 #999로 설정합니다

2. 가로 형태
Bootstrap 프레임워크의 기본 형식은 수직 표시 스타일이지만 수평 양식 스타일(왼쪽의 레이블, 오른쪽의 양식 컨트롤)이 필요한 경우가 많습니다.

<form class="form-horizontal" role="form">
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">邮箱:</label>
 <div class="col-sm-4">
 <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
 </div>
 </div>
 <div class="form-group">
 <label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
 <div class="col-sm-4">
 <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
 </div>
 </div>
 </form>

Bootstrap 프레임워크에서 수평 형태 효과를 얻으려면 다음 두 가지 조건을 충족해야 합니다.
1.

요소에서 클래스 이름 ".form-horizontal"을 사용합니다.
2. Bootstrap 프레임워크와 협력하는 그리드 시스템.

요소에 클래스 이름 ".form-horizontal"을 사용하면 주로 다음과 같은 기능이 있습니다.
1. 폼 컨트롤의 패딩 및 여백 값을 설정합니다.
2. "form-group"의 표현을 그리드 시스템의 "row"와 유사하게 변경합니다.

3. 인라인 형식
때로는 모든 양식 컨트롤을 한 줄에 표시해야 할 때도 있습니다

 <form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="exampleInputEmail2">邮箱</label>
 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
 </div>
 <div class="form-group">
 <label class="sr-only" for="exampleInputPassword2">密码</label>
 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>

부트스트랩 프레임워크에서 이러한 양식 효과를 구현하는 것은 쉽습니다. 요소에 ".form-inline"이라는 클래스 이름을 추가하기만 하면 됩니다.

입력 앞에 레이블을 추가하면 입력이 다른 줄로 줄바꿈됩니다. 이러한 레이블을 추가해야 하고 입력이 래핑되는 것을 원하지 않는 경우 "form-group" 컨테이너에도 레이블을 배치해야 합니다.

위 내용은 부트스트랩 양식 사용 방법에 대한 종합적인 분석의 첫 번째 기사입니다. 앞으로 더 많은 내용이 업데이트될 예정이니 많은 관심 부탁드립니다.