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. 다중 버튼 그룹
여러 개의 684627b214c81cfd3ae37c425ce03d42을 efce18deda7b1499fa22da873b78ebdc에 넣으세요.

<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="로드 중..."을 추가합니다.

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

4ff9e1264f4f5a9fe887ee2dfcfae696로드 중65281c5ac262bf6d81768915a4a77ac0

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

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

3e03b40f9fda97c138f9aa807a093ecb단일 토글6e19ac9ef202a2bbf9757261f0a6a210

체크박스. 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("전환")
자동으로 트리거되도록 데이터 전환 속성을 추가할 수도 있습니다.
80de50797c035e4b05e5c13cbd950a75…65281c5ac262bf6d81768915a4a77ac0

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

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

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

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

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

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

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