种类

-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. tableview中在tableheaderView上放一个视图,第一次进入视图显示不正常,往下拉视图仍然不正常,往上拉视图正常

    解决办法: frame来源不正常,从直接在viewDidLoad方法中设置的frame,改为 - (void)viewDidLayoutSubviews { [super viewDidLayoutS ...

  2. servlet request getHeader(“x-forwarded-for”) 获取真实IP

    request方法客户端IP: request.getRemoteAddr() 输出:192.168.0.106 客户端主机名:request.getRemoteHost()输出:abc reques ...

  3. iOS- Terminating app due to uncaught exception 'NSRangeException'

    错误描述: Terminating app due to uncaught exception 'NSRangeException', reason: '*** -[__NSArrayM object ...

  4. [工具]json转类

    摘要 这周在园子看到一篇介绍JsonCSharpClassGenerator这个工具的文章,感觉挺实用的,在现在项目中json用的是最多的,所以在转换对应的类的时候,确实挺频繁,所以就研究了一下这个工 ...

  5. SQL Server2008 表旋转(pivot)技术

    参考资料: http://www.cnblogs.com/xiashengwang/p/3503554.html

  6. addEventListener和on的区别

    为什么需要addEventListener? 先来看一个片段: html代码 <div id="box">追梦子</div> 用on的代码 1 window ...

  7. cad中关于点样式点的绘制

    点样式 从0开始, 默认的就是0 0= 一个小点; 1= 空的, 什么都不显示; 2= +加号; 3= X 叉号 设置点样式的命令是: pdmode: 可以假设认为是: point default m ...

  8. CSS3:flex布局应用

    想把先前的整理的东西贴出来,怎奈总是有额外事情发生,额,教训电脑要离水杯远点~~ 推荐一本书,<编写可维护的Javascript>这是Nicbolas C.Zakas写的,他的<Ja ...

  9. Linux下C语言高手成长路线(转载)

    建议学习路径: 首先先学学编辑器,vim, emacs什么的都行. 然后学make file文件,只要知道一点就行,这样就可以准备编程序了. 然后看看<C程序设计语言>K&R,这样 ...

  10. 不挣扎了,开始学习LINQ TO XML,进而来解析网页。

    找到了别人遇到和我一样的问题:http://ylad.codeplex.com/discussions/430095(英文) 一位叫做Mister Goodcat的提供了信息: Short answe ...