>  기사  >  웹 프론트엔드  >  Bootstrap의 순수 CSS3 화살표 버튼 스타일에 대한 자세한 설명

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

PHPz
PHPz원래의
2017-03-22 15:15:529653검색
간략한 튜토리얼

부트스트랩을 기반으로 한 순수 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 화살표 버튼 스타일에 대한 자세한 설명

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

관련글 :

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

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

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.