JS 구성 요소 Bootstrap 버튼 그룹 및 드롭다운 버튼_javascript 기술에 대한 자세한 설명

이번 글에서는 먼저 버튼 그룹 사용법을 알려드리겠습니다

.

1. 버튼 그룹

1. 싱글버튼 그룹
.btn-group을 사용하여 여러
을 .btn으로 캡슐화합니다.

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div> 

2. 다중 버튼 그룹
여러 개의

을

에 넣으세요.

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div> 

3. 세로버튼 그룹
.btn-group에 .btn-group-vertical을 추가합니다.

<div class="btn-group btn-group-vertical"> 
 ... 
</div> 

2. 버튼 드롭다운

예

<div class="btn-group"> 
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
  Action 
  <span class="caret"></span> 
 </a> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

1. 크기 조절
또한 .btn-large, .btn-small 및 .btn-mini를 사용하여 크기를 제어합니다.

2. 분할 드롭다운 버튼

<div class="btn-group"> 
 <button class="btn">Action</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

3. 위쪽으로 나타나는 메뉴

<div class="btn-group dropup"> 
 <button class="btn">Dropup</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

3. 자바스크립트

예
로딩 상태. data-loading-text="로드 중..."을 추가합니다.

코드 복사 코드는 다음과 같습니다.

로드 중

스위치 상태. data-toggle="버튼"을 추가하세요.

코드 복사 코드는 다음과 같습니다.

단일 토글

체크박스. btn-group 뒤에 data-toggle="buttons-checkbox"를 추가하세요.

<div class="btn-group" data-toggle="buttons-checkbox"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div> 

단일 선택. btn-group 뒤에 data-toggle="buttons-radio"를 추가하세요.

<div class="btn-group" data-toggle="buttons-radio"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div> 

사용방법
JavaScript 코드가 스위치 상태를 트리거합니다.
$().button("전환")
자동으로 트리거되도록 데이터 전환 속성을 추가할 수도 있습니다.
…

JavaScript 코드를 사용하여 로드 상태를 트리거하면 버튼에 data-loading-text 속성에 지정된 값이 표시됩니다.

$().button("로드 중")

...
참고: Firefox는 페이지가 로드되는 동안 버튼을 비활성화된 상태로 유지합니다. 해결 방법은 버튼에 autocomplete="off"를 적용하는 것입니다.

JavaScript 코드를 사용하여 버튼 상태를 재설정합니다.
$().button("재설정")

버튼 상태를 재설정하고 버튼 텍스트를 지정된 텍스트로 변경합니다. 다음 예의 전체 항목은 예시일 뿐이며 교체할 수 있습니다.

<button class="btn" data-complete-text="finished!" >...</button> 
<script> 
 $('.btn').button('complete') 
</script> 

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

관련 라벨：

Bootstrap按钮组 Bootstrap下拉按钮

원천：php.cn

이전 기사：AngularJ를 사용하여 권한 관리 시스템을 구축하는 방법 [간단]_AngularJS 다음 기사：부트스트랩 버튼 드롭다운 메뉴 component_javascript 스킬에 대한 자세한 설명

본 웹사이트의 성명

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

저자별 최신 기사

• NullPointerException은 무엇이며 어떻게 해결합니까?
  2024-10-22 09:46:29
• 초보자에서 코더까지: C 기초로 시작되는 여정
  2024-10-13 13:53:41
• PHP로 웹 개발 잠금 해제: 초보자 가이드
  2024-10-12 12:15:51
• C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길
  2024-10-11 22:47:31
• 코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍
  2024-10-11 19:36:51
• 내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C
  2024-10-11 15:50:41
• C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구
  2024-10-11 15:07:41
• PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계
  2024-10-11 14:21:21
• Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드
  2024-10-11 12:59:11
• 코딩의 핵심: 초보자를 위한 Python의 힘 활용
  2024-10-11 12:17:31

최신 이슈

sql groupby가 작동하지 않습니다. code_branch별로 그룹화하고 싶습니다. ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameas...

에서 2024-04-06 19:24:49

0

2

488

루프 오버를 위해 ID별로 MySQL 결과 그룹화 mysql에 비행 데이터가 포함된 테이블이 있습니다. codeigniter3 travel_idair_idFlightDurationout_or_inflightdur...

에서 2024-04-06 17:27:56

0

1

406

Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...

에서 2024-04-06 14:54:03

0

2

421

반응으로 3상태 스위칭을 구현하는 가장 좋은 방법은 무엇입니까? 나는 하나에서 다음으로 상태 변경을 트리거하는 몇 가지 버튼을 React에서 만들고 있습니다. 내 버튼 중 일부에는 열거형으로 표시되는 세 가지 상태가 있습니다....

에서 2024-04-06 13:51:32

0

1

418

제출 후 선택한 체크박스 값을 인쇄하는 방법 이것은 데이터를 제출하는 데 필요한 체크박스와 버튼 목록입니다.<label>AccessLocations</label><br/>&l...

에서 2024-04-06 13:07:43

0

2

337

관련 주제

더>

• win11 설치 중 네트워크 연결을 건너뛰는 방법
• 느린 컴퓨터 지연 및 느린 응답을 처리하는 방법
• Douyin Xiaohuoren을 얻는 방법
• Parsint 함수의 역할
• rgb를 16진수 rgb로
• 컴퓨터에서 소리가 나지 않는 경우 해결 방법
• Hongmeng OS는 어떤 휴대폰을 지원합니까?
• 람다 식