关于bootstrap--表单(按钮<button>效果、大小、禁用)
1、各种标签实现按钮效果:
<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
<a class="btn btn-default">啊哈哈</a>
注:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮。
2、各种按钮效果:


3、各种按钮的大小:

3、按钮禁用:
方法1:在标签中添加disabled属性:
<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
方法2:在元素标签中添加类名“disabled”:
<button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>
</body>
4、关闭符:
<p>关闭图标实例
<button type="button" class="close" aria-hidden="true">
×
</button>
</p>
关于bootstrap--表单(按钮<button>效果、大小、禁用)的更多相关文章
- bootstrap 表单+按钮+对话框
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- bootstrap 表单控件 控件状态 控件大小 help-block
bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...
- bootstrapValidator.js,最好用的bootstrap表单验证插件
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- 详解Bootstrap表单组件
表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss boot ...
- 测开之路一百一十一:bootstrap表单
bootstrap表单 引入bootstrap和jquery 默认表单 垂直表单 表单属性绑定:for属性,当for的属性和id的属性相同时,单击for标签,光标自动跳到相同属性的输入框 复选框 水平 ...
- Bootstrap表单
Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...
- bootstrap表单带验证
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 第二百三十四节,Bootstrap表单和图片
Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表单 Bootstrap ...
- bootstrap 表单类
bootstrap 表单类 表单美化 用法: 向父元素 <form role="form"></form> 添加 role="form&q ...
- 只用css来美化的上传表单按钮(抄的迅雷的)
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>文件 ...
随机推荐
- 移动端页面V2.0项目改版总结
移动端页面已经进行的第三次改版,这个版本遇到的最大难题就是页面跳转的问题. 项目需求: 页面上有分别有优惠估价.我要估价.历史竞拍这三个Tab选项卡,当用户点击估价,选择品牌以后,前端需要去请求品牌接 ...
- android后台截屏实现(1)--源码编译
前段时间接到任务要实现后台截图并上传的功能,在网上查了好久,发现遇到这类问题的人还不少.经过一番对比后发现还是修改并编译源码中的screencap类然后通过JNI来调用这种方法比较可靠,而其他的在ja ...
- HTML, CSS学习笔记(完整版)
第一章 div布局 前几课内容 .htm是早期的后缀.由于那时仅仅能支持长度为3的后缀.因此html与htm是一样的. shtml是server先处理然后再交给浏览器处理 #HTML小知识#之#XHT ...
- Android应用程序中Activity的生命周期
Android应用程序中Activity的生命周期 对于Android来说Activity的生命周期是非常的重要,尤其是对于新学者来说,只有充分了解了Activity的生命周期,才能写出优良用户体验的 ...
- 02-大文件Copy(FileStream文件流类)
static void Main(string[] args) { string source = @"e:\1.exe";//要移动文件的路径 大文件 string target ...
- OpenSuse如何共享目录
如何在SUSE Linux 建立共享文件夹 1./etc/samba/smb.conf 打开配置文档 2.在文档的最后加上共享的文档夹/opt,下面是示例. nte143:/etc/samba # v ...
- spring项目中监听器作用-ContextLoaderListener(项目启动时,加载一些东西到缓存中)
作用:在启动Web容器时,自动装配Spring applicationContext.xml的配置信息. 因为它实现了ServletContextListener这个接口,在web.xml配置这个监听 ...
- C#--方法的参数类型
在C#中,方法的参数类型有四种: 值类型 引用类型 输出类型 数组型参数 值参数: 所谓值参数,就是利用值向方法传递参数时,编译程序给实参的值做一份拷贝,并将此拷贝传递给该方法,这样做的结果就是被调用 ...
- Word隐藏回车符技巧
每一次在Word中敲击回车时,都会留下一个回车符,回车次数多了回车符也就跟着变多了,这的确是太影响视觉效果了,我们要如何操作才能将这些回车符去掉呢?特意为大家献上Word2003和Word2007中隐 ...
- centos 服务器装与python34源码安装
http://www.111cn.net/sys/CentOS/63645.htm 1.CentOS安装Python的依赖包(不安装依赖包,会导致python安装不完整) yum groupinsta ...