Bootstrap禁用某个按钮组

禁用某个按钮组

某些特殊情况下，可能需要垂直分组的按钮效果。这也很简单，只需把 .btn-group类换成.btn-group-vertical类，就可以让按钮组中的按钮堆叠排列。堆叠排列的按钮组中，支持按钮下拉菜单，但不支持拼接式按钮下拉菜单。如：

<div class="btn-group-vertical" role="group"aria-label="Vertical button group">
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>

效果如图 3‑19所示：

图3-19 堆叠排列的按钮组

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap禁用某个按钮组相关推荐

Bootstrap组件_按钮组
按钮组通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为.<!DOCTYPE html> <html lang="en&qu ...
Bootstrap 禁用的按钮
对于链接,只要添加 .disabled 类,就可以实现颜色变浅.褪掉渐变的效果,并让按钮看起来无法点击.当鼠标移动按钮上时,按钮的样式不再发生变化.如: <a href="#" ...
Bootstrap系列之按钮组（Button group）
文章の目录 1.基本示例 2.按钮工具栏 3.Sizing 4.嵌套 5.Vertical variation 写在最后将一系列按钮与按钮组一起放在一行中,并使用JavaScript增强它们的功能. ...
Bootstrap按钮组中按钮的尺寸
按钮的尺寸在按钮组中,你可以为每个按钮应用按钮的尺寸类,如 .btn-lg..btn-sm或.btn-xs ,来调整按钮的大小. 考虑到这种方式比较麻烦,Bootstrap专门为按钮组提供了额外的尺 ...
yii2 常用组件 -- 按钮组（ButtonGroup）
简介 yii2 bootstrap组件,按钮组(ButtonGroup)的实例演示如下实例 <?php use yii\bootstrap\ButtonGroup; use yii\boots ...
Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
一.按钮按钮是网页中不可缺少的一种组件,例如页面中搜索.注册等按钮.按钮还广泛应用于表单.下拉菜单.模态框等场景中. 1.预定义样式类 Bootstrap提供了btn来定义按钮,btn ...
bootstrap中单个按钮、按钮组、徽章、进度条
单按钮: 背景按钮:bootstrap提供了具有特殊意义背景的按钮样式,使用时只需给自己的按钮(button.input.a)加bootstrap提供的类名即可,其具体如下: 类名描述 .btn 基 ...
禁用/启用按钮和链接的最简单方法是什么（jQuery + Bootstrap）
本文翻译自:What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap) Sometimes I u ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...

Bootstrap禁用某个按钮组

禁用某个按钮组

Bootstrap禁用某个按钮组相关推荐

最新文章

热门文章