Bootstrap3系列：按钮组

1. 基本实例

1.1 示例代码

<div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

　　.btn-group中包含多个.btn

1.2 示例效果

2. 按钮工具栏

2.1 示例代码

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-step-backward"></span>
        </button>
        <button type="button" class="btn btn-default"">
            <span class="glyphicon glyphicon-backward"></span>
        </button>
    </div>
    <div class="btn-group">
        <span class="btn btn-default"">1</span>
        <span class="btn btn-default"">2</span>
        <span class="btn btn-default"">...</span>
        <span class="btn btn-default"">9</span>
        <span class="btn btn-default"">10</span>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default"">
            <span class="glyphicon glyphicon-forward"></span>
        </button>
        <button type="button" class="btn btn-default"">
            <span class="glyphicon glyphicon-step-forward"></span>
        </button>
    </div>
</div>

　　一个.btn-toolbar中包含多个.btn-group

2.2 示例效果

3. 大小

　　在.btn-group上添加.btn-group-*设置按钮组中的每个按钮。

3.1 示例代码

3.2 示例效果

时间： 2024-10-11 07:27:49

Bootstrap3系列：按钮组的相关文章

【Bootstrap3.0建站笔记四】按钮组，连接在一起使用

1.按钮组效果如图: HTML代码: <div class="row "> <div class="form-group col-sm-7"> <div class="btn-group"> <asp:HiddenField ID="hidden_btnActive" runat="server" /> <asp:Button ID="Butt

Bootstrap系列 -- 29. 按钮组

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

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历练实例：基本按钮组

<!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<基础十三> 按钮组

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

bootstrap按钮组

种类 -a, input , button 块级 btn-block 按钮组 btn-group btn-group-justified btn-group-vertical </div> <div class="btn-group"> <button class="btn btn-primary">按钮2</button> </div> <div class="btn-group&

下拉菜单和按钮组

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

Bootstrap 按钮组

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

Bootstrap学习按钮组

把一系列的.btn按钮放入.btn-group中即可... <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button>