08Bootstrap5按钮

最新推荐文章于 2024-07-07 18:08:04 发布
最新推荐文章于 2024-07-07 18:08:04 发布
阅读量349 收藏 3
点赞数
分类专栏： Bootstrap5 文章标签： css 前端 css3 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46452300/article/details/121846834
版权

08Bootstrap5按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜鸟教程Bootstrap5按钮</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
    <h2>按钮样式</h2>
    <button type="button" class="btn">基本按钮</button>
    <button type="button" class="btn btn-primary">主要按钮</button>
    <button type="button" class="btn btn-secondary">次要按钮</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-dark">黑色</button>
    <button type="button" class="btn btn-light">浅色</button>
    <button type="button" class="btn btn-link">链接</button>
</div>
<!--
按钮类可用于 <a>, <button>, 或 <input> 元素上:
-->
<div class="container mt-3">
    <h2>按钮元素</h2>
    <a href="#" class="btn btn-info" role="button">链接按钮</a>
    <button type="button" class="btn btn-info">按钮</button>
    <input type="button" class="btn btn-info" value="输入框按钮">
    <input type="submit" class="btn btn-info" value="提交按钮">
    <input type="reset" class="btn btn-info" value="重置按钮">
</div>
<!--
按钮设置边框
Bootstrap 5 也可以设置按钮多边框，鼠标移动到按钮上添加突出到效果：
(鼠标悬浮效果）
-->
<div class="container mt-3">
    <h2>按钮设置边框</h2>
    <button type="button" class="btn btn-dark btn-outline-primary">主要按钮</button>
    <button type="button" class="btn btn-outline-secondary">次要按钮</button>
    <button type="button" class="btn btn-outline-success">成功</button>
    <button type="button" class="btn btn-outline-info">信息</button>
    <button type="button" class="btn btn-outline-warning">警告</button>
    <button type="button" class="btn btn-outline-danger">危险</button>
    <button type="button" class="btn btn-outline-dark">黑色</button>
    <button type="button" class="btn btn-outline-light text-dark">浅色</button>
</div>
<!--
不同大小的按钮
Bootstrap 5 可以设置按钮的大小，
使用 .btn-lg 类设置大按钮，使用 .btn-sm 类设置小按钮：
-->
<div class="container mt-3">
    <h2>不同大小的按钮</h2>
    <button type="button" class="btn btn-primary btn-lg">大号按钮</button>
    <button type="button" class="btn btn-primary">默认按钮</button>
    <button type="button" class="btn btn-primary btn-sm">小号按钮</button>
</div>
<!--
块级按钮
通过添加 .btn-block 类可以设置块级按钮，.d-grid 类设置在父级元素中：
-->
<div class="container mt-3">
    <p>通过添加 .btn-block 类可以设置块级按钮，.d-grid 类设置在父级元素中：</p>
    <div class="d-grid">
        <button type="button" class="btn btn-primary btn-block">按钮 1</button>
    </div>
</div>
<!--
如果有多个块级按钮，你可以使用用 .gap-* 类来设置：
-->
<div class="container mt-3">
    <p>通过添加 .btn-block 类可以设置块级按钮，.d-grid 类设置在父级元素中：</p>
    <div class="d-grid gap-3">
        <button type="button" class="btn btn-primary btn-block">100% 宽度的按钮</button>
        <button type="button" class="btn btn-primary btn-block">100% 宽度的按钮</button>
        <button type="button" class="btn btn-primary btn-block">100% 宽度的按钮</button>
    </div>
</div>
<!--
激活和禁用的按钮
按钮可设置为激活或者禁止点击的状态。
.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。
注意 <a> 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。
-->
<div class="container mt-3">
    <h2>按钮状态</h2>
    <button type="button" class="btn btn-primary">主要按钮</button>
    <button type="button" class="btn btn-primary active">点击后的按钮</button>
    <button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
    <a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
</div>
<!--
加载按钮
可以设置一个正在加载的按钮。
-->
<div class="container mt-3">
    <h2>加载按钮</h2>
    <p>按钮添加正在加载按钮:</p>

    <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
    </button>

    <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
    </button>

    <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
    </button>

    <button class="btn btn-primary" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        Loading..
    </button>
</div>
</body>
</html>

在这里插入图片描述

心醉瑶瑾前
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap使用案例
weixin_43160270的博客
12-26 362
案例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w...
bootstrap-input-spinner：一个Bootstrap 4 jQuery插件，用于为数字输入创建输入Spinner元素
01-31
引导输入旋转器 一个Bootstrap 4 / jQuery插件，用于为数字输入创建输入微调元素。 带有浮点示例和德语本地化的屏幕截图。 产品特点 Bootstrap 4 InputSpinner 移动友好且React灵敏， 按住按钮会自动更改值， 具有国际化的数字格式， 允许在输入中设置前缀或后缀文本， 像本地元素一样处理val() ， 动态处理更改的属性值，例如disabled或class ， 在值更改时分派change和input事件，例如本机元素和 无需额外CSS即可工作，仅需要引导程序4。 安装 npm install bootstrap-input-spinner 或者只是下载GitHub存储库并包含src/bootstrap-input-spinner.js 。 用法 HTML 在HTML中创建元素。 这些属性与本机input[type="number"]元素兼容。 < input type =" number " value =" 50 " min =" 0 " max =" 100 " step =" 10 "/> 脚本 这是一个jQuery插件
Bootstrap4 按钮
weixin_45116096的博客
07-09 185
Bootstrap 4 可以很容易实现信息提示框。 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</
Bootstrap框架最新V5 快速入门&直通
qingwan_91的博客
06-03 1325
一篇文章直通Bootstrap
Bootstra5 按钮处理
weixin_44055272的博客
05-15 299
1 基本按钮 1.1 form表单外的按钮 form表单只是一个容器，多个数据项构成一个表单，之所以把他们组成一个表单，是因为这样便于提交。 所以，不用于提交的表单可以单独写出来 <button>这是一个普通按钮</button> 1.2 按钮的基本样式 上面的按钮非常丑陋，因此在引入bootstrap3后可以直接使用btn类。 <button class="btn...
Bootstrap系列之按钮（Buttons）
老__L的博客
05-28 1万+
按钮（Buttons）
详解Bootstrap按钮
09-02
本文将深入探讨Bootstrap按钮的相关知识，包括按钮大小、按钮状态以及按钮标签的样式定义。 **按钮大小** Bootstrap框架提供了三种预设的按钮尺寸，可以方便地适应不同的布局需求： 1. `.btn-lg`（大按钮）：用于...
Bootstrap 按钮
12-14
Bootstrap 按钮 本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示： 以下样式可用于, , 或...
Bootstrap按钮下拉菜单组件详解
09-02
Bootstrap按钮下拉菜单组件是网页设计中常用的交互元素，它为用户提供了一种高效的方式来展示多个相关的操作选项。这个组件基于Bootstrap框架，一个流行的前端开发工具包，它简化了网页的布局和样式设计。在...
bootstrap改变按钮加载状态
09-04
在Bootstrap中，有时候我们需要改变按钮的状态来反映某些操作正在进行，比如加载数据或执行异步任务时，我们通常会将按钮变为加载状态，表示用户需要等待。本篇文章将详细讲解如何在Bootstrap中改变按钮的加载状态。...
c调用按钮点击事件_vue-事件处理
weixin_39628271的博客
11-21 427
1.监听事件 v-on用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。实例1.点击按钮控制台输出<template> <div> <button v-on:click="clickHandler">按钮</button> </div> </template> <scr...
WEB前端网页设计-Bootstrap 输入框组
君逍遥o
03-16 2001
输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
bootstrap 5 使用笔记(一)
最新发布
justin_guo的专栏
07-07 76
/ 关闭 modal 时，抓取 hidden.bs.modal 事件。使用 bootstrap modal 和它的事件。下面三个方法，可以控制 modal 的显示。
bootstrap源码学习与示例：bootstrap-button
weixin_33788244的博客
12-20 124
今天开始说非常简单的bootstrap-button组件。 button设计得非常smart，只有一个调用接口，你可以在$().button(str)中传入不同的字符串，来切换它的文本，其中有三个是框架占用的——toggle, reset, loading。 button的文本切换是通过data-xxx-text自定义属性控制。$().button("xxx")，就是取data-aaa-tex...
为bootstrap的button按钮添加click事件，并且访问servlet
热门推荐
causually的博客
05-24 2万+
&lt;body&gt;&lt;script type="text/javascript"&gt;$(document).ready(function(){ $("#xuanze").click(function(){ location.href="servlet/showtaskdetail"; });}); &lt;/script&gt;&lt;button id="xuanze
Bootstrap 5 保姆级教程（五）：按钮组 & 徽章
Flag少侠的博客
04-16 696
Bootstrap 5 中允许我们将按钮放在同一行上。可以在 元素上添加 .btn-group 类来创建按钮组。
bootstrap按钮点击事件_ACT开发指南|自定义按钮组件
weixin_36059856的博客
12-29 1739
在实际的ACT向导开发中，往往会有这样的功能需求：更改当前Step中的属性控件值，然后多次调用回调方法执行，显然采用传统的组件无法满足要求。这是因为，每个步骤(Step)中只能定义一个<onupdate>回调方法，通过点击Submit组件中的<Next>或者<Finish>按钮去执行，完成后就会自动进入下一个步骤中，也就是说回调函数执行一次。有朋友会想...
Bootstrap v5中按钮样式类名
06-09
Bootstrap v5中按钮的样式类名为 "btn"，可以通过添加不同的后缀来实现不同的样式效果，例如： - "btn-primary"：主要按钮样式 - "btn-secondary"：次要按钮样式 - "btn-success"：成功按钮样式 - "btn-danger"：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

心醉瑶瑾前

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值