种类

-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">
<button class="btn btn-primary">按钮3</button>
</div>
</div>
<br><br>
<div class="btn-group-vertical">
<a href="#" class="btn btn-primary">按钮1</a>
<a href="#" class="btn btn-primary">按钮2</a>
<a href="#" class="btn btn-primary">按钮3</a>
</div>
<div class="btn-group-vertical btn-group-lg">
<a href="#" class="btn btn-primary">按钮1</a>
<a href="#" class="btn btn-primary">按钮2</a>
<a href="#" class="btn btn-primary">按钮3</a>
</div>
<div class="btn-group-vertical btn-group-sm">
<a href="#" class="btn btn-primary">按钮1</a>
<a href="#" class="btn btn-primary">按钮2</a>
<a href="#" class="btn btn-primary">按钮3</a>
</div>
<div class="btn-group-vertical btn-group-xs">
<a href="#" class="btn btn-primary">按钮1</a>
<a href="#" class="btn btn-primary">按钮2</a>
<a href="#" class="btn btn-primary">按钮3</a>
</div>
<br><br>
<a href="#" class="btn btn-primary">按钮 <span class="caret"></span></a>
<button class="btn btn-primary">按钮 <span class="caret"></span></button>
<input type="button" value="按钮" class="btn btn-primary"><span class="caret"></span>
<div class="btn-group">
<a href="#" class="btn btn-primary">按钮</a>
<a href="#" class="btn btn-primary"><span class="caret"></span></a>
</div>
<div class="btn-group">
<button class="btn btn-primary">按钮</button>
<button class="btn btn-primary"><span class="caret"></span></button>
</div>
<div class="btn-group dropup">
<button class="btn btn-primary">按钮</button>
<button class="btn btn-primary"><span class="caret"></span></button>
</div>
<br><br>
<div class="github-style">
<div class="btn-group btn-group-sm">
<button class="btn btn-default active"><span class="glyphicon glyphicon-eye-open"></span> Watch <span class="caret"></span></button>
<button class="btn btn-default">3,064</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default active"><span class="glyphicon glyphicon-star"></span> Unstar</button>
<button class="btn btn-default">36,296</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default active"><span class="glyphicon icon-fork"></span> fork</button>
<button class="btn btn-default">9,258</button>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>
</html>

bootstrap按钮组的更多相关文章

  1. BootStrap 按钮组简单介绍

    学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdow ...

  2. Bootstrap按钮组学习

    简介 通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为. 按钮组中的工具提示和弹出框需要特别的设置 当为 .btn-group 中的元素应用工具提示或 ...

  3. bootstrap 按钮组的嵌套

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

  4. Bootstrap 按钮组

    连在一起的按钮:.btn-group <div class="btn-group" role="group"> <button class=& ...

  5. Bootstrap按钮组 按钮工具栏 嵌套

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  6. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  7. Bootstrap-CL:按钮组

    ylbtech-Bootstrap-CL:按钮组 1.返回顶部 1. Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Boot ...

  8. Bootstrap<基础十三> 按钮组

    按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...

  9. Bootstrap系列 -- 29. 按钮组

    单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常 ...

随机推荐

  1. GIT安装完需要做以下配置

    安装完GIT后需要做以下配置: 一.找到git的安装目录,查找etc目录下的gitconfig配置文件,编辑此文件在最后一行添加如下内容: [gui]     encoding = utf-8 [sv ...

  2. JAVA数组的典型操作

  3. WinForm使用皮肤图文步骤

    Winfrom本身样式提供的是Windows经典样式.. 不说多丑也绝称不上好看..有时为了用户体验就不得不需要想办法弄漂亮一点..皮肤包会是一个不错的选择.. 不废话了..开整.. 首先从网上下载免 ...

  4. Spring之FactoryBean

    首先要分辨BeanFactory 与 FactoryBean的区别, 两个名字很像,所以容易搞混 BeanFactory: 以Factory结尾,表示它是一个工厂类,是用于管理Bean的一个工厂 Fa ...

  5. Xcode常用技巧(1)-使用Xcode进行代码分析及GDB调试

    1. 使用Xcode分析代码,分析分为静态分析及动态分析 静态分析:(Xcode-Product-Analyze)  检测代码是否有潜在的内存泄露  编译器认为不太合适的代码 运行结果: 若程序有 ...

  6. 弹出框一 之 基于bootstrap和jquery的自定义弹出框

    (function ($) { window.Ewin = function () { var html = '<div id="[Id]" class="moda ...

  7. vim ctags使用方法

    一.用好系统自带软件ctags 大部分的unix系统都有ctags软件,它能跟vim很好地合作. 用途:     生成c语言的标签文件,实现相关c文件之间的跳转. 用法:     1.生成标签文件   ...

  8. URAL1826. Minefield 题解

    原题: http://acm.timus.ru/problem.aspx?space=1&num=1826 1826. MinefieldTime limit: 0.5 secondMemor ...

  9. JCarouselLite--帮助文档

    jcarousellite是一款jquery插件,可以控制文档元素滚动,丰富的参数设置可以控制滚动的更多细节,是一款不可多得的滚动插件. ------------------ 官网地址:http:// ...

  10. NetBeans使用习惯:升级与保存配置

    如何升级:点击 netbeans 的升级更新 ,即可升级版本:不推荐官网下载进行安装,否则会出现,以前的旧版本8.0的目录和8.0.1目录,虽然它会自动检测到以前版本的配置,提示导入... 如何备份: ...