Bootstrap按钮组与下拉菜单及JavaScript交互详解
本文详细解析Bootstrap中按钮组与下拉按钮的实现方法，涵盖单个、多个及垂直按钮组的用法。重点介绍下拉菜单的大小控制、分割按钮及向上菜单样式，并深入讲解利用JavaScript API控制按钮加载、切换、重置等状态的具体操作与注意事项。
接下来将介绍Bootstrap框架中按钮组的具体应用方法，内容包含以下部分。
按钮组的基本用法
一、按钮组（Button Groups）
1、单个按钮组 使用.btn-group类包裹多个带有.btn类的<button>元素即可实现。
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
</div>
2、多个按钮组 将多个包含.btn-group类的<div>元素放入一个.btn-toolbar容器中。
<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> 下拉按钮的实现与样式
二、下拉按钮（Button Dropdowns）
示例代码
<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>
JavaScript状态控制详解
三、JavaScript交互
示例 实现加载状态。需添加data-loading-text="Loading..."属性。
代码如下:
<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>开关状态。需添加data-toggle="button"属性。
代码如下:
<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>复选框模式。在.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("toggle") 或者直接在按钮上添加data-toggle属性以自动触发。 <button type="button" class="btn" data-toggle="button" >…</button>
使用JavaScript代码触发加载状态，此时按钮会显示data-loading-text属性中指定的文本内容。
$().button("loading")
<button type="button" class="btn" data-loading-text="loading stuff..." >...</button> 注意：Firefox浏览器在页面加载时可能会保持按钮处于禁用状态。解决方法是在按钮元素上添加autocomplete="off"属性。
使用JavaScript代码重置按钮状态。 调用$().button("reset")
重置按钮状态，并将按钮文字更改为指定内容。示例中的complete仅为演示，可替换为其他逻辑。
<button class="btn" data-complete-text="finished!" >...</button>
<script>
$('.btn').button('complete')
</script> 以上就是本文的全部内容，希望对大家的学习有所帮助。
JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比：灵活性 vs 开发效率
2026-11-05 09:45:01