189 8069 5689

怎样使用Bootstrap按钮-创新互联

小编给大家分享一下怎样使用Bootstrap按钮,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

创新互联建站是网站建设技术企业,为成都企业提供专业的做网站、网站建设,网站设计,网站制作,网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制适合企业的网站。10年品质,值得信赖!

Bootstrap 按钮

如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:

以下样式可用于, 原始按钮 成功按钮 信息按钮 警告按钮 危险按钮 链接按钮

效果

怎样使用Bootstrap按钮

按钮大小

下表列出了获得各种大小按钮的 class:

怎样使用Bootstrap按钮

 大的原始按钮  大的按钮

 默认大小的原始按钮  默认大小的按钮

 小的原始按钮  小的按钮

 特别小的原始按钮  特别小的按钮

 块级的原始按钮  块级的按钮

效果

怎样使用Bootstrap按钮

按钮状态

Bootstrap 提供了激活、禁用等按钮状态的 class,下面将进行详细讲解。

激活状态

按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。

怎样使用Bootstrap按钮

下表列出了让按钮元素和锚元素呈激活状态的 class:

 默认按钮  激活按钮

 原始按钮  激活的原始按钮

怎样使用Bootstrap按钮

禁用状态

当您禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class:

怎样使用Bootstrap按钮

下面的实例演示了这点:

 默认按钮  禁用按钮

 原始按钮  禁用的原始按钮

 链接  禁用链接

 原始链接  禁用的原始链接

效果

怎样使用Bootstrap按钮

按钮标签

您可以在

看完了这篇文章,相信你对“怎样使用Bootstrap按钮”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道,感谢各位的阅读!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享标题:怎样使用Bootstrap按钮-创新互联
分享路径:http://cdxtjz.cn/article/djjogc.html

其他资讯