부트 스트랩 버튼을 사용하는 방법

부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.

부트 스트랩 버튼 사용 안내서

Bootstrap은 웹 프로젝트에 쉽게 추가 할 수있는 다양한 사전 설정 버튼 스타일을 제공합니다. 이 버튼은 반응이 좋으며 다양한 화면 크기로 잘 표시됩니다.

부트 스트랩 버튼을 사용하는 방법

프로젝트에서 부트 스트랩 버튼을 사용하려면 다음이 필요합니다.

1. 부트 스트랩 CSS 소개 : 태그에서 부트 스트랩 CSS 파일에 대한 참조를 추가하십시오.
2. 버튼 요소 만들기 : <button></button> 요소를 사용하여 버튼을 만듭니다.
3. 부트 스트랩 버튼 클래스 추가 : btn-primary 또는 btn-outline-success 와 같은 버튼 요소에 부트 스트랩 버튼 클래스를 추가하십시오.
4. 버튼 텍스트 추가 : 버튼 요소 내에서 버튼 텍스트를 추가합니다.

부트 스트랩 버튼 클래스

Bootstrap은 다양한 버튼 스타일과 동작을 설정하는 데 사용할 수있는 다양한 버튼 클래스를 제공합니다.

• 유형 : btn-primary , btn-secondary , btn-success , btn-danger , btn-warning , btn-info , btn-light 및 btn-dark .
• 크기 : btn-sm , btn-lg 및 btn-block .
• 모양 : btn-rounded .
• 상태 : btn-active , btn-disabled 및 btn-loading .
• 개요 : btn-outline-* .

예

 <code class="html"><button type="button" class="btn btn-primary">Primary Button</button> <button type="button" class="btn btn-outline-success">Success Button</button></code>

첫 번째 버튼은 파란색 배경과 흰색 텍스트의 버튼을 렌더링하고 두 번째 버튼은 녹색 테두리와 흰색 텍스트의 버튼을 렌더링합니다.

다른 기능

부트 스트랩 버튼은 다음과 같은 다른 기능을 지원합니다.

• 아이콘 : <i></i> 요소를 사용하여 아이콘을 추가하십시오.
• 비활성화 : disabled 속성을 사용하여 버튼을 비활성화하십시오.
• 로드 상태 : btn-loading 클래스를 사용하여 버튼이로드되고 있음을 나타냅니다.

부트 스트랩 버튼을 사용하면 프로젝트에 아름답고 대화식 버튼을 쉽게 추가 할 수 있습니다.

위 내용은 부트 스트랩 버튼을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!