Bootstrap 양식(양식 컨트롤)_javascript 기술 사용 방법에 대한 종합 분석-JS 튜토리얼-php.cn

Bootstrap 양식(양식 컨트롤)_javascript 기술 사용 방법에 대한 종합 분석

WBOY

풀어 주다： 2016-05-16 15:30:25

원래의

1336명이 탐색했습니다.

1. 입력창 입력

한 줄 입력 상자, 일반적인 텍스트 입력 상자, 즉 입력의 유형 속성 값이 텍스트입니다.

Bootstrap에서 입력을 사용할 때는 유형 유형도 추가해야 합니다. 유형 유형을 지정하지 않으면 Bootstrap 프레임워크에서 input[type="?"]을 사용하기 때문에 올바른 스타일을 얻을 수 없습니다. 🎜>

(여기서 ?는 입력[type="text"]에 해당하는 텍스트 유형과 같은 유형 유형을 나타냄) 스타일을 정의합니다.

다양한 폼 스타일에서 컨트롤 스타일을 올바르게 만들기 위해서는 클래스명 ".form-control"을 추가해야 합니다.

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

로그인 후 복사

2. 드롭다운 선택 상자 선택

Bootstrap 프레임워크의 드롭다운 선택 상자 사용은 원래 것과 동일합니다. 여러 줄 선택의 경우 multiple 속성 값을 multiple로 설정하세요.

<form role="form">
<div class="form-group">
 <select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
 </div>
 <div class="form-group">
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
</div>
</form>

로그인 후 복사

3. 텍스트 영역 텍스트 영역

텍스트 필드는 원래 필드와 동일한 방식으로 사용됩니다. 행을 설정하면 높이를 정의할 수 있고, 열을 설정하면 너비를 설정할 수 있습니다.

그러나 textarea 요소에 클래스 이름 ".form-control"을 추가하면 cols 속성을 설정할 필요가 없습니다.

Bootstrap 프레임워크의 "form-control" 스타일에서 폼 컨트롤의 너비가 100% 또는 자동이기 때문입니다.

 <form role="form">
 <div class="form-group">
 <textarea class="form-control" rows="3"></textarea>
 </div>
 </form>

로그인 후 복사

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

1. 체크박스와 라디오 모두 라벨로 포장되어 있습니다

2. 체크박스와 라벨은 ".checkbox"라는 컨테이너에 배치됩니다.
3. 라디오와 라벨 태그는 ".radio"라는 컨테이너에 배치됩니다.

<form role="form">
<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="hate">
不喜欢
</label>
</div>
</form>

로그인 후 복사

5. 가로로 배열된 체크박스와 라디오 버튼
1. 체크박스를 가로로 정렬해야 하는 경우 클래스 이름 ".checkbox-inline"을 라벨에 추가하세요 2. 라디오를 가로로 정렬해야 하는 경우 레이블
에 클래스 이름 ".radio-inline"만 추가하면 됩니다.

<form role="form">
 <div class="form-group">
 <label class="checkbox-inline">
 <input type="checkbox" value="option1">游戏
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option2">摄影
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option3">旅游
 </label>
 </div>
 <div class="form-group">
 <label class="radio-inline">
 <input type="radio" value="option1" name="sex">男性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option2" name="sex">女性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option3" name="sex">中性
 </label>
 </div>
</form>

로그인 후 복사

6. 양식 제어 크기
Bootstrap 프레임워크는 양식 컨트롤의 높이를 제어하기 위한 두 가지 클래스 이름도 제공합니다. 이 두 클래스 이름은 다음과 같습니다. 1. input-sm: 컨트롤을 일반 크기보다 작게 만듭니다
2. input-lg: 컨트롤을 일반 크기보다 크게 만듭니다
이 두 클래스는 양식의 입력, 텍스트 영역 및 선택 컨트롤에 적합합니다.

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">

로그인 후 복사

위는 Bootstrap 양식 컨트롤을 사용하는 방법입니다. 앞으로 더 많은 콘텐츠가 업데이트될 예정이니 많은 관심 부탁드립니다.