实际运用当中,总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。

<div class="btn-group-vertical">
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">公司简介</a></li>
<li><a href="##">企业文化</a></li>
<li><a href="##">组织结构</a></li>
<li><a href="##">客服服务</a></li>
</ul>
</div>
</div> <div class="btn-group-vertical"> <button class="btn btn-default">首页</button>
<button class="btn btn-default">公司介绍</button>
<div class="btn-group">
<button class="btn btn-default" data-toggle="dropdown">联系我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">蔬菜</a></li>
<li><a href="#">蔬菜</a></li>
<li><a href="#">蔬菜</a></li>
</ul>
</div>
</div>

Bootstrap系列 -- 32. 按钮垂直分组的更多相关文章

  1. Bootstrap系列 -- 30. 按钮工具栏

    在富文本编辑器中,将按钮组分组排列在一起,比如说复制.剪切和粘贴一组:左对齐.中间对齐.右对齐和两端对齐一组.Bootstrap框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组“btn-grou ...

  2. Bootstrap系列 -- 22. 按钮详解

    Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格.默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色 ...

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

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

  4. Bootstrap系列 -- 22. 按钮

    Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格.默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色 ...

  5. Bootstrap系列 -- 35. 按钮的向下向上三角形

    按钮的向下三角形,我们是通过在<button>标签中添加一个“<span>”标签元素,并且命名为“caret”. <div class="btn-group d ...

  6. Bootstrap系列 -- 34. 按钮下拉菜单

    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...

  7. Bootstrap历练实例:垂直的按钮组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

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

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

  9. ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

随机推荐

  1. MyCat 学习笔记 第八篇.数据分片 之 求摸运算分片

    1 应用场景 Mycat 自带了多套数据分片的机制,其实根据数值取摸应该是最简单的一种. 优点:数据离散概率较为平均,可以有效的提高应用的数据吞吐. 缺点:比较明显,后期数据运维与迁移比较困难.好在M ...

  2. PHP笔记(PHP高级篇)

    高级篇中将涉及数据库的使用以及Cookie和Session会话,提高PHP的开发效率和运行效率 PHP程序员需要掌握的MySQL操作 为项目设计表 使用SQL语句 MySQL的目录结构 data目录中 ...

  3. python set集合简单使用

    Python 提供了强大的集合操作方法,我们可以完成数学中集合的并集.交集.差集等操作,如下: >>> a = {1,2,3} >>> b = {3,4,5} &g ...

  4. Microsoft Community

    一.简介 Microsoft Community 是一个免费社区和讨论论坛,项目开发遇到的问题可以在这里进行提出和解答. 二.地址 http://answers.microsoft.com/zh-ha ...

  5. c++ initialize_list

    看到这么一个东西,可以实现花括号( "{" "}" )初始化容器类. 使用时需包含头文件 #include <initialize_list> 我们 ...

  6. Solr主从集群配置简要说明

    关于solr的集群主要分为主从和SolrCloud两种.主从,比较适合以读为主的场景.SolrCloud适合数据量大,时不时会有更新的情形.那么solr的主从配置很简单.在solrconfig.xml ...

  7. NOIP2008 普及组T3 传球游戏 解题报告-S.B.S.

    题目描述 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:n个同学站成一个圆圈,其中的一个同学手里拿着一个球,当老师吹哨子时开始传球,每个同 ...

  8. 实习小记-python 内置函数__eq__函数引发的探索

    乱写__eq__会发生啥?请看代码.. >>> class A: ... def __eq__(self, other): # 不论发生什么,只要有==做比较,就返回True ... ...

  9. Windows系统安装Oracle 11g客户端

    一.下载 http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html以下网址来源此官方下载页网 ...

  10. [Android Studio] Android studio 多渠道打包(超简洁版)

    [Android Studio] Android studio 多渠道打包(超简洁版) 转载:http://xuyazhou.com/archives/461 http://relex.me/usin ...