Bootstrap의 순수 CSS3 화살표 버튼 스타일에 대한 자세한 설명

간략한 튜토리얼

부트스트랩을 기반으로 한 순수 CSS3 화살표 버튼 스타일입니다. 이 버튼은 기본 Bootstrap 버튼 스타일을 수정하여 왼쪽이나 오른쪽을 가리키는 화살표 버튼을 생성합니다.

[관련 영상 추천 : Bootstrap 튜토리얼]

설치

Bootstrap 화살표 버튼은 npm이나 bower를 통해 설치할 수 있습니다. 문서.

npm install bootstrap-directional-buttons
 
bower install bootstrap-directional-buttons

사용 방법

부트스트랩 스타일 파일과 bootstrap-direction-buttons.css 파일을 페이지

<link>
<link>

HTML 구조

에 도입하는 것이 전부입니다. 버튼에 btn-arrow-left 또는 btn-arrow-rightclass를 추가하기만 하면 됩니다. 화살표 버튼 그룹 사이에 간격이 없도록 하려면 btn-group 클래스를 사용하여 컨테이너에 배치할 수 있습니다.

<button>箭头向左的按钮</button>
<button>箭头向右的按钮</button>

Bootstrap의 순수 CSS3 화살표 버튼 스타일 관련 글에 대한 자세한 설명은 PHP 중국어 홈페이지를 참고해주세요!

관련글 :

jQuery는 BootStrap 스타일을 기반으로 무한 영역 연결을 구현합니다

아름답고 간결한 CSS3 가격을 구현하기 위한 Bootstrap에 대한 자세한 설명 예제 소스 코드 나열

Bootstrap 형식을 사용하여 예제 코드 만들기