脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap demo

使用Bootstrap美化按钮实例代码(demo)

 更新时间：2017年02月03日 11:26:53   作者：秘果_li  
这篇文章主要介绍了使用Bootstrap美化按钮实例代码(demo),非常不错，具有参考借鉴价值，需要的朋友可以参考下

在HTML5中,按钮的常用属性主要为背景颜色和大小

demo代码演示

一. input标签:

<input type="button" value="按钮" class="btn"/>

二. button标签:(这里用button标签举例)

<button type="button" class="btn btn-defult">提交</button>

btn 表示基本样式

btn-defult 表示默认样式

默认样式

btn-primary 表示背景色为蓝色

<button type="button" class="btn btn-defult">按钮</button>

primary

btn-success表示背景色为绿色

<button type="button" class="btn btn-success">按钮</button>

success

其他颜色属性

btn-waring 表示背景色为橙色

btn-danger 表示背景色为红色

btn-info 表示背景色为浅蓝色

btn-link 表示无背景色

<div class="row">
      <button type="button" class="btn btn-defult">按钮</button>
      <button type="button" class="btn btn-primary">按钮</button>
      <button type="button" class="btn btn-success">按钮</button>
      <button type="button" class="btn btn-waring">按钮</button>
      <button type="button" class="btn btn-info">按钮</button>
      <button type="button" class="btn btn-danger">按钮</button>
      <button type="button" class="btn btn-link">按钮</button>
</div>

效果展示

按钮尺寸:

btn-lg 较大

btn-md 中等

btn-sm 较小

btn-xs 更小

<div class="row" style="text-align: center">
      <button type="button" class="btn btn-defult btn-lg">按钮</button>
      <button type="button" class="btn btn-primary btn-md">按钮</button>
      <button type="button" class="btn btn-success btn-sm">按钮</button>
      <button type="button" class="btn btn-warning btn-xs">按钮</button>
      <button type="button" class="btn btn-info btn-sm">按钮</button>
      <button type="button" class="btn btn-danger btn-md">按钮</button>
      <button type="button" class="btn btn-link btn-lg">按钮</button>
</div>

效果展示

其他属性

btn-block 让按钮的宽度变为100%并且成了块级元素

active 表示按钮为激活状态

disabled 表示按钮为禁用状态不可点击

<button type="button" class="btn btn-danger btn-lg" disabled>按钮</button>

禁用变为灰色

三. 用a标签做一个按钮

<a herf="#" class="btn btn-danger active">按钮</a>

以上所述是小编给大家介绍的使用Bootstrap美化按钮实例代码(demo)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • JavaScript递归操作实例浅析

    JavaScript递归操作实例浅析

    这篇文章主要介绍了JavaScript递归操作,由一个阶乘问题开始分析了递归操作的原理、实现方法与相关注意事项,需要的朋友可以参考下
    2016-10-10
  • 纯js分页代码(简洁实用)

    纯js分页代码(简洁实用)

    纯js写的分页代码且简洁实用哦！需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 使用JS获取页面上的所有标签

    使用JS获取页面上的所有标签

    这篇文章主要介绍了使用JS获取页面上的所有标签 ,需要的朋友可以参考下
    2018-10-10
  • JS简单模拟触发按钮点击功能的方法

    JS简单模拟触发按钮点击功能的方法

    这篇文章主要介绍了JS简单模拟触发按钮点击功能的方法,涉及JavaScript事件调用机制及事件触发的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • Emberjs 通过 axios 下载文件的方法

    Emberjs 通过 axios 下载文件的方法

    这篇文章主要介绍了Emberjs 通过 axios 下载文件的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript与C# Windows应用程序交互方法

    JavaScript与C# Windows应用程序交互方法

    JavaScript与C# Windows应用程序交互方法...
    2007-06-06
  • JS实现简单九宫格抽奖

    JS实现简单九宫格抽奖

    这篇文章主要为大家详细介绍了JS实现简单九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • JS实现模态框拖拽动态效果

    JS实现模态框拖拽动态效果

    这篇文章主要为大家详细介绍了JS实现模态框拖拽动态效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript空数组的every()方法实践

    JavaScript空数组的every()方法实践

    every()方法用于检测数组中的所有元素是否都满足指定条件, 本文主要介绍了JavaScript空数组的every()方法实践,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03
  • javasript实现密码的隐藏与显示

    javasript实现密码的隐藏与显示

    用户输入密码时都是显示的星号了，那么我们希望查看明文要怎么查看呢，下面我们只要使用一段简单的js就可以实现查看密码框的明文了，有需要的小伙伴可以来参考下。
    2015-05-05

最新评论