Bootstrap 状态切换

状态切换

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

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

当单击时，会激活按钮，激活状态以深色背景显示。效果如图 5‑14所示：

图5-14 Bootstrap按钮激活状态

再次单击时，会去激活按钮，未激活状态以浅色背景显示。效果如图 5‑15所示：

图5-15 Bootstrap按钮回到默认状态

也可以使用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 上开源。

Bootstrap 状态切换相关推荐

hdfs haadmin使用，DataNode动态上下线，NameNode状态切换管理，数据块的balance,HA下hdfs-api变化（来自学习资料）
1.2.4集群运维测试 HA集群中两个namenode状态的管理命令 [root@mini2 hadoop-2.6.4]# bin/hdfs haadmin Usage: DFSHAAdmin [-n ...
关于MFC共享DLL的模块状态切换 .
什么是模块状态? 在每个模块(EXE或DLL)中,都存在一种全局的状态数据,MFC依靠这种全局的状态数据来区分不同的模块,以执行正确的操作.这种数据包括:Windows实例句柄(用于加载资源),指向应 ...
Swift - UITableView状态切换效果
Swift - UITableView状态切换效果效果源码 https://github.com/YouXianMing/Swift-Animations // // TableViewTapAn ...
java不同进程的相互唤醒_Java线程生命周期与状态切换
前提最近有点懒散,没什么比较有深度的产出.刚好想重新研读一下JUC线程池的源码实现,在此之前先深入了解一下Java中的线程实现,包括线程的生命周期.状态切换以及线程的上下文切换等等.编写本文的时候, ...
线程同步有几种方法_架构师面试必问的多线程状态切换及常用方法
架构师面试必问的多线程状态切换及常用方法一.问题背景 Java架构师面试中,多线程状态切换及常用方法几乎是必问的,要掌握创建多线程的方式和方法. 二.创建多线程的几种方式 2.1方式一继承Threa ...
layui复选框组件：如何操控隐藏域实现checked状态切换（含代码、案例、截图）
文章目录 layui复选框组件:如何操控隐藏域实现checked状态切换(含代码.案例.截图) 注意: 案例 · 应用场景 · 说明: 案例 · 截图 · 示下主要代码 · 示下: 使用说明: 博主 ...
Bootstrap 可切换的标签导航
标签间的切换,需要 bootstrap-tab.js 文件支持,因此,要实现可切换的标签导航,首先需要导入 jQuery 库和 bootstrap-tab.js 插件: <script src= ...
详解Java线程生命周期与状态切换
前提最近有点懒散,没什么比较有深度的产出.刚好想重新研读一下JUC线程池的源码实现,在此之前先深入了解一下Java中的线程实现,包括线程的生命周期.状态切换以及线程的上下文切换等等.编写本文的时候, ...
头部导航菜单选中状态切换
头部导航菜单选中状态切换 $(function(){var myNav = $("nav>ul>li>a"),i;for(i=0;i<myNav.lengt ...

Bootstrap 状态切换

状态切换

Bootstrap 状态切换相关推荐

最新文章

热门文章