我们常把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果。使用的时候,只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级

<div class="btn-group">
<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="container">
<div class="row">
<div class="col-lg-12"> <div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default">
首页
</button>
<button class="btn btn-default">
产品展示
</button>
<button class="btn btn-default">
国际交流
</button>
<button class="btn btn-default">
企业认证
</button>
<div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
联系我们
<span class="glyphicon glyphicon-triangle-bottom"></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> </div>
</div>
</div>

Bootstrap系列 -- 31.嵌套分组的更多相关文章

  1. 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程

    反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑)   背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...

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

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

  3. JavaScript正则表达式模式匹配(4)——使用exec返回数组、捕获性分组和非捕获性分组、嵌套分组

    使用exec返回数组 var pattern=/^[a-z]+\s[0-9]{4}$/; var str='google 2012'; alert(pattern.exec(str)); //返回一个 ...

  4. Bootstrap系列 -- 32. 按钮垂直分组

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

  5. 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

  6. Bootstrap系列 -- 9. 表格

    一. Bootstrap 表格样式支持 Bootstrap提供了六种不同风格的样式支持,其中一个基础样式,4个附件样式,1个响应式设计样式 1. .table:基础表格 2. .table-strip ...

  7. Bootstrap系列 -- 10. 网格布局

    一. 实现原理 网格布局是通过容器的大小,平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别. 实现步骤如下: (1) 数据行.row 必须包含在容器.container 中 ...

  8. Bootstrap系列 -- 41. 带表单的导航条

    有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单.navbar-left”让 ...

  9. Bootstrap系列 -- 39. 导航条添加标题

    在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来 ...

随机推荐

  1. 解决 Eclipse 项目有红感叹号的方法

    原因:显示红色感叹号是因为jar包的路径不对 解决: 在项目上右击:Build Path -> Configure Build Paht...(或Propertise->Java Buil ...

  2. 一个初学者对于MVC架构的理解

    我很早之前就开始接触.NET开发,一直都在2.0的框架下,所以对于MVC这种架构,听说过,但没有具体使用过,近期和外部朋友接触时,有了解到他们公司在使用MVC这种架构,所以自己就找来相关资料了解一下M ...

  3. C自学笔记-递归与迭代的使用方法笔记与两者的使用场合

    递归和迭代在刚开始学C语言的时候就学过,但是不知道怎么使用.今天遇到一个题目分析过后 我瞬间想起来之前学过递归的方法,做完题后顺便翻了翻书整理了这个笔记.题目大概是这样的. 题目:猴子吃桃问题:猴子第 ...

  4. JVM 垃圾回收算法

    在说垃圾回收算法之前,先谈谈JVM怎样确定哪些对象是“垃圾”. 1.引用计数器算法: 引用计数器算法是给每个对象设置一个计数器,当有地方引用这个对象的时候,计数器+1,当引用失效的时候,计数器-1,当 ...

  5. poj-1083-Moving Tables(hdu-1050)

    Moving Tables Time Limit: 1000MS Memory Limit: 10000K Total Submissions: Accepted: Description The f ...

  6. python中for和if else的使用

    In []: a = set('abcd') In []: b = set('ef') In []: def match(x,y): ....: for i in x: ....: for j in ...

  7. HDU 1556 Color the ball

    这题用线段树的话简直就是一个水题..不过刚学树状数组,要用一下. 题意:每次给你a,b,表明a~b之间涂色,然后最后一次输出每个气球被涂色的次数. 要用树状数组就要考虑怎么转化为前缀和问题,这题可以这 ...

  8. 安全框架 - Shiro与springMVC整合的注解以及JSP标签

    Shiro想必大家都知道了,之前的文章我也有提过,是目前使用率要比spring security都要多的一个权限框架,本身spring自己都在用shiro,之前的文章有兴趣可以去扒一下 最近正好用到s ...

  9. QTP基础学习(二)启动与设置

    1.启动QTP选择要求的Add-in 默认带有3个Add-in,之后可以安装其他的Add-in,如.net的Add-in 2.设置QTP的选项 点击Tools-Options,弹出如下框: 3.建立记 ...

  10. Oracle中sequence的使用方法

    在Oracle数据库中,sequence等同于序列号,每次取的时候sequence会自动增加,一般会作用于需要按序列号排序的地方. 1.Create Sequence (注释:你需要有CREATE S ...