Bootstrap 양식(양식 버튼)_javascript 기술 사용 방법에 대한 종합 분석

1. 멀티태그 지원

버튼을 만들 때 태그 요소를 사용하는 것 외에도

마찬가지로 Bootstrap 프레임워크에서 버튼을 만들 때 방금 언급한 레이블 요소 외에도 다른 레이블 요소에도 사용할 수 있습니다. 주의해야 할 유일한 것은 레이블 요소에 클래스를 추가하는 것입니다. 버튼을 만들 때 이름을 ".btn"으로 지정하세요.

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

2. 맞춤형 스타일

Bootstrap 프레임워크의 다양한 버튼 스타일은 다양한 클래스 이름을 통해 구현됩니다.

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

3. 버튼 크기

Bootstrap 프레임워크에서는 버튼 크기도 맞춤 설정할 수 있습니다. ​

Bootstrap 프레임워크에서는 버튼 크기를 제어하기 위해 세 가지 클래스 이름이 제공됩니다.

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

4. 차단 버튼

Bootstrap 프레임워크는 ".btn-block"이라는 클래스 이름을 제공합니다. 버튼에 이 클래스 이름을 사용하면 버튼이 전체 컨테이너를 채울 수 있으며 버튼에는 패딩이나 여백 값이 없습니다. 실제로 이런 종류의 버튼을 차단 버튼이라고 부르는 경우가 많습니다.

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

5. 버튼 비활성화 상태

Bootstrap 프레임워크에는 버튼을 비활성화하는 두 가지 방법이 있습니다.

　방법 1: 태그에 비활성화 속성 추가

　방법 2: 요소 태그에 클래스 이름 "disabled"를 추가합니다

　둘 사이의 주요 차이점은 다음과 같습니다.

".disabled" 스타일은 제출 및 재설정 동작과 같은 버튼의 기본 동작을 비활성화하지 않습니다.

요소 태그에 "disabled" 속성을 추가하면 요소의 기본 동작이 비활성화될 수 있습니다.

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

오늘은 몇 가지 새로운 지식을 추가하겠습니다: 부트스트랩 양식 프롬프트 정보

일반적으로 양식 확인 시 다른 프롬프트 정보를 제공해야 합니다. 이 효과는 Bootstrap 프레임워크에서도 제공됩니다. "help-block" 스타일은 블록과 컨트롤 하단에 프롬프트 정보를 표시하는 데 사용됩니다.

<form role="form">
 <div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 <span class="help-block">你输入的信息是正确的</span>
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 <span class="help-block">请输入正确信息</span>
 <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

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

위는 부트스트랩 양식 버튼에 대한 자세한 소개입니다. 앞으로 더 많은 콘텐츠가 업데이트될 예정이니 많은 관심 부탁드립니다.