부트스트랩 버튼의 스타일은 무엇입니까?

Abstract: bootstrap 버튼 스타일에는 주로 기본 버튼, 기본 버튼, 메인 버튼, 성공 버튼, 정보 버튼이 포함됩니다. , 경고 버튼, 위험 버튼, 링크 버튼.

1. 버튼 소개:

버튼 역시 핵심 콘텐츠 중 하나입니다. 부트스트랩 프레임워크. 버튼은 웹 제작에 없어서는 안 될 존재이기 때문입니다.

웹페이지마다 버튼 스타일이 다르며, 동일한 웹사이트나 애플리케이션이라도 버튼 색상, 크기, 상태 등 다양한 버튼 스타일이 있습니다.

<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>

　

2. 🎜🎜# Bootstrap 프레임워크 V3.x 버전의 기본 버튼은 V2.x 버전의 기본 버튼과 동일하며 클래스명 "btn"을 통해 구현됩니다.

차이점은 V3.x 버전이 훨씬 간단하고 V2.x 버전에서는 텍스트 그림자, 그라데이션 배경 등 CSS3의 많은 특수 효과가 제거되었다는 것입니다. 이미지), 테두리 그림자(상자 그림자) 등

부트스트랩 프레임워크는 다양한 브라우저의 구문 분석 차이를 고려하고 상대적으로 안전한 호환성 처리를 수행하므로 버튼 효과는 기본적으로 다양한 브라우저에서 동일합니다.

소스 코드는 bootstrap.css 파일의 1992~2010행을 참조하세요.

Bootstrap 프레임워크의 버튼은 사용 방법이 매우 간단합니다. 다음과 같습니다:

#🎜 🎜#

<button class="btn" type="button">我是一个基本按钮</button>

　

# 🎜🎜#3. 기본 버튼#🎜 🎜 #

Bootstrap 프레임워크는 먼저 기본 클래스 이름 ".btn"을 통해 기본 버튼 스타일을 정의한 다음 다음을 통해 기본 버튼 스타일을 정의합니다. ".btn-기본". 기본 버튼 스타일은 기본 버튼 스타일을 바탕으로 버튼의 배경색

,

테두리 색상

및 #🎜🎜을 수정하는 것입니다. . #텍스트색상

. 소스코드는 bootstrap.css 파일의 2040~2044라인을 확인해주세요 기본 버튼 스타일을 사용하는 방법도 매우 간단합니다 , 그냥 추가하세요. 기본 버튼 "btn"에 클래스 이름 "btn-default"를 추가하세요. #🎜 🎜#

# 🎜 🎜# 4. 다중 라벨 지원(다중 라벨 제작 버튼)

일반적으로 입력 유형= 버튼을 생성합니다.

마찬가지로 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行

　　当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于

元素是通过“:active”伪类实现，而对于这样的标签元素则是通过添加类名“.active”来实现。

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!