bootstrap46-垂直的按钮组

简介:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 垂直的按钮组</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  

</head>

<body>

<div class="container">

<div class="btn-group-vertical">

<button class="btn btn-default">Button1</button>

<button class="btn btn-default">Button2</button>

<div class="btn-group-vertical">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

下拉

<span class="caret"></span>

</button>

<ul class="dropdown-menu">

        <li><a href="#">下拉链接 1</a></li>

        <li><a href="#">下拉链接 2</a></li>

    </ul>

</div>

</div>

</div>

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>


本文转自 素颜猪 51CTO博客,原文链接:http://blog.51cto.com/suyanzhu/1895819

相关文章
|
1月前
|
前端开发
Bootstrap5 按钮组1
Bootstrap 5 的按钮组功能允许将多个按钮排列在同一行。通过在 `&lt;div&gt;` 元素上添加 `.btn-group` 类来实现。还可以使用 `.btn-group-lg` 或 `.btn-group-sm` 类来调整按钮组的大小。示例代码展示了如何创建不同大小的按钮组。
|
7月前
|
前端开发
Bootstrap 5 保姆级教程(五):按钮组 & 徽章
Bootstrap 5 保姆级教程(五):按钮组 & 徽章
|
前端开发
bootstrap 组件 警告框 徽章 面包屑导航 按钮 按钮组 学习总结
bootstrap 组件 警告框 徽章 面包屑导航 按钮 按钮组 学习总结
|
前端开发
Bootstrap教程(11)--按钮与按钮组
本文目录 1. 概述 2. 按钮的使用 2.1 设置Bootstrap按钮 2.2 调整按钮大小 2.3 调整按钮颜色样式 3. 按钮组的使用 3.1 使用按钮组 3.2 调整按钮组的大小 3.3 调整按钮组方向 4. 小结
458 0
Bootstrap教程(11)--按钮与按钮组
|
开发框架 前端开发 开发者
Bootstrap 组件_按钮组|学习笔记
快速学习 Bootstrap 组件_按钮组
222 0
|
前端开发 开发者 容器
Bootstrap响应式前端框架笔记八——按钮组
Bootstrap响应式前端框架笔记八——按钮组
229 0
|
前端开发 容器
Bootstrap系列 -- 29. 按钮组
  单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等   按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行。
858 0
|
前端开发 JavaScript 容器
|
前端开发 JavaScript
Bootstrap<基础十三> 按钮组
原文:Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为。
927 0
Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
详情请查看http://aehyok.com/Blog/Detail/16.html   个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:http://www.cnblogs.com/aehyok/p/3981965.html 感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,那不妨点个推荐吧,谢谢支持:-O。
624 0