关于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>文件 ...
随机推荐
- Spring + mybatis整合方案总结 结合实例应用
Spring + mybatis整合实例应用 项目结构图 (Spring3.0.2 +mybatis3.0.4) 方案一: 通过配置文件整合Spring和mybatis 应用数据库 -- --数据库 ...
- android4.4 settings 中控制卡1 卡2都振动
在package/app/Settings/src/com/android/settings/SoundSettings.java
- win32线程池代码(WinApi/C++)
win32线程池代码(WinApi/C++) 健壮, 高效,易用,易于扩, 可用于任何C++编译器 //说明, 这段代码我用了很久, 我删除了自动调整规模的代码(因为他还不成熟)/********** ...
- c++11 : static_assert和 type traits
static_assert提供一个编译时的断言检查.如果断言为真,什么也不会发生.如果断言为假,编译器会打印一个特殊的错误信息. 1 2 3 4 5 6 7 8 9 10 11 12 13 templ ...
- 【iOS开发之OC和JS互调】
1.OC中调用JS代码 公司的移动端需要加载一个现有的网页,并且要在原网页要做一些小的调整,如将网页的标题改一下加载到手机的app上,此时就可以在app的oc代码中加入JS代码来实现.如下例子,我要加 ...
- 怎么设置tomcat管理员的用户名和密码
我们常常要进入Tomcat的管理界面来进行相应的操作,我们首先得有一个管理员的账户和密码.而Tomcat默认是没有管理员账户的,那么我们该怎么来添加一个管理员账户呢? 如果我们输入错误的Tomcat管 ...
- NPOI心得
一个Excel文件表示为一个IWookbook,Sheet是ISheet,其它细分为IRow,ICell. 2003和2007版本为IWookbook接口的不同实现:HSSFWookbook和XSSF ...
- Resharper
http://baike.baidu.com/link?url=H8DVtrvKV1Cg-Hrz82C6ZiJOUXbi_3BfoROe-RlHhctPna4-BFfglPh2OsR-KmCqRZ7_ ...
- 华为oj 统计字符串不同字符
#include <stdio.h> #include <string.h> int firstSingle(char *str) { int hash[128]={0}; f ...
- objectivc-c---block
基本格式: returnType (^blockName[num])(paramList|void) = ^returnType(paramList|void){block Body}; 标红部分可根 ...