脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap按钮组

Bootstrap按钮组简单实现代码

 更新时间：2017年03月06日 11:29:21   作者：deepquiet  
这篇文章主要为大家详细介绍了Bootstrap按钮组的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Bootstrap按钮组的具体代码，供大家参考，具体内容如下

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<!-- 按钮组 -->
<div class="btn-group">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr>

<!-- 按钮组,垂直 -->
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr/>

<!-- 按钮组嵌套下拉菜单 -->
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown<span class="caret"></span></button>

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" >Action</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" >Another action</a></li>

</ul>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<!-- 按钮组的组 -->
<div class="btn-toolbar" role="toolbar">

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr/>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr/>
<div class="btn-group">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr/>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<br/>

</div>

<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js 对象使用的小技巧实例分析

    js 对象使用的小技巧实例分析

    这篇文章主要介绍了js 对象使用的小技巧,结合实例形式分析了JavaScript对象的遍历、查找、事件监听等相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • 详解JavaScript中的4种类型识别方法

    详解JavaScript中的4种类型识别方法

    JavaScript中检测对象类型的运算符有：typeof、instanceof，还有对象的constructor属性： 1) typeof 运算符 typeof 是一元运算符，返回结果是一个说明运算数类型的字符串。下面由小编给大家分享JavaScript中的4种类型识别方法，需要的朋友可以参考下本文
    2015-09-09
  • javascript中Date对象应用之简易日历实现

    javascript中Date对象应用之简易日历实现

    这篇文章主要为大家详细介绍了javascript中Date对象应用之简易日历实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • eclipse如何忽略js文件报错(附图)

    eclipse如何忽略js文件报错(附图)

    eclipse中js文件报错的情况，或许大家早已习以为常了，那么有什么好的方法可以将其忽略掉呢？如果你也在寻找此问题，那么本文或许可以帮助到你
    2013-10-10
  • javascript实现的字符串与十六进制表示字符串相互转换方法

    javascript实现的字符串与十六进制表示字符串相互转换方法

    这篇文章主要介绍了javascript实现的字符串与十六进制表示字符串相互转换方法,涉及javascript字符串转换的相关技巧,在防止SQL注入和XSS中具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript查看数据返回值的方法

    JavaScript查看数据返回值的方法

    console.log()、alert() 都是JavaScript中用于在开发过程中输出信息或向用户显示消息的不同方法,它们的主要区别在于目的、使用场景以及展示方式,本文将给大家介绍JavaScript 中怎么看数据返回值,需要的朋友可以参考下
    2024-07-07
  • JavaScript实现将网页加入收藏夹功能

    JavaScript实现将网页加入收藏夹功能

    浏览器出于安全和隐私的考虑,限制了用代码将网页加入浏览器的收藏夹,本文主要介绍了如何使用通过一些间接的方法实现这一功能,有需要的可以参考下
    2024-10-10
  • JavaScript的setter与getter方法

    JavaScript的setter与getter方法

    这篇文章主要为大家详细介绍了JavaScript的setter与getter方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • layui.js实现的表单验证功能示例

    layui.js实现的表单验证功能示例

    这篇文章主要介绍了layui.js实现的表单验证功能,结合实例形式分析了基于layui.js的事件监听、验证、判定等相关操作技巧,需要的朋友可以参考下
    2017-11-11
  • 图解JavaScript作用域链底层原理

    图解JavaScript作用域链底层原理

    当代码在一个环境中执行时,会创建变量对象的一个作用域链,作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问,下面这篇文章主要给大家介绍了关于JavaScript作用域链底层原理的相关资料,需要的朋友可以参考下
    2021-11-11

最新评论