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

 

  实际运用当中,总会碰到垂直显示的效果。在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>

 

转载于:https://www.cnblogs.com/qingyuan/p/4603390.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397937.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

oracle确实表达式,ORACLE正规表达式

[导读]Oracle使用正则表达式离不开这4个函数&#xff1a;Oracle使用正则表达式离不开这4个函数&#xff1a;1。regexp_like2。regexp_substr-- select regexp_substr(aaa,bb,ccccc,ddd,vvv,[^,],1,4) from dual3。regexp_instr4。regexp_replace参数1。source_char&#xff0c;…

【SpringBoot笔记】SpringBoot整合Druid数据连接池

废话少说&#xff0c;按SpringBoot的老套路来。 【step1】&#xff1a;添加依赖 <!-- 数据库连接池 --> <dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.0.25</version> </depende…

python名字排序_python 中文排序(按拼音)

pypinyin1 排序 仅按拼音首字母 排序安装pypinyinpip3 install pypinyin代码from pypinyin import lazy_pinyinchars [鑫,鹭,榕,柘,珈,骅,孚,迦,瀚,濮,浔,沱,泸,恺,怡,岷,萃,兖]chars.sort(keylambda char: lazy_pinyin(char)[0][0])print([lazy_pinyin(char) for char in cha…

struts2中非表单标签的使用 componen

2. component标签 component标签用于使用自己的自定义组件&#xff0c;这是一个非常灵活的用法&#xff0c;如果经常需要使用某个效果片段&#xff0c;就可以考虑将这个效果片段定义成一个自定义组件&#xff0c;然后在页面中使用component标签来使用该自定义组件。因为使…

oracle 11g r2 rac中节点时间不同步,Oracle11gR2安装RAC错误之--时钟不同步

系统环境&#xff1a; 操作系统&#xff1a;RedHat EL5 Cluster&#xff1a; Oracle GI(Grid Infrastructure) Oracle&#xff1a; Oracle 11.2.0.1.0 如图所示&#xff1a;RAC 系统架系统环境&#xff1a;操作系统&#xff1a;RedHat EL5Cluster&#xff1a; Oracle GI(Grid I…

vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能

Vue ElementUI项目中使用vue-pdf实现简单预览&#xff0c;供大家参考&#xff0c;具体内容如下1、安装 vue-pdfnpm install --save vue-pdf2、在vue页面中导入对应的组件我这是通过点击 预览 按钮 获取id打开一个dialog来实现:visible.sync"viewVisible" width"…

酒店预定系统

系统功能模块功能图 用例图 E-R图 转载于:https://www.cnblogs.com/qlly-20/p/9052461.html

leetcode 145. Binary Tree Postorder Traversal

传送门 145. Binary Tree Postorder Traversal QuestionEditorial SolutionMy SubmissionsTotal Accepted: 106482Total Submissions: 291244Difficulty: HardGiven a binary tree, return the postorder traversal of its nodes values. For example:Given binary tree {1,#…

74-A/D指标,Accumulation/Distribution,积累/派发线,离散指标.(2015.7.1)

A/D指标&#xff0c;Accumulation/Distribution积累/派发线&#xff0c;离散指标观井映天2015.7.1转载于:https://www.cnblogs.com/i201102053/p/10626638.html

linux 密码修改下次,问题:如何强制用户在下次登录Linux时更改密码

当你使用默认密码创建用户时&#xff0c;你必须强制用户在下一次登录时更改密码。当你在一个组织中工作时&#xff0c;此选项是强制性的。因为老员工可能知道默认密码&#xff0c;他们可能会也可能不会尝试不当行为,看到下图会不会有为用户担心的感觉&#xff1a;使用 passwd 命…

tableau获取筛选器值_认识Tableau中的筛选器

Tableau中的筛选器&#xff1a;(1)提取筛选器(2)数据源筛选器(3)上下文筛选器(4)维度筛选器(5)度量筛选器(6)参数筛选器(7)表计算筛选器(8)页面筛选器对筛选器进行简单的分类&#xff1a;数据层(提取筛选器、数据源筛选器、上下文筛选器、参数筛选器)视图层(维度筛选器、度量筛…

类与对象的实例属性

class Chinese: countrychina def __init__(self,name): self.namename def playball(self,ball): print(%s正在打%s%(self.name,ball))name1input(>>>)#输入输出尽量别放函数里p1Chinese(name1)p1.playball(足球)print(p1.country)#china,类的…

svn的merge使用例子

先说说什么是branch。按照Subversion的说法&#xff0c;一个branch是某个development line&#xff08;通常是主线也即trunk&#xff09;的一个拷贝&#xff0c;见下图&#xff1a; branch存在的意义在于&#xff0c;在不干扰trunk的情况下&#xff0c;和trunk并行开发&#xf…

C# 课堂总结2-数据类型及转换方式

一、输入输出语句 Console.ReadLine(); 会等待直到用户按下回车&#xff0c;一次读入一行Console.ReadKey(); 则是等待用户按下任意键&#xff0c;一次读入一个字符。 二、数据类型 主要掌握&#xff1a; 1.值类型&#xff1a;int 整型&#xff0c;float 浮点型&#xff08;单精…

linux编译c gedit,[2018年最新整理]LINUX-Gedit文本编辑器.ppt

[2018年最新整理]LINUX-Gedit文本编辑器Gedit文本编辑器 系别&#xff1a;电信系 班级&#xff1a;08 自动化 姓名&#xff1a;张小亚 学号&#xff1a; 30 号 辅导老师&#xff1a;兰建平 Gedit的启动与打开文本 Gedit可以用命令或主菜单的方式两种方式启动。打开文件可以在终…

jsx怎么往js里传参数_在vue中使用jsx语法的使用方法

什么是JSX?JSX就是Javascript和XML结合的一种格式。React发明了JSX&#xff0c;利用HTML语法来创建虚拟DOM。当遇到我为什么要在vue中用JSX?想折腾一下呗,开玩笑.最开始是因为近期在学习react,在里面体验了一把jsx语法,发现也并没有别人说的很难受的感觉啊,于是就想尝试在vue…

如何对数据库中的表以及表中的字段进行重命名

貌似没有直接的SQL语句可以做到这一点&#xff0c;除非删除再加。。。 SQL SERVER 中提供了存储过程&#xff1a;SP_RENAME 对表进行重命名&#xff1a; 更多详见&#xff1a;https://msdn.microsoft.com/zh-cn/library/ms188351.aspx转载于:https://www.cnblogs.com/xwgli/p/4…

系统优化-----sysctl.conf文件内核设置参数详解

摘自https://blog.csdn.net/tallercc/article/details/52823075 sysctl.conf工作原理 sysctl命令被用于在内核运行时动态地修改内核的运行参数&#xff0c;可用的内核参数在目录/proc/sys中。它包含一些TCP/IP堆栈和虚拟内存系统的高级选项&#xff0c; 这可以让有经验的管理员…

How Tomcat works — 一、怎样阅读源码

在编程的道路上&#xff0c;通过阅读优秀的代码来提升自己是很好的办法。一直想阅读一些开源项目&#xff0c;可是没有合适的机会开始。最近做项目的时候用到了shiro&#xff0c;需要做集群的session共享&#xff0c;经过查找发现tomcat的session本身就支持&#xff0c;发现自己…