全面解析Bootstrap表单使用方法(表单按钮)

 更新时间:2015年11月24日 10:01:02   作者:傻籽  
这篇文章全面解析了Bootstrap表单的使用方法,本文重点介绍Bootstrap表单按钮,感兴趣的小伙伴们可以参考一下

一、多标签支持

一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。

同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“.btn”。

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

二、定制风格

  在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现。

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>


三、按钮大小

  在Bootstrap框架中,对于按钮的大小,也是可以定制的。  

  在Bootstrap框架中提供了三个类名来控制按钮大小:

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>


四、块状按钮

  Bootstrap框架中提供了一个类名“.btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

 

五、按钮禁用状态

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

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

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

  两者的主要区别是:

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

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

<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>

今天再为大家补充一点新知识:Bootstrap表单提示信息

平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部。

<form role="form">
 <div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 <span class="help-block">你输入的信息是正确的</span>
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 <span class="help-block">请输入正确信息</span>
 <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
 </div>
</form>

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是针对Bootstrap表单按钮的详细介绍,之后还有更多内容会不断更新,希望大家继续关注。

相关文章

  • js命名空间写法示例

    js命名空间写法示例

    这篇文章主要介绍了js命名空间写法,以完整实例形式分析了JavaScript命名空间的写法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • javascript 中动画制作方法 animate()属性

    javascript 中动画制作方法 animate()属性

    这篇文章主要介绍了javascript 中动画制作方法 animate()属性,animate是所有dom元素都有的方法,可以用来最做过度动画,关键帧动画,下面文章的相关介绍需要的小伙伴可以参考一下
    2022-04-04
  • Javascript如何实现对象扁平化实例详解

    Javascript如何实现对象扁平化实例详解

    这篇文章主要给大家介绍了关于Javascript如何实现对象扁平化的扁平化处理简而言之就是对对象中的对象提取出来,放在一个对象里面,形象的说就是把儿子的后代当成自己的儿子,下面相关资料,需要的朋友可以参考下
    2022-11-11
  • Ionic2系列之使用DeepLinker实现指定页面URL

    Ionic2系列之使用DeepLinker实现指定页面URL

    这篇文章主要介绍了Ionic2系列之使用DeepLinker实现指定页面URL的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • 小程序实现左滑删除的效果的实例代码

    小程序实现左滑删除的效果的实例代码

    这篇文章主要介绍了小程序实现左滑删除的效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • JavaScript实现自动生成带水印的图片

    JavaScript实现自动生成带水印的图片

    这篇文章主要来和大家一起讨论如何利用JavaScript实现一个复杂功能,该功能可以自动为图片添加水印,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • JavaScript 反射和属性赋值实例解析

    JavaScript 反射和属性赋值实例解析

    这篇文章主要介绍了JavaScript 反射和属性赋值实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)

    谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)

    这篇文章主要介绍了谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)以及JSON的parse()和stringfy()方法详解,感兴趣的朋友一起看看吧
    2015-10-10
  • 6个DIV 135或246间隔一秒轮番显示效果

    6个DIV 135或246间隔一秒轮番显示效果

    6个DIV 间隔一秒 轮番进行奇偶显示. 比如先135 一秒后 246 然后再135 循环
    2010-07-07
  • 解析js如何获取css样式

    解析js如何获取css样式

    本文主要对javascript如何如何获取css样式进行简要分析,需要的朋友可以看下,希望对大家有所帮助
    2016-12-12

最新评论