Bootstrap은 프론트 엔드 개발을 위해 Twitter에서 시작한 오픈 소스 툴킷입니다. 트위터 디자이너 Mark Otto와 Jacob Thornton이 개발했으며 CSS/HTML 프레임 워크입니다.
버튼 그룹
.btn-group> .btn : .btn 버튼 세트가 .btn-group에 래핑됩니다.
아웃소싱 요소 .BTN-Group {위치/디스플레이/}
버튼 요소 .BTN
<div 역할 = "group"> <버튼 유형 = "버튼"> 왼쪽 </button "> <버튼 유형 ="버튼 "> 중간 </button> <버튼 유형 ="버튼 "> 오른쪽 </button> </div>
버튼 도구 모음
.btn-toolbar> .btn-group
아웃소싱 element.btn-toolbar {margin-left}
<div 역할 = "도구 모음"> <div 역할 = "Group"> ... </div> <div 역할 = "Group"> ... ... </div> <div role = "Group"> ... </div> </div>
버튼 크기
.BTN-Group-*(LG/MD/SM/XS)
.btn-group-*>. btn {패딩/글꼴 크기/국경-라디우스}
<div> <버튼> 왼쪽 </button> <button> 중간 </button> <button> 오른쪽 </button> </div>
버튼 중첩
.btn-group nesting.btn-group
<div role = "btn-group"> <button> button1 </button> <button> button2 </button> <div role = "btn-group"> <버튼 데이터-토글 = "드롭 다운"> 드래그 다운 <span> </span> </button> <ul> <li> <a> project 1 </a> </li> <li> <a> project 2 </a> </li> </li> </li> </li> </li>
버튼 그룹이 수직으로 배열되었습니다
.BTN 그룹-지급
<div 역할 = "btn-group"> ... </div>
버튼 그룹의 양쪽 끝을 정렬합니다
부모 요소의 너비를 채우는 것으로 나타납니다.
결함 : 마진이 디스플레이를 지원하지 않기 때문에 : 테이블 셀; 이중 경계의 효과가 나타납니다
필요한 버튼 Nesting.btn-Group-Justified {display/width/float}
<div role = "group"> <div role = "group"> <butty> 왼쪽 </button> </div> <div role = "group"> <butty> 왼쪽 </button> </div> <div role = "group"> <버튼 데이터-토글 = "드롭 다운"> 오른쪽 <span> </span> </button> <ul> <li> <a> item1 </a> </li> <li> <a> item2 </a> </li> </ul> </div> </div>
버튼 스타일의 드롭 다운 메뉴
아웃소싱 요소 class.btn-group {display/position}
드롭 다운 메뉴 플러그인에 의존합니다
단일 버튼 드롭 다운 메뉴
<div 역할 = "그룹"> <버튼 데이터-토글 = "드롭 다운"> 버튼 <span> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
분할 버튼 풀다운 메뉴
<div> <버튼> 버튼 </button> <버튼 데이터-토글 = "드롭 다운"> <span> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </ul>
버튼 드롭 다운 메뉴 크기
제어 크기.
<div> <버튼 데이터-토글 = "드롭 다운"> 버튼> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
팝업 메뉴 UP
팝업 방향 제어 : .Dropup.drop-menu {하단/마진-바닥}
<div> <버튼 데이터-토글 = "드롭 다운"> 버튼> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
위는 편집기가 소개 한 부트 스트랩 구성 요소 (2) 버튼에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다!