Bootstrap-HTML（六）Bootstrap按钮

Bootstrap按钮与按钮组

  • 前言
  • 一、Bootstrap按钮
    • （一）、内置按钮样式
    • （二）、按钮边框设置
    • （三）、按钮尺寸调整
    • （四）、块级按钮创建
    • （五）、活动 / 禁用按钮设置
  • 二、Bootstrap按钮组
    • （一）、基本按钮组
    • （二）、按钮组的大小设置
    • （三）、垂直按钮组

前言

  • 在 之前的博客 中，我们已经详细了解了 Bootstrap5 中诸多实用的 组件和样式类，比如 图像相关样式类等，它们在网页布局和内容展示方面发挥着重要作用。
  • 在这篇文章里，我们将 深入探讨 Bootstrap5 中 按钮相关的样式类，看看如何利用它们打造出更美观、更符合网页设计需求的按钮效果。

之前的Bootstrap5博客专栏
https://blog.csdn.net/2402_83322742/category_12848026.html?spm=1001.2014.3001.5482

一、Bootstrap按钮

（一）、内置按钮样式

Bootstrap 5 内置了多种预定义的按钮样式，每种样式都有着自身的语义目的，并且为按钮增添了独特外观。只要元素带有 .btn 类，就会继承圆角按钮的默认外观，示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <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>
</body>

</html>

在这里插入图片描述

  • 这些按钮类不仅可以应用在 <button> 元素上，还可用于 <a> 、 <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="重置按钮">

在这里插入图片描述

（二）、按钮边框设置

Bootstrap 5 提供了八个轮廓 / 边框按钮。当鼠标移动到这些按钮上时，会添加突出的效果，代码示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <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>
</body>

</html>

在这里插入图片描述

（三）、按钮尺寸调整

我们可以轻松设置 Bootstrap 5 按钮的大小，使用 .btn-lg 类能够让按钮看起来比较大，而使用 .btn-sm 类则会使按钮看起来比较小，示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <button type="button" class="btn btn-primary btn-lg" >大号按钮</button>
  <button type="button" class="btn btn-primary btn-sm">小号按钮</button>
</body>

</html>

在这里插入图片描述

（四）、块级按钮创建

若想创建跨越父元素整个宽度的块级按钮，只需添加 .btn-block 类就可以进行设置，同时在父级元素中添加 .d-grid 类，示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
   <!-- 最新的 Bootstrap5 核心 css 文件 -->
   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
   <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
   <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="d-grid">
    <button type="button" class="btn btn-primary btn-block">100% 宽度的按钮</button>
  </div>
</body>

</html>

在这里插入图片描述

（五）、活动 / 禁用按钮设置

按钮还可以设置为激活或者禁止点击的状态。通过 .active 类能够设置按钮是可用的，利用 disabled 属性可以设置按钮不可点击。

  • 不过需要注意的是，<a> 元素不支持 disabled 属性，对于链接元素，可以通过添加 .disabled 类来禁止点击，示例如下：
<!DOCTYPE html>
<html lang="en">

<head>
   <!-- 最新的 Bootstrap5 核心 css 文件 -->
   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
   <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
   <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <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>
</body>

</html>

在这里插入图片描述

二、Bootstrap按钮组

（一）、基本按钮组

要创建一个按钮组，只需将一系列带有 .btn 类的按钮包装在 <div> 元素中，然后在其上应用 .btn-group 类。此外，还能在单个按钮上应用 .active 类来指示活动状态，示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
   <!-- 最新的 Bootstrap5 核心 css 文件 -->
   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
   <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
   <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="btn-group">
    <button type="button" class="btn btn-success active">按钮一</button>
    <button type="button" class="btn btn-warning">按钮二</button>
    <button type="button" class="btn btn-danger">按钮三</button>
  </div>
</body>

</html>

在这里插入图片描述

（二）、按钮组的大小设置

  • 可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小，这样能够对整个按钮组进行大小调整，而无需逐个对按钮进行操作，示例如下：
<!DOCTYPE html>
<html lang="en">

<head>
   <!-- 最新的 Bootstrap5 核心 css 文件 -->
   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
   <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
   <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="btn-group btn-group-lg">
    <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>
</body>

</html>

在这里插入图片描述

（三）、垂直按钮组

如果希望按钮组显示为垂直堆叠而不是水平堆叠的样式，只需将类 .btn-group 替换为类 .btn-group-vertical，示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
   <!-- 最新的 Bootstrap5 核心 css 文件 -->
   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
   <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
   <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">标题一</button>
    <button type="button" class="btn btn-primary">标题二</button>
    <button type="button" class="btn btn-primary">标题二</button>
  </div>
</body>

</html>

在这里插入图片描述

非常感谢您的阅读，喜欢的话记得三连哦

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/936124.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

储能技术方案综述

储能技术方案综述

全球电量浪费现状 根据国际可再生能源机构&#xff08;IRENA&#xff09;和其他研究机构的数据&#xff0c;全球范围内光伏和风电的电量浪费主要表现为发电弃风弃光、输电损耗和储能不足等方面。 弃风弃光现象 弃风率&#xff1a;指风电场在有风时未能发出的电量占总发电量的比…
阅读更多...
深入探索：createThread与cancelThread的用法及实例

深入探索：createThread与cancelThread的用法及实例

在多线程编程领域，线程的创建与管理是核心技能之一。本文将详细介绍两个关键函数：createThread（用于创建新线程）和cancelThread（用于取消已存在的线程），并通过具体实例展示它们的用法。需要注意的是，不同的编程语言和线程库可能有不同的API设计，但基本概念是相通的。本…
阅读更多...
Java基础学习：java常用启动命令

Java基础学习：java常用启动命令

一、java -jar 1、系统属性传递 使用形式&#xff1a;java -DpathD:\jacoco -jar 获取方式&#xff1a;System.getProperties() 2、系统参数传递 使用形式&#xff1a;java -jar application.jar --jacocoPathD:\tomcat 获取方式&#xff1a;通过启动方法入口main的参数arg…
阅读更多...
guava 整合springboot 自定义注解实现接口鉴权调用保护

guava 整合springboot 自定义注解实现接口鉴权调用保护

文章目录 一、简要概述二、实现过程1. pom引入依赖2. 自定义注解3. 定义切面4. 定义权限检查逻辑 三、注解使用四、运行结果五、源码放送 一、简要概述 Guava Cache是一个全内存的本地缓存实现&#xff0c;它提供了线程安全的实现机制。我们借助expireAfterWrite过期时间设置和…
阅读更多...
nginx 部署 ModSecurity3

nginx 部署 ModSecurity3

一、查看本地nginx版本 nginx是yum安装的 # nginx -v nginx version: nginx/1.26.2 二、安装依赖工具 # yum install -y gcc-c flex bison yajl lmdb lua curl-devel curl GeoIP-devel zlib-devel pcre-devel pcre2-devel libxml2-devel ssdeep-devel libtool autoconf aut…
阅读更多...
threejs——无人机概念切割效果

threejs——无人机概念切割效果

主要技术采用着色器的切割渲染，和之前写的风车可视化的文章不同，这次的切割效果是在着色器的基础上实现的，并新增了很多可调节的变量，兄弟们，走曲儿~ 线上演示地址，点击体验 源码下载地址，点击下载 正文 从图中大概可以看出以下信息，一个由线组成的无人机模型，一个由…
阅读更多...
【LeetCode】每日一题 2024_12_13 K 次乘运算后的最终数组 I（暴力）

【LeetCode】每日一题 2024_12_13 K 次乘运算后的最终数组 I（暴力）

前言 每天和你一起刷 LeetCode 每日一题~ 小聊两句 1、今天是 12.13 南京大屠杀国家公祭日。铭记历史&#xff0c;勿忘国耻。 2、今天早上去看了 TGA 年度游戏颁奖&#xff0c;小机器人拿下了年度最佳游戏&#xff0c;所有人都震惊了&#xff0c;大伙纷纷问到&#xff0c;谁…
阅读更多...
向达梦告警日志说声hello

向达梦告警日志说声hello

为了调试和跟踪一些业务功能&#xff0c;通常会创建一个日志表&#xff0c;写入每个关键步骤的信息。也可以向达梦数据库的告警日志输出信息&#xff0c;然后通过查看告警日志即可。 在达梦的告警日志中输出一个信息可以这样 SQL> DBMS_SYSTEM.KSDWRT(2,hi dm);
阅读更多...
MySQL 索引事务

MySQL 索引事务

目录 1. 索引是什么 2. 索引的相关操作 3. 索引的原理 4. 事务是什么 5. 事务的使用 6. 事务的原理 1. 索引是什么 索引是用来加快查询的机制&#xff0c;是针对某个表的指定列来设置的&#xff0c;查询条件如果就是使用这个带有索引的列来查询&#xff0c;那么查询速度…
阅读更多...
基于django协同过滤的音乐推荐系统的设计与实现

基于django协同过滤的音乐推荐系统的设计与实现

一、摘要 随着现代音乐的快速发展&#xff0c;协同过滤的音乐推荐系统已成为人们业余生活的需求。该平台采用Python技术和django搭建系统框架&#xff0c;后台使用MySQL数据库进行信息管理&#xff1b;通过用户管理、音乐分类管理、音乐信息管理、歌曲数据管理、系统管理、我的…
阅读更多...
代码随想录算法训练营第51期第14天 | 226. 翻转二叉树、101. 对称二叉树、104.二叉树的最大深度、111.二叉树的最小深度

代码随想录算法训练营第51期第14天 | 226. 翻转二叉树、101. 对称二叉树、104.二叉树的最大深度、111.二叉树的最小深度

226. 翻转二叉树 226. 翻转二叉树https://leetcode.cn/problems/invert-binary-tree/1.昨天忘了声明&#xff0c;如果都用C的话&#xff0c;我大概率写不完&#xff0c;所以思路方面&#xff0c;我可能考虑用pyhon先写&#xff0c;后续会用文心一言转换成C 2.这里可以直接用层…
阅读更多...
雨晨 24H2 IoT 企业版 ltsc 2024 Hotpatch 极简 26100.2605

雨晨 24H2 IoT 企业版 ltsc 2024 Hotpatch 极简 26100.2605

文件: 雨晨 24H2 IoT 企业版 ltsc 2024 Hotpatch 极简 26100.2605 install.esd 大小: 1970652896 字节 修改时间: 2024年12月13日, 星期五, 18:06:39 MD5: 3DCB989B62B6656B2CB34B0D88EBEE45 SHA1: C6E890223892B7A3EDA59E4881C70214DD546DB7 CRC32: 13EDFA89 与往版&#xff…
阅读更多...
AI大模型开发实战：基于LangGraph、Ollama构建本地AI智能体

AI大模型开发实战：基于LangGraph、Ollama构建本地AI智能体

一、理解 AI 智能体 AI 智能体是能够感知其环境并采取行动以实现特定目标的实体或系统。这些智能体可以从简单的算法到能够进行复杂决策的复杂系统。 以下是关于 AI 智能体的一些关键点&#xff1a; &#xff08;1&#xff09;感知&#xff08;Perception&#xff09;&#x…
阅读更多...
SpringCloud微服务开发（三）网关

SpringCloud微服务开发（三）网关

目录 1.网关概述 2.网关路由 3.网关登录校验 3.1自定义过滤器 3.2实现登录校验 3.3微服务获取用户 3.4OpenFeign在不同微服务之间传递用户 4.网关配置管理 5.配置热更新 6.动态路由 1.网关概述 顾明思议&#xff0c;网关就是网络的关口。数据在网络间传输&#xff0…
阅读更多...
利用DFT画有限长序列的DTFT

利用DFT画有限长序列的DTFT

MATLAB中没有DTFT函数&#xff0c;计算机不可能给出连续结果&#xff0c;可以只能利用DFT的fft函数来实现。 %% L 7; x ones(1, L) figure; tiledlayout(2,3,"TileSpacing","tight") nexttile; stem([0:L-1],x) box off title([num2str(L), points rect…
阅读更多...
MYSQL索引的分类和创建

MYSQL索引的分类和创建

目录 1、聚簇索引和非聚簇索引 tips&#xff1a; 小问题&#xff1a;主键为什么建议使用自增id? 2、普通索引 &#xff08;常规索引&#xff09;(normal) 3、唯一索引&#xff08;UNIQUE &#xff09; 唯一索引和主键的区别&#xff1a; 唯一约束和唯一索引的区别&#…
阅读更多...
Artec Leo3D扫描仪在重型机械设备定制中的应用【沪敖3D】

Artec Leo3D扫描仪在重型机械设备定制中的应用【沪敖3D】

挑战&#xff1a;一家加拿大制造商需要有效的方法&#xff0c;为富于变化且难度较高的逆向工程&#xff0c;快速、安全、准确地完成重型机械几何采集。 解决方案&#xff1a;Artec Leo, Artec Studio, Geomagic for SOLIDWORKS 效果&#xff1a;Artec Leo三维扫描代替过去的手动…
阅读更多...
数据驱动模型预测控制应用于自动驾驶车辆转向

数据驱动模型预测控制应用于自动驾驶车辆转向

Application of Data-driven Model Predictive Control for Autonomous Vehicle Steering 数据驱动模型预测控制应用于自动驾驶车辆转向 Abstract With the development of autonomous driving technology, there are increasing demands for vehicle control, and MPC has b…
阅读更多...
Elasticsearch 架构及 Lucene 索引结构原理入门

Elasticsearch 架构及 Lucene 索引结构原理入门

文章目录 Elasticsearch 整体架构Lucene 索引结构Lucene 倒排索引核心原理倒排索引倒排表&#xff08;Posting List&#xff09; Elasticsearch 整体架构 一个 ES Index 在集群模式下&#xff0c;有多个Node&#xff08;节点&#xff09;组成&#xff0c;每个节点就是ES的 inst…
阅读更多...
【源码阅读系列】(四)进程间通信(一)

【源码阅读系列】(四)进程间通信(一)

进程间的通信 为什么需要进程间通信&#xff1f; 操作系统中的进程隔离机制确保了各个进程在独立的内存空间中运行&#xff0c;并通过严格的机制防止进程间的非法访问。然而&#xff0c;在某些场景下&#xff0c;进程间的通信&#xff08;Inter-process Communication, IPC&a…
阅读更多...
最新文章

Copyright @ 2022~2023