- .disabled:禁用按钮
按钮大小
- .btn-lg:制作一个大按钮
大的原始按钮
大的按钮
- .btn-sm:制作一个小按钮
小的原始按钮
小的按钮
- .btn-xs:制作一个超小按钮
特别小的原始按钮
特别小的按钮
- .btn-block:块级按钮(拉伸至父元素100%的宽度)
块级的原始按钮
块级的按钮
按钮状态
Bootstrap 提供了激活、禁用等按钮状态的 class
(1)激活状态
按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。
- 按钮元素:添加 .active class 来显示它是激活的
默认按钮
激活按钮
- 锚元素:添加 .active class 到 按钮来显示它是激活的
原始按钮
激活的原始按钮
(2)禁用状态
当你禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。
- 按钮元素:添加 disabled 属性 到
<button>
按钮
默认按钮
禁用按钮
原始按钮
禁用的原始按钮
- 锚元素:添加 disabled class 到
<a>
按钮
按钮标签
您可以在 <a>
、<button>
或 <input>
元素上使用按钮 class。但是建议您在 <button>
元素上使用按钮 class,避免跨浏览器的不一致性问题。
实例
按钮
(1)按钮组
在 div 中直接使用 .btn-group 可以创建按钮组:
Apple
Samsung
Sony
(2)自适应大小的按钮组
可以通过 .btn-group-justified 类来设置自适应大小的按钮组。
注意: 如果是 元素, 你需要在外层使用 .btn-group 类来包裹:
#### 最后更多分享:**前端字节跳动真题解析**
s=“btn btn-primary”>Samsung
注意: 如果是 元素, 你需要在外层使用 .btn-group 类来包裹:
#### 最后更多分享:**前端字节跳动真题解析**
- [外链图片转存中…(img-rc3SjsRi-1718004280016)]