Bootstrap入门（九）组件3：按钮组

先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加）

<link href="css/bootstrap.min.css" rel="stylesheet">

1.按钮组

先在容器中创建一个class为 btn-group的div

　　　　 <div class=‘container‘>
            <div class=‘btn-group‘>
                ...
            </div>
        </div>

在其中添加第一个按钮组

　　　　 <div class=‘container‘>
            <div class=‘btn-group‘>
                <button type="button" class="btn btn-default">left</button>
                <button type="button" class="btn btn-default">mid</button>
                <button type="button" class="btn btn-default">right</button>
            </div>
        </div>

效果为：

默认的按钮组是水平放置的，如果我们想垂直放置，可以把class=‘btn-group‘改为class=‘btn-group-vertical‘，新添加

　　　　　　　<div class=‘btn-group-vertical‘>
                <button type="button" class="btn btn-default">left</button>
                <button type="button" class="btn btn-default">mid</button>
                <button type="button" class="btn btn-default">right</button>
            </div>

效果为：

2.按钮工具栏

创建一个 class=‘btn-toolbar‘的div

　　　　<div class=‘btn-toolbar‘>
           ...
        </div>

在里面可以新建多个按钮组，可以使用到组件1的字体图标，比如

　　　　 <div class=‘btn-toolbar‘>
            <div class=‘btn-group‘>
                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
            </div>
            <div class=‘btn-group‘>
                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
            </div>
            <div class=‘btn-group‘>
                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
            </div>
        </div>

为了方便使用了同一个图标，可以按实际情况修改，成为一个工具栏，效果为

3.按钮组的大小

bootstrap是响应式布局，在尺寸方面也有要求，其实跟之前的区别不大

　　　　 <div class="container">
            <div class=‘btn-group btn-group-lg‘>
                <button type="button" class="btn btn-default">left</button>
                <button type="button" class="btn btn-default">mid</button>
                <button type="button" class="btn btn-default">right</button>
            </div>

            <div class=‘btn-group btn-group‘>
                <button type="button" class="btn btn-default">left</button>
                <button type="button" class="btn btn-default">mid</button>
                <button type="button" class="btn btn-default">right</button>
            </div>
            <div class=‘btn-group btn-group-sm‘>
                <button type="button" class="btn btn-default">left</button>
                <button type="button" class="btn btn-default">mid</button>
                <button type="button" class="btn btn-default">right</button>
            </div>
            <div class=‘btn-group btn-group-xs‘>
                <button type="button" class="btn btn-default">left</button>
                <button type="button" class="btn btn-default">mid</button>
                <button type="button" class="btn btn-default">right</button>
            </div>
        </div>

效果非常明显，为

4.两端对齐排列的按钮组

　　　　 <div class="btn-group btn-group-justified">
            <div class=‘btn-group‘>
                <button type="button" class="btn btn-default">left</button>
            </div>
             <div class=‘btn-group‘>
                <button type="button" class="btn btn-default">mid</button>
            </div>
             <div class=‘btn-group‘>
                <button type="button" class="btn btn-default">right</button>
            </div>
        </div>

他会继承父类全部的宽度

效果为：

时间： 2024-10-27 14:02:03

Bootstrap入门（九）组件3：按钮组的相关文章

Bootstrap组件之按钮组

.btn-group--设置div为按钮组: .btn-group-toolbar--设置div为按钮工具栏(须包裹按钮组): .btn-group-lg..btn-group-sm..btn-group-xs--改变按钮组的尺寸: .btn-group-vertivcal--设置按钮组垂直堆叠排列: .btn-group-justified--设置div包裹的按钮组充满父元素: <!DOCTYPE html> <html lang="en"> <head

Bootstrap历练实例：基本按钮组

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:基本按钮组</title> <meta charset="utf-8" /> <meta name="viewpor

Bootstrap入门（六）按钮和图片

先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="stylesheet"> 按钮 1.不单单按钮自身有不同的形式(btn-default .btn-primary 等),放在不同的div中也有不同的效果 <div class="container"> <button type="button" class="btn btn-defau

Bootstrap入门九：图片

1.响应式图片在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放. 如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center. 请参考助手类章节了解更多关于 .center-block 的

Bootstrap入门（十）组件4：按钮组与下拉菜单结合

先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javascript"></script> <script

BootStrap入门教程 (三) ：可重用组件（按钮，导航，标签，徽章，排版，缩略图，提醒，进度条，杂项）

上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前端工具集,内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels),徽章(Badges),排版(Typography),缩略图( thumbnails),提醒(Alert),进度条(progress bar),杂项(Miscellaneous).

Bootstrap<基础十三> 按钮组

原文:Bootstrap<基础十三> 按钮组按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件添加可选的 JavaScript 单选框和复选框样式行为. 下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class: Class 描述代码示例 .btn-group 该 class 用于形成基本的按钮组.在 .btn-group 中放置一系列带有 class .btn 的按钮. <

Bootstrap 按钮组

按钮组允许多个按钮被堆叠在同一行上,当您想要把按钮对齐在一起时,使用按钮组就显得非常有用了. 下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class: Class 描述代码示例 .btn-group 该 class 用于形成基本的按钮组.在 .btn-group 中放置一系列带有 class .btn 的按钮. <div class="btn-group"> <button type="button" class=&quo

Bootstrap系列 -- 29. 按钮组

单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行.不过我们同样可以直接只调用bootstrap.js文件.因为这个文件已集成了button.js插件功能.对于结构方面,非常的简单.使用一个名为“btn-group”的容器,把多个按钮放到这个容器中. 除了可以使用<button>元素之外,还可以使用其他标签元素,比如<a>标签.唯