详解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
投稿猜你喜欢
- pygame.transform 模块允许您对加载、创建后的图像进行一系列操作，比如调整图像大小、旋转图片等操作，常用方法如下所示：下面看一
- 网络爬虫由于一个ip频繁访问同一网站，容易返回456或者被长时间封禁。特别的本机有socks5客户端的设置如下，前提是已经安装了socks5
- 因DWS内核目前支持的线程数很少，个人门户首页打开后，如果并发请求加载的模块数过多，很容易导致DWS崩溃，故而给之前写的AJAX类加了个顺序
今天以一个表单的自动提交，来进一步学习selenium的用法练习目标0）运用selenium启动firefox并载入指定页面（这部分可查看本- 当前，utf8_unicode_ci校对规则仅部分支持Unicode校对规则算法。一些字符还是不能支持。并且，不能完全支持组合的记号。这主要
- 表单介绍说到表单，在HTML中表单的创建时通过<form>标签实现的，在<form>标签内部，字段通过使用<i
- 一. pprint美观打印数据结构pprint模块包含一个“美观打印机”，用于生成数据结构的一个美观的视图。格式化工具会生成数据结构的一些表
- 1.遍历列表需要对列表中的每个元素都执行相同的操作时，可使用for 循环：magicians = ['alice','
- 刷新本地缓存Ctrl+Shift+R查询select *from [table]修改1、普通更新UPDATE [table] set [字段
- 下面展示一下非瀑布流的item布局情况，每个item的高度都是一样的，所以 他的index就是左右左右，position所对应的itemVi
- 模拟动态产生字母验证码图片模拟生成验证码，首先要做的是生成随机的字母，然后对字母进行模糊处理。这里介绍一下 Python 提供的 Pillo
- 今天给一个客户巡检的情况下发从库没有业务的情况mysqld的cpu的一个core占用100％.查主库慢查询也没有关于写的SQL.可以说是典的
- 这个弹出层的登录界面挺好看，很清爽所以转了过来给大家分享，要实现这个功能很简单：首先设计一个登录界面，使用css中的display=&quo
- PYTHON是一门动态解释性的强类型定义语言：编写时无需定义变量类型；运行时变量类型强制固定；无需编译，在解释器环境直接运行。动态和静态静态
- 本文实例讲述了MySQL数据库入门之备份数据库操作。分享给大家供大家参考，具体如下：接上一次：MySQL数据库入门多实例配置一提到数据，大家
- 项目场景：Python版本：3.8因公司业务需求，须开发一套局域网内视频会议软件，此次采用Python实现此功能。程序编写完并在编译器实现此
- 引言在Python中但凡提到的赋值运算符其实讲的就是等号=，在编程语言中的等号含义再也不是数学中的1+1=2的这种等号，真实含义是将=右侧的
- 什么是 PIP？PIP 是 Python 包或模块的包管理器。注释：如果你使用的是 Python 3.4 或更高版本，则默认情况下会包含 P
- 一、excel的内容二、效果三、需要用的库：openpyxlsmptlibemail.mime.textemail.header四、实现步骤
- Python的property属性的功能是：property属性内部进行一系列的逻辑计算，最终将计算结果返回。使用property修饰的实例
