이 문서에서는 다음을 안내합니다.
- Bootstrap에서 버튼을 만드는 방법?
- Bootstrap에서 개요 버튼을 만드는 방법은 무엇입니까?
- Bootstrap 버튼 크기를 조정하는 방법은 무엇입니까?
- Bootstrap에서 블록 수준 버튼을 만드는 방법은 무엇입니까?
- Bootstrap에서 활성 상태 버튼을 만드는 방법은 무엇입니까?
- Bootstrap에서 비활성화 상태 버튼을 만드는 방법은 무엇입니까?
Bootstrap에서 버튼을 만드는 방법?
부트스트랩 ' btn ” 클래스를 활용하여 버튼을 생성합니다. 스타일 버튼을 추가하려면 ' btn '와 같은 색상 클래스가 포함된 클래스 btn-성공 ” 녹색 버튼을 만듭니다.
HTML에서 ' <버튼> ”, “ <아> ', 그리고 ' <입력> ” 유형이 있는 태그 단추 ” 버튼을 만드는 데 사용됩니다. “ btn ” 클래스에는 버튼 요소에 기본 스타일을 추가하는 미리 정의된 스타일이 있습니다.
명확한 개념을 위해 아래 예를 확인하십시오.
예
HTML 파일에서 다음 단계에 따라 다른 태그를 사용하여 버튼을 만듭니다.
- 추가하다 ' <버튼> ' 그리고 ' <아> ' 요소를 할당하고 ' btn ' 그리고 ' btn-기본 ' 클래스.
- 그런 다음 ' <입력> ” 유형이 있는 태그 단추 '. ' btn ' 그리고 ' btn-성공 ” 처음 두 개의 버튼을 파란색으로, 세 번째 버튼을 녹색으로 스타일링하려면:
< ㅏ 수업 = 'btn btn-기본' 헥사 = '#' > 열려 있는 < / ㅏ >
< 입력 유형 = '단추' 수업 = 'btn btn-성공' 값 = '찾다' >
산출
Bootstrap에서 개요 버튼을 만드는 방법은 무엇입니까?
버튼 외곽선을 추가하려면 부트스트랩 ' btn-개요-* ” 클래스를 사용합니다. 구문에서 ' * ” 여기서 윤곽선 색상을 나타냅니다. 예를 들어, ' btn-개요-위험 '는 빨간색 윤곽선을 배치하고 ' btn-개요-기본 ” 파란색 윤곽선 등을 설정합니다.
아래 주어진 코드를 분석하십시오.
< 단추 유형 = '단추' 수업 = 'btn btn-개요-기본' >다음< / 단추 >< 단추 유형 = '단추' 수업 = 'btn btn-개요-위험' >취소< / 단추 >
< 단추 유형 = '단추' 수업 = 'btn btn-개요-성공' >성공< / 단추 >
'라는 것을 알 수 있다. 다음 ” 버튼에는 파란색 윤곽선이 있고 “ 취소 ' 버튼이 빨간색 윤곽선으로 표시되고 ' 성공 ” 버튼은 녹색 윤곽선으로 스타일이 지정되었습니다.
Bootstrap 버튼 크기를 조정하는 방법은 무엇입니까?
일부 Bootstrap 클래스는 다음과 같은 버튼 크기를 조정하기 위해 적용됩니다.
- “ btn-lg ” 클래스를 적용하여 큰 버튼을 생성합니다. 이 클래스는 글꼴 크기와 패딩을 늘릴 수 있습니다.
- “ btn-md ”는 중간 크기의 버튼을 생성합니다.
- “ btn-sm ”는 작은 버튼을 생성합니다.
예
이제 크기와 이름이 다른 세 개의 버튼을 만듭니다.
< 단추 유형 = '단추' 수업 = 'btn btn-보조 btn-lg' >대< / 단추 >< 단추 유형 = '단추' 수업 = 'btn btn-경고 btn-md' >중간< / 단추 >
< 단추 유형 = '단추' 수업 = 'btn btn-위험 btn-sm' >작은< / 단추 >
산출
Bootstrap에서 블록 수준 버튼을 만드는 방법은 무엇입니까?
블록 수준 버튼은 전체 너비 크기를 유지하는 버튼입니다. 블록 수준 버튼을 생성하려면 ' btn 블록 ” 클래스는 다음과 같이 활용됩니다.
< 단추 유형 = '단추' 수업 = 'btn btn-경고 btn-차단' > 버튼< / 단추 >< 단추 유형 = '단추' 수업 = 'btn btn-보조 btn-블록' >버튼< / 단추 >
산출
Bootstrap에서 활성 상태 버튼을 만드는 방법은 무엇입니까?
활성 상태 버튼은 현재 활성 상태인 버튼을 나타냅니다. 이 버튼은 일반 버튼보다 약간 더 어둡습니다. 이러한 버튼을 생성하기 위해 부트스트랩 ' 활동적인 ” 클래스를 활용합니다.
예
아래 코드는 두 개의 버튼을 생성합니다. 첫 번째는 정상 상태이고 다른 하나는 “ 활동적인 ' 수업:
< 단추 유형 = '단추' 수업 = 'btn btn-성공' >성공< / 단추 >< 단추 유형 = '단추' 수업 = 'btn btn-성공 활성' >성공< / 단추 >
산출
Bootstrap에서 비활성화 상태 버튼을 만드는 방법은 무엇입니까?
비활성화 상태 버튼은 클릭할 수 없고 사용할 수 없는 버튼을 나타냅니다. 부트스트랩에서 ' 장애가 있는 ” 클래스는 비활성화 상태 버튼을 만드는 데 활용됩니다. “ 장애가 있는 ” 속성도 이 용도로 사용할 수 있습니다.
예
아래 제공된 예를 확인하십시오.
- 첫 번째 버튼은 비활성화 상태가 아닙니다.
- 두 번째는 ' 장애가 있는 ” 클래스를 사용하여 비활성화 상태 버튼을 만듭니다.
- 세 번째는 '를 사용합니다. 장애가 있는 ' 기인하다:
< 단추 유형 = '단추' 수업 = 'btn btn-성공 비활성화' >성공< / 단추 >
< 단추 유형 = '단추' 수업 = 'btn btn-성공' 비활성화>성공< / 단추 >
산출
부트스트랩 버튼과 CSS의 스타일과 관련된 다양한 측면을 다루었습니다.
결론
“ btn ” 클래스를 활용하여 심플한 디자인의 부트스트랩 버튼을 제작합니다. 컬러 및 아웃라인 버튼을 만들려면 ' btn-* ' 그리고 ' btn-개요-* ” 클래스는 “ * '는 모든 색상 클래스를 상징합니다. 예를 들어, ' btn-경고 ”는 노란색 버튼을 생성하고, “ btn-개요-경고 ”는 노란색 윤곽선 버튼 등을 생성합니다. 버튼을 활성화하거나 비활성화하려면 각각 '활성화' 및 '비활성화' 클래스가 적용됩니다. 이 게시물은 부트스트랩 버튼에 대한 포괄적인 가이드를 제공했습니다.