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框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用buttona标签来制作按钮。

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">
&times;
</button>
</p>

关于bootstrap--表单(按钮<button>效果、大小、禁用)的更多相关文章

  1. bootstrap 表单+按钮+对话框

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

  3. bootstrapValidator.js,最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  4. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  5. 测开之路一百一十一:bootstrap表单

    bootstrap表单 引入bootstrap和jquery 默认表单 垂直表单 表单属性绑定:for属性,当for的属性和id的属性相同时,单击for标签,光标自动跳到相同属性的输入框 复选框 水平 ...

  6. Bootstrap表单

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...

  7. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  8. 第二百三十四节,Bootstrap表单和图片

    Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表单 Bootstrap ...

  9. bootstrap 表单类

    bootstrap 表单类 表单美化 用法: 向父元素 <form role="form"></form>     添加 role="form&q ...

  10. 只用css来美化的上传表单按钮(抄的迅雷的)

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>文件 ...

随机推荐

  1. [置顶] Win8.1慎用360优化,可能导致安装驱动出现数据无效的问题。附解决方法

    2013年9月30日,更新说明: 不知道是不是我禁用了其他驱动造成 今天开机后连接手机,我的电脑里没出现MTP设备 于是打开设备管理器,发现MTP,也就是我的XPERIA U出现了感叹号图标 右键更新 ...

  2. php 回调函数

    publicfunction transaction(Closure $callback){     $this->beginTransaction();     // We'll simply ...

  3. C#位移运算符

    代码如下: /// <summary> /// 位移运算符"<<"左位移运算符,">>"右位移运算符 /// 在进行位移运算 ...

  4. SQL转换函数to_char/to_date/to_number

    日期型->字符型转换函数to_char(d [,fmt]) 函数to_char(d [,fmt])用于将日期型数值转换为字符串(varchar2类型),其中参数d用于指定日期值,fmt用于指定要 ...

  5. C#。5 函数 类

    函数:能够独立完成某个功能的模块.          好处:1.结构更清析(编写.维护方便 ).2.代码重用.3.分工开发.          四要素:名称,输入(参数),输出(返回的类型),加工(函 ...

  6. (转)根据IP返回对应的位置信息

    其实就是使用了百度的IP库的功能接口,然后处理下就行了,效果图如下: 准备工作: 1.注册成为开度开发者,创建应用获得百度API调用的AK秘钥,百度开发中心地址:http://developer.ba ...

  7. 基于Spring MVC的简单HelloWorld实例

    1.导包 2.web.xml文件配置 3.包结构定义以及控制器的编写 4.xxxx-servlet文件配置 5.返回的视图(jsp)编写   6.源码 下载:http://download.csdn. ...

  8. 腾讯RTX登录提示失败问题及处理办法

    出现问题时图片: 解决步骤: 首先ping一下RTX管理器所在的的ip地址 telnet一下服务器的端口 8000,8010 是否能通. 具体操作: 在无法登陆的客户端电脑上开始-运行-输入cmd 确 ...

  9. Cookie 添加,读取,删除

    Name,value – 声明时 new Cookie(key,value); Path        - 默认值,即为当前保存cookie的这个serlvet所在的路径. 如果Cookie在这样的路 ...

  10. C++中的struct与class继承方式

    代码: #include <iostream> #include <cstdio> using namespace std; //class A{ struct A{ publ ...