【Bootstrap学习 day7】

Bootstrap按钮

按钮样式
使用.btn相关类实现











在这里插入图片描述
按钮类可以用于

在这里插入图片描述
按钮设置边框
Bootstrap5还提供了八个轮廓/边框按钮。鼠标移动到按钮上添加突出到效果:









在这里插入图片描述
按钮尺寸
使用.btn-lg类设置大按钮,使用.btn-sm设置小按钮



在这里插入图片描述

块级按钮
如需要创建跨越父元素整个宽度的块级按钮,通过添加.btn-block类设置,.d-grid类设置在父级元素中:

在这里插入图片描述

class 描述
.btn-lg 这会让按钮看起来比较大
.btn-sm 这会让按钮看起来比较小
.btn-block 这会创建块级的按钮,会横跨父元素的全部宽度

活动/禁用按钮
按钮可设置为激活或者禁止点击的状态
.active类可以设置按钮是可用的,disabled属性可以设置按钮是不可点击的。注意元素不支持disabled属性,你可以通过添加.disabled类来禁止链接的点击。



禁止点击的链接

在这里插入图片描述
注意:disabled类只会使链接在视觉上看起来像已禁用,但是除非从中删除href属性,否则该链接将保持可点击状态。
按钮组
要创建一个按钮组,只需将一系列具有.btn类的按钮包装在

元素中,然后在其上应用.btn-group类。还可以在单个按钮上应用.active类以指示活动状态。
基本的按钮组

在这里插入图片描述

按钮组的大小
可以使用.btn-group-lg|sm|xs类来设置按钮组的大小,可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。
垂直按钮组
可以使用按钮组显示为垂直堆叠而不是水平堆叠。为此,只需将类.btn-group替换为类.btn-group-vertical

【Bootstrap学习 day7】_第1张图片

你可能感兴趣的:(bootstrap,学习,前端)