부트스트랩 형식에 대한 완전한 심층 연구-PHP开发-php.cn

부트스트랩 형식에 대한 완전한 심층 연구

高洛峰

풀어 주다： 2016-12-03 16:38:27

원래의

1555명이 탐색했습니다.

서문: 폼에는 요소가 많기 때문에 부트스트랩 폼을 별도로 요약하겠습니다. 부트스트랩의 핵심 내용으로 폼의 주요 기능은 사용자와 소통하는 데 사용되는 웹 컨트롤입니다. 웹페이지를 사용자와 더 효과적으로 소통할 수 있도록 만듭니다. 양식의 공통 요소에는 주로 텍스트 입력 상자, 드롭다운 선택 상자, 라디오 버튼, 확인 버튼, 텍스트 필드 및 버튼 등이 포함됩니다.

1. 기본 형태

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

로그인 후 복사

자세한 설명:

(1) form 태그의 role 속성은 의미를 강화하기 위한 것일 뿐, 그 외에는 없습니다. 기능;

(2) 각 입력 상자의 상단과 하단 사이에 일정한 거리를 유지하도록 div의 .form-group 클래스 이름을 설정합니다. 그렇지 않으면 두 상자가 서로 옆에 있게 됩니다.

(3) 레이블의 for 속성과 입력의 id는 동일한 이름을 가져야 레이블 레이블을 마우스로 클릭할 때 커서가 자동으로 고정됩니다. for 속성을 사용하지 않는 경우 다음과 같이 작성할 수도 있습니다:Email:, 입력 길이가 화면 너비가 아닙니다.

(4) 양식에 .form-control 클래스를 추가합니다.
1.
2. 밝은 회색(#ccc) 테두리를 설정합니다.
3. 모서리를 둥글게 만듭니다.
4. 요소에 초점이 맞춰지면 그림자와 테두리 효과가 변경됩니다.

2. 가로 형식(왼쪽에 레이블, 오른쪽에 입력 상자 있음)

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
  <div class="col-sm-10">
   <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-10">
   <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
  </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>

로그인 후 복사

자세한 설명:

클래스 .form 사용 -form 태그의 수평에는 주로 다음과 같은 기능이 있습니다.
1. 양식 제어 패딩 및 여백 값을 설정합니다.
2. 그리드의 "행"과 유사하게 "form-group"의 표현을 변경합니다. system;
가로 효과를 얻으려면 그리드 시스템과 함께 사용해야 합니다. 사용 시 브라우저의 크기를 조정하여 다양한 효과를 볼 수 있습니다. 브라우저 크기가 특정 값보다 작으면 세로로 표시됩니다.

3. 인라인 양식(양식 컨트롤이 한 줄로 표시됨)

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

로그인 후 복사

자세한 설명:
가끔 웹페이지 상단의 탐색 모음을 사용하여 입력합니다. 이때 사용자 이름과 비밀번호는 한 줄에 표시되어야 합니다. 이때 표시 크기가 커지면 동시에 양식 태그에 .form-inline 클래스를 추가하면 됩니다. 장치가 변경되면 자동으로 줄 바꿈이 발생하여 일반 형식의 스타일을 표시합니다.

4. 폼의 기본 요소

1. 입력 요소: .form-control 클래스를 추가하면 가장 기본적인 입력 상자 스타일을 구현할 수 있습니다

(1) 기본 입력 상자

<input type="text" class="form-control">

로그인 후 복사

(2) 기본보다 큰 입력 상자

<input type="text" class="form-control input-lg">

로그인 후 복사

(3) 기본보다 작은 입력 상자

<input type="text" class="form-control input-sm">

로그인 후 복사

2. Textarea 요소: cols 속성 값을 설정하지 않고 .form-control 클래스를 추가합니다. 이때 레이블 너비는 100%입니다.

<textarea rows="5" class="form-control">

로그인 후 복사

3. , 드롭다운 선택 상자로 다중 라인 선택과 단일 라인 선택이 가능하며, 동일한 스타일에 대해서만 .form-control 클래스가 추가됩니다

<select class="form-control"><option>222</option></select>

로그인 후 복사

4., 체크박스 체크박스 및 라디오 버튼 라디오:

(1) 두 클래스인 .checkbox와 .radio는 정렬 문제를 해결하기 위해 체크박스와 라디오용으로 특별히 작성되었습니다.

`<form role="form">
 <div class="checkbox">
  <label>
   <input type="checkbox" value="">
   踢足球
  </label>
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox" value="">
   打篮球
  </label>
 </div>
 <div class="radio">
  <label>
   <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
   喜欢
  </label>
 </div>
  <div class="radio">
  <label>
   <input type="radio" name="optionsRadios" id="optionsRadios2" value="h

로그인 후 복사