Bootstrap的按钮和按钮组设计

news/2025/2/22 5:40:03/

目录

  • 01-按钮的作用
  • 02-按钮的基本知识
  • 03-按钮组的相关知识
    • 03-1-单个按钮组效果
    • 03-2-对多个按钮组进行包装
    • 03-3-将按钮组和输入框组合
    • 03-4-垂直分布布局的按钮组
    • 03-5-控制按钮组的大小
  • 04-利用按钮的嵌套形成有导航栏的子菜单

01-按钮的作用

按钮的作用是什么？
常见的作用就是选择某个东西，比如淘宝购物时，选择商品的规格就是典型的按钮的作用。
在这里插入图片描述

02-按钮的基本知识

在Bootstrap中，按钮的基本知识有以下几点。
01-在Bootstrap中，使用类btn来定义按钮。
02-btn类不仅可以在<button>标签上使用，还可以在<a>和<input>标签上使用。
03-按钮的背景颜色是可以改变的，比如下面的效果：
在这里插入图片描述
04-按钮的边框颜色也是可以改变的，比如下面的效果：
在这里插入图片描述
05-按钮的尺寸大小也是可以改变的，比如下面的效果：
在这里插入图片描述
06-按钮可以设置激活状态和禁用状态。
激活状态下，按钮背景颜色更深、边框变暗、带内阴影效果。
禁用状态下，按钮背景颜色变浅，且不具有交互性，单击不会有任何响应。
效果如下图所示：
在这里插入图片描述

03-按钮组的相关知识

多个按钮合在一起，就成了按钮组。

03-1-单个按钮组效果

用类btn-group实现单组按钮样式的效果，类btn-group实现将多个单一的按钮一个挨一个的排列。
注意类btn-group只是实现按钮样式，真正按钮的功能是由标签button来实现的。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>按钮组效果</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">按钮组效果</h3>
<div class="btn-group"><button type="button" class="btn btn-primary">主页</button><button type="button" class="btn btn-warning">热门课程</button><button type="button" class="btn btn-info">技术支持</button><button type="button" class="btn btn-secondary">联系我们</button>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述
在这里插入图片描述
如果我们取消掉外层容器的 btn-group 效果，即相关代码改为下面这样的代码：

<div><button type="button" class="btn btn-primary">主页</button><button type="button" class="btn btn-warning">热门课程</button><button type="button" class="btn btn-info">技术支持</button><button type="button" class="btn btn-secondary">联系我们</button>
</div>

那么效果如下：
在这里插入图片描述
在这里插入图片描述
可见，当去掉外层容器的 btn-group 效果后，按钮与按钮之间就形成了空隙。

03-2-对多个按钮组进行包装

利用类btn-toolbar实现对多个按钮组进行包装。单个按钮组由上面介绍的类btn-group进行包装，而多个按钮组就要用btn-toolba进行包装了。

btn-toolbar 是 Bootstrap 中的一个类，它用于创建按钮工具栏，用于组织和排列一组按钮或其他交互元素。这个类通常与按钮 (btn) 和按钮组 (btn-group) 一起使用，以便将它们放在一个水平或垂直的工具栏中，以实现更好的界面布局和用户体验。

以下是 btn-toolbar 类的一些主要特点和用法：

  1. 水平和垂直工具栏：

    • 水平工具栏：将按钮水平排列在一行中。
    • 垂直工具栏：将按钮垂直排列在一列中。

  2. 按钮组合：您可以在 btn-toolbar 中组合不同类型的按钮，包括单个按钮 (btn)、按钮组 (btn-group) 和分隔符 (btn-divider)，以创建复杂的工具栏布局。

  3. 按钮对齐：您可以通过在 btn-toolbar 上添加 justify-content-start、justify-content-center 和 justify-content-end 类来控制按钮在工具栏中的对齐方式。

下面是一个简单的示例，演示了如何使用 btn-toolbar 来创建一个水平工具栏：

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"><div class="btn-group mr-2" role="group" aria-label="First group"><button type="button" class="btn btn-secondary">按钮 1</button><button type="button" class="btn btn-secondary">按钮 2</button><button type="button" class="btn btn-secondary">按钮 3</button></div><div class="btn-group" role="group" aria-label="Second group"><button type="button" class="btn btn-secondary">按钮 4</button><button type="button" class="btn btn-secondary">按钮 5</button></div>
</div>

在这个示例中，我们创建了一个包含两个按钮组的水平工具栏。btn-toolbar 类用于包装按钮组，并使用 btn-group 类来定义每个按钮组。

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>包装多个按钮组</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">包装多个按钮组</h3>
<div class="btn-toolbar"><div class="btn-group mr-2"><button type="button" class="btn btn-primary">上一页</button></div><div class="btn-group mr-2"><button type="button" class="btn btn-warning">1</button><button type="button" class="btn btn-warning">2</button><button type="button" class="btn btn-warning">3</button><button type="button" class="btn btn-warning">4</button><button type="button" class="btn btn-warning">5</button><button type="button" class="btn btn-warning">6</button><button type="button" class="btn btn-warning">7</button><button type="button" class="btn btn-warning">8</button></div><div class="btn-group"><button type="button" class="btn btn-info">下一页</button></div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述
在这里插入图片描述
如果把最外层的div的类btn-toolbar去掉，效果如下：
在这里插入图片描述
在这里插入图片描述
可见，其实就是“上一页”中间的数字页之间的空隙变大一点而已，其它效果没啥区别。

03-3-将按钮组和输入框组合

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>设置按钮组和输入框结合的效果</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">设置按钮组和输入框结合的效果</h3>
<div class="btn-toolbar"><div class="btn-group mr-2"><button type="button" class="btn btn-warning">1</button><button type="button" class="btn btn-warning">2</button><button type="button" class="btn btn-warning">3</button><button type="button" class="btn btn-warning">4</button><button type="button" class="btn btn-warning">5</button><button type="button" class="btn btn-warning">6</button></div><div class="input-group"><div class="input-group-prepend"><div class="input-group-text" id="btnGroupAddon">@</div></div><input type="text" class="form-control" placeholder="邮箱"></div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述
在这里插入图片描述
从上面的运行效果中我们可以看出：按钮和输入框是互斥的。

03-4-垂直分布布局的按钮组

利用类btn-group-vertical可以实现垂直分布布局的按钮组效果。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>垂直布局按钮组</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="popper.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">垂直布局按钮组</h3>
<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-warning">男装女装</button><!--添加下拉菜单--><div class="dropright"><button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">珠宝箱包</button><div class="dropdown-menu"><a class="dropdown-item" href="#">黄金饰品</a><a class="dropdown-item" href="#">珠宝饰品</a><a class="dropdown-item" href="#">旅行箱包</a><a class="dropdown-item" href="#">潮流女包</a></div></div><button type="button" class="btn btn-warning">水果特产</button>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

03-5-控制按钮组的大小

可以利用类btn-group-lg或类btn-group-sm实现控制按钮组的大小。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>按钮组大小</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="popper.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">按钮组大小</h3>
<div class="btn-group btn-group-lg mr-2"><button type="button" class="btn btn-primary">箱包皮具</button><button type="button" class="btn btn-primary">珠宝黄金</button>
</div><hr/>
<div class="btn-group mr-2"><button type="button" class="btn btn-warning">旅行箱包</button><button type="button" class="btn btn-warning">潮流女包</button>
</div><hr/>
<div class="btn-group btn-group-sm"><button type="button" class="btn btn-info">单肩包</button>
<button type="button" class="btn btn-info">双肩包</button><button type="button" class="btn btn-info">斜挎包</button>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

04-利用按钮的嵌套形成有导航栏的子菜单

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>嵌套按钮组</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="popper.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">嵌套按钮组</h3>
<div class="btn-group"><button type="button" class="btn btn-secondary">首页</button><div class="btn-group"><button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">热门课程</button><div class="dropdown-menu"><a class="dropdown-item" href="#">网络安全训练营</a><a class="dropdown-item" href="#">网站开发训练营</a><a class="dropdown-item" href="#">Python智能训练营</a><a class="dropdown-item" href="#">PHP开发训练营</a></div></div><button type="button" class="btn btn-secondary">技术支持</button><button type="button" class="btn btn-secondary">联系我们</button>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述


http://www.ppmy.cn/news/1149989.html

相关文章

Linux工具-远程登录/访问

Linux工具-远程登录/访问

测试环境&#xff1a;ubuntu 20.04 一、ssh服务 SSH&#xff08;Secure Shell Protocol&#xff0c;安全的壳程序协议&#xff0c;基于tcp协议默认使用22端口&#xff09;&#xff0c;它可以通过数据包加密技术将待传输的数据包加密后再传输到网络上。通过ssh协议/服务&#…
阅读更多...
C/C++面试常见知识点

C/C++面试常见知识点

目录 C/C语言C内存分区malloc/free与new/delete的区别联合体联合体大小的计算 结构体对齐为什么需要结构体内存对齐 结构体与联合体的区别左值引用与右值引用指针和引用的区别迭代器失效static关键字在C语言的作用进程地址空间的分布内联函数 三大特性构造函数不能是虚函数析构…
阅读更多...
软件测试/测试开发丨Python深拷贝与浅拷贝 学习笔记

软件测试/测试开发丨Python深拷贝与浅拷贝 学习笔记

点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接&#xff1a;https://ceshiren.com/t/topic/27704 深拷贝与浅拷贝 1、什么是拷贝 拷贝是指使用一个已存在一个对象&#xff0c;生成一个新的对象&#xff0c;两个对象在内存中具有独立的存储空间。…
阅读更多...
Unity编辑器从PC平台切换到Android平台下 Addressable 加载模型出现粉红色，类似于材质丢失的问题

Unity编辑器从PC平台切换到Android平台下 Addressable 加载模型出现粉红色，类似于材质丢失的问题

Unity编辑器在PC平台下使用Addressable加载打包好的Cube&#xff0c;运行发现能正常显示。 而在切换到Android平台下&#xff0c;使用Addressable时加载AB包&#xff0c;生成Cube对象时&#xff0c;Cube模型呈现粉红色&#xff0c;出现类似材质丢失的问题。如下图所示。 这是…
阅读更多...
容器部署的openstack进入数据库流程、查看install目录流程、容器部署使用virsh命令流程【查看计算节点上的虚拟机信息】

容器部署的openstack进入数据库流程、查看install目录流程、容器部署使用virsh命令流程【查看计算节点上的虚拟机信息】

说明 何为容器部署&#xff0c;无需多说吧&#xff1f; 如下 计算节点的容器 进入数据库方法【控制节点】 获取nova密码 首先获取nova数据库的密码 控制节点执行&#xff1a;grep mysql /etc/kolla/nova-api/nova.conf 【目录不是固定的&#xff0c;可以通过find命令查找n…
阅读更多...
代码随想录二刷day58

代码随想录二刷day58

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣739. 每日温度二、力扣496. 下一个更大元素 I 前言 一、力扣739. 每日温度 class Solution {public int[] dailyTemperatures(int[] temperatures) {i…
阅读更多...
Java面试题-0919

Java面试题-0919

集合篇 Java面试题-集合篇HashMap底层实现原理概述javaSE进阶-哈希表 为了满足hashmap集合的不重复存储&#xff0c;为什么要重写hashcode和equals方法&#xff1f; 首先理解一下hashmap的插入元素的前提&#xff1a; hashmap会根据元素的hashcode取模进行比较&#xff0c;当…
阅读更多...
MacOS安装conda

MacOS安装conda

下载conda 地址https://repo.anaconda.com/miniconda/ 选择合适的安装文件下载 运行安装 执行命令安装 bash Miniconda3-latest-MacOSX-arm64.sh 设置环境变量 echo export PATH"/Users/your_user_name/miniconda3/bin:$PATH" >> ~/.zshrc source ~/.zsh…
阅读更多...
最新文章

Copyright @ 2022~2023