详解Bootstrap按钮
作者：mrr 发布时间：2023-07-02 05:24:44
标签：bootstrap,按钮
描述
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按钮相关知识，希望大家喜欢。
0
投稿猜你喜欢
一. torch.squeeze()函数解析1. 官网链接torch.squeeze()，如下图所示：2. torch.squeeze()函- 在网站中经常会生成表格，CSV和Excel都是常用的报表格式，CSV相对来说比较简单，如果大家有疑问我会相继发布一些CSV的实例，这里主要介
- 本文实例讲述了Python实现字符串反转的常用方法。分享给大家供大家参考，具体如下：下面是实现python字符串反转的四种方法：1. 切片d
- 如下所示：python 设置值import pandas as pdimport numpy as npdates = pd.date_ra
- 前言上篇文章讲的进阶一些的PHP特性不知道大家吸收的怎么样了，今天作为本PHP特性函数的最后一篇，我也会重点介绍一些有趣的PHP特性以及利用
- 这篇文章主要介绍了python常用排序算法的实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- 今天在下脚本的时候遇到一个问题，比如有这样的一个字符串 t = "book123456",想把尾部的数字全部去掉，只留下
- 一、excel进入密码加密算法cipher Algorithm=“AES”AES加密算法的详细介绍与
- 一、安装环境PHPMailer 需要 PHP 的 sockets 扩展支持另外登录 QQ 邮箱 SMTP 服务器则必须通过 SSL 加密的，
- JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。但它们之间还是有区别的：ty
- 最近好多分享这个问题的代码，题目说的是用面向对象或者函数式编程，下面是PYTHON的实现示例#!/usr/bin/python#encodi
- 后台线程•Master Thread核心后台线程，主要负责将缓冲池的数据异步刷新到磁盘。例如脏页的刷新，插入缓冲的合并，undo 页的回收等
- 之前使用email模块+smtplib模块发送邮件，虽然可以实现功能，但过程比较繁琐，今天发现一个宝藏库（yagmail），可以说是炒鸡好用
- 前言虽然各种编程语言之间大部分语法存在共通的地方，但是在一些细节的处理上还是千差万别才接触Python不久（之前是学Java的），实在想吐槽
- 一、PyTorch批训练1. 概述PyTorch提供了一种将数据包装起来进行批训练的工具——DataLoader。使用的时候，只需要将我们的
- 在使用python爬取网站信息时，查看爬取完后的数据发现，数据并没有被爬取下来，这是因为网站中有UA这种请求载体的身份标识，如果不是基于某一
- 从python2到python3，这两个版本可以说是从语法、编码等多个方面上都有很大的差别。为了不带入过多的累赘，Python 3.0在设计
- Vue开发环境跨域访问其他服务器或者本机其他端口，需要配置项目中config/index.js文件，修改如下module.exports =
- 在了解了JavaScript1.7的相关更新后，我们再继续关注JavaScript1.8的新特性。在W3C Group带来的JavaScri
- 1. 使用函数 np.random.random由于 np.random.random() 默认生成 0~1 之间的小数，因此需要转换一下如
