Bootstrap 양식(양식 제어 상태)_javascript 기술 사용 방법에 대한 종합 분석

이 글은 부트스트랩 폼의 사용법을 종합적으로 분석한 글입니다. 관심 있는 분들은

1. 포커스 상태를 참고하세요. 포커스 상태는 의사 클래스 ":focus"를 통해 달성됩니다. Bootstrap 프레임워크에 있는 양식 컨트롤의 포커스 상태는 윤곽선의 기본 스타일을 삭제하고 그림자 효과를 다시 추가합니다.

<form role="form" class="form-horizontal">
 <p class="form-group">
 <p class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
 </p>
 <p class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果">
 </p>
 </p>
</form>

2. 🎜> Bootstrap 프레임워크에서 양식 컨트롤의 비활성화 상태는 일반적인 양식 비활성화 상태와 동일한 방식으로 구현됩니다. 해당 양식 컨트롤에 "disabled" 속성을 추가합니다.

<form role="form">
 <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
 <fieldset disabled>
 <p class="form-group">
 <label for="disabledTextInput">禁用的输入框</label>
 <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
 </p>
 <p class="form-group">
 <label for="disabledSelect">禁用的下拉框</label>
 <select id="disabledSelect" class="form-control">
 <option>不可选择</option>
 </select>
 </p>
 <p class="checkbox">
 <label>
 <input type="checkbox"> 无法选择
 </label>
 </p>
 <button type="submit" class="btn btn-primary">提交</button>
 </fieldset>
</form>

3. 확인상태

, 양식 검증은 불가피합니다. 검증 상태 스타일을 제공하는 것도 필요하며 이러한 효과는 Bootstrap 프레임워크에서도 제공됩니다.

1. .has-warning: 경고 상태(노란색) 2. .has-error: 오류 상태(빨간색) 3. .has-success: 성공 상태(녹색)
당신을 사용했습니다 양식 그룹 컨테이너에 상태 클래스 이름

<form role="form">
 <p class="form-group has-success">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 </p>
 <p class="form-group has-warning">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 </p>
 <p class="form-group has-error">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
 </p>
</form>

만 추가하면 됩니다. 그래도 깊이 배우고 싶다면 여기를 클릭하여 배울 수 있으며 여기에 두 가지 흥미로운 주제가 있습니다. Bootstrap 학습 튜토리얼 Bootstrap 실습 튜토리얼

위는 Bootstrap 양식 컨트롤의 상태에 대한 자세한 소개입니다. , 그리고 추후에 더 많은 콘텐츠가 나올 예정입니다. 지속적으로 업데이트되니 모두들 계속해서 관심을 가져주시길 바랍니다.