Bootstrap3实用教程
4.10.2 按钮状态切换
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

滚动监听

标签页

工具提示

弹出提示

警告框

按钮

按钮状态提示

按钮状态切换

将单个按钮的 data-toggle 属性设置 button,或通过简单的JavaScript编程,就可以激活按钮的行为状态,让它在未激活和激活状态之间来回切换。如:

<button class="btn btn-primary" data-toggle="button" autocomplete="off">Single Toggle</button>

当单击时,会激活按钮,激活状态以深色背景显示。效果如图 4‑15所示:

激活状态
图4-15 激活状态

再次单击时,按钮又回到默认状态,默认状态以浅色背景显示。效果如图 4‑16所示:

默认状态
图4-16 默认状态

也可以使用JavaScript来激活按钮的行为状态。如:

<button class="btn btn-primary">Single Toggle</button>
<script>
$('.btn').click(function() {
  $(this).button('toggle');
});
</script>

说明:

在实现状态切换功能时,Bootstrap并没有限制一定要用 button 元素,只要应用了 .btn 类,它可以是任何元素,比如 <a>、<span>、<input>、<div>等。如:

<span class="btn btn-primary" data-toggle="button">Single Toggle</span >

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验