详解Bootstrap按钮

前端技术 2023/09/08 JavaScript

描述

Bootstrap Button（按钮）JavaScript 插件允许您加强按钮的功能。您可以控制按钮的状态，也可以为组件创建按钮组，比如工具条。

什么是必需的

您必须引用 jquery.js 和 bootstrap-button.js - 这两个 JavaScript 文件。它们都位于 docs/assets/js 文件夹内。

如何使用它

您可以不编写任何 JavaScript 只通过标记使用该插件，也可以通过 JavaScript 启用按钮。

Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

以下样式可用于<a>, <button>, 或 <input> 元素上：

类 描述
.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式（未被操作）
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击
.disabled 禁用按钮

首先看下不同颜色的按钮：

<html lang=\"en\"> 
<head> 
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--> 
  <meta http-equiv=\"content-type\" content=\"text/html;charset=utf-8\" /> 
  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> 
  <meta name=\"Keywords\" content=\"关键词一，关键词二\"> 
  <meta name=\"Description\" content=\"网站描述内容\"> 
  <meta name=\"Author\" content=\"Yvette Lau\"> 
  <meta name = \"viewport\" content = \" width = device-width, initial-scale = 1 \"> 
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel=\"stylesheet\" type=\"text/css\" href=\"../bootstrap-3.3.5-dist/css/bootstrap.min.css\"> 
</head> 
  <body style=\"padding: 20px;\"> 
    <!-- 标准的按钮 --> 
    <button type=\"button\" class=\"btn btn-default\">默认按钮</button> 
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> 
    <button type=\"button\" class=\"btn btn-primary\">原始按钮</button> 
    <!-- 表示一个成功的或积极的动作 --> 
    <button type=\"button\" class=\"btn btn-success\">成功按钮</button> 
    <!-- 用于要弹出信息的按钮 --> 
    <button type=\"button\" class=\"btn btn-info\">信息按钮</button> 
    <!-- 表示应谨慎操作的动作 --> 
    <button type=\"button\" class=\"btn btn-warning\">警告按钮</button> 
    <!-- 表示一个危险动作的按钮 --> 
    <button type=\"button\" class=\"btn btn-danger\">危险按钮</button> 
    <!-- 让按钮看起来像一个链接，但同时保持按钮的行为 --> 
    <button type=\"button\" class=\"btn btn-link\">链接按钮</button> 
  </body> 
</html>

效果：

btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link给按钮加上了不同的样式。

按钮大小

鉴于head部分都是相同的，只列出Body的内容。

<body style=\"padding: 20px;width:500px;\"> 
  <!-- 标准的按钮 --> 
  <button type=\"button\" class=\"btn btn-default\">默认按钮</button> 
  <button type=\"button\" class=\"btn btn-lg btn-default\">大的默认按钮</button> 
  <br/><br/> 
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> 
  <button type=\"button\" class=\"btn btn-primary\">原始按钮</button> 
  <button type=\"button\" class=\"btn btn-sm btn-primary\">小的原始按钮</button> 
  <br/><br/> 
  <!-- 表示一个成功的或积极的动作 --> 
  <button type=\"button\" class=\"btn btn-success\">成功按钮</button> 
  <button type=\"button\" class=\"btn btn-xs btn-success\">特别小的成功按钮</button> 
  <br/><br/> 
  <!-- 用于要弹出信息的按钮 --> 
  <button type=\"button\" class=\"btn btn-info\">信息按钮</button><br/><br/> 
  <button type=\"button\" class=\"btn btn-block btn-info\">块级信息按钮</button> 
</body>

效果如下所示：

按钮状态

按钮分为active和disabled两种状态、
激活状态：按钮呈现出被按压的外观，即背景颜色变深、深色边框和阴影。
禁用状态：按钮颜色会变淡 50%，并失去渐变

看具体的例子：

<body style=\"padding: 20px;width:500px;\"> 
  <!-- 标准的按钮 --> 
  <button type=\"button\" class=\"btn btn-default\">默认按钮</button> 
  <button type=\"button\" class=\"btn btn-default active\">激活的默认按钮</button> 
  <br/><br/> 
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> 
  <button type=\"button\" class=\"btn btn-primary\">原始按钮</button> 
  <button type=\"button\" class=\"btn btn-primary active\">激活的原始按钮</button> 
  <br/><br/> 
  <!-- 表示一个成功的或积极的动作 --> 
  <button type=\"button\" class=\"btn btn-success\">成功按钮</button> 
  <button type=\"button\" class=\"btn btn-success active\">激活的成功按钮</button> 
  <br/><br/> 
  <!-- 用于要弹出信息的按钮 --> 
  <button type=\"button\" class=\"btn btn-info\">信息按钮</button> 
  <button type=\"button\" class=\"btn btn-info active\">激活的信息按钮</button> 
  <br/><br/> 
 
  <button type=\"button\" class=\"btn btn-default\">默认按钮</button> 
  <button type=\"button\" class=\"btn btn-default disabled\">禁用的默认按钮</button> 
  <br/><br/> 
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> 
  <button type=\"button\" class=\"btn btn-primary\">原始按钮</button> 
  <button type=\"button\" class=\"btn btn-primary disabled\">禁用的原始按钮</button> 
  <br/><br/> 
  <!-- 表示一个成功的或积极的动作 --> 
  <button type=\"button\" class=\"btn btn-success\">成功按钮</button> 
  <button type=\"button\" class=\"btn btn-success disabled\">禁用的成功按钮</button> 
  <br/><br/> 
  <!-- 用于要弹出信息的按钮 --> 
  <button type=\"button\" class=\"btn btn-info\">信息按钮</button> 
  <button type=\"button\" class=\"btn btn-info disabled\">禁用的信息按钮</button> 
</body>

按钮标签

a,input都可以表现的像一个按钮，但是避免跨浏览器不一致，最好使用Button标签。

<body style=\"padding: 20px;\"> 
  <a class=\"btn btn-default\" href=\"#\" role=\"button\">超链接按钮</a> 
  <button class=\"btn btn-default btn-primary\" type=\"submit\">button按钮</button> 
  <input class=\"btn btn-default btn-success\" type=\"button\" value=\"input按钮\"> 
  <input class=\"btn btn-default btn-info\" type=\"submit\" value=\"submit按钮\"> 
</body>

以上内容给大家介绍了Bootstrap按钮相关知识，希望大家喜欢。

本文地址：https://www.stayed.cn/item/21689

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案