实际运用当中,总会碰到垂直显示的效果。在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. Spring 下载与安装以及spring 3.2.9 jar包详解

    一.Spring简介  Spring官网改版后,很多项目的完整zip包下载链接已经隐掉了,虽然Spring旨在引导大家用更“高大上”的maven方式来管理所依赖的jar包,但是完全没想到中国的国情,在 ...

  2. matlab2015b调用摄像头

    参考链接:http://blog.csdn.net/lyqmath/article/details/7307429 本人电脑是宏碁T5000 调用代码: % By lyqmathclc; clear ...

  3. Keepalived高可用集群搭建(转载linuxIDC)

    1.Keepalived简介 Keepalived是一个基于VRRP协议来实现的WEB服务高可用方案,可以利用其来避免单点故障.使用多台节点安装keepalived.其 他的节点用来提供真实的服务,同 ...

  4. Windows路由表详解

    对于路由器的路由表,大部分网管朋友都很熟悉,但是对于windows的路由表,可能了解的人就相对少一些.今天我们就一起来看看windows路由表.   一. windows路由表条目解释 1. 使用ip ...

  5. leetcode-Single Number III 找独数

    Single Number III Given an array of numbers nums, in which exactly two elements appear only once and ...

  6. FZU 2150 Fire Game --两点同步搜索

    枚举两点,然后同步BFS,看代码吧,很容易懂的. 代码: #include <iostream> #include <cstdio> #include <cstring& ...

  7. HDU 1892 See you~

    最裸的二维树状数组,但是因为内存太大(c[1010][1010]),好像不能运行,结果蒙着写,写了好久.. 代码: #include <iostream> #include <cst ...

  8. 第51课 C++对象模型分析(下)

    1. 单继承对象模型 (1)单一继承 [编程实验]继承对象模型初探 #include <iostream> using namespace std; class Demo { protec ...

  9. [Editor]Unity Editor类常用方法

    Editor文档资料 Unity教程之-Unity Attribute的使用总结:http://www.unity.5helpyou.com/3550.html 利用unity3d属性来设置Inspe ...

  10. Unity2D之让土豆人动起来

    Unity2D功能 Unity3D最新的4.3版本,其中最大的新功能就是这个2D工具了.我这里简单介绍一下这个2D工具是怎样使用的. 首先,在我们创建项目的时候,面板上面多了一个2d和3d的选择,这两 ...