Bootstrap3 按钮状态切换

按钮状态切换

将单个按钮的 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 上开源。

Bootstrap3 按钮状态切换相关推荐

Bootstrap3 按钮状态提示
按钮 Bootstrap中的按钮插件(button.js)被赋予多种功能,如为工具条之类的组件赋予状态提示功能.状态切换功能.或者按钮组的功能. 在页面多次加载之间,Firefox 仍然保持表单控件的 ...
Bootstrap 状态切换
状态切换将单个按钮的 data-toggle 属性设置 button,或通过简单的JavaScript编程,就可以激活按钮的行为状态,让它在未激活和激活状态之间进行切换.如: <button ...
Bootstrap 按钮状态提示
按钮 Bootstrap按钮插件需要 bootstrap-button.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-button.js 文件. Bootstrap ...
关于MFC共享DLL的模块状态切换 .
什么是模块状态? 在每个模块(EXE或DLL)中,都存在一种全局的状态数据,MFC依靠这种全局的状态数据来区分不同的模块,以执行正确的操作.这种数据包括:Windows实例句柄(用于加载资源),指向应 ...
IOS选中按钮状态的记录
IOS选择按钮状态的记录 @interface NJTabBar() {NJTabBarButton *_selectedButton; } @property(nonatomic,strong)UI ...
java不同进程的相互唤醒_Java线程生命周期与状态切换
前提最近有点懒散,没什么比较有深度的产出.刚好想重新研读一下JUC线程池的源码实现,在此之前先深入了解一下Java中的线程实现,包括线程的生命周期.状态切换以及线程的上下文切换等等.编写本文的时候, ...
详解Java线程生命周期与状态切换
前提最近有点懒散,没什么比较有深度的产出.刚好想重新研读一下JUC线程池的源码实现,在此之前先深入了解一下Java中的线程实现,包括线程的生命周期.状态切换以及线程的上下文切换等等.编写本文的时候, ...
用状态机做人物（AI）的状态切换以及动画效果——人物动画以及切换
github: https://github.com/lucaschen1993/PRG_DEMO 前言在之前写状态机文章的时候介绍过,基于事件与委托实现的状态机.这篇文章将介绍状态机的使用,以及人 ...
Java线程生命周期与状态切换
前提# 最近有点懒散,没什么比较有深度的产出.刚好想重新研读一下JUC线程池的源码实现,在此之前先深入了解一下Java中的线程实现,包括线程的生命周期.状态切换以及线程的上下文切换等等.编写本文的时候 ...
PDPS软件：机器人点焊伺服焊枪大开、小开、关闭状态切换设置
本文已经首发在个人微信公众号:工业机器人仿真与编程(微信号:IndRobSim),欢迎关注! 在机器人点焊工艺中,为了缩小焊枪的无效开合时间,通常会设置点焊焊枪的大开.小开和关闭三种工作状态,大开状态 ...

Bootstrap3 按钮状态切换

按钮状态切换

Bootstrap3 按钮状态切换相关推荐

最新文章

热门文章