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

详解Bootstrap各式各样的按钮(推荐)

 更新时间：2016年12月13日 11:44:20   作者：Tiramisu_C  
Bootstrap为我们提供了各式各样漂亮的按钮，我们无需自己给按钮写样式，直接使用它给我们提供的类样式，使用在我们的按钮上，非常的简单方便

Bootstrap为我们提供了各式各样漂亮的按钮，我们无需自己给按钮写样式，直接使用它给我们提供的类样式，使用在我们的按钮上，非常的简单方便。

为尊重原创这里贴一下参考的教程：http://www.runoob.com/bootstrap/bootstrap-buttons.html。在我的很多笔记中，您可能会看到我贴的www.runoob.com相关的网址，在这里先声明这不是广告，我只是觉得每个人的劳动成果都应该被尊重。这个网站收集了很多的信息，供我学习，我非常的感激，借鉴于这些很好的教程，我做出自己的总结，归纳知识点，方便自己记忆。假如您在做项目或者学习中，正好需要这方面的知识，然后这篇文章刚好可以帮到您，那我将会非常开心。

活学活用，自己利用bootstrap的样式来做一个表格，里边放一些知识点：

类样式 描述
.btn 圆角灰色按钮，为了让按钮不那么尖锐，我们的按钮都应该使用这个样式来获得圆角，然后再覆盖上其他的特性。
.btn-default 默认/标准按钮，白色的按下灰色。
.btn-primary 原始按钮样式（未被操作），这个跟active相对应，他是一个按钮没被操作的样式，而active是按钮被点击时显示的相应的样式。
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 大按钮
.btn-sm 小按钮
.btn-xs 超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击，按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。
.disabled 禁用按钮，颜色会变淡 50%，并失去渐变。

按钮的各个效果如下：

很明显，圆角按钮~成功按钮都是比较容易理解的，我们主要讲一下原始按钮，激活按钮和禁用按钮。

原始按钮（btn-primary）：指的是一个按钮（原始按钮，激活按钮和禁用按钮都使用了成功按钮的样式），还没有被操作的样式，这里的表现跟其左边的成功按钮样式是一致的，都是没有被按下的样子；

激活按钮（.active）：按钮被点击，被按压时的样式，这个可以说跟原始按钮是 相对应的。

禁用按钮（.disabled）：看到效果很明显，相比于成功按钮，颜色变淡，失去渐变，有一层 蒙蒙的效果，当我们的鼠标悬停在上边的时候，会出现红色的禁用圆圈，这个样式非常利于用户体验。

附上代码：

<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>bootsrap按钮</title> 
 <link rel="stylesheet" href="../libs/bootstrap.css"> 
</head> 
<body> 
 <div class="container"> 
  <button class="btn">圆角按钮</button> 
  <button class="btn btn-default">默认按钮</button> 
  <button class="btn btn-info">信息按钮</button> 
  <button class="btn btn-warning">警示按钮</button> 
  <button class="btn btn-danger">危险按钮</button> 
  <button class="btn btn-link">链接按钮</button> 
  <button class="btn btn-lg">大的按钮</button> 
  <button class="btn btn-sm">小的按钮</button> 
  <button class="btn btn-xs">超小按钮</button> 
  <button class="btn btn-block">块级按钮</button> 
  <button class="btn btn-success">成功按钮</button> 
  <button class="btn btn-success btn-primary">原始按钮</button> 
  <button class="btn btn-success active">激活按钮</button> 
  <button class="btn btn-success disabled" role="button">禁用按钮</button> 
 </div> 
</body> 
</html>

以上所述是小编给大家介绍的详解Bootstrap各式各样的按钮，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 解析为什么axios会有params和data两个参数

    解析为什么axios会有params和data两个参数

    本文给大家分享为什么axios会有params和data两个参数,先来回顾一下axios的基本使用,怎么发送一个请求,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • JS实现读取xml内容并输出到div中的方法示例

    JS实现读取xml内容并输出到div中的方法示例

    这篇文章主要介绍了JS实现读取xml内容并输出到div中的方法,涉及javascript针对xml格式数据的读取、遍历、输出等相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • JavaScript中this绑定规则你理解了吗

    JavaScript中this绑定规则你理解了吗

    JavaScript中的this是一个非常重要的概念，也是一个令新手开发者甚至有些不深入理解的多年经验开发者都会感到困惑的概念，如果你希望自己能够使用this编写更好的代码或者更好理解他人的代码，就跟随小编一起理解一下this吧
    2023-07-07
  • uni-app实现web-view图片长按下载解决方案

    uni-app实现web-view图片长按下载解决方案

    uniapp的web-view中图片无法长按保存，IOS下是正常的，但是Android下长按无反应，这篇文章主要介绍了uni-app实现web-view图片长按下载解决方案,需要的朋友可以参考下
    2023-09-09
  • JavaScript实现带箭头标识的多级下拉菜单效果

    JavaScript实现带箭头标识的多级下拉菜单效果

    这篇文章主要介绍了JavaScript实现带箭头标识的多级下拉菜单效果,可实现横向与纵向箭头的形式标识选中菜单项位置的功能,涉及javascript针对页面元素位置的判定与样式动态操作技巧,需要的朋友可以参考下
    2015-08-08
  • JavaScript数据类型及相互间的转换规则

    JavaScript数据类型及相互间的转换规则

    这篇文章主要介绍了JavaScript数据类型及相互间的转换规则，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码

    JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码

    最近项目需要屏蔽客户端的一些操作，加大查看源码等难度，特整理一下这个js，也防止客户端用户误操作，破解方放也很简单这里就不多说了
    2020-10-10
  • js 输入框 正则表达式(菜鸟必看教程)

    js 输入框 正则表达式(菜鸟必看教程)

    下面小编就为大家带来一篇js输入框使用正则表达式校验输入内容的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JavaScript通过Date-Mask将日期转换成字符串的方法

    JavaScript通过Date-Mask将日期转换成字符串的方法

    这篇文章主要介绍了JavaScript通过Date-Mask将日期转换成字符串的方法,涉及javascript日期、数组及字符串操作的相关技巧,需要的朋友可以参考下
    2015-06-06
  • JS实现动态星空背景效果

    JS实现动态星空背景效果

    这篇文章主要为大家详细介绍了JS实现动态星空背景效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11

最新评论