부트 스트랩 버튼란?

Bootstrap 코스
Bootstrap CSS
Bootstrap 레이아웃 구성 요소
Bootstrap 위젯
Bootstrap 다른

최고의 부트 스트랩 버튼 튜토리얼 2024년, 이 튜토리얼에서는 예,버튼 크기,예,버튼 상태,예,예,버튼 레이블,예,를 배울 수 있습니다.

부트 스트랩 버튼

부트 스트랩 버튼을 사용하는 방법이 장에서는 예제를 통해 설명합니다.클래스와 모든 요소는 둥근 회색 버튼의 기본 모양을 상속 .btn.그러나 부트 스트랩 특정 다음 표와 같이 버튼의 스타일을 정의 할 수있는 옵션을 제공한다 :

다음 스타일은 <a>를 사용할 수 있습니다, <버튼> 또는 <입력> 요소 :

범주	기술	예
.btn	버튼 기본 스타일을 추가합니다	시험
.btn 기본	기본 / 표준 버튼	시험
.btn-차	원래 버튼 스타일 (작동하지 않음)	시험
.btn - 성공	그것은 성공적으로 작업을 나타냅니다	시험
.btn-정보	스타일 정보 버튼을 토출하기 위해 사용될 수있다	시험
.btn 경보	그는주의 버튼의 필요성을 표현	시험
.btn-위험	이것은 위험한 동작 버튼의 동작을 나타낸다	시험
.btn 링크	하자 버튼 링크처럼 보이는 (정지 버튼 동작을 유지)	시험
.btn - LG 전자	큰 버튼을	시험
.btn-SM	작은 버튼을	시험
.btn-XS	슈퍼 작은 버튼을	시험
.btn 블록	(친 요소의 폭의 100 % 연신) 블록 레벨 버튼	시험
.active는	버튼 클릭	시험
.disabled	사용 안 함 버튼	시험

다음은 위의 버튼 클래스의 모든을 보여줍니다

예

<! - 표준 버튼 -> <버튼 = "버튼"을 입력 클래스 = "btn을 BTN-기본" > 기본 버튼 </ 버튼> <! - 추가 시각 효과를 제공, 원래의 액션 버튼 세트를 식별 -> <버튼 = "버튼"을 입력 클래스 = "BTN의 BTN-차" > 원래 버튼 </ 버튼> <! - 성공 또는 긍정적 인 조치를 나타냅니다 -> <버튼 = "버튼"을 입력 클래스 = "BTN의 BTN-성공" > 성공 버튼 </ 버튼> <! - 경고 메시지 컨텍스트 버튼 -> <버튼 = "버튼"을 입력 클래스 = "btn을 BTN-정보" > 정보 버튼 </ 버튼> <! -주의로 촬영 할 수있는 조치를 나타냅니다 -> <버튼 = "버튼"을 입력 클래스 = "btn을 BTN-경고" > 경고 버튼 </ 버튼> <! - 위험한 또는 잠재적으로 부정적인 행동을 표현 -> <버튼 = "버튼"을 입력 클래스 = "BTN의 BTN-위험" > 위험한 버튼 </ 버튼> <! - 강조하지 않는 링크처럼 보이지만 동시에 버튼의 동작을 유지하는 버튼이다 -> <버튼 = "버튼"을 입력 클래스 = "btn을 BTN 링크" > 링크 버튼 </ 버튼>

»시도

결과는 다음과 같다 :

버튼 크기

다음 표는 클래스의 다양한 버튼 액세스의 크기를 보여줍니다

Class	描述
.btn-lg	这会让按钮看起来比较大。
.btn-sm	这会让按钮看起来比较小。
.btn-xs	这会让按钮看起来特别小。
.btn-block	这会创建块级的按钮，会横跨父元素的全部宽度。

다음은 위의 버튼 클래스의 모든을 보여줍니다

예

<버튼 = "버튼"을 입력 클래스 = "btn을 BTN-차 BTN의 -LG"> 넓은 원 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스가 "BTN 기본 BTN btn을 = -LG"> 큰 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스 = "BTN의 BTN-차" > 원래 버튼의 기본 크기 </ 버튼> <버튼 = "버튼"을 입력 클래스 = "btn을 BTN-기본" > 버튼의 기본 크기 </ 버튼> <버튼 = "버튼"을 입력 클래스 = "btn을 BTN-차 BTN의 -sm"> 작은 원 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스 = "btn을 BTN 기본 BTN의 -sm"> 작은 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스가 "BTN-차 BTN btn을 = -xs"> 원본 특히 작은 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스는 "BTN 기본 BTN btn을 = > -xs" 특히 작은 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스가 "btn을 BTN-차 BTN = - LG BTN 블록"> 블록 레벨 원 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스 = "BTN 기본 btn을 BTN - LG BTN 블록"> 블록 레벨 버튼 </ 버튼>

»시도

결과는 다음과 같다 :

버튼 상태

부트 스트랩은 이하 상세히 설명 될 것이며, 활성화, 비활성화 및 다른 클래스의 버튼의 상태를 제공한다.

활동적인

버튼이 활성화 누르면이 모양 (어두운 배경, 짙은 테두리, 그림자)로 표시됩니다.

다음 표는 요소 버튼과 앵커 요소 클래스에서 활약 한 만들기를 보여줍니다

元素	Class
按钮元素	添加.activeclass 来显示它是激活的。
锚元素	添加 .activeclass 到 <a> 按钮来显示它是激活的。

다음의 예는이 점을 보여

예

<버튼 = "버튼"을 입력 클래스 = "BTN 기본 BTN btn을 -LG"> 기본 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스가 "btn을 BTN 기본 BTN = - LG 활성화"> 작동 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스 = "btn을 BTN-차 BTN의 -LG"> 원래 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스는 "btn을 BTN-차 BTN = - LG 활성화"> 원래 버튼을 활성화 </ 버튼>

»시도

결과는 다음과 같다 :

장애인

당신이 버튼을 비활성화하면 색상이 50 %로 페이드 및 그라데이션의 손실.

다음 표는 요소와 버튼을 사용하여 클래스의 경우 불가능하게하는 앵커 요소를 나열합니다 :

元素	Class
按钮元素	添加 disabled属性到 <button> 按钮。
锚元素	添加 disabledclass到 <a> 按钮。注意：该 class 只会改变 <a> 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。

다음의 예는이 점을 보여

예

<버튼 = "버튼"을 입력 클래스 = "BTN 기본 BTN btn을 -LG"> 기본 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스는 "BTN 기본 BTN btn을 = -LG" 비활성화 = "비활성화"> 사용 안 함 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스 = "btn을 BTN-차 BTN의 -LG"> 원래 버튼 </ 버튼> <버튼 = "버튼"을 입력 클래스 = "btn을 BTN-차 BTN의 -LG" 비활성화 = "비활성화"> 비활성화 원 버튼 </ 버튼> <A HREF = "#" 클래스는 "BTN 기본 BTN btn을 = -LG" 역할 = "버튼"> 링크 </ A> <A HREF = "#" 클래스는 "BTN 기본 BTN btn을 = 장애인 -LG을" 역할 = "버튼"> 비활성화 링크 </ A> <A HREF = "#" 클래스 = "btn을 BTN-차 BTN의 -LG" 역할 = "버튼"> 원래 링크 </ A> <A HREF = "#" 클래스는 "BTN-차 BTN btn을 = 장애인 -LG을" 역할 = "버튼"> 원래 링크 </ A>를 사용하지 않도록 설정

»시도

결과는 다음과 같다 :