JS组件Bootstrap按钮组与下拉按钮详解


Posted in Javascript onMay 10, 2016

本文先为大家分享按钮组的使用方法,具体内容如下

一、按钮组(Button Groups)

1、单个按钮组
用.btn-group封装多个带.btn的<button>

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div>

2、多个按钮组
将多个<div class="btn-group">放进<div class="btn-toolbar">中。

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div>

3、垂直按钮组
向.btn-group添加.btn-group-vertical。

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

二、下拉按钮(Button Dropdowns)

例子

<div class="btn-group"> 
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
  Action 
  <span class="caret"></span> 
 </a> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div>

1、控制大小
同样使用.btn-large、.btn-small、.btn-mini控制大小。

2、分割的下拉按钮

<div class="btn-group"> 
 <button class="btn">Action</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div>

3、向上出现的菜单

<div class="btn-group dropup"> 
 <button class="btn">Dropup</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div>

三、JavaScript

例子
加载状态。添加data-loading-text="Loading..."。

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button> 

开关状态。添加data-toggle="button"。

<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
 

复选框。在btn-group后添加data-toggle="buttons-checkbox"。

<div class="btn-group" data-toggle="buttons-checkbox"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div>

单选。在btn-group后添加data-toggle="buttons-radio"。

<div class="btn-group" data-toggle="buttons-radio"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div>

用法
JavaScript代码触发开关状态。
$().button("toggle") 
也可添加data-toggle属性自动触发。
<button type="button" class="btn" data-toggle="button" >…</button> 

使用JavaScript代码触发加载状态,同时按钮显示data-loading-text属性指定的值。

$().button("loading") 

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button> 
注意:Firefox在页面载入时会保持按钮无效状态。变通方案是在按钮上应用autocomplete="off"。

使用JavaScript代码重置按钮状态。
$().button("reset") 

重置按钮状态,并将按钮文字变成指定的文字。下例的complete仅为例子,可以替换。

<button class="btn" data-complete-text="finished!" >...</button> 
<script> 
 $('.btn').button('complete') 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
详细分析vue响应式原理
Jun 22 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Bootstrap按钮下拉菜单组件详解
May 10 #Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 #Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 #Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 #Javascript
Bootstrap模仿起筷首页效果
May 09 #Javascript
基于jquery实现智能表单验证操作
May 09 #Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 #Javascript
You might like
php 常用字符串函数总结
2008/03/15 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
Joomla开启SEF的方法
2016/05/04 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
python抓取网页内容示例分享
2014/02/24 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
五种Python转义表示法
2020/11/27 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
数据保密承诺书
2014/06/03 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
mysql事务隔离级别详情
2021/10/24 MySQL