【Bootstrap学习 day7】
Bootstrap按钮
按钮样式
使用.btn相关类实现
<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>

按钮类可以用于<a><button><input>元素
<a href="#" class="btn btn-success">链接按钮</a>
<button type="button" class="btn btn-success">按钮</button>
<input type="button" class="btn btn-success" value="输入按钮">
<input type="submit" class="btn btn-success" value="提交按钮">
<input type="reset" class="btn btn-success" value="重置按钮">

按钮设置边框
Bootstrap5还提供了八个轮廓/边框按钮。鼠标移动到按钮上添加突出到效果:
<button type="button" class="btn 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>

按钮尺寸
使用.btn-lg类设置大按钮,使用.btn-sm设置小按钮
<button type="button" class="btn btn-outline-primary btn-lg">主要按钮</button>
<button type="button" class="btn btn-outline-primary btn-sm">主要按钮</button>

块级按钮
如需要创建跨越父元素整个宽度的块级按钮,通过添加.btn-block类设置,.d-grid类设置在父级元素中:
<div class="d-grid"><button type="button" class="btn btn-primary btn-block">100%宽度的按钮</button>
</div>

| class | 描述 |
|---|---|
| .btn-lg | 这会让按钮看起来比较大 |
| .btn-sm | 这会让按钮看起来比较小 |
| .btn-block | 这会创建块级的按钮,会横跨父元素的全部宽度 |
活动/禁用按钮
按钮可设置为激活或者禁止点击的状态
.active类可以设置按钮是可用的,disabled属性可以设置按钮是不可点击的。注意<a>元素不支持disabled属性,你可以通过添加.disabled类来禁止链接的点击。
<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>

注意:disabled类只会使链接在视觉上看起来像已禁用,但是除非从中删除href属性,否则该链接将保持可点击状态。
按钮组
要创建一个按钮组,只需将一系列具有.btn类的按钮包装在<div>元素中,然后在其上应用.btn-group类。还可以在单个按钮上应用.active类以指示活动状态。
基本的按钮组
<div class="btn-group"><button type="button" class="btn btn-success">按钮一</button><button type="button" class="btn btn-warning">按钮二</button><button type="button" class="btn btn-danger">按钮三</button>
</div>

按钮组的大小
可以使用.btn-group-lg|sm|xs类来设置按钮组的大小,可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。
垂直按钮组
可以使用按钮组显示为垂直堆叠而不是水平堆叠。为此,只需将类.btn-group替换为类.btn-group-vertical
<div class="btn-group-vertical"><button type="button" class="btn btn-success">按钮一</button><button type="button" class="btn btn-warning">按钮二</button><button type="button" class="btn btn-danger">按钮三</button>
</div>

相关文章:
【Bootstrap学习 day7】
Bootstrap按钮 按钮样式 使用.btn相关类实现 <button type"button" class"btn">基本按钮</button> <button type"button" class"btn btn-primary">主要按钮</button> <button type"button" cl…...
Zookeeper无法启动,报“Unable to load database on disk”
转载说明:如果您喜欢这篇文章并打算转载它,请私信作者取得授权。感谢您喜爱本文,请文明转载,谢谢。 问题描述: 测试环境部署zookeeper的服务器磁盘满了,引起服务异常,将zookeeper进程杀掉之后&…...
【Web2D/3D】CSS3的2D/3D转换、过渡、动画(第一篇)
1. 前言 本篇开始介绍Web2D和3D相关基础知识,会从CSS3的2D/3D转换、过渡、动画,讲到Canvas 2D图形绘制,再到SVG,最后到WebGL。 坐标系:左上点是坐标原点(0,0),x轴正方向向右,y轴正方向向下&…...
uView NumberBox 步进器
该组件一般用于商城购物选择物品数量的场景 注意:该输入框只能输入大于或等于0的整数 #平台差异说明 App(vue)App(nvue)H5小程序√√√√ #基本使用 通过v-model绑定value初始值,此值是双向绑定的&…...
三菱plc的点动控制循环(小灯闪烁,单控气缸循环)
以为前一段时间小编做了一个气缸定时循环的程序,根据程序有不足之处,所以小编写下这篇文章,将网络上的plc小灯控制进行总结!如果对你有帮助,不要忘了点赞收藏!如果有更加好的梯形图,欢迎评论&am…...
学习Go语言Web框架Gee总结--http.Handler(一)
学习Go语言Web框架Gee总结--http.Handler http-base/go.modhttp-base/main.gohttp-base/gee/gee.gohttp-base/gee/go.mod 网站学习来源:Gee 代码目录结构: http-base/go.mod //指定当前模块的名称为 "example" module example//指定当前模…...
react+redux+antd-mobile 之 记账本案例
1.环境搭建 //使用CRA创建项目,并安装必要依赖,包括下列基础包 //1. Redux状态管理 - reduxjs/toolkit 、 react-redux //2. 路由 - react-router-dom //3. 时间处理 - dayjs //4. class类名处理 - classnames //5. 移动端组件库 - antd-mobile //6. 请…...
Day22
Day22 一,生产者消费者模型 1.1,单个生产者单个消费者 public class Test01 {/*** 知识点:生产者消费者模型 - 单个生产者单个消费者* * 分析:* 产品类 - Phone:属性(brand,price)* 生产者线程 - Producer* 消费者线程 - Consumer* …...
Windows下linux 子系统 WSL2怎样使用usb串口(USBIPD-win4.0.0)
Windows下linux 子系统 WSL2怎样使用usb串口(USBIPD-win4.0.0) 一、widows安装二、ubuntu安装三、widows配置四、wsl配置 一、widows安装 https://github.com/dorssel/usbipd-win 直接下载最新版本的msi文件安装 二、ubuntu安装 sudo apt install lin…...
飞腾Ubantu22.04.3安装OpenNebula测试
1.概述 因OpenneBula官方镜像源只有AMD架构的镜像包不存在ARM的镜像包,借此用源码编译进行测试。 2.官网github地址 下载解压存放在服务器上: https://github.com/OpenNebula/minione/blob/master文件目录: 3.安装依赖包 sudo apt -y …...
gookit/color - Go语言命令行色彩使用库教程
gookit/color - Go语言命令行色彩使用库教程 1.安装2.基础颜色(16-color)3.256色彩/RGB风格 1.安装 go get github.com/gookit/color2.基础颜色(16-color) 提供通用的API方法:Print Printf Println Sprint Sprintf 1、例如: color.Yellow.Println(&q…...
python弹奏《起风了》
代码是很大的! 其实就是python用ctypes调用Win API import ctypes import threading import time winmm = ctypes.windll.winmmclass Scale:Rest = 0C8 = 108B7 = 107A7s = 106A7 = 105G7s = 104G7 = 103F7s = 102F7 = 101E7 = 100D7s = 99D7 = 98C7s = 97C7 = 96B6 = 95A6s…...
Linux---all
Linux常用命令: Linux常用命令-CSDN博客 Linux命令大全(超详细版)_linux命令行大全-CSDN博客Linux常用命令大全(非常全面)-CSDN博客Linux 命令大全(看这一篇就足够)_linux命令-CSDN博客Linux常用命令大全——赶紧收藏…...
前端中级算法题
前端中级算法题 反转字符串 编写一个函数,接受一个字符串作为输入,并返回反转后的字符串。 示例: function reverseString(str) {return str.split().reverse().join(); }reverseString(hello); // 输出: olleh 找出数组中的最大值 编写一个函…...
Ant Design Vue 编译后的网页特点是什么,怎么确认他是用的前端 Ant Design Vue 技术栈的呢?
Ant Design Vue 是一个前端 UI 框架,使用 Vue.js 构建。它包含了大量的预设样式和组件,如按钮、表单、表格等,可以帮助开发者快速构建出优雅且功能丰富的网页。但是,要确定一个编译后的网页是否使用了 Ant Design Vue,…...
python | PYTHON正则表达式
操作符说明实例.表示任何单个字符[]字符集,对单个字符给出取值范围[abc]表示a、b、c,[a-z]表示a到z单个字符[^ ]非字符集,对单个字符给出排除范围[^abc]表示非a或b或c的单个字符*前一个字符0次或无限次扩充abc* 表示ab,abc&#x…...
为什么大学c语言课不顺便教一下Linux,Makefile
为什么大学c语言课不顺便教一下Linux,Makefile,git,gdb等配套工具链呢? 在开始前我有一些资料,是我根据自己从业十年经验,熬夜搞了几个通宵,精心整理了一份「Linux的资料从专业入门到高级教程工具包」&…...
Go后端开发 -- main函数 变量 常量 函数
Go后端开发 – main函数 & 变量 & 常量 & 函数 文章目录 Go后端开发 -- main函数 & 变量 & 常量 & 函数一、第一个main函数1.创建工程2.main函数解析 二、变量声明1.单变量声明2.多变量声明 三、常量1.常量的定义2.优雅的常量 iota 四、函数1.函数返回…...
2023/12/30 c++ work
定义一个Person类,私有成员int age,string &name,定义一个Stu类,包含私有成员double *score,写出两个类的构造函数、析构函数、拷贝构造和拷贝赋值函数,完成对Person的运算符重载(算术运算符、条件运算…...
ctfshow——文件上传
文章目录 文件上传思路web 151web 152web 153知识点解题 web 154web 155web 156web 157web 158web 159web160web 161 文件上传思路 web 151 打开页面显示:前台校验不可靠。说明这题是前端验证。 右键查看源代码,找到与上传点有关的前端代码:…...
工会知识竞赛活动策划:凝聚职工、寓教于乐
🏢 工会知识竞赛活动策划:凝聚职工、寓教于乐思想教育 技能提升 团队建设 融为一体🎯 一、活动核心目标与主题设定在新时代背景下,工会组织肩负着引导职工、服务职工、凝聚职工的重要使命。开展知识竞赛活动,是将思…...
从德雷科风暴看关键通信网络备用电源失效与韧性加固策略
1. 从一场风暴看关键通信网络的脆弱性2012年6月底,一场被称为“德雷科”的强对流风暴席卷了美国中西部,其影响一直延伸到东海岸。这场风暴带来的不仅仅是狂风和暴雨,更是一次对现代基础设施,特别是关键通信网络的极端压力测试。风…...
长沙化妆培训哪家专业
在长沙学化妆,很多人都会问:“哪家更靠谱?”其实,选培训机构,关键不是看广告打得多响,而是看它能不能真正帮你学到能上手、能就业的本事。今天想跟你聊聊一个在本地口碑不错的机构——尚美新时代美业培训&a…...
从无人机悬停到电机调速:深入浅出聊聊‘稳定裕度’到底在保证什么?
从无人机悬停到电机调速:稳定裕度如何守护工程系统的安全边界 当无人机在强风中突然失控摇摆,或是工业机械臂在高速运动时出现震颤,这些现象背后往往隐藏着一个关键控制参数——稳定裕度。对于工程师而言,它不仅是教科书上的数学概…...
解锁iPad生产力:一文详解连接Windows作副屏的实用方案
1. 为什么需要把iPad变成Windows副屏? 作为一名常年奔波在客户现场的技术顾问,我的背包里永远装着三样东西:Windows笔记本、iPad和充电宝。有次在高铁上赶方案,盯着13寸的笔记本屏幕同时开PS修图、写文档和查资料,差点…...
14602开源|黄大年茶思屋第146期第二题:支持采集内容运动的静态3DGS重建
AI无偏差版脱敏题目标准化解题详解(第二题:支持采集内容运动的静态3DGS重建) 模块一:脱敏题目原文复刻 【脱敏题目原文】 支持采集内容运动的静态3DGS重建 基于3DGS及其扩展形式,支持动态建模和静态渲染,输…...
Boomi宣布2026财年亚太及日本地区合作伙伴奖得主
数据激活公司Boomi™今日公布其2026财年亚太及日本地区合作伙伴奖获奖名单。该奖项旨在表彰在该地区推动创新和为客户创造可衡量业务成果的Boomi合作伙伴。 本次获奖企业充分运用Boomi企业平台的全面能力实现数据激活、简化复杂流程和加速智能体转型,帮助客户更快创…...
如何反查竞品最近30天内新增的差评关键词,并优化Listing卖点?
很多亚马逊卖家做竞品分析,只盯价格、BSR、广告位、关键词排名,却很少认真看竞品最近30天新增的差评。其实,最新差评往往比老差评更有价值。老差评更多反映历史问题,可能来自旧批次、旧包装、旧版本;但最近30天新增差评…...
2026国产SCARA机器人品牌深度横评:高精度、零件分拣多维度对比
SCARA机器人作为工业自动化领域的重要装备,凭借其高速、高精度、易集成等优势,广泛应用于3C电子、医疗器械、新能源等精密装配场景。随着国产机器人品牌的崛起,市场竞争格局正在发生深刻变化。本文基于公开技术参数、市场应用数据及行业调研&…...
LettR编辑器光标增强插件:提升代码编辑效率的智能导航方案
1. 项目概述:一个为LettR编辑器量身定制的光标增强插件如果你和我一样,日常重度依赖代码编辑器,那你一定对光标这个看似不起眼的小东西又爱又恨。爱的是,它是我们与代码世界交互的核心;恨的是,当代码文件越…...
