您现在的位置是：网站首页> 编程资料编程资料

Bootstrap3.0学习笔记之按钮的样式_心得技巧_网页制作_

2023-11-07 279人已围观

简介在bootstrap中, 按钮(button)有不同的六种方式. 默认的button的样式是: btn. 这个是必要的样式. 还有其他的六种不同方式展现.分别为: 默认, 主要, 成功, 信息, 警告, 危险, 链接.今天我们就来仔细探讨下按钮的风格样式。

本文主要讲解的是按钮的样式。

选项

使用上面列出的class可以快速创建一个带有样式的按钮。


复制代码
代码如下:

尺寸

需要让按钮具有不同尺寸吗？使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。


复制代码
代码如下:

通过给按钮添加.btn-block可以使其充满父节点100%的宽度，而且按钮也变为了块级（block）元素。


复制代码
代码如下:

活动状态

当按钮处于活动状态时，其表现为被按压下（底色更深，边框夜色更深，内置阴影）。对于B


复制代码
代码如下:
Primary link
Link

可以和上面的button进行一下对比。

禁用状态

通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。

按钮元素

为

可以把鼠标放在按钮上点击查看效果。

跨浏览器的兼容性
如果为

链接元素


复制代码
代码如下:
Primary link
Link

这是和上面的按钮做一个对比。

我们把.disabled作为工具class使用，就像.activeclass一样，因此不需要增加前缀。

链接功能不受影响
上面提到的class只是改变的外观，不影响功能。在此文档中，我们通过JavaScript代码禁用了链接的默认功能。

Context-specific usage
While button classes can be used on and

可做按钮使用的Html标签

可以为、

跨浏览器表现
作为最佳实践，我们强烈建议尽可能使用

总结

本节主要讲解的内容是button按钮的样式。主要是灵活的运行这几个样式进行控制就可以了。