Latest web development tutorials

재단 버튼 그룹

재단 버튼 그룹

버튼 그룹

재단은 같은 행에 버튼의 시리즈를 만들 수 있습니다.

당신은 사용할 수 있습니다 <ul> 요소 및 추가 .button-group 버튼 그룹을 만들 클래스를 :

예

<UL 클래스 = "버튼 그룹 ">
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 애플 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 삼성 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 소니 </ 버튼> </ 리>
</ UL>

»시도

수직 버튼 그룹

수직 버튼 그룹 사용 .stack 클래스를 만들 수 있습니다. 버튼 부모 요소의 전체 폭에 걸쳐 유의 :

예

<UL 클래스 = "버튼 그룹 스택">
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 애플 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 삼성 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 소니 </ 버튼> </ 리>
</ UL>

»시도

.stack-for-small 클래스 화면, 수평으로 배열 단추가의 작은 크기는 수직 정렬이된다 :

예

<UL 클래스 = "버튼 그룹은 스택-에 대한-작은">
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 애플 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 삼성 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 소니 </ 버튼> </ 리>
</ UL>

»시도

둥근 버튼 그룹

버튼 그룹 사용 .radius 및 .round 클래스 버튼을 둥근 모서리를 추가합니다 :

예

<UL 클래스 = "버튼 그룹의 반경">
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 애플 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 삼성 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 소니 </ 버튼> </ 리>
</ UL>

<UL 클래스 = "버튼 그룹 라운드">
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 애플 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 삼성 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 소니 </ 버튼> </ 리>
</ UL>

»시도

통일 확장 버튼 그룹

.even-num 버튼 그룹 버튼의 폭과 100 %의 부모 요소의 폭에 걸쳐 균일 한 분포에 대한 클래스.

NUM 1-8에서 버튼 그룹의 버튼의 수이다 :

예

<UL 클래스 = "버튼 그룹 도-3">
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 애플 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 삼성 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 소니 </ 버튼> </ 리>
</ UL>

<UL 클래스 = "버튼 그룹 도-5">
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 애플 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 삼성 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 소니 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> HTC </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> 화웨이 </ 버튼> </ 리>
</ UL>

<UL 클래스 = "버튼 그룹 도-8">
<리> <버튼 타입 = " 버튼"클래스 = "버튼">를 </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> B </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> C </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> D </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> E </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> F </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> G </ 버튼> </ 리>
<리> <버튼 타입 = " 버튼"클래스 = "버튼"> H </ 버튼> </ 리>
</ UL>

»시도

드롭 다운 버튼

드롭 다운 메뉴 버튼을 눌러 설정 좋은 값을 선택하는 사용자 수 있습니다 :

예

<! - 드롭 다운 트리거 ->
href가 = "#" 데이터 -dropdown = "id01" 클래스 = "button dropdown"> 드롭 다운 버튼 </ A>

<! - 실제 드롭 다운 메뉴 ->
<UL 아이디 = "id01"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운">
<리> <a의 HREF = "#"> 링크 1 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 2 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 3 </ A> </ 리>
</ UL>

<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>

»시도

분석의 예

.dropdown 클래스는 드롭 다운 메뉴 버튼을 만들 수 있습니다.

함께 사용 data-dropdown=" id " 드롭 다운 메뉴를 열려면 속성 단추 또는 링크.

id 값은 내용 (id01) 풀다운 메뉴 일치해야합니다.

에서 <ul> 에 추가 .f-dropdown 클래스 및 data-dropdown-content 콘텐츠 드롭 다운 메뉴를 생성하는 속성입니다.

마지막 초기화 재단 JS.

분할 버튼

우리는 또한 분할 버튼의 드롭 다운 메뉴를 만들 수 있습니다. 당신 만이 버튼을 추가 할 필요가 .split 방향 화살표 버튼을 생성하는 클래스와 스팬 요소를 사용 :

예

<Button 클래스 = "버튼을 분할" > 분할 버튼
<스팬 데이터 드롭 = "id01 "> </ SPAN>
</ 버튼>

<UL 아이디 = "id01"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운">
<리> <a의 HREF = "#"> 링크 1 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 2 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 3 </ A> </ 리>
</ UL>

<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>

»시도
주의 팁 : 나중에이 튜토리얼에서 우리가 드롭 다운 메뉴에 대한 자세한 내용은 것 지식이다.