양식에 부트스트랩을 설정할 수 있는 세 가지 상태는 무엇입니까?

Bootstrap은 양식에 대해 세 가지 상태를 설정할 수 있습니다. 1. 사용자에게 항목을 입력하거나 선택할 수 있음을 알려주는 포커스 상태 2. 사용자에게 항목을 입력하거나 선택할 수 없음을 알려주는 비활성화 상태 which states 사용자가 수행한 작업이 올바른지 여부를 사용자에게 알려줍니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 3.3.7, DELL G3 컴퓨터

Bootstrap의 양식 컨트롤에는 포커스 상태, 비활성화 상태, 확인 상태의 세 가지 주요 상태가 있습니다.

1. 포커스 상태: 이 상태는 사용자에게 무언가를 입력하거나 선택할 수 있음을 알려줍니다.

포커스 상태는 의사 클래스 ":focus"를 통해 구현됩니다.

bootstrap.css 해당 소스 코드:

.form-control:focus {
    border-color: #66afe9;
    outline: 0;   //删除了outline的默认样式
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);  //添加了阴影效果
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

사용법: 클래스 이름 "form-control"을 컨트롤에 추가합니다.

예:

<input class="form-control" type="text" placeholder="不是焦点状态下效果">
<input class="form-control" type="text" placeholder="焦点状态下效果">

효과 그림은 다음과 같습니다. (포커스 상태의 파란색 테두리 효과)

포커스 상태에서 파일, 라디오, 체크박스 컨트롤의 효과는 일반 입력과 정확히 동일하지 않습니다. 부트스트랩이 이를 위해 특별한 처리를 수행했기 때문입니다.

bootstrap.css 해당 소스 코드:

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;
}

2. 비활성화 상태: 이 상태는 사용자에게 항목을 입력하거나 선택할 수 없음을 알려줍니다.

비활성 상태는 양식에 "disabled" 속성을 추가하여 달성됩니다. 제어.
bootstrap.css 해당 소스 코드:

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #eee;
    opacity: 1;
}

지침: 비활성화해야 하는 양식 컨트롤에 "diabled" 속성을 추가하세요.

예:

<input class="form-control" type="text" placeholder="不是焦点状态下效果">
<input class="form-control" type="text" placeholder="表单已禁用，不能输入"  disabled>

렌더링은 다음과 같습니다.

참고: 비활성화된 상태에서는 컨트롤의 배경색이 회색이고, 손 모양이 입력을 금지하는 모양으로 변경됩니다. 양식 컨트롤은 클래스 이름 "form-control"을 사용하지 않으며 비활성화된 컨트롤에는 입력이 허용되지 않는 손 모양이 하나만 있습니다.

PS: Bootstrap에서 필드 세트가 "disabled" 속성으로 설정되면 전체 필드가 ​​비활성화됩니다.

예:

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

효과는 아래와 같습니다.

PS: 비활성화된 도메인의 경우 범례에 입력 상자가 있으면 이 입력 상자를 비활성화할 수 없습니다.

예:

<form role="form">
    <fieldset disabled>
        <legend><input type="text" class="form-control" placeholder="我没被禁用" /></legend>
        <div class="form-group">
            <label for="disabledTextInput">禁用的输入框</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
        </div>
        <div class="form-group">
            <label for="disabledSelect">禁用的下拉框</label>
            <select id="disabledSelect" class="form-control">
                <option>不可选择</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">无法选择
            </label>
        </div>
        <button type="submit" class="btnbtn-primary">提交</button>
　　</fieldset>
</form>

렌더링은 다음과 같습니다.

3. 이 상태는 사용자에게 작업이 올바른지 알려줍니다.

부트스트랩 스타일에서 3가지 확인 상태를 제공합니다.

1 .has-success: 성공 상태(녹색)

② .has-error: 오류 상태(빨간색)

3 .has-warning: 경고 상태(노란색)

Usage: 양식 그룹에 추가하면 됩니다. 해당 상태 클래스 이름을 컨테이너에 지정합니다.

예:

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

설명: 세 가지 스타일이 색상만 다를 뿐 동일한 효과를 갖는 것으로 볼 수 있습니다.

Bootstrap의 양식 유효성 검사에서는 성공을 의미하는 체크 표시 "√", 오류를 의미하는 "×" 표시 등 다양한 상태에 대해 다양한 아이콘이 제공됩니다.

양식에서 해당 아이콘을 다른 상태로 표시하려면 해당 상태에 클래스 이름 "has-feedback"만 추가하면 됩니다.

PS: 클래스 이름 "has-feedback"은 "has-error", "has-warning" 및 "has-success"와 함께 사용해야 합니다.

예:

<form role="form">
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess" placeholder="成功状态" >
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning">警告状态</label>
        <input type="text" class="form-control" id="inputWarning" placeholder="警告状态" >
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
　　</div>
　　<div class="form-group has-error has-feedback">
        <label class="control-label" for="inputError">错误状态</label>
        <input type="text" class="form-control" id="inputError" placeholder="错误状态" >
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
　　</div>
</form>

효과는 다음과 같습니다.

설명: 효과 그림에서 볼 수 있듯이 아이콘은 모두 오른쪽에 있습니다.

참고: Bootstrap의 아이콘은 모두 @face-face를 사용하여 만들어지며 이를 달성하려면 양식에 범위 요소를 추가해야 합니다.

예:

<span class="glyphicon glyphicon-remove form-control-feedback"></span>

[관련 추천: "부트스트랩 튜토리얼"]

위 내용은 양식에 부트스트랩을 설정할 수 있는 세 가지 상태는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!