마찬가지로 Bootstrap 프레임워크에서 버튼을 만들 때 방금 언급한 레이블 요소 외에도 다른 레이블 요소에도 사용할 수 있다는 점만 주의하세요. 버튼 레이블 요소에 클래스 이름 "btn"을 추가합니다. 추가하지 않으시면 버튼효과가 없습니다. Bootstrap 프레임워크의 모든 레이블 요소를 사용하여 버튼 스타일을 구현할 수 있지만 개인적으로는 이 사용을 권장하지 않습니다. 브라우저 호환성 문제를 피하기 위해 button
또는 a#을 사용하는 것이 좋습니다. 🎜🎜# 태그를 사용하여 버튼을 만듭니다.
#🎜 🎜## 🎜 🎜#5. 다양한 스타일의 버튼 사용자 정의
버튼 소개 시작 부분에서 언급했듯이 웹 페이지에는 다양한 버튼 스타일이 있을 수 있습니다. 그런 다음 Bootstrap 프레임워크도 고려됩니다. 
Bootstrap 프레임워크의 기본 버튼 스타일 외에도 6개의 다른 버튼 스타일이 있습니다. 각 스타일의 차이점은 버튼의 배경색, 테두리 색상 및 텍스트 색상입니다. .
Bootstrap 프레임워크의 다양한 버튼 스타일은 다양한 클래스 이름을 통해 구현됩니다. 사용 중에 개발자는 다른 클래스 이름만 선택하면 됩니다. #🎜🎜 #
사용방법은 매우 간단합니다. 앞서 소개한 기본버튼처럼 기본버튼 ".btn"만 추가하고 해당 클래스명만 추가하면 됩니다 # 🎜🎜#에서 으로 원하는 버튼 스타일을 얻으세요. 예:
<button class="btn btn-default" type="button">默认按钮</button>
🎜 🎜 #
六、按钮大小
在Bootstrap框架中，对于按钮的大小，也是可以定制的。类似于input一样，通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。
在Bootstrap框架中提供了三个类名来控制按钮大小：
从上表中不难发现，在Bootstrap框架中控制按钮的大小都是通过修改按钮的padding、line-height、font-size和border-radius几个属性。
源码查阅bootstrap.css文件中第2319行～第2339行
那么在实际使用中，这几个类名可以配合按钮中其他颜色类名一起使用，但唯一一点不能缺少“.btn”类名：
<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>
七、块状按钮
Bootstrap框架中提供了一个类名“btn-block”。
按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。
具体源码请查阅bootstrap.css文件第2340行～第2353行：
使用方法和前面的类似，只需要在原按钮类名上添加“.btn-block”类名，当然“.btn”类名是不可或缺的：
<button class="btnbtn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button><button class="btnbtn-primary btn-block" type="button">正常按钮</button><button class="btnbtn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button><button class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>
八、按钮状态——活动状态
Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种：活动状态和禁用状态。
Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。
源码请查看bootstrap.css文件第2011行～第2029行
不同风格下的按钮都具有这几种状态效果，只是颜色做了一定的调整，我们以默认风格（btn-default）为例：
源码请查看bootstrap.css文件第2045行～第2058行
当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于
<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-info" type="button">信息按钮.btn-info</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>
九、按钮状态——禁用状态
和input等表单控件一样，在Bootstrap框架的按钮中也具有禁用状态的设置。
禁用状态与其他状态按钮相比，就是背景颜色的透明度做了一定的处理，opcity的值从100%调整为65%。
在Bootstrap框架中，要禁用按钮有两种实现方式：
方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名“disabled”
两者的主要区别是：
“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。
如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。
对于标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。
而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button><button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button><button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按钮</button>
위 내용은 부트스트랩 버튼의 스타일은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
