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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
javascript的BOM汇总
Jul 16 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
javascript实现的简单计时器
Jul 19 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
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教程 基本语法
2009/10/23 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
基于python的字节编译详解
2017/09/20 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
python Paramiko使用示例
2020/09/21 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
教师推荐信范文
2013/11/24 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
婚前财产公证书
2014/04/10 职场文书
大学生毕业个人总结
2015/02/15 职场文书
幼儿园六一主持词
2015/06/30 职场文书
勤俭节约主题班会
2015/08/13 职场文书
python如何在word中存储本地图片
2021/04/07 Python
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android
CSS的calc函数用法小结
2022/06/25 HTML / CSS