自学bootstrap遇到的疑惑篇:

按钮状态——禁用

在Bootstrap框架中,要禁用按钮有两种实现方式:

  方法1:在标签中添加disabled属性

  方法2:在元素标签中添加类名“disabled”

两者存在区别:

“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。

如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。

对于<a>标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。

而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

但是经过我自己的测试,发现不论是加上disabled还是加上.disabled类,鼠标都是无法点击的,这是因为在bootstrap中设置了禁用鼠标事件:

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}

 但是可以通过键盘快捷键来完成按钮默认的行为事件;

学习bootstrap遇到的问题--001 关于bootstrap中类.disabled不禁用默认行为的更多相关文章

  1. 【读书笔记《Bootstrap 实战》】1.初识Bootstrap

    作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进 ...

  2. Bootstrap Magic – 轻松创建自己的 Bootstrap 主题

    Bootstrap Magic 是一款基于 Bootstrap 和 AngularJS 的主题创建工具.您可以轻松地创建您自己的 Twitter Bootstrap 主题,可以立即看到你的内容变化.您 ...

  3. ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素

    阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Bootstrap 验证样式 ASP.NET MVC创建包含Bootstrap样式编辑模板 小结 Bootstra ...

  4. ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  5. Bootstrap页面布局1 - 下载BS(bootstrap简称)

    1.bootstrap 官方网站:http://wrongwaycn.github.io/bootstrap/docs/index.html 2.如图: 3.下载后得到如下目录结构 bootstrap ...

  6. bootstrap上传表单的时候上传的数据默认是0 一定要小心

    bootstrap上传表单的时候上传的数据默认是0 一定要小心

  7. org.elasticsearch.bootstrap : JNA not found. native methods will be disabled

    在pom.xml中添加以下依赖,解决elasticsearch的WARN: <dependency> <groupId>com.sun.jna</groupId> ...

  8. bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6

    自己写了个Django系统,用到了Django-bootstrap3结果在浏览器控制台发现报错:bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaS ...

  9. 错误Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6 错误详解

    引入Bootstrap的顺序进行修改 <% //获取以/开始,不以/结尾的部分 pageContext.setAttribute("APP_PATH", request.ge ...

随机推荐

  1. webpack入门指南(转载)

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  2. Java 元注解

    元注解@Target,@Retention,@Documented,@Inherited * * @Target 表示该注解用于什么地方,可能的 ElemenetType 参数包括: * Elemen ...

  3. [Python] Removing a non-empty folder

    Removing a non-empty folder You will get an ‘access is denied’ error when you attempt to use os.remo ...

  4. 用Navicat Premium 远程连接oracle数据库

    1.安装Navicat Premium软件(我的是11.0.7版本)(假设安装路径为D:\NavicatLite\Navicat Premium) 2.下载 instantclient-basic-n ...

  5. 【整理】--【GPIO】OK6410

    S3C6410的GPIO引脚相对来说比较多,而且大部分引脚都具有多重复用功能,如何在linux上用最简单的方式来控制GPIO这需要我们好好研究一下底层的代码了,其实方法有很多种,鉴于在操作系统端控制G ...

  6. 关于winform中*.exe.config中的appSettings的节点的读取与修改

    //读取到这个节点 string file = System.Windows.Forms.Application.ExecutablePath; Configuration config = Conf ...

  7. Swap Swap,即交换分区

    Swap,即交换区,除了安装Linux的时候,有多少人关心过它呢?其实,Swap的调整对Linux服务器,特别是Web服务器的性能至关重要.通过调整Swap,有时可以越过系统性能瓶颈,节省系统升级费用 ...

  8. 如何编译MongoDB?

    本文将在Linux环境下编译Mongodb. 您可以选择已经编译好的版本直接使用,也可以尝试自己编译.https://www.mongodb.org/downloads#production   官方 ...

  9. 调试SQLSERVER (二)使用Windbg调试SQLSERVER的环境设置

    调试SQLSERVER (二)使用Windbg调试SQLSERVER的环境设置 调试SQLSERVER (一)生成dump文件的方法调试SQLSERVER (三)使用Windbg调试SQLSERVER ...

  10. 如何查看Android的Keystore文件的SHA1值

    像使用百度地图api时候,一般需要获取keystore的SHA1值,这里就手把手教大家如何查看Android的keystore文件中的SHA1值. 第一步: 打开cmd,切换到keystore所在的文 ...