Bootstrap3基础 btn-group-vertical 按钮组（横着、竖着排列）

内容	参数
OS	Windows 10 x64
browser	Firefox 65.0.2
framework	Bootstrap 3.3.7
editor	Visual Studio Code 1.32.1
typesetting	Markdown

code

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><!-- IE将使用最新的引擎渲染网页 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 页面的宽度与设备屏幕的宽度一致初始缩放比例 1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo</title><meta name="author" content="www.cnblogs.com/kemingli"><!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]-->
</head><body><!-- start : demo --><div class="container"><div><button class="btn btn-danger">李</button><button class="btn btn-warning">杏仁</button><button class="btn btn-primary">乌梅</button></div><hr /><div class="btn-group"><button class="btn btn-danger">韭</button><button class="btn btn-warning">葱汁</button><button class="btn btn-primary">葱实</button></div><hr /><div class="btn-group-vertical"><button class="btn btn-danger">葫芦</button><button class="btn btn-warning">丝瓜</button><button class="btn btn-primary">青芝</button></div><!--按钮组是给按钮的父元素加的--></div><!-- end : demo --><!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 --><script src="bootstrap/js/jquery.min.js"></script><!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 --><script src="bootstrap/js/bootstrap.min.js"></script>
</body></html>

result

resource

[ 文档 ] getbootstrap.com/docs/3.3
[ 源码 ] github.com/twbs/bootstrap
[ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
[ 平台 ] www.cnblogs.com
[ 平台 ] github.com
[ 扩展 - 平台] www.bootcss.com
[ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

Bootstrap是前端开源框架，优秀，值得学习。
博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。
Firefox是开源的浏览器，优秀，值得关注。
面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。
博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

转载于:https://www.cnblogs.com/kemingli/p/10545358.html

Bootstrap3基础 btn-group-vertical 按钮组（横着、竖着排列）相关推荐

Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
一.按钮按钮是网页中不可缺少的一种组件,例如页面中搜索.注册等按钮.按钮还广泛应用于表单.下拉菜单.模态框等场景中. 1.预定义样式类 Bootstrap提供了btn来定义按钮,btn ...
Bootstrap系列之按钮组（Button group）
文章の目录 1.基本示例 2.按钮工具栏 3.Sizing 4.嵌套 5.Vertical variation 写在最后将一系列按钮与按钮组一起放在一行中,并使用JavaScript增强它们的功能. ...
Bootstrap3 按钮组插件
按钮组将按钮组放在特定的容器中,不必编写JavaScript代码,就可以让按钮组具有HTML的复选框(checkbox)或单选框(radio)的效果. 1)复选按钮组复选按钮组是类似于复选框的一组 ...
Bootstrap3系列：按钮组
1. 基本实例 1.1 示例代码 <div class="btn-group"><button type="button" class=&qu ...
按钮组（Button group）
要想让单选按钮表现出某种"排它"行为,你必须把它们加入到一个"按钮组" (ButtonGroup)中.不过,正如下面的例子所演示的,任何AbstractButt ...
Bootstrap禁用某个按钮组
禁用某个按钮组某些特殊情况下,可能需要垂直分组的按钮效果.这也很简单,只需把 .btn-group类换成.btn-group-vertical类,就可以让按钮组中的按钮堆叠排列.堆叠排列的按钮组中, ...
Bootstrap两端对齐的按钮组
两端对齐的按钮组 Bootstrap3两端对齐的按钮组可以将一组按钮拉长为相同的尺寸,并让整个按钮组填满父元素的宽度.对于按钮组中的按钮式下拉菜单也同样适用. 如果按钮组中的按钮是 <a> ...
Bootstrap按钮组嵌套
按钮组嵌套按钮组允许嵌套,即可以在一个.btn-group中嵌套另一个.btn-group.比如,当你想给按钮组中的某一个按钮添加下拉菜单时,就会用到这种嵌套结构.如: <div class= ...
Bootstrap创建按钮组
按钮组在实际应用中,单个按钮有时候并不能满足我们的业务需求,常常需要将多个按钮组合在一起使用,形成一个页面组件,比如富文本编辑器中的一组小图标按钮等. 创建按钮组要创建按钮组,只需把相关的链接或按 ...

Bootstrap3基础 btn-group-vertical 按钮组（横着、竖着排列）

code

result

resource

Bootstrap3基础 btn-group-vertical 按钮组（横着、竖着排列）相关推荐

最新文章

热门文章