详解Bootstrap按钮

作者:mrr 时间:2023-07-02 05:24:44 

描述

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>

效果:

详解Bootstrap按钮

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>

效果如下所示:

详解Bootstrap按钮

按钮状态

按钮分为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>

详解Bootstrap按钮

按钮标签

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

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

标签:bootstrap,按钮
0
投稿

猜你喜欢

  • 浏览器tab的设计

    2008-08-11 13:03:00
  • javascript 文档的编码问题解决

    2024-04-22 22:45:22
  • Python Pygame实战之打砖块小游戏

    2021-04-10 01:41:11
  • element中table操作按钮展示与折叠的实现示例

    2024-05-02 16:35:35
  • XML与HTML的结合(下)

    2008-09-05 17:20:00
  • 用图片做网站输入验证的构想

    2009-02-02 10:18:00
  • python 用struct模块解决黏包问题

    2023-08-18 02:13:20
  • asp通过数组给您的文件列表排序

    2007-10-22 13:45:00
  • MySQL定时备份之使用Linux下的crontab定时备份实例

    2024-01-18 01:43:52
  • Python 解析XML文件

    2021-12-08 02:24:46
  • python如何解析复杂sql,实现数据库和表的提取的实例剖析

    2024-01-21 06:37:51
  • ASP读取MySQL数据库出现乱码的解决办法

    2010-03-08 14:25:00
  • MySQL如何通过Navicat实现远程连接

    2024-01-13 23:07:07
  • Python使用tkinter实现摇骰子小游戏功能的代码

    2021-03-18 09:15:16
  • Python浅析生成器generator的使用

    2023-09-02 16:58:40
  • 详解DeBug Python神级工具PySnooper

    2022-12-14 15:44:31
  • SQL Server 2019自定义安装教程

    2024-01-12 21:14:22
  • C#处理MySql多个返回集的方法

    2024-01-21 15:30:08
  • Python二进制数据结构Struct的具体使用

    2022-07-10 00:01:59
  • Python利用pythonping处理ping的示例详解

    2023-08-12 00:28:45
  • asp之家 网络编程 m.aspxhome.com