良许Linux教程网 干货合集 Bootstrap按钮组使用方法

Bootstrap按钮组使用方法

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局,并且在V3版本之后坚持移动设备优先。

Bootstrap是一个前端开发的框架,其实就是一堆HTML代码,有一些自带的CSS样式类(只需要记忆常用的CSS样式类)

Bootstrap按钮组使用方法

下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class:

Class 描述 代码示例
.btn-group 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
.btn-toolbar 该 class 有助于把几组

结合到一个

中,一般获得更复杂的组件。
...
...
.btn-group-lg, .btn-group-sm, .btn-group-xs 这些 class 可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。
...
...
...
.btn-group-vertical 该 class 让一组按钮垂直堆叠显示,而不是水平堆叠显示。
...

显示详细信息

基本的按钮组

下面的实例演示了上面表格中讨论到的 class .btn-group 的使用:

实例

           

尝试一下 » 结果如下所示: Bootstrap 按钮组介绍Bootstrap 按钮组介绍

按钮工具栏

下面的实例演示了上面表格中讨论到的 class .btn-toolbar 的使用:

"toolbar">
           
           
           

尝试一下 » 结果如下所示: Bootstrap 按钮组介绍Bootstrap 按钮组介绍

按钮的大小

下面的实例演示了上面表格中讨论到的 class .btn-group-* 的使用:

"btn-group btn-group-lg">            
   
"btn-group btn-group-sm">            
   
"btn-group btn-group-xs">            

尝试一下 » 结果如下所示: Bootstrap 按钮组介绍Bootstrap 按钮组介绍

嵌套

您可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group 。当您想让下拉菜单与一系列按钮组合使用时,就会用到这个。

           
           

尝试一下 » 结果如下所示: Bootstrap 按钮组介绍Bootstrap 按钮组介绍

垂直的按钮组

下面的实例演示了上面表格中讨论到的 class .btn-group-vertical 的使用:

           
           

尝试一下 » 结果如下所示: Bootstrap 按钮组介绍Bootstrap 按钮组介绍

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

img
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部